klun-ui 0.2.0 → 0.2.2

package/dist/templates/index.js

@@ -1,7 +1,7 @@
-import { Badge, Button, SegmentedControl, Card, Tabs, ProgressBar, Input, Select, Switch, Divider, AvatarGroup, HorizontalFilter, ContentLabel, Chip, Alert, Accordion, Label, Avatar, StatusDot, Table, ImageUpload, SelectMenu, Textarea, CharacterCounter, Spinner } from '../chunk-UJOMGMCV.js';
+import { Badge, Button, SegmentedControl, Card, Tabs, ProgressBar, Input, Select, Switch, Divider, AvatarGroup, HorizontalFilter, ContentLabel, Chip, Alert, Accordion, Avatar, Table, CounterInput, Money, Breadcrumb, Wizard, Dropdown, Modal, Label, Checkbox, Textarea, RelativeTime, Confirm, StatusDot, ImageUpload, SelectMenu, CharacterCounter, Drawer, Spinner } from '../chunk-UJOMGMCV.js';
 import '../chunk-T225J6LV.js';
-import { useState, useRef, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useId, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function Sidebar({ active, onNavigate, user }) {
   const main = [
@@ -168,7 +168,7 @@ function OverviewScreen() {
 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: [
+  const Field4 = ({ 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
@@ -188,14 +188,14 @@ function SettingsScreen() {
       /* @__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(Field4, { label: "Full name", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: "Arthur Taylor" }) }),
+      /* @__PURE__ */ jsx(Field4, { 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(Field4, { 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__ */ jsx(Field4, { 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"
@@ -422,13 +422,13 @@ var REPLIES = [
   "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 = [
+  const seed2 = [
     { 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 [convs] = useState(seed2);
   const [activeId, setActiveId] = useState("new");
   const [threads, setThreads] = useState({ new: [] });
   const [busy, setBusy] = useState(false);
@@ -883,9 +883,9 @@ function AgentTurn({ msg }) {
     ] })
   ] });
 }
-function UserTurn({ msg, initials }) {
+function UserTurn({ msg, initials: initials4 }) {
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row-reverse", gap: 12, alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ jsx(Avatar, { size: "32", initials, color: "purple" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "32", initials: initials4, color: "purple" }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -2078,7 +2078,2474 @@ function SettingsTemplate() {
     tab === "profile" ? /* @__PURE__ */ jsx(ProfileTab, {}) : tab === "notifications" ? /* @__PURE__ */ jsx(NotificationsTab, {}) : /* @__PURE__ */ jsx(IntegrationsTab, {})
   ] });
 }
+var ITEMS = [
+  { key: "dashboard", label: "Dashboard", icon: "ri-dashboard-line" },
+  { key: "orders", label: "Orders", icon: "ri-shopping-bag-line", badge: "5" },
+  { key: "products", label: "Products", icon: "ri-archive-line" },
+  { key: "customers", label: "Customers", icon: "ri-team-line" },
+  { key: "users", label: "Users", icon: "ri-user-3-line" },
+  { key: "roles", label: "Roles", icon: "ri-shield-keyhole-line" },
+  {
+    key: "reports",
+    label: "Reports",
+    icon: "ri-bar-chart-box-line",
+    children: [
+      { key: "sales", label: "Sales" },
+      { key: "traffic", label: "Traffic" }
+    ]
+  },
+  { key: "settings", label: "Settings", icon: "ri-settings-3-line" }
+];
+function MetronicSidebar({ active, onNavigate }) {
+  const [reportsOpen, setReportsOpen] = useState(false);
+  const Item = ({ item }) => {
+    const on = active === item.key;
+    const hasKids = Boolean(item.children?.length);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          if (hasKids) setReportsOpen((o) => !o);
+          else onNavigate(item.key);
+        },
+        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-primary-lighter)" : "transparent",
+          color: on ? "var(--klun-primary-base)" : "var(--klun-text-sub-600)",
+          font: "var(--klun-text-label-sm)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "i",
+            {
+              className: item.icon,
+              style: { fontSize: 19, color: on ? "var(--klun-primary-base)" : "var(--klun-icon-sub-600)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.label }),
+          item.badge ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                font: "var(--klun-text-label-xs)",
+                padding: "1px 7px",
+                borderRadius: "var(--klun-radius-pill)",
+                background: "var(--klun-bg-weak-50)",
+                color: "var(--klun-text-sub-600)"
+              },
+              children: item.badge
+            }
+          ) : null,
+          hasKids ? /* @__PURE__ */ jsx(
+            "i",
+            {
+              className: "ri-arrow-down-s-line",
+              style: { fontSize: 16, transform: reportsOpen ? "rotate(180deg)" : "none", transition: "transform .15s ease" }
+            }
+          ) : null
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      style: {
+        width: 248,
+        flexShrink: 0,
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: 14,
+        padding: "16px 12px",
+        background: "var(--klun-bg-white-0)",
+        borderRight: "1px solid var(--klun-stroke-soft-200)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "4px 8px 6px" }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 30,
+                height: 30,
+                borderRadius: "var(--klun-radius-md)",
+                background: "var(--klun-primary-base)",
+                color: "var(--klun-text-white-0)",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                font: "var(--klun-text-label-md)"
+              },
+              children: "M"
+            }
+          ),
+          /* @__PURE__ */ jsx("b", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Metronic" })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: ITEMS.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Item, { item }),
+          item.children && reportsOpen ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2, padding: "4px 0 4px 30px" }, children: item.children.map((kid) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onNavigate(kid.key),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                height: 32,
+                padding: "0 10px",
+                border: "none",
+                borderRadius: "var(--klun-radius-md)",
+                cursor: "pointer",
+                textAlign: "left",
+                background: active === kid.key ? "var(--klun-primary-lighter)" : "transparent",
+                color: active === kid.key ? "var(--klun-primary-base)" : "var(--klun-text-sub-600)",
+                font: "var(--klun-text-label-sm)"
+              },
+              children: kid.label
+            },
+            kid.key
+          )) }) : null
+        ] }, item.key)) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "auto",
+              padding: 10,
+              borderRadius: "var(--klun-radius-lg)",
+              background: "var(--klun-bg-weak-50)",
+              display: "flex",
+              alignItems: "center",
+              gap: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { size: "32", initials: "AK", color: "blue", status: "online" }),
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: "Anna Krause" }),
+                /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)" }, children: "Admin" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MetronicTopBar() {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "10px 24px",
+        background: "var(--klun-bg-white-0)",
+        borderBottom: "1px solid var(--klun-stroke-soft-200)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { width: 300, maxWidth: "45%" }, children: /* @__PURE__ */ jsx(Input, { size: "small", placeholder: "Search\u2026", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-search-line" }) }) }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "ghost", size: "small", icon: /* @__PURE__ */ jsx("i", { className: "ri-notification-3-line" }), "aria-label": "Notifications" }),
+          /* @__PURE__ */ jsx(Button, { iconOnly: true, variant: "neutral", appearance: "ghost", size: "small", icon: /* @__PURE__ */ jsx("i", { className: "ri-question-line" }), "aria-label": "Help" }),
+          /* @__PURE__ */ jsx("span", { style: { width: 1, height: 20, background: "var(--klun-stroke-soft-200)", margin: "0 4px" } }),
+          /* @__PURE__ */ jsx(Button, { size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-add-line" }), children: "New order" })
+        ] })
+      ]
+    }
+  );
+}
+var TONE = {
+  primary: "var(--klun-primary-base)",
+  success: "var(--klun-state-success-base)",
+  danger: "var(--klun-state-error-base)",
+  info: "var(--klun-state-information-base)",
+  warning: "var(--klun-state-warning-base)",
+  feature: "var(--klun-state-feature-base)"
+};
+function Sparkline({ data, tone = "primary", width = 200, height = 40 }) {
+  const gid = useId();
+  const color = TONE[tone];
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const span = max - min || 1;
+  const step = width / (data.length - 1);
+  const y = (v) => height - 3 - (v - min) / span * (height - 8);
+  const line = data.map((v, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
+  const area = `${line} L${width},${height} L0,${height} Z`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none",
+      style: { width: "100%", height, display: "block" },
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsx("path", { d: area, fill: `url(#${gid})` }),
+        /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ]
+    }
+  );
+}
+function BarChart({ data, tone = "primary", height = 200, showValues = true }) {
+  const max = Math.max(...data.map((d) => d.value), 1);
+  const color = TONE[tone];
+  const maxBar = height - (showValues ? 44 : 26);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 10, height, paddingTop: 4 }, children: data.map((d) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 6,
+        height: "100%"
+      },
+      children: [
+        showValues ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)" }, children: d.value }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: 34,
+              height: Math.max(4, Math.round(d.value / max * maxBar)),
+              borderRadius: "var(--klun-radius-md) var(--klun-radius-md) 3px 3px",
+              background: color,
+              opacity: 0.9
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-sub-600)" }, children: d.label })
+      ]
+    },
+    d.label
+  )) });
+}
+function DonutChart({
+  data,
+  centerValue,
+  centerLabel,
+  size = 168,
+  thickness = 22
+}) {
+  const r = (size - thickness) / 2;
+  const c = 2 * Math.PI * r;
+  const total = data.reduce((s, d) => s + d.value, 0) || 1;
+  const palette = [TONE.primary, TONE.success, TONE.info, TONE.feature, TONE.warning];
+  let acc = 0;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: size, height: size, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: `0 0 ${size} ${size}`,
+          width: size,
+          height: size,
+          style: { display: "block", transform: "rotate(-90deg)" },
+          "aria-hidden": true,
+          children: data.map((d, i) => {
+            const frac = d.value / total;
+            const dash = `${(frac * c).toFixed(2)} ${(c - frac * c).toFixed(2)}`;
+            const offset = -acc * c;
+            acc += frac;
+            return /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r,
+                fill: "none",
+                stroke: palette[i % palette.length],
+                strokeWidth: thickness,
+                strokeDasharray: dash,
+                strokeDashoffset: offset
+              },
+              d.label
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 2
+          },
+          children: [
+            centerValue ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: centerValue }) : null,
+            centerLabel ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: centerLabel }) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        style: {
+          listStyle: "none",
+          margin: 0,
+          padding: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          flex: 1,
+          minWidth: 140
+        },
+        children: data.map((d, i) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: "var(--klun-radius-pill)",
+                background: palette[i % palette.length],
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1, font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)" }, children: d.label }),
+          /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
+            Math.round(d.value / total * 100),
+            "%"
+          ] })
+        ] }, d.label))
+      }
+    )
+  ] });
+}
+function AreaChart2({ data, labels, tone = "primary", height = 220, formatValue }) {
+  const gid = useId();
+  const color = TONE[tone];
+  const W = 720;
+  const H = 240;
+  const max = Math.max(...data, 1) * 1.08;
+  const step = W / (data.length - 1);
+  const y = (v) => H - v / max * H;
+  const line = data.map((v, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
+  const area = `${line} L${W},${H} L0,${H} Z`;
+  const fmt = formatValue ?? ((v) => v >= 1e3 ? `${Math.round(v / 100) / 10}k` : String(Math.round(v)));
+  const ticks = [1, 0.75, 0.5, 0.25, 0];
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 46,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          paddingBottom: labels ? 24 : 0,
+          textAlign: "right"
+        },
+        children: ticks.map((t) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)" }, children: fmt(max * t) }, t))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${W} ${H}`,
+          preserveAspectRatio: "none",
+          style: { width: "100%", height: "100%", display: "block" },
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+            ] }) }),
+            ticks.slice(0, -1).map((t) => /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                x2: W,
+                y1: (H * (1 - t)).toFixed(1),
+                y2: (H * (1 - t)).toFixed(1),
+                stroke: "var(--klun-stroke-soft-200)",
+                strokeWidth: "1",
+                vectorEffect: "non-scaling-stroke"
+              },
+              t
+            )),
+            /* @__PURE__ */ jsx("path", { d: area, fill: `url(#${gid})` }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: line,
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          ]
+        }
+      ) }),
+      labels ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 6 }, children: labels.map((l) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-sub-600)" }, children: l }, l)) }) : null
+    ] })
+  ] });
+}
+var STATE_TOKEN = {
+  success: "success",
+  danger: "error",
+  info: "information",
+  warning: "warning",
+  feature: "feature"
+};
+function toneVars(tone) {
+  if (tone === "primary") {
+    return { fg: "var(--klun-primary-base)", bg: "var(--klun-primary-lighter)" };
+  }
+  const s = STATE_TOKEN[tone];
+  return { fg: `var(--klun-state-${s}-base)`, bg: `var(--klun-state-${s}-lighter)` };
+}
+function Kpi({ label, value, delta, trend = "up", tone = "primary", icon, spark }) {
+  const { fg, bg } = toneVars(tone);
+  const deltaTone = trend === "up" ? "success" : "error";
+  return /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 18, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            font: "var(--klun-text-label-xs)",
+            letterSpacing: "0.02em",
+            textTransform: "uppercase",
+            color: "var(--klun-text-soft-400)"
+          },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 32,
+            height: 32,
+            borderRadius: "var(--klun-radius-md)",
+            background: bg,
+            color: fg,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 16
+          },
+          children: icon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginTop: 10, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)", lineHeight: 1 }, children: value }),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: {
+            font: "var(--klun-text-label-sm)",
+            color: `var(--klun-state-${deltaTone}-base)`,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ jsx("i", { className: trend === "up" ? "ri-arrow-up-line" : "ri-arrow-down-line", style: { fontSize: 14 } }),
+            delta
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ jsx(Sparkline, { data: spark, tone, height: 36 }) })
+  ] });
+}
+function MiniStat({ label, value, hint, tone = "primary" }) {
+  const { fg } = toneVars(tone);
+  return /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 16, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          font: "var(--klun-text-label-xs)",
+          letterSpacing: "0.02em",
+          textTransform: "uppercase",
+          color: "var(--klun-text-soft-400)"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 6, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: value }),
+    hint ? /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-label-xs)", color: fg }, children: hint }) : null
+  ] });
+}
+var ORDERS = [
+  { id: "#A-1042", customer: "Anna Krause", date: "Jun 18", status: "Paid", total: "$420.00" },
+  { id: "#A-1041", customer: "Ben Ortiz", date: "Jun 18", status: "Pending", total: "$215.50" },
+  { id: "#A-1040", customer: "Chloe Lin", date: "Jun 17", status: "Paid", total: "$980.00" },
+  { id: "#A-1039", customer: "Dmitri Volkov", date: "Jun 17", status: "Refunded", total: "$120.00" },
+  { id: "#A-1038", customer: "Erin Walsh", date: "Jun 16", status: "Paid", total: "$66.00" }
+];
+var STATUS_COLOR = { Paid: "green", Pending: "yellow", Refunded: "gray" };
+var customerInitials = (name) => name.split(" ").map((s) => s[0]).join("");
+var ORDER_COLUMNS = [
+  {
+    key: "id",
+    header: "Order",
+    render: (r) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.id })
+  },
+  {
+    key: "customer",
+    header: "Customer",
+    render: (r) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(Avatar, { size: "24", initials: customerInitials(r.customer), color: "blue" }),
+      r.customer
+    ] })
+  },
+  { key: "date", header: "Date" },
+  {
+    key: "status",
+    header: "Status",
+    render: (r) => /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR[r.status], variant: "light", size: "small", dot: true, children: r.status })
+  },
+  {
+    key: "total",
+    header: "Total",
+    align: "right",
+    render: (r) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.total })
+  }
+];
+function DashboardScreen() {
+  const [tab, setTab] = useState("revenue");
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16 }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Dashboard" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Welcome back \u2014 here's your store today." })
+      ] }),
+      /* @__PURE__ */ jsx(
+        AvatarGroup,
+        {
+          size: "32",
+          max: 4,
+          avatars: [
+            { initials: "AK", color: "blue" },
+            { initials: "BO", color: "green" },
+            { initials: "CL", color: "purple" },
+            { initials: "DV", color: "orange" },
+            { initials: "EW", color: "gray" }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }, children: [
+      /* @__PURE__ */ jsx(
+        Kpi,
+        {
+          label: "Revenue",
+          value: "$84,920",
+          delta: "12.4%",
+          tone: "primary",
+          icon: /* @__PURE__ */ jsx("i", { className: "ri-money-dollar-circle-line" }),
+          spark: [10, 14, 12, 18, 16, 24, 22, 30]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Kpi,
+        {
+          label: "Orders",
+          value: "1,284",
+          delta: "6.1%",
+          tone: "success",
+          icon: /* @__PURE__ */ jsx("i", { className: "ri-shopping-bag-line" }),
+          spark: [8, 10, 9, 14, 13, 16, 18, 22]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Kpi,
+        {
+          label: "Customers",
+          value: "9,402",
+          delta: "2.3%",
+          trend: "down",
+          tone: "danger",
+          icon: /* @__PURE__ */ jsx("i", { className: "ri-team-line" }),
+          spark: [20, 18, 19, 15, 16, 14, 13, 12]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Kpi,
+        {
+          label: "Conversion",
+          value: "3.6%",
+          delta: "0.8%",
+          tone: "info",
+          icon: /* @__PURE__ */ jsx("i", { className: "ri-percent-line" }),
+          spark: [2, 3, 2.5, 3.2, 3, 3.4, 3.5, 3.6]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)", gap: 16, alignItems: "start" }, children: [
+      /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 20, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Performance" }),
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              variant: "pill",
+              value: tab,
+              onChange: setTab,
+              items: [
+                { value: "revenue", label: "Revenue" },
+                { value: "orders", label: "Orders" }
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          BarChart,
+          {
+            height: 200,
+            tone: tab === "revenue" ? "primary" : "success",
+            data: tab === "revenue" ? [
+              { label: "Mon", value: 32 },
+              { label: "Tue", value: 48 },
+              { label: "Wed", value: 40 },
+              { label: "Thu", value: 64 },
+              { label: "Fri", value: 58 },
+              { label: "Sat", value: 30 },
+              { label: "Sun", value: 22 }
+            ] : [
+              { label: "Mon", value: 120 },
+              { label: "Tue", value: 168 },
+              { label: "Wed", value: 142 },
+              { label: "Thu", value: 210 },
+              { label: "Fri", value: 196 },
+              { label: "Sat", value: 88 },
+              { label: "Sun", value: 64 }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 20, children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 16 }, children: "Traffic sources" }),
+        /* @__PURE__ */ jsx(
+          DonutChart,
+          {
+            centerValue: "68%",
+            centerLabel: "Organic",
+            data: [
+              { label: "Organic", value: 68 },
+              { label: "Direct", value: 18 },
+              { label: "Referral", value: 9 },
+              { label: "Social", value: 5 }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 0, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "16px 20px" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Recent orders" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "neutral", appearance: "stroke", children: "View all" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Table,
+        {
+          columns: ORDER_COLUMNS,
+          rows: ORDERS,
+          getRowId: (r) => r.id,
+          style: { borderRadius: 0, boxShadow: "none", borderTop: "1px solid var(--klun-stroke-soft-200)" }
+        }
+      )
+    ] })
+  ] });
+}
+var ORDERS2 = [
+  { id: "#A-1042", date: "2026-09-16", customer: "Anna Krause", items: 3, status: "Fulfilled", payment: "Visa \u2022\u2022 4242", total: 420 },
+  { id: "#A-1041", date: "2026-09-16", customer: "Ben Ortiz", items: 1, status: "Pending", payment: "PayPal", total: 215.5 },
+  { id: "#A-1040", date: "2026-09-15", customer: "Chloe Lin", items: 6, status: "Fulfilled", payment: "Visa \u2022\u2022 1881", total: 980 },
+  { id: "#A-1039", date: "2026-09-15", customer: "Dmitri Volkov", items: 2, status: "Refunded", payment: "Mastercard \u2022\u2022 5501", total: 120 },
+  { id: "#A-1038", date: "2026-09-14", customer: "Erin Walsh", items: 1, status: "Fulfilled", payment: "Apple Pay", total: 66 },
+  { id: "#A-1037", date: "2026-09-14", customer: "Farid Haddad", items: 4, status: "Processing", payment: "Visa \u2022\u2022 9034", total: 512.4 },
+  { id: "#A-1036", date: "2026-09-13", customer: "Grace Miller", items: 2, status: "Fulfilled", payment: "PayPal", total: 148 },
+  { id: "#A-1035", date: "2026-09-12", customer: "Hugo Silva", items: 5, status: "Processing", payment: "Mastercard \u2022\u2022 2210", total: 764.9 },
+  { id: "#A-1034", date: "2026-09-12", customer: "Ivy Chen", items: 1, status: "Pending", payment: "Visa \u2022\u2022 7742", total: 89 },
+  { id: "#A-1033", date: "2026-09-11", customer: "Jonas Weber", items: 3, status: "Fulfilled", payment: "Bank transfer", total: 355 },
+  { id: "#A-1032", date: "2026-09-10", customer: "Karla Novak", items: 2, status: "Refunded", payment: "PayPal", total: 210 },
+  { id: "#A-1031", date: "2026-09-10", customer: "Liam Byrne", items: 7, status: "Fulfilled", payment: "Visa \u2022\u2022 3360", total: 1284 }
+];
+var STATUS_COLOR2 = {
+  Fulfilled: "green",
+  Processing: "blue",
+  Pending: "yellow",
+  Refunded: "gray"
+};
+var initials = (name) => name.split(" ").map((s) => s[0]).join("");
+function OrdersScreen() {
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState([]);
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return ORDERS2;
+    return ORDERS2.filter(
+      (o) => o.id.toLowerCase().includes(q) || o.customer.toLowerCase().includes(q)
+    );
+  }, [query]);
+  const columns = [
+    {
+      key: "id",
+      header: "Order",
+      render: (r) => /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.id })
+    },
+    { key: "date", header: "Date" },
+    {
+      key: "customer",
+      header: "Customer",
+      render: (r) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "24", initials: initials(r.customer), color: "blue" }),
+        r.customer
+      ] })
+    },
+    { key: "items", header: "Items", align: "center" },
+    {
+      key: "status",
+      header: "Status",
+      filters: [
+        { label: "Fulfilled", value: "Fulfilled" },
+        { label: "Processing", value: "Processing" },
+        { label: "Pending", value: "Pending" },
+        { label: "Refunded", value: "Refunded" }
+      ],
+      render: (r) => /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR2[r.status], variant: "light", size: "small", dot: true, children: r.status })
+    },
+    { key: "payment", header: "Payment" },
+    {
+      key: "total",
+      header: "Total",
+      align: "right",
+      render: (r) => /* @__PURE__ */ jsx(
+        Money,
+        {
+          value: r.total,
+          currency: "USD",
+          locale: "en-US",
+          tone: r.status === "Refunded" ? "refund" : "default",
+          style: { font: "var(--klun-text-label-sm)" }
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Orders" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Track, filter and fulfil every order in one place." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-download-2-line" }), children: "Export" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-add-line" }), children: "New order" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        columns,
+        rows,
+        getRowId: (r) => r.id,
+        title: "All orders",
+        toolbar: /* @__PURE__ */ jsx("div", { style: { width: 220 }, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "small",
+            placeholder: "Search orders\u2026",
+            leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-search-line" }),
+            value: query,
+            onChange: (e) => setQuery(e.target.value)
+          }
+        ) }),
+        selectable: true,
+        selected,
+        onSelectRow: (id) => setSelected((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]),
+        onSelectAll: (ids) => setSelected(ids),
+        selectionActions: (rowsSelected, clear) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)" }, children: [
+            rowsSelected.length,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { size: "tiny", variant: "neutral", appearance: "stroke", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-check-line" }), children: "Mark fulfilled" }),
+          /* @__PURE__ */ jsx(Button, { size: "tiny", variant: "neutral", appearance: "ghost", onClick: clear, children: "Clear" })
+        ] }),
+        sortable: true,
+        exportable: { filename: "orders.csv" },
+        pagination: { defaultPageSize: 6, pageSizeOptions: [6, 12] }
+      }
+    )
+  ] });
+}
+
+// src/templates/metronic-dashboard/productModel.ts
+var CATEGORIES = ["Peripherals", "Displays", "Accessories", "Audio", "Office", "Video"];
+var STATUS_COLOR3 = { Active: "green", "Low stock": "yellow", "Out of stock": "gray" };
+var deriveStatus = (stock, capacity) => stock === 0 ? "Out of stock" : stock / capacity < 0.25 ? "Low stock" : "Active";
+function emptyDraft() {
+  return {
+    name: "",
+    sku: "",
+    category: "Accessories",
+    price: 0,
+    stock: 0,
+    capacity: 100,
+    status: "Active",
+    description: ""
+  };
+}
+function Field({
+  label,
+  hint,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    children,
+    hint ? /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: hint }) : null
+  ] });
+}
+function ReviewRow({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "10px 0" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-soft-400)" }, children: label }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          font: "var(--klun-text-label-sm)",
+          color: "var(--klun-text-strong-950)",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8
+        },
+        children
+      }
+    )
+  ] });
+}
+function ProductWizardPage({ mode, initial, onCancel, onSave }) {
+  const [draft, setDraft] = useState(initial);
+  const [step, setStep] = useState(0);
+  const [triedNext, setTriedNext] = useState(false);
+  const set = (patch) => setDraft((d) => ({ ...d, ...patch }));
+  const nameError = triedNext && step === 0 && draft.name.trim().length === 0;
+  const skuError = triedNext && step === 0 && draft.sku.trim().length === 0;
+  const stockError = triedNext && step === 1 && (draft.stock < 0 || draft.stock > draft.capacity);
+  const nextStatus = deriveStatus(draft.stock, draft.capacity);
+  const title = mode === "create" ? "New product" : "Edit product";
+  const steps = [
+    {
+      title: "Basics",
+      content: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }, children: [
+          /* @__PURE__ */ jsx(Field, { label: "Name", hint: nameError ? "A product name is required." : void 0, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              error: nameError,
+              value: draft.name,
+              placeholder: "Aero Wireless Keyboard",
+              onChange: (e) => set({ name: e.target.value })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "SKU", hint: skuError ? "A unique SKU is required." : void 0, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              error: skuError,
+              value: draft.sku,
+              placeholder: "KB-1042",
+              onChange: (e) => set({ sku: e.target.value })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: /* @__PURE__ */ jsx(Field, { label: "Category", children: /* @__PURE__ */ jsx(Select, { value: draft.category, onChange: (e) => set({ category: e.target.value }), children: CATEGORIES.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c)) }) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Description", hint: "Shown to teammates in the inventory \u2014 not on the storefront.", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: draft.description ?? "",
+            placeholder: "Short internal description",
+            onChange: (e) => set({ description: e.target.value })
+          }
+        ) })
+      ] })
+    },
+    {
+      title: "Pricing & stock",
+      content: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+          /* @__PURE__ */ jsx(Field, { label: "Price (USD)", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: String(draft.price),
+              leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-money-dollar-circle-line" }),
+              onChange: (e) => set({ price: Number(e.target.value) || 0 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "Capacity", hint: "Used for the stock bar \u2014 how many units fit.", children: /* @__PURE__ */ jsx(CounterInput, { value: draft.capacity, min: 1, max: 1e3, step: 10, onChange: (v) => set({ capacity: v }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: "Stock on hand",
+            hint: stockError ? "Stock must be between 0 and capacity." : "Status is derived from this level.",
+            children: /* @__PURE__ */ jsx(CounterInput, { value: draft.stock, min: 0, max: draft.capacity, onChange: (v) => set({ stock: v }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "12px 14px",
+              borderRadius: "var(--klun-radius-lg)",
+              background: "var(--klun-bg-weak-50)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("i", { className: "ri-information-line", style: { fontSize: 18, color: "var(--klun-icon-sub-600)" } }),
+              /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "With this stock level the product will be saved as" }),
+              /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR3[nextStatus], variant: "light", size: "small", dot: true, children: nextStatus })
+            ]
+          }
+        )
+      ] })
+    },
+    {
+      title: "Review",
+      content: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { style: { boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
+          /* @__PURE__ */ jsx(ReviewRow, { label: "Name", children: draft.name || "\u2014" }),
+          /* @__PURE__ */ jsx(ReviewRow, { label: "SKU", children: draft.sku || "\u2014" }),
+          /* @__PURE__ */ jsx(ReviewRow, { label: "Category", children: draft.category }),
+          /* @__PURE__ */ jsx(ReviewRow, { label: "Description", children: draft.description || "\u2014" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
+          /* @__PURE__ */ jsx(ReviewRow, { label: "Price", children: /* @__PURE__ */ jsx(Money, { value: draft.price, currency: "USD", locale: "en-US" }) }),
+          /* @__PURE__ */ jsxs(ReviewRow, { label: "Stock", children: [
+            draft.stock,
+            " of ",
+            draft.capacity
+          ] }),
+          /* @__PURE__ */ jsx(ReviewRow, { label: "Status", children: /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR3[nextStatus], variant: "light", size: "small", dot: true, children: nextStatus }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              display: "block",
+              marginTop: 14,
+              font: "var(--klun-text-paragraph-xs)",
+              color: "var(--klun-text-soft-400)"
+            },
+            children: [
+              "Click Finish to save \u2014 the product ",
+              mode === "create" ? "is added to" : "is updated in",
+              " the inventory."
+            ]
+          }
+        )
+      ] })
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        Breadcrumb,
+        {
+          items: [
+            { label: "Products" },
+            { label: mode === "create" ? "New product" : draft.name || "Edit product" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
+            gap: 16,
+            marginTop: 8,
+            flexWrap: "wrap"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: title }),
+              /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Route-style editor \u2014 three steps, saved at the end." })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "neutral",
+                appearance: "stroke",
+                size: "small",
+                leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-line" }),
+                onClick: onCancel,
+                children: "Back to list"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Card, { variant: "stroke", padding: 20, children: /* @__PURE__ */ jsx(
+      Wizard,
+      {
+        steps,
+        current: step,
+        onStepChange: (n) => {
+          if (n > step) {
+            setTriedNext(true);
+            if (step === 0 && (draft.name.trim() === "" || draft.sku.trim() === "")) return;
+            if (step === 1 && (draft.stock < 0 || draft.stock > draft.capacity)) return;
+          }
+          setTriedNext(false);
+          setStep(n);
+        },
+        onFinish: () => onSave({ ...draft, status: nextStatus })
+      }
+    ) })
+  ] });
+}
+var INITIAL_PRODUCTS = [
+  { id: "p1", name: "Aero Wireless Keyboard", sku: "KB-1042", category: "Peripherals", price: 129, stock: 84, capacity: 120, status: "Active" },
+  { id: "p2", name: 'Lumen 27" 4K Monitor', sku: "MN-2210", category: "Displays", price: 549, stock: 12, capacity: 80, status: "Low stock" },
+  { id: "p3", name: "Pulse USB-C Dock", sku: "DK-3301", category: "Accessories", price: 89.5, stock: 0, capacity: 60, status: "Out of stock" },
+  { id: "p4", name: "Nimbus Laptop Stand", sku: "ST-1187", category: "Accessories", price: 45, stock: 132, capacity: 200, status: "Active" },
+  { id: "p5", name: "Vertex Mechanical Mouse", sku: "MS-2205", category: "Peripherals", price: 79, stock: 18, capacity: 100, status: "Low stock" },
+  { id: "p6", name: "Echo Conference Speaker", sku: "SP-4402", category: "Audio", price: 219, stock: 47, capacity: 90, status: "Active" },
+  { id: "p7", name: "Flux Desk Lamp", sku: "LP-0913", category: "Office", price: 64, stock: 0, capacity: 40, status: "Out of stock" },
+  { id: "p8", name: "Orbit Webcam 4K", sku: "WC-5520", category: "Video", price: 149, stock: 63, capacity: 120, status: "Active" }
+];
+var CATEGORY_TONE = {
+  Peripherals: { bg: "var(--klun-state-feature-lighter)", fg: "var(--klun-state-feature-base)", icon: "ri-keyboard-line" },
+  Displays: { bg: "var(--klun-state-information-lighter)", fg: "var(--klun-state-information-base)", icon: "ri-computer-line" },
+  Accessories: { bg: "var(--klun-state-success-lighter)", fg: "var(--klun-state-success-base)", icon: "ri-plug-line" },
+  Audio: { bg: "var(--klun-state-warning-lighter)", fg: "var(--klun-state-warning-base)", icon: "ri-volume-up-line" },
+  Office: { bg: "var(--klun-state-error-lighter)", fg: "var(--klun-state-error-base)", icon: "ri-lightbulb-line" },
+  Video: { bg: "var(--klun-primary-lighter)", fg: "var(--klun-primary-base)", icon: "ri-vidicon-line" }
+};
+var stockColor = (p) => p.stock === 0 ? "error" : p.stock / p.capacity < 0.25 ? "warning" : "success";
+function Field2({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    children
+  ] });
+}
+function ProductEditor({ open, mode, draft, onChange, onClose, onSave }) {
+  const valid = draft.name.trim().length > 0 && draft.sku.trim().length > 0;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      title: mode === "create" ? "New product" : "Edit product",
+      description: mode === "create" ? "The product appears in the inventory as soon as you save it." : draft.sku,
+      okText: mode === "create" ? "Create product" : "Save changes",
+      okButtonProps: { disabled: !valid },
+      onOk: () => valid && onSave(),
+      width: 560,
+      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }, children: [
+          /* @__PURE__ */ jsx(Field2, { label: "Name", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: draft.name,
+              placeholder: "Aero Wireless Keyboard",
+              onChange: (e) => onChange({ name: e.target.value })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field2, { label: "SKU", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: draft.sku,
+              placeholder: "KB-1042",
+              onChange: (e) => onChange({ sku: e.target.value })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }, children: [
+          /* @__PURE__ */ jsx(Field2, { label: "Category", children: /* @__PURE__ */ jsx(Select, { value: draft.category, onChange: (e) => onChange({ category: e.target.value }), children: CATEGORIES.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c)) }) }),
+          /* @__PURE__ */ jsx(Field2, { label: "Price (USD)", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: String(draft.price),
+              leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-money-dollar-circle-line" }),
+              onChange: (e) => onChange({ price: Number(e.target.value) || 0 })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }, children: [
+          /* @__PURE__ */ jsx(Field2, { label: "Stock on hand", children: /* @__PURE__ */ jsx(CounterInput, { value: draft.stock, min: 0, max: draft.capacity, onChange: (v) => onChange({ stock: v }) }) }),
+          /* @__PURE__ */ jsx(Field2, { label: "Capacity", children: /* @__PURE__ */ jsx(CounterInput, { value: draft.capacity, min: 1, max: 1e3, step: 10, onChange: (v) => onChange({ capacity: v }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Field2, { label: "Description", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: draft.description ?? "",
+            placeholder: "Short internal description",
+            onChange: (e) => onChange({ description: e.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "Status follows stock: 0 = out of stock, below 25% of capacity = low stock." })
+      ] })
+    }
+  );
+}
+function DetailRow({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
+    /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-soft-400)" }, children: label }),
+    /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children })
+  ] });
+}
+function ProductDetail({ product, onClose, onEdit, onOpenPage, onDelete }) {
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open: product !== null,
+      onClose,
+      title: "Product details",
+      width: 420,
+      footer: product ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 8, width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "error",
+            appearance: "lighter",
+            leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-delete-bin-line" }),
+            onClick: () => onDelete(product),
+            children: "Delete"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(Button, { size: "small", variant: "neutral", appearance: "ghost", onClick: () => onOpenPage(product), children: "Full editor" }),
+          /* @__PURE__ */ jsx(Button, { size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-edit-line" }), onClick: () => onEdit(product), children: "Edit product" })
+        ] })
+      ] }) : null,
+      children: product ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(Thumb, { category: product.category }),
+          /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: product.name }),
+            /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: product.sku })
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR3[product.status], variant: "light", size: "small", dot: true, children: product.status }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(DetailRow, { label: "Category", children: product.category }),
+          /* @__PURE__ */ jsx(DetailRow, { label: "Price", children: /* @__PURE__ */ jsx(Money, { value: product.price, currency: "USD", locale: "en-US" }) }),
+          /* @__PURE__ */ jsxs(DetailRow, { label: "Stock", children: [
+            product.stock,
+            " of ",
+            product.capacity
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ProgressBar, { value: product.stock, max: product.capacity, color: stockColor(product) }),
+        product.description ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              font: "var(--klun-text-paragraph-sm)",
+              color: "var(--klun-text-sub-600)",
+              boxShadow: "inset 0 1px 0 var(--klun-stroke-soft-200)",
+              paddingTop: 16
+            },
+            children: product.description
+          }
+        ) : null
+      ] }) : null
+    }
+  );
+}
+function Thumb({ category }) {
+  const tone = CATEGORY_TONE[category] ?? CATEGORY_TONE.Accessories;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        width: 34,
+        height: 34,
+        borderRadius: "var(--klun-radius-md)",
+        background: tone.bg,
+        color: tone.fg,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 17,
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsx("i", { className: tone.icon })
+    }
+  );
+}
+function ProductsScreen() {
+  const [products, setProducts] = useState(INITIAL_PRODUCTS);
+  const [editor, setEditor] = useState(null);
+  const [draft, setDraft] = useState(emptyDraft);
+  const [detail, setDetail] = useState(null);
+  const [route, setRoute] = useState({
+    name: "list"
+  });
+  const toDraft = (p) => {
+    const { id: _id, ...rest } = p;
+    return rest;
+  };
+  const upsert = (d, mode, id) => {
+    if (mode === "create") {
+      setProducts((prev) => [{ id: `p${Date.now()}`, ...d }, ...prev]);
+      return;
+    }
+    if (id) {
+      setProducts((prev) => prev.map((p) => p.id === id ? { ...p, ...d } : p));
+      setDetail((x) => x && x.id === id ? { ...x, ...d } : x);
+    }
+  };
+  if (route.name !== "list") {
+    const mode = route.name;
+    const editing = mode === "edit" ? route.product : void 0;
+    return /* @__PURE__ */ jsx(
+      ProductWizardPage,
+      {
+        mode,
+        initial: editing ? toDraft(editing) : emptyDraft(),
+        onCancel: () => setRoute({ name: "list" }),
+        onSave: (d) => {
+          upsert(d, mode, editing?.id);
+          setRoute({ name: "list" });
+        }
+      }
+    );
+  }
+  const totals = {
+    skus: products.length,
+    low: products.filter((p) => p.status === "Low stock").length,
+    out: products.filter((p) => p.status === "Out of stock").length,
+    value: products.reduce((sum, p) => sum + p.price * p.stock, 0)
+  };
+  const openCreate = () => {
+    setDraft(emptyDraft());
+    setEditor({ mode: "create" });
+  };
+  const openEdit = (p) => {
+    setDraft(toDraft(p));
+    setEditor({ mode: "edit", product: p });
+  };
+  const saveDraft = () => {
+    const status = deriveStatus(draft.stock, draft.capacity);
+    upsert({ ...draft, status }, editor?.mode ?? "create", editor?.product?.id);
+    setEditor(null);
+  };
+  const removeProduct = async (p) => {
+    const res = await Confirm({
+      title: `Delete ${p.name}?`,
+      description: `${p.sku} will be removed from the inventory. This can't be undone.`,
+      intent: "danger",
+      confirmText: "Delete product"
+    });
+    if (res === true || typeof res === "object" && res.confirmed) {
+      setProducts((prev) => prev.filter((x) => x.id !== p.id));
+      setDetail((d) => d && d.id === p.id ? null : d);
+    }
+  };
+  const columns = [
+    {
+      key: "name",
+      header: "Product",
+      render: (p) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx(Thumb, { category: p.category }),
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: p.name }),
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)" }, children: p.sku })
+        ] })
+      ] })
+    },
+    { key: "category", header: "Category" },
+    {
+      key: "price",
+      header: "Price",
+      align: "right",
+      render: (p) => /* @__PURE__ */ jsx(Money, { value: p.price, currency: "USD", locale: "en-US", style: { font: "var(--klun-text-label-sm)" } })
+    },
+    {
+      key: "stock",
+      header: "Stock",
+      width: 190,
+      render: (p) => /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 150 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(ProgressBar, { value: p.stock, max: p.capacity, color: stockColor(p) }) }),
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-sub-600)", width: 32, textAlign: "right" }, children: p.stock })
+      ] })
+    },
+    {
+      key: "status",
+      header: "Status",
+      filters: [
+        { label: "Active", value: "Active" },
+        { label: "Low stock", value: "Low stock" },
+        { label: "Out of stock", value: "Out of stock" }
+      ],
+      render: (p) => /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR3[p.status], variant: "light", size: "small", dot: true, children: p.status })
+    },
+    {
+      key: "actions",
+      header: "",
+      width: 56,
+      align: "right",
+      exportable: false,
+      render: (p) => /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          align: "right",
+          width: 190,
+          trigger: /* @__PURE__ */ jsx(
+            Button,
+            {
+              kind: "compact",
+              appearance: "ghost",
+              icon: /* @__PURE__ */ jsx("i", { className: "ri-more-2-line" }),
+              "aria-label": `Actions for ${p.name}`
+            }
+          ),
+          items: [
+            { label: "View details", icon: /* @__PURE__ */ jsx("i", { className: "ri-eye-line" }), onClick: () => setDetail(p) },
+            { label: "Quick edit \u2014 modal", icon: /* @__PURE__ */ jsx("i", { className: "ri-edit-line" }), onClick: () => openEdit(p) },
+            { label: "Edit in page", icon: /* @__PURE__ */ jsx("i", { className: "ri-layout-top-line" }), onClick: () => setRoute({ name: "edit", product: p }) },
+            { label: "Duplicate", icon: /* @__PURE__ */ jsx("i", { className: "ri-file-copy-line" }), onClick: () => openCreate() },
+            { divider: true },
+            { label: "Delete product", icon: /* @__PURE__ */ jsx("i", { className: "ri-delete-bin-line" }), danger: true, onClick: () => void removeProduct(p) }
+          ]
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Products" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Inventory levels, pricing and availability \u2014 full create, edit and delete flows." })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          align: "right",
+          width: 220,
+          trigger: /* @__PURE__ */ jsx(Button, { size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-add-line" }), children: "Add product" }),
+          items: [
+            { label: "Quick add \u2014 modal", icon: /* @__PURE__ */ jsx("i", { className: "ri-add-box-line" }), onClick: openCreate },
+            {
+              label: "Full-page editor",
+              icon: /* @__PURE__ */ jsx("i", { className: "ri-layout-top-line" }),
+              onClick: () => setRoute({ name: "create" })
+            }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
+      /* @__PURE__ */ jsx(MiniStat, { label: "SKUs", value: totals.skus, hint: "across 6 categories" }),
+      /* @__PURE__ */ jsx(MiniStat, { label: "Low stock", value: totals.low, hint: "needs restocking", tone: "warning" }),
+      /* @__PURE__ */ jsx(MiniStat, { label: "Out of stock", value: totals.out, hint: "not purchasable", tone: "danger" }),
+      /* @__PURE__ */ jsx(MiniStat, { label: "Inventory value", value: /* @__PURE__ */ jsx(Money, { value: totals.value, currency: "USD", locale: "en-US", size: "lg" }), hint: "at cost price", tone: "success" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        columns,
+        rows: products,
+        getRowId: (p) => p.id,
+        title: "Inventory",
+        toolbar: /* @__PURE__ */ jsx(Button, { size: "tiny", variant: "neutral", appearance: "stroke", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-filter-3-line" }), children: "Filters" }),
+        sortable: true,
+        columnSettings: true,
+        exportable: { filename: "products.csv" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ProductEditor,
+      {
+        open: editor !== null,
+        mode: editor?.mode ?? "create",
+        draft,
+        onChange: (patch) => setDraft((d) => ({ ...d, ...patch })),
+        onClose: () => setEditor(null),
+        onSave: saveDraft
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ProductDetail,
+      {
+        product: detail,
+        onClose: () => setDetail(null),
+        onEdit: (p) => {
+          setDetail(null);
+          openEdit(p);
+        },
+        onOpenPage: (p) => {
+          setDetail(null);
+          setRoute({ name: "edit", product: p });
+        },
+        onDelete: (p) => void removeProduct(p)
+      }
+    )
+  ] });
+}
+var CUSTOMERS = [
+  { id: "c1", name: "Anna Krause", email: "anna@acme.io", segment: "VIP", orders: 42, spend: 18420, lastSeen: "2026-09-16T08:30:00Z", country: "Germany" },
+  { id: "c2", name: "Ben Ortiz", email: "ben@northwind.co", segment: "Regular", orders: 17, spend: 5210.5, lastSeen: "2026-09-16T06:10:00Z", country: "Mexico" },
+  { id: "c3", name: "Chloe Lin", email: "chloe@lumen.dev", segment: "VIP", orders: 55, spend: 24980, lastSeen: "2026-09-15T19:45:00Z", country: "Singapore" },
+  { id: "c4", name: "Dmitri Volkov", email: "dmitri@volk.io", segment: "New", orders: 2, spend: 340, lastSeen: "2026-09-15T12:05:00Z", country: "Georgia" },
+  { id: "c5", name: "Erin Walsh", email: "erin@walsh.ie", segment: "Regular", orders: 23, spend: 7690, lastSeen: "2026-09-14T16:20:00Z", country: "Ireland" },
+  { id: "c6", name: "Farid Haddad", email: "farid@levant.sa", segment: "Regular", orders: 11, spend: 3980, lastSeen: "2026-09-14T09:00:00Z", country: "Saudi Arabia" },
+  { id: "c7", name: "Grace Miller", email: "grace@miller.us", segment: "New", orders: 1, spend: 148, lastSeen: "2026-09-13T20:12:00Z", country: "United States" },
+  { id: "c8", name: "Hugo Silva", email: "hugo@silva.br", segment: "VIP", orders: 38, spend: 15340, lastSeen: "2026-09-13T10:40:00Z", country: "Brazil" }
+];
+var SEGMENT_COLOR = {
+  VIP: "purple",
+  Regular: "blue",
+  New: "green"
+};
+var initials2 = (name) => name.split(" ").map((s) => s[0]).join("");
+function CustomersScreen() {
+  const totalSpend = CUSTOMERS.reduce((sum, c) => sum + c.spend, 0);
+  const columns = [
+    {
+      key: "name",
+      header: "Customer",
+      render: (c) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "32", initials: initials2(c.name), color: "blue" }),
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: c.name }),
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)" }, children: c.email })
+        ] })
+      ] })
+    },
+    {
+      key: "segment",
+      header: "Segment",
+      filters: [
+        { label: "VIP", value: "VIP" },
+        { label: "Regular", value: "Regular" },
+        { label: "New", value: "New" }
+      ],
+      render: (c) => /* @__PURE__ */ jsx(Chip, { color: SEGMENT_COLOR[c.segment], dot: true, children: c.segment })
+    },
+    { key: "country", header: "Country" },
+    { key: "orders", header: "Orders", align: "center" },
+    {
+      key: "spend",
+      header: "Lifetime spend",
+      align: "right",
+      render: (c) => /* @__PURE__ */ jsx(
+        Money,
+        {
+          value: c.spend,
+          currency: "USD",
+          locale: "en-US",
+          tone: c.segment === "VIP" ? "increase" : "default",
+          style: { font: "var(--klun-text-label-sm)" }
+        }
+      )
+    },
+    {
+      key: "lastSeen",
+      header: "Last active",
+      render: (c) => /* @__PURE__ */ jsx(
+        RelativeTime,
+        {
+          date: c.lastSeen,
+          live: false,
+          style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)" }
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Customers" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Segments, spend and engagement across your customer base." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-user-add-line" }), children: "Invite customer" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
+      /* @__PURE__ */ jsx(MiniStat, { label: "Customers", value: "9,402", hint: "+2.3% this month" }),
+      /* @__PURE__ */ jsx(MiniStat, { label: "New (30d)", value: "384", hint: "+12.4% vs last month", tone: "success" }),
+      /* @__PURE__ */ jsx(MiniStat, { label: "Repeat rate", value: "46%", hint: "+1.8 pts", tone: "success" }),
+      /* @__PURE__ */ jsx(MiniStat, { label: "Lifetime value shown", value: /* @__PURE__ */ jsx(Money, { value: totalSpend, currency: "USD", locale: "en-US", size: "lg" }), hint: "top 8 customers", tone: "feature" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        columns,
+        rows: CUSTOMERS,
+        getRowId: (c) => c.id,
+        title: "All customers",
+        sortable: true,
+        exportable: { filename: "customers.csv" },
+        pagination: { defaultPageSize: 8 }
+      }
+    )
+  ] });
+}
+var ROLES = ["Owner", "Admin", "Manager", "Editor", "Viewer"];
+var INITIAL_USERS = [
+  { id: "u1", name: "Anna Krause", email: "anna@acme.io", role: "Owner", status: "Active", twoFA: true, lastSeen: "2026-09-16T08:30:00Z" },
+  { id: "u2", name: "Ben Ortiz", email: "ben@acme.io", role: "Admin", status: "Active", twoFA: true, lastSeen: "2026-09-16T06:10:00Z" },
+  { id: "u3", name: "Chloe Lin", email: "chloe@acme.io", role: "Manager", status: "Active", twoFA: false, lastSeen: "2026-09-15T19:45:00Z" },
+  { id: "u4", name: "Dmitri Volkov", email: "dmitri@acme.io", role: "Editor", status: "Invited", twoFA: false, lastSeen: "2026-09-15T12:05:00Z" },
+  { id: "u5", name: "Erin Walsh", email: "erin@acme.io", role: "Editor", status: "Active", twoFA: true, lastSeen: "2026-09-14T16:20:00Z" },
+  { id: "u6", name: "Farid Haddad", email: "farid@acme.io", role: "Viewer", status: "Suspended", twoFA: false, lastSeen: "2026-09-02T09:00:00Z" },
+  { id: "u7", name: "Grace Miller", email: "grace@acme.io", role: "Viewer", status: "Active", twoFA: false, lastSeen: "2026-09-13T20:12:00Z" }
+];
+var ROLE_COLOR = {
+  Owner: "purple",
+  Admin: "blue",
+  Manager: "teal",
+  Editor: "green",
+  Viewer: "gray"
+};
+var STATUS_COLOR4 = {
+  Active: "green",
+  Invited: "blue",
+  Suspended: "gray"
+};
+var initials3 = (name) => name.split(" ").map((s) => s[0]).join("");
+function UsersScreen() {
+  const [users, setUsers] = useState(INITIAL_USERS);
+  const [editor, setEditor] = useState(null);
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    role: "Viewer",
+    twoFA: false
+  });
+  const openCreate = () => {
+    setForm({ name: "", email: "", role: "Viewer", twoFA: false });
+    setEditor({ mode: "create" });
+  };
+  const openEdit = (user) => {
+    setForm({ name: user.name, email: user.email, role: user.role, twoFA: user.twoFA });
+    setEditor({ mode: "edit", user });
+  };
+  const save = () => {
+    if (!editor) return;
+    if (editor.mode === "create") {
+      setUsers((prev) => [
+        ...prev,
+        {
+          id: `u${Date.now()}`,
+          name: form.name.trim() || "New teammate",
+          email: form.email.trim() || "teammate@acme.io",
+          role: form.role,
+          status: "Invited",
+          twoFA: form.twoFA,
+          lastSeen: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      ]);
+    } else if (editor.user) {
+      setUsers(
+        (prev) => prev.map(
+          (u) => u.id === editor.user.id ? { ...u, name: form.name.trim() || u.name, email: form.email.trim() || u.email, role: form.role, twoFA: form.twoFA } : u
+        )
+      );
+    }
+    setEditor(null);
+  };
+  const toggleSuspend = (user) => {
+    setUsers(
+      (prev) => prev.map(
+        (u) => u.id === user.id ? { ...u, status: u.status === "Suspended" ? "Active" : "Suspended" } : u
+      )
+    );
+  };
+  const remove = async (user) => {
+    const res = await Confirm({
+      title: `Remove ${user.name}?`,
+      description: `${user.email} will lose access to the workspace immediately. This can't be undone.`,
+      intent: "danger",
+      confirmText: "Remove user"
+    });
+    if (res === true || typeof res === "object" && res.confirmed) {
+      setUsers((prev) => prev.filter((u) => u.id !== user.id));
+    }
+  };
+  const columns = [
+    {
+      key: "name",
+      header: "User",
+      render: (u) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "32", initials: initials3(u.name), color: "blue" }),
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: u.name }),
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)" }, children: u.email })
+        ] })
+      ] })
+    },
+    {
+      key: "role",
+      header: "Role",
+      filters: ROLES.map((r) => ({ label: r, value: r })),
+      render: (u) => /* @__PURE__ */ jsx(Chip, { color: ROLE_COLOR[u.role], dot: true, children: u.role })
+    },
+    {
+      key: "status",
+      header: "Status",
+      filters: ["Active", "Invited", "Suspended"].map((s) => ({ label: s, value: s })),
+      render: (u) => /* @__PURE__ */ jsx(Badge, { color: STATUS_COLOR4[u.status], variant: "light", size: "small", dot: true, children: u.status })
+    },
+    {
+      key: "twoFA",
+      header: "2FA",
+      align: "center",
+      render: (u) => u.twoFA ? /* @__PURE__ */ jsx(Badge, { color: "green", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-lock-2-line" }), children: "On" }) : /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-lock-unlock-line" }), children: "Off" })
+    },
+    {
+      key: "lastSeen",
+      header: "Last active",
+      render: (u) => /* @__PURE__ */ jsx(
+        RelativeTime,
+        {
+          date: u.lastSeen,
+          live: false,
+          style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)" }
+        }
+      )
+    },
+    {
+      key: "actions",
+      header: "",
+      width: 60,
+      align: "right",
+      exportable: false,
+      render: (u) => /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          align: "right",
+          width: 190,
+          trigger: /* @__PURE__ */ jsx(
+            Button,
+            {
+              kind: "compact",
+              appearance: "ghost",
+              icon: /* @__PURE__ */ jsx("i", { className: "ri-more-2-line" }),
+              "aria-label": `Actions for ${u.name}`
+            }
+          ),
+          items: [
+            { label: "Edit details", icon: /* @__PURE__ */ jsx("i", { className: "ri-edit-line" }), onClick: () => openEdit(u) },
+            { label: "Send reset link", icon: /* @__PURE__ */ jsx("i", { className: "ri-mail-send-line" }), onClick: () => {
+            } },
+            {
+              label: u.status === "Suspended" ? "Restore access" : "Suspend access",
+              icon: /* @__PURE__ */ jsx("i", { className: u.status === "Suspended" ? "ri-play-circle-line" : "ri-pause-circle-line" }),
+              onClick: () => toggleSuspend(u)
+            },
+            { divider: true, label: "" },
+            { label: "Remove user", icon: /* @__PURE__ */ jsx("i", { className: "ri-delete-bin-line" }), danger: true, onClick: () => void remove(u) }
+          ]
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Team members" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Invite people, assign roles and control access. Roles are managed on the Roles page." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-user-add-line" }), onClick: openCreate, children: "Invite user" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        columns,
+        rows: users,
+        getRowId: (u) => u.id,
+        title: `Members (${users.length})`,
+        sortable: true,
+        exportable: { filename: "team.csv" },
+        pagination: { defaultPageSize: 8 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: editor !== null,
+        onClose: () => setEditor(null),
+        title: editor?.mode === "create" ? "Invite user" : "Edit user",
+        description: editor?.mode === "create" ? "They'll receive an email with a link to set their password." : editor?.user?.email,
+        okText: editor?.mode === "create" ? "Send invite" : "Save changes",
+        onOk: save,
+        width: 480,
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+              /* @__PURE__ */ jsx(Label, { children: "Full name" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: "Jane Cooper",
+                  value: form.name,
+                  onChange: (e) => setForm((f) => ({ ...f, name: e.target.value }))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+              /* @__PURE__ */ jsx(Label, { children: "Role" }),
+              /* @__PURE__ */ jsx(Select, { value: form.role, onChange: (e) => setForm((f) => ({ ...f, role: e.target.value })), children: ROLES.map((r) => /* @__PURE__ */ jsx("option", { value: r, children: r }, r)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+            /* @__PURE__ */ jsx(Label, { children: "Email address" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "email",
+                placeholder: "jane@acme.io",
+                leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-mail-line" }),
+                value: form.email,
+                onChange: (e) => setForm((f) => ({ ...f, email: e.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 16,
+                paddingTop: 4
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: "Require two-factor authentication" }),
+                  /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-sub-600)" }, children: "Ask for a second factor at every sign-in." })
+                ] }),
+                /* @__PURE__ */ jsx(Switch, { checked: form.twoFA, onChange: (c) => setForm((f) => ({ ...f, twoFA: c })) })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var ROLES2 = [
+  { id: "owner", name: "Owner", description: "Full access including billing and workspace settings.", members: 1 },
+  { id: "admin", name: "Admin", description: "Manages people, roles and everything in the workspace.", members: 3 },
+  { id: "manager", name: "Manager", description: "Runs day-to-day operations across orders and products.", members: 8 },
+  { id: "editor", name: "Editor", description: "Creates and edits content; cannot delete or manage users.", members: 14 },
+  { id: "viewer", name: "Viewer", description: "Read-only access to dashboards and reports.", members: 46 }
+];
+var MODULES = ["Dashboard", "Orders", "Products", "Customers", "Reports", "Users", "Billing"];
+var ACTIONS = ["View", "Create", "Edit", "Delete", "Manage"];
+var key = (m, a) => `${m}:${a}`;
+function seed(fn) {
+  const out = {};
+  for (const m of MODULES) for (const a of ACTIONS) out[key(m, a)] = fn(m, a);
+  return out;
+}
+var OPERATIONS = ["Orders", "Products", "Customers"];
+var INITIAL = {
+  owner: seed(() => true),
+  admin: seed(() => true),
+  manager: seed((m, a) => OPERATIONS.includes(m) ? a !== "Manage" : a === "View"),
+  editor: seed((m, a) => OPERATIONS.includes(m) ? a === "View" || a === "Create" || a === "Edit" : a === "View"),
+  viewer: seed((m, a) => OPERATIONS.includes(m) ? a === "View" : false)
+};
+function RolesScreen() {
+  const [roleId, setRoleId] = useState("manager");
+  const [perms, setPerms] = useState(() => ROLES2.map((r) => ({ ...INITIAL[r.id] })));
+  const [baseline, setBaseline] = useState(() => ROLES2.map((r) => ({ ...INITIAL[r.id] })));
+  const roleIndex = ROLES2.findIndex((r) => r.id === roleId);
+  const current = perms[roleIndex];
+  const base = baseline[roleIndex];
+  const dirty = JSON.stringify(current) !== JSON.stringify(base);
+  const role = ROLES2[roleIndex];
+  const setCell = (m, a, value) => {
+    setPerms((prev) => prev.map((p, i) => i === roleIndex ? { ...p, [key(m, a)]: value } : p));
+  };
+  const setRow = (m, value) => {
+    setPerms(
+      (prev) => prev.map((p, i) => {
+        if (i !== roleIndex) return p;
+        const next = { ...p };
+        for (const a of ACTIONS) next[key(m, a)] = value;
+        return next;
+      })
+    );
+  };
+  const granted = MODULES.filter((m) => ACTIONS.every((a) => current[key(m, a)])).length;
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Roles & permissions" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Control what each role can see and do. Changes apply to every member of the role." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "300px minmax(0, 1fr)", gap: 20, alignItems: "start" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: ROLES2.map((r) => {
+        const on = r.id === roleId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setRoleId(r.id),
+            style: {
+              textAlign: "left",
+              padding: "12px 14px",
+              border: "none",
+              borderRadius: "var(--klun-radius-xl)",
+              cursor: "pointer",
+              background: on ? "var(--klun-bg-white-0)" : "transparent",
+              boxShadow: on ? "inset 0 0 0 1px var(--klun-stroke-soft-200), var(--klun-shadow-xs)" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.name }),
+                /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "lighter", size: "small", children: r.members })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    display: "block",
+                    marginTop: 2,
+                    font: "var(--klun-text-paragraph-xs)",
+                    color: "var(--klun-text-soft-400)"
+                  },
+                  children: r.description
+                }
+              )
+            ]
+          },
+          r.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 0, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              padding: "16px 20px",
+              boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: [
+                  role.name,
+                  " permissions"
+                ] }),
+                /* @__PURE__ */ jsxs(Badge, { color: "blue", variant: "light", size: "small", children: [
+                  role.members,
+                  " ",
+                  role.members === 1 ? "member" : "members"
+                ] }),
+                dirty ? /* @__PURE__ */ jsx(Badge, { color: "yellow", variant: "light", size: "small", dot: true, children: "Unsaved changes" }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "neutral",
+                    appearance: "ghost",
+                    disabled: !dirty,
+                    onClick: () => setPerms((prev) => prev.map((p, i) => i === roleIndex ? { ...base } : p)),
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    disabled: !dirty,
+                    onClick: () => setBaseline((prev) => prev.map((p, i) => i === roleIndex ? { ...current } : p)),
+                    children: "Save changes"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "8px 20px 20px" }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "minmax(140px, 1fr) repeat(5, 74px) 64px",
+                alignItems: "center",
+                gap: 4,
+                padding: "10px 8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-soft-400)", textTransform: "uppercase", letterSpacing: "0.02em" }, children: "Module" }),
+                ACTIONS.map((a) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      font: "var(--klun-text-label-xs)",
+                      color: "var(--klun-text-soft-400)",
+                      textTransform: "uppercase",
+                      letterSpacing: "0.02em",
+                      textAlign: "center"
+                    },
+                    children: a
+                  },
+                  a
+                )),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      font: "var(--klun-text-label-xs)",
+                      color: "var(--klun-text-soft-400)",
+                      textTransform: "uppercase",
+                      letterSpacing: "0.02em",
+                      textAlign: "center"
+                    },
+                    children: "All"
+                  }
+                )
+              ]
+            }
+          ),
+          MODULES.map((m, i) => {
+            const all = ACTIONS.every((a) => current[key(m, a)]);
+            const some = !all && ACTIONS.some((a) => current[key(m, a)]);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "minmax(140px, 1fr) repeat(5, 74px) 64px",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "10px 8px",
+                  boxShadow: "inset 0 1px 0 var(--klun-stroke-soft-200)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: m }),
+                  ACTIONS.map((a) => /* @__PURE__ */ jsx("span", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      size: "small",
+                      checked: current[key(m, a)],
+                      onChange: (c) => setCell(m, a, c)
+                    }
+                  ) }, a)),
+                  /* @__PURE__ */ jsx("span", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: all, indeterminate: some, onChange: (c) => setRow(m, c) }) })
+                ]
+              },
+              m
+            );
+          }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                marginTop: 14,
+                paddingTop: 14,
+                boxShadow: "inset 0 1px 0 var(--klun-stroke-soft-200)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: [
+                  "Full access to ",
+                  granted,
+                  " of ",
+                  MODULES.length,
+                  " modules"
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "Owner role is always unrestricted" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var RANGES = [
+  { value: "7d", label: "7d" },
+  { value: "30d", label: "30d" },
+  { value: "90d", label: "90d" }
+];
+var SALES_SERIES = {
+  "7d": { data: [8200, 9100, 7800, 10400, 12600, 11200, 14800], labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
+  "30d": { data: [38200, 41600, 39800, 47400, 52100], labels: ["W1", "W2", "W3", "W4", "W5"] },
+  "90d": { data: [98200, 110400, 106800, 121600, 134200, 148900], labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep"] }
+};
+var TRAFFIC_SERIES = {
+  "7d": { data: [12400, 13800, 12950, 15600, 17200, 14900, 18600], labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
+  "30d": { data: [58600, 61200, 59400, 66800, 72300], labels: ["W1", "W2", "W3", "W4", "W5"] },
+  "90d": { data: [142e3, 156800, 149500, 168200, 178400, 192600], labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep"] }
+};
+var SALES_REGIONS = [
+  { region: "Europe", orders: 512, revenue: 42860, share: 50 },
+  { region: "North America", orders: 388, revenue: 26400, share: 31 },
+  { region: "Asia Pacific", orders: 241, revenue: 11240, share: 13 },
+  { region: "Rest of world", orders: 143, revenue: 4420, share: 6 }
+];
+var TRAFFIC_DEVICES = [
+  { device: "Desktop", sessions: 73420, share: 57 },
+  { device: "Mobile", sessions: 44180, share: 34 },
+  { device: "Tablet", sessions: 9420, share: 7 },
+  { device: "Other", sessions: 2520, share: 2 }
+];
+var SALES_TOP = [
+  { key: "1", label: 'Lumen 27" 4K Monitor', value: 24860, share: 100 },
+  { key: "2", label: "Aero Wireless Keyboard", value: 18240, share: 73 },
+  { key: "3", label: "Echo Conference Speaker", value: 12980, share: 52 },
+  { key: "4", label: "Orbit Webcam 4K", value: 9640, share: 39 },
+  { key: "5", label: "Pulse USB-C Dock", value: 6210, share: 25 }
+];
+var TRAFFIC_TOP = [
+  { key: "1", label: "/pricing", value: 12480, share: 100 },
+  { key: "2", label: "/docs/getting-started", value: 9860, share: 79 },
+  { key: "3", label: "/blog/design-tokens", value: 7420, share: 59 },
+  { key: "4", label: "/changelog", value: 5140, share: 41 },
+  { key: "5", label: "/contact", value: 2380, share: 19 }
+];
+function ReportsScreen({ view = "sales" }) {
+  const [range, setRange] = useState("7d");
+  const sales = view === "sales";
+  const series = (sales ? SALES_SERIES : TRAFFIC_SERIES)[range];
+  const regionColumns = [
+    { key: "region", header: "Region" },
+    { key: "orders", header: "Orders", align: "center" },
+    {
+      key: "revenue",
+      header: "Revenue",
+      align: "right",
+      render: (r) => /* @__PURE__ */ jsx(Money, { value: r.revenue, currency: "USD", locale: "en-US", style: { font: "var(--klun-text-label-sm)" } })
+    },
+    {
+      key: "share",
+      header: "Share",
+      width: 170,
+      render: (r) => /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 140 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(ProgressBar, { value: r.share }) }),
+        /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-sub-600)", width: 34, textAlign: "right" }, children: [
+          r.share,
+          "%"
+        ] })
+      ] })
+    }
+  ];
+  const deviceColumns = [
+    { key: "device", header: "Device" },
+    {
+      key: "sessions",
+      header: "Sessions",
+      align: "center",
+      render: (r) => r.sessions.toLocaleString("en-US")
+    },
+    {
+      key: "share",
+      header: "Share",
+      width: 170,
+      render: (r) => /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 140 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(ProgressBar, { value: r.share, color: "primary" }) }),
+        /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-label-xs)", color: "var(--klun-text-sub-600)", width: 34, textAlign: "right" }, children: [
+          r.share,
+          "%"
+        ] })
+      ] })
+    }
+  ];
+  const top = sales ? SALES_TOP : TRAFFIC_TOP;
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 24, display: "flex", flexDirection: "column", gap: 20 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: sales ? "Sales report" : "Traffic report" }),
+        /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: sales ? "Revenue, channels and the products that drive them." : "Sessions, sources and where visitors spend their time." })
+      ] }),
+      /* @__PURE__ */ jsx(SegmentedControl, { items: RANGES, value: range, onChange: (v) => setRange(v) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }, children: sales ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Kpi, { label: "Revenue", value: "$84,920", delta: "12.4%", tone: "primary", icon: /* @__PURE__ */ jsx("i", { className: "ri-money-dollar-circle-line" }), spark: [10, 14, 12, 18, 16, 24, 22, 30] }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Orders", value: "1,284", delta: "6.1%", tone: "success", icon: /* @__PURE__ */ jsx("i", { className: "ri-shopping-bag-line" }), spark: [8, 10, 9, 14, 13, 16, 18, 22] }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Avg. order value", value: "$66.10", delta: "1.2%", tone: "warning", icon: /* @__PURE__ */ jsx("i", { className: "ri-shopping-cart-2-line" }), spark: [60, 62, 61, 64, 63, 65, 66, 66] }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Conversion", value: "3.6%", delta: "0.8%", tone: "info", icon: /* @__PURE__ */ jsx("i", { className: "ri-percent-line" }), spark: [2, 3, 2.5, 3.2, 3, 3.4, 3.5, 3.6] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Kpi, { label: "Sessions", value: "128,540", delta: "8.2%", tone: "primary", icon: /* @__PURE__ */ jsx("i", { className: "ri-line-chart-line" }), spark: [12, 14, 13, 16, 15, 18, 17, 20] }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Users", value: "84,210", delta: "5.4%", tone: "success", icon: /* @__PURE__ */ jsx("i", { className: "ri-group-line" }), spark: [8, 9, 8, 10, 9, 11, 10, 12] }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Bounce rate", value: "32.4%", delta: "1.1%", trend: "down", tone: "danger", icon: /* @__PURE__ */ jsx("i", { className: "ri-logout-box-r-line" }), spark: [40, 38, 39, 36, 35, 34, 33, 32] }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Avg. session", value: "4m 12s", delta: "2.0%", tone: "info", icon: /* @__PURE__ */ jsx("i", { className: "ri-timer-line" }), spark: [3.4, 3.5, 3.7, 3.6, 3.9, 4, 4.1, 4.2] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 20, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 16 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: sales ? "Revenue over time" : "Sessions over time" }),
+        /* @__PURE__ */ jsxs("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: [
+          "Last ",
+          range
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        AreaChart2,
+        {
+          data: series.data,
+          labels: series.labels,
+          tone: sales ? "primary" : "info",
+          height: 220,
+          formatValue: sales ? (v) => `$${v >= 1e3 ? `${Math.round(v / 100) / 10}k` : Math.round(v)}` : void 0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 16, alignItems: "start" }, children: [
+      /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 20, children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 16 }, children: sales ? "Sales by channel" : "Traffic sources" }),
+        /* @__PURE__ */ jsx(
+          DonutChart,
+          {
+            centerValue: sales ? "52%" : "48%",
+            centerLabel: sales ? "Online" : "Organic",
+            data: sales ? [
+              { label: "Online", value: 52 },
+              { label: "Retail", value: 28 },
+              { label: "Partner", value: 14 },
+              { label: "Other", value: 6 }
+            ] : [
+              { label: "Organic", value: 48 },
+              { label: "Direct", value: 22 },
+              { label: "Referral", value: 18 },
+              { label: "Social", value: 12 }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 20, children: [
+        /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 16 }, children: sales ? "Top products" : "Top pages" }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: top.map((row) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: row.label }),
+            /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)" }, children: sales ? `$${row.value.toLocaleString("en-US")}` : `${row.value.toLocaleString("en-US")} views` })
+          ] }),
+          /* @__PURE__ */ jsx(ProgressBar, { value: row.share, color: sales ? "primary" : "success" })
+        ] }, row.key)) })
+      ] })
+    ] }),
+    sales ? /* @__PURE__ */ jsx(Table, { columns: regionColumns, rows: SALES_REGIONS, getRowId: (r) => r.region, title: "Regional breakdown" }) : /* @__PURE__ */ jsx(Table, { columns: deviceColumns, rows: TRAFFIC_DEVICES, getRowId: (r) => r.device, title: "Devices" })
+  ] });
+}
+function Field3({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    children
+  ] });
+}
+function Section({ title, subtitle, children, footer }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: "stroke", padding: 0, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: "16px 20px", boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: title }),
+      subtitle ? /* @__PURE__ */ jsx("div", { style: { marginTop: 2, font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { padding: 20 }, children }),
+    footer ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "14px 20px",
+          boxShadow: "inset 0 1px 0 var(--klun-stroke-soft-200)",
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: 8
+        },
+        children: footer
+      }
+    ) : null
+  ] });
+}
+var NAV = [
+  { key: "profile", label: "Profile", icon: "ri-user-line" },
+  { key: "account", label: "Account", icon: "ri-shield-user-line" },
+  { key: "notifications", label: "Notifications", icon: "ri-notification-3-line" },
+  { key: "billing", label: "Billing", icon: "ri-bank-card-line" },
+  { key: "api", label: "API keys", icon: "ri-key-2-line" }
+];
+function MetronicSettingsTemplate() {
+  const [tab, setTab] = useState("profile");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-mode": "metronic",
+      "data-density": "compact",
+      style: {
+        minHeight: "100%",
+        overflow: "auto",
+        background: "var(--klun-bg-weak-50)",
+        color: "var(--klun-text-strong-950)"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            maxWidth: 1e3,
+            margin: "0 auto",
+            padding: 28,
+            display: "flex",
+            flexDirection: "column",
+            gap: 20
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Breadcrumb, { items: [{ label: "Home" }, { label: "Settings" }] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, marginTop: 8 }, children: [
+                /* @__PURE__ */ jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)" }, children: "Settings" }),
+                /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", dot: true, children: "All changes saved" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "220px minmax(0, 1fr)", gap: 20, alignItems: "start" }, children: [
+              /* @__PURE__ */ jsx("nav", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: NAV.map((item) => {
+                const on = tab === item.key;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setTab(item.key),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 10,
+                      height: 36,
+                      padding: "0 12px",
+                      border: "none",
+                      borderRadius: "var(--klun-radius-lg)",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      background: on ? "var(--klun-bg-white-0)" : "transparent",
+                      boxShadow: on ? "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: item.icon,
+                          style: { fontSize: 16, color: on ? "var(--klun-primary-base)" : "var(--klun-icon-sub-600)" }
+                        }
+                      ),
+                      item.label
+                    ]
+                  },
+                  item.key
+                );
+              }) }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [
+                /* @__PURE__ */ jsx(Section, { title: "Profile photo", subtitle: "PNG or JPG, at least 200\xD7200px.", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 76, height: 76, flexShrink: 0 }, children: [
+                    /* @__PURE__ */ jsx(Avatar, { size: "72", initials: "AK", color: "blue" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "aria-label": "Change photo",
+                        style: {
+                          position: "absolute",
+                          right: 0,
+                          bottom: 0,
+                          width: 26,
+                          height: 26,
+                          borderRadius: "var(--klun-radius-pill)",
+                          border: "2px solid var(--klun-bg-white-0)",
+                          background: "var(--klun-primary-base)",
+                          color: "var(--klun-text-white-0)",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          cursor: "pointer",
+                          fontSize: 13
+                        },
+                        children: /* @__PURE__ */ jsx("i", { className: "ri-camera-line" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                      /* @__PURE__ */ jsx(Button, { size: "small", children: "Upload new" }),
+                      /* @__PURE__ */ jsx(Button, { size: "small", variant: "neutral", appearance: "ghost", children: "Remove" })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: "Recommended 400\xD7400px, max 2MB." })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  Section,
+                  {
+                    title: "Personal information",
+                    footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "ghost", children: "Cancel" }),
+                      /* @__PURE__ */ jsx(Button, { children: "Save changes" })
+                    ] }),
+                    children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+                      /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+                        /* @__PURE__ */ jsx(Field3, { label: "First name", children: /* @__PURE__ */ jsx(Input, { defaultValue: "Anna" }) }),
+                        /* @__PURE__ */ jsx(Field3, { label: "Last name", children: /* @__PURE__ */ jsx(Input, { defaultValue: "Krause" }) })
+                      ] }),
+                      /* @__PURE__ */ jsx(Field3, { label: "Email", children: /* @__PURE__ */ jsx(Input, { defaultValue: "anna@acme.io", leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-mail-line" }) }) }),
+                      /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+                        /* @__PURE__ */ jsx(Field3, { label: "Role", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "designer", children: [
+                          /* @__PURE__ */ jsx("option", { value: "designer", children: "Product designer" }),
+                          /* @__PURE__ */ jsx("option", { value: "eng", children: "Engineer" }),
+                          /* @__PURE__ */ jsx("option", { value: "pm", children: "Product manager" })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Field3, { label: "Timezone", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "cet", children: [
+                          /* @__PURE__ */ jsx("option", { value: "cet", children: "CET \u2014 Berlin" }),
+                          /* @__PURE__ */ jsx("option", { value: "pst", children: "PST \u2014 San Francisco" }),
+                          /* @__PURE__ */ jsx("option", { value: "jst", children: "JST \u2014 Tokyo" })
+                        ] }) })
+                      ] }),
+                      /* @__PURE__ */ jsx(Field3, { label: "Bio", children: /* @__PURE__ */ jsx(Textarea, { rows: 3, defaultValue: "Product designer focused on design systems and tooling." }) })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(Section, { title: "Notifications", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+                  /* @__PURE__ */ jsx(
+                    ToggleRow,
+                    {
+                      first: true,
+                      title: "Email notifications",
+                      desc: "Order updates, mentions and weekly summaries.",
+                      defaultChecked: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ToggleRow,
+                    {
+                      title: "Push notifications",
+                      desc: "Real-time alerts on your devices.",
+                      defaultChecked: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ToggleRow, { title: "Product newsletter", desc: "Occasional news about new features." })
+                ] }) })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function ToggleRow({ title, desc, defaultChecked, first }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 16,
+        padding: "14px 0",
+        boxShadow: first ? "none" : "inset 0 1px 0 var(--klun-stroke-soft-200)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+          /* @__PURE__ */ jsx("b", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: title }),
+          /* @__PURE__ */ jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-sub-600)" }, children: desc })
+        ] }),
+        /* @__PURE__ */ jsx(Switch, { defaultChecked, onChange: () => {
+        } })
+      ]
+    }
+  );
+}
+var SCREENS = {
+  dashboard: /* @__PURE__ */ jsx(DashboardScreen, {}),
+  orders: /* @__PURE__ */ jsx(OrdersScreen, {}),
+  products: /* @__PURE__ */ jsx(ProductsScreen, {}),
+  customers: /* @__PURE__ */ jsx(CustomersScreen, {}),
+  users: /* @__PURE__ */ jsx(UsersScreen, {}),
+  roles: /* @__PURE__ */ jsx(RolesScreen, {}),
+  reports: /* @__PURE__ */ jsx(ReportsScreen, { view: "sales" }),
+  sales: /* @__PURE__ */ jsx(ReportsScreen, { view: "sales" }),
+  traffic: /* @__PURE__ */ jsx(ReportsScreen, { view: "traffic" }),
+  settings: /* @__PURE__ */ jsx(MetronicSettingsTemplate, {})
+};
+function Placeholder({ name }) {
+  return /* @__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 } }),
+        "\u201C",
+        name,
+        "\u201D isn't part of this demo."
+      ]
+    }
+  );
+}
+function MetronicDashboardTemplate() {
+  const [active, setActive] = useState("dashboard");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-mode": "metronic",
+      "data-density": "compact",
+      style: {
+        display: "flex",
+        height: "100%",
+        background: "var(--klun-bg-weak-50)",
+        color: "var(--klun-text-strong-950)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(MetronicSidebar, { active, onNavigate: setActive }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx(MetronicTopBar, {}),
+          /* @__PURE__ */ jsx("main", { style: { flex: 1, overflow: "auto" }, children: SCREENS[active] ?? /* @__PURE__ */ jsx(Placeholder, { name: active }) })
+        ] })
+      ]
+    }
+  );
+}
 
-export { AIAssistantTemplate, AgentChatTemplate, CalendarTemplate, CryptoTemplate, DashboardTemplate, MarketingTemplate, OverviewScreen, PricingTemplate, SettingsScreen, SettingsTemplate, Sidebar, TopBar };
+export { AIAssistantTemplate, AgentChatTemplate, AreaChart2 as AreaChart, BarChart, CATEGORIES, CalendarTemplate, CryptoTemplate, CustomersScreen, DashboardScreen, DashboardTemplate, DonutChart, Kpi, MarketingTemplate, MetronicDashboardTemplate, MetronicSettingsTemplate, MetronicSidebar, MetronicTopBar, MiniStat, OrdersScreen, OverviewScreen, PricingTemplate, ProductWizardPage, ProductsScreen, ReportsScreen, RolesScreen, STATUS_COLOR3 as STATUS_COLOR, SettingsScreen, SettingsTemplate, Sidebar, Sparkline, TopBar, UsersScreen, deriveStatus, emptyDraft };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map