@chelone/vue 0.5.0 → 0.7.0

package/dist/components/admin/feedback/notification.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,153 @@
+import { useCheloneNotifications } from "../../../context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useNotifications } from "../../../notification-hooks.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch } from "vue";
+import { commitAllUndoables, hasPendingUndoables } from "@chelone/core";
+// src/components/admin/feedback/notification.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-2",
+	"data-slot": "notification",
+	role: "region",
+	"aria-live": "polite"
+};
+var _hoisted_2 = ["data-type", "data-undoable"];
+var _hoisted_3 = { class: "text-sm" };
+var _hoisted_4 = ["onClick"];
+var _hoisted_5 = ["onClick"];
+var notification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "notification",
+	props: { duration: { default: 5e3 } },
+	setup(__props) {
+		/**
+		* `<Notification>` — surfaces `notify(...)` / notification-store messages as
+		* toasts. The Vue twin of `@chelone/react`'s `feedback/notification.tsx`.
+		*
+		* DELIBERATE DIVERGENCE: the React twin bridges to `sonner`; `@chelone/vue`
+		* carries NO toast dependency (`vue-sonner` is not installed and the package's
+		* `ui/` slice is hand-rolled + dependency-free), so this ships a MINIMAL
+		* dependency-free toaster: a fixed bottom-center stack whose entries adapt to the
+		* theme via CSS tokens (so no explicit `theme` wiring is needed, unlike sonner's
+		* `<Toaster theme>` prop).
+		*
+		* Queue semantics mirror the React twin: each new notification is translated,
+		* pushed as a self-managed toast, then DRAINED from the store (`dismiss`) — the
+		* store stays the source of truth for the PENDING queue only; the toast owns its
+		* lifecycle (auto-close timer + a manual close button) from then on. A `shown`
+		* set guards against a re-render (or a locale change) double-firing a toast.
+		*
+		* R3 (undoable): a notification flagged `undoable` renders an extra Undo action.
+		* Clicking Undo runs its `undo()` callback (rolls the optimistic cache back — the
+		* server is NEVER called). The auto-hide timeout OR the manual close (X) instead
+		* runs `onClose()` (COMMIT — the deferred server call fires exactly once). The
+		* core undoable handle makes both callbacks idempotent + one-way, so a stray
+		* close firing after Undo is a harmless no-op. A `beforeunload` guard commits any
+		* still-pending undoable mutation so the server never trails the optimistic cache
+		* when the page unloads (ra-core parity).
+		*/
+		const props = __props;
+		const store = useCheloneNotifications();
+		const notifications = useNotifications();
+		const translate = useTranslate();
+		const toasts = ref([]);
+		const shown = /* @__PURE__ */ new Set();
+		const timers = /* @__PURE__ */ new Map();
+		/** Remove a toast + clear its timer, WITHOUT firing any undoable callback. */
+		function remove(id) {
+			const index = toasts.value.findIndex((t) => t.id === id);
+			if (index !== -1) toasts.value.splice(index, 1);
+			const timer = timers.get(id);
+			if (timer) {
+				clearTimeout(timer);
+				timers.delete(id);
+			}
+			shown.delete(id);
+		}
+		/** Auto-hide / manual close X: COMMIT an undoable, then remove the toast. */
+		function close(id) {
+			toasts.value.find((t) => t.id === id)?.onClose?.();
+			remove(id);
+		}
+		/** Undo action: ROLL BACK an undoable (server untouched), then remove. */
+		function undo(id) {
+			toasts.value.find((t) => t.id === id)?.undo?.();
+			remove(id);
+		}
+		const typeClasses = {
+			info: "bg-background text-foreground border-border",
+			success: "bg-background text-foreground border-green-500",
+			warning: "bg-background text-foreground border-amber-500",
+			error: "bg-background text-destructive border-destructive"
+		};
+		watch(notifications, (queue) => {
+			for (const notification of queue) {
+				if (shown.has(notification.id)) continue;
+				shown.add(notification.id);
+				const { id, message, type, messageArgs } = notification;
+				toasts.value.push({
+					id,
+					message: translate(message, messageArgs),
+					type,
+					undoable: notification.undoable,
+					undo: notification.undo,
+					onClose: notification.onClose
+				});
+				const duration = notification.undoable ? notification.autoHideDuration ?? props.duration : props.duration;
+				if (duration > 0) timers.set(id, setTimeout(() => close(id), duration));
+				store?.dismiss(id);
+			}
+		}, {
+			immediate: true,
+			deep: true
+		});
+		function onBeforeUnloadHandler() {
+			if (hasPendingUndoables()) commitAllUndoables();
+		}
+		onMounted(() => {
+			if (typeof window !== "undefined") window.addEventListener("beforeunload", onBeforeUnloadHandler);
+		});
+		onBeforeUnmount(() => {
+			if (typeof window !== "undefined") window.removeEventListener("beforeunload", onBeforeUnloadHandler);
+			for (const timer of timers.values()) clearTimeout(timer);
+			timers.clear();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(toasts.value, (toast) => {
+				return openBlock(), createElementBlock("div", {
+					key: toast.id,
+					class: normalizeClass(["flex items-center gap-3 rounded-md border px-4 py-3 shadow-lg", typeClasses[toast.type]]),
+					"data-slot": "notification-toast",
+					"data-type": toast.type,
+					"data-undoable": toast.undoable ? "true" : void 0,
+					role: "status"
+				}, [
+					createElementVNode("span", _hoisted_3, toDisplayString(toast.message), 1),
+					toast.undoable ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "ml-auto text-sm font-medium underline underline-offset-2 hover:no-underline",
+						"data-slot": "notification-undo",
+						onClick: ($event) => undo(toast.id)
+					}, toDisplayString(unref(translate)("ra.action.undo", { _: "Undo" })), 9, _hoisted_4)) : createCommentVNode("", true),
+					createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(["text-muted-foreground hover:text-foreground", toast.undoable ? "" : "ml-auto"]),
+						"aria-label": "Close",
+						"data-slot": "notification-close",
+						onClick: ($event) => close(toast.id)
+					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+						viewBox: "0 0 24 24",
+						width: "16",
+						height: "16",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"aria-hidden": "true"
+					}, [createElementVNode("path", { d: "M18 6 6 18" }), createElementVNode("path", { d: "m6 6 12 12" })], -1)])], 10, _hoisted_5)
+				], 10, _hoisted_2);
+			}), 128))]);
+		};
+	}
+});
+export { notification_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/feedback/offline.js

@@ -0,0 +1,4 @@
+import offline_vue_vue_type_script_setup_true_lang_default from "./offline.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/feedback/offline.vue
+var offline_default = offline_vue_vue_type_script_setup_true_lang_default;
+export { offline_default as default };

package/dist/components/admin/feedback/offline.vue.d.ts

@@ -3,10 +3,11 @@ export interface OfflineProps {
     /** Extra CSS class: on the slot's `div`, or appended to the banner's classes. */
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<OfflineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OfflineProps> & 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<OfflineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OfflineProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/feedback/offline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { useIsOffline } from "../../../data/use-is-offline.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { WifiOffIcon } from "./icons.js";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+// src/components/admin/feedback/offline.vue?vue&type=script&setup=true&lang.ts
+var offline_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "offline",
+	props: { class: {} },
+	setup(__props) {
+		/**
+		* `<Offline>` — tells the user the browser has lost its connection. The Vue twin
+		* of `@chelone/react`'s `feedback/offline.tsx`. Renders nothing while online.
+		* Offline, it renders the default slot in a `div`, or a fixed top banner when
+		* there is none. Not mounted by `<Layout>`: place it where the app wants the
+		* warning.
+		*
+		* @example
+		* <Offline />
+		*/
+		const props = __props;
+		const isOffline = useIsOffline();
+		const translate = useTranslate();
+		const bannerClass = computed(() => cn("fixed top-0 inset-x-0 z-50 bg-destructive text-white px-4 py-2 flex items-center justify-center gap-2 text-sm", props.class));
+		return (_ctx, _cache) => {
+			return unref(isOffline) && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(props.class)
+			}, [renderSlot(_ctx.$slots, "default")], 2)) : unref(isOffline) ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				role: "status",
+				"aria-live": "polite",
+				class: normalizeClass(bannerClass.value)
+			}, [createVNode(unref(WifiOffIcon), { class: "size-4" }), createTextVNode(" " + toDisplayString(unref(translate)("ra.notification.offline", { _: "You are offline" })), 1)], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { offline_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/feedback/placeholder.js

@@ -0,0 +1,4 @@
+import placeholder_vue_vue_type_script_setup_true_lang_default from "./placeholder.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/feedback/placeholder.vue
+var placeholder_default = placeholder_vue_vue_type_script_setup_true_lang_default;
+export { placeholder_default as default };

package/dist/components/admin/feedback/placeholder.vue.d.ts

@@ -3,10 +3,11 @@ export interface PlaceholderProps {
     /** Merged after the default `inline-flex bg-muted` classes. */
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PlaceholderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PlaceholderProps> & 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<PlaceholderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PlaceholderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/feedback/placeholder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { cn } from "../../../lib/utils.js";
+import { computed, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+// src/components/admin/feedback/placeholder.vue?vue&type=script&setup=true&lang.ts
+var placeholder_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "placeholder",
+	props: { class: {} },
+	setup(__props) {
+		/**
+		* `<Placeholder>` — a muted block that holds a field's height while its value
+		* loads. The Vue twin of `@chelone/react`'s `feedback/placeholder.tsx`. With no
+		* slot content it renders a non-breaking space: a plain space collapses to zero
+		* height in a flex container.
+		*
+		* @example
+		* <Placeholder class="w-24" />
+		*/
+		const props = __props;
+		const classes = computed(() => cn("inline-flex bg-muted", props.class));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(classes.value) }, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("\xA0", -1))])], 2);
+		};
+	}
+});
+export { placeholder_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/feedback/ready.js

@@ -0,0 +1,4 @@
+import ready_vue_vue_type_script_setup_true_lang_default from "./ready.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/feedback/ready.vue
+var ready_default = ready_vue_vue_type_script_setup_true_lang_default;
+export { ready_default as default };

package/dist/components/admin/feedback/ready.vue.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/admin/feedback/ready.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+import { BookOpenTextIcon, ChevronsLeftRightIcon, GithubMark, ScanFaceIcon } from "./icons.js";
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref } from "vue";
+// src/components/admin/feedback/ready.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col h-screen" };
+var _hoisted_2 = {
+	class: "flex-1 flex flex-col text-white text-center justify-center items-center",
+	style: { "background": "linear-gradient(\n          135deg,\n          #00023b 0%,\n          #00023b 50%,\n          #313264 100%\n        )" }
+};
+var _hoisted_3 = { class: "flex h-[20vh] bg-muted text-foreground items-center justify-evenly" };
+var _hoisted_4 = { class: "text-xl" };
+var _hoisted_5 = { href: "https://chelone.dev/docs" };
+var _hoisted_6 = { class: "text-xl" };
+var _hoisted_7 = { href: "https://chelone.dev/demo" };
+var _hoisted_8 = { class: "text-xl" };
+var _hoisted_9 = { href: "https://github.com/chelonejs/chelone" };
+var ready_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ready",
+	setup(__props) {
+		/**
+		* `<Ready>` — the splash screen shown when an `<Admin>` has no `<Resource>`
+		* children configured yet. The Vue twin of `@chelone/react`'s
+		* `feedback/ready.tsx`; pure presentational (no core seam), with the Chelone
+		* branding/URLs preserved. Icons are inline SVGs (the Vue package ships no icon
+		* library — see `feedback/icons.ts`).
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+				createVNode(unref(ScanFaceIcon), { class: "size-32 mb-4" }),
+				_cache[0] || (_cache[0] = createElementVNode("h1", { class: "text-3xl mb-4" }, "Welcome to Chelone", -1)),
+				_cache[1] || (_cache[1] = createElementVNode("div", { class: "text-lg opacity-75" }, [
+					createTextVNode(" Your application is properly configured. "),
+					createElementVNode("br"),
+					createTextVNode(" Now you can add a <Resource> as child of <Admin></Admin> ")
+				], -1))
+			]), createElementVNode("div", _hoisted_3, [
+				createElementVNode("div", _hoisted_4, [createElementVNode("a", _hoisted_5, [createVNode(unref(BookOpenTextIcon), { class: "inline mr-4 size-10" }), _cache[2] || (_cache[2] = createTextVNode(" Documentation ", -1))])]),
+				createElementVNode("div", _hoisted_6, [createElementVNode("a", _hoisted_7, [createVNode(unref(ChevronsLeftRightIcon), { class: "inline mr-4 size-10" }), _cache[3] || (_cache[3] = createTextVNode(" Demo ", -1))])]),
+				createElementVNode("div", _hoisted_8, [createElementVNode("a", _hoisted_9, [createVNode(unref(GithubMark), { class: "inline mr-4 size-10" }), _cache[4] || (_cache[4] = createTextVNode(" GitHub ", -1))])])
+			])]);
+		};
+	}
+});
+export { ready_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/feedback/spinner.js

@@ -0,0 +1,4 @@
+import spinner_vue_vue_type_script_setup_true_lang_default from "./spinner.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/feedback/spinner.vue
+var spinner_default = spinner_vue_vue_type_script_setup_true_lang_default;
+export { spinner_default as default };

package/dist/components/admin/feedback/spinner.vue.d.ts

@@ -11,8 +11,9 @@ export interface SpinnerContentProps {
     /** Accessible label. Default `"Loading"`. */
     "aria-label"?: string;
 }
