@aiaiai-pt/design-system 0.40.0 → 0.42.0

package/components/renderer/MetabaseEmbedWidget.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { WidgetProps } from "./types";
+
+  // `embed` widget (#517, atelier) — a Metabase analytics embed on the unified
+  // dashboard/portal `Block[]` grid. PRESENTATION-ONLY: the DS never mints or
+  // holds a Metabase URL; the HOST resolves the signed/proxy URL and passes it
+  // as `props.src` (an `/internal/metabase-embed/…` route or a signed URL), and
+  // this widget renders an `<iframe>`. Presentational kind → `resolveData`
+  // short-circuits it (no DS fetch); the widget owns its props.
+  //
+  //   props.src         — the iframe URL (host-resolved). Absent ⇒ placeholder.
+  //   props.title       — accessible iframe title / caption.
+  //   props.height      — CSS height (e.g. "400px"); defaults to 400px.
+  //   props.width       — "full" | "half" (grid-agnostic max-width hint).
+  //   props.embed_type  — "dashboard" | "question" (informational; caption).
+  let { props }: WidgetProps = $props();
+
+  const src = $derived(typeof props.src === "string" ? props.src : "");
+  const title = $derived(typeof props.title === "string" && props.title ? props.title : "Metabase embed");
+  const height = $derived(typeof props.height === "string" && props.height ? props.height : "400px");
+  const half = $derived(props.width === "half");
+</script>
+
+<figure class="mb-embed" class:half data-widget="metabase-embed">
+  {#if src}
+    <iframe {src} {title} style:height loading="lazy" referrerpolicy="strict-origin-when-cross-origin"
+    ></iframe>
+    {#if props.title}<figcaption>{props.title}</figcaption>{/if}
+  {:else}
+    <div class="mb-embed-empty" style:height>
+      <p>Metabase embed not configured — set the dashboard/question id.</p>
+    </div>
+  {/if}
+</figure>
+
+<style>
+  .mb-embed {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    inline-size: 100%;
+  }
+
+  .mb-embed.half {
+    max-inline-size: 50%;
+  }
+
+  .mb-embed iframe {
+    inline-size: 100%;
+    border: var(--elevation-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+  }
+
+  .mb-embed figcaption {
+    font-size: var(--type-caption-size);
+    color: var(--color-text-muted);
+  }
+
+  .mb-embed-empty {
+    display: grid;
+    place-items: center;
+    inline-size: 100%;
+    border: var(--border-width) dashed var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-secondary);
+  }
+
+  .mb-embed-empty p {
+    margin: 0;
+    padding: var(--space-md);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text-muted);
+  }
+</style>

package/components/renderer/MetabaseEmbedWidget.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { WidgetProps } from "./types";
+declare const MetabaseEmbedWidget: import("svelte").Component<WidgetProps, {}, "">;
+type MetabaseEmbedWidget = ReturnType<typeof MetabaseEmbedWidget>;
+export default MetabaseEmbedWidget;

package/components/renderer/StatGridWidget.svelte

@@ -14,6 +14,11 @@
     label?: string;
     value?: string;
     variant?: string;
+    /** #517 — optional Phosphor icon NAME (kebab-case, e.g. "chart-bar"),
+     * rendered via the Phosphor web font. Lets a dashboard KPI block carry its
+     * per-card icon through the DS widget, so KPI renders via `resolveWidget`
+     * like every other block (no host-side StatCard special-case). */
+    icon?: string;
   }
 
   const view = $derived((data ?? {}) as Record<string, unknown>);
@@ -24,10 +29,21 @@
         ? props.stats
         : []) as Stat[],
   );
