@axis-ds/agentic-ui 1.3.0 → 1.5.0

package/README.md

@@ -10,6 +10,35 @@ npm install @axis-ds/agentic-ui
 pnpm add @axis-ds/agentic-ui
 ```
 
+## Tailwind 연동
+
+### Tailwind CSS 4
+
+Tailwind CSS 4(`@import "tailwindcss"`, create-next-app 15.5 기본)에서는 `@import "tailwindcss"` 가 있는 전역 CSS 에 두 줄을 더합니다.
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@axis-ds/tokens/css/tailwind4";
+@import "@axis-ds/agentic-ui/tailwind.css";
+```
+
+- `@axis-ds/agentic-ui/tailwind.css` 는 스타일 규칙 없이 `@source "./dist"` 한 줄만 담습니다. Tailwind 4 는 `node_modules` 를 스캔하지 않아서, 이 줄이 없으면 컴포넌트가 쓰는 `bg-[var(--axis-agent-avatar-assistant)]` 같은 클래스가 생성되지 않습니다. 경로는 파일 기준 상대 경로라 npm · pnpm 설치 모두 동작합니다.
+- `@import "tailwindcss"` 가 있는 같은 파일에서 import 합니다. 다른 CSS 파일이나 JS/TSX 에서 import 하면 스캔 경로가 그 컴파일에 들어가지 않습니다.
+- `@axis-ds/tokens/css/tailwind4` 는 `rounded-md` · `font-mono` 등을 AXIS 변수로 매핑하고 토큰 변수를 base 레이어로 함께 불러옵니다. pnpm 처럼 의존성을 끌어올리지 않는 설치에서는 `@axis-ds/tokens` 를 직접 설치해야 이 import 가 풀립니다. 브랜드 CSS · create-next-app 기본 `:root` 와의 충돌은 `@axis-ds/tokens` README 를 참고하세요.
+- 이 패키지는 `@axis-ds/ui-react` 에서 유틸리티 함수만 가져옵니다. 앱에서 `@axis-ds/ui-react` 컴포넌트를 직접 쓸 때만 `@import "@axis-ds/ui-react/tailwind.css";` 를 함께 넣습니다.
+
+### Tailwind CSS 3
+
+`tailwind.config` 에는 `@axis-ds/tokens/tailwind` preset 과 함께 컴포넌트 파일을 `content` 에 넣습니다.
+
+```js
+content: [
+  "./src/**/*.{js,ts,jsx,tsx}",
+  "./node_modules/@axis-ds/agentic-ui/**/*.{js,jsx}",
+],
+```
+
 ## 사용법
 
 ```tsx
@@ -18,9 +47,50 @@ import { StreamingText, ToolCallCard } from '@axis-ds/agentic-ui';
 import { StreamingText } from '@axis-ds/agentic-ui/streaming-text';
 ```
 
+컴포넌트마다 서브패스(`@axis-ds/agentic-ui/<컴포넌트 이름의 kebab-case>`)가 있습니다. 1.5.0 에서 그동안 루트로만 import 할 수 있던 `agent-avatar` · `recovery-banner` · `source-panel` · `step-timeline` · `surface-renderer` · `thinking-indicator` 서브패스를 더했습니다.
+
+## 서버 컴포넌트 (Next.js App Router)
+
+1.5.0 부터 `"use client"` 를 쓰지 않은 서버 컴포넌트(create-next-app 기본 `app/page.tsx` 등)에서 바로 import 해 렌더할 수 있습니다. 루트와 서브패스 결과가 같습니다.
+
+```tsx
+// app/page.tsx (서버 컴포넌트)
+import { CodeBlock, MessageBubble, StreamingText } from '@axis-ds/agentic-ui';
+
+export default function Page() {
+  return (
+    <>
+      <MessageBubble role="assistant" content="안녕하세요" />
+      <CodeBlock code="pnpm add @axis-ds/agentic-ui" language="bash" />
+      <StreamingText text="응답을 생성하고 있어요" />
+    </>
+  );
+}
+```
+
+**클라이언트 경계가 있는 컴포넌트**: 아래 7개는 패키지 `dist` 파일에 `"use client"` 가 있어, 서버 컴포넌트가 렌더하면 그 컴포넌트만 브라우저에서 hydrate 됩니다(복사 · 펼침 · 보기 모드 전환 · 피드백 선택 · 타이핑 애니메이션).
+
+`CodeBlock` · `ContextPanel` · `DiffViewer` · `FeedbackButtons` · `SourcePanel` · `StreamingText` · `ToolCallCard`
+
+나머지 11개(`AgentAvatar` · `ApprovalCard` · `AttachmentCard` · `MessageBubble` · `PlanCard` · `RecoveryBanner` · `RunProgress` · `StepTimeline` · `SurfaceRenderer` · `ThinkingIndicator` · `TokenUsageIndicator`)와 루트 배럴에는 지시문이 없어 서버에서 렌더됩니다. 판단 기준은 `useState` · `useEffect` · `useRef` 같은 클라이언트 전용 API 와 컴포넌트 안에서 이벤트 핸들러를 직접 만드는지이며, 목록은 패키지 소스 `scripts/client-modules.mjs` 한 곳에서 관리합니다.
+
+**서버 컴포넌트에서 함수 prop 은 넘길 수 없습니다**: `onCopy` · `onFeedback` · `onComplete` · `onRetry` · `onApprove` 같은 함수는 서버에서 클라이언트로 직렬화할 수 없어 React 가 오류를 냅니다(React Server Components 규칙). 함수 prop 없이 쓰면 서버에서 렌더되고, 핸들러가 필요하면 그 부분을 `"use client"` 파일로 만들어 그 안에서 씁니다.
+
+```tsx
+// app/feedback.tsx
+'use client';
+import { FeedbackButtons } from '@axis-ds/agentic-ui';
+
+export function Feedback({ messageId }: { messageId: string }) {
+  return <FeedbackButtons messageId={messageId} onFeedback={(id, f) => console.log(id, f)} />;
+}
+```
+
+- 이 패키지는 `@axis-ds/ui-react` 루트에서 `cn` 을 가져옵니다. 그래서 서브패스 하나만 import 해도 서버 그래프에 `@axis-ds/ui-react` 의 Radix 클라이언트 참조가 함께 실릴 수 있습니다(1.4.0 에도 있던 현상).
+
 ## 컴포넌트 목록
 
