@chelone/vue 0.6.0 → 0.7.0

package/dist/form/form-scope.js

@@ -1,32 +1,40 @@
 import { useOptionalCheloneFormContext } from "./form-context.js";
 import { useForm } from "./use-form.js";
+// src/form/form-scope.ts
+/**
+* Chooses the form a multi-section form (`<TabbedForm>`) drives, the twin of
+* `@chelone/react`'s `form-scope.tsx`. Given a `save`, it builds and provides
+* its own form from the props, even inside a view (a quick-create dialog on an
+* edit page). Without one it uses the ambient form of the view above it
+* (`<Edit>`, `<Create>`), so the record hydration and the view's save pipeline
+* stay in effect. With neither, it throws.
+*
+* The mode is fixed at setup: the form is created once.
+*/
+/**
+* Call in `setup`. Returns the submit pipeline of whichever form is in effect;
+* `name` is the calling component, for the missing-save error.
+*/
 function useFormScope(name, props) {
-  const ambient = useOptionalCheloneFormContext();
-  const save = props.save;
-  if (save) {
-    const { submit } = useForm({
-      record: props.record,
-      resource: props.resource,
-      schema: props.schema,
-      // The form captures its options once: hand it this wrapper, so a
-      // `validate` set after setup still runs, as of the live prop.
-      validate: (values) => props.validate?.(values),
-      sanitizeEmptyValues: props.sanitizeEmptyValues,
-      getRecord: () => props.getRecord?.(),
-      resetOnSuccess: props.resetOnSuccess,
-      // Same for `save`: a parent that swaps the prop gets the latest handler.
-      onSubmit: (data) => (props.save ?? save)(data)
-    });
-    return submit;
-  }
-  if (ambient) {
-    const { form, submit } = ambient;
-    return submit ?? (() => form.handleSubmit());
-  }
-  throw new Error(
-    `<${name}> needs a \`save\` prop outside a view that provides a form (<Edit>, <Create>).`
-  );
+	const ambient = useOptionalCheloneFormContext();
+	const save = props.save;
+	if (save) {
+		const { submit } = useForm({
+			record: props.record,
+			resource: props.resource,
+			schema: props.schema,
+			validate: (values) => props.validate?.(values),
+			sanitizeEmptyValues: props.sanitizeEmptyValues,
+			getRecord: () => props.getRecord?.(),
+			resetOnSuccess: props.resetOnSuccess,
+			onSubmit: (data) => (props.save ?? save)(data)
+		});
+		return submit;
+	}
+	if (ambient) {
+		const { form, submit } = ambient;
+		return submit ?? (() => form.ambient.handleSubmit());
+	}
+	throw new Error(`<${name}> needs a \`save\` prop outside a view that provides a form (<Edit>, <Create>).`);
 }
-export {
-  useFormScope
-};
+export { useFormScope };

package/dist/form/index.d.ts

@@ -1,6 +1,6 @@
 export { firstFieldError } from "./field-error.js";
-export type { CheloneFormContextValue } from "./form-context.js";
-export { CheloneFormContextKey, provideCheloneForm, provideSourceScope, SourceScopeKey, useCheloneFormContext, useOptionalCheloneFormContext, useSourceScope, useWrappedSource, } from "./form-context.js";
+export type { CheloneFormContextValue, NamedFormHandle, } from "./form-context.js";
+export { CheloneFormContextKey, provideCheloneForm, provideSourceScope, SourceScopeKey, useCheloneFormContext, useFormHandle, useOptionalCheloneFormContext, useSourceScope, useWrappedSource, } from "./form-context.js";
 export type { FormGroupProviderProps } from "./form-group-provider.vue.js";
 export { default as FormGroupProvider } from "./form-group-provider.vue.js";
 export { provideFormGroup, provideFormGroups, useFormGroup, useFormGroupName, useFormGroups, useOptionalFormGroups, useRegisterFieldGroup, } from "./form-groups.js";

package/dist/form/splat-base.js

@@ -1,19 +1,23 @@
+// src/form/splat-base.ts
+/** Decode a percent-encoded path, leaving it as is when it is malformed. */
 function decodePath(path) {
-  try {
-    return decodeURIComponent(path);
-  } catch {
-    return path;
-  }
+	try {
+		return decodeURIComponent(path);
+	} catch {
+		return path;
+	}
 }
