@agentaily/design-system 0.2.0 → 0.4.0

package/dist/components/utilities/RotatingTagline.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+const AX_RTAG_CSS = `
+.ax-rtag { display: inline; color: var(--text-body); }
+.ax-rtag__prefix { color: var(--text-body); }
+.ax-rtag__verb { color: var(--text-body); }
+.ax-rtag__grad {
+  background: linear-gradient(95deg, #F2806B 0%, #E9B24F 18%, #6FB66A 36%, #4DB6AE 54%, #5B8DEF 72%, #9B7BEA 86%, #F2806B 100%);
+  background-size: 220% 100%;
+  -webkit-background-clip: text; background-clip: text;
+  -webkit-text-fill-color: transparent; color: transparent;
+  animation: ax-rtag-flow var(--ax-rtag-flow, 1.2s) linear infinite;
+}
+.ax-rtag__cursor {
+  display: inline-block; width: 0.5em; height: 0.84em; background: var(--text-body);
+  vertical-align: -0.02em; margin-left: 0.04em;
+}
+.ax-rtag__cursor.is-blink { animation: ax-rtag-blink 1.1s steps(1) infinite; }
+@keyframes ax-rtag-flow { to { background-position: 220% 0; } }
+@keyframes ax-rtag-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .ax-rtag__grad { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-rtag-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-rtag-css";
+  s.textContent = AX_RTAG_CSS;
+  document.head.appendChild(s);
+}
+function RotatingTagline({
+  prefix = "聊天，",
+  phrases = ["构建万物", "生成万物", "设计万物", "学习万物"],
+  gradient = true,
+  cursor = true,
+  breakAfterPrefix = false,
+  typeSpeed = 140,
+  deleteSpeed = 70,
+  hold = 1700,
+  flowDuration = "1.2s",
+  className = "",
+  ...rest
+}) {
+  const list = phrases && phrases.length ? phrases : [""];
+  const reduced = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const [wi, setWi] = useState(0);
+  const [txt, setTxt] = useState(list[0]);
+  const [deleting, setDeleting] = useState(false);
+  useEffect(() => {
+    if (reduced) {
+      const t2 = setTimeout(() => setWi((w) => (w + 1) % list.length), hold + 700);
+      return () => clearTimeout(t2);
+    }
+    const word = list[wi % list.length];
+    let t;
+    if (!deleting && txt === word) {
+      t = setTimeout(() => setDeleting(true), hold);
+    } else if (deleting && txt === "") {
+      setDeleting(false);
+      setWi((w) => (w + 1) % list.length);
+    } else {
+      const next = deleting ? word.slice(0, txt.length - 1) : word.slice(0, txt.length + 1);
+      t = setTimeout(() => setTxt(next), deleting ? deleteSpeed : typeSpeed);
+    }
+    return () => clearTimeout(t);
+  }, [txt, deleting, wi, reduced, hold, typeSpeed, deleteSpeed]);
+  useEffect(() => {
+    if (reduced) setTxt(list[wi % list.length]);
+  }, [wi, reduced]);
+  const atRest = reduced || !deleting && txt === list[wi % list.length];
+  const verbCls = ["ax-rtag__verb", gradient ? "ax-rtag__grad" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: ["ax-rtag", className].filter(Boolean).join(" "),
+      style: { "--ax-rtag-flow": flowDuration },
+      ...rest,
+      children: [
+        prefix ? /* @__PURE__ */ jsxs("span", { className: "ax-rtag__prefix", children: [
+          prefix,
+          breakAfterPrefix ? /* @__PURE__ */ jsx("br", {}) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { className: verbCls, children: txt }),
+        cursor ? /* @__PURE__ */ jsx("i", { className: "ax-rtag__cursor" + (atRest ? " is-blink" : ""), "aria-hidden": "true" }) : null
+      ]
+    }
+  );
+}
+export {
+  RotatingTagline
+};
+//# sourceMappingURL=RotatingTagline.js.map

package/dist/components/utilities/RotatingTagline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotatingTagline.js","sources":["../../../src/components/utilities/RotatingTagline.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\n\n// RotatingTagline — the brand's signature animated headline: a fixed prefix\n// followed by a phrase that types in, holds, deletes, and advances to the next.\n// The rotating phrase wears the flowing geek-rainbow gradient; a block cursor\n// trails the text and blinks only while at rest. Used in the auth brand panel\n// and the marketing hero. Respects prefers-reduced-motion (whole-phrase swap,\n// no gradient flow). Font size / weight are inherited from the parent — size it\n// by styling the container, not this component.\nconst AX_RTAG_CSS = `\n.ax-rtag { display: inline; color: var(--text-body); }\n.ax-rtag__prefix { color: var(--text-body); }\n.ax-rtag__verb { color: var(--text-body); }\n.ax-rtag__grad {\n  background: linear-gradient(95deg, #F2806B 0%, #E9B24F 18%, #6FB66A 36%, #4DB6AE 54%, #5B8DEF 72%, #9B7BEA 86%, #F2806B 100%);\n  background-size: 220% 100%;\n  -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent; color: transparent;\n  animation: ax-rtag-flow var(--ax-rtag-flow, 1.2s) linear infinite;\n}\n.ax-rtag__cursor {\n  display: inline-block; width: 0.5em; height: 0.84em; background: var(--text-body);\n  vertical-align: -0.02em; margin-left: 0.04em;\n}\n.ax-rtag__cursor.is-blink { animation: ax-rtag-blink 1.1s steps(1) infinite; }\n@keyframes ax-rtag-flow { to { background-position: 220% 0; } }\n@keyframes ax-rtag-blink { 50% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .ax-rtag__grad { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-rtag-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-rtag-css\";\n  s.textContent = AX_RTAG_CSS;\n  document.head.appendChild(s);\n}\n\nexport function RotatingTagline({\n  prefix = \"聊天，\",\n  phrases = [\"构建万物\", \"生成万物\", \"设计万物\", \"学习万物\"],\n  gradient = true,\n  cursor = true,\n  breakAfterPrefix = false,\n  typeSpeed = 140,\n  deleteSpeed = 70,\n  hold = 1700,\n  flowDuration = \"1.2s\",\n  className = \"\",\n  ...rest\n}) {\n  const list = phrases && phrases.length ? phrases : [\"\"];\n  const reduced =\n    typeof window !== \"undefined\" &&\n    window.matchMedia &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const [wi, setWi] = useState(0);\n  const [txt, setTxt] = useState(list[0]);\n  const [deleting, setDeleting] = useState(false);\n\n  useEffect(() => {\n    if (reduced) {\n      const t = setTimeout(() => setWi((w) => (w + 1) % list.length), hold + 700);\n      return () => clearTimeout(t);\n    }\n    const word = list[wi % list.length];\n    let t;\n    if (!deleting && txt === word) {\n      t = setTimeout(() => setDeleting(true), hold);\n    } else if (deleting && txt === \"\") {\n      setDeleting(false);\n      setWi((w) => (w + 1) % list.length);\n    } else {\n      const next = deleting ? word.slice(0, txt.length - 1) : word.slice(0, txt.length + 1);\n      t = setTimeout(() => setTxt(next), deleting ? deleteSpeed : typeSpeed);\n    }\n    return () => clearTimeout(t);\n  }, [txt, deleting, wi, reduced, hold, typeSpeed, deleteSpeed]);\n\n  useEffect(() => {\n    if (reduced) setTxt(list[wi % list.length]);\n  }, [wi, reduced]);\n\n  const atRest = reduced || (!deleting && txt === list[wi % list.length]);\n  const verbCls = [\"ax-rtag__verb\", gradient ? \"ax-rtag__grad\" : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <span\n      className={[\"ax-rtag\", className].filter(Boolean).join(\" \")}\n      style={{ \"--ax-rtag-flow\": flowDuration }}\n      {...rest}\n    >\n      {prefix ? (\n        <span className=\"ax-rtag__prefix\">\n          {prefix}\n          {breakAfterPrefix ? <br /> : null}\n        </span>\n      ) : null}\n      <span className={verbCls}>{txt}</span>\n      {cursor ? (\n        <i className={\"ax-rtag__cursor\" + (atRest ? \" is-blink\" : \"\")} aria-hidden=\"true\"></i>\n      ) : null}\n    </span>\n  );\n}\n"],"names":["t"],"mappings":";;AASA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBpB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,gBAAgB;AAAA,EAC9B,SAAS;AAAA,EACT,UAAU,CAAC,QAAQ,QAAQ,QAAQ,MAAM;AAAA,EACzC,WAAW;AAAA,EACX,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,OAAO,WAAW,QAAQ,SAAS,UAAU,CAAC,EAAE;AACtD,QAAM,UACJ,OAAO,WAAW,eAClB,OAAO,cACP,OAAO,WAAW,kCAAkC,EAAE;AACxD,QAAM,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAC9B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,KAAK,CAAC,CAAC;AACtC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,QAAI,SAAS;AACX,YAAMA,KAAI,WAAW,MAAM,MAAM,CAAC,OAAO,IAAI,KAAK,KAAK,MAAM,GAAG,OAAO,GAAG;AAC1E,aAAO,MAAM,aAAaA,EAAC;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK,KAAK,KAAK,MAAM;AAClC,QAAI;AACJ,QAAI,CAAC,YAAY,QAAQ,MAAM;AAC7B,UAAI,WAAW,MAAM,YAAY,IAAI,GAAG,IAAI;AAAA,IAC9C,WAAW,YAAY,QAAQ,IAAI;AACjC,kBAAY,KAAK;AACjB,YAAM,CAAC,OAAO,IAAI,KAAK,KAAK,MAAM;AAAA,IACpC,OAAO;AACL,YAAM,OAAO,WAAW,KAAK,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,KAAK,MAAM,GAAG,IAAI,SAAS,CAAC;AACpF,UAAI,WAAW,MAAM,OAAO,IAAI,GAAG,WAAW,cAAc,SAAS;AAAA,IACvE;AACA,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,KAAK,UAAU,IAAI,SAAS,MAAM,WAAW,WAAW,CAAC;AAE7D,YAAU,MAAM;AACd,QAAI,QAAS,QAAO,KAAK,KAAK,KAAK,MAAM,CAAC;AAAA,EAC5C,GAAG,CAAC,IAAI,OAAO,CAAC;AAEhB,QAAM,SAAS,WAAY,CAAC,YAAY,QAAQ,KAAK,KAAK,KAAK,MAAM;AACrE,QAAM,UAAU,CAAC,iBAAiB,WAAW,kBAAkB,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC1D,OAAO,EAAE,kBAAkB,aAAA;AAAA,MAC1B,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,SACC,qBAAC,QAAA,EAAK,WAAU,mBACb,UAAA;AAAA,UAAA;AAAA,UACA,mBAAmB,oBAAC,MAAA,CAAA,CAAG,IAAK;AAAA,QAAA,EAAA,CAC/B,IACE;AAAA,QACJ,oBAAC,QAAA,EAAK,WAAW,SAAU,UAAA,KAAI;AAAA,QAC9B,SACC,oBAAC,KAAA,EAAE,WAAW,qBAAqB,SAAS,cAAc,KAAK,eAAY,OAAA,CAAO,IAChF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/index.d.ts

@@ -16,6 +16,11 @@ export * from "./components/ai/Suggestion";
 export * from "./components/ai/Task";
 export * from "./components/ai/ToolCall";
 
+// auth
+export * from "./components/auth/AccountControl";
+export * from "./components/auth/AuthDialog";
+export * from "./components/auth/SignInPage";
+
 // buttons
 export * from "./components/buttons/Button";
 export * from "./components/buttons/ButtonGroup";
@@ -24,6 +29,7 @@ export * from "./components/buttons/IconButton";
 // chat
 export * from "./components/chat/CodeBlock";
 export * from "./components/chat/Composer";
+export * from "./components/chat/ConversationThread";
 export * from "./components/chat/Message";
 
 // code
@@ -59,6 +65,7 @@ export * from "./components/display/Pagination";
 export * from "./components/display/Progress";
 export * from "./components/display/Separator";
 export * from "./components/display/Skeleton";
+export * from "./components/display/StatusPill";
 export * from "./components/display/Table";
 export * from "./components/display/Tabs";
 export * from "./components/display/Typography";
@@ -82,6 +89,7 @@ export * from "./components/inputs/InputGroup";
 export * from "./components/inputs/InputOTP";
 export * from "./components/inputs/Label";
 export * from "./components/inputs/RadioGroup";
+export * from "./components/inputs/SecretField";
 export * from "./components/inputs/Select";
 export * from "./components/inputs/Slider";
 export * from "./components/inputs/Switch";
@@ -89,9 +97,13 @@ export * from "./components/inputs/Textarea";
 export * from "./components/inputs/Toggle";
 
 // layout
+export * from "./components/layout/AppShell";
 export * from "./components/layout/AspectRatio";
+export * from "./components/layout/DesignerShell";
+export * from "./components/layout/DocsLayout";
 export * from "./components/layout/Resizable";
 export * from "./components/layout/ScrollArea";
+export * from "./components/layout/SettingsPage";
 export * from "./components/layout/Sidebar";
 
 // overlay
@@ -105,9 +117,20 @@ export * from "./components/overlay/NavigationMenu";
 export * from "./components/overlay/Popover";
 export * from "./components/overlay/Sheet";
 
+// review
+export * from "./components/review/MarkupLayer";
+
+// settings
+export * from "./components/settings/HelpSteps";
+export * from "./components/settings/IntegrationSettings";
+export * from "./components/settings/TestRow";
+
 // utilities
+export * from "./components/utilities/BrandMark";
+export * from "./components/utilities/Icon";
 export * from "./components/utilities/Image";
 export * from "./components/utilities/OpenInChat";
+export * from "./components/utilities/RotatingTagline";
 
 // voice
 export * from "./components/voice/AudioPlayer";

package/dist/index.js

@@ -12,11 +12,15 @@ import { Citation, Sources } from "./components/ai/Sources.js";
 import { Suggestion, Suggestions } from "./components/ai/Suggestion.js";
 import { Task } from "./components/ai/Task.js";
 import { ToolCall } from "./components/ai/ToolCall.js";
+import { AccountControl } from "./components/auth/AccountControl.js";
+import { AuthDialog } from "./components/auth/AuthDialog.js";
+import { SignInPage } from "./components/auth/SignInPage.js";
 import { Button } from "./components/buttons/Button.js";
 import { ButtonGroup } from "./components/buttons/ButtonGroup.js";
 import { IconButton } from "./components/buttons/IconButton.js";
 import { CodeBlock } from "./components/chat/CodeBlock.js";
 import { Composer } from "./components/chat/Composer.js";
+import { ConversationThread } from "./components/chat/ConversationThread.js";
 import { Message } from "./components/chat/Message.js";
 import { Agent } from "./components/code/Agent.js";
 import { Artifact } from "./components/code/Artifact.js";
@@ -48,6 +52,7 @@ import { Pagination } from "./components/display/Pagination.js";
 import { Progress } from "./components/display/Progress.js";
 import { Separator } from "./components/display/Separator.js";
 import { Skeleton } from "./components/display/Skeleton.js";
+import { StatusPill } from "./components/display/StatusPill.js";
 import { Table } from "./components/display/Table.js";
 import { Tabs } from "./components/display/Tabs.js";
 import { Prose, Text, Typography } from "./components/display/Typography.js";
@@ -67,14 +72,19 @@ import { InputGroup } from "./components/inputs/InputGroup.js";
 import { InputOTP } from "./components/inputs/InputOTP.js";
 import { Label } from "./components/inputs/Label.js";
 import { RadioGroup } from "./components/inputs/RadioGroup.js";
+import { SecretField } from "./components/inputs/SecretField.js";
 import { Select } from "./components/inputs/Select.js";
 import { Slider } from "./components/inputs/Slider.js";
 import { Switch } from "./components/inputs/Switch.js";
 import { Textarea } from "./components/inputs/Textarea.js";
 import { Toggle, ToggleGroup } from "./components/inputs/Toggle.js";
+import { AppShell } from "./components/layout/AppShell.js";
 import { AspectRatio } from "./components/layout/AspectRatio.js";
+import { DesignerShell } from "./components/layout/DesignerShell.js";
+import { DocsLayout } from "./components/layout/DocsLayout.js";
 import { Resizable } from "./components/layout/Resizable.js";
 import { ScrollArea } from "./components/layout/ScrollArea.js";
+import { SettingsPage } from "./components/layout/SettingsPage.js";
 import { Sidebar } from "./components/layout/Sidebar.js";
 import { AlertDialog } from "./components/overlay/AlertDialog.js";
 import { Command } from "./components/overlay/Command.js";
@@ -85,8 +95,15 @@ import { Menubar } from "./components/overlay/Menubar.js";
 import { NavigationMenu } from "./components/overlay/NavigationMenu.js";
 import { Popover } from "./components/overlay/Popover.js";
 import { Sheet } from "./components/overlay/Sheet.js";
+import { MarkupLayer } from "./components/review/MarkupLayer.js";
+import { HelpSteps } from "./components/settings/HelpSteps.js";
+import { IntegrationSettings } from "./components/settings/IntegrationSettings.js";
+import { TestRow } from "./components/settings/TestRow.js";
+import { BrandMark } from "./components/utilities/BrandMark.js";
+import { Icon } from "./components/utilities/Icon.js";
 import { Image } from "./components/utilities/Image.js";
 import { OpenInChat } from "./components/utilities/OpenInChat.js";
+import { RotatingTagline } from "./components/utilities/RotatingTagline.js";
 import { AudioPlayer } from "./components/voice/AudioPlayer.js";
 import { MicSelector } from "./components/voice/MicSelector.js";
 import { Persona } from "./components/voice/Persona.js";
@@ -96,16 +113,20 @@ import { VoiceSelector } from "./components/voice/VoiceSelector.js";
 import { Canvas, Connection, Controls, Edge, Flow, Node, Panel, Toolbar } from "./components/workflow/Flow.js";
 export {
   Accordion,
+  AccountControl,
   Agent,
   Alert,
   AlertDialog,
+  AppShell,
   Artifact,
   AspectRatio,
   Attachments,
   AudioPlayer,
+  AuthDialog,
   Avatar,
   Badge,
   BarChart,
+  BrandMark,
   Breadcrumb,
   Button,
   ButtonGroup,
@@ -129,9 +150,12 @@ export {
   ContextMenu,
   Controls,
   Conversation,
+  ConversationThread,
   DataTable,
   DatePicker,
+  DesignerShell,
   Dialog,
+  DocsLayout,
   DropdownMenu,
   Edge,
   Empty,
@@ -142,17 +166,21 @@ export {
   Flow,
   Form,
   FormActions,
+  HelpSteps,
   HoverCard,
+  Icon,
   IconButton,
   Image,
   Input,
   InputGroup,
   InputOTP,
+  IntegrationSettings,
   Item,
   JSXPreview,
   Kbd,
   Label,
   LineChart,
+  MarkupLayer,
   Menubar,
   Message,
   MicSelector,
@@ -172,14 +200,18 @@ export {
   RadioGroup,
   Reasoning,
   Resizable,
+  RotatingTagline,
   Sandbox,
   SchemaDisplay,
   ScrollArea,
+  SecretField,
   Select,
   Separator,
+  SettingsPage,
   Sheet,
   Shimmer,
   Sidebar,
+  SignInPage,
   Skeleton,
   Slider,
   Snippet,
@@ -187,6 +219,7 @@ export {
   SpeechInput,
   Spinner,
   StackTrace,
+  StatusPill,
   Suggestion,
   Suggestions,
   Switch,
@@ -195,6 +228,7 @@ export {
   Task,
   Terminal,
   TestResults,
+  TestRow,
   Text,
   Textarea,
   Toast,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles.css

@@ -9,33 +9,33 @@
 /* src/tokens/colors.css */
 /* ============================================================
    Agentaily — color system
-   Monochrome-first. Dark is the default theme (:root);
-   light theme is scoped under [data-theme="light"].
+   Monochrome-first. Light is the default theme (:root);
+   dark theme is scoped under [data-theme="dark"].
    The "accent" is the inverted foreground — no hue, all contrast.
    ============================================================ */
 :root {
-  /* ---- base scale: ink (dark theme) ---- */
-  --bg-0: #0A0A0B;            /* page canvas */
-  --bg-1: #111113;            /* raised panels, sidebar */
-  --bg-2: #18181B;            /* cards, composer */
-  --bg-3: #212124;            /* hover fills, code blocks */
-  --bg-overlay: rgba(10, 10, 11, 0.72);
-  --fg-1: #F4F4F5;            /* primary text */
-  --fg-2: #A1A1AA;            /* secondary text */
-  --fg-3: #63636B;            /* faint text, placeholders */
-  --line-1: rgba(255, 255, 255, 0.08);   /* hairline borders */
-  --line-2: rgba(255, 255, 255, 0.14);   /* strong borders */
+  /* ---- base scale: paper (light theme) ---- */
+  --bg-0: #ffffff; /* page canvas */
+  --bg-1: #fafafa; /* raised panels, sidebar */
+  --bg-2: #f4f4f5; /* cards, composer */
+  --bg-3: #e9e9eb; /* hover fills, code blocks */
+  --bg-overlay: rgba(250, 250, 250, 0.72);
+  --fg-1: #111113; /* primary text */
+  --fg-2: #5d5d66; /* secondary text */
+  --fg-3: #9c9ca3; /* faint text, placeholders */
+  --line-1: rgba(17, 17, 19, 0.09); /* hairline borders */
+  --line-2: rgba(17, 17, 19, 0.16); /* strong borders */
   /* ---- accent: pure mono inversion ---- */
-  --accent: #FAFAFA;          /* filled buttons, active states */
-  --accent-fg: #0A0A0B;       /* text on accent */
-  --accent-hover: #E4E4E7;
+  --accent: #111113; /* filled buttons, active states */
+  --accent-fg: #fafafa; /* text on accent */
+  --accent-hover: #2a2a2e;
   /* ---- semantic (kept desaturated, used sparingly) ---- */
-  --ok: #3ECF8E;
-  --warn: #E8B339;
-  --danger: #E5484D;
-  --ok-dim: rgba(62, 207, 142, 0.12);
-  --warn-dim: rgba(232, 179, 57, 0.12);
-  --danger-dim: rgba(229, 72, 77, 0.12);
+  --ok: #1c9e68;
+  --warn: #b07d14;
+  --danger: #d33338;
+  --ok-dim: rgba(28, 158, 104, 0.1);
+  --warn-dim: rgba(176, 125, 20, 0.12);
+  --danger-dim: rgba(211, 51, 56, 0.08);
   /* ---- semantic aliases ---- */
   --surface-page: var(--bg-0);
   --surface-panel: var(--bg-1);
@@ -46,37 +46,37 @@
   --text-faint: var(--fg-3);
   --border-default: var(--line-1);
   --border-strong: var(--line-2);
-  --focus-ring: rgba(250, 250, 250, 0.55);
-  --focus-soft: rgba(250, 250, 250, 0.13); /* @kind other */  /* glow ring on field focus */
-  /* dot-grid motif background */
-  --dot-grid: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); /* @kind other */
-  color-scheme: dark;
-}
-[data-theme="light"] {
-  --bg-0: #FFFFFF;
-  --bg-1: #FAFAFA;
-  --bg-2: #F4F4F5;
-  --bg-3: #E9E9EB;
-  --bg-overlay: rgba(250, 250, 250, 0.72);
-  --fg-1: #111113;
-  --fg-2: #5D5D66;
-  --fg-3: #9C9CA3;
-  --line-1: rgba(17, 17, 19, 0.09);
-  --line-2: rgba(17, 17, 19, 0.16);
-  --accent: #111113;
-  --accent-fg: #FAFAFA;
-  --accent-hover: #2A2A2E;
-  --ok: #1C9E68;
-  --warn: #B07D14;
-  --danger: #D33338;
-  --ok-dim: rgba(28, 158, 104, 0.1);
-  --warn-dim: rgba(176, 125, 20, 0.12);
-  --danger-dim: rgba(211, 51, 56, 0.08);
   --focus-ring: rgba(17, 17, 19, 0.45);
-  --focus-soft: rgba(17, 17, 19, 0.10); /* @kind other */
+  --focus-soft: rgba(17, 17, 19, 0.1); /* @kind other */ /* glow ring on field focus */
+  /* dot-grid motif background */
   --dot-grid: radial-gradient(rgba(17, 17, 19, 0.1) 1px, transparent 1px); /* @kind other */
   color-scheme: light;
 }
+[data-theme="dark"] {
+  --bg-0: #0a0a0b;
+  --bg-1: #111113;
+  --bg-2: #18181b;
+  --bg-3: #212124;
+  --bg-overlay: rgba(10, 10, 11, 0.72);
+  --fg-1: #f4f4f5;
+  --fg-2: #a1a1aa;
+  --fg-3: #63636b;
+  --line-1: rgba(255, 255, 255, 0.08);
+  --line-2: rgba(255, 255, 255, 0.14);
+  --accent: #fafafa;
+  --accent-fg: #0a0a0b;
+  --accent-hover: #e4e4e7;
+  --ok: #3ecf8e;
+  --warn: #e8b339;
+  --danger: #e5484d;
+  --ok-dim: rgba(62, 207, 142, 0.12);
+  --warn-dim: rgba(232, 179, 57, 0.12);
+  --danger-dim: rgba(229, 72, 77, 0.12);
+  --focus-ring: rgba(250, 250, 250, 0.55);
+  --focus-soft: rgba(250, 250, 250, 0.13); /* @kind other */
+  --dot-grid: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); /* @kind other */
+  color-scheme: dark;
+}
 /* src/tokens/typography.css */
 /* ============================================================
    Agentaily — typography
@@ -131,7 +131,9 @@
   /* layout */
   --container-max: 1120px;
   --sidebar-w: 272px;
-  --thread-max: 760px;     /* chat reading column */
+  --thread-max: 760px; /* chat reading column */
+  --topbar-h: 52px; /* app top bar (brand / crumb / actions) */
+  --bar-h: 48px; /* pane sub-bar (chat header, preview header, toolbars) — keep panes aligned */
 }
 /* src/tokens/effects.css */
 /* ============================================================
@@ -141,28 +143,29 @@
    ============================================================ */
 :root {
   /* radii — kept deliberately small */
-  --radius-1: 2px;     /* chips, kbd, code tags */
-  --radius-2: 4px;     /* buttons, inputs */
-  --radius-3: 8px;     /* cards, message bubbles, dialogs */
+  --radius-1: 2px; /* chips, kbd, code tags */
+  --radius-2: 4px; /* buttons, inputs */
+  --radius-3: 8px; /* cards, message bubbles, dialogs */
   --radius-full: 999px;
-  /* shadows — dark theme leans on borders, not shadows */
-  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
-  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
-  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.5);
+  /* shadows — light theme uses soft ambient shadows */
+  --shadow-1: 0 1px 2px rgba(17, 17, 19, 0.06);
+  --shadow-2: 0 4px 16px rgba(17, 17, 19, 0.08);
+  --shadow-3: 0 16px 48px rgba(17, 17, 19, 0.14);
   /* motion */
   --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
-  --dur-1: 120ms; /* @kind other */    /* hovers, presses */
-  --dur-2: 200ms; /* @kind other */    /* reveals, toggles */
-  --dur-3: 320ms; /* @kind other */    /* dialogs, page-level */
+  --dur-1: 120ms; /* @kind other */ /* hovers, presses */
+  --dur-2: 200ms; /* @kind other */ /* reveals, toggles */
+  --dur-3: 320ms; /* @kind other */ /* dialogs, page-level */
   /* focus */
   --ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);
   /* blur */
   --blur-overlay: 12px;
 }
-[data-theme="light"] {
-  --shadow-1: 0 1px 2px rgba(17, 17, 19, 0.06);
-  --shadow-2: 0 4px 16px rgba(17, 17, 19, 0.08);
-  --shadow-3: 0 16px 48px rgba(17, 17, 19, 0.14);
+[data-theme="dark"] {
+  /* dark theme leans on borders, not shadows */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.5);
 }
 /* src/tokens/base.css */
 /* ============================================================

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@agentaily/design-system",
-  "version": "0.2.0",
-  "description": "Agentaily design system — dark-first monochrome React component library (116 components) + Storybook.",
+  "version": "0.4.0",
+  "description": "Agentaily design system — light-first monochrome React component library (113 components) + Storybook.",
   "type": "module",
   "license": "UNLICENSED",
   "author": "Agentaily",