-RunProgress, ApprovalCard, StreamingText, ToolCallCard, MessageBubble, FeedbackButtons, CodeBlock, DiffViewer, PlanCard, ContextPanel, TokenUsageIndicator, AttachmentCard
+AgentAvatar, ApprovalCard, AttachmentCard, CodeBlock, ContextPanel, DiffViewer, FeedbackButtons, MessageBubble, PlanCard, RecoveryBanner, RunProgress, SourcePanel, StepTimeline, StreamingText, SurfaceRenderer, ThinkingIndicator, TokenUsageIndicator, ToolCallCard
 
 ## 문서
 

package/dist/agent-avatar/index.js

@@ -16,36 +16,26 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/agent-avatar/index.tsx
 var agent_avatar_exports = {};
 __export(agent_avatar_exports, {
   AgentAvatar: () => AgentAvatar
 });
 module.exports = __toCommonJS(agent_avatar_exports);
-var import_ui_react = require("@axis-ds/ui-react");
-
-// src/constants/a11y-labels.ts
-var AGENT_STATUS_LABELS = {
-  online: "\uC628\uB77C\uC778",
-  busy: "\uC0AC\uC6A9 \uC911",
-  offline: "\uC624\uD504\uB77C\uC778"
-};
-
-// src/agent-avatar/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var sizeStyles = {
+var import_ui_react = require("@axis-ds/ui-react");
+var import_a11y_labels = require("../constants/a11y-labels.js");
+const sizeStyles = {
   sm: "w-6 h-6 text-xs",
   md: "w-8 h-8 text-sm",
   lg: "w-10 h-10 text-base",
   xl: "w-12 h-12 text-lg"
 };
