@asteby/metacore-runtime-react 18.16.1 → 18.17.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @asteby/metacore-runtime-react
 
+## 18.17.0
+
+### Minor Changes
+
+- a6f5b98: Add the modular dashboard surface: `DashboardGrid` plus built-in widget
+  renderers (stat, bar, line, area, pie, donut, list, progress) and a federated
+  `kind:"custom"` path that renders through the `dashboard.widgets` slot inside the
+  same card chrome.
+
+  `DashboardGrid` renders the union of declarative + federated widgets in a
+  responsive 4-column grid, honouring per-widget `size`, grouping/ordering, batch
+  data loading with per-widget skeletons, isolated per-widget errors, a pro global
+  empty state, and permission gating via `useCan` (no provider / `isAdmin` ⇒
+  everything visible). Charts use recharts with theme CSS-var colors (dark-mode
+  safe); numbers reuse the org currency + locale formatting.
+
+  New exports: `DashboardGrid`, `normalizeGroups`, the widget renderers, the
+  `WidgetRenderer`/`WidgetSkeleton`/`WidgetCard`/`DeltaChip` primitives, the
+  `formatWidgetValue`/`accentClasses` helpers, and the types `WidgetKind`,
+  `WidgetSize`, `WidgetFormat`, `WidgetAccent`, `DashboardWidgetSpec`,
+  `DashboardWidgetQuery`, `WidgetData`, `WidgetSeriesPoint`,
+  `DashboardWidgetGroup`, `DashboardGridProps`, `DashboardGridStrings`,
+  `LoadWidgetData`. Adds `recharts` as a dependency.
+
 ## 18.16.1
 
 ### Patch Changes

package/dist/dashboard-grid.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { DashboardGridProps, DashboardWidgetGroup, DashboardWidgetSpec } from './dashboard-types';
+/** Normalizes flat `widgets` + `groups` into an ordered group list. */
+export declare function normalizeGroups(groups?: DashboardWidgetGroup[], widgets?: DashboardWidgetSpec[]): DashboardWidgetGroup[];
+export declare function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, currency, className, strings, }: DashboardGridProps): React.JSX.Element;
+//# sourceMappingURL=dashboard-grid.d.ts.map

package/dist/dashboard-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAW1B,uEAAuE;AACvE,wBAAgB,eAAe,CAC3B,MAAM,CAAC,EAAE,oBAAoB,EAAE,EAC/B,OAAO,CAAC,EAAE,mBAAmB,EAAE,GAChC,oBAAoB,EAAE,CAgBxB;AASD,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,GACV,EAAE,kBAAkB,qBA4IpB"}

