@axis-ds/agentic-ui 1.7.0 → 1.8.1

package/README.md

@@ -68,11 +68,13 @@ export default function Page() {
 }
 ```
 
-**클라이언트 경계가 있는 컴포넌트**: 아래 7개는 패키지 `dist` 파일에 `"use client"` 가 있어, 서버 컴포넌트가 렌더하면 그 컴포넌트만 브라우저에서 hydrate 됩니다(복사 · 펼침 · 보기 모드 전환 · 피드백 선택 · 타이핑 애니메이션).
+**클라이언트 경계가 있는 컴포넌트**: 아래 9개는 패키지 `dist` 파일에 `"use client"` 가 있어, 서버 컴포넌트가 렌더하면 그 컴포넌트만 브라우저에서 hydrate 됩니다(복사 · 펼침 · 보기 모드 전환 · 피드백 선택 · 타이핑 애니메이션 · 하이드레이션 뒤 시각 표시).
 
-`CodeBlock` · `ContextPanel` · `DiffViewer` · `FeedbackButtons` · `SourcePanel` · `StreamingText` · `ToolCallCard`
+`CodeBlock` · `ContextPanel` · `DiffViewer` · `FeedbackButtons` · `MessageBubble` · `SourcePanel` · `StepTimeline` · `StreamingText` · `ToolCallCard`
 
-나머지 11개(`AgentAvatar` · `ApprovalCard` · `AttachmentCard` · `MessageBubble` · `PlanCard` · `RecoveryBanner` · `RunProgress` · `StepTimeline` · `SurfaceRenderer` · `ThinkingIndicator` · `TokenUsageIndicator`)와 루트 배럴에는 지시문이 없어 서버에서 렌더됩니다. 판단 기준은 `useState` · `useEffect` · `useRef` 같은 클라이언트 전용 API 와 컴포넌트 안에서 이벤트 핸들러를 직접 만드는지이며, 목록은 패키지 소스 `scripts/client-modules.mjs` 한 곳에서 관리합니다.
+`MessageBubble` · `StepTimeline` 은 1.8.0 부터 클라이언트 경계가 있습니다(WI-0069). 서버와 브라우저의 시간대가 달라 생기는 하이드레이션 오류를 막으려고, `timeZone`(StepTimeline 은 `locale` 도) 을 주지 않으면 시각을 하이드레이션 뒤에 브라우저 시간대로 채웁니다. 서버 렌더부터 시각을 보이려면 `timeZone="Asia/Seoul"` 처럼 시간대를 지정하세요. `formatTime` 은 함수라 서버 컴포넌트에서는 넘길 수 없습니다.
+
+나머지 9개(`AgentAvatar` · `ApprovalCard` · `AttachmentCard` · `PlanCard` · `RecoveryBanner` · `RunProgress` · `SurfaceRenderer` · `ThinkingIndicator` · `TokenUsageIndicator`)와 루트 배럴에는 지시문이 없어 서버에서 렌더됩니다. 판단 기준은 `useState` · `useEffect` · `useRef` 같은 클라이언트 전용 API 와 컴포넌트 안에서 이벤트 핸들러를 직접 만드는지이며, 목록은 패키지 소스 `scripts/client-modules.mjs` 한 곳에서 관리합니다.
 
 **서버 컴포넌트에서 함수 prop 은 넘길 수 없습니다**: `onCopy` · `onFeedback` · `onComplete` · `onRetry` · `onApprove` 같은 함수는 서버에서 클라이언트로 직렬화할 수 없어 React 가 오류를 냅니다(React Server Components 규칙). 함수 prop 없이 쓰면 서버에서 렌더되고, 핸들러가 필요하면 그 부분을 `"use client"` 파일로 만들어 그 안에서 씁니다.
 

package/dist/agent-avatar/index.js

@@ -31,9 +31,9 @@ const sizeStyles = {
   xl: "w-12 h-12 text-lg"
 };
 const statusStyles = {
-  online: "bg-[var(--axis-status-success)]",
-  busy: "bg-[var(--axis-status-warning)]",
-  offline: "bg-[var(--axis-status-neutral)]"
+  online: "bg-[var(--axis-text-success)]",
+  busy: "bg-[var(--axis-text-warning)]",
+  offline: "bg-[var(--axis-text-tertiary)]"
 };
 const typeColors = {
   assistant: "bg-[var(--axis-agent-avatar-assistant)]",

package/dist/agent-avatar/index.mjs

@@ -8,9 +8,9 @@ const sizeStyles = {
   xl: "w-12 h-12 text-lg"
 };
 const statusStyles = {
-  online: "bg-[var(--axis-status-success)]",
-  busy: "bg-[var(--axis-status-warning)]",
-  offline: "bg-[var(--axis-status-neutral)]"
+  online: "bg-[var(--axis-text-success)]",
+  busy: "bg-[var(--axis-text-warning)]",
+  offline: "bg-[var(--axis-text-tertiary)]"
 };
 const typeColors = {
   assistant: "bg-[var(--axis-agent-avatar-assistant)]",

package/dist/approval-card/index.js

@@ -43,12 +43,12 @@ const severityStyles = {
   },
   warning: {
     border: "border-l-[var(--axis-status-warning)]",
-    icon: "text-[var(--axis-status-warning)]",
+    icon: "text-[var(--axis-text-warning)]",
     bg: "bg-[var(--axis-surface-warning)]"
   },
   error: {
     border: "border-l-[var(--axis-status-error)]",
-    icon: "text-[var(--axis-status-error)]",
+    icon: "text-[var(--axis-text-error)]",
     bg: "bg-[var(--axis-surface-error)]"
   }
 };

package/dist/approval-card/index.mjs

@@ -10,12 +10,12 @@ const severityStyles = {
   },
   warning: {
     border: "border-l-[var(--axis-status-warning)]",
-    icon: "text-[var(--axis-status-warning)]",
+    icon: "text-[var(--axis-text-warning)]",
     bg: "bg-[var(--axis-surface-warning)]"
   },
   error: {
     border: "border-l-[var(--axis-status-error)]",
-    icon: "text-[var(--axis-status-error)]",
+    icon: "text-[var(--axis-text-error)]",
     bg: "bg-[var(--axis-surface-error)]"
   }
 };

package/dist/attachment-card/index.js

@@ -56,7 +56,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-border)]",
+        status === "error" && "border-[var(--axis-border-error)]",
         className
       ),
       children: [

package/dist/attachment-card/index.mjs

@@ -33,7 +33,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-border)]",
+        status === "error" && "border-[var(--axis-border-error)]",
         className
       ),
       children: [

package/dist/code-block/index.js

@@ -67,7 +67,7 @@ function CodeBlock({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
             filename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            language && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: language })
+            language && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)]", children: language })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
@@ -76,7 +76,7 @@ function CodeBlock({
               "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
               className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-tertiary)] transition-colors",
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--axis-text-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\uBCF5\uC0AC\uB428" })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
@@ -88,7 +88,10 @@ function CodeBlock({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: "overflow-auto",
+            role: "region",
+            tabIndex: 0,
+            "aria-label": filename ? `${filename} \uCF54\uB4DC` : language ? `${language} \uCF54\uB4DC` : "\uCF54\uB4DC",
+            className: "overflow-auto rounded-b-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--axis-border-focus)]",
             style: maxHeight ? { maxHeight } : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "p-3 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[var(--axis-text-primary)] font-mono", children: showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "border-collapse w-full", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/code-block/index.mjs

@@ -34,7 +34,7 @@ function CodeBlock({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
             filename && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            language && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: language })
+            language && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)]", children: language })
           ] }),
           /* @__PURE__ */ jsx(
             "button",
@@ -43,7 +43,7 @@ function CodeBlock({
               "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
               className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-tertiary)] transition-colors",
               children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 text-[var(--axis-text-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
                 /* @__PURE__ */ jsx("span", { children: "\uBCF5\uC0AC\uB428" })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
@@ -55,7 +55,10 @@ function CodeBlock({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "overflow-auto",
+            role: "region",
+            tabIndex: 0,
+            "aria-label": filename ? `${filename} \uCF54\uB4DC` : language ? `${language} \uCF54\uB4DC` : "\uCF54\uB4DC",
+            className: "overflow-auto rounded-b-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--axis-border-focus)]",
             style: maxHeight ? { maxHeight } : void 0,
             children: /* @__PURE__ */ jsx("pre", { className: "p-3 text-sm leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)] font-mono", children: showLineNumbers ? /* @__PURE__ */ jsx("table", { className: "border-collapse w-full", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { children: [
               /* @__PURE__ */ jsx(

package/dist/context-panel/index.js

@@ -60,8 +60,8 @@ function ContextPanel({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uBAA8\uB378" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: modelInfo.name }),
-        modelInfo.provider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: modelInfo.provider }),
-        modelInfo.version && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: modelInfo.version })
+        modelInfo.provider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: modelInfo.provider }),
+        modelInfo.version && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)]", children: modelInfo.version })
       ] })
     ] }),
     systemPrompt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [

package/dist/context-panel/index.mjs

@@ -27,8 +27,8 @@ function ContextPanel({
       /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uBAA8\uB378" }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: modelInfo.name }),
-        modelInfo.provider && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: modelInfo.provider }),
-        modelInfo.version && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: modelInfo.version })
+        modelInfo.provider && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: modelInfo.provider }),
+        modelInfo.version && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)]", children: modelInfo.version })
       ] })
     ] }),
     systemPrompt && /* @__PURE__ */ jsxs("div", { children: [

package/dist/diff-viewer/index.js

@@ -110,13 +110,19 @@ function DiffViewer({
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
             filename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${import_a11y_labels.DIFF_LABELS.added}`, children: [
-              "+",
-              addedCount
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { "aria-hidden": "true", children: [
+                "+",
+                addedCount
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: `${addedCount}\uC904 ${import_a11y_labels.DIFF_LABELS.added}` })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${import_a11y_labels.DIFF_LABELS.removed}`, children: [
-              "-",
-              removedCount
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-error)]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { "aria-hidden": "true", children: [
+                "-",
+                removedCount
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: `${removedCount}\uC904 ${import_a11y_labels.DIFF_LABELS.removed}` })
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 bg-[var(--axis-surface-tertiary)] rounded-md p-0.5", children: [
@@ -127,7 +133,7 @@ function DiffViewer({
                 "aria-pressed": mode === "unified",
                 className: (0, import_ui_react.cn)(
                   "px-2 py-0.5 text-xs rounded transition-colors",
-                  mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                  mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-secondary)] hover:text-[var(--axis-text-primary)]"
                 ),
                 children: "\uD1B5\uD569"
               }
@@ -139,7 +145,7 @@ function DiffViewer({
                 "aria-pressed": mode === "split",
                 className: (0, import_ui_react.cn)(
                   "px-2 py-0.5 text-xs rounded transition-colors",
-                  mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                  mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-secondary)] hover:text-[var(--axis-text-primary)]"
                 ),
                 children: "\uBD84\uD560"
               }
@@ -153,8 +159,8 @@ function DiffViewer({
 }
 function UnifiedView({ lines }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: lineTypeStyles[line.type], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none w-4 text-center py-0.5", lineTypeTextStyles[line.type]), children: lineTypeSymbols[line.type] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("px-2 py-0.5 whitespace-pre", lineTypeTextStyles[line.type]), children: line.content })
   ] }, i)) }) });
@@ -177,10 +183,10 @@ function SplitView({ lines }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: leftLines.map((leftLine, i) => {
     const rightLine = rightLines[i];
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none w-4 text-center py-0.5", leftLine ? lineTypeTextStyles[leftLine.type] : ""), children: leftLine ? lineTypeSymbols[leftLine.type] : "" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("px-2 py-0.5 whitespace-pre w-1/2 border-r border-[var(--axis-border-default)]", leftLine ? (0, import_ui_react.cn)(lineTypeStyles[leftLine.type], lineTypeTextStyles[leftLine.type]) : ""), children: leftLine?.content ?? "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("select-none w-4 text-center py-0.5", rightLine ? lineTypeTextStyles[rightLine.type] : ""), children: rightLine ? lineTypeSymbols[rightLine.type] : "" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_ui_react.cn)("px-2 py-0.5 whitespace-pre w-1/2", rightLine ? (0, import_ui_react.cn)(lineTypeStyles[rightLine.type], lineTypeTextStyles[rightLine.type]) : ""), children: rightLine?.content ?? "" })
     ] }, i);

package/dist/diff-viewer/index.mjs

@@ -77,13 +77,19 @@ function DiffViewer({
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
             filename && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
-              "+",
-              addedCount
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+              /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+                "+",
+                addedCount
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${addedCount}\uC904 ${DIFF_LABELS.added}` })
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
-              "-",
-              removedCount
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-error)]", children: [
+              /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+                "-",
+                removedCount
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${removedCount}\uC904 ${DIFF_LABELS.removed}` })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-[var(--axis-surface-tertiary)] rounded-md p-0.5", children: [
@@ -94,7 +100,7 @@ function DiffViewer({
                 "aria-pressed": mode === "unified",
                 className: cn(
                   "px-2 py-0.5 text-xs rounded transition-colors",
-                  mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                  mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-secondary)] hover:text-[var(--axis-text-primary)]"
                 ),
                 children: "\uD1B5\uD569"
               }
@@ -106,7 +112,7 @@ function DiffViewer({
                 "aria-pressed": mode === "split",
                 className: cn(
                   "px-2 py-0.5 text-xs rounded transition-colors",
-                  mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                  mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-secondary)] hover:text-[var(--axis-text-primary)]"
                 ),
                 children: "\uBD84\uD560"
               }
@@ -120,8 +126,8 @@ function DiffViewer({
 }
 function UnifiedView({ lines }) {
   return /* @__PURE__ */ jsx("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { className: lineTypeStyles[line.type], children: [
-    /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
-    /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
+    /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
+    /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
     /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", lineTypeTextStyles[line.type]), children: lineTypeSymbols[line.type] }),
     /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre", lineTypeTextStyles[line.type]), children: line.content })
   ] }, i)) }) });
@@ -144,10 +150,10 @@ function SplitView({ lines }) {
   return /* @__PURE__ */ jsx("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: leftLines.map((leftLine, i) => {
     const rightLine = rightLines[i];
     return /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
       /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", leftLine ? lineTypeTextStyles[leftLine.type] : ""), children: leftLine ? lineTypeSymbols[leftLine.type] : "" }),
       /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre w-1/2 border-r border-[var(--axis-border-default)]", leftLine ? cn(lineTypeStyles[leftLine.type], lineTypeTextStyles[leftLine.type]) : ""), children: leftLine?.content ?? "" }),
-      /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-secondary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
       /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", rightLine ? lineTypeTextStyles[rightLine.type] : ""), children: rightLine ? lineTypeSymbols[rightLine.type] : "" }),
       /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre w-1/2", rightLine ? cn(lineTypeStyles[rightLine.type], lineTypeTextStyles[rightLine.type]) : ""), children: rightLine?.content ?? "" })
     ] }, i);

package/dist/feedback-buttons/index.js

@@ -73,7 +73,7 @@ function FeedbackButtons({
             className: (0, import_ui_react.cn)(
               "rounded-md transition-colors",
               sizeStyles[size],
-              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)]"
+              feedback === "like" ? "text-[var(--axis-text-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" }) })
           }
@@ -87,7 +87,7 @@ function FeedbackButtons({
             className: (0, import_ui_react.cn)(
               "rounded-md transition-colors",
               sizeStyles[size],
-              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)]"
+              feedback === "dislike" ? "text-[var(--axis-text-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

@@ -40,7 +40,7 @@ function FeedbackButtons({
             className: cn(
               "rounded-md transition-colors",
               sizeStyles[size],
-              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)]"
+              feedback === "like" ? "text-[var(--axis-text-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" }) })
           }
@@ -54,7 +54,7 @@ function FeedbackButtons({
             className: cn(
               "rounded-md transition-colors",
               sizeStyles[size],
-              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)]"
+              feedback === "dislike" ? "text-[var(--axis-text-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/message-bubble/index.d.mts

@@ -20,10 +20,27 @@ interface MessageBubbleProps {
     metadata?: string;
     /** 추가 클래스 */
     className?: string;
+    /**
+     * 시각 표시 로케일(기본 "ko-KR"). formatTime 이 있으면 쓰지 않습니다.
+     */
+    locale?: string;
+    /**
+     * 시각 표시 시간대(IANA 이름, 예: "Asia/Seoul"). 지정하면 서버 렌더와 브라우저 결과가 같아
+     * 첫 렌더부터 시각을 표시합니다. 없으면 브라우저 시간대로 표시하고, 서버 렌더 · 하이드레이션
+     * 첫 렌더에서는 비워 두었다가 하이드레이션 뒤에 채웁니다(서버와 브라우저 시간대가 달라 생기는
+     * 하이드레이션 불일치 방지, WI-0069).
+     */
+    timeZone?: string;
+    /**
+     * 시각 문자열을 직접 만드는 함수. 지정하면 locale · timeZone 대신 이 결과를 첫 렌더부터 씁니다.
+     * 서버 렌더와 브라우저에서 같은 값을 돌려줘야 합니다(Date 의 지역 시간 메서드를 쓰면 시간대에 따라 달라짐).
+     * 함수라서 서버 컴포넌트에서는 넘길 수 없습니다(그때는 locale · timeZone 을 쓰세요).
+     */
+    formatTime?: (date: Date) => string;
 }
 /**
  * 대화 메시지 버블 컴포넌트
  */
-declare function MessageBubble({ role, content, timestamp, avatar, status, actions, metadata, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+declare function MessageBubble({ role, content, timestamp, avatar, status, actions, metadata, className, locale, timeZone, formatTime, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
 
 export { MessageBubble, type MessageBubbleProps, type MessageRole, type MessageStatus };

package/dist/message-bubble/index.d.ts

@@ -20,10 +20,27 @@ interface MessageBubbleProps {
     metadata?: string;
     /** 추가 클래스 */
     className?: string;
+    /**
+     * 시각 표시 로케일(기본 "ko-KR"). formatTime 이 있으면 쓰지 않습니다.
+     */
+    locale?: string;
+    /**
+     * 시각 표시 시간대(IANA 이름, 예: "Asia/Seoul"). 지정하면 서버 렌더와 브라우저 결과가 같아
+     * 첫 렌더부터 시각을 표시합니다. 없으면 브라우저 시간대로 표시하고, 서버 렌더 · 하이드레이션
+     * 첫 렌더에서는 비워 두었다가 하이드레이션 뒤에 채웁니다(서버와 브라우저 시간대가 달라 생기는
+     * 하이드레이션 불일치 방지, WI-0069).
+     */
+    timeZone?: string;
+    /**
+     * 시각 문자열을 직접 만드는 함수. 지정하면 locale · timeZone 대신 이 결과를 첫 렌더부터 씁니다.
+     * 서버 렌더와 브라우저에서 같은 값을 돌려줘야 합니다(Date 의 지역 시간 메서드를 쓰면 시간대에 따라 달라짐).
+     * 함수라서 서버 컴포넌트에서는 넘길 수 없습니다(그때는 locale · timeZone 을 쓰세요).
+     */
+    formatTime?: (date: Date) => string;
 }
 /**
  * 대화 메시지 버블 컴포넌트
  */
-declare function MessageBubble({ role, content, timestamp, avatar, status, actions, metadata, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+declare function MessageBubble({ role, content, timestamp, avatar, status, actions, metadata, className, locale, timeZone, formatTime, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
 
 export { MessageBubble, type MessageBubbleProps, type MessageRole, type MessageStatus };

package/dist/message-bubble/index.js

@@ -1,7 +1,10 @@
+"use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var message_bubble_exports = {};
 __export(message_bubble_exports, {
@@ -22,8 +33,18 @@ __export(message_bubble_exports, {
 });
 module.exports = __toCommonJS(message_bubble_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
 var import_ui_react = require("@axis-ds/ui-react");
 var import_a11y_labels = require("../constants/a11y-labels.js");
+const noopSubscribe = () => () => {
+};
+function useHydrated() {
+  return React.useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  );
+}
 const roleStyles = {
   user: {
     container: "flex-row-reverse",
@@ -39,12 +60,12 @@ const roleStyles = {
   }
 };
 const statusIcons = {
-  sending: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3 h-3 animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
+  sending: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { "aria-hidden": "true", className: "w-3 h-3 animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] }),
-  sent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01" }) })
+  sent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01" }) })
 };
 function MessageBubble({
   role,
@@ -54,9 +75,15 @@ function MessageBubble({
   status,
   actions,
   metadata,
-  className
+  className,
+  locale = "ko-KR",
+  timeZone,
+  formatTime
 }) {
   const roleLabel = import_a11y_labels.MESSAGE_ROLE_LABELS[role];
+  const hydrated = useHydrated();
+  const deterministic = formatTime !== void 0 || timeZone !== void 0;
+  const timeText = timestamp && (deterministic || hydrated) ? formatTime ? formatTime(timestamp) : timestamp.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit", timeZone }) : "";
   const renderAvatar = () => {
     if (!avatar) return null;
     if (typeof avatar === "string") {
@@ -97,13 +124,14 @@ function MessageBubble({
               {
                 dateTime: timestamp.toISOString(),
                 className: "text-xs text-[var(--axis-text-tertiary)]",
-                children: timestamp.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
+                children: timeText
               }
             ),
             metadata && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
             status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
+                role: "img",
                 className: (0, import_ui_react.cn)(
                   "text-[var(--axis-text-tertiary)]",
                   status === "error" && "text-[var(--axis-text-error)]"

package/dist/message-bubble/index.mjs

@@ -1,6 +1,17 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "@axis-ds/ui-react";
 import { MESSAGE_ROLE_LABELS } from "../constants/a11y-labels.mjs";
+const noopSubscribe = () => () => {
+};
+function useHydrated() {
+  return React.useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  );
+}
 const roleStyles = {
   user: {
     container: "flex-row-reverse",
@@ -16,12 +27,12 @@ const roleStyles = {
   }
 };
 const statusIcons = {
-  sending: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
+  sending: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "w-3 h-3 animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
     /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] }),
-  sent: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-  error: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01" }) })
+  sent: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01" }) })
 };
 function MessageBubble({
   role,
@@ -31,9 +42,15 @@ function MessageBubble({
   status,
   actions,
   metadata,
-  className
+  className,
+  locale = "ko-KR",
+  timeZone,
+  formatTime
 }) {
   const roleLabel = MESSAGE_ROLE_LABELS[role];
+  const hydrated = useHydrated();
+  const deterministic = formatTime !== void 0 || timeZone !== void 0;
+  const timeText = timestamp && (deterministic || hydrated) ? formatTime ? formatTime(timestamp) : timestamp.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit", timeZone }) : "";
   const renderAvatar = () => {
     if (!avatar) return null;
     if (typeof avatar === "string") {
@@ -74,13 +91,14 @@ function MessageBubble({
               {
                 dateTime: timestamp.toISOString(),
                 className: "text-xs text-[var(--axis-text-tertiary)]",
-                children: timestamp.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
+                children: timeText
               }
             ),
             metadata && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
             status && /* @__PURE__ */ jsx(
               "span",
               {
+                role: "img",
                 className: cn(
                   "text-[var(--axis-text-tertiary)]",
                   status === "error" && "text-[var(--axis-text-error)]"

package/dist/plan-card/index.js

@@ -62,14 +62,14 @@ const planStatusStyles = {
   }
 };
 const stepStatusIcons = {
-  pending: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
+  pending: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-text-tertiary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
   running: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] }),
-  complete: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-error)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
-  skipped: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
+  complete: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-text-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-text-error)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+  skipped: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-text-tertiary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
 };
 function PlanCard({
   title,
@@ -149,7 +149,7 @@ function PlanCard({
             "button",
             {
               onClick: onApprove,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-plan-card-approve-bg)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-plan-card-approve-hover-bg)] transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-plan-card-approve-bg)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-plan-card-approve-hover-bg)] transition-colors",
               children: "\uC2B9\uC778"
             }
           ),

package/dist/plan-card/index.mjs

@@ -29,14 +29,14 @@ const planStatusStyles = {
   }
 };
 const stepStatusIcons = {
-  pending: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
+  pending: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-text-tertiary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
   running: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] }),
-  complete: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-  error: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-error)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
-  skipped: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
+  complete: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-text-success)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-text-error)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+  skipped: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-text-tertiary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
 };
 function PlanCard({
   title,
@@ -116,7 +116,7 @@ function PlanCard({
             "button",
             {
               onClick: onApprove,
-              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-plan-card-approve-bg)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-plan-card-approve-hover-bg)] transition-colors",
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-plan-card-approve-bg)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-plan-card-approve-hover-bg)] transition-colors",
               children: "\uC2B9\uC778"
             }
           ),

package/dist/recovery-banner/index.js

@@ -48,7 +48,7 @@ function RecoveryBanner({
     {
       className: (0, import_ui_react.cn)(
         "flex items-start gap-3 p-4 rounded-lg border",
-        "bg-[var(--axis-surface-error)] border-[var(--axis-status-error-border)]",
+        "bg-[var(--axis-surface-error)] border-[var(--axis-border-error)]",
         className
       ),
       role: "alert",
@@ -58,7 +58,7 @@ function RecoveryBanner({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "svg",
           {
-            className: "w-5 h-5 text-[var(--axis-status-error)] flex-shrink-0 mt-0.5",
+            className: "w-5 h-5 text-[var(--axis-text-error)] flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -82,7 +82,7 @@ function RecoveryBanner({
               "button",
               {
                 onClick: onRetry,
-                "aria-describedby": descId,
+                "aria-describedby": description ? descId : void 0,
                 className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)] transition-colors",
                 children: "\uC7AC\uC2DC\uB3C4"
               }

package/dist/recovery-banner/index.mjs

@@ -15,7 +15,7 @@ function RecoveryBanner({
     {
       className: cn(
         "flex items-start gap-3 p-4 rounded-lg border",
-        "bg-[var(--axis-surface-error)] border-[var(--axis-status-error-border)]",
+        "bg-[var(--axis-surface-error)] border-[var(--axis-border-error)]",
         className
       ),
       role: "alert",
@@ -25,7 +25,7 @@ function RecoveryBanner({
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "w-5 h-5 text-[var(--axis-status-error)] flex-shrink-0 mt-0.5",
+            className: "w-5 h-5 text-[var(--axis-text-error)] flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -49,7 +49,7 @@ function RecoveryBanner({
               "button",
               {
                 onClick: onRetry,
-                "aria-describedby": descId,
+                "aria-describedby": description ? descId : void 0,
                 className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)] transition-colors",
                 children: "\uC7AC\uC2DC\uB3C4"
               }

package/dist/run-progress/index.js

@@ -38,7 +38,7 @@ var import_a11y_labels = require("../constants/a11y-labels.js");
 const statusColors = {
   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 motion-reduce:![animation-duration:5s]",
-  complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
+  complete: "bg-[var(--axis-text-success)] text-[var(--axis-status-success-contrast)]",
   error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
 };
 const statusIcons = {

package/dist/run-progress/index.mjs

@@ -5,7 +5,7 @@ import { STATUS_LABELS } from "../constants/a11y-labels.mjs";
 const statusColors = {
   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 motion-reduce:![animation-duration:5s]",
-  complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
+  complete: "bg-[var(--axis-text-success)] text-[var(--axis-status-success-contrast)]",
   error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
 };
 const statusIcons = {

package/dist/step-timeline/index.d.mts

@@ -12,10 +12,25 @@ interface StepTimelineProps {
     steps: TimelineStep[];
     orientation?: "vertical" | "horizontal";
     className?: string;
+    /**
+     * 시각 표시 로케일. 없으면 실행 환경의 기본 로케일입니다(이전과 같음). formatTime 이 있으면 쓰지 않습니다.
+     */
+    locale?: string;
+    /**
+     * 시각 표시 시간대(IANA 이름, 예: "Asia/Seoul"). locale 과 함께 지정하면 서버 렌더와 브라우저 결과가 같아
+     * 첫 렌더부터 시각을 표시합니다. 둘 중 하나라도 없으면 실행 환경 값에 따라 달라지므로, 서버 렌더 ·
+     * 하이드레이션 첫 렌더에서는 비워 두었다가 하이드레이션 뒤에 채웁니다(하이드레이션 불일치 방지, WI-0069).
+     */
+    timeZone?: string;
+    /**
+     * 시각 문자열을 직접 만드는 함수. 지정하면 locale · timeZone 대신 이 결과를 첫 렌더부터 씁니다.
+     * 서버 렌더와 브라우저에서 같은 값을 돌려줘야 합니다. 함수라서 서버 컴포넌트에서는 넘길 수 없습니다.
+     */
+    formatTime?: (date: Date) => string;
 }
 /**
  * 단계별 타임라인 컴포넌트
  */
-declare function StepTimeline({ steps, orientation, className, }: StepTimelineProps): react_jsx_runtime.JSX.Element;
+declare function StepTimeline({ steps, orientation, className, locale, timeZone, formatTime, }: StepTimelineProps): react_jsx_runtime.JSX.Element;
 
 export { StepTimeline, type StepTimelineProps, type TimelineStep, type TimelineStepStatus };

package/dist/step-timeline/index.d.ts

@@ -12,10 +12,25 @@ interface StepTimelineProps {
     steps: TimelineStep[];
     orientation?: "vertical" | "horizontal";
     className?: string;
+    /**
+     * 시각 표시 로케일. 없으면 실행 환경의 기본 로케일입니다(이전과 같음). formatTime 이 있으면 쓰지 않습니다.
+     */
+    locale?: string;
+    /**
+     * 시각 표시 시간대(IANA 이름, 예: "Asia/Seoul"). locale 과 함께 지정하면 서버 렌더와 브라우저 결과가 같아
+     * 첫 렌더부터 시각을 표시합니다. 둘 중 하나라도 없으면 실행 환경 값에 따라 달라지므로, 서버 렌더 ·
+     * 하이드레이션 첫 렌더에서는 비워 두었다가 하이드레이션 뒤에 채웁니다(하이드레이션 불일치 방지, WI-0069).
+     */
+    timeZone?: string;
+    /**
+     * 시각 문자열을 직접 만드는 함수. 지정하면 locale · timeZone 대신 이 결과를 첫 렌더부터 씁니다.
+     * 서버 렌더와 브라우저에서 같은 값을 돌려줘야 합니다. 함수라서 서버 컴포넌트에서는 넘길 수 없습니다.
+     */
+    formatTime?: (date: Date) => string;
 }
 /**
  * 단계별 타임라인 컴포넌트
  */
-declare function StepTimeline({ steps, orientation, className, }: StepTimelineProps): react_jsx_runtime.JSX.Element;
+declare function StepTimeline({ steps, orientation, className, locale, timeZone, formatTime, }: StepTimelineProps): react_jsx_runtime.JSX.Element;
 
 export { StepTimeline, type StepTimelineProps, type TimelineStep, type TimelineStepStatus };

package/dist/step-timeline/index.js

@@ -1,7 +1,10 @@
+"use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var step_timeline_exports = {};
 __export(step_timeline_exports, {
@@ -22,14 +33,34 @@ __export(step_timeline_exports, {
 });
 module.exports = __toCommonJS(step_timeline_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
 var import_ui_react = require("@axis-ds/ui-react");
 var import_a11y_labels = require("../constants/a11y-labels.js");
+const noopSubscribe = () => () => {
+};
+function useHydrated() {
+  return React.useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  );
+}
 function StepTimeline({
   steps,
   orientation = "vertical",
-  className
+  className,
+  locale,
+  timeZone,
+  formatTime
 }) {
   const isVertical = orientation === "vertical";
+  const hydrated = useHydrated();
+  const deterministic = formatTime !== void 0 || locale !== void 0 && timeZone !== void 0;
+  const formatStepTime = (date) => {
+    if (!deterministic && !hydrated) return "";
+    if (formatTime) return formatTime(date);
+    return timeZone !== void 0 ? date.toLocaleTimeString(locale, { timeZone }) : date.toLocaleTimeString(locale);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -65,7 +96,7 @@ function StepTimeline({
                 "aria-hidden": "true",
                 className: (0, import_ui_react.cn)(
                   "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
-                  step.status === "complete" && "bg-[var(--axis-status-success)]",
+                  step.status === "complete" && "bg-[var(--axis-text-success)]",
                   step.status === "running" && "bg-[var(--axis-status-running)] animate-pulse motion-reduce:![animation-duration:5s]",
                   step.status === "error" && "bg-[var(--axis-status-error)]",
                   step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
@@ -81,7 +112,7 @@ function StepTimeline({
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
               step.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
-              step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
+              step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime: step.timestamp.toISOString(), children: formatStepTime(step.timestamp) }) })
             ] })
           ]
         },

package/dist/step-timeline/index.mjs

@@ -1,12 +1,33 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "@axis-ds/ui-react";
 import { STATUS_LABELS } from "../constants/a11y-labels.mjs";
+const noopSubscribe = () => () => {
+};
+function useHydrated() {
+  return React.useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  );
+}
 function StepTimeline({
   steps,
   orientation = "vertical",
-  className
+  className,
+  locale,
+  timeZone,
+  formatTime
 }) {
   const isVertical = orientation === "vertical";
+  const hydrated = useHydrated();
+  const deterministic = formatTime !== void 0 || locale !== void 0 && timeZone !== void 0;
+  const formatStepTime = (date) => {
+    if (!deterministic && !hydrated) return "";
+    if (formatTime) return formatTime(date);
+    return timeZone !== void 0 ? date.toLocaleTimeString(locale, { timeZone }) : date.toLocaleTimeString(locale);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -42,7 +63,7 @@ function StepTimeline({
                 "aria-hidden": "true",
                 className: cn(
                   "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
-                  step.status === "complete" && "bg-[var(--axis-status-success)]",
+                  step.status === "complete" && "bg-[var(--axis-text-success)]",
                   step.status === "running" && "bg-[var(--axis-status-running)] animate-pulse motion-reduce:![animation-duration:5s]",
                   step.status === "error" && "bg-[var(--axis-status-error)]",
                   step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
@@ -58,7 +79,7 @@ function StepTimeline({
               ] }),
               /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
               step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
-              step.timestamp && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
+              step.timestamp && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: /* @__PURE__ */ jsx("time", { dateTime: step.timestamp.toISOString(), children: formatStepTime(step.timestamp) }) })
             ] })
           ]
         },

package/dist/token-usage-indicator/index.js

@@ -39,8 +39,8 @@ function TokenUsageIndicator({
     return "bg-[var(--axis-status-success)]";
   };
   const getTextColor = () => {
-    if (ratio >= 1) return "text-[var(--axis-status-error)]";
-    if (ratio >= warningThreshold) return "text-[var(--axis-status-warning)]";
+    if (ratio >= 1) return "text-[var(--axis-text-error)]";
+    if (ratio >= warningThreshold) return "text-[var(--axis-text-warning)]";
     return "text-[var(--axis-text-secondary)]";
   };
   const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);

package/dist/token-usage-indicator/index.mjs

@@ -16,8 +16,8 @@ function TokenUsageIndicator({
     return "bg-[var(--axis-status-success)]";
   };
   const getTextColor = () => {
-    if (ratio >= 1) return "text-[var(--axis-status-error)]";
-    if (ratio >= warningThreshold) return "text-[var(--axis-status-warning)]";
+    if (ratio >= 1) return "text-[var(--axis-text-error)]";
+    if (ratio >= warningThreshold) return "text-[var(--axis-text-warning)]";
     return "text-[var(--axis-text-secondary)]";
   };
   const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);

package/dist/tool-call-card/index.js

@@ -38,22 +38,22 @@ var import_ui_react = require("@axis-ds/ui-react");
 var import_a11y_labels = require("../constants/a11y-labels.js");
 const statusConfig = {
   pending: {
-    color: "text-[var(--axis-status-neutral)]",
+    color: "text-[var(--axis-text-tertiary)]",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
   },
   running: {
     color: "text-[var(--axis-status-running)]",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-4 h-4 animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
     ] })
   },
   success: {
-    color: "text-[var(--axis-status-success)]",
+    color: "text-[var(--axis-text-success)]",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
   },
   error: {
-    color: "text-[var(--axis-status-error)]",
+    color: "text-[var(--axis-text-error)]",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
   }
 };
@@ -100,7 +100,7 @@ function ToolCallCard({
                 ] })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-                duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
+                duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
                   duration,
                   "ms"
                 ] }),

package/dist/tool-call-card/index.mjs

@@ -5,22 +5,22 @@ import { cn } from "@axis-ds/ui-react";
 import { STATUS_LABELS } from "../constants/a11y-labels.mjs";
 const statusConfig = {
   pending: {
-    color: "text-[var(--axis-status-neutral)]",
+    color: "text-[var(--axis-text-tertiary)]",
     icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
   },
   running: {
     color: "text-[var(--axis-status-running)]",
     icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin motion-reduce:![animation-duration:3s]", viewBox: "0 0 24 24", fill: "none", children: [
       /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
     ] })
   },
   success: {
-    color: "text-[var(--axis-status-success)]",
+    color: "text-[var(--axis-text-success)]",
     icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
   },
   error: {
-    color: "text-[var(--axis-status-error)]",
+    color: "text-[var(--axis-text-error)]",
     icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
   }
 };
@@ -67,7 +67,7 @@ function ToolCallCard({
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
+                duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
                   duration,
                   "ms"
                 ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-ds/agentic-ui",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -178,8 +178,8 @@
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.0",
     "tailwind-merge": "^2.5.0",
-    "@axis-ds/tokens": "1.7.0",
-    "@axis-ds/ui-react": "1.7.0"
+    "@axis-ds/tokens": "1.8.1",
+    "@axis-ds/ui-react": "1.8.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",