Preset components

export const CustomerSelect = definePreset(
    BbSelect<Customer>,
    { items: getCustomers, itemText: 'name', itemValue: 'id' },
    { name: 'CustomerSelect', defaults: { label: 'Customer' } }
);

cp node_modules/bitboss-ui/dist/ai/helpers/definePreset.ts src/lib/definePreset.ts

// src/components/customers.ts
import { h } from 'vue';
import { BbBadge, BbSelect, BbTextInput } from 'bitboss-ui';
import { definePreset } from '@/lib/definePreset';
import { getCustomers, type Customer } from '@/api/customers';

const keyAccount = () =>
    h(BbBadge, { size: 'sm', variant: 'secondary' }, () => 'Key account');

// One option row, shared by both customer presets.
const customerOption = ({ item, text }: { item: Customer; text: string }) =>
    h('span', { class: 'flex w-full items-center gap-2 text-sm' }, [
        h('span', { class: 'min-w-0 flex-1 truncate' }, text),
        item.keyAccount ? keyAccount() : null,
    ]);

export const CustomerSelect = definePreset(
    // The row type: slots, pt functions and v-model follow it.
    BbSelect<Customer>,
    // Fixed: what defines the data.
    { items: getCustomers, itemText: 'name', itemValue: 'id', stash: true },
    {
        name: 'CustomerSelect',
        // Defaults: what a page may still change.
        defaults: {
            label: 'Customer',
            placeholder: 'Choose a customer',
            emptyText: 'No customers match',
        },
        slots: { option: customerOption },
    }
);

export const CustomerMultiSelect = definePreset(
    BbSelect<Customer>,
    {
        items: getCustomers,
        itemText: 'name',
        itemValue: 'id',
        multiple: true, // fixed, so v-model is number[]
        stash: true,
    },
    {
        name: 'CustomerMultiSelect',
        defaults: { label: 'Customers', emptyText: 'No customers match' },
        slots: { option: customerOption },
    }
);

// Any component, not only selects.
export const SearchInput = definePreset(
    BbTextInput,
    { type: 'search', 'prepend:icon': 'lucide:search' },
    { name: 'SearchInput', defaults: { label: 'Search' } }
);

<CustomerSelect v-model="customerId" clearable @blur="touch('customer')" />
<CustomerSelect v-model="ownerId" label="Owner">
    <template #option="{ item }">{{ item.name }} · {{ item.email }}</template>
</CustomerSelect>
<SearchInput v-model="query" placeholder="Name or email" />

 <script setup lang="ts">
 import { BbSelect, type BbSelectProps } from 'bitboss-ui';
 import { getCustomers, type Customer } from '@/api/customers';

 const props = defineProps<
-   Omit<BbSelectProps<Customer>, 'items' | 'itemText' | 'itemValue'>
+   Partial<Pick<BbSelectProps<Customer>, 'label'>>
 >();
 </script>

 <template>
    <BbSelect
-       :hint="props.hint"
        item-text="name"
        item-value="id"
        :items="getCustomers"
-       :label="props.label"
+       :label="props.label ?? 'Customer'"
    />
 </template>

✗ line 5: this wrapper declares BbSelect props it never
  passes on: `adaptive`, `append:icon`, `autocomplete`,
  `autofocus`, `clearable`, `comma`, `compact`,
  `dependencies` and 50 more. A caller's value
  type-checks and is silently dropped (declared props do
  not fall through to $attrs). Bind each one on
  <BbSelect>, or declare only what the wrapper uses
  (`Pick<BbSelectProps<…>, 'label' | …>`) and let the
  rest fall through

