@tangle-network/sandbox-ui 0.97.0 → 0.99.0

package/dist/chunk-WMVUJ5SA.js

@@ -1,529 +0,0 @@
-import {
-  BrandLogo,
-  ModelBrandStack,
-  brandInfo,
-  canonicalModelId,
-  normalizeBrandKey,
-  resolveModelBrandIdentity
-} from "./chunk-5XRAKVIV.js";
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-
-// src/dashboard/model-picker.tsx
-import * as React2 from "react";
-import { ChevronDown, Sparkles } from "lucide-react";
-import * as Popover from "@radix-ui/react-dropdown-menu";
-
-// src/lib/picker-menu.tsx
-import * as React from "react";
-import { Loader2, Search } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var pickerMenuContentClass = cn(
-  "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
-  "max-h-[min(440px,var(--radix-dropdown-menu-content-available-height))] overflow-hidden flex flex-col",
-  "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
-  "data-[state=open]:animate-in data-[state=closed]:animate-out",
-  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
-);
-var pickerMenuBodyClass = "flex-1 overflow-y-auto";
-function pickerMenuItemClass({
-  active,
-  featured
-} = {}) {
-  return cn(
-    "flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 outline-none",
-    "transition-colors duration-[var(--transition-fast)]",
-    "hover:bg-accent/50 focus:bg-accent/50",
-    featured && "mx-1 border border-primary/10 bg-primary/[0.04] px-2.5",
-    active && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
-  );
-}
-function PickerMenuSearch({
-  value,
-  onChange,
-  placeholder,
-  loading,
-  inputRef
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: [
-    /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: (e) => {
-          if (e.key.length === 1) e.stopPropagation();
-        },
-        placeholder,
-        autoFocus: true,
-        className: "flex-1 bg-transparent text-sm font-medium outline-none placeholder:font-normal placeholder:text-muted-foreground"
-      }
-    ),
-    loading && /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
-  ] });
-}
-function PickerMenuSection({
-  label,
-  glyph,
-  tone,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center gap-1.5 px-3 pt-1.5 pb-0.5 text-[10px] font-mono uppercase tracking-widest",
-          tone === "featured" ? "text-primary" : "text-muted-foreground"
-        ),
-        children: [
-          glyph,
-          /* @__PURE__ */ jsx("span", { children: label })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { children })
-  ] });
-}
-function PickerMenuFooter({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 text-[10px] text-muted-foreground", children });
-}
-function PickerMenuMeta({ parts }) {
-  const shown = parts.filter(Boolean);
-  if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground", children: shown.map((part, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-40", children: "\xB7" }),
-    /* @__PURE__ */ jsx("span", { className: i === 0 ? "min-w-0 truncate" : "shrink-0", children: part })
-  ] }, i)) });
-}
-function PickerMenuTag({ children }) {
-  return /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-1.5 py-px text-[9px] font-medium text-muted-foreground", children });
-}
-
-// src/dashboard/model-picker.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function modelDedupKey(model) {
-  const canonical = canonicalModelId(model).toLowerCase();
-  const segments = canonical.split("/").filter(Boolean);
-  const modelId = segments[segments.length - 1] ?? canonical;
-  const lab = resolveModelBrandIdentity(model).lab.key;
-  return lab === "unknown" ? canonical : `${lab}/${modelId}`;
-}
-function dedupeModels(models) {
-  const byKey = /* @__PURE__ */ new Map();
-  const result = [];
-  for (const model of models) {
-    const key = modelDedupKey(model);
-    const existingIndex = byKey.get(key);
-    if (existingIndex === void 0) {
-      byKey.set(key, result.length);
-      result.push(model);
-      continue;
-    }
-    const existing = result[existingIndex];
-    if (!existing.featured && model.featured) {
-      result[existingIndex] = model;
-    }
-  }
-  return result;
-}
-var DEFAULT_FEATURED_MODEL_IDS = [
-  "anthropic/claude-fable-5",
-  "anthropic/claude-opus-5",
-  "openai/gpt-5.6-sol",
-  "google/gemini-3.1-pro-preview",
-  "deepseek/deepseek-v4-flash"
-];
-function isTextChatModel(model) {
-  const arch = model.architecture;
-  if (!arch) return true;
-  const inputs = arch.input_modalities;
-  const outputs = arch.output_modalities;
-  if (inputs?.length || outputs?.length) {
-    const inOk = !inputs?.length || inputs.includes("text");
-    const outOk = !outputs?.length || outputs.includes("text");
-    return inOk && outOk;
-  }
-  const modality = arch.modality;
-  if (!modality) return true;
-  const arrow = modality.split("->");
-  if (arrow.length === 2) {
-    return arrow[0].split("+").includes("text") && arrow[1].split("+").includes("text");
-  }
-  return modality === "text" || modality === "multimodal";
-}
-function formatPricing(pricing) {
-  const prompt = Number(pricing?.prompt ?? 0);
-  const completion = Number(pricing?.completion ?? 0);
-  if (!prompt && !completion) return null;
-  const fmt = (n) => {
-    const perM = n * 1e6;
-    if (perM === 0) return "0";
-    if (perM >= 1) return `$${perM.toFixed(2)}`;
-    return `$${perM.toFixed(2)}`;
-  };
-  return `${fmt(prompt)} / ${fmt(completion)} per 1M`;
-}
-function formatContext(ctx) {
-  if (!ctx) return null;
-  if (ctx >= 1e6) return `${(ctx / 1e6).toFixed(1)}M ctx`;
-  if (ctx >= 1e3) return `${Math.round(ctx / 1e3)}k ctx`;
-  return `${ctx} ctx`;
-}
-var PRIORITY_MODEL_GROUPS = ["anthropic", "openai", "google", "deepseek", "zai", "moonshot"];
-function modelGroupKey(model) {
-  const identity = resolveModelBrandIdentity(model);
-  if (identity.lab.key !== "unknown") return identity.lab.key;
-  if (identity.host.key !== "unknown") return identity.host.key;
-  return (model._provider ?? model.provider ?? "other").toLowerCase();
-}
-function modelGroupLabel(key) {
-  if (key === "moonshot") return "Kimi";
-  const brand = brandInfo(normalizeBrandKey(key));
-  return brand.key === "unknown" ? key : brand.label;
-}
-function modelGroupRank(key) {
-  const priorityIndex = PRIORITY_MODEL_GROUPS.indexOf(normalizeBrandKey(key));
-  return priorityIndex === -1 ? Number.POSITIVE_INFINITY : priorityIndex;
-}
-function compareModelGroups(a, b) {
-  const aRank = modelGroupRank(a);
-  const bRank = modelGroupRank(b);
-  if (aRank !== bRank) return aRank - bRank;
-  return modelGroupLabel(a).localeCompare(modelGroupLabel(b));
-}
-function compareModelsByDisplayName(a, b) {
-  return (a.name ?? a.id).localeCompare(b.name ?? b.id);
-}
-function stripBrandPrefix(name, identity) {
-  if (!identity) return name;
-  for (const label of [identity.lab.label, identity.host.label]) {
-    if (!label) continue;
-    if (name.toLowerCase().startsWith(label.toLowerCase())) {
-      const after = name.slice(label.length);
-      if (/^[\s:]/.test(after)) {
-        const rest = after.replace(/^[\s:]+/, "").trim();
-        if (rest) return rest;
-      }
-    }
-  }
-  return name;
-}
-function ModelPicker({
-  value,
-  onChange,
-  models,
-  loading = false,
-  recents,
-  popular,
-  excludeProviders,
-  modalities,
-  variant = "pill",
-  label = "Model",
-  placeholder = "Choose a model",
-  className,
-  triggerClassName,
-  disabled,
-  side,
-  avoidCollisions
-}) {
-  const [query, setQuery] = React2.useState("");
-  const [open, setOpen] = React2.useState(false);
-  const searchInputRef = React2.useRef(null);
-  React2.useLayoutEffect(() => {
-    if (!open) return;
-    const frame = requestAnimationFrame(() => {
-      searchInputRef.current?.focus();
-      searchInputRef.current?.select();
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  const deduped = React2.useMemo(() => dedupeModels(models), [models]);
-  const passesCatalogFilters = React2.useMemo(() => {
-    const excluded = new Set((excludeProviders ?? []).map((p) => p.toLowerCase()));
-    const allowedModalities = modalities ? new Set(modalities) : null;
-    return (m) => {
-      const provider = (m._provider ?? m.provider ?? "").toLowerCase();
-      if (excluded.has(provider)) return false;
-      if (allowedModalities && m.architecture?.modality && !allowedModalities.has(m.architecture.modality)) return false;
-      return true;
-    };
-  }, [modalities, excludeProviders]);
-  const eligible = React2.useMemo(
-    () => deduped.filter(passesCatalogFilters),
-    [deduped, passesCatalogFilters]
-  );
-  const filtered = React2.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return eligible;
-    return eligible.filter((m) => {
-      const provider = (m._provider ?? m.provider ?? "").toLowerCase();
-      const id = canonicalModelId(m).toLowerCase();
-      const name = (m.name ?? "").toLowerCase();
-      const identity = resolveModelBrandIdentity(m);
-      return id.includes(q) || name.includes(q) || provider.includes(q) || identity.host.label.toLowerCase().includes(q) || identity.lab.label.toLowerCase().includes(q);
-    });
-  }, [eligible, query]);
-  const current = React2.useMemo(
-    () => models.find((m) => canonicalModelId(m) === value),
-    [models, value]
-  );
-  const currentIdentity = current ? resolveModelBrandIdentity(current) : null;
-  const currentLabel = stripBrandPrefix(
-    current?.name ?? current?.id ?? value,
-    currentIdentity
-  );
-  const recentIds = React2.useMemo(() => {
-    if (!recents?.length) return [];
-    const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
-    return recents.map((id) => lookup.get(id)).filter((m) => Boolean(m)).filter(passesCatalogFilters).slice(0, 4);
-  }, [recents, models, passesCatalogFilters]);
-  const popularModels = React2.useMemo(() => {
-    if (!popular?.length) return [];
-    const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
-    return popular.map((id) => lookup.get(id)).filter((m) => Boolean(m)).filter(passesCatalogFilters);
-  }, [popular, models, passesCatalogFilters]);
-  const featuredModels = React2.useMemo(() => {
-    const flagged = eligible.filter((m) => m.featured);
-    if (flagged.length > 0) return flagged;
-    const seedKeys = new Set(
-      DEFAULT_FEATURED_MODEL_IDS.map((id) => modelDedupKey({ id }))
-    );
-    const seeded = eligible.filter((m) => seedKeys.has(modelDedupKey(m)));
-    const order = DEFAULT_FEATURED_MODEL_IDS.map((id) => modelDedupKey({ id }));
-    return seeded.sort(
-      (a, b) => order.indexOf(modelDedupKey(a)) - order.indexOf(modelDedupKey(b))
-    );
-  }, [eligible]);
-  const grouped = React2.useMemo(() => {
-    const curatedKeys = new Set(
-      [...featuredModels, ...popularModels, ...recentIds].map(
-        (m) => modelDedupKey(m)
-      )
-    );
-    const groups = /* @__PURE__ */ new Map();
-    for (const m of filtered) {
-      if (!query.trim() && curatedKeys.has(modelDedupKey(m))) continue;
-      const key = modelGroupKey(m);
-      const list = groups.get(key);
-      if (list) list.push(m);
-      else groups.set(key, [m]);
-    }
-    return Array.from(groups.entries()).map(([key, list]) => [key, [...list].sort(compareModelsByDisplayName)]).sort(([a], [b]) => compareModelGroups(a, b));
-  }, [filtered, featuredModels, popularModels, recentIds, query]);
-  const handleSelect = (id) => {
-    onChange(id);
-    setOpen(false);
-    setQuery("");
-  };
-  const triggerLabel = label ? `${label}: ${currentLabel || placeholder}` : currentLabel || placeholder;
-  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs2(
-    "button",
-    {
-      type: "button",
-      "aria-label": triggerLabel,
-      disabled,
-      className: cn(
-        "inline-flex h-9 items-center gap-1.5 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container",
-        "px-3 text-sm font-medium text-foreground shadow-sm",
-        "transition-colors duration-[var(--transition-fast)]",
-        "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className,
-        triggerClassName
-      ),
-      children: [
-        currentIdentity ? /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx2(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[180px]", children: currentLabel || placeholder }),
-        /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs2(
-    "button",
-    {
-      type: "button",
-      "aria-label": triggerLabel,
-      disabled,
-      className: cn(
-        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
-        "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left",
-        "transition-colors duration-[var(--transition-fast)]",
-        "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className,
-        triggerClassName
-      ),
-      children: [
-        /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
-          currentIdentity && /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }),
-          /* @__PURE__ */ jsx2("span", { className: cn("truncate", current ? "text-foreground font-medium" : "text-muted-foreground"), children: currentLabel || placeholder })
-        ] }),
-        /* @__PURE__ */ jsx2(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs2("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", variant === "field" ? className : void 0), children: [
-    variant === "field" && label && /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
-    /* @__PURE__ */ jsxs2(Popover.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx2(Popover.Trigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx2(Popover.Portal, { children: /* @__PURE__ */ jsxs2(
-        Popover.Content,
-        {
-          side,
-          sideOffset: 4,
-          align: variant === "pill" ? "start" : "start",
-          avoidCollisions,
-          collisionPadding: 24,
-          className: pickerMenuContentClass,
-          children: [
-            /* @__PURE__ */ jsx2(
-              PickerMenuSearch,
-              {
-                value: query,
-                onChange: setQuery,
-                placeholder: "Search models...",
-                loading,
-                inputRef: searchInputRef
-              }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: pickerMenuBodyClass, children: [
-              !query && featuredModels.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Recommended", tone: "featured", children: featuredModels.map((m) => /* @__PURE__ */ jsx2(
-                ModelRow,
-                {
-                  model: m,
-                  active: canonicalModelId(m) === value,
-                  onSelect: handleSelect,
-                  featured: true
-                },
-                `featured-${canonicalModelId(m)}`
-              )) }),
-              !query && popularModels.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Top models", tone: "featured", children: popularModels.map((m) => /* @__PURE__ */ jsx2(
-                ModelRow,
-                {
-                  model: m,
-                  active: canonicalModelId(m) === value,
-                  onSelect: handleSelect,
-                  featured: true
-                },
-                `popular-${canonicalModelId(m)}`
-              )) }),
-              !query && recentIds.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Recent", children: recentIds.map((m) => /* @__PURE__ */ jsx2(
-                ModelRow,
-                {
-                  model: m,
-                  active: canonicalModelId(m) === value,
-                  onSelect: handleSelect
-                },
-                `recent-${canonicalModelId(m)}`
-              )) }),
-              grouped.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: loading ? "Loading models..." : query ? "No models match." : "No models available." }) : grouped.map(([groupKey, list]) => /* @__PURE__ */ jsx2(Section, { label: modelGroupLabel(groupKey), children: list.map((m) => /* @__PURE__ */ jsx2(
-                ModelRow,
-                {
-                  model: m,
-                  active: canonicalModelId(m) === value,
-                  onSelect: handleSelect
-                },
-                canonicalModelId(m)
-              )) }, groupKey))
-            ] }),
-            /* @__PURE__ */ jsxs2(PickerMenuFooter, { children: [
-              filtered.length,
-              " of ",
-              eligible.length,
-              " model",
-              eligible.length === 1 ? "" : "s"
-            ] })
-          ]
-        }
-      ) })
-    ] })
-  ] });
-}
-function Section({ label, children, tone }) {
-  const identity = brandInfo(normalizeBrandKey(label));
-  return /* @__PURE__ */ jsx2(
-    PickerMenuSection,
-    {
-      label,
-      tone,
-      glyph: identity.key !== "unknown" ? /* @__PURE__ */ jsx2(BrandLogo, { brand: identity, size: "xs" }) : void 0,
-      children
-    }
-  );
-}
-function PickerItem({
-  onSelect,
-  active,
-  featured,
-  children
-}) {
-  return /* @__PURE__ */ jsx2(
-    Popover.Item,
-    {
-      onSelect: (e) => {
-        e.preventDefault();
-        onSelect();
-      },
-      className: pickerMenuItemClass({ active, featured }),
-      children
-    }
-  );
-}
-function ModelRow({
-  model,
-  active,
-  onSelect,
-  featured
-}) {
-  const id = canonicalModelId(model);
-  const pricing = formatPricing(model.pricing);
-  const ctx = formatContext(model.context_length);
-  const identity = resolveModelBrandIdentity(model);
-  const via = !identity.combined ? identity.host.label : null;
-  return /* @__PURE__ */ jsxs2(PickerItem, { onSelect: () => onSelect(id), active, featured, children: [
-    /* @__PURE__ */ jsx2(ModelBrandStack, { identity, size: "md" }),
-    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-sm font-medium", children: model.name ?? model.id }),
-        via && /* @__PURE__ */ jsxs2(PickerMenuTag, { children: [
-          "via ",
-          via
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx2(
-        PickerMenuMeta,
-        {
-          parts: [ctx, pricing ? /* @__PURE__ */ jsx2("span", { className: "font-mono", children: pricing }) : null]
-        }
-      )
-    ] })
-  ] });
-}
-
-export {
-  pickerMenuContentClass,
-  pickerMenuBodyClass,
-  pickerMenuItemClass,
-  PickerMenuSearch,
-  PickerMenuSection,
-  PickerMenuFooter,
-  PickerMenuMeta,
-  PickerMenuTag,
-  modelDedupKey,
-  dedupeModels,
-  DEFAULT_FEATURED_MODEL_IDS,
-  isTextChatModel,
-  formatPricing,
-  formatContext,
-  stripBrandPrefix,
-  ModelPicker
-};