-var statusStyles = {
+const statusStyles = {
   online: "bg-[var(--axis-status-success)]",
   busy: "bg-[var(--axis-status-warning)]",
   offline: "bg-[var(--axis-status-neutral)]"
 };
-var typeColors = {
+const typeColors = {
   assistant: "bg-[var(--axis-agent-avatar-assistant)]",
   tool: "bg-[var(--axis-agent-avatar-tool)]",
   system: "bg-[var(--axis-agent-avatar-system)]"
@@ -59,7 +49,7 @@ function AgentAvatar({
   className
 }) {
   const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
-  const statusLabel = status ? AGENT_STATUS_LABELS[status] : "";
+  const statusLabel = status ? import_a11y_labels.AGENT_STATUS_LABELS[status] : "";
   const ariaLabel = `${name}${statusLabel ? `, ${statusLabel}` : ""}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",

package/dist/agent-avatar/index.mjs

@@ -1,7 +1,78 @@
-import {
-  AgentAvatar
-} from "../chunk-JY7MTMMB.mjs";
-import "../chunk-SCZ4BQ2G.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@axis-ds/ui-react";
+import { AGENT_STATUS_LABELS } from "../constants/a11y-labels.mjs";
+const sizeStyles = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  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)]"
+};
+const typeColors = {
+  assistant: "bg-[var(--axis-agent-avatar-assistant)]",
+  tool: "bg-[var(--axis-agent-avatar-tool)]",
+  system: "bg-[var(--axis-agent-avatar-system)]"
+};
+function AgentAvatar({
+  name,
+  src,
+  size = "md",
+  status,
+  type = "assistant",
+  className
+}) {
+  const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  const statusLabel = status ? AGENT_STATUS_LABELS[status] : "";
+  const ariaLabel = `${name}${statusLabel ? `, ${statusLabel}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("relative inline-flex", className),
+      children: [
+        src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            "aria-hidden": "true",
+            className: cn(
+              "rounded-full object-cover",
+              sizeStyles[size]
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
+              sizeStyles[size],
+              typeColors[type]
+            ),
+            children: initials
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
+              size === "sm" ? "w-2 h-2" : "w-3 h-3",
+              statusStyles[status]
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AgentAvatar
 };

package/dist/approval-card/index.js

@@ -26,26 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/approval-card/index.tsx
 var approval_card_exports = {};
 __export(approval_card_exports, {
   ApprovalCard: () => ApprovalCard
 });
 module.exports = __toCommonJS(approval_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 SEVERITY_LABELS = {
-  info: "\uC815\uBCF4",
-  warning: "\uC8FC\uC758",
-  error: "\uC624\uB958"
-};
-
-// src/approval-card/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var severityStyles = {
+var import_a11y_labels = require("../constants/a11y-labels.js");
+const severityStyles = {
   info: {
     border: "border-l-[var(--axis-status-info)]",
     icon: "text-[var(--axis-status-info)]",
@@ -62,12 +52,12 @@ var severityStyles = {
     bg: "bg-[var(--axis-surface-error)]"
   }
 };
-var severityIcons = {
+const severityIcons = {
   info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
   warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "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" }) }),
   error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
 };
-var actionVariantStyles = {
+const actionVariantStyles = {
   default: "bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
   secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
   ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
@@ -87,7 +77,7 @@ function ApprovalCard({
   const baseId = id || generatedId;
   const titleId = `${baseId}-title`;
   const descId = `${baseId}-desc`;
-  const severityLabel = SEVERITY_LABELS[severity];
+  const severityLabel = import_a11y_labels.SEVERITY_LABELS[severity];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {

package/dist/approval-card/index.mjs

@@ -1,7 +1,89 @@
-import {
-  ApprovalCard
-} from "../chunk-7HTVJ6MK.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 { SEVERITY_LABELS } from "../constants/a11y-labels.mjs";
+const severityStyles = {
+  info: {
+    border: "border-l-[var(--axis-status-info)]",
+    icon: "text-[var(--axis-status-info)]",
+    bg: "bg-[var(--axis-surface-info)]"
+  },
+  warning: {
+    border: "border-l-[var(--axis-status-warning)]",
+    icon: "text-[var(--axis-status-warning)]",
+    bg: "bg-[var(--axis-surface-warning)]"
+  },
+  error: {
+    border: "border-l-[var(--axis-status-error)]",
+    icon: "text-[var(--axis-status-error)]",
+    bg: "bg-[var(--axis-surface-error)]"
+  }
+};
+const severityIcons = {
+  info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+  warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+};
+const actionVariantStyles = {
+  default: "bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
+  secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
+  ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
+  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)]"
+};
+function ApprovalCard({
+  id,
+  title,
+  description,
+  severity = "info",
+  actions,
+  children,
+  className
+}) {
+  const styles = severityStyles[severity];
+  const generatedId = React.useId();
+  const baseId = id || generatedId;
+  const titleId = `${baseId}-title`;
+  const descId = `${baseId}-desc`;
+  const severityLabel = SEVERITY_LABELS[severity];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      className: cn(
+        "rounded-lg border border-l-4 p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 mt-0.5", styles.icon), "aria-hidden": "true", children: severityIcons[severity] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            severityLabel,
+            " \uC54C\uB9BC:"
+          ] }),
+          /* @__PURE__ */ jsx("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
+          description && /* @__PURE__ */ jsx("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: "mt-3", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: action.onClick,
+              className: cn(
+                "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                actionVariantStyles[action.variant || "default"]
+              ),
+              children: action.label
+            },
+            index
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
 export {
   ApprovalCard
 };

package/dist/attachment-card/index.js

@@ -16,34 +16,22 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/attachment-card/index.tsx
 var attachment_card_exports = {};
 __export(attachment_card_exports, {
   AttachmentCard: () => AttachmentCard
 });
 module.exports = __toCommonJS(attachment_card_exports);
-var import_ui_react = require("@axis-ds/ui-react");
-
-// src/constants/a11y-labels.ts
-var ATTACHMENT_TYPE_LABELS = {
-  image: "\uC774\uBBF8\uC9C0",
-  document: "\uBB38\uC11C",
-  code: "\uCF54\uB4DC",
-  archive: "\uC555\uCD95 \uD30C\uC77C",
-  other: "\uAE30\uD0C0 \uD30C\uC77C"
-};
-
-// src/attachment-card/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var typeIcons = {
+var import_ui_react = require("@axis-ds/ui-react");
+var import_a11y_labels = require("../constants/a11y-labels.js");
+const typeIcons = {
   image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
   document: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
   code: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) }),
   archive: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" }) }),
   other: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-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: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
 };
-var formatFileSize = (bytes) => {
+const formatFileSize = (bytes) => {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
@@ -59,7 +47,7 @@ function AttachmentCard({
   onRemove,
   className
 }) {
-  const typeLabel = ATTACHMENT_TYPE_LABELS[type];
+  const typeLabel = import_a11y_labels.ATTACHMENT_TYPE_LABELS[type];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {

package/dist/attachment-card/index.mjs

@@ -1,7 +1,104 @@
-import {
-  AttachmentCard
-} from "../chunk-42KEAZ2Y.mjs";
-import "../chunk-SCZ4BQ2G.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@axis-ds/ui-react";
+import { ATTACHMENT_TYPE_LABELS } from "../constants/a11y-labels.mjs";
+const typeIcons = {
+  image: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+  document: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+  code: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) }),
+  archive: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" }) }),
+  other: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
+};
+const formatFileSize = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+function AttachmentCard({
+  type,
+  name,
+  size,
+  url,
+  thumbnail,
+  status = "complete",
+  progress,
+  onRemove,
+  className
+}) {
+  const typeLabel = ATTACHMENT_TYPE_LABELS[type];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${typeLabel}: ${name}`,
+      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)]",
+        className
+      ),
+      children: [
+        thumbnail ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: thumbnail,
+            alt: "",
+            "aria-hidden": "true",
+            className: "w-10 h-10 rounded object-cover flex-shrink-0"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-10 h-10 rounded flex items-center justify-center flex-shrink-0 bg-[var(--axis-surface-secondary)] text-[var(--axis-icon-secondary)]",
+            "aria-hidden": "true",
+            children: typeIcons[type]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: url ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "hover:underline",
+              "aria-label": `${name} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
+              children: name
+            }
+          ) : name }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
+            /* @__PURE__ */ jsx("span", { children: typeLabel }),
+            size !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ jsx("span", { children: formatFileSize(size) })
+            ] }),
+            status === "error" && /* @__PURE__ */ jsx("span", { className: "text-[var(--axis-text-error)]", children: "\uC5C5\uB85C\uB4DC \uC2E4\uD328" })
+          ] }),
+          status === "uploading" && progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all",
+              style: { width: `${progress}%` },
+              role: "progressbar",
+              "aria-valuenow": progress,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-label": "\uC5C5\uB85C\uB4DC \uC9C4\uD589\uB960"
+            }
+          ) })
+        ] }),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onRemove,
+            "aria-label": `${name} \uC0AD\uC81C`,
+            className: "flex-shrink-0 p-1 rounded-md text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)] transition-colors",
+            children: /* @__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" }) })
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AttachmentCard
 };

package/dist/code-block/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -26,16 +27,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/code-block/index.tsx
 var code_block_exports = {};
 __export(code_block_exports, {
   CodeBlock: () => CodeBlock
 });
 module.exports = __toCommonJS(code_block_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 CodeBlock({
   code,
   language,

package/dist/code-block/index.mjs

@@ -1,6 +1,79 @@
-import {
-  CodeBlock
-} from "../chunk-4CMUEGLK.mjs";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+function CodeBlock({
+  code,
+  language,
+  filename,
+  showLineNumbers = false,
+  onCopy,
+  maxHeight,
+  className
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      onCopy?.(code);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__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 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleCopy,
+              "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("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" }) }),
+                /* @__PURE__ */ jsx("span", { children: "\uBCF5\uC0AC" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "overflow-auto",
+            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(
+                "td",
+                {
+                  className: "select-none text-right pr-4 text-[var(--axis-text-tertiary)] w-8",
+                  "aria-hidden": "true",
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx("td", { className: "whitespace-pre", children: line })
+            ] }, i)) }) }) : code }) })
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   CodeBlock
 };