// bitboss-ui definePreset rev 3 — update: cp node_modules/bitboss-ui/dist/ai/helpers/definePreset.ts <this file>
/**
 * definePreset: an app component made of a bitboss-ui component with some
 * props (and slots) already set, e.g. a `CustomerSelect`.
 *
 * App-side code, not exported by `bitboss-ui`: copy it into your project,
 *   cp node_modules/bitboss-ui/dist/ai/helpers/definePreset.ts src/lib/definePreset.ts
 * and run the same command when `bitboss-ui check` reports
 * `stale-define-preset` (the stamp on line 1 is older than the shipped one).
 * Recipe: ai/guides/preset-components.md.
 *
 *   export const CustomerSelect = definePreset(
 *     BbSelect<Customer>,                                  // the row type
 *     { items: getCustomers, itemText: 'name', itemValue: 'id' }, // fixed
 *     { name: 'CustomerSelect', defaults: { label: 'Customer' } },
 *   );
 *
 * - `fixed` props are locked: passing one is a type error, and at runtime the
 *   preset value wins.
 * - `defaults` props stay optional props; the caller's value wins.
 * - `slots` are default slot renderers; a slot the caller passes wins.
 * - Nothing is declared, so `v-model`, every other prop, every listener and
 *   every slot reach the component untouched: no re-emit, no forwarding list.
 * - With `items` and a key as `itemValue` fixed, `v-model` is typed as that
 *   key's type (`number | null`, or `number[]` with `multiple`).
 *
 * Built against the types vue-tsc generates for `<script setup generic>`
 * components; the library's wrapper bench (src/wrapper-bench/) type-checks
 * and mounts it on every change.
 */
/* eslint-disable @typescript-eslint/no-explicit-any -- matching any component's props and functions */
import { defineComponent, h, type Component, type VNode } from 'vue';

type Empty = Record<never, never>;

// ─── Reading a component's public surface ───────────────────────────────────

type AnyFn = (...args: any) => any;

/** Props of a class-shaped component, or of a generic SFC (a function). */
type PropsOf<C> = C extends new (...args: any) => { $props: infer P }
    ? NonNullable<P>
    : C extends (props: infer P, ...args: any) => any
        ? P
        : never;

type CtxOf<C> = C extends AnyFn
    ? NonNullable<ReturnType<C>> extends { __ctx?: infer X }
        ? NonNullable<X>
        : never
    : never;

type SlotsOf<C> = C extends new (...args: any) => { $slots: infer S }
    ? NonNullable<S>
    : CtxOf<C> extends { slots: infer S }
        ? NonNullable<S>
        : Empty;

type EmitOf<C> = C extends new (...args: any) => { $emit: infer E }
    ? E
    : CtxOf<C> extends { emit: infer E }
        ? E
        : never;

// Vue's own props (key, ref, class, style, vnode hooks) are not presets.
type Reserved =
    | 'key'
    | 'ref'
    | 'ref_for'
    | 'ref_key'
    | 'class'
    | 'style'
    | `onVnode${string}`;

// vue-tsc types a generic SFC's props as `… & Record<string, unknown>`. A
// mapped type or `Omit` over that folds every prop into the index signature
// and nothing is checked any more, so the signature is dropped first.
type OwnProps<P> = {
    [K in keyof P as string extends K
        ? never
        : K extends Reserved
            ? never
            : K]: P[K];
};

// `const F` infers an array literal (`filterBy: []`, `items: [row]`) as a
// readonly tuple, which a mutable `string[]` prop rejects. A failed
// constraint makes F fall back to the constraint itself, and then EVERY prop
// reads as fixed (all `undefined` at the call site). So the constraint also
// accepts the readonly form of each array prop.
type Frozen<T> = T extends ReadonlyArray<infer E> ? readonly E[] : never;
type Presettable<P> = { [K in keyof P]?: P[K] | Frozen<P[K]> };

// ─── The v-model, from the fixed `items` + `itemValue` ─────────────────────

type ModelKeys = 'modelValue' | 'onUpdate:modelValue' | 'multiple';

type RowOf<P> = P extends { items?: infer I }
    ? Extract<NonNullable<I>, readonly unknown[]>[number]
    : never;

/**
 * With no `itemValue`, an option surface (a component with `itemText`) emits
 * a row's own `value` when it has one, else the row (Q60.24). BbTable keeps
 * the row.
 */
type DefaultValueOf<P> = P extends { itemText?: unknown }
    ? RowOf<P> extends infer R
        ? R extends { value: infer V }
            ? V
            : R
        : never
    : RowOf<P>;

/**
 * The value type when the preset decides it: a fixed key or getter as
 * `itemValue`, or fixed `items` with no `itemValue` (the row's own `value`,
 * else the row).
 * `never` = not decided (a dotted path, or `itemValue` left to the caller):
 * the component keeps its own model type.
 */
