@lantos1618/better-ui 0.9.2 → 0.9.3

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 (3) hide show
  1. package/dist/components/index.js +20 -17
  2. package/dist/components/index.mjs +16 -13
  3. package/package.json +1 -1
package/dist/components/index.js CHANGED
@@ -425,13 +425,14 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
425
425
 
426
426
  // src/components/Thread.tsx
427
427
  var import_react6 = require("react");
428
- var import_lucide_react = require("lucide-react");
428
+ var import_lucide_react2 = require("lucide-react");
429
429
 
430
430
  // src/components/Message.tsx
431
431
  var import_ai2 = require("ai");
432
432
 
433
433
  // src/components/ToolResult.tsx
434
434
  var import_react4 = require("react");
435
+ var import_lucide_react = require("lucide-react");
435
436
  var import_jsx_runtime2 = require("react/jsx-runtime");
436
437
  var ToolViewErrorBoundary = class extends import_react4.Component {
437
438
  constructor() {
@@ -448,7 +449,7 @@ var ToolViewErrorBoundary = class extends import_react4.Component {
448
449
  if (this.state.error) {
449
450
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
450
451
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
451
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
452
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
452
453
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
453
454
  this.props.toolName,
454
455
  " view error"
@@ -625,7 +626,7 @@ function ToolResult({
625
626
  if (storeState?.error && !resolvedOutput && !resolvedLoading) {
626
627
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4 ${className || ""}`, children: [
627
628
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
628
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
629
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
629
630
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
630
631
  toolName,
631
632
  " failed"
@@ -842,7 +843,7 @@ function Thread({ className, emptyMessage, suggestions }) {
842
843
  children: [
843
844
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1", children: suggestion }),
844
845
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
845
- import_lucide_react.ArrowRight,
846
+ import_lucide_react2.ArrowRight,
846
847
  {
847
848
  size: 14,
848
849
  strokeWidth: 1.75,
@@ -877,7 +878,7 @@ function Thread({ className, emptyMessage, suggestions }) {
877
878
 
878
879
  // src/components/Composer.tsx
879
880
  var import_react7 = require("react");
880
- var import_lucide_react2 = require("lucide-react");
881
+ var import_lucide_react3 = require("lucide-react");
881
882
  var import_jsx_runtime6 = require("react/jsx-runtime");
882
883
  function Composer({ className, placeholder = "Ask something..." }) {
883
884
  const { sendMessage, isLoading } = useChatContext();
@@ -907,7 +908,7 @@ function Composer({ className, placeholder = "Ask something..." }) {
907
908
  disabled: isLoading || !input.trim(),
908
909
  "aria-label": "Send",
909
910
  className: "absolute right-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-[var(--bui-primary,#18181b)] text-[var(--bui-user-fg,#f4f4f5)] transition-all enabled:hover:bg-[var(--bui-primary-hover,#27272a)] enabled:active:scale-95 disabled:bg-[var(--bui-bg-elevated,#27272a)] disabled:text-[var(--bui-fg-faint,#52525b)] disabled:cursor-not-allowed",
910
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Send, { size: 14, strokeWidth: 1.75 })
911
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Send, { size: 14, strokeWidth: 1.75 })
911
912
  }
912
913
  )
913
914
  ] });
@@ -938,6 +939,7 @@ function Chat({
938
939
 
939
940
  // src/components/Panel.tsx
940
941
  var import_react8 = require("react");
942
+ var import_lucide_react4 = require("lucide-react");
941
943
  var import_jsx_runtime8 = require("react/jsx-runtime");
942
944
  function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems = 5 }) {
943
945
  const subscribe = (0, import_react8.useCallback)(
@@ -996,7 +998,7 @@ function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool
996
998
  }
997
999
  ),
998
1000
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex flex-col items-center gap-3 text-center", children: [
999
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "w-5 h-5 text-[var(--bui-fg-faint,#52525b)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" }) }) }),
1001
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Sparkles, { size: 20, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)]" }) }),
1000
1002
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
1001
1003
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-sm font-medium", children: "Canvas" }),
1002
1004
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: "Tool results will render here as you chat" })
@@ -1114,6 +1116,7 @@ function ThemeProvider({
1114
1116
 
1115
1117
  // src/components/Question.tsx
1116
1118
  var import_react11 = require("react");
1119
+ var import_lucide_react5 = require("lucide-react");
1117
1120
  var import_jsx_runtime10 = require("react/jsx-runtime");
1118
1121
  function QuestionView({
1119
1122
  question,
@@ -1175,7 +1178,7 @@ function QuestionView({
1175
1178
  disabled: loading,
1176
1179
  className: `w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${isSelected(opt.value) ? "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)] text-[var(--bui-fg,#f4f4f5)]" : "border-[var(--bui-border-strong,#3f3f46)] bg-[var(--bui-bg-surface,#18181b)]/50 text-[var(--bui-fg-secondary,#a1a1aa)] hover:border-[var(--bui-border-strong,#3f3f46)] hover:bg-[var(--bui-bg-surface,#18181b)]"} disabled:opacity-50 disabled:cursor-not-allowed`,
1177
1180
  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
1178
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-2.5 h-2.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }),
1181
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Check, { size: 10, strokeWidth: 3, className: "text-white" }) }),
1179
1182
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0 flex-1", children: [
1180
1183
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm", children: opt.label }),
1181
1184
  opt.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-0.5", children: opt.description })
@@ -1481,6 +1484,7 @@ function DataTableView({
1481
1484
  }
1482
1485
 
1483
1486
  // src/components/Progress.tsx
1487
+ var import_lucide_react6 = require("lucide-react");
1484
1488
  var import_jsx_runtime13 = require("react/jsx-runtime");
1485
1489
  function ProgressView({
1486
1490
  title,
@@ -1535,8 +1539,8 @@ function ProgressView({
1535
1539
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-0.5 shrink-0", children: [
1536
1540
  step.status === "pending" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 rounded-full border border-[var(--bui-border-strong,#3f3f46)]" }),
1537
1541
  step.status === "active" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 rounded-full bg-[var(--bui-primary-muted,#1e3a5f)] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-2 h-2 bg-[var(--bui-primary-hover,#3b82f6)] rounded-full animate-pulse" }) }),
1538
- step.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-success-fg,#6ee7b7)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
1539
- step.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
1542
+ step.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Check, { size: 16, strokeWidth: 3, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
1543
+ step.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.X, { size: 16, strokeWidth: 3, className: "text-[var(--bui-error-fg,#f87171)]" })
1540
1544
  ] }),
1541
1545
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
1542
1546
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `text-sm ${step.status === "done" ? "text-[var(--bui-fg-secondary,#a1a1aa)] line-through" : step.status === "error" ? "text-[var(--bui-error-fg,#f87171)]" : step.status === "active" ? "text-[var(--bui-fg,#f4f4f5)]" : "text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: step.label }),
@@ -1690,6 +1694,7 @@ function MediaItemRenderer({
1690
1694
 
1691
1695
  // src/components/CodeBlock.tsx
1692
1696
  var import_react15 = require("react");
1697
+ var import_lucide_react7 = require("lucide-react");
1693
1698
  var import_jsx_runtime15 = require("react/jsx-runtime");
1694
1699
  function CodeBlockView({
1695
1700
  code,
@@ -1756,13 +1761,10 @@ function CodeBlockView({
1756
1761
  onClick: () => handleCopy(code),
1757
1762
  className: "flex items-center gap-1.5 px-2 py-1 text-xs text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)] transition-colors rounded hover:bg-[var(--bui-bg-hover,#3f3f46)]/50",
1758
1763
  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
1759
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--bui-success-fg,#6ee7b7)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
1764
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Check, { size: 14, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
1760
1765
  "Copied"
1761
1766
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
1762
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
1763
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
1764
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
1765
- ] }),
1767
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Copy, { size: 14 }),
1766
1768
  "Copy"
1767
1769
  ] })
1768
1770
  }
@@ -1891,6 +1893,7 @@ function ToastItem({ toast: t, onDismiss }) {
1891
1893
 
1892
1894
  // src/components/FileUpload.tsx
1893
1895
  var import_react17 = require("react");
1896
+ var import_lucide_react8 = require("lucide-react");
1894
1897
  var import_jsx_runtime17 = require("react/jsx-runtime");
1895
1898
  function FileUploadView({
1896
1899
  accept,
@@ -1974,7 +1977,7 @@ function FileUploadView({
1974
1977
  className: "hidden"
1975
1978
  }
1976
1979
  ),
1977
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-8 h-8 text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
1980
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Upload, { size: 32, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2" }),
1978
1981
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: isDragging ? "Drop files here" : "Click or drag files to upload" }),
1979
1982
  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: [
1980
1983
  accept ? accept : "Any file type",
@@ -1998,7 +2001,7 @@ function formatBytes(bytes) {
1998
2001
  function FileIcon({ type }) {
1999
2002
  const isImage = type.startsWith("image/");
2000
2003
  const isPdf = type === "application/pdf";
2001
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) });
2004
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.FileText, { size: 16, strokeWidth: 1.5 }) });
2002
2005
  }
2003
2006
  // Annotate the CommonJS export names for ESM import in node:
2004
2007
  0 && (module.exports = {
package/dist/components/index.mjs CHANGED
@@ -378,6 +378,7 @@ import {
378
378
 
379
379
  // src/components/ToolResult.tsx
380
380
  import { Component, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
381
+ import { AlertCircle } from "lucide-react";
381
382
  import { jsx as jsx2, jsxs } from "react/jsx-runtime";
382
383
  var ToolViewErrorBoundary = class extends Component {
383
384
  constructor() {
@@ -394,7 +395,7 @@ var ToolViewErrorBoundary = class extends Component {
394
395
  if (this.state.error) {
395
396
  return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
396
397
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
397
- /* @__PURE__ */ jsx2("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
398
+ /* @__PURE__ */ jsx2(AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
398
399
  /* @__PURE__ */ jsxs("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
399
400
  this.props.toolName,
400
401
  " view error"
@@ -571,7 +572,7 @@ function ToolResult({
571
572
  if (storeState?.error && !resolvedOutput && !resolvedLoading) {
572
573
  return /* @__PURE__ */ jsxs("div", { className: `bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4 ${className || ""}`, children: [
573
574
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
574
- /* @__PURE__ */ jsx2("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
575
+ /* @__PURE__ */ jsx2(AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
575
576
  /* @__PURE__ */ jsxs("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
576
577
  toolName,
577
578
  " failed"
@@ -884,6 +885,7 @@ function Chat({
884
885
 
885
886
  // src/components/Panel.tsx
886
887
  import { useSyncExternalStore as useSyncExternalStore3, useCallback as useCallback4 } from "react";
888
+ import { Sparkles } from "lucide-react";
887
889
  import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
888
890
  function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems = 5 }) {
889
891
  const subscribe = useCallback4(
@@ -942,7 +944,7 @@ function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool
942
944
  }
943
945
  ),
944
946
  /* @__PURE__ */ jsxs7("div", { className: "relative flex flex-col items-center gap-3 text-center", children: [
945
- /* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ jsx8("svg", { className: "w-5 h-5 text-[var(--bui-fg-faint,#52525b)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" }) }) }),
947
+ /* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ jsx8(Sparkles, { size: 20, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)]" }) }),
946
948
  /* @__PURE__ */ jsxs7("div", { children: [
947
949
  /* @__PURE__ */ jsx8("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-sm font-medium", children: "Canvas" }),
948
950
  /* @__PURE__ */ jsx8("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: "Tool results will render here as you chat" })
@@ -1060,6 +1062,7 @@ function ThemeProvider({
1060
1062
 
1061
1063
  // src/components/Question.tsx
1062
1064
  import { useState as useState5 } from "react";
1065
+ import { Check } from "lucide-react";
1063
1066
  import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
1064
1067
  function QuestionView({
1065
1068
  question,
@@ -1121,7 +1124,7 @@ function QuestionView({
1121
1124
  disabled: loading,
1122
1125
  className: `w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${isSelected(opt.value) ? "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)] text-[var(--bui-fg,#f4f4f5)]" : "border-[var(--bui-border-strong,#3f3f46)] bg-[var(--bui-bg-surface,#18181b)]/50 text-[var(--bui-fg-secondary,#a1a1aa)] hover:border-[var(--bui-border-strong,#3f3f46)] hover:bg-[var(--bui-bg-surface,#18181b)]"} disabled:opacity-50 disabled:cursor-not-allowed`,
1123
1126
  children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
1124
- /* @__PURE__ */ jsx10("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ jsx10("svg", { className: "w-2.5 h-2.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }),
1127
+ /* @__PURE__ */ jsx10("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ jsx10(Check, { size: 10, strokeWidth: 3, className: "text-white" }) }),
1125
1128
  /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
1126
1129
  /* @__PURE__ */ jsx10("span", { className: "text-sm", children: opt.label }),
1127
1130
  opt.description && /* @__PURE__ */ jsx10("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-0.5", children: opt.description })
@@ -1427,6 +1430,7 @@ function DataTableView({
1427
1430
  }
1428
1431
 
1429
1432
  // src/components/Progress.tsx
1433
+ import { Check as Check2, X } from "lucide-react";
1430
1434
  import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
1431
1435
  function ProgressView({
1432
1436
  title,
@@ -1481,8 +1485,8 @@ function ProgressView({
1481
1485
  /* @__PURE__ */ jsxs11("div", { className: "mt-0.5 shrink-0", children: [
1482
1486
  step.status === "pending" && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full border border-[var(--bui-border-strong,#3f3f46)]" }),
1483
1487
  step.status === "active" && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full bg-[var(--bui-primary-muted,#1e3a5f)] flex items-center justify-center", children: /* @__PURE__ */ jsx13("div", { className: "w-2 h-2 bg-[var(--bui-primary-hover,#3b82f6)] rounded-full animate-pulse" }) }),
1484
- step.status === "done" && /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-[var(--bui-success-fg,#6ee7b7)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
1485
- step.status === "error" && /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
1488
+ step.status === "done" && /* @__PURE__ */ jsx13(Check2, { size: 16, strokeWidth: 3, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
1489
+ step.status === "error" && /* @__PURE__ */ jsx13(X, { size: 16, strokeWidth: 3, className: "text-[var(--bui-error-fg,#f87171)]" })
1486
1490
  ] }),
1487
1491
  /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
1488
1492
  /* @__PURE__ */ jsx13("p", { className: `text-sm ${step.status === "done" ? "text-[var(--bui-fg-secondary,#a1a1aa)] line-through" : step.status === "error" ? "text-[var(--bui-error-fg,#f87171)]" : step.status === "active" ? "text-[var(--bui-fg,#f4f4f5)]" : "text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: step.label }),
@@ -1636,6 +1640,7 @@ function MediaItemRenderer({
1636
1640
 
1637
1641
  // src/components/CodeBlock.tsx
1638
1642
  import { useState as useState9 } from "react";
1643
+ import { Check as Check3, Copy } from "lucide-react";
1639
1644
  import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
1640
1645
  function CodeBlockView({
1641
1646
  code,
@@ -1702,13 +1707,10 @@ function CodeBlockView({
1702
1707
  onClick: () => handleCopy(code),
1703
1708
  className: "flex items-center gap-1.5 px-2 py-1 text-xs text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)] transition-colors rounded hover:bg-[var(--bui-bg-hover,#3f3f46)]/50",
1704
1709
  children: copied ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
1705
- /* @__PURE__ */ jsx15("svg", { className: "w-3.5 h-3.5 text-[var(--bui-success-fg,#6ee7b7)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
1710
+ /* @__PURE__ */ jsx15(Check3, { size: 14, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
1706
1711
  "Copied"
1707
1712
  ] }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
1708
- /* @__PURE__ */ jsxs13("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
1709
- /* @__PURE__ */ jsx15("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
1710
- /* @__PURE__ */ jsx15("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
1711
- ] }),
1713
+ /* @__PURE__ */ jsx15(Copy, { size: 14 }),
1712
1714
  "Copy"
1713
1715
  ] })
1714
1716
  }
@@ -1837,6 +1839,7 @@ function ToastItem({ toast: t, onDismiss }) {
1837
1839
 
1838
1840
  // src/components/FileUpload.tsx
1839
1841
  import { useState as useState11, useRef as useRef6, useCallback as useCallback6 } from "react";
1842
+ import { Upload, FileText } from "lucide-react";
1840
1843
  import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
1841
1844
  function FileUploadView({
1842
1845
  accept,
@@ -1920,7 +1923,7 @@ function FileUploadView({
1920
1923
  className: "hidden"
1921
1924
  }
1922
1925
  ),
1923
- /* @__PURE__ */ jsx17("svg", { className: "w-8 h-8 text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
1926
+ /* @__PURE__ */ jsx17(Upload, { size: 32, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2" }),
1924
1927
  /* @__PURE__ */ jsx17("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: isDragging ? "Drop files here" : "Click or drag files to upload" }),
1925
1928
  /* @__PURE__ */ jsxs15("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: [
1926
1929
  accept ? accept : "Any file type",
@@ -1944,7 +1947,7 @@ function formatBytes(bytes) {
1944
1947
  function FileIcon({ type }) {
1945
1948
  const isImage = type.startsWith("image/");
1946
1949
  const isPdf = type === "application/pdf";
1947
- return /* @__PURE__ */ jsx17("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ jsx17("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) });
1950
+ return /* @__PURE__ */ jsx17("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ jsx17(FileText, { size: 16, strokeWidth: 1.5 }) });
1948
1951
  }
1949
1952
  export {
1950
1953
  Chat,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lantos1618/better-ui",
3
- "version": "0.9.2",
3
+ "version": "0.9.3",
4
4
  "description": "A minimal, type-safe AI-first UI framework for building tools",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",