klun-ui 0.1.0

package/dist/templates/index.js

@@ -0,0 +1,1120 @@
+import { Badge, Button, SegmentedControl, Card, Tabs, ProgressBar, Input, Select, Switch, Divider, AvatarGroup, HorizontalFilter, ContentLabel, Chip, Alert, Accordion, Label, Avatar, Table, ImageUpload, SelectMenu, Textarea, CharacterCounter } from '../chunk-XDAR7UMF.js';
+import '../chunk-T225J6LV.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Sidebar({ active, onNavigate, user }) {
+  const main = [
+    { id: "overview", label: "Overview", icon: "ri-dashboard-line" },
+    { id: "transactions", label: "Transactions", icon: "ri-arrow-left-right-line", badge: "24" },
+    { id: "cards", label: "Cards", icon: "ri-bank-card-line" },
+    { id: "analytics", label: "Analytics", icon: "ri-bar-chart-2-line" },
+    { id: "invoices", label: "Invoices", icon: "ri-bill-line" }
+  ];
+  const other = [
+    { id: "settings", label: "Settings", icon: "ri-settings-2-line" },
+    { id: "support", label: "Support", icon: "ri-headphone-line" }
+  ];
+  const Item = ({ it }) => {
+    const on = active === it.id;
+    return /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(it.id), style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      width: "100%",
+      height: 38,
+      padding: "0 12px",
+      border: "none",
+      borderRadius: "var(--klun-radius-lg)",
+      cursor: "pointer",
+      textAlign: "left",
+      background: on ? "var(--klun-bg-white-0)" : "transparent",
+      boxShadow: on ? "var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200)" : "none",
+      color: on ? "var(--klun-text-strong-950)" : "var(--klun-text-sub-600)",
+      font: "var(--klun-text-label-sm)"
+    }, children: [
+      /* @__PURE__ */ jsx("i", { className: it.icon, style: { fontSize: 20, color: on ? "var(--klun-primary-base)" : "var(--klun-icon-sub-600)" } }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: it.label }),
+      it.badge ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", padding: "1px 6px", borderRadius: "var(--klun-radius-pill)", background: "var(--klun-bg-weak-50)", color: "var(--klun-text-sub-600)" }, children: it.badge }) : null
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("aside", { style: { width: 272, flexShrink: 0, height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", padding: 20, background: "var(--klun-bg-weak-50)", borderRight: "1px solid var(--klun-stroke-soft-200)" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "4px 8px 18px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 36, height: 36, borderRadius: "var(--klun-radius-lg)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("i", { className: "ri-shapes-line", style: { fontSize: 20 } }) }),
+      /* @__PURE__ */ jsxs("div", { style: { lineHeight: 1.1 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Apex Finance" }),
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "Workspace" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("i", { className: "ri-search-line", style: { position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 18, color: "var(--klun-icon-soft-400)" } }),
+      /* @__PURE__ */ jsx("input", { placeholder: "Search", style: { width: "100%", boxSizing: "border-box", height: 36, padding: "0 12px 0 36px", borderRadius: "var(--klun-radius-lg)", border: "none", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-strong-950)", outline: "none" } })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-subheading-2xs)", letterSpacing: "var(--klun-subheading-2xs-tracking)", textTransform: "uppercase", color: "var(--klun-text-soft-400)", padding: "0 12px 8px" }, children: "Main" }),
+    /* @__PURE__ */ jsx("nav", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: main.map((it) => /* @__PURE__ */ jsx(Item, { it }, it.id)) }),
+    /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-subheading-2xs)", letterSpacing: "var(--klun-subheading-2xs-tracking)", textTransform: "uppercase", color: "var(--klun-text-soft-400)", padding: "20px 12px 8px" }, children: "Other" }),
+    /* @__PURE__ */ jsx("nav", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: other.map((it) => /* @__PURE__ */ jsx(Item, { it }, it.id)) }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: 8, borderRadius: "var(--klun-radius-xl)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", background: "var(--klun-bg-white-0)" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { width: 36, height: 36, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-state-feature-lighter)", color: "var(--klun-state-feature-base)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--klun-text-label-sm)", flexShrink: 0 }, children: user.initials }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, lineHeight: 1.2 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: user.name }),
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx("i", { className: "ri-expand-up-down-line", style: { fontSize: 18, color: "var(--klun-icon-soft-400)" } })
+    ] })
+  ] });
+}
+function TopBar({ title, subtitle }) {
+  return /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 16, padding: "20px 32px", borderBottom: "1px solid var(--klun-stroke-soft-200)", background: "var(--klun-bg-white-0)" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: title }),
+        /* @__PURE__ */ jsx(Badge, { color: "gray", size: "small", children: "Live" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "2px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsx("i", { className: "ri-notification-3-line" }) }),
+    /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsx("i", { className: "ri-calendar-line" }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-add-line" }), children: "New transfer" })
+  ] });
+}
+function OverviewScreen() {
+  const [range, setRange] = useState("month");
+  const [tab, setTab] = useState("all");
+  const stats = [
+    { label: "Total balance", value: "$84,920.50", delta: "+12.4%", up: true, icon: "ri-wallet-3-line", tint: "feature" },
+    { label: "Income", value: "$24,300.00", delta: "+8.1%", up: true, icon: "ri-arrow-down-line", tint: "success" },
+    { label: "Expenses", value: "$11,240.80", delta: "-3.2%", up: false, icon: "ri-arrow-up-line", tint: "warning" },
+    { label: "Savings", value: "$13,059.20", delta: "+5.7%", up: true, icon: "ri-safe-2-line", tint: "information" }
+  ];
+  const tx = [
+    { name: "Figma", sub: "Subscription", amt: "-$45.00", date: "Today, 10:24", status: "Completed", color: "green", icon: "ri-pencil-ruler-2-line", bg: "var(--klun-state-feature-lighter)", fg: "var(--klun-state-feature-base)" },
+    { name: "Stripe payout", sub: "Income", amt: "+$2,400.00", date: "Today, 08:10", status: "Completed", color: "green", icon: "ri-bank-line", bg: "var(--klun-state-success-lighter)", fg: "var(--klun-state-success-base)" },
+    { name: "AWS", sub: "Infrastructure", amt: "-$312.40", date: "Yesterday", status: "Pending", color: "orange", icon: "ri-cloud-line", bg: "var(--klun-state-warning-lighter)", fg: "var(--klun-state-warning-base)" },
+    { name: "Linear", sub: "Subscription", amt: "-$96.00", date: "Mar 12", status: "Completed", color: "green", icon: "ri-flow-chart", bg: "var(--klun-state-information-lighter)", fg: "var(--klun-state-information-base)" },
+    { name: "Refund \xB7 Notion", sub: "Income", amt: "+$120.00", date: "Mar 11", status: "Failed", color: "red", icon: "ri-file-text-line", bg: "var(--klun-bg-weak-50)", fg: "var(--klun-text-sub-600)" }
+  ];
+  const budget = [
+    ["Housing", 38, "feature"],
+    ["Food", 24, "success"],
+    ["Transport", 18, "warning"]
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 32, display: "flex", flexDirection: "column", gap: 24 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
+      /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-download-2-line" }), children: "Export" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: stats.map((s) => /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 18, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", background: `var(--klun-state-${s.tint}-lighter)`, color: `var(--klun-state-${s.tint}-base)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }, children: /* @__PURE__ */ jsx("i", { className: s.icon }) }),
+        /* @__PURE__ */ jsx(Badge, { color: s.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: s.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: s.delta })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: 16, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: s.label }),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: s.value })
+    ] }, s.label)) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 16, alignItems: "start" }, children: [
+      /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 0, children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: "16px 20px", borderBottom: "1px solid var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Recent transactions" }),
+          /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "ghost", size: "xsmall", trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line" }), children: "View all" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsx(Tabs, { value: tab, onChange: setTab, items: [{ value: "all", label: "All" }, { value: "income", label: "Income" }, { value: "expense", label: "Expenses" }] }) }),
+        /* @__PURE__ */ jsx("div", { children: tx.map((t, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderTop: i ? "1px solid var(--klun-stroke-soft-200)" : "none" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 38, height: 38, borderRadius: "var(--klun-radius-lg)", background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, flexShrink: 0 }, children: /* @__PURE__ */ jsx("i", { className: t.icon }) }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: t.name }),
+            /* @__PURE__ */ jsxs("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: [
+              t.sub,
+              " \xB7 ",
+              t.date
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { color: t.color, variant: "light", size: "small", children: t.status }),
+          /* @__PURE__ */ jsx("div", { style: { width: 92, textAlign: "right", font: "var(--klun-text-label-sm)", color: t.amt[0] === "+" ? "var(--klun-state-success-base)" : "var(--klun-text-strong-950)" }, children: t.amt })
+        ] }, i)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsxs(Card, { variant: "shadow", padding: 20, style: { background: "var(--klun-bg-strong-950)" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--klun-static-static-white)" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", opacity: 0.7 }, children: "Virtual card" }),
+            /* @__PURE__ */ jsx("i", { className: "ri-visa-line", style: { fontSize: 24 } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { marginTop: 28, font: "var(--klun-text-label-lg)", letterSpacing: "0.12em", color: "var(--klun-static-static-white)" }, children: "4218\xA0\xA0\u2022\u2022\u2022\u2022\xA0\xA0\u2022\u2022\u2022\u2022\xA0\xA09042" }),
+          /* @__PURE__ */ jsxs("div", { style: { marginTop: 16, display: "flex", justifyContent: "space-between", color: "var(--klun-static-static-white)", opacity: 0.8, font: "var(--klun-text-paragraph-xs)" }, children: [
+            /* @__PURE__ */ jsx("span", { children: "Arthur Taylor" }),
+            /* @__PURE__ */ jsx("span", { children: "09 / 28" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 20, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Monthly budget" }),
+            /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "$11,240 / $16,000" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx(ProgressBar, { value: 70 }) }),
+          /* @__PURE__ */ jsx("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }, children: budget.map(([l, p, c]) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-state-${c}-base)` } }),
+            /* @__PURE__ */ jsx("span", { style: { flex: 1, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: l }),
+            /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
+              p,
+              "%"
+            ] })
+          ] }, l)) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SettingsScreen() {
+  const [n, setN] = useState(true);
+  const [m, setM] = useState(false);
+  const Field = ({ label, children, hint, required }) => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "220px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--klun-stroke-soft-200)" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { required, children: label }),
+      hint ? /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: hint }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { maxWidth: 420 }, children })
+  ] });
+  return /* @__PURE__ */ jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 24, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { width: 64, height: 64, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-state-feature-lighter)", color: "var(--klun-state-feature-base)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--klun-text-title-h5)" }, children: "AT" }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Arthur Taylor" }),
+          /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Verified" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "arthur@alignui.com" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-upload-2-line" }), children: "Change photo" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: "Arthur Taylor" }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Email address", required: true, hint: "Used for sign-in and receipts.", children: /* @__PURE__ */ jsx(Input, { type: "email", defaultValue: "arthur@alignui.com", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-mail-line" }) }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "finance", children: [
+        /* @__PURE__ */ jsx("option", { value: "finance", children: "Finance lead" }),
+        /* @__PURE__ */ jsx("option", { value: "admin", children: "Administrator" }),
+        /* @__PURE__ */ jsx("option", { value: "member", children: "Member" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Notifications", hint: "How we reach you.", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+        /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
+          /* @__PURE__ */ jsx(Switch, { checked: n, onChange: setN }),
+          " Email notifications"
+        ] }),
+        /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
+          /* @__PURE__ */ jsx(Switch, { checked: m, onChange: setM }),
+          " Marketing updates"
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, { style: { margin: "8px 0 20px" } }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Save changes" })
+    ] })
+  ] }) });
+}
+var PAGES = {
+  overview: { title: "Overview", subtitle: "Your money at a glance, March 2026.", render: () => /* @__PURE__ */ jsx(OverviewScreen, {}) },
+  settings: { title: "Settings", subtitle: "Manage your profile and preferences.", render: () => /* @__PURE__ */ jsx(SettingsScreen, {}) }
+};
+function DashboardTemplate() {
+  const [active, setActive] = useState("overview");
+  const page = PAGES[active] ?? {
+    title: active[0].toUpperCase() + active.slice(1),
+    subtitle: "Coming soon in this demo.",
+    render: () => /* @__PURE__ */ jsxs("div", { style: { padding: 64, textAlign: "center", color: "var(--klun-text-soft-400)", font: "var(--klun-text-paragraph-lg)" }, children: [
+      /* @__PURE__ */ jsx("i", { className: "ri-inbox-line", style: { fontSize: 40, display: "block", marginBottom: 12 } }),
+      "This screen isn't part of the demo \u2014 try Overview or Settings."
+    ] })
+  };
+  const user = { name: "Arthur Taylor", email: "arthur@alignui.com", initials: "AT" };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100%" }, children: [
+    /* @__PURE__ */ jsx(Sidebar, { active, onNavigate: setActive, user }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx(TopBar, { title: page.title, subtitle: page.subtitle }),
+      /* @__PURE__ */ jsx("main", { style: { flex: 1, overflow: "auto", background: "var(--klun-bg-weak-50)" }, children: page.render() })
+    ] })
+  ] });
+}
+function AISidebar({ conversations, activeId, onSelect, onNew, user }) {
+  const groups = [
+    { label: "Today", items: conversations.filter((c) => c.group === "today") },
+    { label: "Previous 7 days", items: conversations.filter((c) => c.group === "week") }
+  ];
+  return /* @__PURE__ */ jsxs("aside", { style: { width: 280, flexShrink: 0, height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", padding: 16, background: "var(--klun-bg-weak-50)", borderRight: "1px solid var(--klun-stroke-soft-200)" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "4px 6px 16px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-md)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("i", { className: "ri-sparkling-2-fill", style: { fontSize: 18 } }) }),
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Klun AI" })
+    ] }),
+    /* @__PURE__ */ jsxs("button", { onClick: onNew, style: { display: "flex", alignItems: "center", gap: 8, width: "100%", height: 40, padding: "0 12px", marginBottom: 16, border: "none", borderRadius: "var(--klun-radius-lg)", cursor: "pointer", background: "var(--klun-primary-base)", color: "var(--klun-static-static-white)", font: "var(--klun-text-label-sm)" }, children: [
+      /* @__PURE__ */ jsx("i", { className: "ri-add-line", style: { fontSize: 20 } }),
+      " New chat"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("i", { className: "ri-search-line", style: { position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 18, color: "var(--klun-icon-soft-400)" } }),
+      /* @__PURE__ */ jsx("input", { placeholder: "Search chats", style: { width: "100%", boxSizing: "border-box", height: 36, padding: "0 12px 0 36px", borderRadius: "var(--klun-radius-lg)", border: "none", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-strong-950)", outline: "none" } })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", display: "flex", flexDirection: "column", gap: 14 }, children: groups.map((g) => g.items.length ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-subheading-2xs)", letterSpacing: "var(--klun-subheading-2xs-tracking)", textTransform: "uppercase", color: "var(--klun-text-soft-400)", padding: "0 8px 6px" }, children: g.label }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: g.items.map((c) => {
+        const on = c.id === activeId;
+        return /* @__PURE__ */ jsxs("button", { onClick: () => onSelect(c.id), style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          width: "100%",
+          height: 36,
+          padding: "0 10px",
+          border: "none",
+          borderRadius: "var(--klun-radius-md)",
+          cursor: "pointer",
+          textAlign: "left",
+          background: on ? "var(--klun-bg-white-0)" : "transparent",
+          boxShadow: on ? "var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200)" : "none",
+          color: on ? "var(--klun-text-strong-950)" : "var(--klun-text-sub-600)",
+          font: "var(--klun-text-label-sm)"
+        }, children: [
+          /* @__PURE__ */ jsx("i", { className: "ri-chat-1-line", style: { fontSize: 18, color: "var(--klun-icon-soft-400)", flexShrink: 0 } }),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: c.title })
+        ] }, c.id);
+      }) })
+    ] }, g.label) : null) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: 8, marginTop: 8, borderRadius: "var(--klun-radius-xl)", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-state-feature-lighter)", color: "var(--klun-state-feature-base)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--klun-text-label-xs)", flexShrink: 0 }, children: user.initials }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, lineHeight: 1.2 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: user.name }),
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "Free plan" })
+      ] }),
+      /* @__PURE__ */ jsx("i", { className: "ri-settings-3-line", style: { fontSize: 18, color: "var(--klun-icon-soft-400)" } })
+    ] })
+  ] });
+}
+function Bubble({ from = "them", avatar, children }) {
+  const me = from === "me";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: me ? "row-reverse" : "row", gap: 10, alignItems: "flex-end" }, children: [
+    avatar ? /* @__PURE__ */ jsx("span", { style: { flexShrink: 0 }, children: avatar }) : null,
+    /* @__PURE__ */ jsx("div", { style: { maxWidth: "76%", display: "flex", flexDirection: "column", gap: 4, alignItems: me ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsx("div", { style: { padding: "10px 14px", font: "var(--klun-text-paragraph-sm)", borderRadius: me ? "var(--klun-radius-2xl) var(--klun-radius-2xl) var(--klun-radius-sm) var(--klun-radius-2xl)" : "var(--klun-radius-2xl) var(--klun-radius-2xl) var(--klun-radius-2xl) var(--klun-radius-sm)", background: me ? "var(--klun-primary-base)" : "var(--klun-bg-weak-50)", color: me ? "var(--klun-static-static-white)" : "var(--klun-text-strong-950)" }, children }) })
+  ] });
+}
+function AIChatView({ messages, busy, userInitials, onSuggest }) {
+  const endRef = useRef(null);
+  useEffect(() => {
+    endRef.current?.scrollTo?.(0, endRef.current.scrollHeight);
+  }, [messages, busy]);
+  const suggestions = [
+    { icon: "ri-file-list-3-line", text: "Summarize my unread invoices" },
+    { icon: "ri-line-chart-line", text: "Compare Q1 and Q2 revenue" },
+    { icon: "ri-mail-send-line", text: "Draft a follow-up email to a client" },
+    { icon: "ri-calendar-todo-line", text: "Plan my week around 3 deadlines" }
+  ];
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 32, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 56, height: 56, borderRadius: "var(--klun-radius-2xl)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28, marginBottom: 20 }, children: /* @__PURE__ */ jsx("i", { className: "ri-sparkling-2-fill" }) }),
+      /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "How can I help, Arthur?" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 28px", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)" }, children: "Ask anything, or start from a suggestion below." }),
+      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, maxWidth: 540, width: "100%" }, children: suggestions.map((s) => /* @__PURE__ */ jsxs("button", { onClick: () => onSuggest(s.text), style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "14px 16px",
+        textAlign: "left",
+        border: "none",
+        borderRadius: "var(--klun-radius-xl)",
+        cursor: "pointer",
+        background: "var(--klun-bg-white-0)",
+        boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)",
+        font: "var(--klun-text-label-sm)",
+        color: "var(--klun-text-strong-950)"
+      }, children: [
+        /* @__PURE__ */ jsx("i", { className: s.icon, style: { fontSize: 20, color: "var(--klun-primary-base)" } }),
+        /* @__PURE__ */ jsx("span", { children: s.text })
+      ] }, s.text)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: endRef, style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsxs("div", { style: { maxWidth: 720, margin: "0 auto", padding: "24px 24px 8px", display: "flex", flexDirection: "column", gap: 20 }, children: [
+    messages.map((m, i) => /* @__PURE__ */ jsx(
+      Bubble,
+      {
+        from: m.from,
+        avatar: m.from === "me" ? /* @__PURE__ */ jsx(Avatar, { size: "32", initials: userInitials, color: "purple" }) : /* @__PURE__ */ jsx("span", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: /* @__PURE__ */ jsx("i", { className: "ri-sparkling-2-fill" }) }),
+        children: m.text
+      },
+      i
+    )),
+    busy ? /* @__PURE__ */ jsx(Bubble, { from: "them", avatar: /* @__PURE__ */ jsx("span", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: /* @__PURE__ */ jsx("i", { className: "ri-sparkling-2-fill" }) }), children: /* @__PURE__ */ jsxs("span", { className: "ai-typing", children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {})
+    ] }) }) : null
+  ] }) });
+}
+function AIComposer({ onSend, busy }) {
+  const [text, setText] = useState("");
+  const [model, setModel] = useState("Klun-4o");
+  const taRef = useRef(null);
+  const send = () => {
+    const t = text.trim();
+    if (!t || busy) return;
+    onSend(t);
+    setText("");
+    if (taRef.current) taRef.current.style.height = "auto";
+  };
+  const grow = (e) => {
+    setText(e.target.value);
+    e.target.style.height = "auto";
+    e.target.style.height = Math.min(e.target.scrollHeight, 160) + "px";
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "0 24px 20px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { maxWidth: 720, margin: "0 auto", borderRadius: "var(--klun-radius-3xl)", background: "var(--klun-bg-white-0)", boxShadow: "var(--klun-shadow-md), inset 0 0 0 1px var(--klun-stroke-soft-200)", padding: 12 }, children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: taRef,
+          value: text,
+          onChange: grow,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              send();
+            }
+          },
+          placeholder: "Ask Klun AI anything\u2026",
+          rows: 1,
+          style: { width: "100%", boxSizing: "border-box", border: "none", outline: "none", resize: "none", background: "transparent", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-strong-950)", padding: "6px 6px 10px", maxHeight: 160 }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx("button", { title: "Attach file", style: iconBtn, children: /* @__PURE__ */ jsx("i", { className: "ri-attachment-2" }) }),
+        /* @__PURE__ */ jsx("button", { title: "Add image", style: iconBtn, children: /* @__PURE__ */ jsx("i", { className: "ri-image-line" }) }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, height: 32, padding: "0 8px 0 10px", borderRadius: "var(--klun-radius-md)", background: "var(--klun-bg-weak-50)", font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx("i", { className: "ri-cpu-line", style: { fontSize: 16, color: "var(--klun-icon-soft-400)" } }),
+          /* @__PURE__ */ jsxs("select", { value: model, onChange: (e) => setModel(e.target.value), style: { appearance: "none", WebkitAppearance: "none", border: "none", outline: "none", background: "transparent", font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx("option", { children: "Klun-4o" }),
+            /* @__PURE__ */ jsx("option", { children: "Klun-4 Turbo" }),
+            /* @__PURE__ */ jsx("option", { children: "Klun-mini" })
+          ] }),
+          /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line", style: { fontSize: 16, color: "var(--klun-icon-soft-400)" } })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsx("button", { onClick: send, disabled: !text.trim() || busy, title: "Send", style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 36,
+          height: 36,
+          border: "none",
+          borderRadius: "var(--klun-radius-lg)",
+          cursor: text.trim() && !busy ? "pointer" : "not-allowed",
+          background: text.trim() && !busy ? "var(--klun-primary-base)" : "var(--klun-bg-soft-200)",
+          color: text.trim() && !busy ? "var(--klun-static-static-white)" : "var(--klun-text-soft-400)",
+          fontSize: 20
+        }, children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-up-line" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { maxWidth: 720, margin: "8px auto 0", textAlign: "center", font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "Klun AI can make mistakes. Check important info." })
+  ] });
+}
+var iconBtn = { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, border: "none", borderRadius: "var(--klun-radius-md)", background: "transparent", color: "var(--klun-icon-sub-600)", cursor: "pointer", fontSize: 18 };
+var REPLIES = [
+  "Here's a quick summary: you have 3 unread invoices totaling $4,512. Two are overdue \u2014 Apex Ltd ($2,400) and Northwind ($1,800).",
+  "Happy to help with that. Based on your data, Q2 revenue is up 12.4% over Q1, driven mainly by recurring subscriptions.",
+  "Done \u2014 I've drafted a friendly follow-up. Want me to adjust the tone or add a payment link?",
+  "Got it. I've blocked focus time around your 3 deadlines and left buffers for review. Shall I add them to your calendar?"
+];
+function AIAssistantTemplate() {
+  const seed = [
+    { id: "c1", group: "today", title: "Q2 revenue breakdown" },
+    { id: "c2", group: "today", title: "Follow-up email draft" },
+    { id: "c3", group: "week", title: "Invoice reminders" },
+    { id: "c4", group: "week", title: "Weekly planning" }
+  ];
+  const [convs] = useState(seed);
+  const [activeId, setActiveId] = useState("new");
+  const [threads, setThreads] = useState({ new: [] });
+  const [busy, setBusy] = useState(false);
+  const user = { name: "Arthur Taylor", initials: "AT" };
+  const messages = threads[activeId] || [];
+  const ask = (text) => {
+    setThreads((t) => ({ ...t, [activeId]: [...t[activeId] || [], { from: "me", text }] }));
+    setBusy(true);
+    setTimeout(() => {
+      const reply = REPLIES[Math.floor(Math.random() * REPLIES.length)];
+      setThreads((t) => ({ ...t, [activeId]: [...t[activeId] || [], { from: "them", text: reply }] }));
+      setBusy(false);
+    }, 1100);
+  };
+  const newChat = () => {
+    setActiveId("new");
+    setThreads((t) => ({ ...t, new: [] }));
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100%" }, children: [
+    /* @__PURE__ */ jsx(AISidebar, { conversations: convs, activeId, onSelect: (id) => {
+      setActiveId(id);
+      setThreads((t) => t[id] ? t : { ...t, [id]: [] });
+    }, onNew: newChat, user }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 24px", borderBottom: "1px solid var(--klun-stroke-soft-200)" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "New chat" }),
+        /* @__PURE__ */ jsx(Badge, { color: "purple", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-flashlight-fill" }), children: "Klun-4o" }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsx("i", { className: "ri-share-line" }) }),
+        /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsx("i", { className: "ri-more-2-fill" }) })
+      ] }),
+      /* @__PURE__ */ jsx(AIChatView, { messages, busy, userInitials: user.initials, onSuggest: ask }),
+      /* @__PURE__ */ jsx(AIComposer, { onSend: ask, busy })
+    ] })
+  ] });
+}
+function CryptoSidebar({ active, onNavigate }) {
+  const main = [
+    { id: "markets", label: "Markets", icon: "ri-line-chart-line" },
+    { id: "portfolio", label: "Portfolio", icon: "ri-pie-chart-2-line" },
+    { id: "trade", label: "Trade", icon: "ri-swap-line" },
+    { id: "wallet", label: "Wallet", icon: "ri-wallet-3-line" },
+    { id: "earn", label: "Earn", icon: "ri-funds-line", badge: "New" }
+  ];
+  const other = [
+    { id: "activity", label: "Activity", icon: "ri-history-line" },
+    { id: "settings", label: "Settings", icon: "ri-settings-2-line" }
+  ];
+  const Item = ({ it }) => {
+    const on = active === it.id;
+    return /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(it.id), style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      width: "100%",
+      height: 38,
+      padding: "0 12px",
+      border: "none",
+      borderRadius: "var(--klun-radius-lg)",
+      cursor: "pointer",
+      textAlign: "left",
+      background: on ? "var(--klun-bg-white-0)" : "transparent",
+      boxShadow: on ? "var(--klun-shadow-xs), inset 0 0 0 1px var(--klun-stroke-soft-200)" : "none",
+      color: on ? "var(--klun-text-strong-950)" : "var(--klun-text-sub-600)",
+      font: "var(--klun-text-label-sm)"
+    }, children: [
+      /* @__PURE__ */ jsx("i", { className: it.icon, style: { fontSize: 20, color: on ? "var(--klun-primary-base)" : "var(--klun-icon-sub-600)" } }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: it.label }),
+      it.badge ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-subheading-2xs)", padding: "1px 6px", borderRadius: "var(--klun-radius-pill)", background: "var(--klun-state-success-lighter)", color: "var(--klun-state-success-base)" }, children: it.badge }) : null
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("aside", { style: { width: 256, flexShrink: 0, height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", padding: 18, background: "var(--klun-bg-weak-50)", borderRight: "1px solid var(--klun-stroke-soft-200)" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "4px 8px 18px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 34, height: 34, borderRadius: "var(--klun-radius-lg)", background: "var(--klun-primary-base)", color: "var(--klun-static-static-white)", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("i", { className: "ri-currency-line", style: { fontSize: 20 } }) }),
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Apex Exchange" })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: main.map((it) => /* @__PURE__ */ jsx(Item, { it }, it.id)) }),
+    /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-subheading-2xs)", letterSpacing: "var(--klun-subheading-2xs-tracking)", textTransform: "uppercase", color: "var(--klun-text-soft-400)", padding: "20px 12px 8px" }, children: "Account" }),
+    /* @__PURE__ */ jsx("nav", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: other.map((it) => /* @__PURE__ */ jsx(Item, { it }, it.id)) }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ jsxs("div", { style: { borderRadius: "var(--klun-radius-xl)", background: "var(--klun-bg-strong-950)", padding: 16, color: "var(--klun-static-static-white)" }, children: [
+      /* @__PURE__ */ jsx("i", { className: "ri-vip-crown-2-line", style: { fontSize: 22 } }),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: 8, font: "var(--klun-text-label-sm)" }, children: "Upgrade to Pro" }),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-paragraph-xs)", opacity: 0.7 }, children: "0% maker fees & advanced charts." })
+    ] })
+  ] });
+}
+function Stat({ label, value, delta, trend = "up", tint = "feature", icon }) {
+  const dc = trend === "up" ? "success" : "error";
+  return /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 18, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, background: `var(--klun-state-${tint}-lighter)`, color: `var(--klun-state-${tint}-base)` }, children: icon }),
+      delta != null ? /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, height: 20, padding: "0 6px", borderRadius: "var(--klun-radius-capsule)", font: "var(--klun-text-label-xs)", background: `var(--klun-state-${dc}-lighter)`, color: `var(--klun-state-${dc}-base)` }, children: [
+        /* @__PURE__ */ jsx("i", { className: trend === "up" ? "ri-arrow-up-line" : "ri-arrow-down-line", style: { fontSize: 14 } }),
+        delta
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 16, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: value })
+  ] });
+}
+function coinStyle(sym) {
+  const map = {
+    BTC: ["#F7931A22", "#F7931A"],
+    ETH: ["#627EEA22", "#627EEA"],
+    SOL: ["#9945FF22", "#9945FF"],
+    XRP: ["#23292F22", "#23292F"],
+    BNB: ["#F3BA2F22", "#C99A2C"],
+    USDC: ["#2775CA22", "#2775CA"],
+    AVAX: ["#E8414222", "#E84142"],
+    ADA: ["#0033AD22", "#0033AD"]
+  };
+  return map[sym] || ["var(--klun-bg-weak-50)", "var(--klun-text-sub-600)"];
+}
+function CoinIcon({ sym, size = 32 }) {
+  const [bg, fg] = coinStyle(sym);
+  return /* @__PURE__ */ jsx("span", { style: { width: size, height: size, borderRadius: "var(--klun-radius-pill)", background: bg, color: fg, display: "inline-flex", alignItems: "center", justifyContent: "center", font: "var(--klun-text-label-xs)", fontWeight: 600, flexShrink: 0 }, children: sym.slice(0, 3) });
+}
+function Spark({ up, w = 96, h = 32 }) {
+  const pts = up ? [10, 12, 8, 14, 11, 16, 13, 20, 18, 24, 22, 28] : [26, 22, 24, 18, 20, 16, 18, 12, 14, 10, 12, 8];
+  const step = w / (pts.length - 1);
+  const d = pts.map((p, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${(h - p).toFixed(1)}`).join(" ");
+  const c = up ? "var(--klun-state-success-base)" : "var(--klun-state-error-base)";
+  return /* @__PURE__ */ jsx("svg", { width: w, height: h, children: /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: c, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function MarketsScreen() {
+  const [range, setRange] = useState("1w");
+  const holdings = [
+    { sym: "BTC", name: "Bitcoin", price: "$64,210", amount: "0.842 BTC", value: "$54,065", chg: "+2.4%", up: true },
+    { sym: "ETH", name: "Ethereum", price: "$3,180", amount: "6.20 ETH", value: "$19,716", chg: "+1.3%", up: true },
+    { sym: "SOL", name: "Solana", price: "$142.50", amount: "84.0 SOL", value: "$11,970", chg: "-2.3%", up: false },
+    { sym: "XRP", name: "XRP", price: "$0.62", amount: "9,400 XRP", value: "$5,828", chg: "-0.2%", up: false },
+    { sym: "BNB", name: "BNB", price: "$590.10", amount: "12.0 BNB", value: "$7,081", chg: "-1.5%", up: false }
+  ];
+  const columns = [
+    { key: "name", header: "Asset", render: (r) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+      /* @__PURE__ */ jsx(CoinIcon, { sym: r.sym }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.name }),
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: r.sym })
+      ] })
+    ] }) },
+    { key: "price", header: "Price", render: (r) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)" }, children: r.price }) },
+    { key: "amount", header: "Holdings", render: (r) => /* @__PURE__ */ jsx("span", { style: { color: "var(--klun-text-sub-600)" }, children: r.amount }) },
+    { key: "chg", header: "24h", render: (r) => /* @__PURE__ */ jsx(Badge, { color: r.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: r.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: r.chg }) },
+    { key: "value", header: "Value", align: "right", render: (r) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.value }) },
+    { key: "spark", header: "", width: 110, align: "right", render: (r) => /* @__PURE__ */ jsx(Spark, { up: r.up }) }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 28, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 16 }, children: /* @__PURE__ */ jsxs("div", { style: { gridColumn: "1 / -1", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: [
+      /* @__PURE__ */ jsx(Stat, { label: "Total balance", value: "$98,659.40", delta: "3.8%", trend: "up", tint: "feature", icon: /* @__PURE__ */ jsx("i", { className: "ri-wallet-3-line" }) }),
+      /* @__PURE__ */ jsx(Stat, { label: "24h P&L", value: "+$1,842.10", delta: "1.9%", trend: "up", tint: "success", icon: /* @__PURE__ */ jsx("i", { className: "ri-line-chart-line" }) }),
+      /* @__PURE__ */ jsx(Stat, { label: "Available", value: "$12,430.00", delta: "0.0%", trend: "up", tint: "information", icon: /* @__PURE__ */ jsx("i", { className: "ri-cash-line" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { style: { background: "var(--klun-bg-white-0)", borderRadius: "var(--klun-radius-2xl)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", padding: 20 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(CoinIcon, { sym: "BTC", size: 36 }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "$64,210.40" }),
+              /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-up-line" }), children: "2.4%" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Bitcoin \xB7 BTC/USD" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(SegmentedControl, { value: range, onChange: setRange, items: [{ value: "1d", label: "1D" }, { value: "1w", label: "1W" }, { value: "1m", label: "1M" }, { value: "1y", label: "1Y" }] })
+      ] }),
+      /* @__PURE__ */ jsx(AreaChart, {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { background: "var(--klun-bg-white-0)", borderRadius: "var(--klun-radius-2xl)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { padding: "16px 20px", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Your holdings" }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-add-line" }), children: "Buy crypto" })
+      ] }),
+      /* @__PURE__ */ jsx(Table, { columns, rows: holdings, getRowId: (r) => r.sym, style: { borderRadius: 0, boxShadow: "none", borderTop: "1px solid var(--klun-stroke-soft-200)" } })
+    ] })
+  ] });
+}
+function AreaChart() {
+  const pts = [40, 44, 38, 52, 48, 60, 55, 72, 68, 84, 78, 96, 90, 108, 118];
+  const w = 1e3, h = 160, max = 130;
+  const step = w / (pts.length - 1);
+  const line = pts.map((p, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${(h - p / max * h).toFixed(1)}`).join(" ");
+  const area = `${line} L${w},${h} L0,${h} Z`;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", style: { width: "100%", height: 160, display: "block" }, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "cryptoFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--klun-primary-base)", stopOpacity: "0.18" }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--klun-primary-base)", stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsx("path", { d: area, fill: "url(#cryptoFill)" }),
+    /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: "var(--klun-primary-base)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function CryptoTemplate() {
+  const [active, setActive] = useState("portfolio");
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100%" }, children: [
+    /* @__PURE__ */ jsx(CryptoSidebar, { active, onNavigate: setActive }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 16, padding: "16px 28px", borderBottom: "1px solid var(--klun-stroke-soft-200)", background: "var(--klun-bg-white-0)" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "Portfolio" }),
+          /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Markets open" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx("i", { className: "ri-search-line", style: { position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 18, color: "var(--klun-icon-soft-400)" } }),
+          /* @__PURE__ */ jsx("input", { placeholder: "Search assets", style: { width: 220, boxSizing: "border-box", height: 36, padding: "0 12px 0 36px", borderRadius: "var(--klun-radius-lg)", border: "none", background: "var(--klun-bg-weak-50)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-strong-950)", outline: "none" } })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsx("i", { className: "ri-notification-3-line" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-right-line" }), children: "Trade" })
+      ] }),
+      /* @__PURE__ */ jsx("main", { style: { flex: 1, overflow: "auto", background: "var(--klun-bg-weak-50)" }, children: /* @__PURE__ */ jsx(MarketsScreen, {}) })
+    ] })
+  ] });
+}
+function MarketingNav() {
+  const links = ["Product", "Solutions", "Pricing", "Customers", "Docs"];
+  return /* @__PURE__ */ jsx("header", { style: { position: "sticky", top: 0, zIndex: 20, background: "color-mix(in srgb, var(--klun-bg-white-0) 80%, transparent)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--klun-stroke-soft-200)" }, children: /* @__PURE__ */ jsxs("div", { style: { maxWidth: 1120, margin: "0 auto", display: "flex", alignItems: "center", gap: 24, padding: "14px 24px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-md)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("i", { className: "ri-shapes-line", style: { fontSize: 18 } }) }),
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Klun" })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { style: { display: "flex", gap: 4, flex: 1 }, children: links.map((l) => /* @__PURE__ */ jsx("a", { href: "#", style: { padding: "6px 12px", borderRadius: "var(--klun-radius-md)", font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: l }, l)) }),
+    /* @__PURE__ */ jsx("a", { href: "#", style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: "Sign in" }),
+    /* @__PURE__ */ jsx(Button, { variant: "neutral", size: "small", trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-line" }), children: "Start free" })
+  ] }) });
+}
+function Stat2({ label, value, delta, trend = "up", tint = "feature", icon }) {
+  const dc = trend === "up" ? "success" : "error";
+  return /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 18, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, background: `var(--klun-state-${tint}-lighter)`, color: `var(--klun-state-${tint}-base)` }, children: icon }),
+      delta != null ? /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, height: 20, padding: "0 6px", borderRadius: "var(--klun-radius-capsule)", font: "var(--klun-text-label-xs)", background: `var(--klun-state-${dc}-lighter)`, color: `var(--klun-state-${dc}-base)` }, children: [
+        /* @__PURE__ */ jsx("i", { className: trend === "up" ? "ri-arrow-up-line" : "ri-arrow-down-line", style: { fontSize: 14 } }),
+        delta
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 16, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: value })
+  ] });
+}
+function MarketingSections() {
+  const wrap = { maxWidth: 1120, margin: "0 auto", padding: "0 24px" };
+  const features = [
+    { icon: "ri-contrast-drop-line", t: "Semantic tokens", d: "Every color, radius and space is a named token that re-themes in one line." },
+    { icon: "ri-moon-clear-line", t: "Dark mode built-in", d: "Light and dark resolve automatically \u2014 no duplicate components." },
+    { icon: "ri-palette-line", t: "Four accent themes", d: "Blue, purple, orange or green. Switch with a single data attribute." },
+    { icon: "ri-puzzle-2-line", t: "50+ components", d: "Buttons to command menus, all composable and accessible." },
+    { icon: "ri-layout-grid-line", t: "Product templates", d: "Dashboards, AI chat and trading screens ready to fork." },
+    { icon: "ri-code-s-slash-line", t: "Figma to code", d: "Tokens and structure map straight to your codebase." }
+  ];
+  const tiers = [
+    { name: "Starter", price: "$0", note: "for solo makers", feats: ["Core tokens", "30 components", "Community support"], cta: "Get started", featured: false },
+    { name: "Pro", price: "$29", note: "per editor / month", feats: ["All 50+ components", "Product templates", "Dark mode & themes", "Priority support"], cta: "Start free trial", featured: true },
+    { name: "Team", price: "Custom", note: "for organizations", feats: ["Everything in Pro", "SSO & roles", "Design ops review", "SLA"], cta: "Contact sales", featured: false }
+  ];
+  const footerColumns = [
+    { h: "Product", l: ["Components", "Tokens", "Templates", "Changelog"] },
+    { h: "Company", l: ["About", "Careers", "Blog", "Contact"] },
+    { h: "Legal", l: ["Privacy", "Terms", "License"] }
+  ];
+  return /* @__PURE__ */ jsxs("main", { children: [
+    /* @__PURE__ */ jsxs("section", { style: { ...wrap, textAlign: "center", padding: "80px 24px 64px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { display: "inline-flex", marginBottom: 20 }, children: /* @__PURE__ */ jsx(Badge, { color: "purple", variant: "lighter", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-sparkling-2-fill" }), children: "Klun UI 2.0 is here" }) }),
+      /* @__PURE__ */ jsx("h1", { style: { margin: "0 auto", maxWidth: 760, font: "var(--klun-text-title-h1)", letterSpacing: "var(--klun-title-h1-tracking)", color: "var(--klun-text-strong-950)" }, children: "The design system that ships with you" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "20px auto 0", maxWidth: 560, font: "var(--klun-text-paragraph-lg)", color: "var(--klun-text-sub-600)" }, children: "Tokens, components and full product templates \u2014 themeable, dark-mode ready, and built to move from Figma to production without the redraw." }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
+        /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", size: "large", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-github-fill" }), children: "View on GitHub" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: 40, height: 280, borderRadius: "var(--klun-radius-3xl)", background: "linear-gradient(180deg, var(--klun-bg-weak-50), var(--klun-bg-white-0))", boxShadow: "var(--klun-shadow-lg), inset 0 0 0 1px var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--klun-text-disabled-300)" }, children: /* @__PURE__ */ jsx("i", { className: "ri-layout-masonry-line", style: { fontSize: 56 } }) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { style: { ...wrap, padding: "8px 24px 56px" }, children: [
+      /* @__PURE__ */ jsx("p", { style: { textAlign: "center", font: "var(--klun-text-subheading-xs)", letterSpacing: "var(--klun-subheading-xs-tracking)", textTransform: "uppercase", color: "var(--klun-text-soft-400)", marginBottom: 20 }, children: "Trusted by teams at" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 40, justifyContent: "center", alignItems: "center", color: "var(--klun-text-disabled-300)" }, children: ["ri-google-fill", "ri-microsoft-fill", "ri-slack-fill", "ri-notion-fill", "ri-figma-fill", "ri-amazon-fill"].map((i) => /* @__PURE__ */ jsx("i", { className: i, style: { fontSize: 30 } }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("section", { style: { ...wrap, padding: "16px 24px 64px" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: [
+      /* @__PURE__ */ jsx(Stat2, { label: "Components", value: "50+", delta: "2.0 release", trend: "up", tint: "feature", icon: /* @__PURE__ */ jsx("i", { className: "ri-puzzle-2-line" }) }),
+      /* @__PURE__ */ jsx(Stat2, { label: "Design tokens", value: "700+", delta: "9 collections", trend: "up", tint: "information", icon: /* @__PURE__ */ jsx("i", { className: "ri-palette-line" }) }),
+      /* @__PURE__ */ jsx(Stat2, { label: "Icons", value: "4,200+", delta: "line & fill", trend: "up", tint: "success", icon: /* @__PURE__ */ jsx("i", { className: "ri-shapes-line" }) }),
+      /* @__PURE__ */ jsx(Stat2, { label: "Themes", value: "4 + dark", delta: "instant", trend: "up", tint: "warning", icon: /* @__PURE__ */ jsx("i", { className: "ri-contrast-2-line" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("section", { style: { ...wrap, padding: "56px 24px" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: 560, margin: "0 auto 40px" }, children: [
+        /* @__PURE__ */ jsx("h2", { style: { margin: 0, font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Everything you need to design fast" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "12px 0 0", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)" }, children: "One coherent system from the smallest token to the full screen." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: features.map((f) => /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 24, children: [
+        /* @__PURE__ */ jsx("div", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", background: "var(--klun-primary-lighter)", color: "var(--klun-primary-base)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, marginBottom: 16 }, children: /* @__PURE__ */ jsx("i", { className: f.icon }) }),
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 6 }, children: f.t }),
+        /* @__PURE__ */ jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: f.d })
+      ] }, f.t)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { style: { ...wrap, padding: "56px 24px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 40 }, children: /* @__PURE__ */ jsx("h2", { style: { margin: 0, font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Simple, fair pricing" }) }),
+      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, alignItems: "start" }, children: tiers.map((p) => /* @__PURE__ */ jsxs("div", { style: {
+        borderRadius: "var(--klun-radius-3xl)",
+        padding: 28,
+        background: p.featured ? "var(--klun-bg-strong-950)" : "var(--klun-bg-white-0)",
+        color: p.featured ? "var(--klun-static-static-white)" : "var(--klun-text-strong-950)",
+        boxShadow: p.featured ? "var(--klun-shadow-lg)" : "inset 0 0 0 1px var(--klun-stroke-soft-200)"
+      }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)" }, children: p.name }),
+          p.featured ? /* @__PURE__ */ jsx(Badge, { color: "purple", variant: "filled", size: "small", children: "Popular" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: 16, display: "flex", alignItems: "baseline", gap: 6 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-title-h2)", letterSpacing: "var(--klun-title-h2-tracking)" }, children: p.price }),
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", opacity: 0.7 }, children: p.note })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { margin: "20px 0", display: "flex", flexDirection: "column", gap: 10 }, children: p.feats.map((f) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, font: "var(--klun-text-paragraph-sm)", opacity: p.featured ? 0.9 : 1 }, children: [
+          /* @__PURE__ */ jsx("i", { className: "ri-checkbox-circle-fill", style: { fontSize: 18, color: p.featured ? "var(--klun-static-static-white)" : "var(--klun-state-success-base)" } }),
+          f
+        ] }, f)) }),
+        /* @__PURE__ */ jsx("button", { style: {
+          width: "100%",
+          height: 44,
+          border: "none",
+          borderRadius: "var(--klun-radius-xl)",
+          cursor: "pointer",
+          font: "var(--klun-text-label-md)",
+          background: p.featured ? "var(--klun-static-static-white)" : "var(--klun-primary-base)",
+          color: p.featured ? "var(--klun-static-static-black)" : "var(--klun-static-static-white)"
+        }, children: p.cta })
+      ] }, p.name)) })
+    ] }),
+    /* @__PURE__ */ jsx("section", { style: { ...wrap, padding: "56px 24px" }, children: /* @__PURE__ */ jsxs(Card, { variant: "flat", padding: 40, style: { textAlign: "center", borderRadius: "var(--klun-radius-4xl)" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", gap: 4, color: "var(--klun-state-away-base)", marginBottom: 16 }, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx("i", { className: "ri-star-fill", style: { fontSize: 20 } }, i)) }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "0 auto", maxWidth: 680, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", fontFamily: "var(--klun-font-display)" }, children: "\u201CWe replaced three internal libraries with Klun UI and shipped our dashboard a month early. The token system alone paid for itself.\u201D" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 24 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "48", initials: "SW", color: "purple" }),
+        /* @__PURE__ */ jsxs("div", { style: { textAlign: "left" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Sophia Williams" }),
+          /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Head of Design, Northwind" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("section", { style: { maxWidth: 720, margin: "0 auto", padding: "56px 24px" }, children: [
+      /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 28px", textAlign: "center", font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Frequently asked" }),
+      /* @__PURE__ */ jsx(Accordion, { defaultOpen: "a", items: [
+        { id: "a", title: "Is Klun UI free to use?", content: "The Starter tier with core tokens and 30 components is free forever. Pro unlocks the full component set, templates and themes." },
+        { id: "b", title: "Does it work with my framework?", content: "Components ship as framework-agnostic patterns driven by CSS custom properties \u2014 drop the tokens into React, Vue, Svelte or plain HTML." },
+        { id: "c", title: "Can I customize the theme?", content: "Yes. Swap the accent (blue/purple/orange/green) and neutral ramp (gray/slate) with a single data attribute, or override any token." },
+        { id: "d", title: "Do you offer dark mode?", content: 'Dark mode is built in. Set data-theme="dark" and every component re-themes through its semantic tokens.' }
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("section", { style: { ...wrap, padding: "40px 24px 80px" }, children: /* @__PURE__ */ jsxs("div", { style: { borderRadius: "var(--klun-radius-4xl)", padding: "56px 24px", textAlign: "center", background: "var(--klun-bg-strong-950)", color: "var(--klun-static-static-white)" }, children: [
+      /* @__PURE__ */ jsx("h2", { style: { margin: 0, font: "var(--klun-text-title-h2)", letterSpacing: "var(--klun-title-h2-tracking)" }, children: "Start designing in harmony" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "12px auto 0", maxWidth: 480, font: "var(--klun-text-paragraph-lg)", opacity: 0.8 }, children: "Free to start. No credit card required." }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }, children: [
+        /* @__PURE__ */ jsx("button", { style: { height: 48, padding: "0 24px", border: "none", borderRadius: "var(--klun-radius-xl)", cursor: "pointer", font: "var(--klun-text-label-md)", background: "var(--klun-static-static-white)", color: "var(--klun-static-static-black)" }, children: "Start free" }),
+        /* @__PURE__ */ jsx("button", { style: { height: 48, padding: "0 24px", border: "none", borderRadius: "var(--klun-radius-xl)", cursor: "pointer", font: "var(--klun-text-label-md)", background: "var(--klun-alpha-white-alpha-16)", color: "var(--klun-static-static-white)" }, children: "Book a demo" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("footer", { style: { borderTop: "1px solid var(--klun-stroke-soft-200)" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { ...wrap, display: "flex", gap: 24, flexWrap: "wrap", justifyContent: "space-between", padding: "40px 24px" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { maxWidth: 260 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { width: 28, height: 28, borderRadius: "var(--klun-radius-md)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("i", { className: "ri-shapes-line", style: { fontSize: 16 } }) }),
+            /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Klun" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "The design system that ships with you." })
+        ] }),
+        footerColumns.map((c) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-subheading-xs)", letterSpacing: "var(--klun-subheading-xs-tracking)", textTransform: "uppercase", color: "var(--klun-text-soft-400)", marginBottom: 12 }, children: c.h }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: c.l.map((x) => /* @__PURE__ */ jsx("a", { href: "#", style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: x }, x)) })
+        ] }, c.h))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { ...wrap, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 24px", borderTop: "1px solid var(--klun-stroke-soft-200)" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "\xA9 2026 Klun. All rights reserved." }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 14, color: "var(--klun-icon-soft-400)" }, children: ["ri-twitter-x-fill", "ri-github-fill", "ri-linkedin-fill"].map((i) => /* @__PURE__ */ jsx("i", { className: i, style: { fontSize: 18 } }, i)) })
+      ] })
+    ] })
+  ] });
+}
+function MarketingTemplate() {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(MarketingNav, {}),
+    /* @__PURE__ */ jsx(MarketingSections, {})
+  ] });
+}
+var DOW = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var CAT = {
+  meeting: { color: "blue", label: "Meeting" },
+  focus: { color: "purple", label: "Focus" },
+  review: { color: "green", label: "Review" },
+  travel: { color: "orange", label: "Travel" }
+};
+var EVENTS = {
+  3: [{ c: "meeting", t: "Standup" }],
+  4: [{ c: "focus", t: "Design review" }, { c: "review", t: "PR #482" }],
+  6: [{ c: "travel", t: "Flight SFO" }],
+  9: [{ c: "meeting", t: "1:1 Mia" }],
+  12: [{ c: "meeting", t: "Roadmap" }, { c: "focus", t: "Spec draft" }, { c: "review", t: "QA pass" }],
+  17: [{ c: "review", t: "Release" }],
+  18: [{ c: "focus", t: "Deep work" }],
+  20: [{ c: "meeting", t: "All-hands" }],
+  24: [{ c: "travel", t: "Offsite" }],
+  25: [{ c: "travel", t: "Offsite" }],
+  27: [{ c: "meeting", t: "Demo day" }]
+};
+function DayCell({ day, today }) {
+  const evs = EVENTS[day] || [];
+  return /* @__PURE__ */ jsxs("div", { style: { minHeight: 116, padding: 8, background: "var(--klun-bg-white-0)", boxShadow: "inset -1px -1px 0 var(--klun-stroke-soft-200)", display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsx("span", { style: {
+      alignSelf: "flex-start",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 24,
+      height: 24,
+      padding: "0 6px",
+      borderRadius: "var(--klun-radius-pill)",
+      font: "var(--klun-text-label-xs)",
+      fontVariantNumeric: "tabular-nums",
+      background: today ? "var(--klun-primary-base)" : "transparent",
+      color: today ? "var(--klun-static-static-white)" : "var(--klun-text-sub-600)"
+    }, children: day }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: evs.slice(0, 3).map((e, i) => {
+      const cat = CAT[e.c];
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "3px 6px", borderRadius: "var(--klun-radius-sm)", background: `var(--klun-${cat.color}-50)`, font: "var(--klun-text-label-xs)", color: `var(--klun-${cat.color}-600, var(--klun-text-sub-600))`, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { width: 6, height: 6, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-${cat.color}-500)`, flex: "none" } }),
+        /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: e.t })
+      ] }, i);
+    }) })
+  ] });
+}
+var AGENDA = [
+  { t: "Roadmap planning", time: "10:00 \u2013 11:00", c: "meeting" },
+  { t: "Spec draft", time: "13:30 \u2013 15:00", c: "focus" },
+  { t: "QA pass", time: "16:00 \u2013 16:30", c: "review" }
+];
+function CalendarTemplate() {
+  const [filter, setFilter] = useState("all");
+  const [view, setView] = useState("month");
+  const cells = [...Array(6).fill(null), ...Array.from({ length: 31 }, (_, i) => i + 1)];
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: 1120, margin: "0 auto", padding: "40px 32px 80px" }, children: [
+    /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "flex-start", gap: 16, width: "100%", padding: "0 0 20px", boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Calendar" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "March 2026 \xB7 11 events this month" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsx(Button, { leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-add-line" }), children: "New event" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", margin: "24px 0 16px" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 6, height: 36, padding: "0 4px 0 10px", borderRadius: "var(--klun-radius-lg)", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)" }, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous period", onClick: () => {
+          }, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, border: "none", background: "transparent", color: "var(--klun-icon-sub-600)", cursor: "pointer", fontSize: 18, borderRadius: "var(--klun-radius-sm)" }, children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-s-line" }) }),
+          /* @__PURE__ */ jsx("i", { className: "ri-calendar-line", style: { fontSize: 18, color: "var(--klun-icon-soft-400)" } }),
+          /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)", whiteSpace: "nowrap", padding: "0 2px" }, children: [
+            "Mar 1",
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--klun-text-soft-400)" }, children: "\u2192" }),
+            "Mar 31"
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next period", onClick: () => {
+          }, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, border: "none", background: "transparent", color: "var(--klun-icon-sub-600)", cursor: "pointer", fontSize: 18, borderRadius: "var(--klun-radius-sm)" }, children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line" }) })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "ghost", size: "small", children: "Today" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ jsx(AvatarGroup, { variant: "stroke", size: "24", avatars: [{ initials: "AT", color: "blue" }, { initials: "MB", color: "green" }, { initials: "JK", color: "orange" }, { initials: "RP" }] }),
+        /* @__PURE__ */ jsx(SegmentedControl, { value: view, onChange: setView, items: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }, { value: "day", label: "Day" }] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(HorizontalFilter, { value: filter, onChange: setFilter, items: [
+      { value: "all", label: "All", count: 11 },
+      { value: "meeting", label: "Meetings", count: 5, icon: /* @__PURE__ */ jsx("i", { className: "ri-group-line" }) },
+      { value: "focus", label: "Focus", count: 3 },
+      { value: "review", label: "Reviews", count: 3 },
+      { value: "travel", label: "Travel", count: 3 }
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { style: { borderRadius: "var(--klun-radius-2xl)", overflow: "hidden", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", background: "var(--klun-bg-white-0)" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }, children: [
+      DOW.map((d) => /* @__PURE__ */ jsx("div", { style: { padding: "10px 8px", font: "var(--klun-text-subheading-2xs, var(--klun-text-label-xs))", letterSpacing: ".06em", textTransform: "uppercase", color: "var(--klun-text-soft-400)", background: "var(--klun-bg-weak-50)", boxShadow: "inset -1px -1px 0 var(--klun-stroke-soft-200)" }, children: d }, d)),
+      cells.map((day, i) => day == null ? /* @__PURE__ */ jsx("div", { style: { minHeight: 116, background: "var(--klun-bg-weak-50)", boxShadow: "inset -1px -1px 0 var(--klun-stroke-soft-200)" } }, i) : /* @__PURE__ */ jsx(DayCell, { day, today: day === 12 }, i))
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 28 }, children: [
+      /* @__PURE__ */ jsx(ContentLabel, { icon: /* @__PURE__ */ jsx("i", { className: "ri-calendar-event-line" }), children: "Up next \xB7 today" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }, children: AGENDA.map((e, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 14, padding: "12px 16px", borderRadius: "var(--klun-radius-xl)", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { width: 4, height: 36, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-${CAT[e.c].color}-500)`, flex: "none" } }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: e.t }),
+          /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: e.time })
+        ] }),
+        /* @__PURE__ */ jsx(Chip, { color: CAT[e.c].color, dot: true, children: CAT[e.c].label })
+      ] }, i)) })
+    ] })
+  ] });
+}
+var PLANS = [
+  {
+    id: "starter",
+    name: "Starter",
+    tagline: "For individuals getting started.",
+    monthly: 0,
+    yearly: 0,
+    cta: "Start for free",
+    features: ["1 workspace", "Up to 3 projects", "Community support", "1 GB storage"]
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    tagline: "For growing teams that ship fast.",
+    monthly: 24,
+    yearly: 19,
+    cta: "Start 14-day trial",
+    featured: true,
+    features: ["Unlimited workspaces", "Unlimited projects", "Priority support", "100 GB storage", "Advanced analytics", "Custom roles"]
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    tagline: "For organizations at scale.",
+    monthly: null,
+    yearly: null,
+    cta: "Contact sales",
+    features: ["Everything in Pro", "SSO & SCIM", "Audit logs", "Dedicated manager", "99.9% SLA", "Custom contracts"]
+  }
+];
+function Price({ plan, cycle }) {
+  if (plan.monthly == null) {
+    return /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-title-h3)", color: "var(--klun-text-strong-950)", letterSpacing: "-.02em" }, children: "Custom" });
+  }
+  const amt = cycle === "yearly" ? plan.yearly : plan.monthly;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 4 }, children: [
+    /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-title-h2)", color: "var(--klun-text-strong-950)", letterSpacing: "-.02em" }, children: [
+      "$",
+      amt
+    ] }),
+    /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "/ mo" })
+  ] });
+}
+function PlanCard({ plan, cycle }) {
+  const featured = plan.featured;
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+    padding: 28,
+    flex: 1,
+    minWidth: 0,
+    borderRadius: "var(--klun-radius-4xl, 24px)",
+    background: "var(--klun-bg-white-0)",
+    boxShadow: featured ? "inset 0 0 0 2px var(--klun-primary-base), var(--klun-shadow-lg, 0 24px 48px -16px rgba(14,18,27,.16))" : "inset 0 0 0 1px var(--klun-stroke-soft-200), var(--klun-shadow-xs, 0 1px 2px rgba(10,13,20,.03))"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: plan.name }),
+      featured ? /* @__PURE__ */ jsx(Badge, { color: "blue", variant: "lighter", children: "Most popular" }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)", minHeight: 40, textWrap: "pretty" }, children: plan.tagline }),
+    /* @__PURE__ */ jsx(Price, { plan, cycle }),
+    featured ? /* @__PURE__ */ jsx(Button, { kind: "fancy", fullWidth: true, children: plan.cta }) : /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "neutral", appearance: "stroke", children: plan.cta }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: plan.features.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: [
+      /* @__PURE__ */ jsx("i", { className: "ri-check-line", style: { fontSize: 18, color: "var(--klun-state-success-base)" } }),
+      f
+    ] }, i)) })
+  ] });
+}
+var FAQ = [
+  { id: "f1", title: "Can I change plans later?", content: "Yes \u2014 upgrade or downgrade anytime. Changes are prorated to your billing cycle." },
+  { id: "f2", title: "Do you offer a free trial?", content: "Every paid plan includes a 14-day trial. No card required to start." },
+  { id: "f3", title: "What payment methods do you accept?", content: "All major cards and ACH for annual plans. Enterprise can pay by invoice." },
+  { id: "f4", title: "Is there a discount for annual billing?", content: "Annual billing saves roughly 20% versus paying monthly." }
+];
+function PricingTemplate() {
+  const [cycle, setCycle] = useState("monthly");
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: 1080, margin: "0 auto", padding: "72px 32px 96px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, textAlign: "center", marginBottom: 40 }, children: [
+      /* @__PURE__ */ jsx(ContentLabel, { color: "blue", icon: /* @__PURE__ */ jsx("i", { className: "ri-price-tag-3-line" }), children: "Pricing" }),
+      /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h1)", color: "var(--klun-text-strong-950)", letterSpacing: "-.03em", maxWidth: 640, textWrap: "balance" }, children: "Simple pricing that scales with you" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-lg)", color: "var(--klun-text-sub-600)", maxWidth: 520, textWrap: "pretty" }, children: "Start free, then pick a plan when your team is ready. No hidden fees." }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 10, marginTop: 8 }, children: [
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: cycle,
+            onChange: (v) => setCycle(v),
+            items: [{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly" }]
+          }
+        ),
+        /* @__PURE__ */ jsx(Badge, { color: "green", variant: "lighter", children: "Save 20%" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 20, alignItems: "stretch", flexWrap: "wrap" }, children: PLANS.map((p) => /* @__PURE__ */ jsx(PlanCard, { plan: p, cycle }, p.id)) }),
+    /* @__PURE__ */ jsx(Alert, { status: "information", title: "Education & nonprofits", icon: /* @__PURE__ */ jsx("i", { className: "ri-lightbulb-line" }), style: { marginTop: 24 }, children: "Qualifying teams get 50% off any paid plan \u2014 reach out to sales to verify eligibility." }),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 72 }, children: [
+      /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 8px", font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)", letterSpacing: "-.02em", textAlign: "center" }, children: "Frequently asked questions" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "0 0 28px", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)", textAlign: "center" }, children: "Everything you need to know about plans and billing." }),
+      /* @__PURE__ */ jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsx(Accordion, { items: FAQ }) })
+    ] })
+  ] });
+}
+function Row({ label, hint, children, top }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "240px 1fr", gap: 24, padding: "20px 0", alignItems: top ? "flex-start" : "center", boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+      /* @__PURE__ */ jsx(Label, { children: label }),
+      hint ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)", textWrap: "pretty" }, children: hint }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { minWidth: 0 }, children })
+  ] });
+}
+function Panel({ children }) {
+  return /* @__PURE__ */ jsx("div", { style: { background: "var(--klun-bg-white-0)", borderRadius: "var(--klun-radius-2xl)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", padding: "8px 24px 24px" }, children });
+}
+function ProfileTab() {
+  const [bio, setBio] = useState("Product designer focused on systems and tooling.");
+  return /* @__PURE__ */ jsxs(Panel, { children: [
+    /* @__PURE__ */ jsx(Row, { label: "Photo", hint: "PNG or JPG, up to 5MB.", top: true, children: /* @__PURE__ */ jsx(ImageUpload, { label: "Upload new photo", hint: "Recommended 400\xD7400px", onRemove: () => {
+    }, src: "" }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Full name", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+      /* @__PURE__ */ jsx(Input, { defaultValue: "Arthur", placeholder: "First name" }),
+      /* @__PURE__ */ jsx(Input, { defaultValue: "Taylor", placeholder: "Last name" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Email address", hint: "Used for sign-in and notifications.", children: /* @__PURE__ */ jsx(Input, { type: "email", defaultValue: "arthur@klunui.com", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-mail-line" }) }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Role", children: /* @__PURE__ */ jsx(SelectMenu, { value: "design", onChange: () => {
+    }, options: [
+      { value: "design", label: "Designer", icon: /* @__PURE__ */ jsx("i", { className: "ri-pencil-ruler-2-line" }) },
+      { value: "eng", label: "Engineer", icon: /* @__PURE__ */ jsx("i", { className: "ri-code-s-slash-line" }) },
+      { value: "pm", label: "Product manager", icon: /* @__PURE__ */ jsx("i", { className: "ri-compass-3-line" }) }
+    ] }) }),
+    /* @__PURE__ */ jsx(Row, { label: "Bio", hint: "A short description for your profile.", top: true, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+      /* @__PURE__ */ jsx(Textarea, { value: bio, onChange: (e) => setBio(e.target.value), rows: 3, maxLength: 160 }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(CharacterCounter, { value: bio.length, max: 160 }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10, paddingTop: 20 }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { children: "Save changes" })
+    ] })
+  ] });
+}
+function NotificationsTab() {
+  const [s, setS] = useState({ product: true, weekly: true, mentions: true, security: true, marketing: false });
+  const set = (k) => setS((p) => ({ ...p, [k]: !p[k] }));
+  const items = [
+    { k: "product", label: "Product updates", hint: "New features and improvements." },
+    { k: "weekly", label: "Weekly digest", hint: "A summary of activity every Monday." },
+    { k: "mentions", label: "Mentions & comments", hint: "When someone @mentions you." },
+    { k: "security", label: "Security alerts", hint: "Sign-ins and password changes." },
+    { k: "marketing", label: "Marketing emails", hint: "Tips, offers and news." }
+  ];
+  return /* @__PURE__ */ jsxs(Panel, { children: [
+    /* @__PURE__ */ jsx(ContentLabel, { style: { paddingTop: 20, display: "block" }, children: "Email" }),
+    items.map((it) => /* @__PURE__ */ jsx(Row, { label: it.label, hint: it.hint, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Switch, { checked: s[it.k], onChange: () => set(it.k) }) }) }, it.k)),
+    /* @__PURE__ */ jsx(Alert, { status: "information", icon: /* @__PURE__ */ jsx("i", { className: "ri-information-2-line" }), style: { marginTop: 20 }, children: "Security alerts can't be turned off \u2014 they protect your account." })
+  ] });
+}
+function IntegrationsTab() {
+  const [c, setC] = useState({ slack: true, github: true, figma: false, linear: false });
+  const set = (k) => setC((p) => ({ ...p, [k]: !p[k] }));
+  const rows = [
+    { k: "slack", name: "Slack", icon: "ri-slack-line", desc: "Post notifications to a channel." },
+    { k: "github", name: "GitHub", icon: "ri-github-line", desc: "Link commits and pull requests." },
+    { k: "figma", name: "Figma", icon: "ri-figma-line", desc: "Embed frames and prototypes." },
+    { k: "linear", name: "Linear", icon: "ri-flashlight-line", desc: "Sync issues two ways." }
+  ];
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: rows.map((r) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: 16, borderRadius: "var(--klun-radius-2xl)", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 40, height: 40, flex: "none", borderRadius: "var(--klun-radius-lg)", background: "var(--klun-bg-weak-50)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", color: "var(--klun-icon-sub-600)", fontSize: 22 }, children: /* @__PURE__ */ jsx("i", { className: r.icon }) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.name }),
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-sub-600)" }, children: r.desc })
+    ] }),
+    /* @__PURE__ */ jsx(Switch, { checked: c[r.k], onChange: () => set(r.k) })
+  ] }, r.k)) });
+}
+var TABS = [
+  { value: "profile", label: "Profile" },
+  { value: "notifications", label: "Notifications" },
+  { value: "integrations", label: "Integrations", badge: "4" }
+];
+function SettingsTemplate() {
+  const [tab, setTab] = useState("profile");
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: 880, margin: "0 auto", padding: "48px 32px 80px" }, children: [
+    /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "flex-start", gap: 16, width: "100%", padding: "0 0 20px", boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Settings" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Manage your profile, notifications and connected apps." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsx(Badge, { color: "green", variant: "lighter", dot: true, children: "All changes saved" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsx(Tabs, { items: TABS, value: tab, onChange: setTab }) }),
+    tab === "profile" ? /* @__PURE__ */ jsx(ProfileTab, {}) : tab === "notifications" ? /* @__PURE__ */ jsx(NotificationsTab, {}) : /* @__PURE__ */ jsx(IntegrationsTab, {})
+  ] });
+}
+
+export { AIAssistantTemplate, CalendarTemplate, CryptoTemplate, DashboardTemplate, MarketingTemplate, OverviewScreen, PricingTemplate, SettingsScreen, SettingsTemplate, Sidebar, TopBar };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map