@chelone/vue 0.3.0 → 0.4.0

package/dist/components/admin/inputs/select-input.vue.d.ts

@@ -1,15 +1,22 @@
+import type { ChoiceRecord } from "../../../choices/use-choices.js";
 import type { ChoiceInputBaseProps } from "./choice-input-props.js";
 /** Props for {@link SelectInput}. */
-export interface SelectInputProps extends ChoiceInputBaseProps {
+export interface SelectInputProps<TChoice extends ChoiceRecord = ChoiceRecord> extends ChoiceInputBaseProps<TChoice> {
     /** Label of the empty option prepended to the list. Default `""` (a blank line). */
     emptyText?: string;
     /** Underlying value submitted when the empty option is chosen. Default `""`. */
     emptyValue?: string | number | boolean | null;
 }
-declare const _default: import("vue").DefineComponent<SelectInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SelectInputProps> & Readonly<{}>, {
-    label: string | false;
-    emptyText: string;
-    disableValue: string;
-    emptyValue: string | number | boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: <TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & SelectInputProps<TChoice> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/admin/inputs/select-input.vue.js

@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     choices: {},
     optionText: {},
     optionValue: {},
-    disableValue: { default: "disabled" },
+    disableValue: {},
     translateChoice: { type: Boolean },
     label: { type: [String, Boolean], default: void 0 },
     helperText: {},

package/dist/components/admin/inputs/subscription-plan-picker.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Validator } from "@chelone/core";
+import type { SourceProp, Validator } from "@chelone/core";
 /** A subscription plan a {@link SubscriptionPlanPicker} renders as one card. */
 export interface SubscriptionPlan {
     id: string;
@@ -11,7 +11,7 @@ export interface SubscriptionPlan {
 /** Props for {@link SubscriptionPlanPicker}. */
 export interface SubscriptionPlanPickerProps {
     /** The FK/field path holding the selected plan id. */
-    source: string;
+    source: SourceProp;
     /** The plans rendered as cards. */
     plans: readonly SubscriptionPlan[];
     /** Highlights one plan as recommended. */

package/dist/components/admin/inputs/text-array-input.vue.d.ts

@@ -1,7 +1,7 @@
-import type { Validator } from "@chelone/core";
+import type { SourceProp, Validator } from "@chelone/core";
 /** Props for {@link TextArrayInput}. */
 export interface TextArrayInputProps {
-    source: string;
+    source: SourceProp;
     label?: string | false;
     defaultValue?: unknown;
     validate?: Validator | readonly Validator[];

package/dist/components/admin/inputs/text-input.vue.d.ts

@@ -6,9 +6,10 @@
  * `<ValidationError>`), never an RHF `error.root.message`.
  */
 import type { Validator } from "@chelone/core";
+import type { SourceProp } from "@chelone/core";
 /** Props for {@link TextInput}. */
 export interface TextInputProps {
-    source: string;
+    source: SourceProp;
     label?: string | false;
     type?: string;
     defaultValue?: unknown;

package/dist/components/admin/inputs/time-input.vue.d.ts

@@ -7,9 +7,10 @@
  * pattern as `<DateInput>`.
  */
 import type { Validator } from "@chelone/core";
+import type { SourceProp } from "@chelone/core";
 /** Props for {@link TimeInput}. */
 export interface TimeInputProps {
-    source: string;
+    source: SourceProp;
     label?: string | false;
     defaultValue?: unknown;
     validate?: Validator | readonly Validator[];

package/dist/components/admin/inputs/use-choice-input.d.ts

@@ -21,35 +21,28 @@
  * / `resource` / `isFromReference` are stable per context, so they are read once
  * (parity with the twin's `useState` capture of the reference options).
  */
-import type { SourceProp } from "@chelone/core";
+import type { SourcePath, SourceProp } from "@chelone/core";
 import { type ComputedRef } from "vue";
 import { type ChoiceRecord, type OptionText } from "../../../choices/use-choices.js";
 /** Options for {@link useChoiceInput}. */
-export interface UseChoiceInputOptions {
+export interface UseChoiceInputOptions<TChoice extends ChoiceRecord = ChoiceRecord> {
     /** Component name used in the "must provide the source prop" error. */
     componentName: string;
     /** Inline choices — synthesized into a static context, ignoring any ambient one. */
-    choices?: readonly (string | ChoiceRecord)[];
+    choices?: readonly (string | TChoice)[];
     /** The FK/field path (falls back to the ambient reference context's source). */
     source?: SourceProp | undefined;
     /** The display path or a formatter. */
-    optionText?: OptionText;
+    optionText?: OptionText<TChoice>;
     /** The value path. Default `id` (via `useChoices`). */
-    optionValue?: string;
+    optionValue?: SourcePath<TChoice>;
     /** The disabled-flag path. Default `disabled`. */
-    disableValue?: string;
+    disableValue?: SourcePath<TChoice>;
     /** Translate a string-path label. Default `!isFromReference`. */
     translateChoice?: boolean;
-    /**
-     * The `optionText` fallback for a NON-reference context when `optionText` is
-     * omitted (a reference context always falls back to the record
-     * representation). `undefined` lets `useChoices` apply its own `name` default;
-     * the autocomplete twins pass `"name"` explicitly.
-     */
-    defaultOptionText?: OptionText;
 }
 /** The resolved choice-input surface — accessors + reactive context fields. */
-export interface UseChoiceInputResult {
+export interface UseChoiceInputResult<TChoice extends ChoiceRecord = ChoiceRecord> {
     /** The resolved `source` (guaranteed defined — the composable throws otherwise). */
     source: string;
     /** `true` for a reference context, `false` for inline choices. */
@@ -57,18 +50,18 @@ export interface UseChoiceInputResult {
     /** The referenced resource name (inline: `undefined`). */
     resource: string | undefined;
     /** The full choice list (reactive). */
-    allChoices: ComputedRef<ChoiceRecord[]>;
+    allChoices: ComputedRef<TChoice[]>;
     /** Whether the reference list is still loading (inline: `false`). */
     isPending: ComputedRef<boolean>;
     /** The reference fetch error (inline: `null`). */
     fetchError: ComputedRef<unknown>;
     /** The display text for a choice. */
-    getChoiceText(choice: ChoiceRecord): string;
+    getChoiceText(choice: TChoice): string;
     /** The value for a choice (`optionValue` path or `id`). */
-    getChoiceValue(choice: ChoiceRecord): unknown;
+    getChoiceValue(choice: TChoice): unknown;
     /** The disabled flag for a choice. */
-    getDisableValue(choice: ChoiceRecord): unknown;
+    getDisableValue(choice: TChoice): unknown;
     /** Push a filter onto a reference context (inert for inline choices). */
     setFilters(filter: Record<string, unknown>, debounce?: boolean): void;
 }
-export declare function useChoiceInput(options: UseChoiceInputOptions): UseChoiceInputResult;
+export declare function useChoiceInput<TChoice extends ChoiceRecord = ChoiceRecord>(options: UseChoiceInputOptions<TChoice>): UseChoiceInputResult<TChoice>;

package/dist/components/admin/inputs/use-choice-input.js

@@ -17,7 +17,7 @@ function useChoiceInput(options) {
   const resource = ctx.resource;
   const getRecordRepresentation = useGetRecordRepresentation(resource);
   const { getChoiceText, getChoiceValue, getDisableValue } = useChoices({
-    optionText: options.optionText ?? (isFromReference ? getRecordRepresentation : options.defaultOptionText),
+    optionText: options.optionText ?? (isFromReference ? getRecordRepresentation : void 0),
     optionValue: options.optionValue,
     disableValue: options.disableValue,
     translateChoice: options.translateChoice ?? !isFromReference
@@ -28,6 +28,9 @@ function useChoiceInput(options) {
     resource,
     // Computeds re-read the reference context's getters inside a tracking scope
     // so the list stays live; for an inline context they read static fields.
+    // The cast: the context list is erased. Inline `choices` are `TChoice`
+    // records, and under a reference the choices come from context, where
+    // `TChoice` stays the default.
     allChoices: computed(() => ctx.allChoices ?? []),
     isPending: computed(() => ctx.isPending),
     fetchError: computed(() => ctx.error),

package/dist/components/admin/inputs/webhook-endpoint-input.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Validator } from "@chelone/core";
+import type { SourceProp, Validator } from "@chelone/core";
 /**
  * Storage shape a `<WebhookEndpointInput>` edits. Mirrors the React twin's
  * inlined type (the shadmin source imported it from a sibling field not yet
@@ -15,7 +15,7 @@ export interface WebhookEndpoint {
 }
 /** Props for {@link WebhookEndpointInput}. */
 export interface WebhookEndpointInputProps {
-    source: string;
+    source: SourceProp;
     label?: string | false;
     /** Available event-type strings to surface as checkboxes. */
     eventTypes: readonly string[];

package/dist/components/admin/list/calendar-list.vue.d.ts

@@ -21,18 +21,18 @@
  */
 import { type LooseRecord } from "@chelone/core";
 import { type CalendarEventSlotProps, type CalendarDrop, type CalendarSlot } from "./calendar-month-view.vue.js";
-import type { CalendarRange, CalendarView, CalendarWeekStart } from "@chelone/core";
+import type { CalendarRange, CalendarView, CalendarWeekStart, SourceProp } from "@chelone/core";
 import type { CalendarNavigateDirection } from "./calendar-header.vue.js";
 /** Props for {@link CalendarList}. */
 export interface CalendarListProps {
     /** The field holding the start of an event; a dotted path reads a nested value. */
-    startSource: string;
+    startSource: SourceProp;
     /** The field holding the end. An event with none, or one before its start, covers its start day only. */
-    endSource?: string;
+    endSource?: SourceProp;
     /** The string field shown as the event title; the record representation otherwise. */
-    titleSource?: string;
+    titleSource?: SourceProp;
     /** The field whose value picks a color from `colorMap`. */
-    colorSource?: string;
+    colorSource?: SourceProp;
     colorMap?: Record<string, string>;
     /** The view shown first. Default `month`. */
     defaultView?: CalendarView;
@@ -83,9 +83,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CalendarLi
     perPage: number;
     linkType: "edit" | "show" | false;
     views: CalendarView[];
-    endSource: string;
-    titleSource: string;
-    colorSource: string;
+    endSource: SourceProp;
+    titleSource: SourceProp;
+    colorSource: SourceProp;
     colorMap: Record<string, string>;
     defaultView: CalendarView;
     weekStartsOn: CalendarWeekStart;

package/dist/components/admin/list/count-spinner.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, unref, openBlock, createBlock, normalizeClass, createCommentVNode } from "vue";
-import _sfc_main$1 from "../../ui/spinner2.vue.js";
+import _sfc_main$1 from "../../ui/spinner.vue.js";
 import { useTimeout } from "../feedback/use-timeout.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "count-spinner",

package/dist/components/admin/list/filter-live-search.vue.d.ts

@@ -2,7 +2,7 @@ import type { SearchInputProps } from "../inputs/search-input.vue.js";
 /** Props for {@link FilterLiveSearch}: those of `<SearchInput>`. */
 export type FilterLiveSearchProps = SearchInputProps;
 declare const _default: import("vue").DefineComponent<SearchInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SearchInputProps> & Readonly<{}>, {
-    source: string;
+    source: import("@chelone/core").SourceProp;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/admin/list/kanban-board.vue.d.ts

@@ -0,0 +1,41 @@
+import type { KanbanColumnDef, LooseRecord, SourceKey, SourceProp } from "@chelone/core";
+/** Props for {@link KanbanBoard}. */
+export interface KanbanBoardProps<TRecord extends LooseRecord = LooseRecord> {
+    /**
+     * The top-level field whose value names a column; a drop writes the target
+     * column's `id` to it.
+     */
+    groupSource: SourceKey<TRecord>;
+    /** The columns, in order. A record whose group value names none is not shown. */
+    columns: readonly KanbanColumnDef[];
+    /** The field shown as the card title; the record representation when it is null or undefined. */
+    titleSource?: SourceProp<TRecord>;
+    /** The field shown as a second line when its value is not empty. */
+    descriptionSource?: SourceProp<TRecord>;
+    /**
+     * Where a card goes when nothing listens to `select-card`. `edit` by default,
+     * `show` when the resource has no edit view. `false` leaves cards inert.
+     */
+    linkType?: "edit" | "show" | false;
+    class?: string;
+}
+declare const _default: <TRecord extends LooseRecord = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onSelect-card"?: ((record: TRecord) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSelect-card"> & KanbanBoardProps<TRecord> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        /** Replaces the title and description inside a card. */
+        card?(props: {
+            record: TRecord;
+        }): unknown;
+    };
+    emit: (evt: "select-card", record: TRecord) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/admin/list/kanban-board.vue.js

@@ -0,0 +1,275 @@
+import { defineComponent, computed, getCurrentInstance, shallowRef, ref, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode, renderSlot, withModifiers, createVNode, withCtx, createBlock, createTextVNode } from "vue";
+import { buildKanbanBuckets, planKanbanMove, getAtPath } from "@chelone/core";
+import { useResourceDefinition } from "../../../admin/resource-registry.js";
+import { useCheloneNotifications } from "../../../context.js";
+import { useUpdate } from "../../../data/mutations.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useGetRecordRepresentation } from "../../../label/use-get-record-representation.js";
+import { cn } from "../../../lib/utils.js";
+import { useListContext } from "../../../list/list-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import _sfc_main$3 from "../../ui/button.vue.js";
+import { useMenuAccess } from "../layout/use-menu-access.js";
+import { ArrowRightLeftIcon } from "./list-icons.js";
+import { useNavigate, useCreatePath } from "../../../router/nav-composables.js";
+import _sfc_main$1 from "../../ui/dropdown-menu/dropdown-menu.vue.js";
+import _sfc_main$2 from "../../ui/dropdown-menu/dropdown-menu-trigger.vue.js";
+import _sfc_main$4 from "../../ui/dropdown-menu/dropdown-menu-content.vue.js";
+import _sfc_main$5 from "../../ui/dropdown-menu/dropdown-menu-item.vue.js";
+const _hoisted_1 = ["aria-label", "data-column-id"];
+const _hoisted_2 = { class: "flex items-center justify-between px-1 text-sm font-medium" };
+const _hoisted_3 = {
+  "data-slot": "kanban-column-count",
+  class: "text-muted-foreground"
+};
+const _hoisted_4 = ["data-over", "onDragover", "onDragleave", "onDrop"];
+const _hoisted_5 = {
+  key: 0,
+  "data-slot": "kanban-empty",
+  class: "px-1 py-2 text-sm text-muted-foreground"
+};
+const _hoisted_6 = ["data-record-id", "data-dragging", "draggable", "onClick", "onKeydown", "onDragstart"];
+const _hoisted_7 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
+const _hoisted_8 = {
+  "data-slot": "kanban-card-title",
+  class: "font-medium"
+};
+const _hoisted_9 = {
+  key: 0,
+  "data-slot": "kanban-card-description",
+  class: "text-muted-foreground"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "kanban-board",
+  props: {
+    groupSource: {},
+    columns: {},
+    titleSource: { default: void 0 },
+    descriptionSource: { default: void 0 },
+    linkType: { type: [String, Boolean], default: void 0 },
+    class: {}
+  },
+  emits: ["select-card"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const list = useListContext();
+    const resource = useResourceContext();
+    const translate = useTranslate();
+    const getRepresentation = useGetRecordRepresentation(resource);
+    const navigate = useNavigate();
+    const createPath = useCreatePath();
+    const definition = useResourceDefinition(() => ({ resource }));
+    const notifications = useCheloneNotifications();
+    const { canAccess, isPending: isAccessPending } = useMenuAccess(
+      computed(() => ({
+        action: "edit",
+        resource: resource ?? ""
+      }))
+    );
+    const update = useUpdate(resource ?? "", { mutationMode: "optimistic" });
+    const draggable = computed(
+      () => !!resource && canAccess.value && !isAccessPending.value
+    );
+    const instance = getCurrentInstance();
+    const hasListener = () => {
+      const listeners = instance?.vnode.props;
+      return !!(listeners?.onSelectCard || listeners?.onSelectCardOnce);
+    };
+    const buckets = computed(
+      () => buildKanbanBuckets(list.data ?? [], props.groupSource, props.columns)
+    );
+    const grabbed = shallowRef(null);
+    const draggingId = ref();
+    const overColumn = ref();
+    function clearDrag() {
+      grabbed.value = null;
+      draggingId.value = void 0;
+      overColumn.value = void 0;
+    }
+    function move(record, targetColumnId) {
+      const plan = planKanbanMove(
+        record,
+        props.groupSource,
+        props.columns,
+        targetColumnId
+      );
+      if (!plan) return;
+      update.mutateAsync(plan).catch(() => {
+        notifications?.notify("chelone.notification.http_error", {
+          type: "error"
+        });
+      });
+    }
+    const type = computed(
+      () => props.linkType ?? (definition.value.hasEdit ? "edit" : definition.value.hasShow ? "show" : false)
+    );
+    const linkTo = (record) => resource && type.value ? createPath({ resource, id: record.id, type: type.value }) : void 0;
+    const selectable = computed(
+      () => hasListener() || !!resource && type.value !== false
+    );
+    function select(record) {
+      if (!selectable.value) return;
+      if (hasListener()) return emit("select-card", record);
+      const to = linkTo(record);
+      if (to) navigate(to);
+    }
+    function onCardKeydown(event, record) {
+      if (event.target !== event.currentTarget) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      select(record);
+    }
+    function onDragStart(event, record) {
+      if (!draggable.value || !event.dataTransfer) return;
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", String(record.id));
+      grabbed.value = record;
+      draggingId.value = String(record.id);
+    }
+    function onDragOver(event, columnId) {
+      if (!grabbed.value) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      overColumn.value = columnId;
+    }
+    function onDragLeave(event, columnId) {
+      const into = event.relatedTarget;
+      const area = event.currentTarget;
+      if (into instanceof Node && area?.contains(into)) return;
+      if (overColumn.value === columnId) overColumn.value = void 0;
+    }
+    function onDrop(event, columnId) {
+      const record = grabbed.value;
+      if (!record || !draggable.value) return;
+      event.preventDefault();
+      clearDrag();
+      move(record, columnId);
+    }
+    const isEmpty = (value) => value == null || value === "";
+    const textOf = (record, source) => source ? getAtPath(record, source) : void 0;
+    const titleOf = (record) => {
+      const value = textOf(record, props.titleSource);
+      return value == null ? getRepresentation(record) : String(value);
+    };
+    const othersOf = (columnId) => props.columns.filter((other) => other.id !== columnId);
+    const moveLabel = (record) => translate("chelone.kanban_board.move", {
+      title: titleOf(record),
+      _: "Move {title}"
+    });
+    const emptyLabel = computed(
+      () => translate("chelone.kanban_board.empty", { _: "No items" })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "kanban-board",
+        class: normalizeClass(unref(cn)("flex items-start gap-4 overflow-x-auto pb-2", props.class))
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(buckets.value, ({ column, records }) => {
+          return openBlock(), createElementBlock("div", {
+            key: column.id,
+            role: "group",
+            "aria-label": column.label,
+            "data-slot": "kanban-column",
+            "data-column-id": column.id,
+            class: normalizeClass(
+              unref(cn)(
+                "flex w-72 shrink-0 flex-col gap-2 rounded-lg bg-muted/50 p-2",
+                column.className
+              )
+            )
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("span", null, toDisplayString(column.label), 1),
+              createElementVNode("span", _hoisted_3, toDisplayString(records.length), 1)
+            ]),
+            createElementVNode("div", {
+              "data-slot": "kanban-column-cards",
+              "data-over": overColumn.value === column.id ? "" : void 0,
+              class: "flex min-h-16 flex-col gap-2 rounded-md data-[over]:bg-accent",
+              onDragover: ($event) => onDragOver($event, column.id),
+              onDragleave: ($event) => onDragLeave($event, column.id),
+              onDrop: ($event) => onDrop($event, column.id)
+            }, [
+              records.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(emptyLabel.value), 1)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(records, (record) => {
+                return openBlock(), createElementBlock("div", {
+                  key: record.id,
+                  role: "button",
+                  tabindex: "0",
+                  "data-slot": "kanban-card",
+                  "data-record-id": String(record.id),
+                  "data-dragging": draggingId.value === String(record.id) ? "" : void 0,
+                  draggable: draggable.value,
+                  class: "flex cursor-pointer items-start gap-2 rounded-md border bg-card p-3 text-sm shadow-xs data-[dragging]:opacity-50",
+                  onClick: ($event) => select(record),
+                  onKeydown: ($event) => onCardKeydown($event, record),
+                  onDragstart: ($event) => onDragStart($event, record),
+                  onDragend: clearDrag
+                }, [
+                  createElementVNode("div", _hoisted_7, [
+                    _ctx.$slots.card ? renderSlot(_ctx.$slots, "card", {
+                      key: 0,
+                      record
+                    }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createElementVNode("span", _hoisted_8, toDisplayString(titleOf(record)), 1),
+                      !isEmpty(textOf(record, props.descriptionSource)) ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(String(textOf(record, props.descriptionSource))), 1)) : createCommentVNode("", true)
+                    ], 64))
+                  ]),
+                  draggable.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["stop"]))
+                  }, [
+                    createVNode(unref(_sfc_main$1), null, {
+                      default: withCtx(() => [
+                        createVNode(unref(_sfc_main$2), null, {
+                          default: withCtx(() => [
+                            createVNode(_sfc_main$3, {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon",
+                              "data-slot": "kanban-card-move",
+                              class: "size-6",
+                              "aria-label": moveLabel(record)
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(unref(ArrowRightLeftIcon))
+                              ]),
+                              _: 1
+                            }, 8, ["aria-label"])
+                          ]),
+                          _: 2
+                        }, 1024),
+                        createVNode(unref(_sfc_main$4), { align: "end" }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(othersOf(column.id), (other) => {
+                              return openBlock(), createBlock(unref(_sfc_main$5), {
+                                key: other.id,
+                                onSelect: ($event) => move(record, other.id)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(other.label), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["onSelect"]);
+                            }), 128))
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ])) : createCommentVNode("", true)
+                ], 40, _hoisted_6);
+              }), 128))
+            ], 40, _hoisted_4)
+          ], 10, _hoisted_1);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/kanban-board2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./kanban-board.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/list-icons.d.ts

@@ -16,3 +16,5 @@ export declare const ChevronLeftIcon: FunctionalComponent;
 export declare const ChevronRightIcon: FunctionalComponent;
 /** Stacked up/down chevrons — the expand-all rows control. */
 export declare const ChevronsUpDownIcon: FunctionalComponent;
+/** Two opposing arrows — the kanban card "Move to" control. */
+export declare const ArrowRightLeftIcon: FunctionalComponent;

package/dist/components/admin/list/list-icons.js

@@ -35,7 +35,14 @@ const ChevronsUpDownIcon = icon(() => [
   h("path", { d: "m7 15 5 5 5-5" }),
   h("path", { d: "m7 9 5-5 5 5" })
 ]);
+const ArrowRightLeftIcon = icon(() => [
+  h("path", { d: "m16 3 4 4-4 4" }),
+  h("path", { d: "M20 7H4" }),
+  h("path", { d: "m8 21-4-4 4-4" }),
+  h("path", { d: "M4 17h16" })
+]);
 export {
+  ArrowRightLeftIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsUpDownIcon,

package/dist/components/admin/list/tree-list.vue.d.ts

@@ -15,15 +15,16 @@
  * </List>
  */
 import { type LooseRecord } from "@chelone/core";
+import type { SourceProp } from "@chelone/core";
 import type { Component } from "vue";
 /** Props for {@link TreeList}. */
 export interface TreeListProps {
     /** The field holding the parent's id; a dot or bracket path reads a nested value. */
-    parentSource: string;
+    parentSource: SourceProp;
     /** The string field shown as the row title; the record representation otherwise. */
-    titleSource?: string;
+    titleSource?: SourceProp;
     /** The field whose value picks a component from `iconMap`. */
-    iconSource?: string;
+    iconSource?: SourceProp;
     iconMap?: Record<string, Component>;
     /** Whether branches start open. Default `false`. */
     defaultExpanded?: boolean;
@@ -41,8 +42,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TreeListPr
     onSelect?: ((record: LooseRecord) => any) | undefined;
 }>, {
     linkType: "edit" | "show" | false;
-    titleSource: string;
-    iconSource: string;
+    titleSource: SourceProp;
+    iconSource: SourceProp;
     iconMap: Record<string, Component>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** Rendered while the list is pending, in place of `SimpleListLoading`. */

package/dist/components/admin/supabase/forgot-password-form.vue.js

@@ -6,7 +6,7 @@ import { useForm } from "../../../form/use-form.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import _sfc_main$2 from "../../ui/button.vue.js";
-import _sfc_main$3 from "../../ui/spinner2.vue.js";
+import _sfc_main$3 from "../../ui/spinner.vue.js";
 import _sfc_main$1 from "../inputs/text-input.vue.js";
 import { useResetPassword } from "./use-password-recovery.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/admin/supabase/set-password-form.vue.js

@@ -6,7 +6,7 @@ import { useForm } from "../../../form/use-form.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import _sfc_main$2 from "../../ui/button.vue.js";
-import _sfc_main$3 from "../../ui/spinner2.vue.js";
+import _sfc_main$3 from "../../ui/spinner.vue.js";
 import _sfc_main$1 from "../inputs/password-input.vue.js";
 import { useSupabaseUrlTokens, useSetPassword } from "./use-password-recovery.js";
 const _hoisted_1 = {