@ramme-io/ui 4.0.1 → 4.1.1

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/ai/NewsSummaryCard/NewsSummaryCard.js

@@ -1,41 +1,41 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { useState as i, useEffect as g } from "react";
 import { Card as N, CardHeader as b, CardTitle as w, CardContent as y } from "../../layout/Card.js";
-import { Icon as a } from "../../ui/Icon.js";
+import { Icon as s } from "../../ui/Icon.js";
 const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k = ({ params: u }) => {
-  const { ticker: n } = u, [c, x] = i([]), [l, m] = i(!0), [o, p] = i(null);
+  const { ticker: a } = u, [c, x] = i([]), [l, m] = i(!0), [n, p] = i(null);
   return g(() => {
     (async () => {
       try {
         m(!0), p(null);
-        const s = (d == null ? void 0 : d.VITE_API_URL) ?? "http://localhost:8000", f = await fetch(`${s}/companies/${n.toUpperCase()}/news?limit=5`);
+        const o = (d == null ? void 0 : d.VITE_API_URL) ?? "http://localhost:8000", f = await fetch(`${o}/companies/${a.toUpperCase()}/news?limit=5`);
         if (!f.ok)
-          throw new Error(`No news available for ${n.toUpperCase()}`);
+          throw new Error(`No news available for ${a.toUpperCase()}`);
         const h = await f.json();
         x(h);
-      } catch (s) {
-        p(s instanceof Error ? s.message : "Failed to fetch news");
+      } catch (o) {
+        p(o instanceof Error ? o.message : "Failed to fetch news");
       } finally {
         m(!1);
       }
     })();
-  }, [n]), /* @__PURE__ */ t(N, { className: "w-full min-w-[320px] max-w-2xl shadow-lg border-primary/20", children: [
+  }, [a]), /* @__PURE__ */ t(N, { className: "w-full min-w-[320px] max-w-2xl shadow-lg border-primary/20", children: [
     /* @__PURE__ */ e(b, { className: "pb-3", children: /* @__PURE__ */ t(w, { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
-      /* @__PURE__ */ e(a, { name: "newspaper", size: 14 }),
+      /* @__PURE__ */ e(s, { name: "newspaper", size: 14 }),
       "Recent News · ",
-      n.toUpperCase()
+      a.toUpperCase()
     ] }) }),
     /* @__PURE__ */ t(y, { className: "pt-0", children: [
-      l && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(a, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
-      o && /* @__PURE__ */ t("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
-        /* @__PURE__ */ e(a, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
-        /* @__PURE__ */ e("span", { children: o })
+      l && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(s, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
+      n && /* @__PURE__ */ t("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
+        /* @__PURE__ */ e(s, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
+        /* @__PURE__ */ e("span", { children: n })
       ] }),
-      c.length === 0 && !l && !o && /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
-        /* @__PURE__ */ e(a, { name: "inbox", size: 24, opacity: 0.5 }),
+      c.length === 0 && !l && !n && /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+        /* @__PURE__ */ e(s, { name: "inbox", size: 24, opacity: 0.5 }),
         /* @__PURE__ */ e("p", { className: "text-sm", children: "No recent news available" })
       ] }),
-      c.length > 0 && !l && !o && /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((r, s) => /* @__PURE__ */ e(
+      c.length > 0 && !l && !n && /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((r) => /* @__PURE__ */ e(
         "div",
         {
           className: "border-b border-border/50 pb-3 last:border-0 last:pb-0",
@@ -64,7 +64,7 @@ const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k =
                 ] })
               ] })
             ] }),
-            r.url && /* @__PURE__ */ e(a, { name: "external-link", size: 12, className: "text-muted-foreground/50 flex-shrink-0 mt-0.5" })
+            r.url && /* @__PURE__ */ e(s, { name: "external-link", size: 12, className: "text-muted-foreground/50 flex-shrink-0 mt-0.5" })
           ] })
         },
         r.id

