@axis-ds/agentic-ui 1.4.0 → 1.5.0

package/dist/diff-viewer/index.mjs

@@ -1,7 +1,158 @@
-import {
-  DiffViewer
-} from "../chunk-IOF4OET6.mjs";
-import "../chunk-SCZ4BQ2G.mjs";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { DIFF_LABELS } from "../constants/a11y-labels.mjs";
+function computeDiff(before, after) {
+  const oldLines = before.split("\n");
+  const newLines = after.split("\n");
+  const m = oldLines.length;
+  const n = newLines.length;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (oldLines[i2 - 1] === newLines[j2 - 1]) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const result = [];
+  let i = m;
+  let j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      result.unshift({ type: "unchanged", content: oldLines[i - 1], oldLineNumber: i, newLineNumber: j });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      result.unshift({ type: "added", content: newLines[j - 1], newLineNumber: j });
+      j--;
+    } else if (i > 0) {
+      result.unshift({ type: "removed", content: oldLines[i - 1], oldLineNumber: i });
+      i--;
+    }
+  }
+  return result;
+}
+const lineTypeStyles = {
+  added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
+  removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
+  unchanged: ""
+};
+const lineTypeTextStyles = {
+  added: "text-[var(--axis-diff-added-text)]",
+  removed: "text-[var(--axis-diff-removed-text)]",
+  unchanged: "text-[var(--axis-text-primary)]"
+};
+const lineTypeSymbols = {
+  added: "+",
+  removed: "-",
+  unchanged: " "
+};
+function DiffViewer({
+  before,
+  after,
+  filename,
+  viewMode = "unified",
+  className
+}) {
+  const [mode, setMode] = React.useState(viewMode);
+  const diffLines = React.useMemo(() => computeDiff(before, after), [before, after]);
+  const addedCount = diffLines.filter((l) => l.type === "added").length;
+  const removedCount = diffLines.filter((l) => l.type === "removed").length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": filename ? `${filename} \uBCC0\uACBD\uC0AC\uD56D` : "\uCF54\uB4DC \uBCC0\uACBD\uC0AC\uD56D",
+      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: [
+            /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
+            filename && /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
+              "+",
+              addedCount
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
+              "-",
+              removedCount
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-[var(--axis-surface-tertiary)] rounded-md p-0.5", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setMode("unified"),
+                "aria-pressed": mode === "unified",
+                className: cn(
+                  "px-2 py-0.5 text-xs rounded transition-colors",
+                  mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                ),
+                children: "\uD1B5\uD569"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setMode("split"),
+                "aria-pressed": mode === "split",
+                className: cn(
+                  "px-2 py-0.5 text-xs rounded transition-colors",
+                  mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                ),
+                children: "\uBD84\uD560"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: mode === "unified" ? /* @__PURE__ */ jsx(UnifiedView, { lines: diffLines }) : /* @__PURE__ */ jsx(SplitView, { lines: diffLines }) })
+      ]
+    }
+  );
+}
+function UnifiedView({ lines }) {
+  return /* @__PURE__ */ jsx("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { className: lineTypeStyles[line.type], children: [
+    /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
+    /* @__PURE__ */ jsx("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
+    /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", lineTypeTextStyles[line.type]), children: lineTypeSymbols[line.type] }),
+    /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre", lineTypeTextStyles[line.type]), children: line.content })
+  ] }, i)) }) });
+}
+function SplitView({ lines }) {
+  const leftLines = [];
+  const rightLines = [];
+  for (const line of lines) {
+    if (line.type === "unchanged") {
+      leftLines.push(line);
+      rightLines.push(line);
+    } else if (line.type === "removed") {
+      leftLines.push(line);
+      rightLines.push(null);
+    } else {
+      leftLines.push(null);
+      rightLines.push(line);
+    }
+  }
+  return /* @__PURE__ */ jsx("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ jsx("tbody", { children: leftLines.map((leftLine, i) => {
+    const rightLine = rightLines[i];
+    return /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", leftLine ? lineTypeTextStyles[leftLine.type] : ""), children: leftLine ? lineTypeSymbols[leftLine.type] : "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre w-1/2 border-r border-[var(--axis-border-default)]", leftLine ? cn(lineTypeStyles[leftLine.type], lineTypeTextStyles[leftLine.type]) : ""), children: leftLine?.content ?? "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("select-none w-4 text-center py-0.5", rightLine ? lineTypeTextStyles[rightLine.type] : ""), children: rightLine ? lineTypeSymbols[rightLine.type] : "" }),
+      /* @__PURE__ */ jsx("td", { className: cn("px-2 py-0.5 whitespace-pre w-1/2", rightLine ? cn(lineTypeStyles[rightLine.type], lineTypeTextStyles[rightLine.type]) : ""), children: rightLine?.content ?? "" })
+    ] }, i);
+  }) }) });
+}
 export {
   DiffViewer
 };

