@revenexx/studio-shared 0.3.2 → 0.3.3

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

@@ -0,0 +1,153 @@
+<script setup>
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Textarea
+} from "@revenexx/studio";
+import { computed, ref, watch } from "vue";
+import { useWidgetRegistry, widgetDescription, widgetTitle } from "../../lib/widgetRegistry";
+const t = useT();
+const registry = useWidgetRegistry();
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  widget: { type: [Object, null], required: true },
+  hydrate: { type: Function, required: false }
+});
+const emit = defineEmits(["update:open", "apply"]);
+const definition = computed(() => props.widget ? registry.get(props.widget.type) : void 0);
+const heading = computed(() => widgetTitle(definition.value, t));
+const subheading = computed(() => definition.value ? widgetDescription(definition.value, t) : "");
+function fieldLabel(field) {
+  return field.label ?? (field.labelKey ? t(field.labelKey) : field.key);
+}
+function fieldHelp(field) {
+  return field.help ?? (field.helpKey ? t(field.helpKey) : "");
+}
+function optionLabel(option) {
+  return option.label ?? (option.labelKey ? t(option.labelKey) : option.value);
+}
+const title = ref("");
+const draft = ref({});
+watch(() => props.widget, (widget) => {
+  title.value = widget?.title ?? "";
+  if (!widget) {
+    draft.value = {};
+    return;
+  }
+  const config = { ...registry.defaultConfigFor(widget.type), ...widget.config ?? {} };
+  draft.value = props.hydrate ? props.hydrate(widget, config) : config;
+}, { immediate: true });
+function apply() {
+  if (!props.widget) return;
+  emit("apply", {
+    id: props.widget.id,
+    title: title.value.trim() || void 0,
+    config: { ...draft.value }
+  });
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="max-w-lg">
+      <DialogHeader>
+        <DialogTitle>{{ heading }}</DialogTitle>
+        <DialogDescription>{{ subheading }}</DialogDescription>
+      </DialogHeader>
+
+      <!-- `-mx-1 px-1 pb-1`: the scroll container clipped the focus ring off the
+           left edge and the bottom row. The padding gives the ring room; the
+           negative margin keeps the fields aligned with the dialog. -->
+      <div class="-mx-1 max-h-[60vh] space-y-4 overflow-y-auto px-1 pb-1">
+        <div class="space-y-1.5">
+          <Label for="widget-title">{{ t("dashboard.config.title.label") }}</Label>
+          <Input id="widget-title" v-model="title" class="bg-white" :placeholder="heading" />
+          <p class="text-xs text-muted-foreground">
+            {{ t("dashboard.config.title.help") }}
+          </p>
+        </div>
+
+        <div v-for="field in definition?.configFields ?? []" :key="field.key" class="space-y-1.5">
+          <Label :for="`cfg-${field.key}`">{{ fieldLabel(field) }}</Label>
+
+          <Textarea
+            v-if="field.type === 'textarea'"
+            :id="`cfg-${field.key}`"
+            v-model="draft[field.key]"
+            class="min-h-40 bg-white"
+            :placeholder="field.placeholderKey ? t(field.placeholderKey) : void 0"
+            rows="9"
+          />
+
+          <Select
+            v-else-if="field.type === 'select'"
+            v-model="draft[field.key]"
+          >
+            <SelectTrigger :id="`cfg-${field.key}`" class="bg-white">
+              <SelectValue :placeholder="field.placeholderKey ? t(field.placeholderKey) : t('dashboard.config.field.choose')" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="option in field.options ?? []" :key="option.value" :value="option.value">
+                {{ optionLabel(option) }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Switch
+            v-else-if="field.type === 'boolean'"
+            v-model="draft[field.key]"
+          />
+
+          <!-- A control this dialog does not own: the surface renders it and
+               hands the value back through one `set`, so the draft stays the
+               single copy of what the operator is editing. -->
+          <slot
+            v-else-if="field.type === 'links' || field.type === 'filters' || field.type === 'sort'"
+            name="field"
+            :field="field"
+            :widget="widget"
+            :value="draft[field.key]"
+            :set="(value) => {
+  draft = { ...draft, [field.key]: value };
+}"
+          />
+
+          <Input
+            v-else
+            :id="`cfg-${field.key}`"
+            v-model="draft[field.key]"
+            class="bg-white"
+            :type="field.type === 'number' ? 'number' : 'text'"
+            :placeholder="field.placeholderKey ? t(field.placeholderKey) : void 0"
+          />
+
+          <p v-if="fieldHelp(field)" class="text-xs text-muted-foreground">
+            {{ fieldHelp(field) }}
+          </p>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <Button variant="outline" size="sm" class="h-7 text-sm" @click="emit('update:open', false)">
+          {{ t("dashboard.config.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-7 text-sm" @click="apply">
+          {{ t("dashboard.config.action.apply") }}
+        </Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,42 @@
+import type { DashboardWidget } from '../../types/dashboard.js';
+type __VLS_Props = {
+    open: boolean;
+    widget: DashboardWidget | null;
+    /**
+     * Config the surface wants materialised before the form opens — the cockpit
+     * resolves its quick-link defaults into rows here, so the editor starts from
+     * what is on screen rather than from an empty list the widget is not showing.
+     */
+    hydrate?: (widget: DashboardWidget, config: Record<string, unknown>) => Record<string, unknown>;
+};
+declare var __VLS_66: {
+    field: any;
+    widget: any;
+    value: any;
+    set: (value: unknown) => void;
+};
+type __VLS_Slots = {} & {
+    field?: (props: typeof __VLS_66) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    apply: (payload: {
+        id: string;
+        title?: string;
+        config: Record<string, unknown>;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onApply?: ((payload: {
+        id: string;
+        title?: string;
+        config: Record<string, unknown>;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, 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/DashboardWidgetFrame.d.vue.ts

@@ -0,0 +1,27 @@
+import type { WidgetDefinition } from '../../lib/widgetRegistry.js';
+type __VLS_Props = {
+    definition?: WidgetDefinition;
+    title?: string;
+    editing?: boolean;
+    configurable?: boolean;
+};
+declare var __VLS_1: {}, __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+    configure: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onConfigure?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/DashboardWidgetFrame.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { CloseCircle, MenuDots, Settings } from "#solar-icons";
+import { computed } from "vue";
+import WidgetIcon from "./DashboardWidgetIcon.vue";
+import { widgetTitle } from "../../lib/widgetRegistry";
+const props = defineProps({
+  definition: { type: Object, required: false },
+  title: { type: String, required: false },
+  editing: { type: Boolean, required: false },
+  configurable: { type: Boolean, required: false }
+});
+defineEmits(["configure", "remove"]);
+const t = useT();
+const heading = computed(() => widgetTitle(props.definition, t, props.title));
+const bare = computed(() => props.definition?.bare === true);
+</script>
+
+<template>
+  <div class="relative h-full min-h-0" :class="editing ? 'select-none' : ''">
+    <!-- Bare widgets keep the card surface they already had; the frame stays
+         out of the way so the migration is a move, not a redesign. -->
+    <template v-if="bare">
+      <div class="h-full min-h-0 overflow-hidden">
+        <slot />
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="flex h-full min-h-0 flex-col rounded-lg border border-gray-400/10 outline-1 outline-white/30">
+        <div class="flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-white">
+          <div class="flex shrink-0 items-center justify-between gap-2 border-b border-black/[0.06] px-4 py-3">
+            <div class="flex min-w-0 items-center gap-2">
+              <WidgetIcon :name="definition?.icon" :size="14" class="shrink-0 text-muted-foreground" />
+              <h3 class="truncate text-sm font-semibold text-[#0B0522]">
+                {{ heading }}
+              </h3>
+            </div>
+          </div>
+          <div class="min-h-0 flex-1 overflow-auto">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="editing">
+      <!-- The whole card is the drag target, so a widget is grabbed wherever it
+           feels natural; the handle is the visual cue that this is possible. -->
+      <div class="widget-drag-handle absolute inset-0 z-10 cursor-move rounded-lg ring-2 ring-primary/20 ring-offset-0" />
+      <!-- The chips sit in the grid gutter rather than on the card. On the card
+           they covered the first line of every widget's own header, which is
+           exactly the line that says which widget it is. -->
+      <div class="absolute -top-2.5 left-2 z-20 flex items-center gap-1 rounded-md bg-white px-1.5 py-0.5 shadow-sm ring-1 ring-black/[0.08]">
+        <MenuDots :size="14" class="text-muted-foreground" />
+        <span class="max-w-[12rem] truncate text-[11px] font-medium text-muted-foreground">{{ heading }}</span>
+      </div>
+      <div class="absolute -top-2.5 right-2 z-20 flex items-center gap-1">
+        <button
+          v-if="configurable"
+          type="button"
+          class="rounded-md bg-white p-1 text-muted-foreground shadow-sm ring-1 ring-black/[0.08] hover:text-foreground"
+          title="Configure"
+          @pointerdown.stop
+          @click.stop="$emit('configure')"
+        >
+          <Settings :size="14" />
+        </button>
+        <button
+          type="button"
+          class="rounded-md bg-white p-1 text-muted-foreground shadow-sm ring-1 ring-black/[0.08] hover:text-red-600"
+          title="Remove"
+          @pointerdown.stop
+          @click.stop="$emit('remove')"
+        >
+          <CloseCircle :size="14" />
+        </button>
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+import type { WidgetDefinition } from '../../lib/widgetRegistry.js';
+type __VLS_Props = {
+    definition?: WidgetDefinition;
+    title?: string;
+    editing?: boolean;
+    configurable?: boolean;
+};
+declare var __VLS_1: {}, __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+    configure: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onConfigure?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/DashboardWidgetHost.d.vue.ts

@@ -0,0 +1,6 @@
+import type { DashboardWidget } from '../../types/dashboard.js';
+type __VLS_Props = {
+    widget: DashboardWidget;
+};
+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/Dashboard/DashboardWidgetHost.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from "vue";
+import { useWidgetRegistry } from "../../lib/widgetRegistry";
+const props = defineProps({
+  widget: { type: Object, required: true }
+});
+const t = useT();
+const registry = useWidgetRegistry();
+const definition = computed(() => registry.get(props.widget.type));
+const resolved = computed(() => registry.componentFor(props.widget.type));
+const config = computed(() => ({
+  ...registry.defaultConfigFor(props.widget.type),
+  ...props.widget.config ?? {}
+}));
+</script>
+
+<template>
+  <component :is="resolved" v-if="resolved" :config="config" class="h-full" />
+  <div
+    v-else-if="!definition"
+    class="flex h-full flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-black/10 px-4 text-center"
+  >
+    <p class="text-sm font-medium text-[#0B0522]">
+      {{ t("dashboard.widget.unknown.title") }}
+    </p>
+    <p class="text-xs text-muted-foreground">
+      {{ t("dashboard.widget.unknown.description", { type: widget.type }) }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+import type { DashboardWidget } from '../../types/dashboard.js';
+type __VLS_Props = {
+    widget: DashboardWidget;
+};
+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/Dashboard/DashboardWidgetIcon.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+    size?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+<script setup>
+import { computed } from "vue";
+import { dashboardIcon } from "../../lib/dashboardIcons";
+const props = defineProps({
+  name: { type: String, required: false },
+  size: { type: Number, required: false, default: 16 }
+});
+const resolved = computed(() => dashboardIcon(props.name));
+</script>
+
+<template>
+  <component :is="resolved" :size="size" />
+</template>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+    size?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { WidgetDefinition } from '../../lib/widgetRegistry.js';
+type __VLS_Props = {
+    open: boolean;
+    /** Types already on the dashboard, so the card can say so. */
+    placedTypes?: string[];
+    /**
+     * The tenant's installed apps. A prop rather than a lookup: which apps a
+     * tenant has is the SURFACE's question — the home screen asks the commerce
+     * metrics store, the Commerce Studio already holds the manifests — and the
+     * library only needs the answer.
+     */
+    installedApps?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    add: (definition: WidgetDefinition) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onAdd?: ((definition: WidgetDefinition) => any) | undefined;
+}>, {
+    installedApps: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,140 @@
+<script setup>
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input } from "@revenexx/studio";
+import { AddSquare, Magnifier } from "#solar-icons";
+import { computed, ref, watch } from "vue";
+import WidgetIcon from "./DashboardWidgetIcon.vue";
+import WidgetPreview from "./DashboardWidgetPreview.vue";
+import { missingAppsFor, useWidgetRegistry, widgetDescription, widgetTitle } from "../../lib/widgetRegistry";
+const t = useT();
+const registry = useWidgetRegistry();
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  placedTypes: { type: Array, required: false },
+  installedApps: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["update:open", "add"]);
+const query = ref("");
+const installed = computed(() => new Set(props.installedApps));
+watch(() => props.open, (open) => {
+  if (open) query.value = "";
+});
+const KNOWN_APPS = ["orders", "customers", "products", "carts", "channels", "payments", "markets"];
+const appLabel = (name) => KNOWN_APPS.includes(name) ? t(`dashboard.app.${name}`) : name;
+const groups = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  return registry.byCategory().map((group) => ({
+    ...group,
+    // Search runs over the translated text, so a German operator finds
+    // "Umsatz" and an English one finds "revenue" — matching the key would
+    // find neither.
+    widgets: group.widgets.filter((widget) => !term || title(widget).toLowerCase().includes(term) || description(widget).toLowerCase().includes(term) || t(group.labelKey).toLowerCase().includes(term))
+  })).filter((group) => group.widgets.length > 0);
+});
+const total = computed(() => groups.value.reduce((sum, g) => sum + g.widgets.length, 0));
+function title(widget) {
+  return widgetTitle(widget, t);
+}
+function description(widget) {
+  return widgetDescription(widget, t);
+}
+function missing(widget) {
+  return missingAppsFor(widget, installed.value);
+}
+function placed(widget) {
+  return !!props.placedTypes?.includes(widget.type);
+}
+function unavailable(widget) {
+  return !!widget.comingSoon || missing(widget).length > 0;
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="!max-w-[min(96vw,72rem)] w-[min(96vw,72rem)]">
+      <DialogHeader>
+        <DialogTitle>{{ t("dashboard.library.title") }}</DialogTitle>
+        <DialogDescription>{{ t("dashboard.library.description") }}</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.library.search_placeholder')" class="bg-white pl-8" />
+      </div>
+
+      <div class="max-h-[58vh] -mx-1 space-y-6 overflow-y-auto px-1 pb-1">
+        <p v-if="!total" class="py-10 text-center text-sm text-muted-foreground">
+          {{ t("dashboard.library.no_matches", { query }) }}
+        </p>
+
+        <section v-for="group in groups" :key="group.category">
+          <h4 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {{ t(group.labelKey) }}
+          </h4>
+          <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            <div
+              v-for="widget in group.widgets"
+              :key="widget.type"
+              class="group flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white transition"
+              :class="unavailable(widget) ? 'opacity-80' : 'hover:border-black/15 hover:shadow-sm'"
+            >
+              <div class="relative p-2">
+                <WidgetPreview :shape="widget.preview" :dimmed="unavailable(widget)" />
+                <span
+                  v-if="widget.comingSoon"
+                  class="absolute right-3 top-3 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary"
+                >{{ t("dashboard.library.coming_soon") }}</span>
+                <span
+                  v-else-if="placed(widget)"
+                  class="absolute right-3 top-3 rounded bg-white/90 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground ring-1 ring-black/[0.06]"
+                >{{ t("dashboard.library.placed") }}</span>
+              </div>
+
+              <div class="flex flex-1 flex-col px-3 pb-3">
+                <div class="flex items-start gap-2">
+                  <span class="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded bg-black/[0.04] text-muted-foreground">
+                    <WidgetIcon :name="widget.icon" :size="13" />
+                  </span>
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm font-medium text-[#0B0522]">
+                      {{ title(widget) }}
+                    </p>
+                    <p class="mt-0.5 line-clamp-2 text-xs leading-snug text-muted-foreground">
+                      {{ description(widget) }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="mt-3 flex items-center justify-between gap-2">
+                  <span v-if="widget.comingSoon" class="truncate text-[11px] text-muted-foreground">
+                    {{ t("dashboard.library.coming_soon_hint") }}
+                  </span>
+                  <span v-else-if="missing(widget).length" class="truncate text-[11px] text-amber-700">
+                    {{ t("dashboard.library.needs_apps", { apps: missing(widget).map(appLabel).join(" + ") }) }}
+                  </span>
+                  <span v-else class="text-[11px] text-muted-foreground">
+                    {{ widget.defaultSize.w }}&times;{{ widget.defaultSize.h }}
+                  </span>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    class="h-7 shrink-0 text-sm"
+                    :disabled="unavailable(widget)"
+                    @click="emit('add', widget)"
+                  >
+                    <AddSquare :size="13" class="mr-1" /> {{ t("dashboard.library.action.add") }}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div class="flex justify-end">
+        <Button variant="outline" size="sm" class="h-7 text-sm" @click="emit('update:open', false)">
+          {{ t("dashboard.library.action.done") }}
+        </Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,23 @@
+import type { WidgetDefinition } from '../../lib/widgetRegistry.js';
+type __VLS_Props = {
+    open: boolean;
+    /** Types already on the dashboard, so the card can say so. */
+    placedTypes?: string[];
+    /**
+     * The tenant's installed apps. A prop rather than a lookup: which apps a
+     * tenant has is the SURFACE's question — the home screen asks the commerce
+     * metrics store, the Commerce Studio already holds the manifests — and the
+     * library only needs the answer.
+     */
+    installedApps?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    add: (definition: WidgetDefinition) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onAdd?: ((definition: WidgetDefinition) => any) | undefined;
+}>, {
+    installedApps: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,22 @@
+/**
+ * The picture on a widget's library card (PE-480).
+ *
+ * A schematic, not a screenshot and not the live widget. The Integration
+ * Studio's template gallery draws its preview from the workflow definition for
+ * the same reason: a maintained screenshot goes stale the first time the widget
+ * changes and nobody notices. Rendering the real widget instead would be
+ * accurate but would fire every widget's queries the moment the library opens.
+ *
+ * So each widget declares a `preview` shape, and this draws it — pure layout,
+ * no data, no requests. It says what the widget *looks* like, which is what a
+ * person picking from a list actually needs.
+ */
+import type { WidgetPreviewShape } from '../../lib/widgetRegistry.js';
+type __VLS_Props = {
+    shape: WidgetPreviewShape;
+    dimmed?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    dimmed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;