+/**
+* Where a route with a trailing catch-all ends, as the encoded pathname minus
+* the trailing segments of the splat, without a trailing slash. The pathname is
+* percent-encoded and the splat is decoded, so whole segments are dropped
+* rather than a textual suffix.
+*/
 function splatBase(pathname, splat) {
-  if (splat === "") return pathname.replace(/\/+$/, "");
-  const count = splat.split("/").length;
-  const segments = pathname.split("/");
-  const tail = segments.slice(-count).join("/");
-  const own = segments.length > count && decodePath(tail) === splat ? segments.slice(0, -count).join("/") : pathname;
-  return own.replace(/\/+$/, "");
+	if (splat === "") return pathname.replace(/\/+$/, "");
+	const count = splat.split("/").length;
+	const segments = pathname.split("/");
+	const tail = segments.slice(-count).join("/");
+	return (segments.length > count && decodePath(tail) === splat ? segments.slice(0, -count).join("/") : pathname).replace(/\/+$/, "");
 }
-export {
-  decodePath,
-  splatBase
-};
+export { decodePath, splatBase };

package/dist/form/subscribe-ref.js

@@ -1,17 +1,54 @@
-import { shallowRef, onScopeDispose } from "vue";
+import { onScopeDispose, shallowRef } from "vue";
+// src/form/subscribe-ref.ts
+/**
+* `useSubscribable` — the Vue reactivity bridge for form-core's own controllers
+* (`FormController` / `FieldBinding`). It is the SAME shallowRef + subscribe +
+* onScopeDispose pattern as the V1-a `useMicroStore` (store/use-micro-store.ts), narrowed
+* to the minimal readable shape form-core exposes.
+*
+* Why a sibling helper instead of reusing `useMicroStore`:
+* - `useMicroStore<T>` is typed to `MicroStore<T>`, which requires `getSnapshot` +
+*   `setState` + `subscribe` + `destroy` + `onDestroy`. The P4 record/list
+*   controllers are built on `createMicroStore`, so they satisfy it. The form
+*   controllers are NOT — a `FormController`/`FieldBinding` wraps a
+*   `@tanstack/form-core` store and exposes only the `useSyncExternalStore`
+*   contract (`subscribe` + `getSnapshot`), never `setState`/`onDestroy`. So
+*   they cannot be passed to `useMicroStore` without a lie of a cast.
+* - Subscribing THROUGH the controller/binding is also load-bearing, not
+*   incidental: `FormController.subscribe` runs `form.mount()` on the 0->1
+*   transition (and unmounts on the last unsubscribe); `FieldBinding.subscribe`
+*   runs `field.mount()` (seeds the guarded default, registers the field so
+*   submit-time validation sees it). Bridging the raw form-core store directly
+*   (e.g. via `@tanstack/vue-store` over `form.store`) would read state but
+*   NEVER mount — validators would never attach. The 4R lifecycle lives on the
+*   controller's `subscribe`, so the bridge must go through it.
+*
+* Result: mounting a component that calls `useForm`/`useInput` acquires the
+* form/field (mount) during `setup`; `onScopeDispose` releases it (unmount) on
+* unmount or `effectScope().stop()` — the exact 4R mapping the V1-a bridge
+* proves, applied to the form-core seam.
+*/
+/**
+* Bridge a form-core `Subscribable<T>` into a Vue `shallowRef`. Subscribes on
+* `setup` (driving the 4R mount refcount) and releases on scope disposal. The
+* whole snapshot swaps on each mutation — form-core hands out a fresh, stable
+* state object per change, so a shallow ref is the right granularity; callers
+* derive fine-grained `computed`s off it.
+*/
 function useSubscribable(source) {
-  const state = shallowRef(source.getSnapshot());
-  const unsubscribe = source.subscribe(() => {
-    state.value = source.getSnapshot();
-  });
-  onScopeDispose(unsubscribe);
-  return state;
+	const state = shallowRef(source.getSnapshot());
+	const unsubscribe = source.subscribe(() => {
+		state.value = source.getSnapshot();
+	});
+	onScopeDispose(unsubscribe);
+	return state;
 }
