@inf-monkeys-tech/monkeys-design 2.0.66 → 2.0.67

package/dist/components/workbench/index.js

@@ -19554,8 +19554,8 @@ function WorkbenchTaskCard({
       "data-monkeys-component": "workbench-task-card",
       "data-view-mode": viewMode,
       className: cn(
-        "border-border/70",
-        viewMode === "grid" ? "flex h-full flex-col gap-5 rounded-lg border bg-card p-5 shadow-sm" : "grid items-center gap-6 border-b py-8 last:border-b-0 lg:grid-cols-2 lg:gap-10",
+        "border-border/70 font-[family-name:var(--font-sans)] text-sm leading-5",
+        viewMode === "grid" ? "flex h-full flex-col gap-global rounded-lg border bg-card p-global shadow-sm" : "grid items-center gap-global border-b py-global last:border-b-0 lg:grid-cols-2",
         className
       ),
       children: [
@@ -19568,11 +19568,11 @@ function WorkbenchTaskCard({
               viewMode === "grid" ? "flex-1" : "min-h-60"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex flex-wrap items-center gap-x-3 gap-y-2", children: heading }),
-              metadata != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs tabular-nums text-muted-foreground [&_span]:text-inherit [&_time]:text-inherit", children: metadata }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-global flex flex-wrap items-center gap-global", children: heading }),
+              metadata != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-global flex flex-wrap items-center gap-global text-sm tabular-nums text-muted-foreground [&_span]:text-inherit [&_time]:text-inherit", children: metadata }),
               children,
-              message != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 break-words text-sm text-destructive-text", children: message }),
-              actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap gap-3 pt-6", children: actions })
+              message != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-global break-words text-sm text-destructive-text", children: message }),
+              actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap gap-global pt-global", children: actions })
             ]
           }
         ),
@@ -19604,40 +19604,36 @@ function WorkbenchTaskToolbar({
     {
       "data-monkeys-component": "workbench-task-toolbar",
       classNames: {
-        root: "min-h-0 flex-row flex-wrap items-center gap-4 border-0 px-0 pt-0 pb-3",
-        end: "max-w-full flex-wrap gap-2"
+        root: "min-h-0 flex-row flex-wrap items-center gap-global border-0 p-0 font-[family-name:var(--font-sans)] text-sm leading-5",
+        end: "max-w-full flex-wrap gap-global"
       },
       className,
       end: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         filters,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-global", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BaseButton,
             {
               type: "button",
               variant: "outline",
               disabled,
               title: labels.sort,
-              className: "h-10 min-w-28 gap-2 rounded-xl bg-muted/40 px-4 text-sm font-medium shadow-none hover:bg-muted/70",
+              icon: sortOrder === "latest" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownWideNarrow, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpNarrowWide, {}),
+              className: "h-10 min-w-28 gap-global rounded-lg bg-muted/40 px-global py-global-1/2 text-sm font-medium shadow-none hover:bg-muted/70",
               onClick: () => onSortOrderChange(sortOrder === "latest" ? "oldest" : "latest"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "icon", children: sortOrder === "latest" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownWideNarrow, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpNarrowWide, {}) }),
-                sortOrder === "latest" ? labels.latest : labels.oldest
-              ]
+              children: sortOrder === "latest" ? labels.latest : labels.oldest
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BaseButton,
             {
               type: "button",
               variant: "outline",
               disabled,
-              className: "h-10 gap-2 rounded-xl bg-muted/40 px-4 text-sm font-medium shadow-none hover:bg-muted/70",
+              icon: viewMode === "list" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid2X2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutList, {}),
+              className: "h-10 gap-global rounded-lg bg-muted/40 px-global py-global-1/2 text-sm font-medium shadow-none hover:bg-muted/70",
               onClick: () => onViewModeChange(viewMode === "list" ? "grid" : "list"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "icon", children: viewMode === "list" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid2X2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutList, {}) }),
-                viewMode === "list" ? labels.gridView : labels.listView
-              ]
+              children: viewMode === "list" ? labels.gridView : labels.listView
             }
           )
         ] })