package/dist/components/ai/StockChart/StockChart.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import F from "react";
-import { ResponsiveContainer as W, ComposedChart as _, CartesianGrid as K, XAxis as U, YAxis as A, Tooltip as $, Legend as j, Line as S, Bar as z } from "recharts";
+import _ from "react";
+import { ResponsiveContainer as F, ComposedChart as W, CartesianGrid as K, XAxis as U, YAxis as A, Tooltip as $, Legend as j, Line as S, Bar as z } from "recharts";
 import { Card as E, CardHeader as H, CardTitle as L, CardContent as V } from "../../layout/Card.js";
 import { useChartTheme as Y } from "../../../lib/hooks/useChartTheme.js";
 function G(s, p, C) {
@@ -59,7 +59,7 @@ const b = {
   data: C
 }) => {
   var y, k;
-  const { ticker: N, timeRange: M, metrics: c } = s, { textColor: g, gridColor: l } = Y(), h = N || s.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = F.useMemo(
+  const { ticker: N, timeRange: M, metrics: c } = s, { textColor: g, gridColor: l } = Y(), h = N || s.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = _.useMemo(
     () => {
       const t = C || G(r, o);
       return console.log("[StockChart] Data generated:", {
@@ -98,7 +98,7 @@ const b = {
       ] })
     ] }) }),
     /* @__PURE__ */ a(V, { className: "pt-0", children: [
-      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(W, { width: "100%", height: 256, children: /* @__PURE__ */ a(_, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(F, { width: "100%", height: 256, children: /* @__PURE__ */ a(W, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
         /* @__PURE__ */ e(K, { strokeDasharray: "3 3", stroke: l, opacity: 0.3 }),
         /* @__PURE__ */ e(
           U,

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/auth/LoginPage.d.ts

@@ -10,6 +10,9 @@ import React from 'react';
  * @param {string} error - Message shown above the form when sign-in fails.
  * @param {boolean} loading - Disables the form and shows progress while authenticating.
  * @param {QuickProfile[]} quickProfiles - Optional one-click demo identities, each `{ name, email, role }`.
+ * @param {string} signupHref - Where "Create one" points. Pass `null` to hide that line entirely, which is what an invite-only product wants. Defaults to `/auth/signup`.
+ * @param {string} signupLabel - Text for that link. Defaults to "Create one".
+ * @param {string} forgotHref - Where "Forgot?" points. Pass `null` to hide it — a product with no reset email has nothing to link to. Defaults to `#`.
  */
 export interface QuickProfile {
     name: string;
@@ -21,5 +24,24 @@ export interface LoginPageProps {
     error?: string | null;
     loading?: boolean;
     quickProfiles?: QuickProfile[];
+    /**
+     * Where "Create one" goes, or `null` to hide the line.
+     *
+     * Defaults to `/auth/signup` so every product that already renders this keeps
+     * exactly what it has. Invite-only products pass `null`: ramme.io deleted its
+     * signup route when accounts became invite-only, and this link kept pointing at
+     * it — a dead end offered to everyone who could not get in.
+     */
+    signupHref?: string | null;
+    signupLabel?: string;
+    /**
+     * Where "Forgot?" goes, or `null` to hide it.
+     *
+     * Defaults to `#`, which is what it has always been — a link that does nothing.
+     * Worth being able to remove: on a product with no reset email, offering a
+     * recovery link that goes nowhere is worse than saying so in plain words
+     * underneath the form.
+     */
+    forgotHref?: string | null;
 }
 export declare const LoginPage: React.FC<LoginPageProps>;

package/dist/components/auth/LoginPage.js

@@ -1,98 +1,106 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { Link as p } from "react-router-dom";
-import { Button as g } from "../ui/Button.js";
-import { Input as h } from "../forms/Input.js";
-import { Alert as b } from "../feedback/Alert.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Link as x } from "react-router-dom";
+import { Button as v } from "../ui/Button.js";
+import { Input as f } from "../forms/Input.js";
+import { Alert as y } from "../feedback/Alert.js";
 import { Icon as s } from "../ui/Icon.js";
-const S = ({ onLogin: f, error: l, loading: i, quickProfiles: r }) => {
-  const [n, o] = u(""), [c, d] = u(""), x = (a) => {
-    a.preventDefault(), f(n, c);
-  }, m = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-foreground/90";
-  return /* @__PURE__ */ t("div", { className: "w-full max-w-[400px] space-y-6 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-col items-center space-y-2 text-center mb-8", children: [
+const A = ({
+  onLogin: g,
+  error: l,
+  loading: i,
+  quickProfiles: r,
+  signupHref: n = "/auth/signup",
+  signupLabel: b = "Create one",
+  forgotHref: o = "#"
+}) => {
+  const [c, d] = h(""), [m, u] = h(""), N = (t) => {
+    t.preventDefault(), g(c, m);
+  }, p = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-foreground/90";
+  return /* @__PURE__ */ a("div", { className: "w-full max-w-[400px] space-y-6 animate-in fade-in zoom-in-95 duration-300", children: [
+    /* @__PURE__ */ a("div", { className: "flex flex-col items-center space-y-2 text-center mb-8", children: [
       /* @__PURE__ */ e("div", { className: "h-10 w-10 bg-primary/10 rounded-xl flex items-center justify-center mb-2 border border-primary/20", children: /* @__PURE__ */ e(s, { name: "hexagon", className: "text-primary fill-primary/20", size: 24, strokeWidth: 2.5 }) }),
       /* @__PURE__ */ e("h1", { className: "text-2xl font-bold tracking-tight", children: "Welcome back" }),
       /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "Enter your credentials to access your workspace" })
     ] }),
-    /* @__PURE__ */ t("div", { className: "bg-card text-card-foreground border shadow-sm rounded-xl overflow-hidden", children: [
-      /* @__PURE__ */ e("div", { className: "p-6 pt-6", children: /* @__PURE__ */ t("form", { onSubmit: x, className: "space-y-4", children: [
-        l && /* @__PURE__ */ e(b, { variant: "danger", title: "Authentication Error", className: "mb-4", children: l }),
-        /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ e("label", { htmlFor: "email", className: m, children: "Email" }),
-          /* @__PURE__ */ t("div", { className: "relative group", children: [
+    /* @__PURE__ */ a("div", { className: "bg-card text-card-foreground border shadow-sm rounded-xl overflow-hidden", children: [
+      /* @__PURE__ */ e("div", { className: "p-6 pt-6", children: /* @__PURE__ */ a("form", { onSubmit: N, className: "space-y-4", children: [
+        l && /* @__PURE__ */ e(y, { variant: "danger", title: "Authentication Error", className: "mb-4", children: l }),
+        /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "email", className: p, children: "Email" }),
+          /* @__PURE__ */ a("div", { className: "relative group", children: [
             /* @__PURE__ */ e(s, { name: "mail", className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }),
             /* @__PURE__ */ e(
-              h,
+              f,
               {
                 id: "email",
                 type: "email",
                 placeholder: "name@example.com",
                 className: "pl-9 h-10 bg-background/50",
-                value: n,
-                onChange: (a) => o(a.target.value),
+                value: c,
+                onChange: (t) => d(t.target.value),
                 required: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ e("label", { htmlFor: "password", className: m, children: "Password" }),
-            /* @__PURE__ */ e(p, { to: "#", className: "text-xs text-primary hover:underline font-medium", children: "Forgot?" })
+        /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ e("label", { htmlFor: "password", className: p, children: "Password" }),
+            o !== null && /* @__PURE__ */ e(x, { to: o, className: "text-xs text-primary hover:underline font-medium", children: "Forgot?" })
           ] }),
-          /* @__PURE__ */ t("div", { className: "relative group", children: [
+          /* @__PURE__ */ a("div", { className: "relative group", children: [
             /* @__PURE__ */ e(s, { name: "lock", className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }),
             /* @__PURE__ */ e(
-              h,
+              f,
               {
                 id: "password",
                 type: "password",
                 className: "pl-9 h-10 bg-background/50",
-                value: c,
-                onChange: (a) => d(a.target.value),
+                value: m,
+                onChange: (t) => u(t.target.value),
                 required: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ e(g, { type: "submit", className: "w-full mt-2", size: "lg", disabled: i, children: i ? "Authenticating..." : "Sign In" })
+        /* @__PURE__ */ e(v, { type: "submit", className: "w-full mt-2", size: "lg", disabled: i, children: i ? "Authenticating..." : "Sign In" })
       ] }) }),
-      r && r.length > 0 && /* @__PURE__ */ t("div", { className: "px-6 pb-6 space-y-3", children: [
-        /* @__PURE__ */ t("div", { className: "relative mb-4", children: [
+      r && r.length > 0 && /* @__PURE__ */ a("div", { className: "px-6 pb-6 space-y-3", children: [
+        /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t border-border/50" }) }),
           /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ e("span", { className: "bg-card px-2 text-muted-foreground", children: "Quick Select Profiles" }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: r.map((a) => /* @__PURE__ */ t(
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: r.map((t) => /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: () => {
-              o(a.email), d("demo");
+              d(t.email), u("demo");
             },
             className: "flex flex-col items-start p-3 text-left border rounded-lg hover:border-primary hover:bg-primary/5 transition-all w-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-card",
             children: [
-              /* @__PURE__ */ e("span", { className: "font-medium text-sm text-foreground", children: a.name }),
-              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: a.role })
+              /* @__PURE__ */ e("span", { className: "font-medium text-sm text-foreground", children: t.name }),
+              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: t.role })
             ]
           },
-          a.email
+          t.email
         )) })
       ] }),
-      /* @__PURE__ */ t("div", { className: "p-6 pt-0 text-center", children: [
-        /* @__PURE__ */ t("div", { className: "relative mb-4", children: [
+      n !== null && /* @__PURE__ */ a("div", { className: "p-6 pt-0 text-center", children: [
+        /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t" }) }),
           /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ e("span", { className: "bg-card px-2 text-muted-foreground", children: "Or continue with" }) })
         ] }),
-        /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ a("p", { className: "text-sm text-muted-foreground", children: [
           "Don't have an account?",
           " ",
-          /* @__PURE__ */ e(p, { to: "/auth/signup", className: "font-semibold text-primary hover:underline transition-all", children: "Create one" })
+          /* @__PURE__ */ e(x, { to: n, className: "font-semibold text-primary hover:underline transition-all", children: b })
         ] })
       ] })
     ] })
   ] });
 };
 export {
-  S as LoginPage
+  A as LoginPage
 };

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
 };