+
+  // Phosphor web-font class names are kebab-case (`ph ph-chart-bar`); keep only
+  // the safe charset so a bad name can't leak into `class` (defensive — attribute
+  // values are escaped, but this keeps the class well-formed).
+  const iconClass = (name: string): string => `ph ph-${name.replace(/[^a-z0-9-]/gi, "")}`;
 </script>
 
 <StatGrid>
   {#each stats as stat (stat.label)}
-    <StatCard label={stat.label} value={stat.value} variant={stat.variant} />
+    {#snippet cardIcon()}<i class={iconClass(stat.icon ?? "")} aria-hidden="true"></i>{/snippet}
+    <StatCard
+      label={stat.label}
+      value={stat.value}
+      variant={stat.variant}
+      icon={stat.icon ? cardIcon : undefined}
+    />
   {/each}
 </StatGrid>

package/components/renderer/registry.ts

@@ -22,9 +22,8 @@ import {
 } from "./dispatch";
 import type { Block, OntologySchema, WidgetKind, WidgetProps } from "./types";
 
-import DonutChartWidget from "./DonutChartWidget.svelte";
 import EChartWidget from "./EChartWidget.svelte";
-import LineChartWidget from "./LineChartWidget.svelte";
+import MetabaseEmbedWidget from "./MetabaseEmbedWidget.svelte";
 import ResultsChartWidget from "./ResultsChartWidget.svelte";
 import StatGridWidget from "./StatGridWidget.svelte";
 
@@ -67,15 +66,19 @@ export function byKind(
  * appended in call order. Exported (readonly view) for introspection / testing.
  */
 const _entries: RegistryEntry<WidgetComponent>[] = [
-  // DS base: the two clean widgets shipped by this package.
+  // DS base: the clean widgets shipped by this package.
   byKind("stat-grid", "kpi", StatGridWidget),
   byTypeOnKind("results-chart", "aggregate", ResultsChartWidget),
+  // #176 follow-on — ONE ECharts widget renders any chart spec (supersedes ADR
+  // 0003 #4). The per-kind `line-chart` / `donut-chart` keys were a stopgap;
+  // in the declarative model the kind is PER-SERIES (a series carries its own
+  // bar/line/area/scatter/pie type), so EChartWidget renders every shape and
+  // the kind-specific registry keys + wrapper components are retired.
+  // `results-chart` stays as the SSR / no-JS a11y fallback key.
   byTypeOnKind("chart", "aggregate", EChartWidget),
-  // #176 Tier 1 — chart KINDS as registry entries, so the authoring `type`
-  // picker is a real chart picker. All three ECharts kinds share the same
-  // aggregate data path + a11y data table; only the rendered geometry differs.
-  byTypeOnKind("line-chart", "aggregate", LineChartWidget),
-  byTypeOnKind("donut-chart", "aggregate", DonutChartWidget),
+  // #517 (atelier) — Metabase embed on the unified Block[] grid. Presentation-
+  // only (renders `props.src`); one kind-generic entry, no `type` ranking.
+  byKind("metabase-embed", "embed", MetabaseEmbedWidget),
 ];
 
 /**

package/components/renderer/resolve-data.ts

@@ -35,6 +35,9 @@ export const PRESENTATIONAL_KINDS: ReadonlySet<WidgetKind> =
   new Set<WidgetKind>([
     "hero",
     "lookup",
+    // #517 — the Metabase embed renders from a host-resolved `props.src`; it has
+    // no DS-fetched data path, so short-circuit it like the other content kinds.
+    "embed",
     "feature-grid",
     "cta",
     "media-text",

package/components/renderer/types.d.ts

@@ -13,7 +13,7 @@
  * here the descriptors are SEEDED (same staged pattern #70/#72 used).
  */
 /** The bounded, governed widget kinds (spec §5 catalog). */
-export type WidgetKind = "list" | "detail" | "form" | "map" | "calendar" | "kpi" | "content" | "vote" | "status" | "forms" | "hero" | "lookup" | "feed" | "filters" | "actions" | "aggregate" | "subscriptions" | "consent" | "deliveries" | "owned-list" | "feature-grid" | "cta" | "media-text" | "steps" | "testimonial" | "faq" | "logo-strip" | "media-gallery";
+export type WidgetKind = "list" | "detail" | "form" | "map" | "calendar" | "kpi" | "content" | "embed" | "vote" | "status" | "forms" | "hero" | "lookup" | "feed" | "filters" | "actions" | "aggregate" | "subscriptions" | "consent" | "deliveries" | "owned-list" | "feature-grid" | "cta" | "media-text" | "steps" | "testimonial" | "faq" | "logo-strip" | "media-gallery";
 /** The feed sub-views a `feed`/`filters` binding may toggle/scope (#308). */
 export type FeedView = "list" | "map";
 /** Declarative pointer — "I render <kind> of <entity|action>, scoped by filter". */

package/components/renderer/types.ts

@@ -22,6 +22,12 @@ export type WidgetKind =
   | "calendar"
   | "kpi"
   | "content"
+  // #517 (atelier) — a Metabase analytics embed. Presentational: the DS
+  // `MetabaseEmbedWidget` renders an `<iframe>` from a HOST-resolved `props.src`
+  // (the signed/proxy URL), so the DS stays presentation-only and carries no
+  // metabase auth. Lets a dashboard/portal `Block[]` hold embeds uniformly
+  // (resolved via `resolveWidget`, not a host special-case).
+  | "embed"
   | "vote"
   | "status"
   | "forms"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",
@@ -75,6 +75,7 @@
     "@sveltejs/package": "^2.5.7",
     "date-fns": "^4.1.0",
     "echarts": "^5.6.0",
+    "jsdom": "^29.1.1",
     "ol": "^10.8.0",
     "svelte": "^5.55.3",
     "svelte-check": "^4.4.6",

package/components/renderer/DonutChartWidget.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  import EChartWidget from "./EChartWidget.svelte";
-  import type { WidgetProps } from "./types";
-
-  // `donut-chart` registry key (#176 Tier 1). Thin wrapper binding the ECharts
-  // `kind` to a ring pie — the registry maps this key here. Same aggregate data
-  // path + a11y data table as the bar/line.
-  let p: WidgetProps = $props();
-</script>
-
-<EChartWidget {...p} kind="donut" />

package/components/renderer/DonutChartWidget.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { WidgetProps } from "./types";
-declare const DonutChartWidget: import("svelte").Component<WidgetProps, {}, "">;
-type DonutChartWidget = ReturnType<typeof DonutChartWidget>;
-export default DonutChartWidget;

package/components/renderer/LineChartWidget.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import EChartWidget from "./EChartWidget.svelte";
-  import type { WidgetProps } from "./types";
-
-  // `line-chart` registry key (#176 Tier 1). Thin wrapper that binds the ECharts
-  // `kind` the dispatcher can't pass — the registry maps this key to this
-  // component, which renders the shared EChart widget as a line. Same aggregate
-  // data path + a11y data table as the bar.
-  let p: WidgetProps = $props();
-</script>
-
-<EChartWidget {...p} kind="line" />

package/components/renderer/LineChartWidget.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { WidgetProps } from "./types";
-declare const LineChartWidget: import("svelte").Component<WidgetProps, {}, "">;
-type LineChartWidget = ReturnType<typeof LineChartWidget>;
-export default LineChartWidget;