@inf-monkeys-tech/monkeys-design 1.0.36 → 1.0.37

package/dist/components/agent-workbench/index.js

@@ -999,6 +999,7 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
   );
   const activeCategory = categories.find((category) => category.id === activeCategoryId);
   const activeSection = activeCategory?.sections.find((section) => section.id === activeSectionId) || activeCategory?.sections[0];
+  const usesCompactList = activeSection?.templates.length ? activeSection.templates.every((template) => !template.coverImageUrl) : false;
   React2.useEffect(() => {
     if (activeCategoryId && !categories.some((category) => category.id === activeCategoryId)) {
       setActiveCategoryId(void 0);
@@ -1085,19 +1086,52 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
         ),
         activeCategory.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-pressed": activeSection?.id === section.id, className: cn2("h-9 shrink-0 rounded-full px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", activeSection?.id === section.id ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground"), onClick: () => selectSection(section.id), children: section.label }, section.id))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3", children: activeSection?.templates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: viewModel.disabled, "data-quick-start-template-id": template.id, className: "group min-w-0 overflow-hidden rounded-xl border border-border bg-background text-left transition-colors hover:border-primary/30 hover:bg-muted/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", onClick: () => selectTemplate(template), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "block px-4 pb-3 pt-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
-            template.title,
-            template.action === "upload" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "size-3", "aria-hidden": "true" }),
-              messages.addFile
-            ] }) : null
-          ] }),
-          template.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 line-clamp-2 block min-h-8 text-xs leading-4 text-muted-foreground", children: template.description }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn2("block overflow-hidden", template.coverImageUrl ? "aspect-[5/2]" : "h-28"), children: /* @__PURE__ */ jsxRuntime.jsx(TemplateVisual, { template }) })
-      ] }, template.id)) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-quick-start-layout": usesCompactList ? "list" : "cards",
+          className: cn2(
+            "grid",
+            usesCompactList ? "grid-cols-1 gap-0" : "grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"
+          ),
+          children: activeSection?.templates.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: viewModel.disabled,
+              "data-quick-start-template-id": template.id,
+              className: cn2(
+                "group min-w-0 overflow-hidden text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                usesCompactList ? "flex min-h-14 items-center rounded-none border-x-0 border-t-0 bg-transparent shadow-none hover:border-border hover:bg-muted/40 last:border-b-0" : "rounded-xl border border-border bg-background hover:border-primary/30 hover:bg-muted/20"
+              ),
+              onClick: () => selectTemplate(template),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn2(usesCompactList ? "min-w-0 flex-1 px-2 py-2.5" : "block px-4 pb-3 pt-4"), children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn2("flex items-center gap-2 text-sm text-foreground", usesCompactList ? "font-medium" : "font-semibold"), children: [
+                    template.title,
+                    template.action === "upload" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "size-3", "aria-hidden": "true" }),
+                      messages.addFile
+                    ] }) : null
+                  ] }),
+                  template.description ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn2(
+                        "line-clamp-2 block text-xs leading-4 text-muted-foreground",
+                        usesCompactList ? "mt-0.5 min-h-0 text-muted-foreground/75" : "mt-1 min-h-8"
+                      ),
+                      children: template.description
+                    }
+                  ) : null
+                ] }),
+                usesCompactList ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { className: "mr-2 size-4 shrink-0 text-muted-foreground/45", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn2("block overflow-hidden", template.coverImageUrl ? "aspect-[5/2]" : "h-28"), children: /* @__PURE__ */ jsxRuntime.jsx(TemplateVisual, { template }) })
+              ]
+            },
+            template.id
+          ))
+        }
+      )
     ] })
   ] });
 }