@@ -19659,7 +19655,7 @@ function WorkbenchTaskOutputs({
   onPreview,
   className
 }) {
-  const size = viewMode === "grid" ? "aspect-square w-full" : "aspect-square w-[calc((100%-2.25rem)/4)] min-w-32 max-w-48";
+  const size = viewMode === "grid" ? "aspect-square w-full" : "aspect-square w-[calc((100%-3*var(--global-spacing))/4)] min-w-32 max-w-48";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -19668,7 +19664,7 @@ function WorkbenchTaskOutputs({
       "aria-label": ariaLabel,
       tabIndex: 0,
       className: cn(
-        "flex w-full min-w-0 snap-x snap-proximity items-center gap-3 overflow-x-auto py-2 focus-visible:outline focus-visible:outline-2",
+        "flex w-full min-w-0 snap-x snap-proximity items-center gap-global overflow-x-auto py-global-1/2 font-[family-name:var(--font-sans)] text-sm leading-5 focus-visible:outline focus-visible:outline-2",
         className
       ),
       children: [
@@ -19700,7 +19696,7 @@ function WorkbenchTaskOutputs({
           ) : /* @__PURE__ */ jsxRuntime.jsx(
             "pre",
             {
-              className: "h-60 w-full min-w-0 shrink-0 snap-start overflow-auto whitespace-pre-wrap break-words rounded-xl border bg-muted/20 p-4 text-xs",
+              className: "h-60 w-full min-w-0 shrink-0 snap-start overflow-auto whitespace-pre-wrap break-words rounded-lg border bg-muted/20 p-global font-[family-name:var(--font-sans)] text-sm leading-5",
               children: item.content
             },
             item.id
@@ -19723,7 +19719,7 @@ function WorkbenchTaskOutputs({
               }
             )
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-60 w-full items-center justify-center rounded-xl border border-dashed bg-muted/20 p-5 text-center text-sm text-muted-foreground", children: emptyState }))
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-60 w-full items-center justify-center rounded-lg border border-dashed bg-muted/20 p-global text-center text-sm text-muted-foreground", children: emptyState }))
       ]
     }
   );
@@ -19818,7 +19814,7 @@ function WorkbenchTaskPrompt({
     "div",
     {
       "data-monkeys-component": "workbench-task-prompt",
-      className: cn("min-w-0", className),
+      className: cn("min-w-0 font-[family-name:var(--font-sans)] text-sm leading-5", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "p",
@@ -19826,7 +19822,7 @@ function WorkbenchTaskPrompt({
             ref,
             id,
             className: cn(
-              "whitespace-pre-wrap break-words text-sm leading-6 text-foreground [overflow-wrap:anywhere]",
+              "whitespace-pre-wrap break-words text-sm leading-5 text-foreground [overflow-wrap:anywhere]",
               !expanded && "line-clamp-3"
             ),
             children: content
@@ -19839,7 +19835,7 @@ function WorkbenchTaskPrompt({
             "aria-expanded": expanded,
             "aria-controls": id,
             onClick: () => setExpanded((value) => !value),
-            className: "mt-2 inline-flex min-h-8 items-center gap-1 rounded px-1 text-sm font-semibold text-foreground underline underline-offset-4 hover:bg-muted focus-visible:outline focus-visible:outline-2",
+            className: "mt-global-1/2 inline-flex min-h-8 items-center gap-global-1/2 rounded-lg px-global-1/2 text-sm font-medium text-foreground underline underline-offset-4 hover:bg-muted focus-visible:outline focus-visible:outline-2",
             children: [
               expanded ? labels.less : labels.more,
               expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: "size-4" })
@@ -19859,10 +19855,10 @@ function WorkbenchTaskOutputItem({
   onPreview
 }) {
   if (kind === "text")
-    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "h-60 w-full min-w-0 shrink-0 snap-start overflow-auto whitespace-pre-wrap break-words rounded-xl border bg-muted/20 p-4 text-xs", children: text ?? children });
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "h-60 w-full min-w-0 shrink-0 snap-start overflow-auto whitespace-pre-wrap break-words rounded-lg border bg-muted/20 p-global font-[family-name:var(--font-sans)] text-sm leading-5", children: text ?? children });
   const className = cn(
     "flex shrink-0 snap-start items-center justify-center overflow-hidden rounded-lg border bg-muted/20",
-    viewMode === "grid" ? "aspect-square w-full" : kind === "file" ? "aspect-square w-60 min-w-60 max-w-72" : "aspect-square w-[calc((100%-2.25rem)/4)] min-w-32 max-w-48"
+    viewMode === "grid" ? "aspect-square w-full" : kind === "file" ? "aspect-square w-60 min-w-60 max-w-72" : "aspect-square w-[calc((100%-3*var(--global-spacing))/4)] min-w-32 max-w-48"
   );
   return kind === "media" && onPreview ? /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -19888,7 +19884,7 @@ function WorkbenchTaskSpreadsheet({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex size-full min-h-0 flex-col",
+      className: "flex size-full min-h-0 flex-col font-[family-name:var(--font-sans)] text-sm leading-5",
       "data-monkeys-component": "workbench-task-spreadsheet",
       children: [
         preview ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -19897,14 +19893,14 @@ function WorkbenchTaskSpreadsheet({
             type: "button",
             onClick: onPreview,
             "aria-label": previewLabel,
-            className: "flex min-h-0 flex-1 items-center justify-center p-2 focus-visible:outline focus-visible:outline-2",
+            className: "flex min-h-0 flex-1 items-center justify-center p-global-1/2 focus-visible:outline focus-visible:outline-2",
             children: preview
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "size-10 text-green-600", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-t p-2", children: [
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-global-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "size-10 text-green-600", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-global-1/2 border-t p-global-1/2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 break-all text-xs font-medium", title: filename, children: filename }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "XLSX" })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 break-all text-sm font-medium", title: filename, children: filename }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "XLSX" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -19914,7 +19910,7 @@ function WorkbenchTaskSpreadsheet({
               title: downloadLabel,
               disabled: disabled || downloading || !onDownload,
               onClick: onDownload,
-              className: "flex size-9 shrink-0 items-center justify-center rounded-md border bg-background disabled:opacity-50 focus-visible:outline focus-visible:outline-2",
+              className: "flex size-9 shrink-0 items-center justify-center rounded-lg border bg-background disabled:opacity-50 focus-visible:outline focus-visible:outline-2",
               children: downloading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-4" })
             }
           )