@revenexx/studio-shared 0.3.2 → 0.3.3

package/dist/module.d.mts

@@ -1,12 +1,16 @@
 import * as nuxt_schema from 'nuxt/schema';
 export * from '../dist/runtime/components/DataTable/types.js';
 export * from '../dist/runtime/types/storage.js';
+export * from '../dist/runtime/types/dashboard.js';
 export { SidebarNavItem, SidebarNavSection } from '../dist/runtime/types/nav.js';
 export { PlatformAuth } from '../dist/runtime/composables/usePlatformAuth.js';
 export { PlatformTenant } from '../dist/runtime/composables/usePlatformTenant.js';
 export { PlatformTalkback } from '../dist/runtime/composables/usePlatformTalkback.js';
 export { TalkbackChannel, TalkbackChannelOptions, TalkbackMaybeRef } from '../dist/runtime/composables/useTalkbackChannels.js';
 export { MediaLibraryClient } from '../dist/runtime/composables/useMediaLibrary.js';
+export { SavedViewsStore, StoredSavedView } from '../dist/runtime/composables/useSavedViews.js';
+export { WidgetCategory, WidgetCategoryGroup, WidgetConfigField, WidgetDefinition, WidgetPreviewShape, WidgetRegistry } from '../dist/runtime/lib/widgetRegistry.js';
+export { StickyListView } from '../dist/runtime/composables/useStickyListView.js';
 export { FloatingPanelDock, FloatingPanelMode, FloatingPanelOptions } from '../dist/runtime/composables/useFloatingPanel.js';
 export { IsoOption } from '../dist/runtime/lib/isoLists.js';
 export { Translate, TranslateNamed, Translator } from '../dist/runtime/lib/i18nBridge.js';

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "studio-shared",
   "configKey": "studioShared",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -36,6 +36,12 @@ const module$1 = defineNuxtModule({
       // Collapsible list-rail state (persisted per surface) behind the
       // DataTable toolbar's rail handle.
       { name: "useListRail", from: join(runtime, "composables/useListRail"), priority: -1 },
+      // Where the DataTable toolbar's saved views are kept. The default is
+      // localStorage, which is what a host without a cockpit backend has; the
+      // cockpit overrides it with an account-backed store (PE-608).
+      { name: "useSavedViews", from: join(runtime, "composables/useSavedViews"), priority: -1 },
+      // The narrowing a list was left in, kept across a page change (PE-608).
+      { name: "useStickyListView", from: join(runtime, "composables/useStickyListView"), priority: -1 },
       // A panel that docks to either side of a canvas, floats anywhere on it,
       // or collapses to a pill — and is dragged between those by its header.
       // Lifted out of the integration studio's workflow editor so a second
@@ -53,6 +59,9 @@ const module$1 = defineNuxtModule({
       "useTalkbackStream",
       "useTalkbackPresence"
     ].map((name) => ({ name, from: join(runtime, "composables/useTalkbackChannels") })));
+    addImports([
+      { name: "useDashboards", from: join(runtime, "composables/useDashboards") }
+    ]);
     addImports([
       { name: "useT", from: join(runtime, "composables/useT") },
       { name: "useUiLocale", from: join(runtime, "composables/useT") }

package/dist/runtime/components/Dashboard/DashboardConfirmDialog.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    open: boolean;
+    title: string;
+    description?: string;
+    confirmLabel: string;
+    destructive?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Dashboard/DashboardConfirmDialog.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button } from "@revenexx/studio";
+defineProps({
+  open: { type: Boolean, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  confirmLabel: { type: String, required: true },
+  destructive: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:open", "confirm"]);
+const t = useT();
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(o) => {
+  if (!o) emit('update:open', false);
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ title }}</AlertDialogTitle>
+        <AlertDialogDescription v-if="description">{{ description }}</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <Button variant="outline" size="sm" class="h-7 text-sm" @click="emit('update:open', false)">
+          {{ t("dashboard.dialog.action.cancel") }}
+        </Button>
+        <Button
+          size="sm"
+          class="h-7 text-sm"
+          :class="destructive ? 'bg-rose-600 text-white hover:bg-rose-700' : ''"
+          @click="emit('confirm');
+  emit('update:open', false)"
+        >
+          {{ confirmLabel }}
+        </Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

package/dist/runtime/components/Dashboard/DashboardConfirmDialog.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    open: boolean;
+    title: string;
+    description?: string;
+    confirmLabel: string;
+    destructive?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Dashboard/DashboardControls.d.vue.ts

@@ -0,0 +1,57 @@
+import type { Dashboard } from '../../types/dashboard.js';
+type __VLS_Props = {
+    dashboards: Dashboard[];
+    current: Dashboard | null;
+    editing: boolean;
+    dirty: boolean;
+    saving: boolean;
+    /** House-header sizing: `h-7` studio buttons instead of the greeting bar's pills. */
+    compact?: boolean;
+};
+declare var __VLS_149: {
+    pillClass: any;
+    paneClass: any;
+    compact: any;
+};
+type __VLS_Slots = {} & {
+    scope?: (props: typeof __VLS_149) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    PILL: string;
+    PILL_PANE: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: () => any;
+    select: (id: string) => any;
+    save: () => any;
+    discard: () => any;
+    addWidget: () => any;
+    rename: () => any;
+    share: () => any;
+    browse: () => any;
+    create: () => any;
+    duplicate: () => any;
+    remove: () => any;
+    setDefault: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEdit?: (() => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+    onSave?: (() => any) | undefined;
+    onDiscard?: (() => any) | undefined;
+    onAddWidget?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onShare?: (() => any) | undefined;
+    onBrowse?: (() => any) | undefined;
+    onCreate?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onSetDefault?: (() => any) | undefined;
+}>, {
+    compact: 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/Dashboard/DashboardControls.vue

@@ -0,0 +1,209 @@
+<script setup>
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@revenexx/studio";
+import { AddSquare, AltArrowDown as ChevronsUpDown, Copy, Diskette, Global, Magnifier, Pen, Restart, Star, TrashBinMinimalistic } from "#solar-icons";
+import { computed } from "vue";
+const props = defineProps({
+  dashboards: { type: Array, required: true },
+  current: { type: [Object, null], required: true },
+  editing: { type: Boolean, required: true },
+  dirty: { type: Boolean, required: true },
+  saving: { type: Boolean, required: true },
+  compact: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["select", "edit", "save", "discard", "addWidget", "rename", "share", "browse", "create", "duplicate", "remove", "setDefault"]);
+const t = useT();
+const MENU_LIMIT = 5;
+const PILL = "group cursor-pointer rounded-lg border border-gray-400/10 outline-1 outline-white/30 transition-colors hover:border-primary/50 disabled:cursor-not-allowed disabled:opacity-55 disabled:hover:border-gray-400/10";
+const PILL_PANE = "flex items-center gap-1.5 rounded-lg bg-white px-2.5 py-1.5 text-sm font-medium text-[#0B0522] transition-colors group-hover:bg-muted/60 group-disabled:group-hover:bg-white";
+const PILL_PANE_PRIMARY = "flex items-center gap-1.5 rounded-lg bg-primary px-2.5 py-1.5 text-sm font-medium text-white transition-colors group-hover:bg-primary/90";
+defineExpose({ PILL, PILL_PANE });
+const mine = computed(() => props.dashboards.filter((d) => d.isOwner));
+const shared = computed(() => props.dashboards.filter((d) => !d.isOwner));
+function shortlist(list) {
+  const currentFirst = [...list].sort((a, b) => {
+    if (a.id === props.current?.id) return -1;
+    if (b.id === props.current?.id) return 1;
+    return 0;
+  });
+  return currentFirst.slice(0, MENU_LIMIT);
+}
+const mineShown = computed(() => shortlist(mine.value));
+const sharedShown = computed(() => shortlist(shared.value));
+const hiddenCount = computed(
+  () => mine.value.length - mineShown.value.length + (shared.value.length - sharedShown.value.length)
+);
+const actions = computed(() => {
+  if (props.editing) {
+    return [
+      { key: "rename", icon: Pen, label: t("dashboard.header.action.rename"), run: () => emit("rename") },
+      { key: "add", icon: AddSquare, label: t("dashboard.header.action.add_widget"), run: () => emit("addWidget") },
+      { key: "discard", icon: Restart, label: t("dashboard.header.action.discard"), disabled: props.saving, run: () => emit("discard") },
+      {
+        key: "save",
+        icon: Diskette,
+        label: props.saving ? t("dashboard.header.action.saving") : t("dashboard.header.action.save"),
+        disabled: props.saving || !props.dirty,
+        primary: true,
+        run: () => emit("save")
+      }
+    ];
+  }
+  if (props.current?.canEdit) {
+    return [{ key: "edit", icon: Pen, label: t("dashboard.header.action.edit"), run: () => emit("edit") }];
+  }
+  if (props.current) {
+    return [{ key: "duplicate", icon: Copy, label: t("dashboard.header.action.duplicate_to_edit"), run: () => emit("duplicate") }];
+  }
+  return [];
+});
+const triggerLabel = computed(() => props.current && !props.current.isOwner ? t("dashboard.header.trigger.shared") : t("dashboard.header.trigger.mine"));
+</script>
+
+<template>
+  <div class="relative flex shrink-0 flex-wrap items-center gap-2">
+    <!-- Dashboard picker. Same DropdownMenu as the profile menu in the topbar,
+         so hover, spacing and colours are shared rather than reproduced. -->
+    <!-- Hidden in edit mode: switching dashboards mid-edit was guarded by a
+         discard prompt, and not offering the switch is a better answer than
+         asking about it. -->
+    <DropdownMenu v-if="!editing">
+      <DropdownMenuTrigger as-child>
+        <Button v-if="compact" variant="outline" size="sm" class="h-7 gap-1.5 text-sm">
+          <span class="text-muted-foreground">{{ triggerLabel }}:</span>
+          <span class="max-w-[12rem] truncate font-medium">{{ current?.name ?? t("dashboard.page.title_fallback") }}</span>
+          <ChevronsUpDown weight="Bold" :size="12" class="shrink-0 text-muted-foreground" />
+        </Button>
+        <button
+          v-else
+          type="button"
+          class="group cursor-pointer rounded-lg border border-gray-400/10 outline-1 outline-white/30 transition-colors hover:border-primary/50"
+        >
+          <div class="flex items-center gap-2 rounded-lg bg-white px-2.5 py-1.5 transition-colors group-hover:bg-muted/60">
+            <span class="shrink-0 text-sm text-muted-foreground">{{ triggerLabel }}:</span>
+            <span class="max-w-[14rem] truncate text-sm font-medium text-[#0B0522]">
+              {{ current?.name ?? t("dashboard.page.title_fallback") }}
+            </span>
+            <ChevronsUpDown weight="Bold" :size="12" class="shrink-0 text-muted-foreground" />
+          </div>
+        </button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" class="w-64">
+        <DropdownMenuLabel class="text-xs font-normal text-muted-foreground">
+          {{ t("dashboard.header.group.mine") }}
+        </DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="dashboard in mineShown"
+            :key="dashboard.id"
+            :class="dashboard.id === current?.id ? 'font-medium' : ''"
+            @select="emit('select', dashboard.id)"
+          >
+            <span class="flex-1 truncate">{{ dashboard.name }}</span>
+            <span
+              v-if="dashboard.isDefault"
+              class="flex shrink-0 items-center gap-1 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-700"
+            >
+              {{ t("dashboard.header.menu.default_badge") }}
+            </span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <template v-if="shared.length">
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel class="text-xs font-normal text-muted-foreground">
+            {{ t("dashboard.header.group.shared") }}
+          </DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              v-for="dashboard in sharedShown"
+              :key="dashboard.id"
+              :class="dashboard.id === current?.id ? 'font-medium' : ''"
+              @select="emit('select', dashboard.id)"
+            >
+              <span class="flex-1 truncate">{{ dashboard.name }}</span>
+              <span
+                v-if="dashboard.isDefault"
+                class="flex shrink-0 items-center gap-1 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-700"
+              >
+                {{ t("dashboard.header.menu.default_badge") }}
+              </span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </template>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem v-if="hiddenCount > 0" @select="emit('browse')">
+            <Magnifier :size="14" />
+            {{ t("dashboard.header.menu.browse") }}
+          </DropdownMenuItem>
+          <DropdownMenuItem @select="emit('create')">
+            <AddSquare :size="14" />
+            {{ t("dashboard.header.menu.new") }}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem @select="emit('duplicate')">
+            <Copy :size="14" />
+            {{ t("dashboard.header.menu.duplicate") }}
+          </DropdownMenuItem>
+          <DropdownMenuItem v-if="current?.isOwner" @select="emit('share')">
+            <Global :size="14" />
+            {{ t("dashboard.header.menu.share") }}
+          </DropdownMenuItem>
+          <DropdownMenuItem v-if="current && !current.isDefault" @select="emit('setDefault')">
+            <Star :size="14" />
+            {{ t("dashboard.header.menu.set_default") }}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            v-if="current?.isOwner"
+            class="text-destructive focus:text-destructive"
+            @select="emit('remove')"
+          >
+            <TrashBinMinimalistic :size="14" />
+            {{ t("dashboard.header.menu.delete") }}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+
+    <!-- What this surface scopes its widgets by: a period on the home screen,
+         a market in a studio. The row owns the position and the pill styling;
+         the surface owns the control. -->
+    <slot name="scope" :pill-class="PILL" :pane-class="PILL_PANE" :compact="compact" />
+
+    <span v-if="editing && dirty" class="text-xs text-muted-foreground">{{ t("dashboard.header.unsaved") }}</span>
+
+    <template v-for="action in actions" :key="action.key">
+      <Button
+        v-if="compact"
+        :variant="action.primary ? 'default' : 'outline'"
+        size="sm"
+        class="h-7 text-sm"
+        :disabled="action.disabled"
+        @click="action.run()"
+      >
+        <component :is="action.icon" :size="13" :class="action.primary ? '' : 'text-muted-foreground'" />
+        {{ action.label }}
+      </Button>
+      <button v-else type="button" :class="PILL" :disabled="action.disabled" @click="action.run()">
+        <span :class="action.primary ? PILL_PANE_PRIMARY : PILL_PANE">
+          <component :is="action.icon" :size="13" :class="action.primary ? '' : 'text-muted-foreground'" />
+          {{ action.label }}
+        </span>
+      </button>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/Dashboard/DashboardControls.vue.d.ts

@@ -0,0 +1,57 @@
+import type { Dashboard } from '../../types/dashboard.js';
+type __VLS_Props = {
+    dashboards: Dashboard[];
+    current: Dashboard | null;
+    editing: boolean;
+    dirty: boolean;
+    saving: boolean;
+    /** House-header sizing: `h-7` studio buttons instead of the greeting bar's pills. */
+    compact?: boolean;
+};
+declare var __VLS_149: {
+    pillClass: any;
+    paneClass: any;
+    compact: any;
+};
+type __VLS_Slots = {} & {
+    scope?: (props: typeof __VLS_149) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    PILL: string;
+    PILL_PANE: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: () => any;
+    select: (id: string) => any;
+    save: () => any;
+    discard: () => any;
+    addWidget: () => any;
+    rename: () => any;
+    share: () => any;
+    browse: () => any;
+    create: () => any;
+    duplicate: () => any;
+    remove: () => any;
+    setDefault: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEdit?: (() => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+    onSave?: (() => any) | undefined;
+    onDiscard?: (() => any) | undefined;
+    onAddWidget?: (() => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onShare?: (() => any) | undefined;
+    onBrowse?: (() => any) | undefined;
+    onCreate?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onSetDefault?: (() => any) | undefined;
+}>, {
+    compact: 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/Dashboard/DashboardGrid.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DashboardLayoutItem, DashboardWidget } from '../../types/dashboard.js';
+type __VLS_Props = {
+    layout: DashboardLayoutItem[];
+    widgets: DashboardWidget[];
+    editing?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (widgetId: string) => any;
+    configure: (widgetId: string) => any;
+    "update:layout": (layout: DashboardLayoutItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((widgetId: string) => any) | undefined;
+    onConfigure?: ((widgetId: string) => any) | undefined;
+    "onUpdate:layout"?: ((layout: DashboardLayoutItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Dashboard/DashboardGrid.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { GridItem, GridLayout } from "grid-layout-plus";
+import { computed, ref, watch } from "vue";
+import WidgetFrame from "./DashboardWidgetFrame.vue";
+import WidgetHost from "./DashboardWidgetHost.vue";
+import { useWidgetRegistry } from "../../lib/widgetRegistry";
+const props = defineProps({
+  layout: { type: Array, required: true },
+  widgets: { type: Array, required: true },
+  editing: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:layout", "configure", "remove"]);
+const registry = useWidgetRegistry();
+const internalLayout = ref(props.layout.map((item) => ({ ...item })));
+function normalize(items) {
+  return JSON.stringify(items.map(({ i, x, y, w, h }) => ({ i, x, y, w, h })));
+}
+function idsOf(items) {
+  return items.map((item) => item.i).sort().join("|");
+}
+watch(() => props.layout, (next) => {
+  const membershipChanged = idsOf(next) !== idsOf(internalLayout.value);
+  if (props.editing && !membershipChanged) return;
+  if (membershipChanged || normalize(next) !== normalize(internalLayout.value)) {
+    internalLayout.value = next.map((item) => ({ ...item }));
+  }
+}, { deep: true });
+watch(() => props.editing, () => {
+  internalLayout.value = props.layout.map((item) => ({ ...item }));
+});
+function onLayoutUpdated(next) {
+  if (!props.editing) return;
+  emit("update:layout", next.map(({ i, x, y, w, h }) => ({ i, x, y, w, h })));
+}
+function widgetFor(id) {
+  return props.widgets.find((w) => w.id === id);
+}
+const placedLayout = computed(() => internalLayout.value.filter((item) => !!widgetFor(item.i)));
+</script>
+
+<template>
+  <!-- `-mx-3 -mt-3`: grid-layout-plus insets every item by `margin` on all four
+       sides, so without this the widgets sit one gutter inside the page padding
+       and one inside the header. Cancelling it on three sides keeps the gaps
+       between widgets and drops the duplicated outer one. -->
+  <GridLayout
+    v-model:layout="internalLayout"
+    class="relative z-0 -mx-3 -mt-3"
+    :col-num="12"
+    :row-height="20"
+    :margin="[12, 12]"
+    :is-draggable="!!editing"
+    :is-resizable="!!editing"
+    :responsive="false"
+    :vertical-compact="true"
+    :use-css-transforms="true"
+    drag-allow-from=".widget-drag-handle"
+    @layout-updated="onLayoutUpdated"
+  >
+    <GridItem
+      v-for="item in placedLayout"
+      :key="item.i"
+      :i="item.i"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :min-w="registry.get(widgetFor(item.i).type)?.minSize?.w ?? 2"
+      :min-h="registry.get(widgetFor(item.i).type)?.minSize?.h ?? 3"
+    >
+      <WidgetFrame
+        :definition="registry.get(widgetFor(item.i).type)"
+        :title="widgetFor(item.i).title"
+        :editing="editing"
+        :configurable="!!registry.get(widgetFor(item.i).type)?.configFields?.length"
+        @configure="emit('configure', item.i)"
+        @remove="emit('remove', item.i)"
+      >
+        <WidgetHost :widget="widgetFor(item.i)" />
+      </WidgetFrame>
+    </GridItem>
+  </GridLayout>
+</template>
+
+<style scoped>
+:deep(.vgl-item--placeholder){background:rgba(124,58,237,.16);border:2px dashed rgba(124,58,237,.55);border-radius:.5rem;box-shadow:inset 0 0 0 9999px rgba(124,58,237,.04);opacity:1}:deep(.vgl-item--dragging){cursor:grabbing;z-index:40}:deep(.vgl-item--dragging)>*{border-radius:.5rem;box-shadow:0 12px 32px -8px rgba(11,5,34,.25);transform:scale(1.01);transition:transform .12s ease,box-shadow .12s ease}:deep(.vgl-item--resizing)>*{border-radius:.5rem;box-shadow:0 8px 24px -8px rgba(11,5,34,.2)}:deep(.vgl-item__resizer){opacity:.55;z-index:30}:deep(.vgl-item:hover .vgl-item__resizer){opacity:1}
+</style>

package/dist/runtime/components/Dashboard/DashboardGrid.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DashboardLayoutItem, DashboardWidget } from '../../types/dashboard.js';
+type __VLS_Props = {
+    layout: DashboardLayoutItem[];
+    widgets: DashboardWidget[];
+    editing?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (widgetId: string) => any;
+    configure: (widgetId: string) => any;
+    "update:layout": (layout: DashboardLayoutItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((widgetId: string) => any) | undefined;
+    onConfigure?: ((widgetId: string) => any) | undefined;
+    "onUpdate:layout"?: ((layout: DashboardLayoutItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Dashboard/DashboardNameDialog.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    open: boolean;
+    title: string;
+    description?: string;
+    label: string;
+    placeholder?: string;
+    confirmLabel: string;
+    /** Pre-filled value — a rename starts from the current name. */
+    initial?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    submit: (name: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onSubmit?: ((name: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Dashboard/DashboardNameDialog.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label } from "@revenexx/studio";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  label: { type: String, required: true },
+  placeholder: { type: String, required: false },
+  confirmLabel: { type: String, required: true },
+  initial: { type: String, required: false }
+});
+const emit = defineEmits(["update:open", "submit"]);
+const t = useT();
+const value = ref("");
+const field = ref(null);
+watch(() => props.open, async (open) => {
+  if (!open) return;
+  value.value = props.initial ?? "";
+  await nextTick();
+  const el = field.value?.$el ?? field.value;
+  el?.querySelector?.("input")?.focus?.() ?? el?.focus?.();
+});
+const canSubmit = computed(() => value.value.trim().length > 0);
+function submit() {
+  if (!canSubmit.value) return;
+  emit("submit", value.value.trim());
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="max-w-md">
+      <DialogHeader>
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription v-if="description">{{ description }}</DialogDescription>
+      </DialogHeader>
+
+      <div class="space-y-1.5">
+        <Label for="dashboard-name">{{ label }}</Label>
+        <Input
+          id="dashboard-name"
+          ref="field"
+          v-model="value"
+          class="bg-white"
+          :placeholder="placeholder"
+          @keydown.enter.prevent="submit"
+        />
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-7 text-sm" @click="emit('update:open', false)">
+          {{ t("dashboard.dialog.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-7 text-sm" :disabled="!canSubmit" @click="submit">
+          {{ confirmLabel }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>