@agentaily/design-system 0.2.0 → 0.3.0

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,7 +117,17 @@ 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";
 

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,6 +95,12 @@ 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 { AudioPlayer } from "./components/voice/AudioPlayer.js";
@@ -96,16 +112,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 +149,12 @@ export {
   ContextMenu,
   Controls,
   Conversation,
+  ConversationThread,
   DataTable,
   DatePicker,
+  DesignerShell,
   Dialog,
+  DocsLayout,
   DropdownMenu,
   Edge,
   Empty,
@@ -142,17 +165,21 @@ export {
   Flow,
   Form,
   FormActions,
+  HelpSteps,
   HoverCard,
+  Icon,
   IconButton,
   Image,
   Input,
   InputGroup,
   InputOTP,
+  IntegrationSettings,
   Item,
   JSXPreview,
   Kbd,
   Label,
   LineChart,
+  MarkupLayer,
   Menubar,
   Message,
   MicSelector,
@@ -175,11 +202,14 @@ export {
   Sandbox,
   SchemaDisplay,
   ScrollArea,
+  SecretField,
   Select,
   Separator,
+  SettingsPage,
   Sheet,
   Shimmer,
   Sidebar,
+  SignInPage,
   Skeleton,
   Slider,
   Snippet,
@@ -187,6 +217,7 @@ export {
   SpeechInput,
   Spinner,
   StackTrace,
+  StatusPill,
   Suggestion,
   Suggestions,
   Switch,
@@ -195,6 +226,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.3.0",
+  "description": "Agentaily design system — light-first monochrome React component library (112 components) + Storybook.",
   "type": "module",
   "license": "UNLICENSED",
   "author": "Agentaily",