pxengine 0.1.38 → 0.1.40

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 (8) hide show
  1. package/dist/index.cjs +117 -48
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.mjs +117 -48
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/registry.json +11 -1
  8. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -2226,8 +2226,9 @@ declare const InstructionPreview: React__default.FC<InstructionPreviewMolecule>;
2226
2226
 
2227
2227
  interface UIComponentSelectorProps extends UIComponentSelectorMolecule {
2228
2228
  onSelect?: (selectedComponents: string[]) => void;
2229
+ onPreview?: (componentName: string) => void;
2229
2230
  }
2230
- declare function UIComponentSelector({ components, onSelect, className, }: UIComponentSelectorProps): react_jsx_runtime.JSX.Element;
2231
+ declare function UIComponentSelector({ components, onSelect, onPreview, className, }: UIComponentSelectorProps): react_jsx_runtime.JSX.Element;
2231
2232
 
2232
2233
  interface MultiAgentCardProps extends Omit<MultiAgentCardMolecule, "id" | "type"> {
2233
2234
  className?: string;
@@ -2253,6 +2254,7 @@ declare const MultiAgentPlan: React__default.FC<MultiAgentPlanProps>;
2253
2254
 
2254
2255
  interface MultiAgentUISelectorProps extends Omit<MultiAgentUISelectorMolecule, "id" | "type"> {
2255
2256
  onSelect?: (stageSelections: Record<string, string[]>) => void;
2257
+ onPreview?: (componentName: string) => void;
2256
2258
  className?: string;
2257
2259
  }
2258
2260
  /**
package/dist/index.d.ts CHANGED
@@ -2226,8 +2226,9 @@ declare const InstructionPreview: React__default.FC<InstructionPreviewMolecule>;
2226
2226
 
2227
2227
  interface UIComponentSelectorProps extends UIComponentSelectorMolecule {
2228
2228
  onSelect?: (selectedComponents: string[]) => void;
2229
+ onPreview?: (componentName: string) => void;
2229
2230
  }
2230
- declare function UIComponentSelector({ components, onSelect, className, }: UIComponentSelectorProps): react_jsx_runtime.JSX.Element;
2231
+ declare function UIComponentSelector({ components, onSelect, onPreview, className, }: UIComponentSelectorProps): react_jsx_runtime.JSX.Element;
2231
2232
 
2232
2233
  interface MultiAgentCardProps extends Omit<MultiAgentCardMolecule, "id" | "type"> {
2233
2234
  className?: string;
@@ -2253,6 +2254,7 @@ declare const MultiAgentPlan: React__default.FC<MultiAgentPlanProps>;
2253
2254
 
2254
2255
  interface MultiAgentUISelectorProps extends Omit<MultiAgentUISelectorMolecule, "id" | "type"> {
2255
2256
  onSelect?: (stageSelections: Record<string, string[]>) => void;
2257
+ onPreview?: (componentName: string) => void;
2256
2258
  className?: string;
2257
2259
  }
2258
2260
  /**
package/dist/index.mjs CHANGED
@@ -36524,7 +36524,7 @@ var CampaignConceptCard = React94.memo(
36524
36524
  "div",
36525
36525
  {
36526
36526
  className: cn(
36527
- "w-full rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
36527
+ "w-full max-w-[600px] rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
36528
36528
  isSelected || isRecommended ? "border-2 border-green500" : "border-gray400",
36529
36529
  className
36530
36530
  ),
@@ -36532,7 +36532,7 @@ var CampaignConceptCard = React94.memo(
36532
36532
  /* @__PURE__ */ jsxs80(
36533
36533
  "div",
36534
36534
  {
36535
- className: "p-6 relative flex items-start justify-between cursor-pointer select-none",
36535
+ className: "px-5 py-4 relative flex items-start justify-between cursor-pointer select-none",
36536
36536
  onClick: handleToggle,
36537
36537
  children: [
36538
36538
  /* @__PURE__ */ jsxs80("div", { className: "flex-1", children: [
@@ -36577,7 +36577,7 @@ var CampaignConceptCard = React94.memo(
36577
36577
  exit: { height: 0, opacity: 0 },
36578
36578
  transition: { duration: 0.2, ease: "easeIn" },
36579
36579
  className: "overflow-hidden",
36580
- children: /* @__PURE__ */ jsxs80("div", { className: "p-6 w-full overflow-hidden relative", children: [
36580
+ children: /* @__PURE__ */ jsxs80("div", { className: "px-4 py-3 w-full overflow-y-auto max-h-[400px] relative", children: [
36581
36581
  /* @__PURE__ */ jsx121(
36582
36582
  "div",
36583
36583
  {
@@ -36685,7 +36685,7 @@ var ToolListCard = ({
36685
36685
  ),
36686
36686
  children: [
36687
36687
  /* @__PURE__ */ jsxs81("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
36688
- /* @__PURE__ */ jsx122("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx122(Wrench, { className: "w-3.5 h-3.5 text-[var(--primary-color)]" }) }),
36688
+ /* @__PURE__ */ jsx122("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx122(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
36689
36689
  /* @__PURE__ */ jsx122("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
36690
36690
  /* @__PURE__ */ jsx122("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: tools.length })
36691
36691
  ] }),
@@ -36693,7 +36693,7 @@ var ToolListCard = ({
36693
36693
  const CatIcon = resolveCategoryIcon(cat);
36694
36694
  return /* @__PURE__ */ jsxs81("div", { className: "px-4 py-3", children: [
36695
36695
  /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 mb-2.5", children: [
36696
- /* @__PURE__ */ jsx122(CatIcon, { className: "w-3.5 h-3.5 text-[var(--primary-color)]/70" }),
36696
+ /* @__PURE__ */ jsx122(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
36697
36697
  /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
36698
36698
  /* @__PURE__ */ jsx122("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
36699
36699
  ] }),
@@ -36704,7 +36704,7 @@ var ToolListCard = ({
36704
36704
  {
36705
36705
  className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
36706
36706
  children: [
36707
- /* @__PURE__ */ jsx122("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-[var(--primary-color)]/[0.08]", children: /* @__PURE__ */ jsx122(ToolIcon, { className: "w-3 h-3 text-[var(--primary-color)]/60" }) }),
36707
+ /* @__PURE__ */ jsx122("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ jsx122(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
36708
36708
  /* @__PURE__ */ jsxs81("div", { className: "flex-1 min-w-0", children: [
36709
36709
  /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 flex-wrap", children: [
36710
36710
  tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ jsx122("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
@@ -36787,7 +36787,7 @@ var AgentCard = ({
36787
36787
  children: [
36788
36788
  /* @__PURE__ */ jsxs82(Avatar, { className: "h-8 w-8 shrink-0", children: [
36789
36789
  /* @__PURE__ */ jsx123(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
36790
- /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-xs font-bold", children: agent.display_name.charAt(0) })
36790
+ /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
36791
36791
  ] }),
36792
36792
  /* @__PURE__ */ jsxs82("div", { className: "flex-1 min-w-0", children: [
36793
36793
  /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
@@ -36818,9 +36818,9 @@ var AgentCard = ({
36818
36818
  ),
36819
36819
  children: [
36820
36820
  /* @__PURE__ */ jsxs82("div", { className: "flex items-start gap-4 px-5 py-4", children: [
36821
- /* @__PURE__ */ jsxs82(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-[var(--primary-color)]/20", children: [
36821
+ /* @__PURE__ */ jsxs82(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
36822
36822
  /* @__PURE__ */ jsx123(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
36823
- /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-lg font-bold", children: agent.display_name.charAt(0) })
36823
+ /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
36824
36824
  ] }),
36825
36825
  /* @__PURE__ */ jsxs82("div", { className: "flex-1 min-w-0", children: [
36826
36826
  /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
@@ -36831,7 +36831,7 @@ var AgentCard = ({
36831
36831
  value: editState.display_name,
36832
36832
  onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
36833
36833
  disabled: isSaving,
36834
- className: "flex-1 bg-transparent border-b border-[var(--primary-color)]/30 text-sm font-semibold text-[var(--foreground)] outline-none focus:border-[var(--primary-color)] transition-all",
36834
+ className: "flex-1 bg-transparent border-b border-interactive/30 text-sm font-semibold text-foreground outline-none focus:border-interactive transition-all",
36835
36835
  placeholder: "Agent name"
36836
36836
  }
36837
36837
  ) : /* @__PURE__ */ jsx123("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
@@ -36853,7 +36853,7 @@ var AgentCard = ({
36853
36853
  value: editState.description,
36854
36854
  onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
36855
36855
  disabled: isSaving,
36856
- className: "w-full bg-transparent border-b border-[var(--primary-color)]/30 text-xs text-[var(--foreground)]/70 outline-none focus:border-[var(--primary-color)] transition-all resize-none leading-relaxed min-h-[40px]",
36856
+ className: "w-full bg-transparent border-b border-interactive/30 text-xs text-foreground/70 outline-none focus:border-interactive transition-all resize-none leading-relaxed min-h-[40px]",
36857
36857
  rows: 2,
36858
36858
  placeholder: "Describe this agent..."
36859
36859
  }
@@ -36867,7 +36867,7 @@ var AgentCard = ({
36867
36867
  value: editState.image,
36868
36868
  onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
36869
36869
  disabled: isSaving,
36870
- className: "flex-1 bg-[var(--foreground)]/[0.03] border border-[var(--border-color)] rounded px-2 py-0.5 text-[10px] text-[var(--foreground)]/50 font-mono outline-none focus:border-[var(--primary-color)]/50 transition-colors",
36870
+ className: "flex-1 bg-foreground/[0.03] border border-[var(--border-color)] rounded px-2 py-0.5 text-[10px] text-foreground/50 font-mono outline-none focus:border-interactive/50 transition-colors",
36871
36871
  placeholder: "URL"
36872
36872
  }
36873
36873
  )
@@ -36896,7 +36896,7 @@ var AgentCard = ({
36896
36896
  "button",
36897
36897
  {
36898
36898
  onClick: handleEdit,
36899
- className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-[var(--foreground)]/50 hover:text-[var(--foreground)] hover:border-[var(--primary-color)]/50 transition-colors",
36899
+ className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-foreground/50 hover:text-foreground hover:border-interactive/50 transition-colors",
36900
36900
  children: "Edit"
36901
36901
  }
36902
36902
  ) })
@@ -36915,7 +36915,7 @@ var AgentCard = ({
36915
36915
  /* @__PURE__ */ jsx123("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ jsx123(
36916
36916
  "span",
36917
36917
  {
36918
- className: "text-[11px] px-2 py-0.5 rounded-md bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono border border-[var(--primary-color)]/20",
36918
+ className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
36919
36919
  children: tool
36920
36920
  },
36921
36921
  tool
@@ -37012,15 +37012,16 @@ var WorkflowVisualizer = ({
37012
37012
  ),
37013
37013
  children: [
37014
37014
  /* @__PURE__ */ jsxs84("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
37015
- /* @__PURE__ */ jsx125("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx125(
37015
+ /* @__PURE__ */ jsx125("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx125(
37016
37016
  "svg",
37017
37017
  {
37018
37018
  width: "14",
37019
37019
  height: "14",
37020
37020
  viewBox: "0 0 24 24",
37021
37021
  fill: "none",
37022
- stroke: "var(--primary-color)",
37022
+ stroke: "currentColor",
37023
37023
  strokeWidth: "2",
37024
+ className: "text-interactive",
37024
37025
  strokeLinecap: "round",
37025
37026
  strokeLinejoin: "round",
37026
37027
  children: /* @__PURE__ */ jsx125("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
@@ -37037,8 +37038,8 @@ var WorkflowVisualizer = ({
37037
37038
  const isExpanded = expandedStep === step.id;
37038
37039
  return /* @__PURE__ */ jsxs84("div", { className: "flex gap-3", children: [
37039
37040
  /* @__PURE__ */ jsxs84("div", { className: "flex flex-col items-center shrink-0", children: [
37040
- /* @__PURE__ */ jsx125("div", { className: "w-7 h-7 rounded-full bg-[var(--primary-color)]/10 border-2 border-[var(--primary-color)]/30 flex items-center justify-center", children: /* @__PURE__ */ jsx125("span", { className: "text-[10px] font-bold text-[var(--primary-color)]", children: idx + 1 }) }),
37041
- !isLast && /* @__PURE__ */ jsx125("div", { className: "w-0.5 flex-1 min-h-[16px] bg-[var(--primary-color)]/15" })
37041
+ /* @__PURE__ */ jsx125("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ jsx125("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
37042
+ !isLast && /* @__PURE__ */ jsx125("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
37042
37043
  ] }),
37043
37044
  /* @__PURE__ */ jsxs84(
37044
37045
  "div",
@@ -37087,7 +37088,7 @@ var WorkflowVisualizer = ({
37087
37088
  {
37088
37089
  className: "flex items-start gap-2 text-xs",
37089
37090
  children: [
37090
- /* @__PURE__ */ jsx125("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-[var(--primary-color)]/40" }),
37091
+ /* @__PURE__ */ jsx125("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
37091
37092
  /* @__PURE__ */ jsx125("span", { className: "text-[var(--foreground)]/60", children: sub.action })
37092
37093
  ]
37093
37094
  },
@@ -37098,7 +37099,7 @@ var WorkflowVisualizer = ({
37098
37099
  step.tools.map((tool) => /* @__PURE__ */ jsx125(
37099
37100
  "span",
37100
37101
  {
37101
- className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-[var(--primary-color)]/[0.08] text-[var(--primary-color)]/70 border border-[var(--primary-color)]/10",
37102
+ className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
37102
37103
  children: tool
37103
37104
  },
37104
37105
  tool
@@ -37143,15 +37144,16 @@ var InstructionPreview = ({
37143
37144
  ),
37144
37145
  children: [
37145
37146
  /* @__PURE__ */ jsx126("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2.5", children: [
37146
- /* @__PURE__ */ jsx126("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs85(
37147
+ /* @__PURE__ */ jsx126("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs85(
37147
37148
  "svg",
37148
37149
  {
37149
37150
  width: "14",
37150
37151
  height: "14",
37151
37152
  viewBox: "0 0 24 24",
37152
37153
  fill: "none",
37153
- stroke: "var(--primary-color)",
37154
+ stroke: "currentColor",
37154
37155
  strokeWidth: "2",
37156
+ className: "text-interactive",
37155
37157
  strokeLinecap: "round",
37156
37158
  strokeLinejoin: "round",
37157
37159
  children: [
@@ -37176,7 +37178,7 @@ var InstructionPreview = ({
37176
37178
  "button",
37177
37179
  {
37178
37180
  onClick: () => setIsExpanded(!isExpanded),
37179
- className: "text-[11px] text-[var(--primary-color)] hover:underline mt-1",
37181
+ className: "text-[11px] text-interactive hover:underline mt-1",
37180
37182
  children: isExpanded ? "Show less" : "Show full instruction"
37181
37183
  }
37182
37184
  )
@@ -37184,7 +37186,7 @@ var InstructionPreview = ({
37184
37186
  workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ jsxs85("div", { children: [
37185
37187
  /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
37186
37188
  /* @__PURE__ */ jsx126("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ jsxs85("div", { className: "flex items-start gap-2 text-xs", children: [
37187
- /* @__PURE__ */ jsx126("span", { className: "shrink-0 w-5 h-5 rounded-full bg-[var(--primary-color)]/10 flex items-center justify-center text-[10px] font-bold text-[var(--primary-color)]", children: idx + 1 }),
37189
+ /* @__PURE__ */ jsx126("span", { className: "shrink-0 w-5 h-5 rounded-full bg-interactive/10 flex items-center justify-center text-[10px] font-bold text-interactive", children: idx + 1 }),
37188
37190
  /* @__PURE__ */ jsx126("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
37189
37191
  ] }, idx)) })
37190
37192
  ] }),
@@ -37193,7 +37195,7 @@ var InstructionPreview = ({
37193
37195
  /* @__PURE__ */ jsx126("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ jsx126(
37194
37196
  "span",
37195
37197
  {
37196
- className: "text-[10px] font-mono px-2 py-0.5 rounded bg-[var(--primary-color)]/[0.08] text-[var(--primary-color)]/70 border border-[var(--primary-color)]/10",
37198
+ className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
37197
37199
  children: tool
37198
37200
  },
37199
37201
  tool
@@ -37211,6 +37213,7 @@ import { jsx as jsx127, jsxs as jsxs86 } from "react/jsx-runtime";
37211
37213
  function UIComponentSelector({
37212
37214
  components,
37213
37215
  onSelect,
37216
+ onPreview,
37214
37217
  className
37215
37218
  }) {
37216
37219
  const [selected, setSelected] = useState13(/* @__PURE__ */ new Set());
@@ -37258,8 +37261,8 @@ function UIComponentSelector({
37258
37261
  className: cn(
37259
37262
  "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
37260
37263
  submitted ? "cursor-default opacity-70" : "hover:bg-muted/50",
37261
- selected.has(comp.name) && !submitted && "bg-primary/5 border border-primary/20",
37262
- selected.has(comp.name) && submitted && "bg-primary/5"
37264
+ selected.has(comp.name) && !submitted && "bg-interactive/5 border border-interactive/20",
37265
+ selected.has(comp.name) && submitted && "bg-interactive/5"
37263
37266
  ),
37264
37267
  children: [
37265
37268
  /* @__PURE__ */ jsx127(
@@ -37269,12 +37272,46 @@ function UIComponentSelector({
37269
37272
  checked: selected.has(comp.name),
37270
37273
  onChange: () => toggle(comp.name),
37271
37274
  disabled: submitted,
37272
- className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/50 disabled:opacity-50"
37275
+ className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
37273
37276
  }
37274
37277
  ),
37275
37278
  /* @__PURE__ */ jsxs86("div", { className: "flex-1 min-w-0", children: [
37276
- /* @__PURE__ */ jsx127("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
37277
- /* @__PURE__ */ jsx127("span", { className: "ml-2 text-xs text-muted-foreground", children: comp.description })
37279
+ /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-1", children: [
37280
+ /* @__PURE__ */ jsx127("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
37281
+ onPreview && /* @__PURE__ */ jsx127(
37282
+ "button",
37283
+ {
37284
+ type: "button",
37285
+ onClick: (e) => {
37286
+ e.preventDefault();
37287
+ e.stopPropagation();
37288
+ onPreview(comp.name);
37289
+ },
37290
+ className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
37291
+ title: `Preview ${comp.display_name}`,
37292
+ children: /* @__PURE__ */ jsxs86(
37293
+ "svg",
37294
+ {
37295
+ width: "14",
37296
+ height: "14",
37297
+ viewBox: "0 0 24 24",
37298
+ fill: "none",
37299
+ stroke: "currentColor",
37300
+ strokeWidth: "2",
37301
+ strokeLinecap: "round",
37302
+ strokeLinejoin: "round",
37303
+ className: "text-muted-foreground hover:text-primary",
37304
+ children: [
37305
+ /* @__PURE__ */ jsx127("circle", { cx: "12", cy: "12", r: "10" }),
37306
+ /* @__PURE__ */ jsx127("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
37307
+ /* @__PURE__ */ jsx127("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
37308
+ ]
37309
+ }
37310
+ )
37311
+ }
37312
+ )
37313
+ ] }),
37314
+ /* @__PURE__ */ jsx127("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
37278
37315
  ] })
37279
37316
  ]
37280
37317
  },
@@ -37290,7 +37327,7 @@ function UIComponentSelector({
37290
37327
  "button",
37291
37328
  {
37292
37329
  onClick: handleContinue,
37293
- className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
37330
+ className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-interactive text-white hover:bg-interactive/90 transition-colors",
37294
37331
  children: "Continue"
37295
37332
  }
37296
37333
  )
@@ -37320,12 +37357,12 @@ var MultiAgentCard = ({
37320
37357
  ),
37321
37358
  children: [
37322
37359
  /* @__PURE__ */ jsxs87("div", { className: "flex items-start gap-4 px-5 py-4", children: [
37323
- /* @__PURE__ */ jsx128("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-[var(--primary-color)]/20 overflow-hidden bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx128("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
37360
+ /* @__PURE__ */ jsx128("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-interactive/20 overflow-hidden bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx128("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
37324
37361
  /* @__PURE__ */ jsxs87("div", { className: "flex-1 min-w-0", children: [
37325
37362
  /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-2", children: [
37326
37363
  /* @__PURE__ */ jsx128("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
37327
37364
  /* @__PURE__ */ jsx128("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: name }),
37328
- /* @__PURE__ */ jsx128("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-violet-500/10 text-violet-600", children: "Multi-Agent" }),
37365
+ /* @__PURE__ */ jsx128("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
37329
37366
  /* @__PURE__ */ jsx128(
37330
37367
  "span",
37331
37368
  {
@@ -37353,12 +37390,12 @@ var MultiAgentCard = ({
37353
37390
  {
37354
37391
  className: cn(
37355
37392
  "w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
37356
- "bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30"
37393
+ "bg-interactive/10 text-interactive border border-interactive/30"
37357
37394
  ),
37358
37395
  children: idx + 1
37359
37396
  }
37360
37397
  ),
37361
- idx < stages.length - 1 && /* @__PURE__ */ jsx128("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[16px]" })
37398
+ idx < stages.length - 1 && /* @__PURE__ */ jsx128("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
37362
37399
  ] }),
37363
37400
  /* @__PURE__ */ jsxs87("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
37364
37401
  /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-2", children: [
@@ -37418,15 +37455,15 @@ var MultiAgentPlan = ({
37418
37455
  ] }) }),
37419
37456
  /* @__PURE__ */ jsx129("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx129("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs88("div", { className: "flex items-stretch min-w-0", children: [
37420
37457
  /* @__PURE__ */ jsxs88("div", { className: "flex flex-col items-center mr-3 w-6", children: [
37421
- /* @__PURE__ */ jsx129("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30", children: idx + 1 }),
37422
- idx < stages.length - 1 && /* @__PURE__ */ jsx129("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[12px]" })
37458
+ /* @__PURE__ */ jsx129("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
37459
+ idx < stages.length - 1 && /* @__PURE__ */ jsx129("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
37423
37460
  ] }),
37424
37461
  /* @__PURE__ */ jsxs88("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
37425
- /* @__PURE__ */ jsx129("p", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
37462
+ /* @__PURE__ */ jsx129("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
37426
37463
  stage.description && /* @__PURE__ */ jsx129(
37427
37464
  "p",
37428
37465
  {
37429
- className: "text-[11px] text-[var(--foreground)]/50 mt-0.5 whitespace-normal",
37466
+ className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
37430
37467
  style: { textWrap: "auto" },
37431
37468
  children: stage.description
37432
37469
  }
@@ -37434,7 +37471,7 @@ var MultiAgentPlan = ({
37434
37471
  stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ jsx129("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ jsx129(
37435
37472
  "span",
37436
37473
  {
37437
- className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono",
37474
+ className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
37438
37475
  children: tool
37439
37476
  },
37440
37477
  tool
@@ -37453,6 +37490,7 @@ var MultiAgentUISelector = ({
37453
37490
  stages = [],
37454
37491
  components = [],
37455
37492
  onSelect,
37493
+ onPreview,
37456
37494
  className
37457
37495
  }) => {
37458
37496
  const [activeStageId, setActiveStageId] = useState14(stages[0]?.id || "");
@@ -37509,7 +37547,7 @@ var MultiAgentUISelector = ({
37509
37547
  ),
37510
37548
  children: [
37511
37549
  /* @__PURE__ */ jsx130("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-2", children: [
37512
- /* @__PURE__ */ jsx130("div", { className: "w-4 h-4 rounded bg-[var(--primary-color)]/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs89(
37550
+ /* @__PURE__ */ jsx130("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs89(
37513
37551
  "svg",
37514
37552
  {
37515
37553
  width: "10",
@@ -37518,7 +37556,7 @@ var MultiAgentUISelector = ({
37518
37556
  fill: "none",
37519
37557
  stroke: "currentColor",
37520
37558
  strokeWidth: "2",
37521
- className: "text-[var(--primary-color)]",
37559
+ className: "text-interactive",
37522
37560
  children: [
37523
37561
  /* @__PURE__ */ jsx130("rect", { x: "3", y: "3", width: "7", height: "7" }),
37524
37562
  /* @__PURE__ */ jsx130("rect", { x: "14", y: "3", width: "7", height: "7" }),
@@ -37535,8 +37573,8 @@ var MultiAgentUISelector = ({
37535
37573
  onClick: () => setActiveStageId(stage.id),
37536
37574
  disabled: submitted,
37537
37575
  className: cn(
37538
- "px-3 py-2 text-[11px] font-medium border-b-2 transition-colors",
37539
- activeStageId === stage.id ? "border-[var(--primary-color)] text-[var(--primary-color)]" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
37576
+ "px-3 py-2 text-[11px] font-medium border-b-2 -mb-px transition-colors",
37577
+ activeStageId === stage.id ? "border-interactive text-interactive" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
37540
37578
  submitted && "opacity-60 cursor-default"
37541
37579
  ),
37542
37580
  children: stage.name
@@ -37562,7 +37600,7 @@ var MultiAgentUISelector = ({
37562
37600
  disabled: submitted,
37563
37601
  className: cn(
37564
37602
  "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden",
37565
- isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5" : "border-[var(--border-color)] hover:border-[var(--primary-color)]/50",
37603
+ isSelected ? "border-interactive bg-interactive/5" : "border-[var(--border-color)] hover:border-interactive/50",
37566
37604
  submitted && "opacity-60 cursor-default"
37567
37605
  ),
37568
37606
  children: [
@@ -37572,7 +37610,7 @@ var MultiAgentUISelector = ({
37572
37610
  {
37573
37611
  className: cn(
37574
37612
  "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
37575
- isSelected ? "bg-[var(--primary-color)] border-[var(--primary-color)]" : "border-[var(--foreground)]/20"
37613
+ isSelected ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
37576
37614
  ),
37577
37615
  children: isSelected && /* @__PURE__ */ jsx130(
37578
37616
  "svg",
@@ -37588,7 +37626,38 @@ var MultiAgentUISelector = ({
37588
37626
  )
37589
37627
  }
37590
37628
  ),
37591
- /* @__PURE__ */ jsx130("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name })
37629
+ /* @__PURE__ */ jsx130("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
37630
+ onPreview && /* @__PURE__ */ jsx130(
37631
+ "button",
37632
+ {
37633
+ type: "button",
37634
+ onClick: (e) => {
37635
+ e.stopPropagation();
37636
+ onPreview(comp.name);
37637
+ },
37638
+ className: "ml-auto shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
37639
+ title: `Preview ${comp.display_name}`,
37640
+ children: /* @__PURE__ */ jsxs89(
37641
+ "svg",
37642
+ {
37643
+ width: "14",
37644
+ height: "14",
37645
+ viewBox: "0 0 24 24",
37646
+ fill: "none",
37647
+ stroke: "currentColor",
37648
+ strokeWidth: "2",
37649
+ strokeLinecap: "round",
37650
+ strokeLinejoin: "round",
37651
+ className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
37652
+ children: [
37653
+ /* @__PURE__ */ jsx130("circle", { cx: "12", cy: "12", r: "10" }),
37654
+ /* @__PURE__ */ jsx130("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
37655
+ /* @__PURE__ */ jsx130("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
37656
+ ]
37657
+ }
37658
+ )
37659
+ }
37660
+ )
37592
37661
  ] }),
37593
37662
  /* @__PURE__ */ jsx130("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
37594
37663
  ]
@@ -37602,7 +37671,7 @@ var MultiAgentUISelector = ({
37602
37671
  "button",
37603
37672
  {
37604
37673
  onClick: handleContinue,
37605
- className: "w-full py-2 rounded-lg bg-[var(--primary-color)] text-white text-xs font-medium hover:opacity-90 transition-opacity",
37674
+ className: "w-full py-2 rounded-lg bg-interactive text-white text-xs font-medium hover:opacity-90 transition-opacity",
37606
37675
  children: "Continue"
37607
37676
  }
37608
37677
  ) }),