@mieweb/ui 0.7.3-dev.1 → 0.7.3-dev.2

package/dist/index.cjs

@@ -1952,12 +1952,23 @@ function ComposerModelSelector({
   placeholder = "Model",
   anyLabel = "Any",
   emptyLabel = "No models",
-  ariaLabel = "Model"
+  ariaLabel = "Model",
+  effortOptions,
+  effort = null,
+  defaultEffort,
+  onEffortChange,
+  effortLabel = "Effort",
+  effortHint,
+  defaultBadgeLabel = "Default",
+  backLabel = "Back"
 }) {
   const [open, setOpen] = React13__namespace.useState(false);
+  const [view, setView] = React13__namespace.useState("models");
+  const [effortHighlight, setEffortHighlight] = React13__namespace.useState(0);
   const [internalProviderFilter, setInternalProviderFilter] = React13__namespace.useState(null);
   const [highlightedIndex, setHighlightedIndex] = React13__namespace.useState(0);
   const listRef = React13__namespace.useRef(null);
+  const effortListRef = React13__namespace.useRef(null);
   const menuId = React13__namespace.useId();
   const {
     anchorRef: triggerRef,
@@ -2021,6 +2032,10 @@ function ComposerModelSelector({
     (index) => `${menuId}-option-${index}`,
     [menuId]
   );
+  const getEffortOptionId = React13__namespace.useCallback(
+    (index) => `${menuId}-effort-option-${index}`,
+    [menuId]
+  );
   const activeOptionId = open && renderedModels[highlightedIndex] ? getOptionId(highlightedIndex) : void 0;
   const selectedRenderedIndex = React13__namespace.useMemo(
     () => selectedKey ? renderedModels.findIndex(
@@ -2053,6 +2068,48 @@ function ComposerModelSelector({
     },
     [close, onChange]
   );
+  const efforts = React13__namespace.useMemo(() => effortOptions ?? [], [effortOptions]);
+  const activeEffortOptionId = open && efforts[effortHighlight] ? getEffortOptionId(effortHighlight) : void 0;
+  const selectedEffortOption = efforts.find(
+    (option) => option.value === effort
+  );
+  const selectEffort = React13__namespace.useCallback(
+    (value2) => {
+      onEffortChange?.(value2);
+      close();
+    },
+    [close, onEffortChange]
+  );
+  const handleEffortKeyDown = (event) => {
+    if (efforts.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setEffortHighlight((current) => (current + 1) % efforts.length);
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setEffortHighlight(
+        (current) => (current - 1 + efforts.length) % efforts.length
+      );
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      setEffortHighlight(0);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setEffortHighlight(efforts.length - 1);
+    }
+    if (event.key === "ArrowLeft" || event.key === "Backspace") {
+      event.preventDefault();
+      setView("models");
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const highlighted = efforts[effortHighlight];
+      if (highlighted) selectEffort(highlighted.value);
+    }
+  };
   const outsideRefs = React13__namespace.useMemo(
     () => [triggerRef, menuRef],
     [triggerRef, menuRef]
@@ -2063,6 +2120,15 @@ function ComposerModelSelector({
     if (!open) return;
     setHighlightedIndex(selectedRenderedIndex >= 0 ? selectedRenderedIndex : 0);
   }, [activeProviderFilter, open, selectedRenderedIndex]);
+  React13__namespace.useEffect(() => {
+    if (!open) return;
+    setView("models");
+  }, [open]);
+  React13__namespace.useEffect(() => {
+    if (!open) return;
+    const current = efforts.findIndex((option) => option.value === effort);
+    setEffortHighlight(current >= 0 ? current : 0);
+  }, [effort, efforts, open]);
   React13__namespace.useEffect(() => {
     if (!open) return;
     setHighlightedIndex(
@@ -2071,10 +2137,11 @@ function ComposerModelSelector({
   }, [open, renderedModels.length]);
   React13__namespace.useEffect(() => {
     if (!open) return;
-    requestAnimationFrame(
-      () => listRef.current?.focus({ preventScroll: true })
-    );
-  }, [open]);
+    requestAnimationFrame(() => {
+      const target = view === "effort" ? effortListRef.current : listRef.current;
+      target?.focus({ preventScroll: true });
+    });
+  }, [open, view]);
   const handleTriggerKeyDown = (event) => {
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
       event.preventDefault();
@@ -2132,6 +2199,14 @@ function ComposerModelSelector({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: selectedOption?.label ?? selectedOption?.model ?? placeholder }),
+          selectedEffortOption && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "composer-model-selector-trigger-effort",
+              className: "text-muted-foreground min-w-0 truncate font-normal",
+              children: selectedEffortOption.label
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" })
         ]
       }
@@ -2148,90 +2223,190 @@ function ComposerModelSelector({
             "animate-in fade-in overflow-hidden duration-100"
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                "data-slot": "composer-model-selector-provider-filter",
-                className: "border-border flex min-h-9 items-center gap-1 overflow-x-auto overflow-y-hidden border-b p-2",
-                children: [null, ...providers].map((provider) => {
-                  const selected = activeProviderFilter === provider;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
+            view === "models" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "composer-model-selector-provider-filter",
+                  className: "border-border flex min-h-9 items-center gap-1 overflow-x-auto overflow-y-hidden border-b p-2",
+                  children: [null, ...providers].map((provider) => {
+                    const selected = activeProviderFilter === provider;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": selected,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onClick: () => setProvider(provider),
+                        className: chunkS5RVSXDV_cjs.cn(
+                          "inline-flex h-6 shrink-0 items-center justify-center rounded-full px-2.5 text-xs font-medium whitespace-nowrap transition-colors",
+                          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+                          selected ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                        ),
+                        children: provider === null ? anyLabel : providerLabels.get(provider) ?? provider
+                      },
+                      provider ?? "all-providers"
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: listRef,
+                  id: menuId,
+                  role: "listbox",
+                  "aria-label": ariaLabel,
+                  "aria-activedescendant": activeOptionId,
+                  tabIndex: -1,
+                  onKeyDown: handleMenuKeyDown,
+                  className: "min-h-0 flex-1 overflow-y-auto p-1",
+                  children: groupedModels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: emptyLabel }) : groupedRenderedModels.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
                     {
-                      type: "button",
-                      "aria-pressed": selected,
-                      onMouseDown: (event) => event.preventDefault(),
-                      onClick: () => setProvider(provider),
-                      className: chunkS5RVSXDV_cjs.cn(
-                        "inline-flex h-6 shrink-0 items-center justify-center rounded-full px-2.5 text-xs font-medium whitespace-nowrap transition-colors",
-                        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-                        selected ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                      ),
-                      children: provider === null ? anyLabel : providerLabels.get(provider) ?? provider
+                      role: "group",
+                      "aria-label": providerLabels.get(group.provider) ?? group.provider,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground px-3 py-1.5 text-xs font-semibold uppercase", children: providerLabels.get(group.provider) ?? group.provider }),
+                        group.options.map((renderedModel) => {
+                          const { index, key, option: model } = renderedModel;
+                          const selected = optionKey(model) === selectedKey;
+                          const highlighted = index === highlightedIndex;
+                          return /* @__PURE__ */ jsxRuntime.jsxs(
+                            "button",
+                            {
+                              id: getOptionId(index),
+                              type: "button",
+                              role: "option",
+                              "aria-selected": selected,
+                              onMouseDown: (event) => event.preventDefault(),
+                              onClick: () => selectModel(model),
+                              onMouseEnter: () => setHighlightedIndex(index),
+                              className: chunkS5RVSXDV_cjs.cn(
+                                "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
+                                "focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                                highlighted && "bg-muted",
+                                selected && "bg-primary/10 text-primary"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: model.label ?? model.model }),
+                                selected && /* @__PURE__ */ jsxRuntime.jsx(
+                                  lucideReact.Check,
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "text-primary h-4 w-4 shrink-0"
+                                  }
+                                )
+                              ]
+                            },
+                            key
+                          );
+                        })
+                      ]
                     },
-                    provider ?? "all-providers"
-                  );
-                })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                ref: listRef,
-                id: menuId,
-                role: "listbox",
-                "aria-label": ariaLabel,
-                "aria-activedescendant": activeOptionId,
-                tabIndex: -1,
-                onKeyDown: handleMenuKeyDown,
-                className: "min-h-0 flex-1 overflow-y-auto p-1",
-                children: groupedModels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: emptyLabel }) : groupedRenderedModels.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    role: "group",
-                    "aria-label": providerLabels.get(group.provider) ?? group.provider,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground px-3 py-1.5 text-xs font-semibold uppercase", children: providerLabels.get(group.provider) ?? group.provider }),
-                      group.options.map((renderedModel) => {
-                        const { index, key, option: model } = renderedModel;
-                        const selected = optionKey(model) === selectedKey;
-                        const highlighted = index === highlightedIndex;
-                        return /* @__PURE__ */ jsxRuntime.jsxs(
-                          "button",
-                          {
-                            id: getOptionId(index),
-                            type: "button",
-                            role: "option",
-                            "aria-selected": selected,
-                            onMouseDown: (event) => event.preventDefault(),
-                            onClick: () => selectModel(model),
-                            onMouseEnter: () => setHighlightedIndex(index),
-                            className: chunkS5RVSXDV_cjs.cn(
-                              "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
-                              "focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none",
-                              highlighted && "bg-muted",
-                              selected && "bg-primary/10 text-primary"
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: model.label ?? model.model }),
-                              selected && /* @__PURE__ */ jsxRuntime.jsx(
-                                lucideReact.Check,
-                                {
-                                  "aria-hidden": "true",
-                                  className: "text-primary h-4 w-4 shrink-0"
-                                }
-                              )
-                            ]
-                          },
-                          key
-                        );
-                      })
-                    ]
-                  },
-                  group.provider
-                ))
-              }
-            )
+                    group.provider
+                  ))
+                }
+              ),
+              efforts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border border-t p-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "composer-model-selector-effort-row",
+                  "aria-haspopup": "listbox",
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => setView("effort"),
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
+                    "hover:bg-muted transition-colors",
+                    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: effortLabel }),
+                    selectedEffortOption && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: selectedEffortOption.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.ChevronRight,
+                      {
+                        "aria-hidden": "true",
+                        className: "text-muted-foreground h-4 w-4 shrink-0"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] }),
+            view === "effort" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border flex items-center gap-1 border-b p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "composer-model-selector-effort-back",
+                  "aria-label": backLabel,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => setView("models"),
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-2 text-xs font-medium",
+                    "text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+                    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" }),
+                    effortLabel
+                  ]
+                }
+              ) }),
+              effortHint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground px-3 pt-2 text-xs", children: effortHint }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: effortListRef,
+                  id: menuId,
+                  role: "listbox",
+                  "aria-label": effortLabel,
+                  "aria-activedescendant": activeEffortOptionId,
+                  tabIndex: -1,
+                  onKeyDown: handleEffortKeyDown,
+                  className: "min-h-0 flex-1 overflow-y-auto p-1",
+                  children: efforts.map((option, index) => {
+                    const selected = option.value === effort;
+                    const highlighted = index === effortHighlight;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        id: getEffortOptionId(index),
+                        type: "button",
+                        role: "option",
+                        "aria-selected": selected,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onClick: () => selectEffort(option.value),
+                        onMouseEnter: () => setEffortHighlight(index),
+                        className: chunkS5RVSXDV_cjs.cn(
+                          "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
+                          "focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                          highlighted && "bg-muted",
+                          selected && "bg-primary/10 text-primary"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
+                            option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground block truncate text-xs", children: option.description })
+                          ] }),
+                          option.value === defaultEffort && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted text-muted-foreground shrink-0 rounded px-1.5 py-0.5 text-xs", children: defaultBadgeLabel }),
+                          selected && /* @__PURE__ */ jsxRuntime.jsx(
+                            lucideReact.Check,
+                            {
+                              "aria-hidden": "true",
+                              className: "text-primary h-4 w-4 shrink-0"
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              )
+            ] })
           ]
         }
       ),