@chelone/vue 0.6.0 → 0.9.0

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

@@ -21,11 +21,17 @@ export interface MenuItemLinkProps {
     class?: string;
     /** Click handler invoked alongside the default navigation (e.g. close the mobile drawer). */
     onClick?: () => void;
+    /**
+     * Keys that navigate to `to` from anywhere on the page, such as `"mod+1"` or
+     * `"alt+/"`, shown after the label. `mod` is Cmd or Ctrl.
+     */
+    keyboardShortcut?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MenuItemLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuItemLinkProps> & 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<MenuItemLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuItemLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,95 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useBasename } from "../../../router/adapter.js";
+import { useMatch, useNavigate } from "../../../router/nav-composables.js";
+import { SidebarContextKey } from "../../ui/sidebar/sidebar-context.js";
+import sidebar_menu_button_default from "../../ui/sidebar/sidebar-menu-button.js";
+import { SidebarMenuItem } from "../../ui/sidebar/sidebar-parts.js";
+import keyboard_shortcut_default from "../common/keyboard-shortcut.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { shouldHandleHotkey } from "@chelone/core";
+import { RouterLink } from "vue-router";
+// src/components/admin/layout/menu-item-link.vue?vue&type=script&setup=true&lang.ts
+var menu_item_link_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "menu-item-link",
+	props: {
+		to: {},
+		label: {},
+		icon: {},
+		class: {},
+		onClick: { type: Function },
+		keyboardShortcut: {}
+	},
+	setup(__props) {
+		/**
+		* `<MenuItemLink>` — a clickable sidebar entry that navigates to a route. The Vue
+		* twin of `@chelone/react`'s `layout/menu-item-link.tsx`. The active state is
+		* derived from `useMatch({ path: to, end: to === `${basename}/` })` (mirroring
+		* the React twin); when the current pathname matches `to`, the item is
+		* highlighted, and — because non-root links match with `end: false` — the
+		* parent list entry stays highlighted on its child detail routes. It is the
+		* building block for `<DashboardMenuItem>` / `<ResourceMenuItem>` and for custom
+		* `<Menu>` children.
+		*
+		* Vue divergences from the React twin: the collapsed-rail `<Tooltip>` wrapper
+		* is NOT ported yet (that React sub-component has no Vue twin in this wave) — a
+		* later surface-parity wave. `keyboardShortcut` reads core's hotkey grammar
+		* (`mod`, `shift`, `alt`), so `ctrl` and `cmd` are not aliases here, and
+		* `keyboardShortcutRepresentation` has no slot yet. Navigation uses vue-router's `<RouterLink>` (the framework link), and `onClick`
+		* is a prop invoked on click rather than a synthetic-event handler.
+		*/
+		const props = __props;
+		const sidebar = inject(SidebarContextKey, null);
+		const translate = useTranslate();
+		const basename = useBasename();
+		const match = useMatch({
+			path: props.to,
+			end: props.to === `${basename}/`
+		});
+		const isActive = computed(() => match.value != null);
+		const text = computed(() => translate(props.label, { _: props.label }));
+		const navigate = useNavigate();
+		function onShortcut(event) {
+			if (!props.keyboardShortcut) return;
+			const target = event.target instanceof HTMLElement ? event.target : null;
+			if (!shouldHandleHotkey(event, props.keyboardShortcut, target)) return;
+			event.preventDefault();
+			navigate(props.to);
+		}
+		onMounted(() => window.addEventListener("keydown", onShortcut));
+		onBeforeUnmount(() => window.removeEventListener("keydown", onShortcut));
+		function onClick() {
+			props.onClick?.();
+			if (sidebar?.openMobile.value) sidebar.setOpenMobile(false);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SidebarMenuItem), null, {
+				default: withCtx(() => [createVNode(unref(sidebar_menu_button_default), {
+					as: unref(RouterLink),
+					to: __props.to,
+					"is-active": isActive.value,
+					class: normalizeClass(props.class),
+					onClick
+				}, {
+					default: withCtx(() => [
+						__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), { key: 0 })) : createCommentVNode("", true),
+						renderSlot(_ctx.$slots, "icon"),
+						createElementVNode("span", null, toDisplayString(text.value), 1),
+						__props.keyboardShortcut ? (openBlock(), createBlock(keyboard_shortcut_default, {
+							key: 1,
+							"keyboard-shortcut": __props.keyboardShortcut,
+							class: "ml-auto"
+						}, null, 8, ["keyboard-shortcut"])) : createCommentVNode("", true)
+					]),
+					_: 3
+				}, 8, [
+					"as",
+					"to",
+					"is-active",
+					"class"
+				])]),
+				_: 3
+			});
+		};
+	}
+});
+export { menu_item_link_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -1,9 +1,11 @@
+import type { VNode } from "vue";
 type __VLS_Slots = {
     /** Custom nav entries that REPLACE the auto resource list. */
-    default?: () => unknown;
+    default?: () => VNode[];
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,48 @@
+import { useHasDashboard } from "../../../admin/has-dashboard.js";
+import { SidebarGroup, SidebarGroupContent, SidebarMenu } from "../../ui/sidebar/sidebar-parts.js";
+import dashboard_menu_item_default from "./dashboard-menu-item.js";
+import resource_menu_item_group_default from "./resource-menu-item-group.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+// src/components/admin/layout/menu.vue?vue&type=script&setup=true&lang.ts
+var menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "menu",
+	setup(__props) {
+		/**
+		* `<Menu>` — the sidebar navigation menu, auto-generated from the registered
+		* resources. The Vue twin of `@chelone/react`'s `layout/menu.tsx`. By default it
+		* renders a `<DashboardMenuItem>` (only when the app has a dashboard, via
+		* `useHasDashboard`) followed by a `<ResourceMenuItemGroup>` that emits one entry
+		* per list-enabled resource. Passing default-slot children REPLACES the auto
+		* resource list (use `<MenuItemLink>` / `<ResourceMenuItem>` / `<DashboardMenuItem>`
+		* for a fully custom nav tree).
+		*
+		* Vue divergence from the React twin: the Vue `ResourceDefinition` has no
+		* `options.group` bag yet, so resources render as one flat unlabeled group
+		* rather than the React twin's per-`options.group` collapsible sections (a later
+		* wave). The reactive registry replaces React's `useResourceDefinitions` hook.
+		*/
+		const hasDashboard = useHasDashboard();
+		return (_ctx, _cache) => {
+			return _ctx.$slots.default ? (openBlock(), createBlock(unref(SidebarGroup), { key: 0 }, {
+				default: withCtx(() => [createVNode(unref(SidebarGroupContent), null, {
+					default: withCtx(() => [createVNode(unref(SidebarMenu), null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					})]),
+					_: 3
+				})]),
+				_: 3
+			})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(hasDashboard) ? (openBlock(), createBlock(unref(SidebarGroup), { key: 0 }, {
+				default: withCtx(() => [createVNode(unref(SidebarGroupContent), null, {
+					default: withCtx(() => [createVNode(unref(SidebarMenu), null, {
+						default: withCtx(() => [createVNode(dashboard_menu_item_default)]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})) : createCommentVNode("", true), createVNode(resource_menu_item_group_default)], 64));
+		};
+	}
+});
+export { menu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/onboarding-tour-host.js

@@ -0,0 +1,4 @@
+import onboarding_tour_host_vue_vue_type_script_setup_true_lang_default from "./onboarding-tour-host.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/onboarding-tour-host.vue
+var onboarding_tour_host_default = onboarding_tour_host_vue_vue_type_script_setup_true_lang_default;
+export { onboarding_tour_host_default as default };

package/dist/components/admin/layout/onboarding-tour-host.vue.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Owns one tour controller. `<OnboardingTour>` keys this on the props the
+ * controller is built from, so a change to any of them starts a fresh
+ * controller, as the React twin's `useMemo` does.
+ */
+import { type TourEnd } from "@chelone/core";
+import type { OnboardingTourProps } from "./onboarding-tour.vue.js";
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        step?: (props: {
+            step: import("./onboarding-tour.vue.js").TourStep;
+            index: number;
+        }) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import("vue").DefineComponent<OnboardingTourProps, {
+    start: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    complete: (reason: TourEnd) => any;
+}, string, import("vue").PublicProps, Readonly<OnboardingTourProps> & Readonly<{
+    onComplete?: ((reason: TourEnd) => any) | undefined;
+}>, {
+    placement: import("@chelone/core").TourPlacement;
+    autoStart: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/layout/onboarding-tour-host.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { useCheloneStore } from "../../../context.js";
+import { useMicroStore } from "../../../store/use-micro-store.js";
+import onboarding_tour_overlay_default from "./onboarding-tour-overlay.js";
+import { Teleport, computed, createBlock, createCommentVNode, createSlots, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { createTourController } from "@chelone/core";
+// src/components/admin/layout/onboarding-tour-host.vue?vue&type=script&setup=true&lang.ts
+var onboarding_tour_host_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "onboarding-tour-host",
+	props: {
+		id: {},
+		steps: {},
+		autoStart: {
+			type: Boolean,
+			default: true
+		},
+		placement: { default: "auto" }
+	},
+	emits: ["complete"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* Owns one tour controller. `<OnboardingTour>` keys this on the props the
+		* controller is built from, so a change to any of them starts a fresh
+		* controller, as the React twin's `useMemo` does.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const controller = createTourController({
+			id: props.id,
+			stepCount: props.steps.length,
+			store: useCheloneStore(),
+			autoStart: props.autoStart,
+			onComplete: (reason) => emit("complete", reason)
+		});
+		__expose({ start: controller.start });
+		const state = useMicroStore(controller);
+		const step = computed(() => props.steps[state.value.index]);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [unref(state).active && step.value ? (openBlock(), createBlock(onboarding_tour_overlay_default, {
+				key: 0,
+				controller: unref(controller),
+				step: step.value,
+				index: unref(state).index,
+				total: __props.steps.length,
+				placement: step.value.placement ?? __props.placement
+			}, createSlots({ _: 2 }, [_ctx.$slots.step ? {
+				name: "step",
+				fn: withCtx((scope) => [renderSlot(_ctx.$slots, "step", normalizeProps(guardReactiveProps(scope)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"controller",
+				"step",
+				"index",
+				"total",
+				"placement"
+			])) : createCommentVNode("", true)]);
+		};
+	}
+});
+export { onboarding_tour_host_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/onboarding-tour-overlay.js

@@ -0,0 +1,4 @@
+import onboarding_tour_overlay_vue_vue_type_script_setup_true_lang_default from "./onboarding-tour-overlay.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/onboarding-tour-overlay.vue
+var onboarding_tour_overlay_default = onboarding_tour_overlay_vue_vue_type_script_setup_true_lang_default;
+export { onboarding_tour_overlay_default as default };

package/dist/components/admin/layout/onboarding-tour-overlay.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The open tour: scrim, ring and card. The Vue twin of `TourOverlay` in
+ * `@chelone/react`'s `layout/onboarding-tour.tsx`. `<OnboardingTour>` mounts it
+ * only while the tour is active, so mounting is opening and unmounting is
+ * closing: focus is taken on mount and given back on unmount.
+ */
+import { type TourController, type TourPlacement } from "@chelone/core";
+import type { TourStep } from "./onboarding-tour.vue.js";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    controller: TourController;
+    step: TourStep;
+    index: number;
+    total: number;
+    placement: TourPlacement;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    controller: TourController;
+    step: TourStep;
+    index: number;
+    total: number;
+    placement: TourPlacement;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    step?: (props: {
+        step: TourStep;
+        index: number;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/layout/onboarding-tour-overlay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,212 @@
+import { useTranslate } from "../../../i18n/use-translate.js";
+import button_default from "../../ui/button.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { REMEASURE_MS, placeTourCard, tourSpotlightPath } from "@chelone/core";
+// src/components/admin/layout/onboarding-tour-overlay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-slot": "onboarding-tour" };
+var _hoisted_2 = ["data-side", "aria-labelledby"];
+var _hoisted_3 = { class: "text-sm text-muted-foreground" };
+var _hoisted_4 = { class: "mt-4 flex items-center gap-2" };
+var _hoisted_5 = { class: "mr-auto text-xs text-muted-foreground" };
+var nextTitleId = 0;
+function findTarget(selector) {
+	try {
+		return document.querySelector(selector);
+	} catch {
+		return null;
+	}
+}
+var onboarding_tour_overlay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "onboarding-tour-overlay",
+	props: {
+		controller: {},
+		step: {},
+		index: {},
+		total: {},
+		placement: {}
+	},
+	setup(__props) {
+		/**
+		* The open tour: scrim, ring and card. The Vue twin of `TourOverlay` in
+		* `@chelone/react`'s `layout/onboarding-tour.tsx`. `<OnboardingTour>` mounts it
+		* only while the tour is active, so mounting is opening and unmounting is
+		* closing: focus is taken on mount and given back on unmount.
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const titleId = `chelone-tour-title-${nextTitleId++}`;
+		const card = useTemplateRef("card");
+		const advance = useTemplateRef("advance");
+		const rect = shallowRef(null);
+		const cardSize = ref({
+			width: 0,
+			height: 0
+		});
+		const viewport = ref({
+			width: 0,
+			height: 0
+		});
+		const isLast = computed(() => props.index === props.total - 1);
+		function focusAdvance() {
+			advance.value?.$el.focus();
+		}
+		function remeasure() {
+			const element = findTarget(props.step.target);
+			let next = null;
+			if (element) {
+				const { top, left, width, height } = element.getBoundingClientRect();
+				next = {
+					top,
+					left,
+					width,
+					height
+				};
+			}
+			const current = rect.value;
+			if (!(current === null || next === null ? current === next : current.top === next.top && current.left === next.left && current.width === next.width && current.height === next.height)) rect.value = next;
+			viewport.value = {
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
+		}
+		function measureCard() {
+			if (!card.value) return;
+			const { width, height } = card.value.getBoundingClientRect();
+			if (cardSize.value.width !== width || cardSize.value.height !== height) cardSize.value = {
+				width,
+				height
+			};
+		}
+		function onKeyDown(event) {
+			if (event.key === "Escape") {
+				props.controller.skip();
+				return;
+			}
+			if (event.key !== "Tab") return;
+			const buttons = card.value?.querySelectorAll("button");
+			const first = buttons?.item(0);
+			const last = buttons?.item(buttons.length - 1);
+			if (!first || !last) return;
+			const current = document.activeElement;
+			const inside = card.value?.contains(current) ?? false;
+			if (event.shiftKey && (current === first || !inside)) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && (current === last || !inside)) {
+				event.preventDefault();
+				first.focus();
+			}
+		}
+		function onFocusIn(event) {
+			const { target } = event;
+			if (target instanceof Node && !card.value?.contains(target)) focusAdvance();
+		}
+		let previous = null;
+		let timer;
+		function revealTarget() {
+			findTarget(props.step.target)?.scrollIntoView({ block: "center" });
+			remeasure();
+		}
+		onMounted(() => {
+			previous = document.activeElement;
+			revealTarget();
+			measureCard();
+			focusAdvance();
+			window.addEventListener("resize", remeasure);
+			window.addEventListener("scroll", remeasure, true);
+			document.addEventListener("keydown", onKeyDown);
+			document.addEventListener("focusin", onFocusIn);
+			timer = window.setInterval(remeasure, REMEASURE_MS);
+		});
+		onUpdated(measureCard);
+		watch(() => props.step.target, revealTarget, { flush: "post" });
+		watch(() => props.index, focusAdvance, { flush: "post" });
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", remeasure);
+			window.removeEventListener("scroll", remeasure, true);
+			document.removeEventListener("keydown", onKeyDown);
+			document.removeEventListener("focusin", onFocusIn);
+			window.clearInterval(timer);
+			if (previous instanceof HTMLElement) previous.focus();
+		});
+		const position = computed(() => placeTourCard({
+			target: rect.value,
+			card: cardSize.value,
+			viewport: viewport.value,
+			placement: props.placement
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", {
+					"data-slot": "tour-scrim",
+					"aria-hidden": "true",
+					class: "fixed inset-0 z-[100] bg-black/50",
+					style: normalizeStyle(rect.value ? { clipPath: unref(tourSpotlightPath)(rect.value) } : void 0),
+					onClick: _cache[0] || (_cache[0] = ($event) => __props.controller.skip())
+				}, null, 4),
+				rect.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-slot": "tour-ring",
+					"aria-hidden": "true",
+					class: "pointer-events-none fixed z-[100] rounded-md ring-2 ring-primary",
+					style: normalizeStyle({
+						top: `${rect.value.top}px`,
+						left: `${rect.value.left}px`,
+						width: `${rect.value.width}px`,
+						height: `${rect.value.height}px`
+					})
+				}, null, 4)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "card",
+					ref: card,
+					"data-slot": "tour-card",
+					"data-side": position.value.side,
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-labelledby": !_ctx.$slots.step && __props.step.title ? titleId : void 0,
+					class: "fixed z-[101] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg",
+					style: normalizeStyle({
+						top: `${position.value.top}px`,
+						left: `${position.value.left}px`
+					})
+				}, [renderSlot(_ctx.$slots, "step", {
+					step: __props.step,
+					index: __props.index
+				}, () => [__props.step.title ? (openBlock(), createElementBlock("h2", {
+					key: 0,
+					id: titleId,
+					class: "mb-1 text-sm font-semibold"
+				}, toDisplayString(__props.step.title), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, toDisplayString(__props.step.content), 1)]), createElementVNode("div", _hoisted_4, [
+					createElementVNode("span", _hoisted_5, toDisplayString(__props.index + 1) + " / " + toDisplayString(__props.total), 1),
+					createVNode(button_default, {
+						variant: "ghost",
+						size: "sm",
+						onClick: _cache[1] || (_cache[1] = ($event) => __props.controller.skip())
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.onboarding_tour.skip", { _: "Skip" })), 1)]),
+						_: 1
+					}),
+					__props.index > 0 ? (openBlock(), createBlock(button_default, {
+						key: 0,
+						variant: "outline",
+						size: "sm",
+						onClick: _cache[2] || (_cache[2] = ($event) => __props.controller.back())
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.onboarding_tour.back", { _: "Back" })), 1)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					createVNode(button_default, {
+						ref_key: "advance",
+						ref: advance,
+						size: "sm",
+						onClick: _cache[3] || (_cache[3] = ($event) => __props.controller.next())
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(isLast.value ? unref(translate)("chelone.onboarding_tour.finish", { _: "Finish" }) : unref(translate)("chelone.onboarding_tour.next", { _: "Next" })), 1)]),
+						_: 1
+					}, 512)
+				])], 12, _hoisted_2)
+			]);
+		};
+	}
+});
+export { onboarding_tour_overlay_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/layout/onboarding-tour.js

@@ -0,0 +1,4 @@
+import onboarding_tour_vue_vue_type_script_setup_true_lang_default from "./onboarding-tour.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/layout/onboarding-tour.vue
+var onboarding_tour_default = onboarding_tour_vue_vue_type_script_setup_true_lang_default;
+export { onboarding_tour_default as default };

package/dist/components/admin/layout/onboarding-tour.vue.d.ts

@@ -0,0 +1,42 @@
+import type { TourEnd, TourPlacement } from "@chelone/core";
+export interface TourStep {
+    /** CSS selector of the element to highlight. A step whose element is missing shows a centred card. */
+    target: string;
+    title?: string;
+    content: string;
+    /** Overrides the tour's `placement` for this step. */
+    placement?: TourPlacement;
+}
+/** Props for {@link OnboardingTour}. */
+export interface OnboardingTourProps {
+    /** Names the tour in the store: finishing or skipping it stores `onboarding-tour.<id>.completed`. */
+    id: string;
+    steps: TourStep[];
+    /** Open on mount while the tour is not stored as done. Default `true`. */
+    autoStart?: boolean;
+    /** Where the card sits relative to its target. Default `"auto"`. */
+    placement?: TourPlacement;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OnboardingTourProps, {
+    /** Opens the tour on its first step, or restarts it from there while open. */
+    start: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    complete: (reason: TourEnd) => any;
+}, string, import("vue").PublicProps, Readonly<OnboardingTourProps> & Readonly<{
+    onComplete?: ((reason: TourEnd) => any) | undefined;
+}>, {
+    placement: TourPlacement;
+    autoStart: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    step?: (props: {
+        step: TourStep;
+        index: number;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/layout/onboarding-tour.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import onboarding_tour_host_default from "./onboarding-tour-host.js";
+import { createBlock, createSlots, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, useTemplateRef, withCtx } from "vue";
+// src/components/admin/layout/onboarding-tour.vue?vue&type=script&setup=true&lang.ts
+var onboarding_tour_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "onboarding-tour",
+	props: {
+		id: {},
+		steps: {},
+		autoStart: {
+			type: Boolean,
+			default: true
+		},
+		placement: { default: "auto" }
+	},
+	emits: ["complete"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* `<OnboardingTour>` — highlights one element per step with a card beside it,
+		* and remembers in the store that the tour is done. The Vue twin of
+		* `@chelone/react`'s `layout/onboarding-tour.tsx`; the state machine and the
+		* geometry come from `@chelone/core`. Mount once, anywhere under `<Admin>`.
+		*
+		* Emits `complete` with `"finished"` or `"skipped"`, the Vue idiom for the
+		* React twin's `onComplete`. A `#step` slot, given `{ step, index }`, replaces
+		* the card's title and content. A template ref's `start()` opens the tour
+		* whatever `autoStart` and the stored done flag say.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const host = useTemplateRef("host");
+		__expose({ 
+		/** Opens the tour on its first step, or restarts it from there while open. */
+start: () => host.value?.start() });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(onboarding_tour_host_default, {
+				ref_key: "host",
+				ref: host,
+				key: `${props.id}:${props.steps.length}:${props.autoStart}`,
+				id: props.id,
+				steps: props.steps,
+				"auto-start": props.autoStart,
+				placement: props.placement,
+				onComplete: _cache[0] || (_cache[0] = ($event) => emit("complete", $event))
+			}, createSlots({ _: 2 }, [_ctx.$slots.step ? {
+				name: "step",
+				fn: withCtx((scope) => [renderSlot(_ctx.$slots, "step", normalizeProps(guardReactiveProps(scope)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"id",
+				"steps",
+				"auto-start",
+				"placement"
+			]);
+		};
+	}
+});
+export { onboarding_tour_vue_vue_type_script_setup_true_lang_default as default };

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

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