omnira-ui 0.6.6 → 0.6.7

package/README.md

@@ -122,6 +122,22 @@ Browse the full library and copy advanced components (Sidebar, Feature Cards, et
 - **User Account Menu** — Popup with profile, settings, account switching, sign out
 - **Search Bar** — Integrated ⌘K search component
 
+### Industry Widgets
+
+Drop-in dashboard widgets that follow the system design tokens — accent colors track the configurator and never go off-system.
+
+- **Fintech / Large** (10) — `CashflowAnalytics`, `SendMoney`, `CashflowSplit`, `SavingAccount`, `FinancialGrowth`, `SpendsBreakdown`, `SavingsMonthly`, `CreditPaymentPlanner`, `SavingsGoals`, `ExpensesChart`
+- **Fintech / Medium** (20) — `EmergencyFunds`, `IncomeBreakdown`, `WeeklyExpenditure`, `CreditCardUsed`, `AssetAllocation`, `MonthlySubscription`, `SavingsBuckets`, `MyCard`, `ConvertCurrency`, `SendMoneyCompact`, `TotalBalance`, `StockPosition`, `SpendingLimit`, `GoalProgress`, `SavedMoney`, `CashflowSummary`, `CashflowRing`, `CreditScore`, `InvestmentChart`, `DailyRevenue`
+
+Install all of one size in a single command:
+
+```bash
+npx omnira-ui add fintech-widgets         # 10 large widgets
+npx omnira-ui add fintech-widgets-medium  # 20 medium widgets
+```
+
+Or grab any single widget by its kebab-case slug — e.g. `npx omnira-ui add cashflow-analytics`. Browse them at [omnira.one/docs/widgets/fintech](https://omnira.one/docs/widgets/fintech).
+
 ---
 
 ## Design System

package/app/globals.css

@@ -13,29 +13,49 @@
 
 /* --- CSS Custom Properties: Dark Mode (Default) --- */
 [data-theme="dark"] {
+    /* Primary Accent (Mint/Teal for Pulse Dashboard) */
+    --color-primary: #3FC39E;
+    --color-primary-hover: #36B08E;
+    --color-primary-gradient: #2D9A7A;
+    --color-primary-text: #121212;
+
+    /* Legacy Lime Accent (Kept for backward compatibility with old components) */
     --color-lime: #D2FE17;
     --color-lime-hover: #c0e616;
     --color-lime-gradient: #ABC928;
     --color-lime-text: #121212;
 
+    /* Backgrounds */
     --color-bg-primary: #202020;
     --color-bg-secondary: #1a1a1a;
     --color-bg-card: rgba(248, 248, 248, 0.03);
     --color-bg-elevated: rgba(248, 248, 248, 0.06);
     --color-bg-input: rgba(248, 248, 248, 0.04);
     --color-bg-hover: rgba(248, 248, 248, 0.05);
+    --color-bg-sunken: rgba(248, 248, 248, 0.02);
     --color-bg-overlay: rgba(10, 10, 10, 0.97);
     --color-bg-sidebar: #1a1a1a;
 
+    /* Primary Accent Backgrounds */
+    --color-bg-primary-subtle: rgba(63, 195, 158, 0.06);
+    --color-bg-primary-medium: rgba(63, 195, 158, 0.08);
+    --color-bg-primary-strong: rgba(63, 195, 158, 0.12);
+
     --color-text-primary: rgba(248, 248, 248, 0.95);
     --color-text-secondary: rgba(248, 248, 248, 0.70);
     --color-text-tertiary: rgba(248, 248, 248, 0.50);
 
+    /* Borders */
     --color-border-subtle: rgba(255, 255, 255, 0.05);
     --color-border-standard: rgba(255, 255, 255, 0.06);
     --color-border-medium: rgba(255, 255, 255, 0.08);
     --color-border-strong: rgba(255, 255, 255, 0.15);
 
+    /* Primary Accent Borders */
+    --color-border-primary-subtle: rgba(63, 195, 158, 0.10);
+    --color-border-primary-medium: rgba(63, 195, 158, 0.15);
+    --color-border-primary-strong: rgba(63, 195, 158, 0.30);
+
     --color-border-lime-subtle: rgba(210, 254, 23, 0.1);
     --color-border-lime-medium: rgba(210, 254, 23, 0.15);
     --color-border-lime-strong: rgba(210, 254, 23, 0.3);
@@ -62,7 +82,7 @@
     --shadow-card-light: inset 1px 2px 12px rgba(248, 248, 248, 0.03), 0px 8px 28px rgba(0, 0, 0, 0.12);
     --shadow-card-accent: inset 2px 4px 16px rgba(210, 254, 23, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2);
     --shadow-card-hover: inset 2px 4px 16px rgba(248, 248, 248, 0.08), 0px 12px 40px rgba(0, 0, 0, 0.28);
-    --shadow-btn-primary: 0 8px 24px rgba(210, 254, 23, 0.3);
+    --shadow-btn-primary: 0 8px 24px rgba(63, 195, 158, 0.3);
     --shadow-glow-lime: 0 0 8px rgba(210, 254, 23, 0.6), 0 0 16px rgba(210, 254, 23, 0.3);
 
     --gradient-text: linear-gradient(93deg, rgba(248, 248, 248, 0.9), rgba(248, 248, 248, 0.5));

package/cli/omnira-init.mjs

@@ -406,6 +406,7 @@ const PAGE_BUNDLES = {
     // Navigation
     "sidebar-navigation": ["SidebarNavigation", "Button", "Avatar", "Badge", "Dropdown", "Toggle", "Tooltip"],
     "header-navigation":  ["Button", "Avatar", "Badge", "Dropdown"],
+    "language-selector":  ["LanguageSelector"],
     // Modals
     "modal":              ["Modal", "Button", "Badge", "Input", "Toggle", "Checkbox"],
     "modals":             ["Modal", "Button", "Badge", "Input", "Toggle", "Checkbox"],
@@ -492,6 +493,50 @@ const PAGE_BUNDLES = {
     "not-found-page":            ["NotFoundPage", "Button"],
     "404":                       ["NotFoundPage", "Button"],
     "email-template":            ["EmailTemplate"],
+    // ── Marketing component bundles ──
+    "marketing-header":          ["MarketingHeader", "Button"],
+    // ── Widget bundles — industry-specific UI blocks ──
+    "fintech-widgets":           [
+        "CashflowAnalytics", "SendMoney", "CashflowSplit", "SavingAccount", "FinancialGrowth",
+        "SpendsBreakdown", "SavingsMonthly", "CreditPaymentPlanner", "SavingsGoals", "ExpensesChart",
+    ],
+    "cashflow-analytics":        ["CashflowAnalytics"],
+    "send-money":                ["SendMoney"],
+    "cashflow-split":            ["CashflowSplit"],
+    "saving-account":            ["SavingAccount"],
+    "financial-growth":          ["FinancialGrowth"],
+    "spends-breakdown":          ["SpendsBreakdown"],
+    "savings-monthly":           ["SavingsMonthly"],
+    "credit-payment-planner":    ["CreditPaymentPlanner"],
+    "savings-goals":             ["SavingsGoals"],
+    "expenses-chart":            ["ExpensesChart"],
+    // ── Medium fintech widgets ──
+    "fintech-widgets-medium":    [
+        "EmergencyFunds", "IncomeBreakdown", "WeeklyExpenditure", "CreditCardUsed", "AssetAllocation",
+        "MonthlySubscription", "SavingsBuckets", "MyCard", "ConvertCurrency", "SendMoneyCompact",
+        "TotalBalance", "StockPosition", "SpendingLimit", "GoalProgress", "SavedMoney",
+        "CashflowSummary", "CashflowRing", "CreditScore", "InvestmentChart", "DailyRevenue",
+    ],
+    "emergency-funds":           ["EmergencyFunds"],
+    "income-breakdown":          ["IncomeBreakdown"],
+    "weekly-expenditure":        ["WeeklyExpenditure"],
+    "credit-card-used":          ["CreditCardUsed"],
+    "asset-allocation":          ["AssetAllocation"],
+    "monthly-subscription":      ["MonthlySubscription"],
+    "savings-buckets":           ["SavingsBuckets"],
+    "my-card":                   ["MyCard"],
+    "convert-currency":          ["ConvertCurrency"],
+    "send-money-compact":        ["SendMoneyCompact"],
+    "total-balance":             ["TotalBalance"],
+    "stock-position":            ["StockPosition"],
+    "spending-limit":            ["SpendingLimit"],
+    "goal-progress":             ["GoalProgress"],
+    "saved-money":               ["SavedMoney"],
+    "cashflow-summary":          ["CashflowSummary"],
+    "cashflow-ring":             ["CashflowRing"],
+    "credit-score":              ["CreditScore"],
+    "investment-chart":          ["InvestmentChart"],
+    "daily-revenue":             ["DailyRevenue"],
 };
 
 // ── Add command — copy a single component ───────────────────────────

package/components/ui/ActivityGauge/ActivityGauge.module.css

@@ -11,8 +11,7 @@
     border-radius: var(--radius-lg);
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-standard);
-    box-shadow: var(--shadow-card);
-    backdrop-filter: var(--blur-standard);
+    box-shadow: var(--shadow-card-light);
 }
 
 /* ── SVG Gauge ── */

package/components/ui/AgentThinking/AgentThinking.module.css

@@ -35,7 +35,7 @@
     border-radius: var(--radius-lg);
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-standard);
-    overflow: hidden;
+    overflow: visible;
 }
 
 /* ── Header bar ── */