package/dist/dashboard-grid.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DashboardGrid — the modular dashboard surface. Renders the union of
+// declarative + federated widgets in a responsive 4-column grid, grouped with
+// headings, honouring per-widget size, permission gating (useCan), batch data
+// loading with per-widget skeletons, isolated per-widget errors, and a pro
+// global empty state. See CONTRACT-dashboard-widgets.md §4.
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '@asteby/metacore-ui/lib';
+import { useCan, usePermissionsActive } from './permissions-context';
+import { DynamicIcon } from './dynamic-icon';
+import { WidgetRenderer, WidgetSkeleton, SIZE_CLASS } from './widgets/widget-renderer';
+const DEFAULT_STRINGS = {
+    emptyTitle: 'Your dashboard is empty',
+    emptyDescription: 'Install an addon with dashboard widgets to start seeing metrics here.',
+    widgetError: 'Could not load this widget.',
+    widgetEmpty: 'No data yet.',
+};
+/** Normalizes flat `widgets` + `groups` into an ordered group list. */
+export function normalizeGroups(groups, widgets) {
+    if (groups && groups.length > 0)
+        return groups;
+    if (!widgets || widgets.length === 0)
+        return [];
+    // Group flat widgets by `group` (preserve first-seen order), sort each
+    // group by `order` (default 100), keep insertion order across groups.
+    const map = new Map();
+    for (const w of widgets) {
+        const key = w.group ?? '';
+        const arr = map.get(key) ?? [];
+        arr.push(w);
+        map.set(key, arr);
+    }
+    return Array.from(map.entries()).map(([title, ws]) => ({
+        title,
+        widgets: [...ws].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)),
+    }));
+}
+/** Collects every widget key across groups (for the batch loader). */
+function allKeys(groups) {
+    const keys = [];
+    for (const g of groups)
+        for (const w of g.widgets)
+            keys.push(w.key);
+    return keys;
+}
+export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, currency, className, strings, }) {
+    const { t } = useTranslation();
+    const can = useCan();
+    const permissionsActive = usePermissionsActive();
+    const s = { ...DEFAULT_STRINGS, ...strings };
+    // i18n helper: translate a key, falling back to the raw key when missing
+    // (specs ship raw i18n keys; the host bundle may or may not have them).
+    const tr = React.useCallback((key, fallback) => {
+        if (!key)
+            return fallback ?? '';
+        const out = t(key);
+        return out === key ? fallback ?? key : out;
+    }, [t]);
+    // Permission gating: admin bypass; without a PermissionsProvider everything
+    // is visible (retrocompat). With one, honour each widget's `permission`.
+    const visibleGroups = React.useMemo(() => {
+        const norm = normalizeGroups(groups, widgets);
+        const gate = (w) => {
+            if (isAdmin)
+                return true;
+            if (!permissionsActive)
+                return true;
+            if (!w.permission)
+                return true;
+            return can(w.permission);
+        };
+        return norm
+            .map((g) => ({ ...g, widgets: g.widgets.filter(gate) }))
+            .filter((g) => g.widgets.length > 0);
+    }, [groups, widgets, isAdmin, permissionsActive, can]);
+    const keys = React.useMemo(() => allKeys(visibleGroups), [visibleGroups]);
+    const keySig = keys.join(',');
+    const [data, setData] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    React.useEffect(() => {
+        let cancelled = false;
+        if (keys.length === 0) {
+            setLoading(false);
+            setData({});
+            return;
+        }
+        setLoading(true);
+        loadData(keys)
+            .then((res) => {
+            if (!cancelled) {
+                setData(res ?? {});
+                setLoading(false);
+            }
+        })
+            .catch(() => {
+            // Batch failure: still render the grid; every widget falls to
+            // its empty/error state rather than blanking the page.
+            if (!cancelled) {
+                setData({});
+                setLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [keySig, loadData]);
+    // Global empty state (no widgets at all / none visible after gating).
+    if (visibleGroups.length === 0) {
+        return (_jsxs("div", { "data-testid": "dashboard-empty", className: cn('flex min-h-[40vh] flex-col items-center justify-center rounded-xl border border-dashed border-border/60 p-10 text-center', className), children: [_jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground", children: _jsx(DynamicIcon, { name: "LayoutDashboard", className: "size-7" }) }), _jsx("h3", { className: "text-base font-semibold text-foreground", children: tr(undefined, s.emptyTitle) || s.emptyTitle }), _jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: s.emptyDescription })] }));
+    }
+    return (_jsx("div", { "data-testid": "dashboard-grid", className: cn('flex flex-col gap-8', className), children: visibleGroups.map((group) => (_jsxs("section", { className: "flex flex-col gap-3", children: [group.title && (_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: tr(group.title, group.title) })), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: group.widgets.map((spec) => {
+                        const size = spec.size ?? 'sm';
+                        return (_jsx("div", { className: SIZE_CLASS[size], children: loading ? (_jsx(WidgetSkeleton, { spec: {
+                                    ...spec,
+                                    title: tr(spec.title, spec.title),
+                                    subtitle: tr(spec.subtitle, spec.subtitle),
+                                } })) : (_jsx(WidgetRenderer, { spec: {
+                                    ...spec,
+                                    title: tr(spec.title, spec.title),
+                                    subtitle: tr(spec.subtitle, spec.subtitle),
+                                }, data: data?.[spec.key], locale: locale, currency: currency, emptyText: spec.empty
+                                    ? tr(spec.empty, spec.empty)
+                                    : s.widgetEmpty, errorText: s.widgetError })) }, spec.key));
+                    }) })] }, group.title || '__default'))) }));
+}

package/dist/dashboard-types.d.ts

@@ -0,0 +1,130 @@
+/** Widget renderer kinds. `custom` defers to a federated slot component. */
+export type WidgetKind = 'stat' | 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'list' | 'progress' | 'custom';
+/** Grid footprint in a 4-column grid: sm=1, md=2, lg=3, full=4. */
+export type WidgetSize = 'sm' | 'md' | 'lg' | 'full';
+/** Value format applied to the scalar value and to series values. */
+export type WidgetFormat = 'number' | 'currency' | 'percent' | 'compact';
+/** Accent color token (theme CSS vars). */
+export type WidgetAccent = 'emerald' | 'sky' | 'violet' | 'amber' | 'rose' | 'slate';
+/** Aggregation kinds for declarative queries. */
+export type WidgetAggregate = 'count' | 'sum' | 'avg' | 'min' | 'max';
+/** Where-clause operators (mirror the list builder). */
+export interface WidgetWhereOp {
+    eq?: unknown;
+    neq?: unknown;
+    gt?: unknown;
+    gte?: unknown;
+    lt?: unknown;
+    lte?: unknown;
+    contains?: unknown;
+}
+/**
+ * Declarative aggregation query (kinds other than `custom`). The host resolves
+ * the logical table from `model` and computes the aggregate org-scoped.
+ */
+export interface DashboardWidgetQuery {
+    model: string;
+    aggregate: WidgetAggregate;
+    field?: string;
+    where?: Record<string, unknown | WidgetWhereOp>;
+    group_by?: string;
+    label_field?: string;
+    date_field?: string;
+    interval?: 'day' | 'week' | 'month';
+    range?: 'this_day' | 'last_7_days' | 'last_30_days' | 'last_12_months' | 'this_month' | 'this_year' | 'all';
+    order?: 'asc' | 'desc';
+    limit?: number;
+}
+/** Optional delta comparison against the previous window → `+14.2%` chip. */
+export interface DashboardWidgetCompare {
+    to: 'previous_period';
+}
+/**
+ * A single dashboard widget spec (v3 contract §1). The host ships these as raw
+ * i18n keys (`title`, `subtitle`, `group`, `empty`); the grid translates them.
+ */
+export interface DashboardWidgetSpec {
+    /** Unique within the addon. Capability = `<addon>.dashboard.<key>`. */
+    key: string;
+    /** i18n key for the title. */
+    title: string;
+    /** i18n key for the subtitle. */
+    subtitle?: string;
+    /** lucide icon slug. */
+    icon?: string;
+    kind: WidgetKind;
+    size?: WidgetSize;
+    /** i18n key for the group heading. */
+    group?: string;
+    /** Order within the group. */
+    order?: number;
+    accent?: WidgetAccent;
+    format?: WidgetFormat;
+    /** Capability gating the widget (useCan). */
+    permission?: string;
+    /** i18n key for the per-widget empty state. */
+    empty?: string;
+    query?: DashboardWidgetQuery;
+    compare?: DashboardWidgetCompare;
+    slot?: string;
+    expose?: string;
+}
+/** A bucket of an aggregated series. */
+export interface WidgetSeriesPoint {
+    key: string;
+    label: string;
+    value: number;
+}
+/**
+ * The computed data for one widget (CONTRACT §3). `value` for scalars,
+ * `series` for bucketed/temporal aggregates, `delta` for the compare chip
+ * (fraction, e.g. `0.142` → `+14.2%`).
+ */
+export interface WidgetData {
+    value?: number;
+    delta?: number;
+    series?: WidgetSeriesPoint[];
+}
+/** A titled group of widgets (CONTRACT §3 — backend grouping/order). */
+export interface DashboardWidgetGroup {
+    /** i18n key for the group heading. */
+    title: string;
+    widgets: DashboardWidgetSpec[];
+}
+/**
+ * Loads the data for a batch of widget keys. The host runs the aggregation and
+ * returns a `{ [key]: WidgetData }` map. Keys missing from the result render
+ * their empty state.
+ */
+export type LoadWidgetData = (keys: string[]) => Promise<Record<string, WidgetData>>;
+/** Props for <DashboardGrid>. */
+export interface DashboardGridProps {
+    /** Pre-grouped widgets (backend grouping/order). */
+    groups?: DashboardWidgetGroup[];
+    /** Flat widget list — grouped client-side by `group`/`order`. */
+    widgets?: DashboardWidgetSpec[];
+    /** Batch loader for widget data (org-scoped, host-side aggregation). */
+    loadData: LoadWidgetData;
+    /** When true, bypass permission gating (admin/owner sees everything). */
+    isAdmin?: boolean;
+    /** BCP-47 locale for number/currency/date formatting. */
+    locale?: string;
+    /** ISO-4217 currency for `format: 'currency'` widgets. */
+    currency?: string;
+    /** Extra class on the grid root. */
+    className?: string;
+    /** Optional override for empty/loading/error copy. */
+    strings?: Partial<DashboardGridStrings>;
+}
+/** Translatable copy used by the grid chrome. Defaults are English. */
+export interface DashboardGridStrings {
+    /** Global empty state title (no widgets at all). */
+    emptyTitle: string;
+    /** Global empty state description. */
+    emptyDescription: string;
+    /** Per-widget error message. */
+    widgetError: string;
+    /** Per-widget empty (no data) fallback when the spec has no `empty` key. */
+    widgetEmpty: string;
+}
+//# sourceMappingURL=dashboard-types.d.ts.map

package/dist/dashboard-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-types.d.ts","sourceRoot":"","sources":["../src/dashboard-types.ts"],"names":[],"mappings":"AAOA,4EAA4E;AAC5E,MAAM,MAAM,UAAU,GAChB,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,OAAO,GACP,MAAM,GACN,UAAU,GACV,QAAQ,CAAA;AAEd,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAEpD,qEAAqE;AACrE,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAA;AAExE,2CAA2C;AAC3C,MAAM,MAAM,YAAY,GAClB,SAAS,GACT,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,CAAA;AAEb,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;AAErE,wDAAwD;AACxD,MAAM,WAAW,aAAa;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,eAAe,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,aAAa,CAAC,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;IACnC,KAAK,CAAC,EACA,UAAU,GACV,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,YAAY,GACZ,WAAW,GACX,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,6EAA6E;AAC7E,MAAM,WAAW,sBAAsB;IACnC,EAAE,EAAE,iBAAiB,CAAA;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAChC,uEAAuE;IACvE,GAAG,EAAE,MAAM,CAAA;IACX,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,CAAA;IAChB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IAGd,KAAK,CAAC,EAAE,oBAAoB,CAAA;IAC5B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAGhC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,iBAAiB;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAA;CAC/B;AAED,wEAAwE;AACxE,MAAM,WAAW,oBAAoB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,mBAAmB,EAAE,CAAA;CACjC;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,CACzB,IAAI,EAAE,MAAM,EAAE,KACb,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;AAExC,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IAC/B,oDAAoD;IACpD,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAA;IAC/B,iEAAiE;IACjE,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,EAAE,cAAc,CAAA;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAA;CAC1C;AAED,uEAAuE;AACvE,MAAM,WAAW,oBAAoB;IACjC,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAA;IAClB,sCAAsC;IACtC,gBAAgB,EAAE,MAAM,CAAA;IACxB,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,4EAA4E;IAC5E,WAAW,EAAE,MAAM,CAAA;CACtB"}

package/dist/dashboard-types.js

@@ -0,0 +1,7 @@
+// Dashboard widget types — the SDK-facing surface of the modular dashboard
+// contract (CONTRACT-dashboard-widgets.md §1, §3, §4). The host (ops/kernel)
+// computes the data and ships the specs as raw i18n keys; the SDK renders.
+//
+// These mirror the v3 `contributions.dashboard[]` shape so a host can forward
+// the backend response straight into <DashboardGrid> without remapping.
+export {};

package/dist/index.d.ts

@@ -42,4 +42,10 @@ export { ActivityValueRenderer, type ActivityValueRendererProps, } from './activ
 export { ActivityDiff, type ActivityEvent, type ActivityDiffProps, } from './activity-diff';
 export { RecordHistory, type RecordHistoryProps, } from './record-history';
 export { ActivityTimeline, type ActivityTimelineProps, } from './activity-timeline';
+export { DashboardGrid, normalizeGroups, } from './dashboard-grid';
+export type { WidgetKind, WidgetSize, WidgetFormat, WidgetAccent, WidgetAggregate, WidgetWhereOp, DashboardWidgetQuery, DashboardWidgetCompare, DashboardWidgetSpec, WidgetSeriesPoint, WidgetData, DashboardWidgetGroup, LoadWidgetData, DashboardGridProps, DashboardGridStrings, } from './dashboard-types';
+export { StatWidget, BarWidget, LineWidget, AreaWidget, PieWidget, DonutWidget, ListWidget, ProgressWidget, type WidgetRenderProps, } from './widgets/renderers';
+export { WidgetRenderer, WidgetSkeleton, SIZE_SPAN, SIZE_CLASS, type WidgetRendererProps, } from './widgets/widget-renderer';
+export { WidgetCard, DeltaChip, WidgetEmpty, WidgetError, type WidgetCardProps, } from './widgets/widget-card';
+export { formatWidgetValue, formatAxisTick, formatDelta, accentClasses, paletteColor, CHART_PALETTE, type AccentClasses, type WidgetFormatCtx, } from './widgets/widget-format';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -44,3 +44,8 @@ export { ActivityValueRenderer, } from './activity-value-renderer';
 export { ActivityDiff, } from './activity-diff';
 export { RecordHistory, } from './record-history';
 export { ActivityTimeline, } from './activity-timeline';
+export { DashboardGrid, normalizeGroups, } from './dashboard-grid';
+export { StatWidget, BarWidget, LineWidget, AreaWidget, PieWidget, DonutWidget, ListWidget, ProgressWidget, } from './widgets/renderers';
+export { WidgetRenderer, WidgetSkeleton, SIZE_SPAN, SIZE_CLASS, } from './widgets/widget-renderer';
+export { WidgetCard, DeltaChip, WidgetEmpty, WidgetError, } from './widgets/widget-card';
+export { formatWidgetValue, formatAxisTick, formatDelta, accentClasses, paletteColor, CHART_PALETTE, } from './widgets/widget-format';

package/dist/widgets/renderers.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { DashboardWidgetSpec, WidgetData } from '../dashboard-types';
+export interface WidgetRenderProps {
+    spec: DashboardWidgetSpec;
+    data?: WidgetData;
+    locale?: string;
+    currency?: string;
+    /** i18n: per-widget empty fallback (already translated). */
+    emptyText: string;
+}
+export declare function StatWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function BarWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function LineWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function AreaWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function PieWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function DonutWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function ListWidget(p: WidgetRenderProps): React.JSX.Element;
+export declare function ProgressWidget(p: WidgetRenderProps): React.JSX.Element;
+//# sourceMappingURL=renderers.d.ts.map

package/dist/widgets/renderers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../src/widgets/renderers.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAazE,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,mBAAmB,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;CACpB;AAiCD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBA2B9C;AAGD,wBAAgB,SAAS,CAAC,CAAC,EAAE,iBAAiB,qBAsC7C;AAgDD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAE9C;AACD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAE9C;AAqDD,wBAAgB,SAAS,CAAC,CAAC,EAAE,iBAAiB,qBAE7C;AACD,wBAAgB,WAAW,CAAC,CAAC,EAAE,iBAAiB,qBAE/C;AAGD,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,qBAqC9C;AAKD,wBAAgB,cAAc,CAAC,CAAC,EAAE,iBAAiB,qBAkClD"}

package/dist/widgets/renderers.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { cn } from '@asteby/metacore-ui/lib';
+import { WidgetCard, DeltaChip, WidgetEmpty } from './widget-card';
+import { accentClasses, paletteColor, formatWidgetValue, formatAxisTick, formatDelta, CHART_GRID, CHART_MUTED, } from './widget-format';
+const fmtCtx = (spec, locale, currency) => ({ format: spec.format, locale, currency });
+const hasSeries = (d) => Array.isArray(d?.series) && d.series.length > 0;
+const CHART_HEIGHT = 132;
+// Compact recharts tooltip styled with theme tokens.
+function ChartTooltip({ ctx }) {
+    return (_jsx(Tooltip, { cursor: { fill: 'var(--muted, rgba(148,163,184,0.12))', opacity: 0.4 }, contentStyle: {
+            background: 'var(--popover, #fff)',
+            border: '1px solid var(--border, #e2e8f0)',
+            borderRadius: 8,
+            fontSize: 12,
+            color: 'var(--popover-foreground, #0f172a)',
+            boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
+        }, labelStyle: { color: 'var(--muted-foreground, #64748b)', marginBottom: 2 }, formatter: (v) => formatWidgetValue(Number(v), ctx) }));
+}
+// --- stat -----------------------------------------------------------------
+export function StatWidget(p) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency);
+    const value = p.data?.value;
+    const delta = p.data?.delta;
+    const hasValue = typeof value === 'number' && !Number.isNaN(value);
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, headerExtra: typeof delta === 'number' ? (_jsx(DeltaChip, { delta: delta, text: formatDelta(delta, p.locale) })) : undefined, children: hasValue ? (_jsx("div", { className: "text-3xl font-semibold tabular-nums tracking-tight text-foreground", children: formatWidgetValue(value, ctx) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+}
+// --- bar ------------------------------------------------------------------
+export function BarWidget(p) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency);
+    const a = accentClasses(p.spec.accent);
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsx(ResponsiveContainer, { width: "100%", height: CHART_HEIGHT, children: _jsxs(BarChart, { data: p.data.series, margin: { top: 4, right: 4, left: -16, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Bar, { dataKey: "value", fill: a.chartVar, radius: [4, 4, 0, 0], maxBarSize: 40 })] }) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+}
+// --- line / area (shared) -------------------------------------------------
+function TimeSeriesWidget(p) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency);
+    const a = accentClasses(p.spec.accent);
+    const gradId = `wg-grad-${p.spec.key}`;
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsx(ResponsiveContainer, { width: "100%", height: CHART_HEIGHT, children: p.variant === 'area' ? (_jsxs(AreaChart, { data: p.data.series, margin: { top: 4, right: 6, left: -16, bottom: 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: a.chartVar, stopOpacity: 0.35 }), _jsx("stop", { offset: "100%", stopColor: a.chartVar, stopOpacity: 0.02 })] }) }), _jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: a.chartVar, strokeWidth: 2, fill: `url(#${gradId})` })] })) : (_jsxs(LineChart, { data: p.data.series, margin: { top: 4, right: 6, left: -16, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: CHART_GRID, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "label", tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, interval: "preserveStartEnd" }), _jsx(YAxis, { tick: { fontSize: 10, fill: CHART_MUTED }, tickLine: false, axisLine: false, width: 44, tickFormatter: (v) => formatAxisTick(v, ctx) }), _jsx(ChartTooltip, { ctx: ctx }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: a.chartVar, strokeWidth: 2, dot: false, activeDot: { r: 4 } })] })) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+}
+export function LineWidget(p) {
+    return _jsx(TimeSeriesWidget, { ...p, variant: "line" });
+}
+export function AreaWidget(p) {
+    return _jsx(TimeSeriesWidget, { ...p, variant: "area" });
+}
+// --- pie / donut (shared) -------------------------------------------------
+function CircularWidget(p) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency);
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasSeries(p.data) ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ResponsiveContainer, { width: "50%", height: CHART_HEIGHT, children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { ctx: ctx }), _jsx(Pie, { data: p.data.series, dataKey: "value", nameKey: "label", innerRadius: p.variant === 'donut' ? 32 : 0, outerRadius: 56, paddingAngle: p.variant === 'donut' ? 2 : 0, stroke: "var(--background, #fff)", strokeWidth: 2, children: p.data.series.map((_, i) => (_jsx(Cell, { fill: paletteColor(i) }, i))) })] }) }), _jsx("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: p.data.series.slice(0, 6).map((pt, i) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "size-2.5 shrink-0 rounded-sm", style: { background: paletteColor(i) } }), _jsx("span", { className: "truncate text-muted-foreground", children: pt.label }), _jsx("span", { className: "ml-auto shrink-0 font-medium tabular-nums text-foreground", children: formatWidgetValue(pt.value, ctx) })] }, pt.key))) })] })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+}
+export function PieWidget(p) {
+    return _jsx(CircularWidget, { ...p, variant: "pie" });
+}
+export function DonutWidget(p) {
+    return _jsx(CircularWidget, { ...p, variant: "donut" });
+}
+// --- list (top-N with proportion bars) ------------------------------------
+export function ListWidget(p) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency);
+    const a = accentClasses(p.spec.accent);
+    const series = p.data?.series ?? [];
+    const max = series.reduce((m, s) => Math.max(m, s.value), 0) || 1;
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: series.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-2.5", children: series.map((pt) => (_jsxs("li", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate text-foreground", children: pt.label }), _jsx("span", { className: "shrink-0 font-medium tabular-nums text-muted-foreground", children: formatWidgetValue(pt.value, ctx) })] }), _jsx("div", { className: cn('h-1.5 w-full overflow-hidden rounded-full', a.track), children: _jsx("div", { className: cn('h-full rounded-full transition-all', a.bar), style: { width: `${Math.max(2, (pt.value / max) * 100)}%` } }) })] }, pt.key))) })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+}
+// --- progress -------------------------------------------------------------
+// A scalar rendered as a proportion bar. When `format:'percent'` the value is
+// a fraction in [0,1]; otherwise it's shown as the big number with a full bar.
+export function ProgressWidget(p) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency);
+    const a = accentClasses(p.spec.accent);
+    const value = p.data?.value;
+    const hasValue = typeof value === 'number' && !Number.isNaN(value);
+    const pct = p.spec.format === 'percent'
+        ? Math.min(100, Math.max(0, (value ?? 0) * 100))
+        : 100;
+    return (_jsx(WidgetCard, { "data-testid": `widget-${p.spec.key}`, title: p.spec.title, subtitle: p.spec.subtitle, icon: p.spec.icon, accent: p.spec.accent, children: hasValue ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-2xl font-semibold tabular-nums tracking-tight text-foreground", children: formatWidgetValue(value, ctx) }), _jsx("div", { className: cn('h-2 w-full overflow-hidden rounded-full', a.track), children: _jsx("div", { className: cn('h-full rounded-full transition-all duration-500', a.bar), style: { width: `${pct}%` } }) })] })) : (_jsx(WidgetEmpty, { message: p.emptyText })) }));
+}

package/dist/widgets/widget-card.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { WidgetAccent } from '../dashboard-types';
+export interface WidgetCardProps {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    accent?: WidgetAccent;
+    /** Right-aligned header slot (e.g. a delta chip). */
+    headerExtra?: React.ReactNode;
+    /** Body content. */
+    children?: React.ReactNode;
+    className?: string;
+    /** Forwarded for testing/automation. */
+    'data-testid'?: string;
+}
+/**
+ * The card frame shared by all widgets. Keep the chrome here so a single style
+ * change propagates to every kind (and to federated custom widgets).
+ */
+export declare function WidgetCard({ title, subtitle, icon, accent, headerExtra, children, className, ...rest }: WidgetCardProps): React.JSX.Element;
+/** Delta chip: green up / red down, neutral on zero. `text` is preformatted. */
+export declare function DeltaChip({ delta, text }: {
+    delta: number;
+    text: string;
+}): React.JSX.Element;
+/** Centered empty state inside a widget body (no data / missing). */
+export declare function WidgetEmpty({ message }: {
+    message: string;
+}): React.JSX.Element;
+/** Per-widget error state — isolated so a broken widget never tumbles the grid. */
+export declare function WidgetError({ message }: {
+    message: string;
+}): React.JSX.Element;
+//# sourceMappingURL=widget-card.d.ts.map

package/dist/widgets/widget-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-card.d.ts","sourceRoot":"","sources":["../../src/widgets/widget-card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtD,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAA;CACzB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,eAAe,qBA6CjB;AAED,gFAAgF;AAChF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,qBAiBzE;AAED,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,qBAM3D;AAED,mFAAmF;AACnF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,qBAO3D"}

package/dist/widgets/widget-card.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from '@asteby/metacore-ui';
+import { cn } from '@asteby/metacore-ui/lib';
+import { DynamicIcon, isLucideIconName } from '../dynamic-icon';
+import { accentClasses } from './widget-format';
+/**
+ * The card frame shared by all widgets. Keep the chrome here so a single style
+ * change propagates to every kind (and to federated custom widgets).
+ */
+export function WidgetCard({ title, subtitle, icon, accent, headerExtra, children, className, ...rest }) {
+    const a = accentClasses(accent);
+    const showIcon = icon && isLucideIconName(icon);
+    return (_jsxs(Card, { ...rest, className: cn(
+        // base: subtle border, ring on hover, gentle lift, mount fade-in
+        'group/widget relative flex h-full flex-col overflow-hidden', 'border-border/60 transition-all duration-200', 'hover:border-border hover:ring-1 hover:ring-ring/30 hover:shadow-sm', 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-500', className), children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [showIcon && (_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-lg', a.chip), children: _jsx(DynamicIcon, { name: icon, className: "size-[18px]" }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: title }), subtitle && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: subtitle }))] })] }), headerExtra && _jsx("div", { className: "shrink-0", children: headerExtra })] }), _jsx(CardContent, { className: "flex flex-1 flex-col justify-end pt-1", children: children })] }));
+}
+/** Delta chip: green up / red down, neutral on zero. `text` is preformatted. */
+export function DeltaChip({ delta, text }) {
+    const up = delta > 0;
+    const down = delta < 0;
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium tabular-nums', up && 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400', down && 'bg-rose-500/10 text-rose-600 dark:text-rose-400', !up && !down && 'bg-muted text-muted-foreground'), children: [up && '▲', down && '▼', text] }));
+}
+/** Centered empty state inside a widget body (no data / missing). */
+export function WidgetEmpty({ message }) {
+    return (_jsx("div", { className: "flex flex-1 items-center justify-center py-6 text-center text-xs text-muted-foreground", children: message }));
+}
+/** Per-widget error state — isolated so a broken widget never tumbles the grid. */
+export function WidgetError({ message }) {
+    return (_jsxs("div", { className: "flex flex-1 items-center justify-center gap-2 py-6 text-center text-xs text-destructive", children: [_jsx(DynamicIcon, { name: "TriangleAlert", className: "size-4" }), _jsx("span", { children: message })] }));
+}

