@revenexx/studio-shared 0.2.0 → 0.3.0

package/dist/runtime/components/Media/MediaPickerDialog.vue.d.ts

@@ -0,0 +1,18 @@
+import type { StorageAsset } from '../../types/storage.js';
+type __VLS_Props = {
+    open: boolean;
+    multiple?: boolean;
+    /** Restrict the grid to these asset kinds (e.g. ['image']). */
+    kinds?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (assets: StorageAsset[]) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((assets: StorageAsset[]) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    multiple: boolean;
+    kinds: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Media/MediaUploader.d.vue.ts

@@ -0,0 +1,29 @@
+/**
+ * Upload dialog for the media browser. Drag-and-drop or pick multiple files;
+ * they're uploaded into the active folder (single → /assets, many → batched
+ * /assets/bulk) with per-file progress. Emits `done` once a batch finishes so
+ * the page can flip back to the grid.
+ *
+ * The storage client arrives through the `useMediaLibrary` provider seam, so
+ * this works in any host that wires one (the cockpit does; a standalone module
+ * host gets the inert default).
+ */
+type __VLS_Props = {
+    open: boolean;
+    folderId: string | null;
+    folderName: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (summary: {
+        created: number;
+        failed: number;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: ((summary: {
+        created: number;
+        failed: number;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Media/MediaUploader.vue

@@ -0,0 +1,161 @@
+<script setup>
+import { CloudUpload, CheckCircle, CloseCircle, RefreshCircle as Loader2 } from "#solar-icons";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Progress } from "@revenexx/studio";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  folderId: { type: [String, null], required: true },
+  folderName: { type: [String, null], required: true }
+});
+const emit = defineEmits(["update:open", "done"]);
+const { uploadMany } = useMediaLibrary();
+const t = useT();
+const files = ref([]);
+const progress = ref([]);
+const uploading = ref(false);
+const dragOver = ref(false);
+const fileInput = ref(null);
+function formatBytes(bytes, fractionDigits = 1) {
+  if (bytes === null || bytes === void 0 || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${bytes} ${t("shared.media.uploader.unit.bytes")}`;
+  const units = [
+    t("shared.media.uploader.unit.kb"),
+    t("shared.media.uploader.unit.mb"),
+    t("shared.media.uploader.unit.gb"),
+    t("shared.media.uploader.unit.tb")
+  ];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value.toFixed(fractionDigits)} ${units[unit]}`;
+}
+function reset() {
+  files.value = [];
+  progress.value = [];
+  uploading.value = false;
+  dragOver.value = false;
+}
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) reset();
+});
+function addFiles(list) {
+  if (!list) return;
+  files.value = [...files.value, ...Array.from(list)];
+}
+function onDrop(e) {
+  dragOver.value = false;
+  addFiles(e.dataTransfer?.files ?? null);
+}
+function onPick(e) {
+  addFiles(e.target.files);
+  if (fileInput.value) fileInput.value.value = "";
+}
+function removeFile(index) {
+  files.value = files.value.filter((_, i) => i !== index);
+}
+const totalBytes = computed(() => files.value.reduce((sum, f) => sum + f.size, 0));
+async function start() {
+  if (!files.value.length || uploading.value) return;
+  uploading.value = true;
+  progress.value = files.value.map((f) => ({ name: f.name, pct: 0, status: "pending" }));
+  const summary = await uploadMany(files.value, props.folderId, (index, p) => {
+    progress.value[index] = p;
+  });
+  uploading.value = false;
+  emit("done", summary);
+  if (summary.failed === 0) {
+    setTimeout(() => emit("update:open", false), 600);
+  }
+}
+function statusIcon(s) {
+  return s === "done" ? CheckCircle : s === "failed" ? CloseCircle : Loader2;
+}
+const descriptionParts = computed(() => {
+  const sentinel = "\0";
+  const [before = "", after = ""] = t("shared.media.uploader.description", { folder: sentinel }).split(sentinel);
+  return { before, after };
+});
+const folderLabel = computed(() => props.folderName ?? t("shared.media.uploader.folder.default"));
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="max-w-lg">
+      <DialogHeader>
+        <DialogTitle>{{ t("shared.media.uploader.title") }}</DialogTitle>
+        <DialogDescription>
+          {{ descriptionParts.before }}<span class="font-medium text-foreground">{{ folderLabel }}</span>{{ descriptionParts.after }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <!-- Drop zone -->
+      <div
+        class="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors"
+        :class="dragOver ? 'border-primary bg-primary/5' : 'border-input bg-muted/30'"
+        @dragover.prevent="dragOver = true"
+        @dragleave.prevent="dragOver = false"
+        @drop.prevent="onDrop"
+      >
+        <CloudUpload :size="28" class="text-foreground/40" />
+        <p class="text-sm text-muted-foreground">
+          {{ t("shared.media.uploader.dropzone.text") }}
+          <button type="button" class="font-medium text-primary hover:underline" @click="fileInput?.click()">{{ t("shared.media.uploader.action.browse") }}</button>
+        </p>
+        <p class="text-xs text-muted-foreground/70">{{ t("shared.media.uploader.dropzone.hint") }}</p>
+        <input ref="fileInput" type="file" multiple class="hidden" @change="onPick">
+      </div>
+
+      <!-- Selected / progress list -->
+      <div v-if="files.length" class="max-h-56 space-y-1.5 overflow-y-auto">
+        <div
+          v-for="(file, i) in files"
+          :key="`${file.name}-${i}`"
+          class="flex items-center gap-2 rounded-md border border-black/[0.06] bg-white px-2.5 py-1.5 text-sm"
+        >
+          <component
+            :is="statusIcon(progress[i]?.status ?? 'pending')"
+            :size="14"
+            class="shrink-0"
+            :class="{
+  'text-emerald-600': progress[i]?.status === 'done',
+  'text-red-600': progress[i]?.status === 'failed',
+  'animate-spin text-amber-500': uploading && (progress[i]?.status === 'uploading' || progress[i]?.status === 'pending'),
+  'text-foreground/30': !uploading
+}"
+          />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center justify-between gap-2">
+              <span class="truncate font-medium text-[#0B0522]">{{ file.name }}</span>
+              <span class="shrink-0 tabular-nums text-xs text-muted-foreground">{{ formatBytes(file.size) }}</span>
+            </div>
+            <Progress v-if="uploading" :model-value="progress[i]?.pct ?? 0" class="mt-1 h-1" />
+            <p v-if="progress[i]?.status === 'failed'" class="mt-0.5 text-xs text-red-600">{{ progress[i]?.error }}</p>
+          </div>
+          <button
+            v-if="!uploading"
+            type="button"
+            class="shrink-0 rounded p-0.5 text-muted-foreground hover:text-red-600"
+            @click="removeFile(i)"
+          >
+            <CloseCircle :size="14" />
+          </button>
+        </div>
+      </div>
+
+      <DialogFooter class="items-center">
+        <span v-if="files.length" class="mr-auto text-xs text-muted-foreground">
+          {{ t("shared.media.uploader.filecount", files.length) }} · {{ formatBytes(totalBytes) }}
+        </span>
+        <Button variant="outline" :disabled="uploading" @click="emit('update:open', false)">
+          {{ t("shared.media.uploader.action.cancel") }}
+        </Button>
+        <Button :disabled="!files.length || uploading" @click="start">
+          <component :is="uploading ? Loader2 : CloudUpload" :size="14" :class="{ 'animate-spin': uploading }" />
+          {{ uploading ? t("shared.media.uploader.action.uploading") : t("shared.media.uploader.action.upload", { count: files.length || "" }).trim() }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/dist/runtime/components/Media/MediaUploader.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Upload dialog for the media browser. Drag-and-drop or pick multiple files;
+ * they're uploaded into the active folder (single → /assets, many → batched
+ * /assets/bulk) with per-file progress. Emits `done` once a batch finishes so
+ * the page can flip back to the grid.
+ *
+ * The storage client arrives through the `useMediaLibrary` provider seam, so
+ * this works in any host that wires one (the cockpit does; a standalone module
+ * host gets the inert default).
+ */
+type __VLS_Props = {
+    open: boolean;
+    folderId: string | null;
+    folderName: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: (summary: {
+        created: number;
+        failed: number;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: ((summary: {
+        created: number;
+        failed: number;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -19,13 +19,14 @@ defineProps({
   error: { type: [String, null], required: false }
 });
 const emit = defineEmits(["update:open", "refresh"]);
+const t = useT();
 async function copyId(id) {
   if (!id) return;
   try {
     await navigator.clipboard.writeText(id);
-    toast.success("ID copied");
+    toast.success(t("shared.buildlogs.toast.idcopied"));
   } catch {
-    toast.error("Could not copy");
+    toast.error(t("shared.buildlogs.toast.copyfailed"));
   }
 }
 </script>
@@ -35,11 +36,11 @@ async function copyId(id) {
     <SheetContent side="right" class="flex w-full flex-col gap-0 p-0 sm:max-w-[max(50vw,640px)]">
       <SheetHeader class="border-b px-4 py-3">
         <div class="flex items-center gap-2">
-          <Badge variant="outline" class="shrink-0">Build</Badge>
+          <Badge variant="outline" class="shrink-0">{{ t("shared.buildlogs.badge.build") }}</Badge>
           <SheetTitle class="truncate font-mono text-sm">
-            {{ deployment?.$id || "Build logs" }}
+            {{ deployment?.$id || t("shared.buildlogs.title.default") }}
           </SheetTitle>
-          <button v-if="deployment?.$id" title="Copy ID" class="ml-auto" @click="copyId(deployment.$id)">
+          <button v-if="deployment?.$id" :title="t('shared.buildlogs.tooltip.copyid')" class="ml-auto" @click="copyId(deployment.$id)">
             <CopyIcon :size="12" class="text-muted-foreground hover:text-foreground" />
           </button>
         </div>
@@ -58,29 +59,29 @@ async function copyId(id) {
           </template>
           <template v-if="userPinned">
             <span class="text-muted-foreground">·</span>
-            <span>pinned</span>
+            <span>{{ t("shared.buildlogs.badge.pinned") }}</span>
           </template>
         </SheetDescription>
       </SheetHeader>
 
       <div class="flex-1 overflow-y-auto">
         <div v-if="loading && !deployment" class="py-8 text-center text-sm text-muted-foreground">
-          <Loader2 :size="16" class="mr-2 inline animate-spin" /> Loading…
+          <Loader2 :size="16" class="mr-2 inline animate-spin" /> {{ t("shared.buildlogs.loading") }}
         </div>
         <p v-else-if="error" class="p-4 text-sm text-rose-700">{{ error }}</p>
 
         <template v-else-if="deployment">
           <div class="flex items-center justify-between gap-2 px-4 py-2 border-b bg-muted/30">
             <span class="text-xs text-muted-foreground">
-              Status: <span class="font-medium text-foreground">{{ deployment.status || "\u2014" }}</span>
+              {{ t("shared.buildlogs.status.label") }} <span class="font-medium text-foreground">{{ deployment.status || "\u2014" }}</span>
               <template v-if="deployment.buildDuration">
-                · {{ deployment.buildDuration }}s
+                · {{ deployment.buildDuration }}{{ t("shared.buildlogs.duration.unit") }}
               </template>
             </span>
             <div class="flex items-center gap-2">
               <Loader2 v-if="isBuilding || loading" :size="12" class="animate-spin text-muted-foreground" />
               <Button variant="ghost" size="sm" class="h-6 text-xs" @click="emit('refresh')">
-                Refresh
+                {{ t("shared.buildlogs.action.refresh") }}
               </Button>
             </div>
           </div>
@@ -92,16 +93,16 @@ async function copyId(id) {
             >{{ stripAnsi(deployment.buildLogs) }}</pre>
             <p v-else-if="isBuilding" class="flex items-center gap-2 text-sm text-muted-foreground py-8">
               <Loader2 :size="12" class="animate-spin" />
-              Waiting for first log output…
+              {{ t("shared.buildlogs.waiting") }}
             </p>
             <p v-else class="text-sm text-muted-foreground py-8 text-center">
-              No logs captured for this build.
+              {{ t("shared.buildlogs.nologs") }}
             </p>
           </div>
         </template>
 
         <div v-else class="py-12 text-center text-sm text-muted-foreground">
-          Select a build from the list to see its logs.
+          {{ t("shared.buildlogs.selectbuild") }}
         </div>
       </div>
     </SheetContent>

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;
+    };
+};