@chelone/vue 0.6.0 → 0.9.0

package/dist/components/admin/layout/resource-menu-item-group.vue.d.ts

@@ -12,5 +12,13 @@ export interface ResourceMenuItemGroupProps {
     /** Extra CSS class appended to the underlying sidebar menu. */
     menuClass?: string;
 }
-declare const _default: import("vue").DefineComponent<ResourceMenuItemGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResourceMenuItemGroupProps> & 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<ResourceMenuItemGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResourceMenuItemGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/layout/resource-menu-item-group.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { useResourceRegistry } from "../../../admin/resource-registry.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from "../../ui/sidebar/sidebar-parts.js";
+import resource_menu_item_default from "./resource-menu-item.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+// src/components/admin/layout/resource-menu-item-group.vue?vue&type=script&setup=true&lang.ts
+var resource_menu_item_group_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "resource-menu-item-group",
+	props: {
+		label: {},
+		resources: {},
+		class: {},
+		menuClass: {}
+	},
+	setup(__props) {
+		/**
+		* `<ResourceMenuItemGroup>` — a sidebar group of resource menu entries. The Vue
+		* twin of `@chelone/react`'s `layout/resource-menu-item-group.tsx`. When
+		* `resources` is omitted it reads the reactive `<Admin>` registry and renders one
+		* `<ResourceMenuItem>` per list-enabled resource; the auto `<Menu>` uses it for
+		* the (unlabeled) flat resource section.
+		*
+		* Vue divergence from the React twin: the Vue `ResourceDefinition` carries no
+		* `options.group` bag yet, so there is no auto-grouping and a labeled group
+		* renders a plain `<SidebarGroupLabel>` rather than a collapsible section (the
+		* React twin's `<Collapsible>` has no Vue twin in this wave). The `label`/
+		* `resources` props still let an author build explicit sections by hand. The
+		* default slot adds entries after the resources, inside the group.
+		*/
+		const props = __props;
+		const registry = useResourceRegistry();
+		const names = computed(() => props.resources ?? Object.keys(registry.definitions).filter((name) => registry.definitions[name]?.list != null));
+		return (_ctx, _cache) => {
+			return names.value.length > 0 || _ctx.$slots.default ? (openBlock(), createBlock(unref(SidebarGroup), {
+				key: 0,
+				class: normalizeClass(props.class)
+			}, {
+				default: withCtx(() => [__props.label ? (openBlock(), createBlock(unref(SidebarGroupLabel), { key: 0 }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				})) : createCommentVNode("", true), createVNode(unref(SidebarGroupContent), null, {
+					default: withCtx(() => [createVNode(unref(SidebarMenu), { class: normalizeClass(__props.menuClass) }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(names.value, (name) => {
+							return openBlock(), createBlock(resource_menu_item_default, {
+								key: name,
+								name
+							}, null, 8, ["name"]);
+						}), 128)), renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["class"])) : createCommentVNode("", true);
+		};
+	}
+});
+export { resource_menu_item_group_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/resource-menu-item.js

@@ -0,0 +1,4 @@
+import resource_menu_item_vue_vue_type_script_setup_true_lang_default from "./resource-menu-item.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/resource-menu-item.vue
+var resource_menu_item_default = resource_menu_item_vue_vue_type_script_setup_true_lang_default;
+export { resource_menu_item_default as default };

package/dist/components/admin/layout/resource-menu-item.vue.d.ts

@@ -12,5 +12,6 @@ export interface ResourceMenuItemProps {
     /** Click handler invoked alongside the default navigation (e.g. close the drawer). */
     onClick?: () => void;
 }
-declare const _default: import("vue").DefineComponent<ResourceMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResourceMenuItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ResourceMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResourceMenuItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/admin/layout/resource-menu-item.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,71 @@
+import { useResourceRegistry } from "../../../admin/resource-registry.js";
+import { useGetResourceLabel } from "../../../label/use-get-resource-label.js";
+import { useCreatePath } from "../../../router/nav-composables.js";
+import skeleton_default from "../../ui/skeleton.js";
+import { ListIcon } from "./icons.js";
+import menu_item_link_default from "./menu-item-link.js";
+import { useMenuAccess } from "./use-menu-access.js";
+import { computed, createBlock, createCommentVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+// src/components/admin/layout/resource-menu-item.vue?vue&type=script&setup=true&lang.ts
+var resource_menu_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "resource-menu-item",
+	props: {
+		name: {},
+		label: {},
+		icon: {},
+		class: {},
+		onClick: { type: Function }
+	},
+	setup(__props) {
+		/**
+		* `<ResourceMenuItem>` — a sidebar entry linking to a resource's list view. The
+		* Vue twin of `@chelone/react`'s `layout/resource-menu-item.tsx`. Resolves the
+		* list path via `useCreatePath`, the label via `useGetResourceLabel`, and the
+		* icon from the resource's registry definition (falling back to an inline list
+		* glyph), then delegates to `<MenuItemLink>` for the link + active-highlight.
+		*
+		* Each item resolves its OWN path in its OWN setup (not in the `<Menu>` `v-for`
+		* loop) — the Vue rule that composables run once per component instance,
+		* mirroring the React twin being a discrete component per resource.
+		*
+		* R2: the item is gated by `useMenuAccess` on the resource's `list` action — a
+		* `<Skeleton>` renders while the access check is pending and the item hides when
+		* `list` access is denied (allow when access control is unconfigured). The
+		* `_scrollToTop` navigation state is deferred to the scroll-manager wave.
+		*/
+		const props = __props;
+		const registry = useResourceRegistry();
+		const createPath = useCreatePath();
+		const getResourceLabel = useGetResourceLabel();
+		const to = createPath({
+			resource: props.name,
+			type: "list"
+		});
+		const label = computed(() => props.label ?? getResourceLabel(props.name, 2));
+		const icon = computed(() => props.icon ?? registry.definitions[props.name]?.icon ?? ListIcon);
+		const { canAccess, isPending: isAccessPending } = useMenuAccess(computed(() => ({
+			action: "list",
+			resource: props.name
+		})));
+		return (_ctx, _cache) => {
+			return unref(isAccessPending) ? (openBlock(), createBlock(skeleton_default, {
+				key: 0,
+				class: "h-8 w-full"
+			})) : unref(canAccess) ? (openBlock(), createBlock(menu_item_link_default, {
+				key: 1,
+				to: unref(to),
+				label: label.value,
+				icon: icon.value,
+				class: normalizeClass(props.class),
+				"on-click": __props.onClick
+			}, null, 8, [
+				"to",
+				"label",
+				"icon",
+				"class",
+				"on-click"
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+export { resource_menu_item_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/theme-context.js

@@ -1,22 +1,39 @@
 import { inject, ref } from "vue";
-const ThemeContextKey = /* @__PURE__ */ Symbol("chelone-theme");
+// src/components/admin/layout/theme-context.ts
+/**
+* Theme-mode context (light/dark/system) + `useTheme` — the non-component
+* sibling of `theme-provider.vue`. The Vue analog of `@chelone/react`'s
+* `layout/theme-context.ts` + `use-theme.ts`.
+*
+* DELIBERATE DIVERGENCE FROM THE REACT TWIN: React's `<ThemeProvider>` persists
+* the mode through shadmin-core's `useStore` and the React twin's toggle is a
+* reka/radix `<DropdownMenu>`; both lean on `next-themes`-style React infra that
+* has no Vue equivalent. The Vue provider persists to `localStorage` directly
+* (a UI-only concern that need not require a Chelone store) and provides a `Ref`
+* under a typed `InjectionKey`. As in React, `Theme` is the runtime MODE, NOT a
+* palette — palettes are pure CSS tokens shipped by the demo/registry.
+*/
+/** The provide/inject key for the theme context. */
+var ThemeContextKey = Symbol("chelone-theme");
+/** Collapse `system` to a concrete mode via `matchMedia` (SSR/jsdom → light). */
 function resolveTheme(theme) {
-  if (theme === "system") {
-    if (typeof window === "undefined" || !window.matchMedia) return "light";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  return theme;
+	if (theme === "system") {
+		if (typeof window === "undefined" || !window.matchMedia) return "light";
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+	return theme;
 }
+/**
+* Read the active theme mode + setter. Degrades to an inert default when no
+* `<ThemeProvider>` is present (parity with the React twin's non-throwing
+* `useTheme`), so a toggle used standalone renders without crashing.
+*/
 function useTheme() {
-  const ctx = inject(ThemeContextKey, null);
-  if (!ctx) {
-    return { theme: ref("system"), setTheme: () => {
-    } };
-  }
-  return ctx;
+	const ctx = inject(ThemeContextKey, null);
+	if (!ctx) return {
+		theme: ref("system"),
+		setTheme: () => {}
+	};
+	return ctx;
 }
-export {
-  ThemeContextKey,
-  resolveTheme,
-  useTheme
-};
+export { ThemeContextKey, resolveTheme, useTheme };

package/dist/components/admin/layout/theme-mode-toggle.js

@@ -0,0 +1,4 @@
+import theme_mode_toggle_vue_vue_type_script_setup_true_lang_default from "./theme-mode-toggle.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/theme-mode-toggle.vue
+var theme_mode_toggle_default = theme_mode_toggle_vue_vue_type_script_setup_true_lang_default;
+export { theme_mode_toggle_default as default };

package/dist/components/admin/layout/theme-mode-toggle.vue.d.ts

@@ -1,4 +1,5 @@
 /** Props for {@link ThemeModeToggle} (none — configuration is via the provider). */
 export type ThemeModeToggleProps = Record<string, never>;
-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 _default: typeof __VLS_export;
 export default _default;
+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>;

package/dist/components/admin/layout/theme-mode-toggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import button_default from "../../ui/button.js";
+import { useTheme } from "./theme-context.js";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+// src/components/admin/layout/theme-mode-toggle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "size-5",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = {
+	key: 1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "size-5",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = {
+	key: 2,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	class: "size-5",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "sr-only" };
+var theme_mode_toggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "theme-mode-toggle",
+	setup(__props) {
+		/**
+		* `<ThemeModeToggle>` — switch between light / dark / system modes. The Vue twin
+		* of `@chelone/react`'s `<ThemeModeToggle>`.
+		*
+		* DELIBERATE DIVERGENCE: the React twin opens a reka/radix `<DropdownMenu>` with
+		* three items; the Vue `ui/` slice carries no dropdown primitive (dependency-
+		* free), so this CYCLES the mode on click (light → dark → system → light),
+		* honoring the task's "cycle light/dark/system, persist" contract with a single
+		* accessible button. The icon reflects the current mode; the selection is
+		* persisted by `<ThemeProvider>`.
+		*/
+		const { theme, setTheme } = useTheme();
+		const translate = useTranslate();
+		const CYCLE = [
+			"light",
+			"dark",
+			"system"
+		];
+		function cycle() {
+			const index = CYCLE.indexOf(theme.value);
+			setTheme(CYCLE[(index + 1) % CYCLE.length] ?? "system");
+		}
+		const label = computed(() => translate("ra.action.toggle_theme", { _: "Toggle theme" }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(button_default, {
+				variant: "ghost",
+				size: "icon",
+				"data-theme-mode-toggle": "",
+				"data-theme": unref(theme),
+				"aria-label": label.value,
+				title: label.value,
+				onClick: cycle
+			}, {
+				default: withCtx(() => [unref(theme) === "light" ? (openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {
+					cx: "12",
+					cy: "12",
+					r: "4"
+				}, null, -1), createElementVNode("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" }, null, -1)])])) : unref(theme) === "dark" ? (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[2] || (_cache[2] = [createElementVNode("rect", {
+					width: "20",
+					height: "14",
+					x: "2",
+					y: "3",
+					rx: "2"
+				}, null, -1), createElementVNode("path", { d: "M8 21h8M12 17v4" }, null, -1)])])), createElementVNode("span", _hoisted_4, toDisplayString(label.value), 1)]),
+				_: 1
+			}, 8, [
+				"data-theme",
+				"aria-label",
+				"title"
+			]);
+		};
+	}
+});
+export { theme_mode_toggle_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/theme-provider.js

@@ -0,0 +1,4 @@
+import theme_provider_vue_vue_type_script_setup_true_lang_default from "./theme-provider.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/theme-provider.vue
+var theme_provider_default = theme_provider_vue_vue_type_script_setup_true_lang_default;
+export { theme_provider_default as default };

package/dist/components/admin/layout/theme-provider.vue.d.ts

@@ -6,13 +6,14 @@ export interface ThemeProviderProps {
     /** localStorage key the mode is persisted under. Defaults to `chelone-theme`. */
     storageKey?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ThemeProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProviderProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ThemeProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProviderProps> & Readonly<{}>, {
     defaultTheme: Theme;
     storageKey: string;
 }, {}, {}, {}, 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/layout/theme-provider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { ThemeContextKey, resolveTheme } from "./theme-context.js";
+import { defineComponent, provide, ref, renderSlot, watchEffect } from "vue";
+import { DEFAULT_THEME_STORAGE_KEY } from "@chelone/core";
+// src/components/admin/layout/theme-provider.vue?vue&type=script&setup=true&lang.ts
+var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "theme-provider",
+	props: {
+		defaultTheme: { default: "system" },
+		storageKey: { default: DEFAULT_THEME_STORAGE_KEY }
+	},
+	setup(__props) {
+		/**
+		* `<ThemeProvider>` — owns + persists the light/dark/system mode and applies it
+		* as a class (`light`/`dark`) on `<html>` so Tailwind `dark:` variants + the
+		* shadcn `.dark` token block resolve. The Vue twin of `@chelone/react`'s
+		* `<ThemeProvider>`.
+		*
+		* Divergence (see `theme-context.ts`): persistence is `localStorage`, not the
+		* Chelone store + `next-themes`. A `watchEffect` re-applies the resolved mode
+		* whenever it changes; the mode is seeded from `localStorage` on setup.
+		*/
+		const props = __props;
+		function readStored() {
+			if (typeof localStorage === "undefined") return props.defaultTheme;
+			const stored = localStorage.getItem(props.storageKey);
+			return stored === "light" || stored === "dark" || stored === "system" ? stored : props.defaultTheme;
+		}
+		const theme = ref(readStored());
+		function setTheme(value) {
+			theme.value = value;
+			if (typeof localStorage !== "undefined") localStorage.setItem(props.storageKey, value);
+		}
+		watchEffect(() => {
+			if (typeof document === "undefined") return;
+			const root = document.documentElement;
+			root.classList.remove("light", "dark");
+			root.classList.add(resolveTheme(theme.value));
+		});
+		provide(ThemeContextKey, {
+			theme,
+			setTheme
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+export { theme_provider_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/title-portal-id.d.ts

@@ -4,4 +4,4 @@
  * sibling so `title-portal.vue` stays component-only. Matches the React twin's
  * `TITLE_PORTAL_ID` so the two adapters share the same portal contract.
  */
-export declare const TITLE_PORTAL_ID = "chelone-title-portal";
+export { TITLE_PORTAL_ID } from "@chelone/core";

package/dist/components/admin/layout/title-portal-id.js

@@ -1,4 +1 @@
-const TITLE_PORTAL_ID = "chelone-title-portal";
-export {
-  TITLE_PORTAL_ID
-};
+export { TITLE_PORTAL_ID } from "@chelone/core";

package/dist/components/admin/layout/title-portal.js

@@ -0,0 +1,4 @@
+import title_portal_vue_vue_type_script_setup_true_lang_default from "./title-portal.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/title-portal.vue
+var title_portal_default = title_portal_vue_vue_type_script_setup_true_lang_default;
+export { title_portal_default as default };

package/dist/components/admin/layout/title-portal.vue.d.ts

@@ -3,5 +3,6 @@ export interface TitlePortalProps {
     /** Extra class appended to the portal slot element. */
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<TitlePortalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TitlePortalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<TitlePortalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TitlePortalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/admin/layout/title-portal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,26 @@
+import { cn } from "../../../lib/utils.js";
+import { TITLE_PORTAL_ID } from "./title-portal-id.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+// src/components/admin/layout/title-portal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var title_portal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "title-portal",
+	props: { class: {} },
+	setup(__props) {
+		/**
+		* `<TitlePortal>` — the render target for a page `<Title>`, placed in the app
+		* bar. The Vue twin of `@chelone/react`'s `layout/title-portal.tsx` (no core
+		* seam — a pure DOM slot). The default `<Layout>`'s `<AppBar>` includes it; a
+		* page `<Title>` teleports into the element with this id.
+		*/
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(TITLE_PORTAL_ID),
+				class: normalizeClass(unref(cn)("flex min-w-0 flex-1 items-center", props.class)),
+				"data-slot": "title-portal"
+			}, null, 10, _hoisted_1);
+		};
+	}
+});
+export { title_portal_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/title.js

@@ -0,0 +1,4 @@
+import title_vue_vue_type_script_setup_true_lang_default from "./title.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/title.vue
+var title_default = title_vue_vue_type_script_setup_true_lang_default;
+export { title_default as default };

package/dist/components/admin/layout/title.vue.d.ts

@@ -1,3 +1,16 @@
+/**
+ * `<Title>` — teleports a page title into the `<TitlePortal>` slot in the app
+ * bar. The Vue twin of `@chelone/react`'s `layout/title.tsx`.
+ *
+ * Mirrors the react-admin `<Title>` API so a view declares its own page title
+ * without knowing where it lives in the DOM. Divergences from the React twin:
+ * teleport uses Vue's built-in `<Teleport>` (not `createPortal`), and a custom
+ * (non-string) title is passed via the default slot rather than a VNode prop.
+ * The target element is resolved on mount (after `<TitlePortal>` exists); until
+ * it resolves — or when no portal is present — the component renders nothing,
+ * matching the React twin's "renders nothing without a target".
+ */
+import { type VNode } from "vue";
 /** Props for {@link Title}. */
 export interface TitleProps {
     /**
@@ -11,11 +24,12 @@ export interface TitleProps {
     /** Optional CSS class applied to the rendered title element. */
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TitleProps> & 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<TitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** A custom title node rendered verbatim (replaces the translated string). */
-    default?: () => unknown;
+    default?: () => VNode[];
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/layout/title.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { cn } from "../../../lib/utils.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { TITLE_PORTAL_ID } from "./title-portal-id.js";
+import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useSlots } from "vue";
+// src/components/admin/layout/title.vue?vue&type=script&setup=true&lang.ts
+var title_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "title",
+	props: {
+		title: {},
+		defaultTitle: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<Title>` — teleports a page title into the `<TitlePortal>` slot in the app
+		* bar. The Vue twin of `@chelone/react`'s `layout/title.tsx`.
+		*
+		* Mirrors the react-admin `<Title>` API so a view declares its own page title
+		* without knowing where it lives in the DOM. Divergences from the React twin:
+		* teleport uses Vue's built-in `<Teleport>` (not `createPortal`), and a custom
+		* (non-string) title is passed via the default slot rather than a VNode prop.
+		* The target element is resolved on mount (after `<TitlePortal>` exists); until
+		* it resolves — or when no portal is present — the component renders nothing,
+		* matching the React twin's "renders nothing without a target".
+		*/
+		const props = __props;
+		const slots = useSlots();
+		const translate = useTranslate();
+		const target = ref(null);
+		onMounted(async () => {
+			const resolve = () => typeof document !== "undefined" ? document.getElementById(TITLE_PORTAL_ID) : null;
+			target.value = resolve();
+			if (!target.value) {
+				await nextTick();
+				target.value = resolve();
+			}
+		});
+		const value = computed(() => props.title ?? props.defaultTitle ?? "");
+		const translated = computed(() => value.value ? translate(value.value, { _: value.value }) : "");
+		const hasCustom = computed(() => slots.default != null);
+		return (_ctx, _cache) => {
+			return target.value ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: target.value
+			}, [hasCustom.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("h1", {
+				key: 1,
+				class: normalizeClass(unref(cn)("truncate text-lg font-semibold", props.class))
+			}, toDisplayString(translated.value), 3))], 8, ["to"])) : createCommentVNode("", true);
+		};
+	}
+});
+export { title_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/top-toolbar.js

@@ -0,0 +1,4 @@
+import top_toolbar_vue_vue_type_script_setup_true_lang_default from "./top-toolbar.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/top-toolbar.vue
+var top_toolbar_default = top_toolbar_vue_vue_type_script_setup_true_lang_default;
+export { top_toolbar_default as default };

package/dist/components/admin/layout/top-toolbar.vue.d.ts

@@ -3,10 +3,11 @@ export interface TopToolbarProps {
     /** Extra class merged onto the toolbar div. */
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TopToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TopToolbarProps> & 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<TopToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TopToolbarProps> & 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/layout/top-toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,21 @@
+import { cn } from "../../../lib/utils.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/admin/layout/top-toolbar.vue?vue&type=script&setup=true&lang.ts
+var top_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "top-toolbar",
+	props: { class: {} },
+	setup(__props) {
+		/**
+		* `<TopToolbar>` — the row of view actions to put in `<List>`'s `#actions`
+		* slot. The Vue twin of `@chelone/react`'s `layout/top-toolbar.tsx`.
+		*/
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "top-toolbar",
+				class: normalizeClass(unref(cn)("flex items-center justify-end gap-2 mb-2", props.class))
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { top_toolbar_vue_vue_type_script_setup_true_lang_default as default };