package/dist/widgets/widget-format.d.ts

@@ -0,0 +1,42 @@
+import type { WidgetAccent, WidgetFormat } from '../dashboard-types';
+export interface WidgetFormatCtx {
+    format?: WidgetFormat;
+    locale?: string;
+    currency?: string;
+}
+/**
+ * Formats a scalar/series value with the widget's declared format. `currency`
+ * uses the org currency + locale (same fallback chain as table cells); `percent`
+ * treats the value as a fraction (0.142 → "14.2%"); `compact` uses Intl compact
+ * notation (1_200 → "1.2K").
+ */
+export declare function formatWidgetValue(value: number, { format, locale, currency }: WidgetFormatCtx): string;
+/** Axis-tick formatter — always compact so charts stay legible. */
+export declare function formatAxisTick(value: number, { format, locale, currency }: WidgetFormatCtx): string;
+/** Formats the compare delta fraction (0.142 → "+14.2%"). */
+export declare function formatDelta(delta: number, locale?: string): string;
+export interface AccentClasses {
+    /** Icon chip background + foreground. */
+    chip: string;
+    /** Text color for accented labels. */
+    text: string;
+    /** Solid bar/fill background (progress, list proportion). */
+    bar: string;
+    /** Soft track background behind a bar. */
+    track: string;
+    /** Hex-ish CSS color used for recharts stroke/fill (var-based). */
+    chartVar: string;
+}
+/** Resolves the accent class bundle, defaulting to `sky`. */
+export declare function accentClasses(accent?: WidgetAccent): AccentClasses;
+/**
+ * A categorical palette for multi-series charts (pie/donut/bar by bucket).
+ * Cycles the accent chart vars so slices stay theme-aware + dark-mode safe.
+ */
+export declare const CHART_PALETTE: string[];
+/** Picks a palette color by index, wrapping around. */
+export declare function paletteColor(index: number): string;
+/** Grid/axis muted color from the theme (works in light + dark). */
+export declare const CHART_MUTED = "var(--muted-foreground, #94a3b8)";
+export declare const CHART_GRID = "var(--border, #e2e8f0)";
+//# sourceMappingURL=widget-format.d.ts.map

package/dist/widgets/widget-format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-format.d.ts","sourceRoot":"","sources":["../../src/widgets/widget-format.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEpE,MAAM,WAAW,eAAe;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,MAAM,EACb,EAAE,MAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,eAAe,GACzD,MAAM,CA2BR;AAED,mEAAmE;AACnE,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,eAAe,GAC9C,MAAM,CAoBR;AAED,6DAA6D;AAC7D,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAUlE;AAQD,MAAM,WAAW,aAAa;IAC1B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,GAAG,EAAE,MAAM,CAAA;IACX,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAA;CACnB;AAiDD,6DAA6D;AAC7D,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,aAAa,CAElE;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,EAOjC,CAAA;AAED,uDAAuD;AACvD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,oEAAoE;AACpE,eAAO,MAAM,WAAW,qCAAqC,CAAA;AAC7D,eAAO,MAAM,UAAU,2BAA2B,CAAA"}