@axis-ds/agentic-ui 1.2.1 → 1.3.0

package/dist/agent-avatar/index.js

@@ -84,7 +84,7 @@ function AgentAvatar({
           {
             "aria-hidden": "true",
             className: (0, import_ui_react.cn)(
-              "rounded-full flex items-center justify-center font-medium text-white",
+              "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
               sizeStyles[size],
               typeColors[type]
             ),

package/dist/agent-avatar/index.mjs

@@ -1,6 +1,6 @@
 import {
   AgentAvatar
-} from "../chunk-RPW4Y5G2.mjs";
+} from "../chunk-JY7MTMMB.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   AgentAvatar

package/dist/attachment-card/index.js

@@ -68,7 +68,7 @@ function AttachmentCard({
       className: (0, import_ui_react.cn)(
         "flex items-center gap-3 rounded-lg border p-3",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-        status === "error" && "border-[var(--axis-status-error)]/30",
+        status === "error" && "border-[var(--axis-status-error-border)]",
         className
       ),
       children: [

package/dist/attachment-card/index.mjs

@@ -1,6 +1,6 @@
 import {
   AttachmentCard
-} from "../chunk-2A5QQFYL.mjs";
+} from "../chunk-42KEAZ2Y.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   AttachmentCard

package/dist/{chunk-2A5QQFYL.mjs → chunk-42KEAZ2Y.mjs}

@@ -37,7 +37,7 @@ function AttachmentCard({
       className: cn(
         "flex items-center gap-3 rounded-lg border p-3",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-        status === "error" && "border-[var(--axis-status-error)]/30",
+        status === "error" && "border-[var(--axis-status-error-border)]",
         className
       ),
       children: [

package/dist/{chunk-M325YRLE.mjs → chunk-4V4BWBRC.mjs}

@@ -52,7 +52,7 @@ function StepTimeline({
                   step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
                   step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
                 ),
-                children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+                children: step.status === "complete" && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: cn(isVertical ? "flex-1" : "text-center mt-2"), children: [

package/dist/{chunk-ZFU34YYY.mjs → chunk-IOF4OET6.mjs}

@@ -40,8 +40,8 @@ function computeDiff(before, after) {
   return result;
 }
 var lineTypeStyles = {
-  added: "bg-[var(--axis-diff-added)]/10",
-  removed: "bg-[var(--axis-diff-removed)]/10",
+  added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
+  removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
   unchanged: ""
 };
 var lineTypeTextStyles = {

package/dist/{chunk-KPRUFC34.mjs → chunk-J4FIMXXG.mjs}

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var roleStyles = {
   user: {
     container: "flex-row-reverse",
-    bubble: "bg-[var(--axis-agent-message-user-bg)] text-white rounded-br-sm"
+    bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
   },
   assistant: {
     container: "flex-row",

package/dist/{chunk-RPW4Y5G2.mjs → chunk-JY7MTMMB.mjs}

@@ -55,7 +55,7 @@ function AgentAvatar({
           {
             "aria-hidden": "true",
             className: cn(
-              "rounded-full flex items-center justify-center font-medium text-white",
+              "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
               sizeStyles[size],
               typeColors[type]
             ),

package/dist/{chunk-WUA5Q76Y.mjs → chunk-OYQX3SL4.mjs}

@@ -14,23 +14,23 @@ var planStatusStyles = {
   },
   pending: {
     border: "border-l-[var(--axis-status-warning)]",
-    badge: "bg-[var(--axis-status-warning)]/10 text-[var(--axis-status-warning-strong)]"
+    badge: "bg-[var(--axis-badge-warning-bg)] text-[var(--axis-badge-warning-text)]"
   },
   approved: {
     border: "border-l-[var(--axis-status-success)]",
-    badge: "bg-[var(--axis-status-success)]/10 text-[var(--axis-status-success-strong)]"
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   },
   rejected: {
     border: "border-l-[var(--axis-status-error)]",
-    badge: "bg-[var(--axis-status-error)]/10 text-[var(--axis-status-error-strong)]"
+    badge: "bg-[var(--axis-badge-error-bg)] text-[var(--axis-badge-error-text)]"
   },
   executing: {
     border: "border-l-[var(--axis-status-running)]",
-    badge: "bg-[var(--axis-status-running)]/10 text-[var(--axis-status-running-strong)]"
+    badge: "bg-[var(--axis-badge-info-bg)] text-[var(--axis-badge-info-text)]"
   },
   completed: {
     border: "border-l-[var(--axis-status-success)]",
-    badge: "bg-[var(--axis-status-success)]/10 text-[var(--axis-status-success-strong)]"
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   }
 };
 var stepStatusIcons = {
@@ -62,7 +62,7 @@ function PlanCard({
       role: "region",
       "aria-labelledby": titleId,
       className: cn(
-        "rounded-lg border border-l-4 overflow-hidden",
+        "rounded-lg border border-l-[length:var(--axis-plan-card-accent-width)] overflow-hidden",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
         styles.border,
         className
@@ -121,7 +121,7 @@ function PlanCard({
             "button",
             {
               onClick: onApprove,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-white hover:bg-[var(--axis-status-success-strong)] transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-status-success-strong)] transition-colors",
               children: "\uC2B9\uC778"
             }
           ),
@@ -137,7 +137,7 @@ function PlanCard({
             "button",
             {
               onClick: onReject,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:bg-[var(--axis-status-error)]/10 transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:text-[var(--axis-plan-card-reject-hover-text)] hover:bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)] transition-colors",
               children: "\uAC70\uC808"
             }
           )

package/dist/{chunk-YHCEJ2L5.mjs → chunk-R4CMHIRO.mjs}

@@ -43,7 +43,7 @@ function FeedbackButtons({
             className: cn(
               "rounded-md transition-colors",
               sizeStyles[size],
-              feedback === "like" ? "text-[var(--axis-status-success)] bg-[var(--axis-status-success)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "like" ? "text-[var(--axis-status-success)] bg-[color:color-mix(in_srgb,var(--axis-status-success)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ jsx("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zm-9 11H3a2 2 0 01-2-2v-7a2 2 0 012-2h2" }) })
           }
@@ -57,7 +57,7 @@ function FeedbackButtons({
             className: cn(
               "rounded-md transition-colors",
               sizeStyles[size],
-              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[var(--axis-status-error)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ jsx("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zm9-13h2a2 2 0 012 2v7a2 2 0 01-2 2h-2" }) })
           }

package/dist/{chunk-WMQGJIAF.mjs → chunk-SCXUEQLI.mjs}

@@ -7,10 +7,10 @@ import * as React from "react";
 import { cn } from "@axis-ds/ui-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var statusColors = {
-  pending: "bg-[var(--axis-status-neutral-muted)]",
-  running: "bg-[var(--axis-status-running)] animate-pulse",
-  complete: "bg-[var(--axis-status-success)]",
-  error: "bg-[var(--axis-status-error)]"
+  pending: "bg-[var(--axis-status-neutral-muted)] text-[var(--axis-status-neutral-muted-contrast)]",
+  running: "bg-[var(--axis-status-running)] text-[var(--axis-status-running-contrast)] animate-pulse",
+  complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
+  error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
 };
 var statusIcons = {
   pending: null,
@@ -89,7 +89,7 @@ function RunProgress({
                 "div",
                 {
                   className: cn(
-                    "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
+                    "w-5 h-5 rounded-full flex items-center justify-center text-xs",
                     statusColors[step.status]
                   ),
                   "aria-hidden": "true",

package/dist/{chunk-MVBXXDZB.mjs → chunk-ZW4Z27AB.mjs}

@@ -12,7 +12,7 @@ function SurfaceRenderer({
         return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
       case "code":
         return /* @__PURE__ */ jsx("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
-      case "table":
+      case "table": {
         const tableData = surface.content;
         return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { role: "table", className: "w-full text-sm", children: [
           surface.title && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: surface.title }),
@@ -41,6 +41,7 @@ function SurfaceRenderer({
             i
           )) })
         ] }) });
+      }
       case "chart":
         return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
           "[\uCC28\uD2B8: ",

package/dist/diff-viewer/index.js

@@ -79,8 +79,8 @@ function computeDiff(before, after) {
   return result;
 }
 var lineTypeStyles = {
-  added: "bg-[var(--axis-diff-added)]/10",
-  removed: "bg-[var(--axis-diff-removed)]/10",
+  added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
+  removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
   unchanged: ""
 };
 var lineTypeTextStyles = {

package/dist/diff-viewer/index.mjs

@@ -1,6 +1,6 @@
 import {
   DiffViewer
-} from "../chunk-ZFU34YYY.mjs";
+} from "../chunk-IOF4OET6.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   DiffViewer

package/dist/feedback-buttons/index.js

@@ -82,7 +82,7 @@ function FeedbackButtons({
             className: (0, import_ui_react.cn)(
               "rounded-md transition-colors",
               sizeStyles[size],
-              feedback === "like" ? "text-[var(--axis-status-success)] bg-[var(--axis-status-success)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "like" ? "text-[var(--axis-status-success)] bg-[color:color-mix(in_srgb,var(--axis-status-success)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zm-9 11H3a2 2 0 01-2-2v-7a2 2 0 012-2h2" }) })
           }
@@ -96,7 +96,7 @@ function FeedbackButtons({
             className: (0, import_ui_react.cn)(
               "rounded-md transition-colors",
               sizeStyles[size],
-              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[var(--axis-status-error)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zm9-13h2a2 2 0 012 2v7a2 2 0 01-2 2h-2" }) })
           }

package/dist/feedback-buttons/index.mjs

@@ -1,6 +1,6 @@
 import {
   FeedbackButtons
-} from "../chunk-YHCEJ2L5.mjs";
+} from "../chunk-R4CMHIRO.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   FeedbackButtons

package/dist/index.js

@@ -115,10 +115,10 @@ var PLAN_STATUS_LABELS = {
 // src/run-progress/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var statusColors = {
-  pending: "bg-[var(--axis-status-neutral-muted)]",
-  running: "bg-[var(--axis-status-running)] animate-pulse",
-  complete: "bg-[var(--axis-status-success)]",
-  error: "bg-[var(--axis-status-error)]"
+  pending: "bg-[var(--axis-status-neutral-muted)] text-[var(--axis-status-neutral-muted-contrast)]",
+  running: "bg-[var(--axis-status-running)] text-[var(--axis-status-running-contrast)] animate-pulse",
+  complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
+  error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
 };
 var statusIcons = {
   pending: null,
@@ -197,7 +197,7 @@ function RunProgress({
                 "div",
                 {
                   className: (0, import_ui_react.cn)(
-                    "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
+                    "w-5 h-5 rounded-full flex items-center justify-center text-xs",
                     statusColors[step.status]
                   ),
                   "aria-hidden": "true",
@@ -289,7 +289,7 @@ function StepTimeline({
                   step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
                   step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
                 ),
-                children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+                children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_ui_react2.cn)(isVertical ? "flex-1" : "text-center mt-2"), children: [
@@ -713,7 +713,7 @@ function SurfaceRenderer({
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
       case "code":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
-      case "table":
+      case "table": {
         const tableData = surface.content;
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { role: "table", className: "w-full text-sm", children: [
           surface.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { className: "sr-only", children: surface.title }),
@@ -742,6 +742,7 @@ function SurfaceRenderer({
             i
           )) })
         ] }) });
+      }
       case "chart":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
           "[\uCC28\uD2B8: ",
@@ -904,7 +905,7 @@ function AgentAvatar({
           {
             "aria-hidden": "true",
             className: (0, import_ui_react10.cn)(
-              "rounded-full flex items-center justify-center font-medium text-white",
+              "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
               sizeStyles2[size],
               typeColors[type]
             ),
@@ -933,7 +934,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var roleStyles = {
   user: {
     container: "flex-row-reverse",
-    bubble: "bg-[var(--axis-agent-message-user-bg)] text-white rounded-br-sm"
+    bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
   },
   assistant: {
     container: "flex-row",
@@ -1067,7 +1068,7 @@ function FeedbackButtons({
             className: (0, import_ui_react12.cn)(
               "rounded-md transition-colors",
               sizeStyles3[size],
-              feedback === "like" ? "text-[var(--axis-status-success)] bg-[var(--axis-status-success)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "like" ? "text-[var(--axis-status-success)] bg-[color:color-mix(in_srgb,var(--axis-status-success)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zm-9 11H3a2 2 0 01-2-2v-7a2 2 0 012-2h2" }) })
           }
@@ -1081,7 +1082,7 @@ function FeedbackButtons({
             className: (0, import_ui_react12.cn)(
               "rounded-md transition-colors",
               sizeStyles3[size],
-              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[var(--axis-status-error)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zm9-13h2a2 2 0 012 2v7a2 2 0 01-2 2h-2" }) })
           }
@@ -1206,8 +1207,8 @@ function computeDiff(before, after) {
   return result;
 }
 var lineTypeStyles = {
-  added: "bg-[var(--axis-diff-added)]/10",
-  removed: "bg-[var(--axis-diff-removed)]/10",
+  added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
+  removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
   unchanged: ""
 };
 var lineTypeTextStyles = {
@@ -1334,23 +1335,23 @@ var planStatusStyles = {
   },
   pending: {
     border: "border-l-[var(--axis-status-warning)]",
-    badge: "bg-[var(--axis-status-warning)]/10 text-[var(--axis-status-warning-strong)]"
+    badge: "bg-[var(--axis-badge-warning-bg)] text-[var(--axis-badge-warning-text)]"
   },
   approved: {
     border: "border-l-[var(--axis-status-success)]",
-    badge: "bg-[var(--axis-status-success)]/10 text-[var(--axis-status-success-strong)]"
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   },
   rejected: {
     border: "border-l-[var(--axis-status-error)]",
-    badge: "bg-[var(--axis-status-error)]/10 text-[var(--axis-status-error-strong)]"
+    badge: "bg-[var(--axis-badge-error-bg)] text-[var(--axis-badge-error-text)]"
   },
   executing: {
     border: "border-l-[var(--axis-status-running)]",
-    badge: "bg-[var(--axis-status-running)]/10 text-[var(--axis-status-running-strong)]"
+    badge: "bg-[var(--axis-badge-info-bg)] text-[var(--axis-badge-info-text)]"
   },
   completed: {
     border: "border-l-[var(--axis-status-success)]",
-    badge: "bg-[var(--axis-status-success)]/10 text-[var(--axis-status-success-strong)]"
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   }
 };
 var stepStatusIcons = {
@@ -1382,7 +1383,7 @@ function PlanCard({
       role: "region",
       "aria-labelledby": titleId,
       className: (0, import_ui_react15.cn)(
-        "rounded-lg border border-l-4 overflow-hidden",
+        "rounded-lg border border-l-[length:var(--axis-plan-card-accent-width)] overflow-hidden",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
         styles.border,
         className
@@ -1441,7 +1442,7 @@ function PlanCard({
             "button",
             {
               onClick: onApprove,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-white hover:bg-[var(--axis-status-success-strong)] transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-status-success-strong)] transition-colors",
               children: "\uC2B9\uC778"
             }
           ),
@@ -1457,7 +1458,7 @@ function PlanCard({
             "button",
             {
               onClick: onReject,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:bg-[var(--axis-status-error)]/10 transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:text-[var(--axis-plan-card-reject-hover-text)] hover:bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)] transition-colors",
               children: "\uAC70\uC808"
             }
           )
@@ -1685,7 +1686,7 @@ function AttachmentCard({
       className: (0, import_ui_react18.cn)(
         "flex items-center gap-3 rounded-lg border p-3",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-        status === "error" && "border-[var(--axis-status-error)]/30",
+        status === "error" && "border-[var(--axis-status-error-border)]",
         className
       ),
       children: [

package/dist/index.mjs

@@ -9,37 +9,37 @@ import {
 } from "./chunk-WFYQINWD.mjs";
 import {
   MessageBubble
-} from "./chunk-KPRUFC34.mjs";
+} from "./chunk-J4FIMXXG.mjs";
 import {
   PlanCard
-} from "./chunk-WUA5Q76Y.mjs";
-import {
-  RunProgress
-} from "./chunk-WMQGJIAF.mjs";
+} from "./chunk-OYQX3SL4.mjs";
 import {
   RecoveryBanner
 } from "./chunk-UDL4M5RP.mjs";
+import {
+  RunProgress
+} from "./chunk-SCXUEQLI.mjs";
 import {
   SourcePanel
 } from "./chunk-DPLGRVNQ.mjs";
 import {
   StepTimeline
-} from "./chunk-M325YRLE.mjs";
+} from "./chunk-4V4BWBRC.mjs";
 import {
   StreamingText
 } from "./chunk-GQYOOLDL.mjs";
 import {
   SurfaceRenderer
-} from "./chunk-MVBXXDZB.mjs";
+} from "./chunk-ZW4Z27AB.mjs";
+import {
+  AgentAvatar
+} from "./chunk-JY7MTMMB.mjs";
 import {
   ApprovalCard
 } from "./chunk-7HTVJ6MK.mjs";
-import {
-  AgentAvatar
-} from "./chunk-RPW4Y5G2.mjs";
 import {
   AttachmentCard
-} from "./chunk-2A5QQFYL.mjs";
+} from "./chunk-42KEAZ2Y.mjs";
 import {
   CodeBlock
 } from "./chunk-4CMUEGLK.mjs";
@@ -48,10 +48,10 @@ import {
 } from "./chunk-KJVPVBET.mjs";
 import {
   DiffViewer
-} from "./chunk-ZFU34YYY.mjs";
+} from "./chunk-IOF4OET6.mjs";
 import {
   FeedbackButtons
-} from "./chunk-YHCEJ2L5.mjs";
+} from "./chunk-R4CMHIRO.mjs";
 import "./chunk-SCZ4BQ2G.mjs";
 export {
   AgentAvatar,

package/dist/message-bubble/index.js

@@ -37,7 +37,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var roleStyles = {
   user: {
     container: "flex-row-reverse",
-    bubble: "bg-[var(--axis-agent-message-user-bg)] text-white rounded-br-sm"
+    bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
   },
   assistant: {
     container: "flex-row",

package/dist/message-bubble/index.mjs

@@ -1,6 +1,6 @@
 import {
   MessageBubble
-} from "../chunk-KPRUFC34.mjs";
+} from "../chunk-J4FIMXXG.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   MessageBubble

package/dist/plan-card/index.js

@@ -64,23 +64,23 @@ var planStatusStyles = {
   },
   pending: {
     border: "border-l-[var(--axis-status-warning)]",
-    badge: "bg-[var(--axis-status-warning)]/10 text-[var(--axis-status-warning-strong)]"
+    badge: "bg-[var(--axis-badge-warning-bg)] text-[var(--axis-badge-warning-text)]"
   },
   approved: {
     border: "border-l-[var(--axis-status-success)]",
-    badge: "bg-[var(--axis-status-success)]/10 text-[var(--axis-status-success-strong)]"
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   },
   rejected: {
     border: "border-l-[var(--axis-status-error)]",
-    badge: "bg-[var(--axis-status-error)]/10 text-[var(--axis-status-error-strong)]"
+    badge: "bg-[var(--axis-badge-error-bg)] text-[var(--axis-badge-error-text)]"
   },
   executing: {
     border: "border-l-[var(--axis-status-running)]",
-    badge: "bg-[var(--axis-status-running)]/10 text-[var(--axis-status-running-strong)]"
+    badge: "bg-[var(--axis-badge-info-bg)] text-[var(--axis-badge-info-text)]"
   },
   completed: {
     border: "border-l-[var(--axis-status-success)]",
-    badge: "bg-[var(--axis-status-success)]/10 text-[var(--axis-status-success-strong)]"
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   }
 };
 var stepStatusIcons = {
@@ -112,7 +112,7 @@ function PlanCard({
       role: "region",
       "aria-labelledby": titleId,
       className: (0, import_ui_react.cn)(
-        "rounded-lg border border-l-4 overflow-hidden",
+        "rounded-lg border border-l-[length:var(--axis-plan-card-accent-width)] overflow-hidden",
         "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
         styles.border,
         className
@@ -171,7 +171,7 @@ function PlanCard({
             "button",
             {
               onClick: onApprove,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-white hover:bg-[var(--axis-status-success-strong)] transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-status-success-strong)] transition-colors",
               children: "\uC2B9\uC778"
             }
           ),
@@ -187,7 +187,7 @@ function PlanCard({
             "button",
             {
               onClick: onReject,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:bg-[var(--axis-status-error)]/10 transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:text-[var(--axis-plan-card-reject-hover-text)] hover:bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)] transition-colors",
               children: "\uAC70\uC808"
             }
           )

package/dist/plan-card/index.mjs

@@ -1,6 +1,6 @@
 import {
   PlanCard
-} from "../chunk-WUA5Q76Y.mjs";
+} from "../chunk-OYQX3SL4.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   PlanCard

package/dist/run-progress/index.js

@@ -50,10 +50,10 @@ var STATUS_LABELS = {
 // src/run-progress/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var statusColors = {
-  pending: "bg-[var(--axis-status-neutral-muted)]",
-  running: "bg-[var(--axis-status-running)] animate-pulse",
-  complete: "bg-[var(--axis-status-success)]",
-  error: "bg-[var(--axis-status-error)]"
+  pending: "bg-[var(--axis-status-neutral-muted)] text-[var(--axis-status-neutral-muted-contrast)]",
+  running: "bg-[var(--axis-status-running)] text-[var(--axis-status-running-contrast)] animate-pulse",
+  complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
+  error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
 };
 var statusIcons = {
   pending: null,
@@ -132,7 +132,7 @@ function RunProgress({
                 "div",
                 {
                   className: (0, import_ui_react.cn)(
-                    "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
+                    "w-5 h-5 rounded-full flex items-center justify-center text-xs",
                     statusColors[step.status]
                   ),
                   "aria-hidden": "true",

package/dist/run-progress/index.mjs

@@ -1,6 +1,6 @@
 import {
   RunProgress
-} from "../chunk-WMQGJIAF.mjs";
+} from "../chunk-SCXUEQLI.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   RunProgress

package/dist/step-timeline/index.js

@@ -85,7 +85,7 @@ function StepTimeline({
                   step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
                   step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
                 ),
-                children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+                children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_ui_react.cn)(isVertical ? "flex-1" : "text-center mt-2"), children: [

package/dist/step-timeline/index.mjs

@@ -1,6 +1,6 @@
 import {
   StepTimeline
-} from "../chunk-M325YRLE.mjs";
+} from "../chunk-4V4BWBRC.mjs";
 import "../chunk-SCZ4BQ2G.mjs";
 export {
   StepTimeline

package/dist/surface-renderer/index.js

@@ -36,7 +36,7 @@ function SurfaceRenderer({
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
       case "code":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
-      case "table":
+      case "table": {
         const tableData = surface.content;
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { role: "table", className: "w-full text-sm", children: [
           surface.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { className: "sr-only", children: surface.title }),
@@ -65,6 +65,7 @@ function SurfaceRenderer({
             i
           )) })
         ] }) });
+      }
       case "chart":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
           "[\uCC28\uD2B8: ",

package/dist/surface-renderer/index.mjs

@@ -1,6 +1,6 @@
 import {
   SurfaceRenderer
-} from "../chunk-MVBXXDZB.mjs";
+} from "../chunk-ZW4Z27AB.mjs";
 export {
   SurfaceRenderer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-ds/agentic-ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -88,8 +88,8 @@
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.0",
     "tailwind-merge": "^2.5.0",
-    "@axis-ds/tokens": "1.2.1",
-    "@axis-ds/ui-react": "1.2.1"
+    "@axis-ds/tokens": "1.3.0",
+    "@axis-ds/ui-react": "1.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -126,6 +126,7 @@
     "build": "tsup src/index.ts src/*/index.tsx --format cjs,esm --dts --external react",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
     "clean": "rm -rf dist",
+    "lint": "eslint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",