package/dist/feedback-buttons/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -26,30 +27,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/feedback-buttons/index.tsx
 var feedback_buttons_exports = {};
 __export(feedback_buttons_exports, {
   FeedbackButtons: () => FeedbackButtons
 });
 module.exports = __toCommonJS(feedback_buttons_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 FEEDBACK_LABELS = {
-  like: "\uC88B\uC544\uC694",
-  dislike: "\uC2EB\uC5B4\uC694",
-  none: "\uD53C\uB4DC\uBC31 \uC5C6\uC74C"
-};
-
-// src/feedback-buttons/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var sizeStyles = {
+var import_a11y_labels = require("../constants/a11y-labels.js");
+const sizeStyles = {
   sm: "p-1",
   md: "p-1.5"
 };
-var iconSizes = {
+const iconSizes = {
   sm: "w-3.5 h-3.5",
   md: "w-4 h-4"
 };
@@ -78,7 +69,7 @@ function FeedbackButtons({
           {
             onClick: () => handleFeedback("like"),
             "aria-pressed": feedback === "like",
-            "aria-label": FEEDBACK_LABELS.like,
+            "aria-label": import_a11y_labels.FEEDBACK_LABELS.like,
             className: (0, import_ui_react.cn)(
               "rounded-md transition-colors",
               sizeStyles[size],
@@ -92,7 +83,7 @@ function FeedbackButtons({
           {
             onClick: () => handleFeedback("dislike"),
             "aria-pressed": feedback === "dislike",
-            "aria-label": FEEDBACK_LABELS.dislike,
+            "aria-label": import_a11y_labels.FEEDBACK_LABELS.dislike,
             className: (0, import_ui_react.cn)(
               "rounded-md transition-colors",
               sizeStyles[size],

package/dist/feedback-buttons/index.mjs

@@ -1,7 +1,68 @@
-import {
-  FeedbackButtons
-} from "../chunk-R4CMHIRO.mjs";
-import "../chunk-SCZ4BQ2G.mjs";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { FEEDBACK_LABELS } from "../constants/a11y-labels.mjs";
+const sizeStyles = {
+  sm: "p-1",
+  md: "p-1.5"
+};
+const iconSizes = {
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4"
+};
+function FeedbackButtons({
+  messageId,
+  initialFeedback = "none",
+  onFeedback,
+  size = "sm",
+  className
+}) {
+  const [feedback, setFeedback] = React.useState(initialFeedback);
+  const handleFeedback = (type) => {
+    const newFeedback = feedback === type ? "none" : type;
+    setFeedback(newFeedback);
+    onFeedback?.(messageId, newFeedback);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "\uBA54\uC2DC\uC9C0 \uD53C\uB4DC\uBC31",
+      className: cn("inline-flex items-center gap-1", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleFeedback("like"),
+            "aria-pressed": feedback === "like",
+            "aria-label": FEEDBACK_LABELS.like,
+            className: cn(
+              "rounded-md transition-colors",
+              sizeStyles[size],
+              feedback === "like" ? "text-[var(--axis-status-success)] bg-[color:color-mix(in_srgb,var(--axis-status-success)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+            ),
+            children: /* @__PURE__ */ jsx("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zm-9 11H3a2 2 0 01-2-2v-7a2 2 0 012-2h2" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleFeedback("dislike"),
+            "aria-pressed": feedback === "dislike",
+            "aria-label": FEEDBACK_LABELS.dislike,
+            className: cn(
+              "rounded-md transition-colors",
+              sizeStyles[size],
+              feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+            ),
+            children: /* @__PURE__ */ jsx("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zm9-13h2a2 2 0 012 2v7a2 2 0 01-2 2h-2" }) })
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   FeedbackButtons
 };