@ramme-io/ui 4.0.0 → 4.1.0

package/dist/components/ai/KeyInjectionOverlay.js

@@ -1,22 +1,22 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { useState as n } from "react";
 import { Button as m } from "../ui/Button.js";
 import { Input as c } from "../forms/Input.js";
 import { Card as u } from "../layout/Card.js";
 import { Icon as f } from "../ui/Icon.js";
-function I({ status: i, setSessionKey: o }) {
-  const [s, a] = n(""), [l, d] = n(!0);
-  return i !== "BYOK_REQUIRED" && i !== "KEY_EXPIRED" ? null : /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ e(u, { className: "w-[450px] p-6 shadow-xl border-destructive/20 border", children: /* @__PURE__ */ r("form", { onSubmit: (t) => {
-    t.preventDefault(), s.trim() && o(s.trim());
+function I({ status: i, setSessionKey: a }) {
+  const [s, o] = n(""), [l, d] = n(!0);
+  return i !== "BYOK_REQUIRED" && i !== "KEY_EXPIRED" ? null : /* @__PURE__ */ e("div", { className: "fixed inset-0 z-drawer flex items-center justify-center bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ e(u, { className: "w-[450px] p-6 shadow-xl border-destructive/20 border", children: /* @__PURE__ */ t("form", { onSubmit: (r) => {
+    r.preventDefault(), s.trim() && a(s.trim());
   }, className: "space-y-4", children: [
-    /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-destructive", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-destructive", children: [
         /* @__PURE__ */ e(f, { name: "alert-triangle", size: 20 }),
         /* @__PURE__ */ e("h3", { className: "font-semibold text-lg", children: "AI Key Required" })
       ] }),
       /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: i === "KEY_EXPIRED" ? "Your AI API key has expired or is invalid. Please provide a new key." : "This terminal requires an AI API key to function. We do not bundle keys in the client for security." })
     ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: [
       /* @__PURE__ */ e("label", { className: "text-sm font-medium text-foreground", children: "API Key" }),
       /* @__PURE__ */ e(
         c,
@@ -24,20 +24,20 @@ function I({ status: i, setSessionKey: o }) {
           type: "password",
           placeholder: "Paste your AI provider key here...",
           value: s,
-          onChange: (t) => a(t.target.value),
+          onChange: (r) => o(r.target.value),
           className: "font-mono w-full font-medium",
           autoComplete: "off"
         }
       )
     ] }),
-    /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "checkbox",
           id: "session-only",
           checked: l,
-          onChange: (t) => d(t.target.checked),
+          onChange: (r) => d(r.target.checked),
           className: "rounded border-input text-primary focus:ring-primary"
         }
       ),

package/dist/components/auth/AuthLayout.js

@@ -3,7 +3,7 @@ import { Outlet as c } from "react-router-dom";
 import { useTheme as d } from "../../contexts/ThemeContext.js";
 import { Button as t } from "../ui/Button.js";
 const m = () => {
-  const { setTheme: n, customTheme: a, setCustomTheme: i } = d(), s = {
+  const { setTheme: a, customTheme: n, setCustomTheme: i } = d(), s = {
     name: "Cyberpunk",
     colors: {
       primary: "255 238 88",
@@ -26,19 +26,19 @@ const m = () => {
     },
     borderRadius: "0px"
   };
-  return /* @__PURE__ */ o("div", { className: "absolute top-4 right-4 flex gap-2 z-50", children: [
+  return /* @__PURE__ */ o("div", { className: "absolute top-4 right-4 flex gap-2 z-drawer", children: [
     ["light", "dark", "system"].map((r) => /* @__PURE__ */ e(
       t,
       {
         size: "sm",
         variant: "ghost",
-        onClick: () => n(r),
+        onClick: () => a(r),
         className: "opacity-50 hover:opacity-100 capitalize",
         children: r
       },
       r
     )),
-    /* @__PURE__ */ e(t, { size: "sm", variant: "ghost", onClick: () => i(a ? null : s), className: "opacity-50 hover:opacity-100", children: "AI" })
+    /* @__PURE__ */ e(t, { size: "sm", variant: "ghost", onClick: () => i(n ? null : s), className: "opacity-50 hover:opacity-100", children: "AI" })
   ] });
 }, g = () => /* @__PURE__ */ o("div", { className: "min-h-dvh w-full flex items-center justify-center bg-background text-foreground relative transition-colors duration-300", children: [
   /* @__PURE__ */ e("div", { className: "absolute inset-0 z-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#888_1px,transparent_1px)] [background-size:16px_16px]" }),

package/dist/components/data-display/CodeBlock.d.ts

@@ -1,23 +1,49 @@
 import React from 'react';
-interface CodeBlockProps {
+export interface CodeBlockProps {
+    /** The snippet. Leading/trailing blank lines are trimmed. */
     code: string;
-    language: string;
+    /** Prism language id — `tsx`, `bash`, `css`, `json`, … Defaults to `tsx`. */
+    language?: string;
+    /** Shown in the header. Prefer a real path (`src/App.tsx`); falls back to the language. */
+    filename?: string;
+    /** Gutter line numbers. Worth it when prose refers to "line 12". */
+    showLineNumbers?: boolean;
+    /** 1-based lines to emphasise — the "change this line" case in a tutorial. */
+    highlightLines?: number[];
+    /** Wrap long lines instead of scrolling. Off by default: wrapping a shell command misrepresents it. */
+    wrap?: boolean;
+    /** Hide the copy button. Only for snippets that are not meant to be run. */
+    hideCopy?: boolean;
     className?: string;
 }
 /**
  * @wizard
  * @name CodeBlock
- * @description A component for displaying formatted and syntax-highlighted code snippets.
- * @tags ui, data-display, code
+ * @description The one way to show code. Syntax-highlighted, theme-aware, with a copy button that works on touch and outside secure contexts. Use for every snippet in docs and tutorials — do not hand-roll a <pre>. Long lines scroll inside the block so the page never scrolls sideways on a phone.
+ * @tags ui, data-display, code, docs, tutorial
  * @props
  * - name: code
  * type: string
- * description: The string of code to display.
+ * description: The snippet to display. Outer blank lines are trimmed.
  * - name: language
  * type: string
- * description: The programming language for syntax highlighting (e.g., 'tsx', 'css', 'javascript').
+ * description: Prism language id — 'tsx', 'bash', 'css', 'json'. Defaults to 'tsx'.
+ * - name: filename
+ * type: string
+ * description: Header label. Prefer a real path like 'src/App.tsx'; falls back to the language.
+ * - name: showLineNumbers
+ * type: boolean
+ * description: Show gutter line numbers. Use when the surrounding prose cites line numbers.
+ * - name: highlightLines
+ * type: number[]
+ * description: 1-based lines to emphasise, for "change this line" steps.
+ * - name: wrap
+ * type: boolean
+ * description: Wrap long lines instead of scrolling them. Off by default.
+ * - name: hideCopy
+ * type: boolean
+ * description: Hide the copy button, for snippets that are not meant to be run.
  * @category ui
  * @id code-block
  */
 export declare const CodeBlock: React.FC<CodeBlockProps>;
-export {};

package/dist/components/data-display/CodeBlock.js

@@ -1,45 +1,138 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import l from "react";
-import { Prism as d } from "react-syntax-highlighter";
-import { vscDarkPlus as p, coy as f } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { useTheme as h } from "../../contexts/ThemeContext.js";
-import { Card as u } from "../layout/Card.js";
-import { Icon as i } from "../ui/Icon.js";
-const T = ({ code: e, language: s, className: m }) => {
-  const { theme: r } = h(), [a, t] = l.useState(!1), n = () => {
-    navigator.clipboard.writeText(e), t(!0), setTimeout(() => t(!1), 2e3);
-  };
-  return /* @__PURE__ */ c(u, { className: `relative overflow-hidden ${m}`, children: [
-    /* @__PURE__ */ o(
-      "button",
-      {
-        onClick: n,
-        className: "absolute top-2 right-2 p-1.5 bg-card/50 hover:bg-border rounded-md transition-colors",
-        children: a ? /* @__PURE__ */ o(i, { name: "check", size: 16 }) : /* @__PURE__ */ o(i, { name: "copy", size: 16 })
-      }
-    ),
-    /* @__PURE__ */ o(
-      d,
-      {
-        language: s,
-        style: r === "dark" || r === "midnight" ? p : f,
-        showLineNumbers: !1,
-        customStyle: {
-          margin: 0,
-          padding: "1.5rem",
-          backgroundColor: "transparent",
-          fontSize: "0.875rem"
-        },
-        codeTagProps: {
-          style: {
-            fontFamily: "var(--app-font-mono)"
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import t from "react";
+import { Prism as x } from "react-syntax-highlighter";
+import { oneDark as k, oneLight as w } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { cn as C } from "../../utils/cn.js";
+import { Icon as S } from "../ui/Icon.js";
+function T() {
+  const [r, e] = t.useState(
+    () => typeof document < "u" && document.documentElement.classList.contains("dark")
+  );
+  return t.useEffect(() => {
+    const o = document.documentElement, s = () => e(o.classList.contains("dark"));
+    s();
+    const i = new MutationObserver(s);
+    return i.observe(o, { attributes: !0, attributeFilter: ["class"] }), () => i.disconnect();
+  }, []), r;
+}
+async function N(r) {
+  var o;
+  if ((o = navigator.clipboard) != null && o.writeText) {
+    await navigator.clipboard.writeText(r);
+    return;
+  }
+  const e = document.createElement("textarea");
+  e.value = r, e.setAttribute("readonly", ""), e.style.position = "fixed", e.style.opacity = "0", document.body.appendChild(e), e.select(), document.execCommand("copy"), document.body.removeChild(e);
+}
+const B = ({
+  code: r,
+  language: e = "tsx",
+  filename: o,
+  showLineNumbers: s = !1,
+  highlightLines: i,
+  wrap: b = !1,
+  hideCopy: v = !1,
+  className: g
+}) => {
+  const y = T(), [a, m] = t.useState(!1), d = t.useRef(), p = t.useMemo(() => r.replace(/^\n+|\s+$/g, ""), [r]), u = o || e;
+  t.useEffect(() => () => clearTimeout(d.current), []);
+  const h = async () => {
+    try {
+      await N(p), m(!0), clearTimeout(d.current), d.current = setTimeout(() => m(!1), 2e3);
+    } catch (l) {
+      console.warn("[CodeBlock] Copy failed", l);
+    }
+  }, c = t.useMemo(
+    () => new Set(i ?? []),
+    [i]
+  );
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: C(
+        "group relative overflow-hidden rounded-lg border border-border bg-card",
+        g
+      ),
+      children: [
+        /* @__PURE__ */ f("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-surface-muted pl-4 pr-1.5", children: [
+          /* @__PURE__ */ n("span", { className: "truncate py-2 font-mono text-2xs font-medium uppercase tracking-wider text-muted-foreground", children: u }),
+          !v && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: h,
+              className: "inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "aria-label": a ? "Copied" : `Copy ${u} snippet to clipboard`,
+              children: /* @__PURE__ */ n(
+                S,
+                {
+                  name: a ? "check" : "copy",
+                  size: 16,
+                  className: a ? "text-success" : void 0
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "overflow-x-auto overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            tabIndex: 0,
+            role: "region",
+            "aria-label": `${u} code`,
+            children: /* @__PURE__ */ n(
+              x,
+              {
+                language: e,
+                style: y ? k : w,
+                showLineNumbers: s,
+                wrapLines: c.size > 0,
+                lineProps: c.size > 0 ? (l) => ({
+                  style: {
+                    display: "block",
+                    // Semantic tokens, so the emphasis survives all five themes.
+                    backgroundColor: c.has(l) ? "rgb(var(--app-primary-color) / 0.12)" : void 0,
+                    boxShadow: c.has(l) ? "inset 2px 0 0 0 rgb(var(--app-primary-color))" : void 0
+                  }
+                }) : void 0,
+                lineNumberStyle: {
+                  minWidth: "2.5em",
+                  paddingRight: "1em",
+                  color: "rgb(var(--app-fg-muted) / 0.6)",
+                  userSelect: "none"
+                },
+                customStyle: {
+                  margin: 0,
+                  padding: "1rem 1.25rem",
+                  background: "transparent",
+                  // Sizes come from the fluid scale, never a hardcoded rem — the three
+                  // implementations this replaces used 0.875rem, 0.85rem and text-sm.
+                  fontSize: "var(--app-step--1)",
+                  lineHeight: "var(--app-leading-relaxed)",
+                  tabSize: 2,
+                  ...b ? { whiteSpace: "pre-wrap", wordBreak: "break-word" } : {}
+                },
+                codeTagProps: {
+                  style: {
+                    // The single place the code typeface is decided. Swapping the
+                    // token in index.css re-fonts every snippet in every product.
+                    fontFamily: "var(--app-font-mono)",
+                    // Ligatures off: a tutorial shows the characters you must type,
+                    // and a font that draws `=>` as one arrow misleads a beginner.
+                    fontVariantLigatures: "none"
+                  }
+                },
+                children: p
+              }
+            )
           }
-        },
-        children: e.trim()
-      }
-    )
-  ] });
+        ),
+        /* @__PURE__ */ n("span", { "aria-live": "polite", className: "sr-only", children: a ? "Copied to clipboard" : "" })
+      ]
+    }
+  );
 };
 export {
-  T as CodeBlock
+  B as CodeBlock
 };

package/dist/components/data-display/Table.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { EmptyState as d } from "../feedback/EmptyState.js";
-const b = ({ headers: r, data: a, caption: i, className: c }) => /* @__PURE__ */ e("div", { className: `overflow-x-auto rounded-lg border border-border ${c || ""}`, children: /* @__PURE__ */ o("table", { className: "w-full text-left", children: [
-  i && /* @__PURE__ */ e("caption", { className: "p-4 text-lg font-semibold text-text bg-card-alt", children: i }),
-  /* @__PURE__ */ e("thead", { className: "bg-card-alt", children: /* @__PURE__ */ e("tr", { children: r.map((t) => /* @__PURE__ */ e("th", { scope: "col", className: "p-4 text-sm font-semibold text-text whitespace-nowrap", children: t.label }, t.key)) }) }),
-  /* @__PURE__ */ e("tbody", { className: "divide-y divide-border", children: a.length > 0 ? a.map((t, n) => /* @__PURE__ */ e("tr", { className: "hover:bg-primary/5 transition-colors", children: r.map((l) => {
-    const s = t[l.key];
-    return /* @__PURE__ */ e("td", { className: "p-4 text-sm text-text-light whitespace-nowrap", children: l.render ? l.render(s, t) : String(s) }, l.key);
-  }) }, n)) : /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: r.length, children: /* @__PURE__ */ e("div", { className: "p-8 flex justify-center items-center", children: /* @__PURE__ */ e(
+const b = ({ headers: l, data: a, caption: i, className: n }) => /* @__PURE__ */ e("div", { className: `overflow-x-auto rounded-lg border border-border ${n || ""}`, children: /* @__PURE__ */ c("table", { className: "w-full text-left", children: [
+  i && /* @__PURE__ */ e("caption", { className: "p-4 text-lg font-semibold text-foreground bg-card-alt", children: i }),
+  /* @__PURE__ */ e("thead", { className: "bg-card-alt", children: /* @__PURE__ */ e("tr", { children: l.map((t) => /* @__PURE__ */ e("th", { scope: "col", className: "p-4 text-sm font-semibold text-foreground whitespace-nowrap", children: t.label }, t.key)) }) }),
+  /* @__PURE__ */ e("tbody", { className: "divide-y divide-border", children: a.length > 0 ? a.map((t, s) => /* @__PURE__ */ e("tr", { className: "hover:bg-primary/5 transition-colors", children: l.map((r) => {
+    const o = t[r.key];
+    return /* @__PURE__ */ e("td", { className: "p-4 text-sm text-muted-foreground whitespace-nowrap", children: r.render ? r.render(o, t) : String(o) }, r.key);
+  }) }, s)) : /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: l.length, children: /* @__PURE__ */ e("div", { className: "p-8 flex justify-center items-center", children: /* @__PURE__ */ e(
     d,
     {
       title: "No Data Available",

package/dist/components/feedback/EmptyState.js

@@ -1,12 +1,12 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { Card as a } from "../layout/Card.js";
-import { Icon as c } from "../ui/Icon.js";
-const n = ({ icon: t, title: r, description: m, actionButton: s, className: l }) => /* @__PURE__ */ x(a, { className: `p-8 text-center flex flex-col items-center justify-center space-y-4 ${l || ""}`, children: [
-  t && /* @__PURE__ */ e("div", { className: "text-text-light/50 mb-4", children: /* @__PURE__ */ e(c, { name: t, size: 64, strokeWidth: 1.5 }) }),
-  /* @__PURE__ */ e("h3", { className: "text-2xl font-semibold text-text", children: r }),
-  m && /* @__PURE__ */ e("p", { className: "text-text-light max-w-md", children: m }),
-  s && /* @__PURE__ */ e("div", { className: "mt-4", children: s })
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Card as o } from "../layout/Card.js";
+import { Icon as a } from "../ui/Icon.js";
+const i = ({ icon: t, title: s, description: r, actionButton: m, className: d }) => /* @__PURE__ */ l(o, { className: `p-8 text-center flex flex-col items-center justify-center space-y-4 ${d || ""}`, children: [
+  t && /* @__PURE__ */ e("div", { className: "text-muted-foreground/50 mb-4", children: /* @__PURE__ */ e(a, { name: t, size: 64, strokeWidth: 1.5 }) }),
+  /* @__PURE__ */ e("h3", { className: "text-2xl font-semibold text-foreground", children: s }),
+  r && /* @__PURE__ */ e("p", { className: "text-muted-foreground max-w-md", children: r }),
+  m && /* @__PURE__ */ e("div", { className: "mt-4", children: m })
 ] });
 export {
-  n as EmptyState
+  i as EmptyState
 };

package/dist/components/feedback/ToastProvider.js

@@ -1,4 +1,4 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
 import p, { useState as T, useCallback as d, createContext as v, useContext as g } from "react";
 import { createPortal as h } from "react-dom";
 import { Toast as w } from "./Toast.js";
@@ -8,17 +8,17 @@ const c = v(void 0), S = () => {
     throw new Error("useToast must be used within a ToastProvider");
   return o;
 }, j = ({ children: o }) => {
-  const [m, i] = T([]), n = d((t, s = "info", r = 3e3) => {
+  const [m, i] = T([]), a = d((t, s = "info", r = 3e3) => {
     const l = Date.now().toString() + Math.random().toString(36).substring(2, 9);
     i((x) => [...x, { id: l, message: t, type: s, duration: r }]);
   }, []), e = d((t) => {
     i((s) => s.filter((r) => r.id !== t));
-  }, []), u = p.useMemo(() => ({ addToast: n, dismissToast: e }), [n, e]);
+  }, []), u = p.useMemo(() => ({ addToast: a, dismissToast: e }), [a, e]);
   return /* @__PURE__ */ f(c.Provider, { value: u, children: [
     o,
     h(
       // This container holds all the toasts and positions them on the screen
-      /* @__PURE__ */ a("div", { className: "fixed bottom-4 right-4 z-50 w-80 max-w-full space-y-2", children: m.map((t) => /* @__PURE__ */ a(
+      /* @__PURE__ */ n("div", { className: "fixed bottom-4 right-4 z-toast w-80 max-w-full space-y-2", children: m.map((t) => /* @__PURE__ */ n(
         w,
         {
           id: t.id,

package/dist/components/forms/Checkbox.js

@@ -1,9 +1,9 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { useState as a } from "react";
-const u = ({ label: e, id: r, className: o, ...c }) => {
-  const [t] = a(() => r || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
+const u = ({ label: e, id: s, className: o, ...c }) => {
+  const [t] = a(() => s || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
   return /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ r(
       "input",
       {
         id: t,
@@ -12,7 +12,7 @@ const u = ({ label: e, id: r, className: o, ...c }) => {
         ...c
       }
     ),
-    e && /* @__PURE__ */ s("label", { htmlFor: t, className: "ml-2 text-sm text-text cursor-pointer", children: e })
+    e && /* @__PURE__ */ r("label", { htmlFor: t, className: "ml-2 text-sm text-foreground cursor-pointer", children: e })
   ] });
 };
 export {

package/dist/components/forms/Radio.js

@@ -1,17 +1,17 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-const m = ({ label: t, id: s, className: o, ...i }) => {
-  const e = s || `radio-${Math.random().toString(36).substr(2, 9)}`;
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+const m = ({ label: e, id: s, className: o, ...i }) => {
+  const r = s || `radio-${Math.random().toString(36).substr(2, 9)}`;
   return /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ t(
       "input",
       {
-        id: e,
+        id: r,
         type: "radio",
         className: `form-radio h-4 w-4 transition-colors duration-200 ease-in-out cursor-pointer text-primary border-border bg-card focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed ${o || ""}`,
         ...i
       }
     ),
-    t && /* @__PURE__ */ r("label", { htmlFor: e, className: "ml-2 text-sm text-text cursor-pointer", children: t })
+    e && /* @__PURE__ */ t("label", { htmlFor: r, className: "ml-2 text-sm text-foreground cursor-pointer", children: e })
   ] });
 };
 export {

package/dist/components/forms/SegmentedControl.d.ts

@@ -19,7 +19,7 @@ export interface SegmentedControlProps {
 /**
  * @wizard
  * @name SegmentedControl
- * @description A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List").
+ * @description A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List"). Every size clears the 24px WCAG 2.5.8 (AA) target-size minimum — xs 24px, sm ~25px, md ~36px. None reaches the 44px 2.5.5 (AAA) figure, so for a primary control on a touch screen prefer md or give the control its own 44px row; xs and sm are density sizes for pointer-driven toolbars.
  * @tags input, toggle, switch, radio, control
  * @category form
  * @id segmented-control

package/dist/components/forms/SegmentedControl.js

@@ -1,29 +1,46 @@
-import { jsx as d } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
 const m = ({
   options: n,
-  value: o,
+  value: i,
   onChange: l,
   size: r = "md",
-  className: a
-}) => /* @__PURE__ */ d("div", { className: t(
+  className: o
+}) => /* @__PURE__ */ t("div", { className: d(
   // Container: Use 'muted' background for the track (works in all themes)
   "inline-flex bg-muted border border-border",
   r === "xs" ? "rounded-md p-0.5" : "rounded-lg p-1",
-  a
+  o
 ), children: n.map((e) => {
-  const i = e.value === o;
-  return /* @__PURE__ */ d(
+  const s = e.value === i;
+  return /* @__PURE__ */ t(
     "button",
     {
       onClick: () => !e.disabled && l(e.value),
       disabled: e.disabled,
-      className: t(
+      className: d(
         "relative rounded-md font-medium transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         // Size Variants
-        r === "xs" ? "text-[10px] px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
+        //
+        // `xs` carries a stated 24px floor rather than a padding value
+        // tuned to reach one. WCAG 2.5.8 Target Size (Minimum, level AA)
+        // is 24x24; this variant measured 19px, so it was the only size
+        // in the set that failed. min-h-6 cannot drift when the fluid
+        // scale interpolates or when a theme changes the base font size,
+        // where padding arithmetic silently can.
+        //
+        // It also drops `text-[10px]`: an arbitrary type size is banned
+        // outright by AGENTS.md, and being outside the scale made this
+        // the one size that ignored both the viewport and
+        // useTheme().setFontSize — it measured 19px at 360px and 19px at
+        // 1280px while every other size moved.
+        //
+        // inline-flex is scoped to `xs` on purpose. Applying it to all
+        // three would re-resolve the line box for `sm` and `md`, and
+        // those two already clear AA and must not move.
+        r === "xs" ? "inline-flex items-center justify-center min-h-6 text-2xs px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
         // State Styles (Theme Aware)
-        i ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+        s ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
         e.disabled && "opacity-50 cursor-not-allowed"
       ),
       type: "button",

package/dist/components/forms/Textarea.js

@@ -1,19 +1,19 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import l from "react";
-const n = l.forwardRef(
-  ({ label: r, className: a, containerClassName: o, ...e }, s) => /* @__PURE__ */ i("div", { className: `w-full ${o || ""}`, children: [
-    r && /* @__PURE__ */ t("label", { htmlFor: e.id || e.name, className: "block text-sm font-medium text-text-light mb-1", children: r }),
-    /* @__PURE__ */ t(
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import d from "react";
+const m = d.forwardRef(
+  ({ label: r, className: t, containerClassName: a, ...e }, s) => /* @__PURE__ */ n("div", { className: `w-full ${a || ""}`, children: [
+    r && /* @__PURE__ */ o("label", { htmlFor: e.id || e.name, className: "block text-sm font-medium text-muted-foreground mb-1", children: r }),
+    /* @__PURE__ */ o(
       "textarea",
       {
         ref: s,
-        className: `w-full px-3 py-2 rounded-md bg-card border border-border transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary ${a || ""}`,
+        className: `w-full px-3 py-2 rounded-md bg-card border border-border transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary ${t || ""}`,
         ...e
       }
     )
   ] })
 );
-n.displayName = "Textarea";
+m.displayName = "Textarea";
 export {
-  n as Textarea
+  m as Textarea
 };

package/dist/components/forms/ToggleSwitch.js

@@ -1,16 +1,16 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import m from "react";
 const d = ({
-  checked: t,
+  checked: o,
   onChange: n,
   label: a,
   className: l,
-  disabled: o = !1
+  disabled: t = !1
 }) => {
   const i = () => {
-    o || n(!t);
+    t || n(!o);
   }, r = m.useId();
-  return /* @__PURE__ */ s("label", { htmlFor: r, className: `flex items-center cursor-pointer ${l || ""} ${o ? "opacity-50 cursor-not-allowed" : ""}`, children: [
+  return /* @__PURE__ */ s("label", { htmlFor: r, className: `flex items-center cursor-pointer ${l || ""} ${t ? "opacity-50 cursor-not-allowed" : ""}`, children: [
     /* @__PURE__ */ s("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
@@ -18,20 +18,20 @@ const d = ({
           id: r,
           type: "checkbox",
           className: "sr-only",
-          checked: t,
+          checked: o,
           onChange: i,
-          disabled: o
+          disabled: t
         }
       ),
-      /* @__PURE__ */ e("div", { className: `block w-12 h-6 rounded-full transition-colors duration-200 ease-in-out ${t ? "bg-primary" : "bg-border"}` }),
+      /* @__PURE__ */ e("div", { className: `block w-12 h-6 rounded-full transition-colors duration-200 ease-in-out ${o ? "bg-primary" : "bg-border"}` }),
       /* @__PURE__ */ e(
         "div",
         {
-          className: `dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out ${t ? "translate-x-6" : ""}`
+          className: `dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out ${o ? "translate-x-6" : ""}`
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "ml-3 text-text font-medium select-none", children: a })
+    /* @__PURE__ */ e("div", { className: "ml-3 text-foreground font-medium select-none", children: a })
   ] });
 };
 export {

package/dist/components/layout/AboutRamme.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name AboutRamme
+ * @description The "About" panel for a Settings Console — what the framework is, which packages make it up, and why it is built this way. Strategic purpose: ships the explanation with the framework so every product's about screen stays accurate as the architecture moves, instead of each one carrying a copy that goes stale. Takes no props; drop it into a settings tab.
+ * @tags layout, settings, about, documentation, panel
+ * @category layout
+ * @id about-ramme
+ */
 /**
  * AboutRamme — static informational panel for the Settings Console's "About" tab.
  * Describes the framework architecture, core packages, and business rationale.