@@ -221,7 +221,8 @@
     z-index: 1;
     flex: 1;
     overflow: hidden;
-    height: 28px;
+    /* 8 × 4pt grid; 28px clipped .stateBadge borders */
+    height: 32px;
     justify-content: center;
 }
 
@@ -306,17 +307,15 @@
     position: relative;
 }
 
+/* Near-opaque surface so the activity log stays readable over arbitrary UI
+   (card tokens are glass / low-alpha by design — see --color-bg-card). */
 .popover {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    width: 280px;
     border-radius: var(--radius-lg);
-    background: var(--color-bg-card);
+    background: var(--color-bg-overlay);
     border: 1px solid var(--color-border-standard);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
-    z-index: 100;
+    box-shadow:
+        0 4px 6px rgba(0, 0, 0, 0.08),
+        0 12px 40px rgba(0, 0, 0, 0.28);
     overflow: hidden;
 }
 
@@ -418,7 +417,10 @@
     background: transparent !important;
     border: none !important;
     border-radius: var(--radius-lg) !important;
-    overflow: hidden !important;
+    overflow: visible !important;
+    /* Docs: portaled popover is position:fixed — extra margin separates stacked demos
+       so the next section sits lower and overlaps less in the viewport. */
+    margin-bottom: 5rem !important;
 }
 
 /* ── Responsive ── */

