@arbidocs/blocks 0.4.90 → 0.4.91

package/dist/{chunk-YX466FWL.js → chunk-PGDL26TQ.js}

@@ -1,12 +1,13 @@
 "use client";
 import { UploadDropzone } from './chunk-EVUEIBNU.js';
+import { isTone, TONE_DOT, TONE_SURFACE, TONE_SOLID_BORDER, TONE_BORDER } from './chunk-AUS3KBHJ.js';
 import { FoldSection } from './chunk-XD2M6LIG.js';
 import { useElementSize } from './chunk-HOXKR26S.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Check, Loader2, Hourglass, AlertTriangle, MinusCircle, UserRound, CornerUpLeft, ShieldCheck, MessageSquare, Clock, PenLine, X, ExternalLink, Mail, Table2, CheckCircle2, ArrowLeft, ArrowRight, RotateCw, GitBranch, ChevronLeft, ChevronRight, FileText, ArrowUpRight, BellRing, Flag, RotateCcw, Play, UserRoundCog, Sparkles, MessageSquareReply, Square, KeyRound, Lock } from 'lucide-react';
 import { cn, Popover, PopoverTrigger, PopoverContent, Button, Textarea, Card, Label, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Check, Loader2, Hourglass, AlertTriangle, MinusCircle, UserRound, CornerUpLeft, ShieldCheck, MessageSquare, Clock, PenLine, X, ExternalLink, Mail, Table2, CheckCircle2, ArrowLeft, ArrowRight, RotateCw, GitBranch, ChevronLeft, ChevronRight, FileText, ArrowUpRight, BellRing, Flag, RotateCcw, Play, UserRoundCog, Sparkles, MessageSquareReply, Square, KeyRound, Lock } from 'lucide-react';
 
 // src/agents/workflows/types.ts
 var EMPTY_WORKFLOW_SCOPE = { folders: [], labels: [] };
@@ -199,7 +200,8 @@ function fieldFromFrontmatter(raw) {
         label,
         description: str(ro.description),
         text: str(ro.text),
-        icon: str(ro.icon)
+        icon: str(ro.icon),
+        tone: isTone(ro.tone) ? ro.tone : void 0
       }
     ] : [];
   }) : void 0;
@@ -254,7 +256,8 @@ function fieldToFrontmatter(field) {
         label: o.label,
         description: o.description,
         text: o.text,
-        icon: o.icon
+        icon: o.icon,
+        tone: o.tone
       })
     ),
     min: field.min,
@@ -373,40 +376,28 @@ function FieldControl({
     case "select": {
       const options = field.options ?? [];
       if (options.length > 0 && options.length <= TILE_MAX) {
+        const compact3 = options.every((o) => !o.icon && !o.description);
         return /* @__PURE__ */ jsx(
           "div",
           {
             role: "radiogroup",
             "aria-label": field.label,
-            className: "grid grid-cols-2 gap-2 sm:grid-cols-4",
+            className: "flex flex-wrap gap-2",
             "data-testid": testId,
-            children: options.map((option) => {
-              const selected = value === option.value;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "radio",
-                  "aria-checked": selected,
-                  "data-testid": prefixedTestId(testId, option.value, {
-                    testId: `workflow-field-${field.name}-${option.value}`
-                  }),
-                  onClick: () => {
-                    onChange(option.value);
-                  },
-                  className: cn(
-                    "flex min-h-24 flex-col items-center justify-center gap-1.5 rounded-lg border p-3 text-center transition-colors pointer-coarse:min-h-28 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    selected ? "border-primary bg-primary/10" : "border-border bg-card [&:hover]:border-primary [&:hover]:bg-muted"
-                  ),
-                  children: [
-                    option.icon && renderIcon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: renderIcon(option.icon) }),
-                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: option.label }),
-                    option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
-                  ]
-                },
-                option.value
-              );
-            })
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              ChoiceTile,
+              {
+                option,
+                selected: value === option.value,
+                compact: compact3,
+                renderIcon,
+                testId: prefixedTestId(testId, option.value, {
+                  testId: `workflow-field-${field.name}-${option.value}`
+                }),
+                onSelect: () => onChange(option.value)
+              },
+              option.value
+            ))
           }
         );
       }
