@axis-ds/agentic-ui 1.4.0 → 1.5.0

package/dist/index.mjs

@@ -1,58 +1,21 @@
-import {
-  ThinkingIndicator
-} from "./chunk-FYAMA32G.mjs";
-import {
-  TokenUsageIndicator
-} from "./chunk-QS6GQNSE.mjs";
-import {
-  ToolCallCard
-} from "./chunk-WFYQINWD.mjs";
-import {
-  MessageBubble
-} from "./chunk-J4FIMXXG.mjs";
-import {
-  PlanCard
-} 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-4V4BWBRC.mjs";
-import {
-  StreamingText
-} from "./chunk-GQYOOLDL.mjs";
-import {
-  SurfaceRenderer
-} from "./chunk-ZW4Z27AB.mjs";
-import {
-  AgentAvatar
-} from "./chunk-JY7MTMMB.mjs";
-import {
-  ApprovalCard
-} from "./chunk-7HTVJ6MK.mjs";
-import {
-  AttachmentCard
-} from "./chunk-42KEAZ2Y.mjs";
-import {
-  CodeBlock
-} from "./chunk-4CMUEGLK.mjs";
-import {
-  ContextPanel
-} from "./chunk-KJVPVBET.mjs";
-import {
-  DiffViewer
-} from "./chunk-IOF4OET6.mjs";
-import {
-  FeedbackButtons
-} from "./chunk-R4CMHIRO.mjs";
-import "./chunk-SCZ4BQ2G.mjs";
+import { RunProgress } from "./run-progress/index.mjs";
+import { StepTimeline } from "./step-timeline/index.mjs";
+import { ThinkingIndicator } from "./thinking-indicator/index.mjs";
+import { ApprovalCard } from "./approval-card/index.mjs";
+import { SourcePanel } from "./source-panel/index.mjs";
+import { StreamingText } from "./streaming-text/index.mjs";
+import { ToolCallCard } from "./tool-call-card/index.mjs";
+import { SurfaceRenderer } from "./surface-renderer/index.mjs";
+import { RecoveryBanner } from "./recovery-banner/index.mjs";
+import { AgentAvatar } from "./agent-avatar/index.mjs";
+import { MessageBubble } from "./message-bubble/index.mjs";
+import { FeedbackButtons } from "./feedback-buttons/index.mjs";
+import { CodeBlock } from "./code-block/index.mjs";
+import { DiffViewer } from "./diff-viewer/index.mjs";
+import { PlanCard } from "./plan-card/index.mjs";
+import { ContextPanel } from "./context-panel/index.mjs";
+import { TokenUsageIndicator } from "./token-usage-indicator/index.mjs";
+import { AttachmentCard } from "./attachment-card/index.mjs";
 export {
   AgentAvatar,
   ApprovalCard,

package/dist/message-bubble/index.js

@@ -16,25 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/message-bubble/index.tsx
 var message_bubble_exports = {};
 __export(message_bubble_exports, {
   MessageBubble: () => MessageBubble
 });
 module.exports = __toCommonJS(message_bubble_exports);
-var import_ui_react = require("@axis-ds/ui-react");
-
-// src/constants/a11y-labels.ts
-var MESSAGE_ROLE_LABELS = {
-  user: "\uC0AC\uC6A9\uC790",
-  assistant: "\uC5B4\uC2DC\uC2A4\uD134\uD2B8",
-  system: "\uC2DC\uC2A4\uD15C"
-};
-
-// src/message-bubble/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var roleStyles = {
+var import_ui_react = require("@axis-ds/ui-react");
+var import_a11y_labels = require("../constants/a11y-labels.js");
+const roleStyles = {
   user: {
     container: "flex-row-reverse",
     bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
@@ -48,7 +38,7 @@ var roleStyles = {
     bubble: "bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] text-xs italic"
   }
 };
-var statusIcons = {
+const statusIcons = {
   sending: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3 h-3 animate-spin", 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" })
@@ -66,7 +56,7 @@ function MessageBubble({
   metadata,
   className
 }) {
-  const roleLabel = MESSAGE_ROLE_LABELS[role];
+  const roleLabel = import_a11y_labels.MESSAGE_ROLE_LABELS[role];
   const renderAvatar = () => {
     if (!avatar) return null;
     if (typeof avatar === "string") {

package/dist/message-bubble/index.mjs

@@ -1,7 +1,101 @@
-import {
-  MessageBubble
-} from "../chunk-J4FIMXXG.mjs";
-import "../chunk-SCZ4BQ2G.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@axis-ds/ui-react";
+import { MESSAGE_ROLE_LABELS } from "../constants/a11y-labels.mjs";
+const roleStyles = {
+  user: {
+    container: "flex-row-reverse",
+    bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
+  },
+  assistant: {
+    container: "flex-row",
+    bubble: "bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] rounded-bl-sm"
+  },
+  system: {
+    container: "justify-center",
+    bubble: "bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] text-xs italic"
+  }
+};
+const statusIcons = {
+  sending: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", 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" }) })
+};
+function MessageBubble({
+  role,
+  content,
+  timestamp,
+  avatar,
+  status,
+  actions,
+  metadata,
+  className
+}) {
+  const roleLabel = MESSAGE_ROLE_LABELS[role];
+  const renderAvatar = () => {
+    if (!avatar) return null;
+    if (typeof avatar === "string") {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: avatar,
+          alt: "",
+          "aria-hidden": "true",
+          className: "w-8 h-8 rounded-full object-cover flex-shrink-0"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: avatar });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${roleLabel} \uBA54\uC2DC\uC9C0`,
+      className: cn("flex items-start gap-2", roleStyles[role].container, className),
+      children: [
+        role !== "system" && renderAvatar(),
+        /* @__PURE__ */ jsxs("div", { className: cn("max-w-[80%]", role === "system" && "max-w-full"), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "rounded-lg px-3 py-2",
+                roleStyles[role].bubble
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "text-sm whitespace-pre-wrap", children: content })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 px-1", children: [
+            timestamp && /* @__PURE__ */ jsx(
+              "time",
+              {
+                dateTime: timestamp.toISOString(),
+                className: "text-xs text-[var(--axis-text-tertiary)]",
+                children: timestamp.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
+              }
+            ),
+            metadata && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
+            status && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[var(--axis-text-tertiary)]",
+                  status === "error" && "text-[var(--axis-text-error)]"
+                ),
+                "aria-label": status === "sending" ? "\uC804\uC1A1 \uC911" : status === "sent" ? "\uC804\uC1A1\uB428" : "\uC804\uC1A1 \uC2E4\uD328",
+                children: statusIcons[status]
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-1", children: actions })
+        ] })
+      ]
+    }
+  );
+}
 export {
   MessageBubble
 };

package/dist/plan-card/index.js

@@ -26,38 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/plan-card/index.tsx
 var plan_card_exports = {};
 __export(plan_card_exports, {
   PlanCard: () => PlanCard
 });
 module.exports = __toCommonJS(plan_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_ui_react = require("@axis-ds/ui-react");
-
-// src/constants/a11y-labels.ts
-var STATUS_LABELS = {
-  pending: "\uB300\uAE30 \uC911",
-  running: "\uC2E4\uD589 \uC911",
-  complete: "\uC644\uB8CC",
-  success: "\uC131\uACF5",
-  error: "\uC624\uB958",
-  skipped: "\uAC74\uB108\uB700",
-  idle: "\uB300\uAE30 \uC911"
-};
-var PLAN_STATUS_LABELS = {
-  draft: "\uCD08\uC548",
-  pending: "\uC2B9\uC778 \uB300\uAE30",
-  approved: "\uC2B9\uC778\uB428",
-  rejected: "\uAC70\uC808\uB428",
-  executing: "\uC2E4\uD589 \uC911",
-  completed: "\uC644\uB8CC"
-};
-
-// src/plan-card/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var planStatusStyles = {
+var import_a11y_labels = require("../constants/a11y-labels.js");
+const planStatusStyles = {
   draft: {
     border: "border-l-[var(--axis-status-neutral)]",
     badge: "bg-[var(--axis-status-neutral-bg)] text-[var(--axis-status-neutral-strong)]"
@@ -83,7 +61,7 @@ var planStatusStyles = {
     badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
   }
 };
-var stepStatusIcons = {
+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 }) }),
   running: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin", 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" }),
@@ -104,7 +82,7 @@ function PlanCard({
 }) {
   const styles = planStatusStyles[status];
   const titleId = React.useId();
-  const statusLabel = PLAN_STATUS_LABELS[status];
+  const statusLabel = import_a11y_labels.PLAN_STATUS_LABELS[status];
   const completedCount = steps.filter((s) => s.status === "complete").length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
@@ -144,7 +122,7 @@ function PlanCard({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "border-t border-[var(--axis-border-default)] divide-y divide-[var(--axis-border-default)]", children: steps.map((step) => {
-          const stepStatusLabel = STATUS_LABELS[step.status] || step.status;
+          const stepStatusLabel = import_a11y_labels.STATUS_LABELS[step.status] || step.status;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
             {

package/dist/plan-card/index.mjs

@@ -1,7 +1,146 @@
-import {
-  PlanCard
-} from "../chunk-OYQX3SL4.mjs";
-import "../chunk-SCZ4BQ2G.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { PLAN_STATUS_LABELS, STATUS_LABELS } from "../constants/a11y-labels.mjs";
+const planStatusStyles = {
+  draft: {
+    border: "border-l-[var(--axis-status-neutral)]",
+    badge: "bg-[var(--axis-status-neutral-bg)] text-[var(--axis-status-neutral-strong)]"
+  },
+  pending: {
+    border: "border-l-[var(--axis-status-warning)]",
+    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-badge-success-bg)] text-[var(--axis-badge-success-text)]"
+  },
+  rejected: {
+    border: "border-l-[var(--axis-status-error)]",
+    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-badge-info-bg)] text-[var(--axis-badge-info-text)]"
+  },
+  completed: {
+    border: "border-l-[var(--axis-status-success)]",
+    badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
+  }
+};
+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 }) }),
+  running: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin", 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" })
+  ] }),
+  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" }) })
+};
+function PlanCard({
+  title,
+  steps,
+  status = "pending",
+  onApprove,
+  onEdit,
+  onReject,
+  className
+}) {
+  const styles = planStatusStyles[status];
+  const titleId = React.useId();
+  const statusLabel = PLAN_STATUS_LABELS[status];
+  const completedCount = steps.filter((s) => s.status === "complete").length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      className: cn(
+        "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
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", 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: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) }),
+              /* @__PURE__ */ jsx("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-xs px-2 py-0.5 rounded-full font-medium", styles.badge), children: statusLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              completedCount,
+              "/",
+              steps.length,
+              " \uB2E8\uACC4"
+            ] }),
+            steps.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full bg-[var(--axis-status-success)] transition-all",
+                style: { width: `${completedCount / steps.length * 100}%` },
+                "aria-hidden": "true"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "border-t border-[var(--axis-border-default)] divide-y divide-[var(--axis-border-default)]", children: steps.map((step) => {
+          const stepStatusLabel = STATUS_LABELS[step.status] || step.status;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": step.status === "running" ? "step" : void 0,
+              className: "flex items-start gap-3 px-4 py-2.5",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-0.5 flex-shrink-0", children: stepStatusIcons[step.status] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                    stepStatusLabel,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--axis-text-primary)]", children: step.label }),
+                  step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] mt-0.5", children: step.description })
+                ] })
+              ]
+            },
+            step.id
+          );
+        }) }),
+        (status === "pending" || status === "draft") && (onApprove || onEdit || onReject) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 p-3 border-t border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
+          onApprove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onApprove,
+              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"
+            }
+          ),
+          onEdit && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onEdit,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)] transition-colors",
+              children: "\uC218\uC815"
+            }
+          ),
+          onReject && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onReject,
+              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"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 export {
   PlanCard
 };

package/dist/recovery-banner/index.js

@@ -26,16 +26,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/recovery-banner/index.tsx
 var recovery_banner_exports = {};
 __export(recovery_banner_exports, {
   RecoveryBanner: () => RecoveryBanner
 });
 module.exports = __toCommonJS(recovery_banner_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_jsx_runtime = require("react/jsx-runtime");
 function RecoveryBanner({
   message,
   description,

package/dist/recovery-banner/index.mjs

@@ -1,6 +1,73 @@
-import {
-  RecoveryBanner
-} from "../chunk-UDL4M5RP.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+function RecoveryBanner({
+  message,
+  description,
+  onRetry,
+  onDismiss,
+  className
+}) {
+  const titleId = React.useId();
+  const descId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-3 p-4 rounded-lg border",
+        "bg-[var(--axis-surface-error)] border-[var(--axis-status-error-border)]",
+        className
+      ),
+      role: "alert",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-5 h-5 text-[var(--axis-status-error)] flex-shrink-0 mt-0.5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { id: titleId, className: "text-sm font-medium text-[var(--axis-text-error)]", children: message }),
+          description && /* @__PURE__ */ jsx("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3", children: [
+            onRetry && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onRetry,
+                "aria-describedby": descId,
+                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"
+              }
+            ),
+            onDismiss && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onDismiss,
+                className: "px-3 py-1.5 text-sm font-medium rounded-md bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)] transition-colors",
+                children: "\uBB34\uC2DC"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 export {
   RecoveryBanner
 };

package/dist/run-progress/index.js

@@ -26,36 +26,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/run-progress/index.tsx
 var run_progress_exports = {};
 __export(run_progress_exports, {
   RunProgress: () => RunProgress
 });
 module.exports = __toCommonJS(run_progress_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_ui_react = require("@axis-ds/ui-react");
-
-// src/constants/a11y-labels.ts
-var STATUS_LABELS = {
-  pending: "\uB300\uAE30 \uC911",
-  running: "\uC2E4\uD589 \uC911",
-  complete: "\uC644\uB8CC",
-  success: "\uC131\uACF5",
-  error: "\uC624\uB958",
-  skipped: "\uAC74\uB108\uB700",
-  idle: "\uB300\uAE30 \uC911"
-};
-
-// src/run-progress/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var statusColors = {
+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",
   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 = {
+const statusIcons = {
   pending: null,
   running: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3 h-3 animate-spin", 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" }),
@@ -141,7 +127,7 @@ function RunProgress({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
-                  STATUS_LABELS[step.status],
+                  import_a11y_labels.STATUS_LABELS[step.status],
                   ":"
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),