type ValueOf<P, F> = [RowOf<P>] extends [never]
    ? never
    : F extends { itemValue: infer K }
        ? K extends keyof RowOf<P>
            ? RowOf<P>[K]
            : K extends (row: any) => infer R
                ? R
                : never
        : F extends { items: unknown }
            ? DefaultValueOf<P>
            : never;

type ModelProps<V, F> = F extends { multiple: true }
    ? { modelValue?: V[]; 'onUpdate:modelValue'?: (value: V[]) => any }
    : F extends { multiple: false }
        ? {
                modelValue?: V | null;
                'onUpdate:modelValue'?: (value: V | null) => any;
            }
        :
                | {
                        multiple?: false;
                        modelValue?: V | null;
                        'onUpdate:modelValue'?: (value: V | null) => any;
                  }
                | {
                        multiple: true;
                        modelValue?: V[];
                        'onUpdate:modelValue'?: (value: V[]) => any;
                  };

// ─── The preset component's props, events and slots ────────────────────────

type Locked<F> = { [K in keyof F]?: never };

type PresetProps<P, F, D> = [ValueOf<P, F>] extends [never]
    ? Omit<OwnProps<P>, keyof F | keyof D> &
            Partial<Pick<OwnProps<P>, keyof D & keyof OwnProps<P>>> &
            Locked<F>
    : Omit<OwnProps<P>, keyof F | keyof D | ModelKeys> &
            Partial<Pick<OwnProps<P>, keyof D & keyof OwnProps<P>>> &
            Locked<Omit<F, ModelKeys>> &
            ModelProps<ValueOf<P, F>, F>;

type PresetEmit<C, P, F> = [ValueOf<P, F>] extends [never]
    ? EmitOf<C>
    : EmitOf<C> &
            ((
                e: 'update:modelValue',
                value: F extends { multiple: true }
                    ? Array<ValueOf<P, F>>
                    : ValueOf<P, F> | Array<ValueOf<P, F>> | null
            ) => void);

/** The shape vue-tsc gives a generic SFC, so templates check it the same way. */
type PresetComponent<Props, Slots, Emit> = ((
    props: Props & { key?: PropertyKey; class?: unknown; style?: unknown },
    ctx?: { attrs: Record<string, unknown>; slots: Slots; emit: Emit },
    expose?: (exposed: Empty) => void,
    setup?: unknown
) => VNode & {
    __ctx?: {
        props: Props;
        slots: Slots;
        emit: Emit;
        attrs: Record<string, unknown>;
        expose: (exposed: Empty) => void;
    };
}) & { name?: string };

type PresetOptions<C, F, D> = {
    /** Devtools and warning name, e.g. `'CustomerSelect'`. */
    name?: string;
    /** Props the caller may still override. The v-model keys cannot be defaults. */
    defaults?: D &
        Record<Extract<keyof D, keyof F | ModelKeys | 'itemValue'>, never>;
    /** Default slot renderers; a slot the caller passes wins. */
    slots?: Partial<SlotsOf<C>>;
};

export function definePreset<
    C,
    const F extends Presettable<OwnProps<PropsOf<C>>>,
    const D extends Presettable<OwnProps<PropsOf<C>>> = Empty,
>(
    component: C,
    fixed: F,
    options: PresetOptions<C, F, D> = {}
): PresetComponent<
    PresetProps<PropsOf<C>, F, D>,
    SlotsOf<C>,
    PresetEmit<C, PropsOf<C>, F>
> {
    const base = component as unknown as Component & {
        name?: string;
        __name?: string;
    };
    const defaults = (options.defaults ?? {}) as Record<string, unknown>;
    const presetSlots = (options.slots ?? {}) as Record<string, unknown>;
    return defineComponent({
        name: options.name ?? `${base.name ?? base.__name ?? 'Anonymous'}Preset`,
        inheritAttrs: false,
        setup(_, { attrs, slots }) {
            // The later key wins, camelCase or kebab-case alike: the caller's
            // over a default, a fixed prop over the caller's.
            return () =>
                h(base, { ...defaults, ...attrs, ...fixed }, {
                    ...presetSlots,
                    ...slots,
                } as never);
        },
    }) as never;
}