+/**
+* Subscribe to a `@tanstack/store` store and return the unsubscribe function a
+* {@link Subscribable} promises: the store hands back a `Subscription` object.
+*/
 function subscribeStore(store, listener) {
-  const subscription = store.subscribe(listener);
-  return () => subscription.unsubscribe();
+	const subscription = store.subscribe(listener);
+	return () => subscription.unsubscribe();
 }
-export {
-  subscribeStore,
-  useSubscribable
-};
+export { subscribeStore, useSubscribable };

package/dist/form/tabbed-form-context.js

@@ -1,21 +1,19 @@
-import { provide, inject } from "vue";
-const TabbedFormContextKey = /* @__PURE__ */ Symbol(
-  "chelone-tabbed-form-context"
-);
+import { inject, provide } from "vue";
+// src/form/tabbed-form-context.ts
+/**
+* The ambient tabbed-form controller, the twin of `@chelone/react`'s
+* `TabbedFormContext`. `<TabbedForm>` provides it; headers, panels and custom
+* navigation read it with {@link useTabbedFormContext}.
+*/
+var TabbedFormContextKey = Symbol("chelone-tabbed-form-context");
+/** Provide the controller to the tab subtree (called by `<TabbedForm>`). */
 function provideTabbedForm(value) {
-  provide(TabbedFormContextKey, value);
+	provide(TabbedFormContextKey, value);
 }
+/** The ambient tabbed-form controller; throws outside a `<TabbedForm>`. */
 function useTabbedFormContext() {
-  const ctx = inject(TabbedFormContextKey, null);
-  if (!ctx) {
-    throw new Error(
-      "useTabbedFormContext: no <TabbedForm> found above this component."
-    );
-  }
-  return ctx;
+	const ctx = inject(TabbedFormContextKey, null);
+	if (!ctx) throw new Error("useTabbedFormContext: no <TabbedForm> found above this component.");
+	return ctx;
 }
-export {
-  TabbedFormContextKey,
-  provideTabbedForm,
-  useTabbedFormContext
-};
+export { TabbedFormContextKey, provideTabbedForm, useTabbedFormContext };

package/dist/form/tabbed-form-header.js

@@ -0,0 +1,4 @@
+import tabbed_form_header_vue_vue_type_script_setup_true_lang_default from "./tabbed-form-header.vue_vue_type_script_setup_true_lang.js";
+// src/form/tabbed-form-header.vue
+var tabbed_form_header_default = tabbed_form_header_vue_vue_type_script_setup_true_lang_default;
+export { tabbed_form_header_default as default };

package/dist/form/tabbed-form-header.vue.d.ts

@@ -6,5 +6,6 @@ export interface TabbedFormHeaderProps {
     /** The tab's link target when the tabs are URL-synced; omit for a button. */
     href?: string;
 }
-declare const _default: import("vue").DefineComponent<TabbedFormHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabbedFormHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<TabbedFormHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabbedFormHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/form/tabbed-form-header.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,61 @@
+import { useFormGroup } from "./form-groups.js";
+import { useTabbedFormContext } from "./tabbed-form-context.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+// src/form/tabbed-form-header.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-chelone-tab-error"];
+var tabbed_form_header_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "tabbed-form-header",
+	props: {
+		name: {},
+		label: {},
+		href: {}
+	},
+	setup(__props) {
+		/**
+		* `<TabbedFormHeader>` — the clickable header of one tab, with an error dot
+		* while any field in that tab is invalid. Rendered by `<TabbedForm>`: a link
+		* with an `href`, so it can be opened in a new tab, else a button.
+		*/
+		const props = __props;
+		const { activeTab, goToTab } = useTabbedFormContext();
+		const group = useFormGroup(() => props.name);
+		const active = computed(() => activeTab.value === props.name);
+		/** A plain primary click navigates in place; anything else is the browser's. */
+		function onClick(event) {
+			if (props.href !== void 0) {
+				if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+				event.preventDefault();
+			}
+			goToTab(props.name);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.href === void 0 ? "button" : "a"), {
+				type: __props.href === void 0 ? "button" : void 0,
+				href: __props.href,
+				role: "tab",
+				id: `tabheader-${__props.name}`,
+				"data-chelone-tab-header": __props.name,
+				"aria-selected": active.value,
+				"aria-controls": `tabpanel-${__props.name}`,
+				"data-active": active.value || void 0,
+				onClick
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.label) + " ", 1), !unref(group).isValid ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-chelone-tab-error": __props.name,
+					"aria-hidden": "true"
+				}, toDisplayString(" •"), 8, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, [
+				"type",
+				"href",
+				"id",
+				"data-chelone-tab-header",
+				"aria-selected",
+				"aria-controls",
+				"data-active"
+			]);
+		};
+	}
+});
+export { tabbed_form_header_vue_vue_type_script_setup_true_lang_default as default };

