@revenexx/studio-shared 0.3.2 → 0.4.0

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>

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

@@ -0,0 +1,19 @@
+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 __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+import type { Dashboard } from '../../types/dashboard.js';
+type __VLS_Props = {
+    open: boolean;
+    dashboards: Dashboard[];
+    currentId?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,100 @@
+<script setup>
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input } from "@revenexx/studio";
+import { Global, Lock, Magnifier, Pen, Star } from "#solar-icons";
+import { computed, ref } from "vue";
+import { dateTimeFormat } from "../../lib/formatBridge";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  dashboards: { type: Array, required: true },
+  currentId: { type: [String, null], required: false }
+});
+const emit = defineEmits(["update:open", "select"]);
+const t = useT();
+function formatDateTime(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : dateTimeFormat({ dateStyle: "medium", timeStyle: "short" }).format(date);
+}
+const query = ref("");
+watch(() => props.open, (open) => {
+  if (open) query.value = "";
+});
+const groups = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  const match = (d) => !term || d.name.toLowerCase().includes(term) || (d.ownerName ?? "").toLowerCase().includes(term);
+  return [
+    { key: "mine", label: t("dashboard.header.group.mine"), items: props.dashboards.filter((d) => d.isOwner && match(d)) },
+    { key: "shared", label: t("dashboard.header.group.shared"), items: props.dashboards.filter((d) => !d.isOwner && match(d)) }
+  ].filter((group) => group.items.length > 0);
+});
+const total = computed(() => groups.value.reduce((sum, g) => sum + g.items.length, 0));
+function pick(id) {
+  emit("select", id);
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>{{ t("dashboard.picker.title") }}</DialogTitle>
+        <DialogDescription>{{ t("dashboard.picker.description", { count: dashboards.length }) }}</DialogDescription>
+      </DialogHeader>
+
+      <div class="relative">
+        <Magnifier :size="14" class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <Input v-model="query" :placeholder="t('dashboard.picker.search_placeholder')" class="bg-white pl-8" />
+      </div>
+
+      <div class="max-h-[55vh] -mx-1 space-y-4 overflow-y-auto px-1 pb-1">
+        <p v-if="!total" class="py-10 text-center text-sm text-muted-foreground">
+          {{ t("dashboard.picker.no_matches", { query }) }}
+        </p>
+
+        <section v-for="group in groups" :key="group.key">
+          <h4 class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {{ group.label }}
+          </h4>
+          <ul class="flex flex-col gap-1">
+            <li v-for="dashboard in group.items" :key="dashboard.id">
+              <button
+                type="button"
+                class="flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left transition"
+                :class="dashboard.id === currentId ? 'border-primary/40 bg-primary/[0.04]' : 'border-transparent hover:border-black/[0.08] hover:bg-black/[0.03]'"
+                @click="pick(dashboard.id)"
+              >
+                <span class="min-w-0 flex-1">
+                  <span class="flex items-center gap-1.5">
+                    <span class="truncate text-sm font-medium text-[#0B0522]">{{ dashboard.name }}</span>
+                    <span
+                      v-if="dashboard.isDefault"
+                      class="shrink-0 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>
+                  </span>
+                  <span class="mt-0.5 block truncate text-xs text-muted-foreground">
+                    <template v-if="dashboard.ownerName">{{ t("dashboard.picker.owner", { name: dashboard.ownerName }) }} · </template>
+                    {{ t("dashboard.picker.updated", { at: formatDateTime(dashboard.updatedAt) }) }}
+                  </span>
+                </span>
+
+                <!-- How it is shared, at a glance: private, read-only or open. -->
+                <span class="flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
+                  <template v-if="dashboard.visibility === 'private'">
+                    <Lock :size="12" /> {{ t("dashboard.share.private.title") }}
+                  </template>
+                  <template v-else-if="dashboard.tenantPermission === 'edit'">
+                    <Pen :size="12" /> {{ t("dashboard.share.permission.edit.title") }}
+                  </template>
+                  <template v-else>
+                    <Global :size="12" /> {{ t("dashboard.share.permission.view.title") }}
+                  </template>
+                </span>
+                <Star v-if="dashboard.id === currentId" :size="12" class="shrink-0 text-primary opacity-0" />
+              </button>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,15 @@
+import type { Dashboard } from '../../types/dashboard.js';
+type __VLS_Props = {
+    open: boolean;
+    dashboards: Dashboard[];
+    currentId?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,28 @@
+import type { Dashboard, DashboardTenantPermission, DashboardVisibility } from '../../types/dashboard.js';
+type __VLS_Props = {
+    open: boolean;
+    dashboard: Dashboard | null;
+    /**
+     * Where this surface's dashboards live. The link is `path?dashboard=slug`,
+     * and a Commerce dashboard opened at `/` would land on the home screen and
+     * silently resolve to something else.
+     */
+    path?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    change: (payload: {
+        visibility: DashboardVisibility;
+        tenantPermission: DashboardTenantPermission;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onChange?: ((payload: {
+        visibility: DashboardVisibility;
+        tenantPermission: DashboardTenantPermission;
+    }) => any) | undefined;
+}>, {
+    path: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,155 @@
+<script setup>
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@revenexx/studio";
+import { CheckCircle, Copy, Global, Lock, Pen } from "#solar-icons";
+import { computed, ref, watch } from "vue";
+import { dateTimeFormat } from "../../lib/formatBridge";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  dashboard: { type: [Object, null], required: true },
+  path: { type: String, required: false, default: "/" }
+});
+const emit = defineEmits(["update:open", "change"]);
+const t = useT();
+const router = useRouter();
+function modeOf(dashboard) {
+  if (!dashboard || dashboard.visibility !== "tenant") return "private";
+  return dashboard.tenantPermission === "edit" ? "tenant-edit" : "tenant-view";
+}
+const MODE_VALUES = {
+  "private": { visibility: "private", tenantPermission: "view" },
+  "tenant-view": { visibility: "tenant", tenantPermission: "view" },
+  "tenant-edit": { visibility: "tenant", tenantPermission: "edit" }
+};
+const choice = ref("private");
+watch(() => props.open, (open) => {
+  if (open) choice.value = modeOf(props.dashboard);
+});
+function formatDateTime(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : dateTimeFormat({ dateStyle: "medium", timeStyle: "short" }).format(date);
+}
+const options = computed(() => [
+  {
+    value: "private",
+    icon: Lock,
+    title: t("dashboard.share.private.title"),
+    description: t("dashboard.share.private.description")
+  },
+  {
+    value: "tenant-view",
+    icon: Global,
+    title: t("dashboard.share.mode.view.title"),
+    description: t("dashboard.share.mode.view.description")
+  },
+  {
+    value: "tenant-edit",
+    icon: Pen,
+    title: t("dashboard.share.mode.edit.title"),
+    description: t("dashboard.share.mode.edit.description")
+  }
+]);
+const link = computed(() => {
+  if (!props.dashboard || !import.meta.client) return "";
+  const href = router.resolve({ path: props.path, query: { dashboard: props.dashboard.slug } }).href;
+  return new URL(href, window.location.origin).toString();
+});
+const copied = ref(false);
+let copiedTimer = null;
+async function copyLink() {
+  try {
+    await navigator.clipboard.writeText(link.value);
+    copied.value = true;
+    if (copiedTimer) clearTimeout(copiedTimer);
+    copiedTimer = setTimeout(() => {
+      copied.value = false;
+    }, 2e3);
+  } catch {
+  }
+}
+onUnmounted(() => {
+  if (copiedTimer) clearTimeout(copiedTimer);
+});
+const meta = computed(() => {
+  const d = props.dashboard;
+  if (!d) return "";
+  const parts = [];
+  if (d.ownerName) parts.push(t("dashboard.share.meta.created", { name: d.ownerName }));
+  parts.push(d.updatedByName ? t("dashboard.share.meta.updated", { name: d.updatedByName, at: formatDateTime(d.updatedAt) }) : t("dashboard.share.meta.updated_unknown", { at: formatDateTime(d.updatedAt) }));
+  if (!parts[0].match(/^[A-ZÄÖÜ]/)) parts[0] = parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+  return parts.join(" \xB7 ");
+});
+const dirty = computed(() => choice.value !== modeOf(props.dashboard));
+function apply() {
+  if (dirty.value) emit("change", MODE_VALUES[choice.value]);
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="max-w-lg">
+      <DialogHeader>
+        <DialogTitle>{{ t("dashboard.share.title", { name: dashboard?.name ?? "" }) }}</DialogTitle>
+        <DialogDescription>{{ t("dashboard.share.description") }}</DialogDescription>
+      </DialogHeader>
+
+      <div class="space-y-2">
+        <button
+          v-for="option in options"
+          :key="option.value"
+          type="button"
+          class="flex w-full items-start gap-3 rounded-lg border p-3 text-left transition"
+          :class="choice === option.value ? 'border-primary/40 bg-primary/[0.04]' : 'border-black/[0.06] hover:border-black/15 hover:bg-black/[0.02]'"
+          @click="choice = option.value"
+        >
+          <span
+            class="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md"
+            :class="choice === option.value ? 'bg-primary/10 text-primary' : 'bg-black/[0.04] text-muted-foreground'"
+          >
+            <component :is="option.icon" :size="15" />
+          </span>
+          <span class="min-w-0 flex-1">
+            <span class="block text-sm font-medium text-[#0B0522]">{{ option.title }}</span>
+            <span class="mt-0.5 block text-xs leading-snug text-muted-foreground">{{ option.description }}</span>
+          </span>
+          <CheckCircle v-if="choice === option.value" :size="16" class="mt-0.5 shrink-0 text-primary" />
+        </button>
+      </div>
+
+      <!-- The link works for anyone who can already see the dashboard; it is a
+           convenience, not a grant. Sharing is what grants. -->
+      <div v-if="choice !== 'private'" class="flex items-center gap-2 rounded-md border border-black/[0.06] bg-black/[0.02] px-2 py-1.5">
+        <input
+          :value="link"
+          readonly
+          class="min-w-0 flex-1 truncate bg-transparent text-xs text-muted-foreground outline-none"
+          @focus="$event.target.select()"
+        >
+        <button
+          type="button"
+          class="flex shrink-0 items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-primary hover:bg-primary/10"
+          @click="copyLink"
+        >
+          <component :is="copied ? CheckCircle : Copy" :size="13" />
+          {{ copied ? t("dashboard.share.link.copied") : t("dashboard.share.link.copy") }}
+        </button>
+      </div>
+
+      <!-- Who made it and who touched it last. Names are captured at write
+           time; the cockpit has no user directory to resolve a subject id
+           against, and a lookup per row would not be worth it. -->
+      <p v-if="meta" class="border-t border-black/[0.06] pt-3 text-xs text-muted-foreground">
+        {{ meta }}
+      </p>
+
+      <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="!dirty" @click="apply">
+          {{ t("dashboard.share.action") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,28 @@
+import type { Dashboard, DashboardTenantPermission, DashboardVisibility } from '../../types/dashboard.js';
+type __VLS_Props = {
+    open: boolean;
+    dashboard: Dashboard | null;
+    /**
+     * Where this surface's dashboards live. The link is `path?dashboard=slug`,
+     * and a Commerce dashboard opened at `/` would land on the home screen and
+     * silently resolve to something else.
+     */
+    path?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    change: (payload: {
+        visibility: DashboardVisibility;
+        tenantPermission: DashboardTenantPermission;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onChange?: ((payload: {
+        visibility: DashboardVisibility;
+        tenantPermission: DashboardTenantPermission;
+    }) => any) | undefined;
+}>, {
+    path: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,64 @@
+import type { Dashboard } from '../../types/dashboard.js';
+type __VLS_Props = {
+    dashboards: Dashboard[];
+    current: Dashboard | null;
+    editing: boolean;
+    dirty: boolean;
+    saving: boolean;
+    /**
+     * The person this row greets. A prop rather than a lookup: who is signed in
+     * is the HOST's question, and a published module has no user directory.
+     */
+    userName?: string;
+    /** The line above the greeting. Defaults to today's date. */
+    eyebrow?: string;
+    /** The big line. Defaults to the greeting. */
+    heading?: string;
+};
+declare var __VLS_21: {
+    pillClass: "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";
+    paneClass: "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";
+    compact: boolean;
+};
+type __VLS_Slots = {} & {
+    scope?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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;
+}>, {
+    heading: string;
+    userName: string;
+    eyebrow: string;
+}, {}, {}, {}, 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/runtime/components/Dashboard/DashboardTopBar.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from "vue";
+import DashboardControls from "./DashboardControls.vue";
+import { dateTimeFormat } from "../../lib/formatBridge";
+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 },
+  userName: { type: String, required: false, default: "" },
+  eyebrow: { type: String, required: false, default: "" },
+  heading: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["select", "edit", "save", "discard", "addWidget", "rename", "share", "browse", "create", "duplicate", "remove", "setDefault"]);
+const t = useT();
+const greeting = computed(() => {
+  const hour = (/* @__PURE__ */ new Date()).getHours();
+  if (hour < 11) return t("dashboard.topbar.greeting.morning");
+  if (hour < 17) return t("dashboard.topbar.greeting.day");
+  return t("dashboard.topbar.greeting.evening");
+});
+const fullName = computed(() => props.userName.trim());
+const dateLabel = computed(() => props.eyebrow || dateTimeFormat({ weekday: "long", day: "numeric", month: "long" }).format(/* @__PURE__ */ new Date()));
+</script>
+
+<template>
+  <div class="relative z-30 mb-3 rounded-lg border border-gray-400/10 outline-1 outline-white/30">
+    <div class="relative flex flex-wrap items-center justify-between gap-4 rounded-lg bg-gradient-to-br from-white via-violet-50/50 to-white px-5 py-5">
+      <!-- Decoration, in its own clipped layer. Clipping the row itself would
+           cut off the dashboard menu when it opens. Hidden from assistive tech,
+           and the drift stops for anyone who asked the system for less motion. -->
+      <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-lg" aria-hidden="true">
+        <div class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/60 to-transparent motion-safe:animate-[dashboard-shimmer_9s_ease-in-out_infinite]" />
+        <div class="absolute -right-16 -top-20 size-56 rounded-full bg-gradient-to-br from-violet-300/25 to-amber-200/20 blur-3xl" />
+      </div>
+
+      <div class="relative min-w-0">
+        <div class="text-mono uppercase text-muted-foreground">
+          {{ dateLabel }}
+        </div>
+        <h1 class="mt-1 truncate text-2xl font-semibold text-[#0B0522]">
+          <template v-if="heading">{{ heading }}</template>
+          <template v-else>
+            {{ greeting }}<template v-if="fullName">, <span class="text-primary">{{ fullName }}</span></template>.
+          </template>
+        </h1>
+      </div>
+
+      <DashboardControls
+        :dashboards="dashboards"
+        :current="current"
+        :editing="editing"
+        :dirty="dirty"
+        :saving="saving"
+        @select="emit('select', $event)"
+        @edit="emit('edit')"
+        @save="emit('save')"
+        @discard="emit('discard')"
+        @add-widget="emit('addWidget')"
+        @rename="emit('rename')"
+        @share="emit('share')"
+        @browse="emit('browse')"
+        @create="emit('create')"
+        @duplicate="emit('duplicate')"
+        @remove="emit('remove')"
+        @set-default="emit('setDefault')"
+      >
+        <template #scope="slotProps">
+          <slot name="scope" v-bind="slotProps" />
+        </template>
+      </DashboardControls>
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes dashboard-shimmer{0%,60%{transform:translateX(-100%)}to{transform:translateX(200%)}}
+</style>

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

@@ -0,0 +1,64 @@
+import type { Dashboard } from '../../types/dashboard.js';
+type __VLS_Props = {
+    dashboards: Dashboard[];
+    current: Dashboard | null;
+    editing: boolean;
+    dirty: boolean;
+    saving: boolean;
+    /**
+     * The person this row greets. A prop rather than a lookup: who is signed in
+     * is the HOST's question, and a published module has no user directory.
+     */
+    userName?: string;
+    /** The line above the greeting. Defaults to today's date. */
+    eyebrow?: string;
+    /** The big line. Defaults to the greeting. */
+    heading?: string;
+};
+declare var __VLS_21: {
+    pillClass: "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";
+    paneClass: "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";
+    compact: boolean;
+};
+type __VLS_Slots = {} & {
+    scope?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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;
+}>, {
+    heading: string;
+    userName: string;
+    eyebrow: string;
+}, {}, {}, {}, 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;
+    };
+};