@axis-ds/agentic-ui 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +43 -2
  2. package/dist/agent-avatar/index.js +6 -16
  3. package/dist/agent-avatar/index.mjs +75 -4
  4. package/dist/approval-card/index.js +6 -16
  5. package/dist/approval-card/index.mjs +86 -4
  6. package/dist/attachment-card/index.js +5 -17
  7. package/dist/attachment-card/index.mjs +101 -4
  8. package/dist/code-block/index.js +2 -3
  9. package/dist/code-block/index.mjs +76 -3
  10. package/dist/constants/a11y-labels.d.mts +86 -0
  11. package/dist/constants/a11y-labels.d.ts +86 -0
  12. package/dist/constants/a11y-labels.js +105 -0
  13. package/dist/{chunk-SCZ4BQ2G.mjs → constants/a11y-labels.mjs} +21 -17
  14. package/dist/context-panel/index.js +2 -3
  15. package/dist/context-panel/index.mjs +99 -3
  16. package/dist/diff-viewer/index.js +8 -17
  17. package/dist/diff-viewer/index.mjs +155 -4
  18. package/dist/feedback-buttons/index.js +7 -16
  19. package/dist/feedback-buttons/index.mjs +65 -4
  20. package/dist/index.js +36 -1732
  21. package/dist/index.mjs +18 -55
  22. package/dist/message-bubble/index.js +5 -15
  23. package/dist/message-bubble/index.mjs +98 -4
  24. package/dist/plan-card/index.js +6 -28
  25. package/dist/plan-card/index.mjs +143 -4
  26. package/dist/recovery-banner/index.js +1 -3
  27. package/dist/recovery-banner/index.mjs +70 -3
  28. package/dist/run-progress/index.js +5 -19
  29. package/dist/run-progress/index.mjs +128 -4
  30. package/dist/source-panel/index.js +5 -15
  31. package/dist/source-panel/index.mjs +88 -4
  32. package/dist/step-timeline/index.js +3 -17
  33. package/dist/step-timeline/index.mjs +69 -4
  34. package/dist/streaming-text/index.js +30 -29
  35. package/dist/streaming-text/index.mjs +61 -3
  36. package/dist/surface-renderer/index.js +1 -3
  37. package/dist/surface-renderer/index.mjs +79 -3
  38. package/dist/thinking-indicator/index.js +3 -5
  39. package/dist/thinking-indicator/index.mjs +45 -3
  40. package/dist/token-usage-indicator/index.js +1 -3
  41. package/dist/token-usage-indicator/index.mjs +81 -3
  42. package/dist/tool-call-card/index.js +5 -18
  43. package/dist/tool-call-card/index.mjs +108 -4
  44. package/package.json +94 -6
  45. package/dist/chunk-42KEAZ2Y.mjs +0 -109
  46. package/dist/chunk-4CMUEGLK.mjs +0 -80
  47. package/dist/chunk-4V4BWBRC.mjs +0 -77
  48. package/dist/chunk-7HTVJ6MK.mjs +0 -94
  49. package/dist/chunk-DPLGRVNQ.mjs +0 -95
  50. package/dist/chunk-FYAMA32G.mjs +0 -50
  51. package/dist/chunk-GQYOOLDL.mjs +0 -63
  52. package/dist/chunk-IOF4OET6.mjs +0 -162
  53. package/dist/chunk-J4FIMXXG.mjs +0 -106
  54. package/dist/chunk-JY7MTMMB.mjs +0 -83
  55. package/dist/chunk-KJVPVBET.mjs +0 -103
  56. package/dist/chunk-OYQX3SL4.mjs +0 -152
  57. package/dist/chunk-QS6GQNSE.mjs +0 -86
  58. package/dist/chunk-R4CMHIRO.mjs +0 -72
  59. package/dist/chunk-SCXUEQLI.mjs +0 -136
  60. package/dist/chunk-UDL4M5RP.mjs +0 -75
  61. package/dist/chunk-WFYQINWD.mjs +0 -115
  62. package/dist/chunk-ZW4Z27AB.mjs +0 -84
