@axis-ds/agentic-ui 1.1.0

package/dist/index.mjs

@@ -0,0 +1,75 @@
+import {
+  ThinkingIndicator
+} from "./chunk-FYAMA32G.mjs";
+import {
+  ToolCallCard
+} from "./chunk-FAJF5RCY.mjs";
+import {
+  TokenUsageIndicator
+} from "./chunk-H6VXOP7U.mjs";
+import {
+  MessageBubble
+} from "./chunk-657RY6MM.mjs";
+import {
+  RunProgress
+} from "./chunk-LZKOCELQ.mjs";
+import {
+  PlanCard
+} from "./chunk-PWKN5UHT.mjs";
+import {
+  RecoveryBanner
+} from "./chunk-7UGSLEYG.mjs";
+import {
+  StepTimeline
+} from "./chunk-RGPKTWK4.mjs";
+import {
+  SourcePanel
+} from "./chunk-DPLGRVNQ.mjs";
+import {
+  SurfaceRenderer
+} from "./chunk-MVBXXDZB.mjs";
+import {
+  StreamingText
+} from "./chunk-GQYOOLDL.mjs";
+import {
+  AgentAvatar
+} from "./chunk-KH4OXDEV.mjs";
+import {
+  ApprovalCard
+} from "./chunk-ENIWC4WX.mjs";
+import {
+  ContextPanel
+} from "./chunk-KJVPVBET.mjs";
+import {
+  CodeBlock
+} from "./chunk-RGBY6EEU.mjs";
+import {
+  AttachmentCard
+} from "./chunk-FPOHPDZ2.mjs";
+import {
+  FeedbackButtons
+} from "./chunk-ETFET3LT.mjs";
+import {
+  DiffViewer
+} from "./chunk-NRBIHROX.mjs";
+import "./chunk-SCZ4BQ2G.mjs";
+export {
+  AgentAvatar,
+  ApprovalCard,
+  AttachmentCard,
+  CodeBlock,
+  ContextPanel,
+  DiffViewer,
+  FeedbackButtons,
+  MessageBubble,
+  PlanCard,
+  RecoveryBanner,
+  RunProgress,
+  SourcePanel,
+  StepTimeline,
+  StreamingText,
+  SurfaceRenderer,
+  ThinkingIndicator,
+  TokenUsageIndicator,
+  ToolCallCard
+};

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

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type MessageRole = "user" | "assistant" | "system";
+type MessageStatus = "sending" | "sent" | "error";
+interface MessageBubbleProps {
+    /** 메시지 역할 */
+    role: MessageRole;
+    /** 메시지 내용 */
+    content: React.ReactNode;
+    /** 타임스탬프 */
+    timestamp?: Date;
+    /** 아바타 (ReactNode 또는 이미지 URL) */
+    avatar?: React.ReactNode | string;
+    /** 전송 상태 */
+    status?: MessageStatus;
+    /** 하단 액션 영역 */
+    actions?: React.ReactNode;
+    /** 메타데이터 (모델명 등) */
+    metadata?: string;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 대화 메시지 버블 컴포넌트
+ */
+declare function MessageBubble({ role, content, timestamp, avatar, status, actions, metadata, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+
+export { MessageBubble, type MessageBubbleProps, type MessageRole, type MessageStatus };

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

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type MessageRole = "user" | "assistant" | "system";
+type MessageStatus = "sending" | "sent" | "error";
+interface MessageBubbleProps {
+    /** 메시지 역할 */
+    role: MessageRole;
+    /** 메시지 내용 */
+    content: React.ReactNode;
+    /** 타임스탬프 */
+    timestamp?: Date;
+    /** 아바타 (ReactNode 또는 이미지 URL) */
+    avatar?: React.ReactNode | string;
+    /** 전송 상태 */
+    status?: MessageStatus;
+    /** 하단 액션 영역 */
+    actions?: React.ReactNode;
+    /** 메타데이터 (모델명 등) */
+    metadata?: string;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 대화 메시지 버블 컴포넌트
+ */
+declare function MessageBubble({ role, content, timestamp, avatar, status, actions, metadata, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+
+export { MessageBubble, type MessageBubbleProps, type MessageRole, type MessageStatus };

package/dist/message-bubble/index.js

@@ -0,0 +1,135 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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 = {
+  user: {
+    container: "flex-row-reverse",
+    bubble: "bg-[var(--axis-color-blue-500)] text-white 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"
+  }
+};
+var 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" })
+  ] }),
+  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" }) })
+};
+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__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: avatar,
+          alt: "",
+          "aria-hidden": "true",
+          className: "w-8 h-8 rounded-full object-cover flex-shrink-0"
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0", children: avatar });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${roleLabel} \uBA54\uC2DC\uC9C0`,
+      className: (0, import_ui_react.cn)("flex items-start gap-2", roleStyles[role].container, className),
+      children: [
+        role !== "system" && renderAvatar(),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_ui_react.cn)("max-w-[80%]", role === "system" && "max-w-full"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_ui_react.cn)(
+                "rounded-lg px-3 py-2",
+                roleStyles[role].bubble
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm whitespace-pre-wrap", children: content })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-1 px-1", children: [
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
+            status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: (0, import_ui_react.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MessageBubble
+});

package/dist/message-bubble/index.mjs

@@ -0,0 +1,7 @@
+import {
+  MessageBubble
+} from "../chunk-657RY6MM.mjs";
+import "../chunk-SCZ4BQ2G.mjs";
+export {
+  MessageBubble
+};

package/dist/plan-card/index.d.mts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type PlanStatus = "draft" | "pending" | "approved" | "rejected" | "executing" | "completed";
+type PlanStepStatus = "pending" | "running" | "complete" | "error" | "skipped";
+interface PlanStep {
+    id: string;
+    label: string;
+    status: PlanStepStatus;
+    description?: string;
+}
+interface PlanCardProps {
+    /** 계획 제목 */
+    title: string;
+    /** 단계 목록 */
+    steps: PlanStep[];
+    /** 계획 상태 */
+    status?: PlanStatus;
+    /** 승인 콜백 */
+    onApprove?: () => void;
+    /** 수정 콜백 */
+    onEdit?: () => void;
+    /** 거절 콜백 */
+    onReject?: () => void;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * AI 실행 계획을 표시하고 승인/거절하는 카드 컴포넌트
+ */
+declare function PlanCard({ title, steps, status, onApprove, onEdit, onReject, className, }: PlanCardProps): react_jsx_runtime.JSX.Element;
+
+export { PlanCard, type PlanCardProps, type PlanStatus, type PlanStep, type PlanStepStatus };

package/dist/plan-card/index.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type PlanStatus = "draft" | "pending" | "approved" | "rejected" | "executing" | "completed";
+type PlanStepStatus = "pending" | "running" | "complete" | "error" | "skipped";
+interface PlanStep {
+    id: string;
+    label: string;
+    status: PlanStepStatus;
+    description?: string;
+}
+interface PlanCardProps {
+    /** 계획 제목 */
+    title: string;
+    /** 단계 목록 */
+    steps: PlanStep[];
+    /** 계획 상태 */
+    status?: PlanStatus;
+    /** 승인 콜백 */
+    onApprove?: () => void;
+    /** 수정 콜백 */
+    onEdit?: () => void;
+    /** 거절 콜백 */
+    onReject?: () => void;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * AI 실행 계획을 표시하고 승인/거절하는 카드 컴포넌트
+ */
+declare function PlanCard({ title, steps, status, onApprove, onEdit, onReject, className, }: PlanCardProps): react_jsx_runtime.JSX.Element;
+
+export { PlanCard, type PlanCardProps, type PlanStatus, type PlanStep, type PlanStepStatus };

package/dist/plan-card/index.js

@@ -0,0 +1,202 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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);
+
+// src/plan-card/index.tsx
+var plan_card_exports = {};
+__export(plan_card_exports, {
+  PlanCard: () => PlanCard
+});
+module.exports = __toCommonJS(plan_card_exports);
+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 = {
+  draft: {
+    border: "border-l-[var(--axis-color-gray-400)]",
+    badge: "bg-[var(--axis-color-gray-100)] text-[var(--axis-color-gray-600)]"
+  },
+  pending: {
+    border: "border-l-[var(--axis-color-yellow-500)]",
+    badge: "bg-[var(--axis-color-yellow-500)]/10 text-[var(--axis-color-yellow-600)]"
+  },
+  approved: {
+    border: "border-l-[var(--axis-color-green-500)]",
+    badge: "bg-[var(--axis-color-green-500)]/10 text-[var(--axis-color-green-600)]"
+  },
+  rejected: {
+    border: "border-l-[var(--axis-color-red-500)]",
+    badge: "bg-[var(--axis-color-red-500)]/10 text-[var(--axis-color-red-600)]"
+  },
+  executing: {
+    border: "border-l-[var(--axis-color-blue-500)]",
+    badge: "bg-[var(--axis-color-blue-500)]/10 text-[var(--axis-color-blue-600)]"
+  },
+  completed: {
+    border: "border-l-[var(--axis-color-green-500)]",
+    badge: "bg-[var(--axis-color-green-500)]/10 text-[var(--axis-color-green-600)]"
+  }
+};
+var stepStatusIcons = {
+  pending: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", 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-color-blue-500)] 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" })
+  ] }),
+  complete: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-green-500)]", 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-color-red-500)]", 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-color-gray-400)]", 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,
+  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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      className: (0, import_ui_react.cn)(
+        "rounded-lg border border-l-4 overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", 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: "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__ */ (0, import_jsx_runtime.jsx)("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_ui_react.cn)("text-xs px-2 py-0.5 rounded-full font-medium", styles.badge), children: statusLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              completedCount,
+              "/",
+              steps.length,
+              " \uB2E8\uACC4"
+            ] }),
+            steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "h-full rounded-full bg-[var(--axis-color-green-500)] transition-all",
+                style: { width: `${completedCount / steps.length * 100}%` },
+                "aria-hidden": "true"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__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;
+          return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "mt-0.5 flex-shrink-0", children: stepStatusIcons[step.status] }),
+                /* @__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: [
+                    stepStatusLabel,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm 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)] mt-0.5", children: step.description })
+                ] })
+              ]
+            },
+            step.id
+          );
+        }) }),
+        (status === "pending" || status === "draft") && (onApprove || onEdit || onReject) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 p-3 border-t border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
+          onApprove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: onApprove,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-color-green-500)] text-white hover:bg-[var(--axis-color-green-600)] transition-colors",
+              children: "\uC2B9\uC778"
+            }
+          ),
+          onEdit && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: onReject,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-color-red-500)] hover:bg-[var(--axis-color-red-500)]/10 transition-colors",
+              children: "\uAC70\uC808"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PlanCard
+});

package/dist/plan-card/index.mjs

@@ -0,0 +1,7 @@
+import {
+  PlanCard
+} from "../chunk-PWKN5UHT.mjs";
+import "../chunk-SCZ4BQ2G.mjs";
+export {
+  PlanCard
+};

package/dist/recovery-banner/index.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RecoveryBannerProps {
+    /** 에러 메시지 */
+    message: string;
+    /** 상세 설명 */
+    description?: string;
+    /** 재시도 콜백 */
+    onRetry?: () => void;
+    /** 무시 콜백 */
+    onDismiss?: () => void;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 에러 발생 시 복구 옵션을 제공하는 배너
+ */
+declare function RecoveryBanner({ message, description, onRetry, onDismiss, className, }: RecoveryBannerProps): react_jsx_runtime.JSX.Element;
+
+export { RecoveryBanner, type RecoveryBannerProps };

package/dist/recovery-banner/index.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RecoveryBannerProps {
+    /** 에러 메시지 */
+    message: string;
+    /** 상세 설명 */
+    description?: string;
+    /** 재시도 콜백 */
+    onRetry?: () => void;
+    /** 무시 콜백 */
+    onDismiss?: () => void;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * 에러 발생 시 복구 옵션을 제공하는 배너
+ */
+declare function RecoveryBanner({ message, description, onRetry, onDismiss, className, }: RecoveryBannerProps): react_jsx_runtime.JSX.Element;
+
+export { RecoveryBanner, type RecoveryBannerProps };