@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/ui/skeleton.vue.js

@@ -0,0 +1,20 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref } from "vue";
+import { cn } from "../../lib/utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "skeleton",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(cn)("animate-pulse rounded-md bg-muted", props.class)),
+        "data-slot": "skeleton"
+      }, null, 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/skeleton2.vue.js

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

package/dist/components/ui/spinner.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    class?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/spinner.vue.js

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

package/dist/components/ui/spinner2.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode } from "vue";
+import { cn } from "../../lib/utils.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "spinner",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(() => cn("size-4 animate-spin", props.class));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        role: "status",
+        "aria-label": "Loading",
+        class: normalizeClass(classes.value),
+        "data-slot": "spinner",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "false"
+      }, [..._cache[0] || (_cache[0] = [
+        createElementVNode("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }, null, -1)
+      ])], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/switch.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue?: boolean;
+    id?: string;
+    disabled?: boolean;
+    ariaInvalid?: boolean;
+    class?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/switch.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, unref } from "vue";
+import { cn } from "../../lib/utils.js";
+const _hoisted_1 = ["id", "checked", "disabled", "aria-invalid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "switch",
+  props: {
+    modelValue: { type: Boolean },
+    id: {},
+    disabled: { type: Boolean },
+    ariaInvalid: { type: Boolean },
+    class: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const trackClasses = computed(
+      () => cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+        props.modelValue ? "bg-primary" : "bg-input",
+        props.class
+      )
+    );
+    function onChange(event) {
+      emit("update:modelValue", event.target.checked);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(trackClasses.value),
+        "data-slot": "switch"
+      }, [
+        createElementVNode("input", {
+          id: __props.id,
+          type: "checkbox",
+          role: "switch",
+          class: "sr-only",
+          checked: __props.modelValue,
+          disabled: __props.disabled,
+          "aria-invalid": __props.ariaInvalid || void 0,
+          onChange
+        }, null, 40, _hoisted_1),
+        createElementVNode("span", {
+          class: normalizeClass(unref(cn)(
+            "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+            __props.modelValue ? "translate-x-4" : "translate-x-0"
+          ))
+        }, null, 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/switch2.vue.js

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

package/dist/components/ui/table.d.ts

@@ -0,0 +1,97 @@
+/**
+ * The shadcn `Table` family, the Vue analog of `@chelone/react`'s `ui/table.tsx`
+ * (`Table` / `TableHeader` / `TableBody` / `TableRow` / `TableHead` /
+ * `TableCell`). Pure structural wrappers over the native table elements, kept as
+ * `defineComponent` render components in one dependency-free module.
+ */
+/** The `<table>` in a scrollable rounded container. */
+export declare const Table: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TableBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TableRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TableHead: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TableCell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/ui/table.js

@@ -0,0 +1,70 @@
+import { defineComponent, h } from "vue";
+import { cn } from "../../lib/utils.js";
+function wrapper(name, tag, baseClass) {
+  return defineComponent({
+    name,
+    props: { class: { type: String, default: "" } },
+    setup(props, { slots }) {
+      return () => h(
+        tag,
+        {
+          "data-slot": name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(),
+          class: cn(baseClass, props.class)
+        },
+        slots.default?.()
+      );
+    }
+  });
+}
+const Table = defineComponent({
+  name: "Table",
+  props: { class: { type: String, default: "" } },
+  setup(props, { slots }) {
+    return () => h(
+      "div",
+      {
+        "data-slot": "table-container",
+        class: "relative w-full overflow-x-auto"
+      },
+      [
+        h(
+          "table",
+          {
+            "data-slot": "table",
+            class: cn("w-full caption-bottom text-sm", props.class)
+          },
+          slots.default?.()
+        )
+      ]
+    );
+  }
+});
+const TableHeader = wrapper("TableHeader", "thead", "[&_tr]:border-b");
+const TableBody = wrapper(
+  "TableBody",
+  "tbody",
+  "[&_tr:last-child]:border-0"
+);
+const TableRow = wrapper(
+  "TableRow",
+  "tr",
+  "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+);
+const TableHead = wrapper(
+  "TableHead",
+  "th",
+  "h-10 px-2 text-left align-middle font-medium text-muted-foreground"
+);
+const TableCell = wrapper(
+  "TableCell",
+  "td",
+  "p-2 align-middle whitespace-nowrap"
+);
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/components/ui/textarea.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    modelValue?: string | null;
+    id?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    ariaInvalid?: boolean;
+    class?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/textarea.vue.js

@@ -0,0 +1,49 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass } from "vue";
+import { cn } from "../../lib/utils.js";
+const _hoisted_1 = ["id", "value", "placeholder", "rows", "disabled", "readonly", "aria-invalid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "textarea",
+  props: {
+    modelValue: {},
+    id: {},
+    placeholder: {},
+    rows: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    ariaInvalid: { type: Boolean },
+    class: {}
+  },
+  emits: ["update:modelValue", "blur", "focus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const classes = computed(
+      () => cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        props.class
+      )
+    );
+    function onInput(event) {
+      emit("update:modelValue", event.target.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("textarea", {
+        id: __props.id,
+        value: __props.modelValue ?? "",
+        placeholder: __props.placeholder,
+        rows: __props.rows,
+        disabled: __props.disabled,
+        readonly: __props.readonly,
+        "aria-invalid": __props.ariaInvalid || void 0,
+        class: normalizeClass(classes.value),
+        "data-slot": "textarea",
+        onInput,
+        onBlur: _cache[0] || (_cache[0] = ($event) => emit("blur", $event)),
+        onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event))
+      }, null, 42, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/ui/textarea2.vue.js

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

package/dist/context.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The Chelone provider context for `@chelone/vue` — the Vue twin of
+ * `@chelone/react`'s `context.tsx` (`CheloneProvider` / `useCheloneContext`).
+ * It carries the exact same value the React adapter constructs: the P2 data
+ * seam (`dataProvider` + `queryClient`) plus the optional P3 services (`store` /
+ * `i18n` / `authProvider` / `notifications`) and the zod resource registry.
+ *
+ * Idiom translation from the React twin: React threads the value through a
+ * `createContext` provider and reads it with `useContext`. Vue has no render
+ * tree of providers — the value is `provide`d once (by `<Admin>`) under a typed
+ * `InjectionKey` and read with `inject`, so the inject site is fully typed with
+ * no cast. The value is a plain object (not reactive): the providers it holds
+ * are stable for the admin's lifetime, exactly as React memoizes the context
+ * value on its stable inputs.
+ */
+import type { AnyCheloneI18n, AuthProvider, CheloneStore, DataProvider, NotificationStore, ResourceMap } from "@chelone/core";
+import type { QueryClient } from "@tanstack/vue-query";
+import { type InjectionKey } from "vue";
+/** The data context (P2) plus the optional P3 services — mirrors React's `CheloneContextValue`. */
+export interface CheloneContextValue<TResources extends ResourceMap = ResourceMap> {
+    /** The data provider (the P2 data seam). */
+    dataProvider: DataProvider<TResources>;
+    /** The vue-query client (P2 — factory-created at the app root or by `<Admin>`). */
+    queryClient: QueryClient;
+    /** The optional KV store (preferences / list scroll). */
+    store?: CheloneStore;
+    /** The optional i18n instance (translations). */
+    i18n?: AnyCheloneI18n;
+    /** The optional auth provider (gates the shell when `requireAuth`). */
+    authProvider?: AuthProvider;
+    /** The optional notification store (i18n-key notifications). */
+    notifications?: NotificationStore;
+    /**
+     * The zod resource registry (P5): a resource's schema becomes the DEFAULT
+     * form validator for the edit/create form composables (D6) when present.
+     */
+    resources?: TResources;
+}
+/**
+ * The provide/inject key for the Chelone context. `<Admin>` provides it; every
+ * data / i18n / store composable reads it via {@link useCheloneContext}. A typed
+ * `InjectionKey` keeps the inject site fully typed with no cast.
+ */
+export declare const CheloneContextKey: InjectionKey<CheloneContextValue>;
+/** Provide the Chelone context to the subtree (called by `<Admin>` in `setup`). */
+export declare function provideCheloneContext(value: CheloneContextValue): void;
+/**
+ * Read the ambient Chelone context. Throws when used outside `<Admin>` — the
+ * shell always provides it, so a throw means a data/i18n composable ran outside
+ * the admin tree (parity with the React twin's `useCheloneContext`).
+ */
+export declare function useCheloneContext<TResources extends ResourceMap = ResourceMap>(): CheloneContextValue<TResources>;
+/**
+ * The raw dataProvider off `<Admin>` (the Vue twin of `@chelone/react`'s
+ * `useDataProvider`), returned verbatim for imperative calls.
+ */
+export declare function useDataProvider<TResources extends ResourceMap = ResourceMap, TProvider extends DataProvider<TResources> = DataProvider<TResources>>(): TProvider;
+/** The i18n instance — throws when none was provided (parity with the React twin). */
+export declare function useCheloneI18n(): AnyCheloneI18n;
+/** The KV store — throws when none was provided (parity with the React twin). */
+export declare function useCheloneStore(): CheloneStore;
+/**
+ * The notification store, or `undefined`. Optional by design — controllers
+ * degrade gracefully without one; hooks that REQUIRE it throw at their own site.
+ */
+export declare function useCheloneNotifications(): NotificationStore | undefined;
+/** The auth provider — throws when none was provided (parity with the React twin). */
+export declare function useCheloneAuthProvider(): AuthProvider;

package/dist/context.js

@@ -0,0 +1,51 @@
+import { provide, inject } from "vue";
+const CheloneContextKey = /* @__PURE__ */ Symbol("chelone-context");
+function provideCheloneContext(value) {
+  provide(CheloneContextKey, value);
+}
+function useCheloneContext() {
+  const ctx = inject(CheloneContextKey, null);
+  if (!ctx) {
+    throw new Error(
+      "useCheloneContext: no <Admin> found above this component."
+    );
+  }
+  return ctx;
+}
+function useDataProvider() {
+  return useCheloneContext().dataProvider;
+}
+function useCheloneI18n() {
+  const { i18n } = useCheloneContext();
+  if (!i18n) {
+    throw new Error("useCheloneI18n: pass an i18n instance to <Admin>.");
+  }
+  return i18n;
+}
+function useCheloneStore() {
+  const { store } = useCheloneContext();
+  if (!store) {
+    throw new Error("useCheloneStore: pass a store to <Admin>.");
+  }
+  return store;
+}
+function useCheloneNotifications() {
+  return useCheloneContext().notifications;
+}
+function useCheloneAuthProvider() {
+  const { authProvider } = useCheloneContext();
+  if (!authProvider) {
+    throw new Error("useCheloneAuthProvider: pass an authProvider to <Admin>.");
+  }
+  return authProvider;
+}
+export {
+  CheloneContextKey,
+  provideCheloneContext,
+  useCheloneAuthProvider,
+  useCheloneContext,
+  useCheloneI18n,
+  useCheloneNotifications,
+  useCheloneStore,
+  useDataProvider
+};

package/dist/controllers/controller-context.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `toControllerContext` — projects the ambient Chelone context (what `<Admin>`
+ * provides) into the structural context the vanilla core controllers consume.
+ * The Vue twin of the same helper in `@chelone/react`'s `controller-hooks.ts`.
+ *
+ * Both controller families (list + record) need the same services, so ONE
+ * structural context (`ListControllerContext & RecordControllerContext`) covers
+ * every `createXController` call. The only reshape is i18n → a plain
+ * `translate(key)` closure (the controllers want a function, not the whole
+ * instance), exactly as the React twin does it.
+ */
+import type { ListControllerContext, RecordControllerContext, ResourceMap } from "@chelone/core";
+import type { CheloneContextValue } from "../context.js";
+/** One structural context serving both the list and the record controllers. */
+export declare function toControllerContext<TResources extends ResourceMap>(ctx: CheloneContextValue<TResources>): ListControllerContext<TResources> & RecordControllerContext<TResources>;

package/dist/controllers/controller-context.js

@@ -0,0 +1,13 @@
+function toControllerContext(ctx) {
+  const { dataProvider, queryClient, store, notifications, i18n } = ctx;
+  return {
+    dataProvider,
+    queryClient,
+    store,
+    notifications,
+    translate: i18n ? (key) => i18n.translate(key) : void 0
+  };
+}
+export {
+  toControllerContext
+};

package/dist/controllers/index.d.ts

@@ -0,0 +1,19 @@
+export { toControllerContext } from "./controller-context.js";
+export type { UseCreateControllerOptions, UseCreateControllerReturn, } from "./use-create-controller.js";
+export { useCreateController } from "./use-create-controller.js";
+export type { UseDeleteControllerOptions, UseDeleteControllerReturn, } from "./use-delete-controller.js";
+export { useDeleteController } from "./use-delete-controller.js";
+export type { UseEditControllerOptions, UseEditControllerReturn, } from "./use-edit-controller.js";
+export { useEditController } from "./use-edit-controller.js";
+export type { UseInfiniteListControllerOptions, UseInfiniteListControllerReturn, } from "./use-infinite-list-controller.js";
+export { useInfiniteListController } from "./use-infinite-list-controller.js";
+export type { UseListControllerOptions, UseListControllerReturn, } from "./use-list-controller.js";
+export { useListController } from "./use-list-controller.js";
+export type { UsePrevNextControllerOptions, UsePrevNextControllerReturn, } from "./use-prev-next-controller.js";
+export { usePrevNextController } from "./use-prev-next-controller.js";
+export type { UseReferenceManyFieldControllerOptions, UseReferenceManyFieldControllerReturn, } from "./use-reference-many-field-controller.js";
+export { useReferenceManyFieldController } from "./use-reference-many-field-controller.js";
+export type { UseReferenceOneFieldControllerOptions, UseReferenceOneFieldControllerReturn, } from "./use-reference-one-field-controller.js";
+export { useReferenceOneFieldController } from "./use-reference-one-field-controller.js";
+export type { UseShowControllerOptions, UseShowControllerReturn, } from "./use-show-controller.js";
+export { useShowController } from "./use-show-controller.js";

package/dist/controllers/use-controller-for-id.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared by the reference-field composables: one controller per resolved
+ * record id, rebuilt when the id changes. Each controller lives in its own
+ * effect scope with its own `useMicroStore` subscription, so stopping that scope is
+ * the 4R release: the old controller's observer detaches the moment the id
+ * moves on, and the last scope disposal releases the final one.
+ */
+import type { Identifier, MicroStore } from "@chelone/core";
+import { type Ref } from "vue";
+import type { RecordValue } from "../record/record-context.js";
+export type SourceId = Identifier | undefined;
+export interface BoundController<TController, TState> {
+    controller: TController;
+    state: Readonly<Ref<TState>>;
+}
+/** The foreign key `source` holds on the record; anything but a string or number reads as no key. */
+export declare function foreignKeyOf(record: RecordValue, source: string): SourceId;
+/**
+ * Builds `create(id)` inside a scope of its own and keeps it bound to `id`:
+ * when `id` changes the new controller is built and bound first, then the
+ * previous scope stops, so a `create` that throws leaves the old binding live
+ * and leaks nothing. The returned ref swaps synchronously on a change, so no
+ * frame reads the previous record's rows. Call it from `setup`: the last
+ * binding stops with the caller's scope.
+ */
+export declare function useControllerForId<TState, TController extends MicroStore<TState>>(id: Readonly<Ref<SourceId>>, create: (id: SourceId) => TController): Readonly<Ref<BoundController<TController, TState>>>;

package/dist/controllers/use-controller-for-id.js

@@ -0,0 +1,39 @@
+import { shallowRef, watch, onScopeDispose, effectScope } from "vue";
+import { useMicroStore } from "../store/use-micro-store.js";
+function foreignKeyOf(record, source) {
+  const value = record?.[source];
+  return typeof value === "string" || typeof value === "number" ? value : void 0;
+}
+function useControllerForId(id, create) {
+  const bind = (value) => {
+    const scope = effectScope(true);
+    try {
+      const bound2 = scope.run(() => {
+        const controller = create(value);
+        return { controller, state: useMicroStore(controller) };
+      });
+      return { scope, bound: bound2 };
+    } catch (error) {
+      scope.stop();
+      throw error;
+    }
+  };
+  let current = bind(id.value);
+  const bound = shallowRef(current.bound);
+  watch(
+    id,
+    (next) => {
+      const previous = current;
+      current = bind(next);
+      bound.value = current.bound;
+      previous.scope.stop();
+    },
+    { flush: "sync" }
+  );
+  onScopeDispose(() => current.scope.stop());
+  return bound;
+}
+export {
+  foreignKeyOf,
+  useControllerForId
+};

package/dist/controllers/use-create-controller.d.ts

@@ -0,0 +1,22 @@
+/**
+ * `useCreateController` — the Vue bridge for the vanilla core create controller,
+ * the twin of `@chelone/react`'s `useCreateController` (`controller-hooks.ts`).
+ * A create has NOTHING to fetch (`isPending` is false from birth); the only
+ * acquired resource is the shared update/create `MutationObserver`, attached on
+ * mount and released on scope disposal through `useMicroStore`'s 4R lifecycle.
+ *
+ * `save` is the controller's own create pipeline over `ctx.queryClient` (the
+ * vue-query client `<Admin>` provides): validate → persist → notify, resolving
+ * the server's field errors on `ValidationError`. As with edit, the FORM
+ * reconciliation is layered on in the form composables (Task 6) — this stays the
+ * thin controller bridge the React twin mirrors.
+ */
+import { type CreateController, type CreateControllerOptions, type CreateControllerState, type MicroStore, type RecordOf, type ResourceMap } from "@chelone/core";
+/** Options for {@link useCreateController}: the core create options + a resource override. */
+export interface UseCreateControllerOptions<TRecord> extends CreateControllerOptions<TRecord> {
+    /** Target a specific resource; defaults to the ambient `<Resource>` name. */
+    resource?: string;
+}
+/** The reactive result: the create-controller state (unwrapped, live) plus the stable `save`. */
+export type UseCreateControllerReturn<TRecord> = CreateControllerState<TRecord> & Omit<CreateController<TRecord>, keyof MicroStore<CreateControllerState<TRecord>>>;
+export declare function useCreateController<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(options?: UseCreateControllerOptions<RecordOf<TResources, TName>>): UseCreateControllerReturn<RecordOf<TResources, TName>>;