@@ -1,75 +0,0 @@
1
- // src/recovery-banner/index.tsx
2
- import * as React from "react";
3
- import { cn } from "@axis-ds/ui-react";
4
- import { jsx, jsxs } from "react/jsx-runtime";
5
- function RecoveryBanner({
6
- message,
7
- description,
8
- onRetry,
9
- onDismiss,
10
- className
11
- }) {
12
- const titleId = React.useId();
13
- const descId = React.useId();
14
- return /* @__PURE__ */ jsxs(
15
- "div",
16
- {
17
- className: cn(
18
- "flex items-start gap-3 p-4 rounded-lg border",
19
- "bg-[var(--axis-surface-error)] border-[var(--axis-status-error-border)]",
20
- className
21
- ),
22
- role: "alert",
23
- "aria-labelledby": titleId,
24
- "aria-describedby": description ? descId : void 0,
25
- children: [
26
- /* @__PURE__ */ jsx(
27
- "svg",
28
- {
29
- className: "w-5 h-5 text-[var(--axis-status-error)] flex-shrink-0 mt-0.5",
30
- fill: "none",
31
- stroke: "currentColor",
32
- viewBox: "0 0 24 24",
33
- "aria-hidden": "true",
34
- children: /* @__PURE__ */ jsx(
35
- "path",
36
- {
37
- strokeLinecap: "round",
38
- strokeLinejoin: "round",
39
- strokeWidth: 2,
40
- 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"
41
- }
42
- )
43
- }
44
- ),
45
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
46
- /* @__PURE__ */ jsx("p", { id: titleId, className: "text-sm font-medium text-[var(--axis-text-error)]", children: message }),
47
- description && /* @__PURE__ */ jsx("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
48
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3", children: [
49
- onRetry && /* @__PURE__ */ jsx(
50
- "button",
51
- {
52
- onClick: onRetry,
53
- "aria-describedby": descId,
54
- 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",
55
- children: "\uC7AC\uC2DC\uB3C4"
56
- }
57
- ),
58
- onDismiss && /* @__PURE__ */ jsx(
59
- "button",
60
- {
61
- onClick: onDismiss,
62
- 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",
63
- children: "\uBB34\uC2DC"
64
- }
65
- )
66
- ] })
67
- ] })
68
- ]
69
- }
70
- );
71
- }
72
-
73
- export {
74
- RecoveryBanner
75
- };
@@ -1,115 +0,0 @@
1
- import {
2
- STATUS_LABELS
3
- } from "./chunk-SCZ4BQ2G.mjs";
4
-
5
- // src/tool-call-card/index.tsx
6
- import * as React from "react";
7
- import { cn } from "@axis-ds/ui-react";
8
- import { jsx, jsxs } from "react/jsx-runtime";
9
- var statusConfig = {
10
- pending: {
11
- color: "text-[var(--axis-status-neutral)]",
12
- 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 }) })
13
- },
14
- running: {
15
- color: "text-[var(--axis-status-running)]",
16
- icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
17
- /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
18
- /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
19
- ] })
20
- },
21
- success: {
22
- color: "text-[var(--axis-status-success)]",
23
- 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" }) })
24
- },
25
- error: {
26
- color: "text-[var(--axis-status-error)]",
27
- 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" }) })
28
- }
29
- };
30
- function ToolCallCard({
31
- toolName,
32
- description,
33
- status,
34
- input,
35
- output,
36
- error,
37
- duration,
38
- defaultExpanded = false,
39
- "aria-label": ariaLabel,
40
- className
41
- }) {
42
- const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
43
- const config = statusConfig[status];
44
- const contentId = React.useId();
45
- const statusLabel = STATUS_LABELS[status] || status;
46
- return /* @__PURE__ */ jsxs(
47
- "div",
48
- {
49
- className: cn(
50
- "rounded-lg border overflow-hidden",
51
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
52
- className
53
- ),
54
- children: [
55
- /* @__PURE__ */ jsxs(
56
- "button",
57
- {
58
- onClick: () => setIsExpanded(!isExpanded),
59
- "aria-expanded": isExpanded,
60
- "aria-controls": contentId,
61
- "aria-label": ariaLabel || `${toolName} - ${statusLabel}`,
62
- className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
63
- children: [
64
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
65
- /* @__PURE__ */ jsx("span", { className: config.color, "aria-hidden": "true", children: config.icon }),
66
- /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
67
- description && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
68
- "\u2014 ",
69
- description
70
- ] })
71
- ] }),
72
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
73
- duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
74
- duration,
75
- "ms"
76
- ] }),
77
- /* @__PURE__ */ jsx(
78
- "svg",
79
- {
80
- className: cn(
81
- "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
82
- isExpanded && "rotate-180"
83
- ),
84
- fill: "none",
85
- stroke: "currentColor",
86
- viewBox: "0 0 24 24",
87
- children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
88
- }
89
- )
90
- ] })
91
- ]
92
- }
93
- ),
94
- isExpanded && /* @__PURE__ */ jsxs("div", { id: contentId, className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
95
- input && /* @__PURE__ */ jsxs("div", { children: [
96
- /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
97
- /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: JSON.stringify(input, null, 2) }) })
98
- ] }),
99
- output !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
100
- /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
101
- /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: typeof output === "string" ? output : JSON.stringify(output, null, 2) }) })
102
- ] }),
103
- error && /* @__PURE__ */ jsxs("div", { children: [
104
- /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
105
- /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-error)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-error)]", children: error }) })
106
- ] })
107
- ] })
108
- ]
109
- }
110
- );
111
- }
112
-
113
- export {
114
- ToolCallCard
115
- };
@@ -1,84 +0,0 @@
1
- // src/surface-renderer/index.tsx
2
- import { cn } from "@axis-ds/ui-react";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
- function SurfaceRenderer({
5
- surface,
6
- renderCustom,
7
- className
8
- }) {
9
- const renderContent = () => {
10
- switch (surface.type) {
11
- case "text":
12
- return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
13
- case "code":
14
- return /* @__PURE__ */ jsx("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
15
- case "table": {
16
- const tableData = surface.content;
17
- return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { role: "table", className: "w-full text-sm", children: [
18
- surface.title && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: surface.title }),
19
- /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-[var(--axis-border-default)]", children: tableData.headers.map((header, i) => /* @__PURE__ */ jsx(
20
- "th",
21
- {
22
- scope: "col",
23
- className: "px-3 py-2 text-left font-medium text-[var(--axis-text-secondary)]",
24
- children: header
25
- },
26
- i
27
- )) }) }),
28
- /* @__PURE__ */ jsx("tbody", { children: tableData.rows.map((row, i) => /* @__PURE__ */ jsx(
29
- "tr",
30
- {
31
- className: "border-b border-[var(--axis-border-default)] last:border-0",
32
- children: row.map((cell, j) => /* @__PURE__ */ jsx(
33
- "td",
34
- {
35
- className: "px-3 py-2 text-[var(--axis-text-primary)]",
36
- children: cell
37
- },
38
- j
39
- ))
40
- },
41
- i
42
- )) })
43
- ] }) });
44
- }
45
- case "chart":
46
- return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
47
- "[\uCC28\uD2B8: ",
48
- surface.title || "\uB370\uC774\uD130 \uC2DC\uAC01\uD654",
49
- "]"
50
- ] });
51
- case "form":
52
- return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
53
- "[\uD3FC: ",
54
- surface.title || "\uC785\uB825 \uC591\uC2DD",
55
- "]"
56
- ] });
57
- case "custom":
58
- if (renderCustom) {
59
- return renderCustom(surface);
60
- }
61
- return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: "[\uCEE4\uC2A4\uD140 Surface]" });
62
- default:
63
- return null;
64
- }
65
- };
66
- return /* @__PURE__ */ jsxs(
67
- "div",
68
- {
69
- className: cn(
70
- "rounded-lg border p-4",
71
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
72
- className
73
- ),
74
- children: [
75
- surface.title && /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-[var(--axis-text-primary)] mb-3", children: surface.title }),
76
- renderContent()
77
- ]
78
- }
79
- );
80
- }
81
-
82
- export {
83
- SurfaceRenderer
84
- };