@revenexx/studio-shared 0.2.0 → 0.3.1

package/dist/runtime/components/Shared/FloatingPanel.vue.d.ts

@@ -0,0 +1,55 @@
+type Mode = 'docked-left' | 'docked-right' | 'floating';
+type __VLS_Props = {
+    /** What `useFloatingPanel` returned, passed through whole. */
+    panel: {
+        mode: {
+            value: Mode;
+        };
+        collapsed: {
+            value: boolean;
+        };
+        floatingStyle: {
+            value: Record<string, string>;
+        };
+        dragging: {
+            value: boolean;
+        };
+        startDrag: (ev: PointerEvent, el: HTMLElement | null) => void;
+        dock: (side: 'left' | 'right') => void;
+        floatHere: (el: HTMLElement | null) => void;
+        setCollapsed: (v: boolean) => void;
+    };
+    title: string;
+    /** Room the docked panel leaves at the bottom, for a floating control bar. */
+    bottomClass?: string;
+    /** Tailwind width, matching the `width` given to the composable. */
+    widthClass?: string;
+    /** Labels, so the package carries no copy of its own. */
+    labels: {
+        dockLeft: string;
+        dockRight: string;
+        floatHere: string;
+        collapse: string;
+        expand: string;
+        placement: string;
+    };
+};
+declare var __VLS_5: {}, __VLS_67: {}, __VLS_69: {};
+type __VLS_Slots = {} & {
+    'pill-icon'?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_67) => any;
+} & {
+    footer?: (props: typeof __VLS_69) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bottomClass: string;
+    widthClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/GitDeploymentSettings.vue

@@ -20,38 +20,39 @@ defineProps({
   showPreviews: { type: Boolean, required: false, default: true }
 });
 defineEmits(["update:triggerMode", "update:previewsEnabled"]);
+const t = useT();
 </script>
 
 <template>
   <Card class="bg-white/60 backdrop-blur-sm">
     <CardHeader>
-      <CardTitle class="text-sm">Deployment triggers</CardTitle>
+      <CardTitle class="text-sm">{{ t("shared.git.settings.title") }}</CardTitle>
       <CardDescription class="text-sm">
-        Control when a git push deploys this resource.
+        {{ t("shared.git.settings.description") }}
       </CardDescription>
     </CardHeader>
     <CardContent class="space-y-4">
       <div class="space-y-1">
-        <Label for="vcs-trigger-mode">When to deploy</Label>
+        <Label for="vcs-trigger-mode">{{ t("shared.git.settings.field.when") }}</Label>
         <Select
           :model-value="triggerMode"
           :disabled="disabled"
           @update:model-value="(v) => $emit('update:triggerMode', v)"
         >
           <SelectTrigger id="vcs-trigger-mode">
-            <SelectValue placeholder="On every push" />
+            <SelectValue :placeholder="t('shared.git.settings.select.placeholder')" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="push">On every push</SelectItem>
-            <SelectItem value="tag">Only on tag / release</SelectItem>
+            <SelectItem value="push">{{ t("shared.git.settings.option.push") }}</SelectItem>
+            <SelectItem value="tag">{{ t("shared.git.settings.option.tag") }}</SelectItem>
           </SelectContent>
         </Select>
         <p class="text-sm text-muted-foreground">
           <template v-if="triggerMode === 'tag'">
-            Builds only when you push a tag or publish a GitHub release.
+            {{ t("shared.git.settings.hint.tag") }}
           </template>
           <template v-else>
-            Builds on every push to the production branch.
+            {{ t("shared.git.settings.hint.push") }}
           </template>
         </p>
       </div>
@@ -63,9 +64,9 @@ defineEmits(["update:triggerMode", "update:previewsEnabled"]);
           @update:model-value="(v) => $emit('update:previewsEnabled', v)"
         />
         <div class="text-sm">
-          <div class="font-medium">Preview deployments</div>
+          <div class="font-medium">{{ t("shared.git.settings.previews.title") }}</div>
           <div class="text-sm text-muted-foreground">
-            Build a preview and comment the status on every pull request.
+            {{ t("shared.git.settings.previews.description") }}
           </div>
         </div>
       </div>

package/dist/runtime/components/Shared/ListSurface.d.vue.ts

@@ -0,0 +1,38 @@
+/**
+ * The frame every list surface with a left rail shares: an optional,
+ * collapsible rail column, the list itself, and an optional aside (a detail
+ * flyout column).
+ *
+ * The collapse *control* lives in the DataTable toolbar (`rail` prop +
+ * `v-model:rail-open`) so a surface never grows a second control row; this
+ * component only reacts to the same boolean. Use `useListRail()` for a state
+ * that survives a reload.
+ */
+type __VLS_Props = {
+    /** Rail visible? Bind the same ref the DataTable's `rail-open` model has. */
+    railOpen?: boolean;
+    /** Rail track width (default 240px). */
+    railWidth?: string;
+    /** Aside track width (default 280px). */
+    asideWidth?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    rail?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    aside?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    railOpen: boolean;
+    railWidth: string;
+    asideWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/ListSurface.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+  railOpen: { type: Boolean, required: false, default: true },
+  railWidth: { type: String, required: false, default: "240px" },
+  asideWidth: { type: String, required: false, default: "280px" }
+});
+const slots = useSlots();
+const hasAside = computed(() => !!slots.aside);
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-1 items-start gap-3"
+    :style="{ '--rail-w': railWidth, '--aside-w': asideWidth }"
+    :class="railOpen ? hasAside ? 'lg:grid-cols-[var(--rail-w)_minmax(0,1fr)_var(--aside-w)]' : 'lg:grid-cols-[var(--rail-w)_minmax(0,1fr)]' : hasAside ? 'lg:grid-cols-[minmax(0,1fr)_var(--aside-w)]' : 'lg:grid-cols-1'"
+  >
+    <div v-if="railOpen" class="min-w-0">
+      <slot name="rail" />
+    </div>
+    <div class="min-w-0">
+      <slot />
+    </div>
+    <div v-if="hasAside" class="min-w-0">
+      <slot name="aside" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Shared/ListSurface.vue.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The frame every list surface with a left rail shares: an optional,
+ * collapsible rail column, the list itself, and an optional aside (a detail
+ * flyout column).
+ *
+ * The collapse *control* lives in the DataTable toolbar (`rail` prop +
+ * `v-model:rail-open`) so a surface never grows a second control row; this
+ * component only reacts to the same boolean. Use `useListRail()` for a state
+ * that survives a reload.
+ */
+type __VLS_Props = {
+    /** Rail visible? Bind the same ref the DataTable's `rail-open` model has. */
+    railOpen?: boolean;
+    /** Rail track width (default 240px). */
+    railWidth?: string;
+    /** Aside track width (default 280px). */
+    asideWidth?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    rail?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    aside?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    railOpen: boolean;
+    railWidth: string;
+    asideWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/RecordLayout.d.vue.ts

@@ -0,0 +1,52 @@
+export interface RecordTab {
+    key: string;
+    label: string;
+    badge?: number | string | null;
+}
+type __VLS_Props = {
+    /** Tabs for the body column. Empty = render no tab bar. */
+    tabs?: RecordTab[];
+    /** Active tab key (`v-model`). */
+    modelValue?: string;
+    /** Rail track width. 320px reads as a column; below ~280 it reads as a list. */
+    railWidth?: string;
+    /**
+     * Height of the sticky PageHeader, in px — the rail (and the shared TabBar)
+     * park directly under it. 57 = `px-4 pt-4 pb-3` + the text-xl line + hairline;
+     * pass something else only together with a custom `#tabs` slot, because
+     * `TabBar` hard-codes the same offset.
+     */
+    stickyOffset?: number;
+    /** What the narrow-width disclosure calls the rail body. */
+    railLabel?: string;
+    /** Start the narrow-width disclosure expanded (initial value only). */
+    railOpenOnNarrow?: boolean;
+};
+declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    'rail-head'?: (props: typeof __VLS_1) => any;
+} & {
+    rail?: (props: typeof __VLS_7) => any;
+} & {
+    tabs?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((key: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    railWidth: string;
+    tabs: RecordTab[];
+    stickyOffset: number;
+    railOpenOnNarrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/RecordLayout.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { AltArrowDown } from "#solar-icons";
+import TabBar from "./TabBar.vue";
+const props = defineProps({
+  tabs: { type: Array, required: false, default: () => [] },
+  modelValue: { type: String, required: false, default: "" },
+  railWidth: { type: String, required: false, default: "20rem" },
+  stickyOffset: { type: Number, required: false, default: 57 },
+  railLabel: { type: String, required: false },
+  railOpenOnNarrow: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const t = useT();
+const railLabelText = computed(() => props.railLabel ?? t("shared.recordlayout.rail.label.default"));
+const narrowOpen = ref(props.railOpenOnNarrow);
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-1 items-start gap-4 xl:grid-cols-[var(--record-rail-w)_minmax(0,1fr)]"
+    :style="{ '--record-rail-w': railWidth, '--record-rail-top': `${stickyOffset}px` }"
+  >
+    <aside
+      class="min-w-0 space-y-3 xl:sticky xl:top-[var(--record-rail-top)] xl:max-h-[calc(100svh_-_var(--record-rail-top)_-_5.5rem)] xl:overflow-y-auto xl:overscroll-contain xl:pb-1"
+    >
+      <slot name="rail-head" />
+
+      <!-- Narrow widths: the rail body folds away so the tabs stay reachable. -->
+      <button
+        v-if="$slots.rail"
+        type="button"
+        class="flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-black/[0.06] bg-white/60 px-3 py-2 text-sm font-medium text-[#0B0522] transition-colors hover:text-primary xl:hidden"
+        :aria-expanded="narrowOpen"
+        @click="narrowOpen = !narrowOpen"
+      >
+        <span>{{ narrowOpen ? t("shared.recordlayout.rail.action.hide", { label: railLabelText }) : t("shared.recordlayout.rail.action.show", { label: railLabelText }) }}</span>
+        <AltArrowDown
+          :size="14"
+          class="shrink-0 transition-transform"
+          :class="narrowOpen ? 'rotate-180' : ''"
+        />
+      </button>
+
+      <div :class="narrowOpen ? 'space-y-3' : 'hidden space-y-3 xl:block'">
+        <slot name="rail" />
+      </div>
+    </aside>
+
+    <div class="min-w-0">
+      <slot name="tabs">
+        <TabBar
+          v-if="tabs.length"
+          :tabs="tabs"
+          :model-value="modelValue"
+          @update:model-value="(k) => emit('update:modelValue', k)"
+        />
+      </slot>
+      <div class="pt-4">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Shared/RecordLayout.vue.d.ts

@@ -0,0 +1,52 @@
+export interface RecordTab {
+    key: string;
+    label: string;
+    badge?: number | string | null;
+}
+type __VLS_Props = {
+    /** Tabs for the body column. Empty = render no tab bar. */
+    tabs?: RecordTab[];
+    /** Active tab key (`v-model`). */
+    modelValue?: string;
+    /** Rail track width. 320px reads as a column; below ~280 it reads as a list. */
+    railWidth?: string;
+    /**
+     * Height of the sticky PageHeader, in px — the rail (and the shared TabBar)
+     * park directly under it. 57 = `px-4 pt-4 pb-3` + the text-xl line + hairline;
+     * pass something else only together with a custom `#tabs` slot, because
+     * `TabBar` hard-codes the same offset.
+     */
+    stickyOffset?: number;
+    /** What the narrow-width disclosure calls the rail body. */
+    railLabel?: string;
+    /** Start the narrow-width disclosure expanded (initial value only). */
+    railOpenOnNarrow?: boolean;
+};
+declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    'rail-head'?: (props: typeof __VLS_1) => any;
+} & {
+    rail?: (props: typeof __VLS_7) => any;
+} & {
+    tabs?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((key: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    railWidth: string;
+    tabs: RecordTab[];
+    stickyOffset: number;
+    railOpenOnNarrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/RecordRailCard.d.vue.ts

@@ -0,0 +1,26 @@
+/**
+ * A card sized for the `RecordLayout` rail (PE-250).
+ *
+ * Same glass shell as the page cards, but on the rail's budget: `px-4 py-3`
+ * instead of `px-6 py-4`, a `text-xs` section label instead of a headline, and
+ * an optional right-aligned `#actions` (usually the link that jumps to the tab
+ * that owns the full thing). Use it so every rail across the studio stacks the
+ * same way instead of each page re-rolling its own `<section>`.
+ */
+type __VLS_Props = {
+    title?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/RecordRailCard.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  title: { type: String, required: false }
+});
+</script>
+
+<template>
+  <section class="overflow-hidden rounded-lg border border-gray-400/10 bg-white/60 outline-1 outline-white/30 backdrop-blur-sm">
+    <div
+      v-if="title || $slots.actions"
+      class="flex items-center justify-between gap-2 border-b border-black/[0.06] px-4 py-2.5"
+    >
+      <h3 class="truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {{ title }}
+      </h3>
+      <slot name="actions" />
+    </div>
+    <slot />
+  </section>
+</template>

package/dist/runtime/components/Shared/RecordRailCard.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A card sized for the `RecordLayout` rail (PE-250).
+ *
+ * Same glass shell as the page cards, but on the rail's budget: `px-4 py-3`
+ * instead of `px-6 py-4`, a `text-xs` section label instead of a headline, and
+ * an optional right-aligned `#actions` (usually the link that jumps to the tab
+ * that owns the full thing). Use it so every rail across the studio stacks the
+ * same way instead of each page re-rolling its own `<section>`.
+ */
+type __VLS_Props = {
+    title?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/SidebarNav.d.vue.ts

@@ -5,6 +5,11 @@
  * studio sidebar (Settings, Integrations, Commerce, Apps, …) renders
  * through this so spacing, active state, badges and "soon" tags stay
  * identical. Pass `sections`; use `#notice` for loading/empty hints.
+ *
+ * Items may declare `children`. Those are **tabs of the page the item opens**,
+ * not sub-navigation: every item is exactly one row, and it stays highlighted
+ * while the route is on any of its tabs. A surface that should stand on its
+ * own in the sidebar is declared as its own item.
  */
 import type { Component } from 'vue';
 import type { SidebarNavSection } from '../../types/nav.js';

package/dist/runtime/components/Shared/SidebarNav.vue

@@ -3,17 +3,14 @@
 </script>
 
 <script setup>
+import { sidebarItemKey } from "../../lib/sidebarNav";
+import SidebarNavLink from "./SidebarNavLink.vue";
 defineProps({
   title: { type: String, required: true },
   icon: { type: null, required: false },
   sections: { type: Array, required: true },
   minimal: { type: Boolean, required: false }
 });
-const route = useRoute();
-function isActive(item) {
-  if (item.exact) return route.path === item.to;
-  return route.path === item.to || route.path.startsWith(`${item.to}/`);
-}
 </script>
 
 <template>
@@ -37,28 +34,11 @@ function isActive(item) {
           </div>
         </div>
         <nav class="flex flex-col gap-0.5 px-2">
-          <NuxtLink
+          <SidebarNavLink
             v-for="item in section.items"
-            :key="item.to"
-            :to="item.to"
-            class="group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:text-primary"
-            :class="[
-  isActive(item) ? 'bg-primary/10 text-[#0B0522] font-medium' : 'text-foreground/80 hover:bg-primary/5',
-  item.preview ? 'opacity-70' : ''
-]"
-          >
-            <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="shrink-0 text-foreground/60 group-hover:text-primary" />
-            <span class="flex-1 truncate flex items-center gap-1.5">
-              {{ item.label }}
-              <span
-                v-if="item.preview"
-                class="rounded bg-muted px-1 text-mono text-muted-foreground"
-                title="Coming soon"
-              >
-                soon
-              </span>
-            </span>
-          </NuxtLink>
+            :key="sidebarItemKey(item)"
+            :item="item"
+          />
         </nav>
       </template>
 

package/dist/runtime/components/Shared/SidebarNav.vue.d.ts

@@ -5,6 +5,11 @@
  * studio sidebar (Settings, Integrations, Commerce, Apps, …) renders
  * through this so spacing, active state, badges and "soon" tags stay
  * identical. Pass `sections`; use `#notice` for loading/empty hints.
+ *
+ * Items may declare `children`. Those are **tabs of the page the item opens**,
+ * not sub-navigation: every item is exactly one row, and it stays highlighted
+ * while the route is on any of its tabs. A surface that should stand on its
+ * own in the sidebar is declared as its own item.
  */
 import type { Component } from 'vue';
 import type { SidebarNavSection } from '../../types/nav.js';

package/dist/runtime/components/Shared/SidebarNavLink.d.vue.ts

@@ -0,0 +1,15 @@
+/**
+ * One row of a `SidebarNav` section — always exactly one link, never a group.
+ *
+ * An item's `children` are the **tabs of the page this row opens**, not rows
+ * of their own (see `lib/sidebarNav.ts`), so there is nothing to expand here:
+ * the row links to the item's route, or — for a pure container that nominates
+ * no landing page — to its first tab, and stays highlighted while the route is
+ * on any of them.
+ */
+import type { SidebarNavItem } from '../../types/nav.js';
+type __VLS_Props = {
+    item: SidebarNavItem;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Shared/SidebarNavLink.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { sidebarItemIsCurrent, sidebarItemTarget } from "../../lib/sidebarNav";
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+const t = useT();
+const route = useRoute();
+const target = computed(() => sidebarItemTarget(props.item));
+const current = computed(() => sidebarItemIsCurrent(props.item, route.path));
+const rowClass = computed(() => [
+  "group flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:text-primary",
+  current.value ? "bg-primary/10 text-[#0B0522] font-medium" : "text-foreground/80 hover:bg-primary/5",
+  props.item.preview ? "opacity-70" : ""
+]);
+</script>
+
+<template>
+  <NuxtLink v-if="target" :to="target" :class="rowClass">
+    <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="shrink-0 text-foreground/60 group-hover:text-primary" />
+    <span class="min-w-0 flex-1 truncate flex items-center gap-1.5">
+      {{ item.label }}
+      <span
+        v-if="item.preview"
+        class="rounded bg-muted px-1 text-mono text-muted-foreground"
+        :title="t('shared.nav.badge.comingsoon.tooltip')"
+      >
+        {{ t("shared.nav.badge.comingsoon.label") }}
+      </span>
+    </span>
+    <!--
+      What is waiting behind the entry. A count sits at the end of the row so
+      the labels stay left-aligned and scannable; a dot only says "something",
+      which is the honest rendering when the source cannot be counted.
+      Resolved upstream — an item with nothing pending carries no badge at all
+      rather than a zero, because a zero reads as a queue worth opening.
+    -->
+    <span
+      v-if="item.badge === 'dot'"
+      class="size-1.5 shrink-0 rounded-full bg-primary"
+      aria-hidden="true"
+    />
+    <span
+      v-else-if="item.badge !== null && item.badge !== void 0"
+      class="shrink-0 rounded-full bg-muted px-1.5 text-[11px] font-medium tabular-nums text-muted-foreground"
+    >
+      {{ item.badge }}
+    </span>
+  </NuxtLink>
+</template>

package/dist/runtime/components/Shared/SidebarNavLink.vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * One row of a `SidebarNav` section — always exactly one link, never a group.
+ *
+ * An item's `children` are the **tabs of the page this row opens**, not rows
+ * of their own (see `lib/sidebarNav.ts`), so there is nothing to expand here:
+ * the row links to the item's route, or — for a pure container that nominates
+ * no landing page — to its first tab, and stays highlighted while the route is
+ * on any of them.
+ */
+import type { SidebarNavItem } from '../../types/nav.js';
+type __VLS_Props = {
+    item: SidebarNavItem;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Shared/Wizard.vue

@@ -7,6 +7,7 @@ const props = defineProps({
   busy: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:modelValue", "finish"]);
+const t = useT();
 const index = computed({
   get: () => props.modelValue,
   set: (v) => emit("update:modelValue", v)
@@ -40,7 +41,7 @@ function goTo(i) {
         @click="goTo(i)"
       >
         <div class="h-1 rounded-full transition-colors" :class="i <= index ? 'bg-primary' : 'bg-border'" />
-        <div class="mt-2 text-xs font-medium" :class="i <= index ? 'text-primary' : 'text-muted-foreground'">Step {{ i + 1 }}</div>
+        <div class="mt-2 text-xs font-medium" :class="i <= index ? 'text-primary' : 'text-muted-foreground'">{{ t("shared.wizard.step.label", { number: i + 1 }) }}</div>
         <div class="text-sm" :class="i <= index ? 'text-[#0B0522]' : 'text-muted-foreground'">{{ s.title }}</div>
       </div>
     </div>
@@ -53,9 +54,11 @@ function goTo(i) {
       <!-- Custom footer (e.g. multiple finish actions on a review step). Falls
            back to the standard Back / Next·Finish pair. -->
       <slot name="footer" :back="back" :next="next" :is-first="isFirst" :is-last="isLast" :can-advance="canAdvance" :busy="busy" :index="index">
-        <Button variant="ghost" :disabled="isFirst || busy" @click="back">Back</Button>
+        <Button variant="ghost" :disabled="isFirst || busy" @click="back">
+          {{ t("shared.wizard.action.back") }}
+        </Button>
         <Button :disabled="!canAdvance || busy" class="gap-1" @click="next">
-          {{ isLast ? "Finish" : "Next" }}
+          {{ isLast ? t("shared.wizard.action.finish") : t("shared.wizard.action.next") }}
         </Button>
       </slot>
     </div>