package/components/ui/AgentThinking/AgentThinking.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback, forwardRef } from "react";
+import { createPortal } from "react-dom";
+import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react-dom";
 import { cn } from "@/lib/cn";
 import { motion, AnimatePresence } from "framer-motion";
 import type { AgentConfig, AgentActivity, AgentState } from "./types";
@@ -101,11 +103,13 @@ function AgentRing({ state, color }: { state: AgentState; color: string }) {
 interface AgentChipProps {
     agent: AgentConfig;
     activity: AgentActivity;
-    isPopoverOpen: boolean;
     onTogglePopover: () => void;
 }
 
-function AgentChip({ agent, activity, isPopoverOpen, onTogglePopover }: AgentChipProps) {
+const AgentChip = forwardRef<HTMLDivElement, AgentChipProps>(function AgentChip(
+    { agent, activity, onTogglePopover },
+    ref,
+) {
     const isAnimating = activity.state === "thinking" || activity.state === "active";
     const statusText = useTextCycler(
         activity.currentAction?.text ?? "",
@@ -121,7 +125,7 @@ function AgentChip({ agent, activity, isPopoverOpen, onTogglePopover }: AgentChi
     } as React.CSSProperties;
 
     return (
-        <div className={s.popoverAnchor}>
+        <div ref={ref} className={s.popoverAnchor}>
             <motion.div
                 className={cn(s.chip, isAnimating && s.chipActive)}
                 style={chipStyle}
@@ -149,7 +153,7 @@ function AgentChip({ agent, activity, isPopoverOpen, onTogglePopover }: AgentChi
                         {agent.name.charAt(0)}
                     </div>
                     {activity.state === "completed" && (
-                        <div className={s.completedCheck}>
+                        <div className={s.completedCheck} style={{ background: agent.color }}>
                             <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                 <path d="M3 7l3 3 5-5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                             </svg>
@@ -176,58 +180,106 @@ function AgentChip({ agent, activity, isPopoverOpen, onTogglePopover }: AgentChi
                     )}
                 </div>
             </motion.div>
-
-            {/* Popover */}
-            <AnimatePresence>
-                {isPopoverOpen && (
-                    <motion.div
-                        className={s.popover}
-                        initial={{ opacity: 0, y: -6, scale: 0.96 }}
-                        animate={{ opacity: 1, y: 0, scale: 1 }}
-                        exit={{ opacity: 0, y: -4, scale: 0.98 }}
-                        transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
-                    >
-                        <div className={s.popoverHeader}>
-                            <span className={s.popoverName} style={{ color: agent.color }}>{agent.name}</span>
-                            <span className={s.popoverRole}>{agent.role}</span>
-                        </div>
-                        <div className={s.popoverBody}>
-                            {activity.activityLog.map((entry, i) => (
-                                <motion.div
-                                    key={i}
-                                    className={s.logEntry}
-                                    initial={{ opacity: 0, x: -8 }}
-                                    animate={{ opacity: 1, x: 0 }}
-                                    transition={{ delay: i * 0.06, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
-                                >
-                                    <div className={s.logIcon}>
-                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                                            <circle cx="6" cy="6" r="2" fill="currentColor" />
-                                        </svg>
-                                    </div>
-                                    <div className={s.logContent}>
-                                        <span className={s.logText}>{entry.text}</span>
-                                        <div className={s.logMeta}>
-                                            <span className={s.logTime}>{entry.time}</span>
-                                            <span className={s.logStatus}>
-                                                <span
-                                                    className={s.logStatusDot}
-                                                    style={{ background: entry.status === "active" ? agent.color : "var(--color-success)" }}
-                                                />
-                                                {entry.status === "active" ? "active" : "done"}
-                                            </span>
-                                        </div>
-                                    </div>
-                                </motion.div>
-                            ))}
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
         </div>
     );
+});
+
+const POPOVER_WIDTH = 280;
+
+interface AgentPopoverContentProps {
+    agent: AgentConfig;
+    activity: AgentActivity;
+    anchorEl: HTMLElement | null;
 }
 
+const AgentPopoverContent = forwardRef<HTMLDivElement, AgentPopoverContentProps>(
+    function AgentPopoverContent({ agent, activity, anchorEl }, ref) {
+        const { refs, floatingStyles } = useFloating({
+            open: Boolean(anchorEl),
+            placement: "bottom-start",
+            strategy: "fixed",
+            /* top/left positioning — avoids fighting Framer Motion transforms on the inner surface */
+            transform: false,
+            middleware: [
+                offset(8),
+                flip({ fallbackPlacements: ["top-start"] }),
+                shift({ padding: 8 }),
+            ],
+            whileElementsMounted: autoUpdate,
+            elements: {
+                reference: anchorEl,
+            },
+        });
+
+        const setFloatingRef = useCallback(
+            (node: HTMLDivElement | null) => {
+                refs.setFloating(node);
+                if (typeof ref === "function") ref(node);
+                else if (ref) ref.current = node;
+            },
+            [refs.setFloating, ref],
+        );
+
+        if (!anchorEl) return null;
+
+        return (
+            <div
+                ref={setFloatingRef}
+                style={{
+                    ...floatingStyles,
+                    width: POPOVER_WIDTH,
+                    /* Root stacking: floatingStyles has no z-index; without this, chips (transform/z-index)
+                       in the row can paint above the portaled popover. */
+                    zIndex: 11_000,
+                }}
+            >
+                <motion.div
+                    className={s.popover}
+                    initial={{ opacity: 0, y: -6, scale: 0.96 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: -4, scale: 0.98 }}
+                    transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+                >
+                <div className={s.popoverHeader}>
+                    <span className={s.popoverName} style={{ color: agent.color }}>{agent.name}</span>
+                    <span className={s.popoverRole}>{agent.role}</span>
+                </div>
+                <div className={s.popoverBody}>
+                    {activity.activityLog.map((entry, i) => (
+                        <motion.div
+                            key={i}
+                            className={s.logEntry}
+                            initial={{ opacity: 0, x: -8 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ delay: i * 0.06, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+                        >
+                            <div className={s.logIcon}>
+                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                    <circle cx="6" cy="6" r="2" fill="currentColor" />
+                                </svg>
+                            </div>
+                            <div className={s.logContent}>
+                                <span className={s.logText}>{entry.text}</span>
+                                <div className={s.logMeta}>
+                                    <span className={s.logTime}>{entry.time}</span>
+                                    <span className={s.logStatus}>
+                                        <span
+                                            className={s.logStatusDot}
+                                            style={{ background: entry.status === "active" ? agent.color : "var(--color-success)" }}
+                                        />
+                                        {entry.status === "active" ? "active" : "done"}
+                                    </span>
+                                </div>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+                </motion.div>
+            </div>
+        );
+    },
+);
+
 /* ══════════════════════════════════════════════
    Main AgentThinking component
    ══════════════════════════════════════════════ */
@@ -242,6 +294,8 @@ export function AgentThinking({ agents, title = "Agent Activity", className }: A
     const [activities, setActivities] = useState<Record<string, AgentActivity>>({});
     const [openPopover, setOpenPopover] = useState<string | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
+    const popoverPortalRef = useRef<HTMLDivElement>(null);
+    const chipAnchorRefs = useRef<Record<string, HTMLDivElement | null>>({});
 
     /* ── Initialize activities with rotating demo states ── */
     useEffect(() => {
@@ -305,12 +359,13 @@ export function AgentThinking({ agents, title = "Agent Activity", className }: A
         return () => clearInterval(interval);
     }, [agents]);
 
-    /* ── Close popover on outside click ── */
+    /* ── Close popover on outside click (chip container + portaled popover) ── */
     useEffect(() => {
         function handleClick(e: MouseEvent) {
-            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-                setOpenPopover(null);
-            }
+            const t = e.target as Node;
+            if (containerRef.current?.contains(t)) return;
+            if (popoverPortalRef.current?.contains(t)) return;
+            setOpenPopover(null);
         }
         document.addEventListener("mousedown", handleClick);
         return () => document.removeEventListener("mousedown", handleClick);
@@ -324,6 +379,10 @@ export function AgentThinking({ agents, title = "Agent Activity", className }: A
         a => a.state === "active" || a.state === "thinking"
     ).length;
 
+    const openAgent = openPopover ? agents.find(a => a.id === openPopover) : undefined;
+    const openActivity = openPopover ? activities[openPopover] : undefined;
+    const anchorEl = openPopover ? chipAnchorRefs.current[openPopover] ?? null : null;
+
     return (
         <div className={cn(s.container, className)} ref={containerRef}>
             <div className={s.headerBar}>
@@ -340,13 +399,29 @@ export function AgentThinking({ agents, title = "Agent Activity", className }: A
                 {agents.map(agent => (
                     <AgentChip
                         key={agent.id}
+                        ref={(el) => {
+                            chipAnchorRefs.current[agent.id] = el;
+                        }}
                         agent={agent}
                         activity={activities[agent.id] ?? { state: "idle", activityLog: [] }}
-                        isPopoverOpen={openPopover === agent.id}
                         onTogglePopover={() => togglePopover(agent.id)}
                     />
                 ))}
             </div>
+            {typeof document !== "undefined" && createPortal(
+                <AnimatePresence>
+                    {openPopover && openAgent && openActivity && (
+                        <AgentPopoverContent
+                            key={openPopover}
+                            ref={popoverPortalRef}
+                            agent={openAgent}
+                            activity={openActivity}
+                            anchorEl={anchorEl}
+                        />
+                    )}
+                </AnimatePresence>,
+                document.body,
+            )}
         </div>
     );
 }

package/components/ui/AssetAllocation/AssetAllocation.module.css

@@ -0,0 +1,119 @@
+/* ============================================
+   AssetAllocation — Widget / Medium / 20
+   Pie chart with central amount + legend. Surface uses system tokens; per-
+   slice colors are passed by the component (default: 3 shades of accent lime).
+   ============================================ */
+
+.widget {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px;
+    width: 100%;
+    max-width: 348px;
+    aspect-ratio: 348 / 164;
+    border-radius: var(--radius-2xl);
+    border: 1px solid var(--color-border-standard);
+    overflow: hidden;
+    isolation: isolate;
+    box-shadow: var(--shadow-card-light);
+    background: var(--color-bg-card);
+}
+
+.title {
+    font-family: var(--font-body);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: -0.01em;
+    color: var(--color-text-primary);
+}
+
+.body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+    min-height: 0;
+}
+
+/* ── Pie chart ── */
+.pieWrap {
+    position: relative;
+    aspect-ratio: 1;
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.pie {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+}
+
+.pieHole {
+    fill: var(--color-bg-card);
+}
+
+.pieAmount {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    color: var(--color-text-primary);
+    pointer-events: none;
+}
+
+/* ── Legend ── */
+.legend {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+.legendRow {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+}
+
+.legendLabel {
+    font-family: var(--font-body);
+    font-size: 10px;
+    line-height: 12px;
+    color: var(--color-text-primary);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.legendPercent {
+    font-family: var(--font-body);
+    font-size: 10px;
+    line-height: 12px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+}
+
+@media (max-width: 480px) {
+    .widget {
+        max-width: 100%;
+    }
+}

package/components/ui/AssetAllocation/AssetAllocation.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import styles from "./AssetAllocation.module.css";
+
+export interface AssetAllocationSegment {
+    label: string;
+    /** Share percent of the pie (0–100). Segment percents should sum to 100. */
+    percent: number;
+    /** CSS color used for the pie slice and the legend bullet. */
+    color: string;
+}
+
+export interface AssetAllocationProps {
+    title?: string;
+    /** Total amount centered in the pie, e.g. "$13,420". */
+    amount?: string;
+    segments?: AssetAllocationSegment[];
+    className?: string;
+}
+
+const DEFAULT_SEGMENTS: AssetAllocationSegment[] = [
+    { label: "Crypto",       percent: 7.5,  color: "var(--color-lime-gradient)" },
+    { label: "Mutual Funds", percent: 25.5, color: "var(--color-lime-hover)" },
+    { label: "Cash",         percent: 67,   color: "var(--color-lime)" },
+];
+
+/** Generate an SVG path for a pie slice from `startPct` → `endPct` (0–100). */
+function pieSlicePath(cx: number, cy: number, r: number, startPct: number, endPct: number): string {
+    if (endPct - startPct >= 100) {
+        // Full circle — draw two half-arcs to avoid the degenerate same-point issue.
+        return `M ${cx + r} ${cy} A ${r} ${r} 0 1 1 ${cx - r} ${cy} A ${r} ${r} 0 1 1 ${cx + r} ${cy} Z`;
+    }
+    const startAngle = (startPct / 100) * 360 - 90;
+    const endAngle = (endPct / 100) * 360 - 90;
+    const startRad = (startAngle * Math.PI) / 180;
+    const endRad = (endAngle * Math.PI) / 180;
+    const x1 = cx + r * Math.cos(startRad);
+    const y1 = cy + r * Math.sin(startRad);
+    const x2 = cx + r * Math.cos(endRad);
+    const y2 = cy + r * Math.sin(endRad);
+    const largeArc = endPct - startPct > 50 ? 1 : 0;
+    return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+}
+
+export function AssetAllocation({
+    title = "Asset Class Allocation",
+    amount = "$13,420",
+    segments = DEFAULT_SEGMENTS,
+    className,
+}: AssetAllocationProps) {
+    const total = Math.max(1, segments.reduce((sum, s) => sum + s.percent, 0));
+    let runningPct = 0;
+    const slices = segments.map((s) => {
+        const startPct = runningPct;
+        const endPct = runningPct + (s.percent / total) * 100;
+        runningPct = endPct;
+        return { ...s, path: pieSlicePath(50, 50, 44, startPct, endPct) };
+    });
+
+    return (
+        <div className={cn(styles.widget, className)}>
+            <span className={styles.title}>{title}</span>
+
+            <div className={styles.body}>
+                <div className={styles.pieWrap}>
+                    <svg viewBox="0 0 100 100" className={styles.pie} aria-hidden="true">
+                        {slices.map((s, i) => (
+                            <path key={i} d={s.path} fill={s.color} />
+                        ))}
+                        {/* Larger hole = thinner visible ring + more room for the central amount. */}
+                        <circle cx="50" cy="50" r="34" className={styles.pieHole} />
+                    </svg>
+                    <span className={styles.pieAmount}>{amount}</span>
+                </div>
+
+                <ul className={styles.legend}>
+                    {segments.map((s, i) => (
+                        <li key={i} className={styles.legendRow}>
+                            <span className={styles.legendLabel}>{s.label}</span>
+                            <span className={styles.legendPercent}>{s.percent}%</span>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+}