-declare const _default: import("vue").DefineComponent<SpinnerContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinnerContentProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<SpinnerContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinnerContentProps> & Readonly<{}>, {
     size: SpinnerSize;
     show: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/admin/feedback/spinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import { cn } from "../../../lib/utils.js";
+import spinner_default from "../../ui/spinner.js";
+import { computed, createBlock, createCommentVNode, defineComponent, normalizeClass, openBlock } from "vue";
+// src/components/admin/feedback/spinner.vue?vue&type=script&setup=true&lang.ts
+var spinner_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "spinner",
+	props: {
+		size: { default: "medium" },
+		show: {
+			type: Boolean,
+			default: true
+		},
+		class: {},
+		"aria-label": {}
+	},
+	setup(__props) {
+		/**
+		* `<Spinner>` (feedback) — the admin-kit spinner over the `ui/spinner`
+		* primitive, the Vue twin of `@chelone/react`'s `feedback/spinner.tsx`. Layers a
+		* `size` scale, an optional `show` gate, and the primary color onto the base
+		* spinner. Used by `<Loading>`.
+		*/
+		const props = __props;
+		const sizeClasses = {
+			small: "size-6",
+			medium: "size-8",
+			large: "size-12"
+		};
+		const classes = computed(() => cn("text-primary", sizeClasses[props.size], props.class));
+		const label = computed(() => props["aria-label"] ?? "Loading");
+		return (_ctx, _cache) => {
+			return __props.show ? (openBlock(), createBlock(spinner_default, {
+				key: 0,
+				"aria-label": label.value,
+				class: normalizeClass(classes.value)
+			}, null, 8, ["aria-label", "class"])) : createCommentVNode("", true);
+		};
+	}
+});
+export { spinner_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/feedback/use-timeout.js

@@ -1,12 +1,23 @@
-import { ref, onScopeDispose } from "vue";
+import { onScopeDispose, ref } from "vue";
+// src/components/admin/feedback/use-timeout.ts
+/**
+* `useTimeout` — the Vue twin of `@chelone/react`'s compat `useTimeout`. Returns
+* a `Ref<boolean>` that flips `true` `delay` ms after mount, then clears the
+* timer on scope disposal. Consumed by `<Loading>` / `<LinearProgress>` so a
+* fast response never flashes the indicator.
+*
+* Idiom translation: React arms the timer in a `useEffect` and stores the flag
+* in `useState`; Vue arms it in the composable body (setup phase) against a
+* `ref`, and releases via `onScopeDispose` — the same acquire-on-mount /
+* release-on-unmount lifecycle without a separate effect.
+*/
+/** A boolean ref that becomes `true` `delay` ms after the owning scope mounts. */
 function useTimeout(delay = 0) {
-  const ready = ref(false);
-  const timer = setTimeout(() => {
-    ready.value = true;
-  }, delay);
-  onScopeDispose(() => clearTimeout(timer));
-  return ready;
+	const ready = ref(false);
+	const timer = setTimeout(() => {
+		ready.value = true;
+	}, delay);
+	onScopeDispose(() => clearTimeout(timer));
+	return ready;
 }
-export {
-  useTimeout
-};
+export { useTimeout };

package/dist/components/admin/fields/api-key-field.js

@@ -0,0 +1,4 @@
+import api_key_field_vue_vue_type_script_setup_true_lang_default from "./api-key-field.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/api-key-field.vue
+var api_key_field_default = api_key_field_vue_vue_type_script_setup_true_lang_default;
+export { api_key_field_default as default };

package/dist/components/admin/fields/api-key-field.vue.d.ts

@@ -1,10 +1,10 @@
-import type { LooseRecord, SourceKey, SourceProp } from "@chelone/core";
+import { type LooseRecord, type SourceKey, type SourceProp, type SourceValue } from "@chelone/core";
 /** Props for {@link ApiKeyField}. */
 export interface ApiKeyFieldProps<RecordType extends LooseRecord = LooseRecord> {
-    source: SourceProp;
+    source: SourceProp<RecordType>;
     /** The record to render. Defaults to the ambient `RecordContext` value. */
     record?: RecordType;
-    defaultValue?: unknown;
+    defaultValue?: SourceValue<RecordType, SourceProp<RecordType>>;
     /**
      * Sibling record field with scope strings; renders chips when set. A
      * top-level key, not a path: the read is `record[scopesSource]`.
@@ -19,16 +19,21 @@ export interface ApiKeyFieldProps<RecordType extends LooseRecord = LooseRecord>
     maskedFormat?: "last4" | "full";
     class?: string;
 }
-declare const _default: <RecordType 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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ApiKeyFieldProps<RecordType> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <RecordType 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ApiKeyFieldProps<RecordType>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
     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/components/admin/fields/api-key-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,180 @@
+import { cn } from "../../../lib/utils.js";
+import button_default from "../../ui/button.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { formatRelativeTime } from "@chelone/core";
+// src/components/admin/fields/api-key-field.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "inline-flex items-center gap-2" };
+var _hoisted_2 = {
+	"data-api-key": "",
+	class: "font-mono text-sm"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "h-4 w-4",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "h-4 w-4",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "flex gap-1"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "text-xs text-muted-foreground"
+};
+var api_key_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "api-key-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		scopesSource: {},
+		lastUsedSource: {},
+		maskedFormat: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<ApiKeyField>` — masked API-key display with reveal + copy controls, the Vue
+		* analog of `@chelone/react`'s `fields/api-key-field.tsx`. Reads the key at
+		* `source` off the ambient record; masks all but the last 4 chars by default.
+		* Optional `scopesSource` renders scope badges; optional `lastUsedSource`
+		* renders a relative "last used" timestamp. A nullish value renders nothing
+		* (parity with the twin — this field has no `empty` fallback).
+		*
+		* Idiom translation from the twin: React holds `revealed`/`copied` in
+		* `useState`; Vue uses `ref`s. The reveal/copy glyphs are inline SVGs (the Vue
+		* `ui/` slice ships no `lucide-vue` dep), matching the icon approach of
+		* `<BooleanField>` / `<RatingField>`.
+		*/
+		const props = __props;
+		const value = useFieldValue({
+			source: props.source,
+			record: props.record,
+			defaultValue: props.defaultValue
+		});
+		const injectedRecord = inject(RecordContextKey, null);
+		const ctxRecord = computed(() => props.record ?? injectedRecord?.value);
+		const revealed = ref(false);
+		const copied = ref(false);
+		const key = computed(() => value.value == null ? null : String(value.value));
+		const masked = computed(() => {
+			const k = key.value ?? "";
+			return props.maskedFormat === "full" ? "•".repeat(k.length) : `${"•".repeat(Math.max(0, k.length - 4))}${k.slice(-4)}`;
+		});
+		const scopes = computed(() => {
+			const rec = ctxRecord.value;
+			if (!props.scopesSource || !rec) return void 0;
+			const s = rec[props.scopesSource];
+			return Array.isArray(s) ? s.filter((scope) => typeof scope === "string") : void 0;
+		});
+		const lastUsed = computed(() => {
+			const rec = ctxRecord.value;
+			if (!props.lastUsedSource || !rec) return void 0;
+			const l = rec[props.lastUsedSource];
+			return typeof l === "string" ? l : void 0;
+		});
+		async function handleCopy() {
+			try {
+				await navigator.clipboard.writeText(key.value ?? "");
+				copied.value = true;
+				setTimeout(() => {
+					copied.value = false;
+				}, 1500);
+			} catch {}
+		}
+		return (_ctx, _cache) => {
+			return key.value != null ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				"data-slot": "api-key-field",
+				class: normalizeClass(unref(cn)("inline-flex flex-col gap-1", props.class))
+			}, [
+				createElementVNode("span", _hoisted_1, [
+					createElementVNode("span", _hoisted_2, toDisplayString(revealed.value ? key.value : masked.value), 1),
+					createVNode(button_default, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"data-api-key-reveal": "",
+						"aria-label": revealed.value ? "Hide API key" : "Reveal API key",
+						onClick: _cache[0] || (_cache[0] = ($event) => revealed.value = !revealed.value)
+					}, {
+						default: withCtx(() => [revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [
+							createElementVNode("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, null, -1),
+							createElementVNode("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, null, -1),
+							createElementVNode("line", {
+								x1: "2",
+								x2: "22",
+								y1: "2",
+								y2: "22"
+							}, null, -1)
+						])])) : (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, null, -1), createElementVNode("circle", {
+							cx: "12",
+							cy: "12",
+							r: "3"
+						}, null, -1)])]))]),
+						_: 1
+					}, 8, ["aria-label"]),
+					createVNode(button_default, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": "Copy API key",
+						onClick: handleCopy
+					}, {
+						default: withCtx(() => [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
+							class: "h-4 w-4",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true"
+						}, [createElementVNode("rect", {
+							width: "14",
+							height: "14",
+							x: "8",
+							y: "8",
+							rx: "2",
+							ry: "2"
+						}), createElementVNode("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })], -1)])]),
+						_: 1
+					}),
+					copied.value ? (openBlock(), createElementBlock("span", _hoisted_5, "Copied!")) : createCommentVNode("", true)
+				]),
+				scopes.value && scopes.value.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(scopes.value, (s) => {
+					return openBlock(), createElementBlock("span", {
+						key: s,
+						"data-scope-badge": "",
+						class: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs"
+					}, toDisplayString(s), 1);
+				}), 128))])) : createCommentVNode("", true),
+				__props.lastUsedSource ? (openBlock(), createElementBlock("span", _hoisted_7, "Last used: " + toDisplayString(lastUsed.value ? unref(formatRelativeTime)(new Date(lastUsed.value), /* @__PURE__ */ new Date()) : "Never"), 1)) : createCommentVNode("", true)
+			], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { api_key_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/fields/array-field.js

@@ -0,0 +1,4 @@
+import array_field_vue_vue_type_script_setup_true_lang_default from "./array-field.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/fields/array-field.vue
+var array_field_default = array_field_vue_vue_type_script_setup_true_lang_default;
+export { array_field_default as default };