package/dist/form/tabbed-form-tab.js

@@ -0,0 +1,4 @@
+import tabbed_form_tab_vue_vue_type_script_setup_true_lang_default from "./tabbed-form-tab.vue_vue_type_script_setup_true_lang.js";
+// src/form/tabbed-form-tab.vue
+var tabbed_form_tab_default = tabbed_form_tab_vue_vue_type_script_setup_true_lang_default;
+export { tabbed_form_tab_default as default };

package/dist/form/tabbed-form-tab.vue.d.ts

@@ -10,10 +10,11 @@ export interface TabbedFormTabProps {
      */
     path?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TabbedFormTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabbedFormTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TabbedFormTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabbedFormTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/form/tabbed-form-tab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+import { provideFormGroup } from "./form-groups.js";
+import { useTabbedFormContext } from "./tabbed-form-context.js";
+import { computed, createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
+// src/form/tabbed-form-tab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-chelone-tab",
+	"id",
+	"aria-labelledby",
+	"hidden",
+	"aria-hidden"
+];
+var tabbed_form_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "tabbed-form-tab",
+	props: {
+		name: {},
+		label: {},
+		path: {}
+	},
+	setup(__props) {
+		/**
+		* `<TabbedFormTab>` — one tab of a `<TabbedForm>`. Its inputs register into a
+		* form group named `name`, so its header can aggregate exactly this tab's
+		* validity. The panel stays mounted and is `hidden` unless active, so values
+		* and validation in other tabs survive a tab switch.
+		*/
+		const props = __props;
+		provideFormGroup(() => props.name);
+		const { activeTab } = useTabbedFormContext();
+		const hidden = computed(() => activeTab.value !== props.name);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "tabpanel",
+				"data-chelone-tab": __props.name,
+				id: `tabpanel-${__props.name}`,
+				"aria-labelledby": `tabheader-${__props.name}`,
+				hidden: hidden.value,
+				"aria-hidden": hidden.value || void 0
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+export { tabbed_form_tab_vue_vue_type_script_setup_true_lang_default as default };

package/dist/form/tabbed-form.js

@@ -0,0 +1,4 @@
+import tabbed_form_vue_vue_type_script_setup_true_lang_default from "./tabbed-form.vue_vue_type_script_setup_true_lang.js";
+// src/form/tabbed-form.vue
+var tabbed_form_default = tabbed_form_vue_vue_type_script_setup_true_lang_default;
+export { tabbed_form_default as default };

package/dist/form/tabbed-form.vue.d.ts

@@ -13,18 +13,23 @@ export type TabbedFormProps<TFormData> = OptionalSaveFormProps<TFormData> & {
      */
     syncWithLocation?: boolean;
 };
-declare const _default: <TFormData>(__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> & TabbedFormProps<TFormData> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TFormData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TabbedFormProps<TFormData>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         default?: (props: {}) => any;
     };
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/form/tabbed-form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,129 @@
+import { useRouterAdapter, useRouterAdapterOptional } from "../router/adapter.js";
+import { useFormScope } from "./form-scope.js";
+import { provideFormGroups } from "./form-groups.js";
+import tabbed_form_header_default from "./tabbed-form-header.js";
+import tabbed_form_tab_default from "./tabbed-form-tab.js";
+import { decodePath, splatBase } from "./splat-base.js";
+import { provideTabbedForm } from "./tabbed-form-context.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, isVNode, openBlock, ref, renderList, renderSlot, shallowRef, useSlots } from "vue";
+import { useRouter } from "vue-router";
+// src/form/tabbed-form.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	role: "tablist",
+	"data-chelone-tablist": ""
+};
+var tabbed_form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "tabbed-form",
+	props: {
+		record: {},
+		resource: {},
+		schema: {},
+		validate: {},
+		sanitizeEmptyValues: { type: Boolean },
+		getRecord: {},
+		resetOnSuccess: {
+			type: Boolean,
+			default: true
+		},
+		save: {},
+		syncWithLocation: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		/**
+		* `<TabbedForm>` — one form split into tabs, the twin of `@chelone/react`'s
+		* `tabbed-form.tsx`. Tabs are the `<TabbedFormTab>` vnodes of the default slot,
+		* in order. Every tab stays mounted (inactive ones are
+		* `hidden`) so cross-tab validation works and one submit collects the whole
+		* form. Per-tab validity reuses form groups: each tab is a group, and its
+		* header reads `useFormGroup(name)` for the error dot.
+		*
+		* With `syncWithLocation` (the default) the edit and create routes end in a
+		* catch-all, and the tabs are paths under the form's base: the current pathname
+		* minus a trailing `/<params['*']>`. A tab's segment is its `path`, else its
+		* `name` for every tab after the first, else `''` for the first. The active tab
+		* is the first whose path equals the pathname, else the first tab.
+		*/
+		const props = __props;
+		const slots = useSlots();
+		const submit = useFormScope("TabbedForm", props);
+		provideFormGroups();
+		function collectTabs(nodes, tabs = []) {
+			for (const node of nodes) if (node.type === Fragment && Array.isArray(node.children)) collectTabs(node.children.filter(isVNode), tabs);
+			else if (node.type === tabbed_form_tab_default) {
+				const name = String(node.props?.name);
+				const path = node.props?.path;
+				tabs.push({
+					name,
+					label: String(node.props?.label ?? name),
+					path: path != null ? String(path) : tabs.length > 0 ? name : ""
+				});
+			}
+			return tabs;
+		}
+		/** Read from the slot on every render: a slot call outside render warns. */
+		const tabs = shallowRef([]);
+		function readTabs() {
+			const next = collectTabs(slots.default?.() ?? []);
+			const prev = tabs.value;
+			if (!(next.length === prev.length && next.every((tab, i) => tab.name === prev[i]?.name && tab.path === prev[i]?.path))) tabs.value = next;
+			return next;
+		}
+		const syncWithLocation = props.syncWithLocation;
+		const adapter = syncWithLocation ? useRouterAdapter() : useRouterAdapterOptional();
+		const location = syncWithLocation ? adapter?.useLocation() : void 0;
+		const params = syncWithLocation ? adapter?.useParams() : void 0;
+		const navigate = syncWithLocation ? adapter?.useNavigate() : void 0;
+		const router = syncWithLocation ? useRouter() : void 0;
+		/** Where the form's own route ends: the pathname minus the splat's segments. */
+		const base = computed(() => splatBase(location?.value.pathname ?? "", params?.value["*"] ?? ""));
+		const encodeSegment = (segment) => segment.split("/").map(encodeURIComponent).join("/");
+		/** The encoded path a tab lives at: what a header links to and `goToTab` pushes. */
+		function tabPath(tab) {
+			return tab.path === "" ? base.value || "/" : `${base.value}/${encodeSegment(tab.path)}`;
+		}
+		const samePath = (path) => path.replace(/\/+$/, "").toLowerCase();
+		const selected = ref();
+		const activeTab = computed(() => {
+			const names = tabs.value.map((tab) => tab.name);
+			if (syncWithLocation) {
+				const here = samePath(decodePath(location?.value.pathname ?? ""));
+				return tabs.value.find((tab) => samePath(decodePath(tabPath(tab))) === here)?.name ?? names[0] ?? "";
+			}
+			const wanted = selected.value;
+			return wanted !== void 0 && names.includes(wanted) ? wanted : names[0] ?? "";
+		});
+		/** The `href` of a tab header: the router's own, so a history base is kept. */
+		function tabHref(tab) {
+			return router?.resolve(tabPath(tab)).href;
+		}
+		provideTabbedForm({
+			activeTab,
+			syncWithLocation,
+			goToTab(name) {
+				const tab = tabs.value.find((candidate) => candidate.name === name);
+				if (!tab) return;
+				if (syncWithLocation) navigate?.(tabPath(tab));
+				else selected.value = name;
+			},
+			submit
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(readTabs(), (tab) => {
+				return openBlock(), createBlock(tabbed_form_header_default, {
+					key: tab.name,
+					name: tab.name,
+					label: tab.label,
+					href: tabHref(tab)
+				}, null, 8, [
+					"name",
+					"label",
+					"href"
+				]);
+			}), 128))]), renderSlot(_ctx.$slots, "default")], 64);
+		};
+	}
+});
+export { tabbed_form_vue_vue_type_script_setup_true_lang_default as default };