@@ -453,6 +444,50 @@ function FieldControl({
       );
   }
 }
+function ChoiceTile({
+  option,
+  selected,
+  compact: compact3,
+  renderIcon,
+  testId,
+  onSelect
+}) {
+  const tone = option.tone;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      "data-testid": testId,
+      "data-tone": tone,
+      onClick: onSelect,
+      className: cn(
+        // Sized to its label (flex-basis auto), growing to share the row, never wider than it.
+        "flex max-w-full min-w-[min(4rem,100%)] flex-auto flex-col items-center justify-center gap-1.5 rounded-lg border text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        compact3 ? "min-h-9 px-3 py-1.5 pointer-coarse:min-h-11" : "min-h-24 p-3 pointer-coarse:min-h-28",
+        tone ? selected ? cn(TONE_SURFACE[tone], TONE_SOLID_BORDER[tone]) : cn(TONE_BORDER[tone], "bg-card [&:hover]:bg-muted") : selected ? "border-primary bg-primary/10" : "border-border bg-card [&:hover]:border-primary [&:hover]:bg-muted"
+      ),
+      children: [
+        option.icon && renderIcon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: renderIcon(option.icon) }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "flex max-w-full items-center gap-1.5 text-sm font-medium",
+              tone && selected ? void 0 : "text-foreground"
+            ),
+            children: [
+              selected ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 shrink-0", "aria-hidden": true }) : tone && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("size-2 shrink-0 rounded-full", TONE_DOT[tone]) }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: option.label })
+            ]
+          }
+        ),
+        option.description && /* @__PURE__ */ jsx("span", { className: "max-w-full text-xs break-words text-muted-foreground", children: option.description })
+      ]
+    }
+  );
+}
 function FormField(props) {
   const { field, error, l, idFor } = props;
   const isBoolean = field.type === "boolean";
@@ -3091,5 +3126,5 @@ function TaskActivityTimeline({
 }
 
 export { ActionStepBody, ApprovalEvidence, AssigneeLine, DEFAULT_ASSIGNEE_WORDING, DEFAULT_SCHEMA_FORM_LABELS, DEFAULT_STEP_BAR_LABELS, DEFAULT_TASK_ACTIVITY_LABELS, DEFAULT_WORKFLOW_RUNNER_LABELS, DEFAULT_WORKFLOW_STEP_PARTS_LABELS, EMPTY_WORKFLOW_SCOPE, PhaseMark, SKILL_PROMPT_FALLBACK_PLACEHOLDER, SKILL_PROMPT_LABEL, STEP_EXTRA, STEP_LABEL, STEP_LABEL_CURRENT, STEP_LABEL_MAX, STEP_PILL, SchemaForm, SendBackControl, StepBarFrame, TaskActivityTimeline, WorkflowRunner, WorkflowStepBar, activeStepId, assigneeName, buildLaunch, canAssign, composeStepPrompt, composeWorkflowPrompt, defaultInputs, dependsOn, eventWaitingDocuments, fieldToFrontmatter, fillRunText, fillStepInputs, fromPlanAssignee, fromPlanDocumentRef, fromPlanSteps, initialRunInputs, inputsFromContext, isEmptyWorkflowScope, isIncompleteSignal, isPersonAction, isPersonStep, isRunFinished, isSteppedWorkflow, isWorkflowScope, layoutFromPlanSteps, nextAction, orderSteps, promptFieldName, reviewInstructions, runFields, runFieldsOf, runThreadTitle, sendBackTargets, skillToWorkflow, splitDocRef, stepConfigProblems, stepDependencies, stepFields, stepLevels, stepPhase, stepPillTone, stepStatesFromActivity, stepWindow, taskActivityHeadline, toPlanAssignee, toPlanDocumentRef, toPlanSteps, upstreamSteps, useWorkflowView, validateInputs, validateStep, validateWorkflowGraph, waitingDocuments, waitingForDocumentsText, workflowAccepts, workflowFromFrontmatter, workflowSteps, workflowsAccepting, workflowsForHost };
-//# sourceMappingURL=chunk-YX466FWL.js.map
-//# sourceMappingURL=chunk-YX466FWL.js.map
+//# sourceMappingURL=chunk-PGDL26TQ.js.map
+//# sourceMappingURL=chunk-PGDL26TQ.js.map