@asteby/metacore-runtime-react 18.16.0 → 18.17.0

package/src/permissions-manager.tsx

@@ -463,7 +463,7 @@ export function PermissionsManager({
     const [saving, setSaving] = React.useState(false)
 
     const [roleOpen, setRoleOpen] = React.useState(false)
-    const [moduleQuery, setModuleQuery] = React.useState('')
+    const [moduleOpen, setModuleOpen] = React.useState(false)
 
     // Pending role switch while there are unsaved changes.
     const [pendingRoleId, setPendingRoleId] = React.useState<string | null>(null)
@@ -547,12 +547,6 @@ export function PermissionsManager({
 
     const dirty = baseline !== null && draft !== null && !capabilitySetsEqual(baseline, draft)
 
-    // Flat module list, optionally filtered by the search.
-    const visibleGroups = React.useMemo(
-        () => filterModuleGroups(groups ?? [], moduleQuery),
-        [groups, moduleQuery],
-    )
-
     // ---- capability edits ---------------------------------------------------
     const toggleCapability = React.useCallback((cap: string) => {
         setDraft((prev) => {
@@ -887,73 +881,104 @@ export function PermissionsManager({
                         </CardContent>
                     </Card>
 
-                    {/* Card: Módulos (flat list, mirrors the sidebar — no folders) */}
+                    {/* Card: Módulo — a grouped combobox, same pattern as the role
+                        selector above (compact; the long flat list felt heavy). */}
                     <Card>
                         <CardHeader>
-                            <CardTitle className="text-base">Módulos</CardTitle>
+                            <CardTitle className="text-base">Módulo</CardTitle>
                             <CardDescription>
                                 Elige el módulo cuyas acciones quieres configurar.
                             </CardDescription>
                         </CardHeader>
-                        <CardContent className="flex flex-col gap-3">
-                            <div className="relative">
-                                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                                <Input
-                                    value={moduleQuery}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                        setModuleQuery(e.target.value)
-                                    }
-                                    placeholder="Buscar módulo…"
-                                    aria-label="Buscar módulo"
-                                    className="pl-8"
-                                />
-                            </div>
-
-                            <div
-                                role="list"
-                                aria-label="Módulos"
-                                className="-mx-1 flex max-h-[460px] flex-col gap-0.5 overflow-y-auto px-1"
-                            >
-                                {visibleGroups.length === 0 ? (
-                                    <p className="px-2 py-6 text-center text-sm text-muted-foreground">
-                                        Sin módulos.
-                                    </p>
-                                ) : (
-                                    visibleGroups.map((group, gi) => (
-                                        <div
-                                            key={group.title || `__untitled_${gi}`}
-                                            className="flex flex-col gap-0.5"
-                                        >
-                                            {group.title && (
-                                                <div
-                                                    role="heading"
-                                                    aria-level={3}
-                                                    className={cn(
-                                                        'px-2 pb-1 pt-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground',
-                                                        gi === 0 && 'pt-1',
-                                                    )}
-                                                >
-                                                    {group.title}
-                                                </div>
-                                            )}
-                                            {group.modules.map((mod) => (
-                                                <ModuleRow
-                                                    key={mod.key}
-                                                    module={mod}
-                                                    active={mod.key === activeModuleKey}
-                                                    granted={
-                                                        draft
-                                                            ? grantedCountForModule(draft, mod)
-                                                            : 0
+                        <CardContent>
+                            <Popover open={moduleOpen} onOpenChange={setModuleOpen}>
+                                <PopoverTrigger asChild>
+                                    <Button
+                                        variant="outline"
+                                        role="combobox"
+                                        aria-expanded={moduleOpen}
+                                        className="w-full justify-between font-normal"
+                                    >
+                                        <span className="flex min-w-0 items-center gap-2">
+                                            {activeModule && (
+                                                <DynamicIcon
+                                                    name={
+                                                        activeModule.icon ||
+                                                        (activeModule.kind === 'screen'
+                                                            ? 'Eye'
+                                                            : 'Square')
                                                     }
-                                                    total={mod.actions.length}
-                                                    onSelect={() => setActiveModuleKey(mod.key)}
+                                                    className="h-4 w-4 shrink-0 opacity-70"
                                                 />
+                                            )}
+                                            <span className="truncate">
+                                                {activeModule
+                                                    ? activeModule.label
+                                                    : 'Seleccionar módulo…'}
+                                            </span>
+                                        </span>
+                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                    </Button>
+                                </PopoverTrigger>
+                                <PopoverContent
+                                    className="w-[var(--radix-popover-trigger-width)] min-w-[280px] p-0"
+                                    align="start"
+                                >
+                                    <Command>
+                                        <CommandInput placeholder="Buscar módulo…" />
+                                        <CommandList className="max-h-[360px]">
+                                            <CommandEmpty>Sin módulos.</CommandEmpty>
+                                            {(groups ?? []).map((group, gi) => (
+                                                <CommandGroup
+                                                    key={group.title || `__untitled_${gi}`}
+                                                    heading={group.title || undefined}
+                                                >
+                                                    {group.modules.map((mod) => (
+                                                        <CommandItem
+                                                            key={mod.key}
+                                                            value={`${group.title} ${mod.label} ${mod.key}`}
+                                                            onSelect={() => {
+                                                                setActiveModuleKey(mod.key)
+                                                                setModuleOpen(false)
+                                                            }}
+                                                        >
+                                                            <DynamicIcon
+                                                                name={
+                                                                    mod.icon ||
+                                                                    (mod.kind === 'screen'
+                                                                        ? 'Eye'
+                                                                        : 'Square')
+                                                                }
+                                                                className="mr-2 h-4 w-4 shrink-0 opacity-70"
+                                                            />
+                                                            <span className="truncate">
+                                                                {mod.label}
+                                                            </span>
+                                                            {draft &&
+                                                                grantedCountForModule(draft, mod) >
+                                                                    0 && (
+                                                                    <Badge
+                                                                        variant="secondary"
+                                                                        className="ml-auto shrink-0 tabular-nums"
+                                                                    >
+                                                                        {grantedCountForModule(
+                                                                            draft,
+                                                                            mod,
+                                                                        )}
+                                                                        /{mod.actions.length}
+                                                                    </Badge>
+                                                                )}
+                                                            {mod.key === activeModuleKey && (
+                                                                <Check className="ml-2 h-4 w-4 shrink-0" />
+                                                            )}
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
                                             ))}
-                                        </div>
-                                    ))
-                                )}
-                            </div>
+                                        </CommandList>
+                                    </Command>
+                                </PopoverContent>
+                            </Popover>
                         </CardContent>
                     </Card>
                 </div>

package/src/widgets/renderers.tsx

@@ -0,0 +1,336 @@
+// Built-in dashboard widget renderers, one per declarative `kind`. Each takes
+// the resolved spec + computed WidgetData + the format context (locale/currency)
+// and renders the body INSIDE a <WidgetCard>. recharts powers the charts; colors
+// come from theme CSS vars (dark-mode safe), curves are smooth, axes/legends
+// compact, tooltips on.
+
+import * as React from 'react'
+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 type { DashboardWidgetSpec, WidgetData } from '../dashboard-types'
+import { WidgetCard, DeltaChip, WidgetEmpty } from './widget-card'
+import {
+    accentClasses,
+    paletteColor,
+    formatWidgetValue,
+    formatAxisTick,
+    formatDelta,
+    CHART_GRID,
+    CHART_MUTED,
+    type WidgetFormatCtx,
+} from './widget-format'
+
+export interface WidgetRenderProps {
+    spec: DashboardWidgetSpec
+    data?: WidgetData
+    locale?: string
+    currency?: string
+    /** i18n: per-widget empty fallback (already translated). */
+    emptyText: string
+}
+
+const fmtCtx = (
+    spec: DashboardWidgetSpec,
+    locale?: string,
+    currency?: string,
+): WidgetFormatCtx => ({ format: spec.format, locale, currency })
+
+const hasSeries = (d?: WidgetData): d is WidgetData & { series: NonNullable<WidgetData['series']> } =>
+    Array.isArray(d?.series) && d!.series!.length > 0
+
+const CHART_HEIGHT = 132
+
+// Compact recharts tooltip styled with theme tokens.
+function ChartTooltip({ ctx }: { ctx: WidgetFormatCtx }) {
+    return (
+        <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: number) => formatWidgetValue(Number(v), ctx)}
+        />
+    )
+}
+
+// --- stat -----------------------------------------------------------------
+export function StatWidget(p: WidgetRenderProps) {
+    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 (
+        <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' ? (
+                    <DeltaChip delta={delta} text={formatDelta(delta, p.locale)} />
+                ) : undefined
+            }
+        >
+            {hasValue ? (
+                <div className="text-3xl font-semibold tabular-nums tracking-tight text-foreground">
+                    {formatWidgetValue(value!, ctx)}
+                </div>
+            ) : (
+                <WidgetEmpty message={p.emptyText} />
+            )}
+        </WidgetCard>
+    )
+}
+
+// --- bar ------------------------------------------------------------------
+export function BarWidget(p: WidgetRenderProps) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency)
+    const a = accentClasses(p.spec.accent)
+    return (
+        <WidgetCard
+            data-testid={`widget-${p.spec.key}`}
+            title={p.spec.title}
+            subtitle={p.spec.subtitle}
+            icon={p.spec.icon}
+            accent={p.spec.accent}
+        >
+            {hasSeries(p.data) ? (
+                <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
+                    <BarChart data={p.data.series} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
+                        <CartesianGrid vertical={false} stroke={CHART_GRID} strokeDasharray="3 3" />
+                        <XAxis
+                            dataKey="label"
+                            tick={{ fontSize: 10, fill: CHART_MUTED }}
+                            tickLine={false}
+                            axisLine={false}
+                            interval="preserveStartEnd"
+                        />
+                        <YAxis
+                            tick={{ fontSize: 10, fill: CHART_MUTED }}
+                            tickLine={false}
+                            axisLine={false}
+                            width={44}
+                            tickFormatter={(v: number) => formatAxisTick(v, ctx)}
+                        />
+                        <ChartTooltip ctx={ctx} />
+                        <Bar dataKey="value" fill={a.chartVar} radius={[4, 4, 0, 0]} maxBarSize={40} />
+                    </BarChart>
+                </ResponsiveContainer>
+            ) : (
+                <WidgetEmpty message={p.emptyText} />
+            )}
+        </WidgetCard>
+    )
+}
+
+// --- line / area (shared) -------------------------------------------------
+function TimeSeriesWidget(p: WidgetRenderProps & { variant: 'line' | 'area' }) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency)
+    const a = accentClasses(p.spec.accent)
+    const gradId = `wg-grad-${p.spec.key}`
+    return (
+        <WidgetCard
+            data-testid={`widget-${p.spec.key}`}
+            title={p.spec.title}
+            subtitle={p.spec.subtitle}
+            icon={p.spec.icon}
+            accent={p.spec.accent}
+        >
+            {hasSeries(p.data) ? (
+                <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
+                    {p.variant === 'area' ? (
+                        <AreaChart data={p.data.series} margin={{ top: 4, right: 6, left: -16, bottom: 0 }}>
+                            <defs>
+                                <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+                                    <stop offset="0%" stopColor={a.chartVar} stopOpacity={0.35} />
+                                    <stop offset="100%" stopColor={a.chartVar} stopOpacity={0.02} />
+                                </linearGradient>
+                            </defs>
+                            <CartesianGrid vertical={false} stroke={CHART_GRID} strokeDasharray="3 3" />
+                            <XAxis dataKey="label" tick={{ fontSize: 10, fill: CHART_MUTED }} tickLine={false} axisLine={false} interval="preserveStartEnd" />
+                            <YAxis tick={{ fontSize: 10, fill: CHART_MUTED }} tickLine={false} axisLine={false} width={44} tickFormatter={(v: number) => formatAxisTick(v, ctx)} />
+                            <ChartTooltip ctx={ctx} />
+                            <Area type="monotone" dataKey="value" stroke={a.chartVar} strokeWidth={2} fill={`url(#${gradId})`} />
+                        </AreaChart>
+                    ) : (
+                        <LineChart data={p.data.series} margin={{ top: 4, right: 6, left: -16, bottom: 0 }}>
+                            <CartesianGrid vertical={false} stroke={CHART_GRID} strokeDasharray="3 3" />
+                            <XAxis dataKey="label" tick={{ fontSize: 10, fill: CHART_MUTED }} tickLine={false} axisLine={false} interval="preserveStartEnd" />
+                            <YAxis tick={{ fontSize: 10, fill: CHART_MUTED }} tickLine={false} axisLine={false} width={44} tickFormatter={(v: number) => formatAxisTick(v, ctx)} />
+                            <ChartTooltip ctx={ctx} />
+                            <Line type="monotone" dataKey="value" stroke={a.chartVar} strokeWidth={2} dot={false} activeDot={{ r: 4 }} />
+                        </LineChart>
+                    )}
+                </ResponsiveContainer>
+            ) : (
+                <WidgetEmpty message={p.emptyText} />
+            )}
+        </WidgetCard>
+    )
+}
+
+export function LineWidget(p: WidgetRenderProps) {
+    return <TimeSeriesWidget {...p} variant="line" />
+}
+export function AreaWidget(p: WidgetRenderProps) {
+    return <TimeSeriesWidget {...p} variant="area" />
+}
+
+// --- pie / donut (shared) -------------------------------------------------
+function CircularWidget(p: WidgetRenderProps & { variant: 'pie' | 'donut' }) {
+    const ctx = fmtCtx(p.spec, p.locale, p.currency)
+    return (
+        <WidgetCard
+            data-testid={`widget-${p.spec.key}`}
+            title={p.spec.title}
+            subtitle={p.spec.subtitle}
+            icon={p.spec.icon}
+            accent={p.spec.accent}
+        >
+            {hasSeries(p.data) ? (
+                <div className="flex items-center gap-3">
+                    <ResponsiveContainer width="50%" height={CHART_HEIGHT}>
+                        <PieChart>
+                            <ChartTooltip ctx={ctx} />
+                            <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}
+                            >
+                                {p.data.series.map((_, i) => (
+                                    <Cell key={i} fill={paletteColor(i)} />
+                                ))}
+                            </Pie>
+                        </PieChart>
+                    </ResponsiveContainer>
+                    <ul className="flex min-w-0 flex-1 flex-col gap-1.5">
+                        {p.data.series.slice(0, 6).map((pt, i) => (
+                            <li key={pt.key} className="flex items-center gap-2 text-xs">
+                                <span className="size-2.5 shrink-0 rounded-sm" style={{ background: paletteColor(i) }} />
+                                <span className="truncate text-muted-foreground">{pt.label}</span>
+                                <span className="ml-auto shrink-0 font-medium tabular-nums text-foreground">
+                                    {formatWidgetValue(pt.value, ctx)}
+                                </span>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ) : (
+                <WidgetEmpty message={p.emptyText} />
+            )}
+        </WidgetCard>
+    )
+}
+
+export function PieWidget(p: WidgetRenderProps) {
+    return <CircularWidget {...p} variant="pie" />
+}
+export function DonutWidget(p: WidgetRenderProps) {
+    return <CircularWidget {...p} variant="donut" />
+}
+
+// --- list (top-N with proportion bars) ------------------------------------
+export function ListWidget(p: WidgetRenderProps) {
+    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 (
+        <WidgetCard
+            data-testid={`widget-${p.spec.key}`}
+            title={p.spec.title}
+            subtitle={p.spec.subtitle}
+            icon={p.spec.icon}
+            accent={p.spec.accent}
+        >
+            {series.length > 0 ? (
+                <ul className="flex flex-col gap-2.5">
+                    {series.map((pt) => (
+                        <li key={pt.key} className="flex flex-col gap-1">
+                            <div className="flex items-baseline justify-between gap-2 text-xs">
+                                <span className="truncate text-foreground">{pt.label}</span>
+                                <span className="shrink-0 font-medium tabular-nums text-muted-foreground">
+                                    {formatWidgetValue(pt.value, ctx)}
+                                </span>
+                            </div>
+                            <div className={cn('h-1.5 w-full overflow-hidden rounded-full', a.track)}>
+                                <div
+                                    className={cn('h-full rounded-full transition-all', a.bar)}
+                                    style={{ width: `${Math.max(2, (pt.value / max) * 100)}%` }}
+                                />
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <WidgetEmpty message={p.emptyText} />
+            )}
+        </WidgetCard>
+    )
+}
+
+// --- 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: WidgetRenderProps) {
+    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 (
+        <WidgetCard
+            data-testid={`widget-${p.spec.key}`}
+            title={p.spec.title}
+            subtitle={p.spec.subtitle}
+            icon={p.spec.icon}
+            accent={p.spec.accent}
+        >
+            {hasValue ? (
+                <div className="flex flex-col gap-2">
+                    <div className="text-2xl font-semibold tabular-nums tracking-tight text-foreground">
+                        {formatWidgetValue(value!, ctx)}
+                    </div>
+                    <div className={cn('h-2 w-full overflow-hidden rounded-full', a.track)}>
+                        <div
+                            className={cn('h-full rounded-full transition-all duration-500', a.bar)}
+                            style={{ width: `${pct}%` }}
+                        />
+                    </div>
+                </div>
+            ) : (
+                <WidgetEmpty message={p.emptyText} />
+            )}
+        </WidgetCard>
+    )
+}

package/src/widgets/widget-card.tsx

@@ -0,0 +1,125 @@
+// Shared "pro" card chrome for every dashboard widget. Subtle border, hover
+// ring, an accent icon chip, title + optional subtitle, and a subtle mount
+// motion done in pure CSS (runtime-react does not ship framer-motion). The
+// chrome is identical for declarative renderers AND `kind:"custom"` federated
+// widgets so they visually combine in the same grid.
+
+import * as React from 'react'
+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'
+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 function WidgetCard({
+    title,
+    subtitle,
+    icon,
+    accent,
+    headerExtra,
+    children,
+    className,
+    ...rest
+}: WidgetCardProps) {
+    const a = accentClasses(accent)
+    const showIcon = icon && isLucideIconName(icon)
+    return (
+        <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,
+            )}
+        >
+            <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-2">
+                <div className="flex min-w-0 items-start gap-3">
+                    {showIcon && (
+                        <span
+                            className={cn(
+                                'flex size-9 shrink-0 items-center justify-center rounded-lg',
+                                a.chip,
+                            )}
+                        >
+                            <DynamicIcon name={icon!} className="size-[18px]" />
+                        </span>
+                    )}
+                    <div className="min-w-0">
+                        <div className="truncate text-sm font-medium leading-tight text-foreground">
+                            {title}
+                        </div>
+                        {subtitle && (
+                            <div className="mt-0.5 truncate text-xs text-muted-foreground">
+                                {subtitle}
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {headerExtra && <div className="shrink-0">{headerExtra}</div>}
+            </CardHeader>
+            <CardContent className="flex flex-1 flex-col justify-end pt-1">
+                {children}
+            </CardContent>
+        </Card>
+    )
+}
+
+/** Delta chip: green up / red down, neutral on zero. `text` is preformatted. */
+export function DeltaChip({ delta, text }: { delta: number; text: string }) {
+    const up = delta > 0
+    const down = delta < 0
+    return (
+        <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',
+            )}
+        >
+            {up && '▲'}
+            {down && '▼'}
+            {text}
+        </span>
+    )
+}
+
+/** Centered empty state inside a widget body (no data / missing). */
+export function WidgetEmpty({ message }: { message: string }) {
+    return (
+        <div className="flex flex-1 items-center justify-center py-6 text-center text-xs text-muted-foreground">
+            {message}
+        </div>
+    )
+}
+
+/** Per-widget error state — isolated so a broken widget never tumbles the grid. */
+export function WidgetError({ message }: { message: string }) {
+    return (
+        <div className="flex flex-1 items-center justify-center gap-2 py-6 text-center text-xs text-destructive">
+            <DynamicIcon name="TriangleAlert" className="size-4" />
+            <span>{message}</span>
+        </div>
+    )
+}