package/dist/form/use-form.d.ts

@@ -60,6 +60,13 @@ export interface UseFormOptions<TFormData> {
     getRecord?: () => Partial<TFormData> | undefined;
     /** Rebaseline the form from the saved values on success (D5). Default true. */
     resetOnSuccess?: boolean;
+    /**
+     * Whether the form holds the resource's record, so descendants read it
+     * through a handle tagged with that resource (`useFormHandle("posts")`).
+     * `false` for a form whose values are something else, such as a list filter:
+     * its handle is unbound. Default true.
+     */
+    recordForm?: boolean;
 }
 /** The narrow reactive surface `useForm` exposes to a view. */
 export interface UseFormReturn<TFormData> {

package/dist/form/use-form.js

@@ -1,44 +1,43 @@
-import { createFormController } from "@chelone/core";
-import { computed } from "vue";
 import { useCheloneContext } from "../context.js";
 import { useResourceContext } from "../resource-context.js";
 import { provideCheloneForm } from "./form-context.js";
 import { useSubscribable } from "./subscribe-ref.js";
+import { computed } from "vue";
+import { createFormController } from "@chelone/core";
+// src/form/use-form.ts
+/** The registry schema for `resource`, widened to the form's data type. */
 function registrySchema(resources, resource) {
-  if (!resources || !resource) return void 0;
-  const entry = resources[resource];
-  return entry?.schema;
+	if (!resources || !resource) return void 0;
+	return resources[resource]?.schema;
 }
 function useForm(options) {
-  const ctx = useCheloneContext();
-  const resource = useResourceContext({ resource: options.resource });
-  const translate = ctx.i18n ? (key) => ctx.i18n?.translate(key) ?? key : void 0;
-  const schema = options.schema ?? registrySchema(ctx.resources, resource);
-  const controller = createFormController(
-    {
-      defaultValues: options.record,
-      schema,
-      validate: options.validate,
-      sanitizeEmptyValues: options.sanitizeEmptyValues,
-      getRecord: options.getRecord,
-      resetOnSuccess: options.resetOnSuccess,
-      // Adapt the caller's save to the P4 `Promise<FieldErrors | undefined>`
-      // contract: a nullish/void resolution is success.
-      save: async (data) => await options.onSubmit(data) ?? void 0,
-      notifications: ctx.notifications,
-      translate
-    }
-  );
-  const state = useSubscribable(controller);
-  provideCheloneForm({ form: controller.form, submit: controller.submit });
-  return {
-    form: controller.form,
-    values: computed(() => state.value.values),
-    submit: controller.submit,
-    submitting: computed(() => state.value.isSubmitting),
-    reset: (values) => controller.form.reset(values)
-  };
+	const ctx = useCheloneContext();
+	const resource = useResourceContext({ resource: options.resource });
+	const translate = ctx.i18n ? (key) => ctx.i18n?.translate(key) ?? key : void 0;
+	const schema = options.schema ?? registrySchema(ctx.resources, resource);
+	const controller = createFormController({
+		defaultValues: options.record,
+		schema,
+		validate: options.validate,
+		sanitizeEmptyValues: options.sanitizeEmptyValues,
+		getRecord: options.getRecord,
+		resetOnSuccess: options.resetOnSuccess,
+		save: async (data) => await options.onSubmit(data) ?? void 0,
+		notifications: ctx.notifications,
+		translate
+	});
+	const state = useSubscribable(controller);
+	provideCheloneForm({
+		form: controller.form,
+		submit: controller.submit,
+		resource: options.recordForm === false ? void 0 : resource
+	});
+	return {
+		form: controller.form,
+		values: computed(() => state.value.values),
+		submit: controller.submit,
+		submitting: computed(() => state.value.isSubmitting),
+		reset: (values) => controller.form.reset(values)
+	};
 }
-export {
-  useForm
-};
+export { useForm };