@pollinations/ui 0.1.0-alpha.1 → 0.1.0-alpha.10

package/dist/gen/index.cjs

@@ -20,82 +20,430 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/modules/gen/index.ts
 var gen_exports = {};
 __export(gen_exports, {
-  CATEGORY_LABELS: () => CATEGORY_LABELS,
+  ModalityChip: () => ModalityChip,
+  ModalityDot: () => ModalityDot,
+  ModalityTab: () => ModalityTab,
+  ModelAccessIcon: () => ModelAccessIcon,
   ModelSelector: () => ModelSelector,
   categoryLabel: () => categoryLabel,
-  getModalityTheme: () => getModalityTheme,
-  modalityTheme: () => modalityTheme
+  getModalityKey: () => getModalityKey,
+  modalityBgVar: () => modalityBgVar,
+  modalityTextColor: () => modalityTextColor
 });
 module.exports = __toCommonJS(gen_exports);
 
 // src/lib/cn.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
-var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({ prefix: "polli" });
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  prefix: "polli",
+  extend: { theme: { text: ["micro"] } }
+});
 function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(...inputs));
 }
 
-// src/primitives/Button.tsx
+// src/primitives/Chip.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var sizes = {
-  sm: "polli:px-2 polli:pt-0.5 polli:pb-1",
-  md: "polli:px-4 polli:pt-1.5 polli:pb-2",
-  lg: "polli:px-6 polli:py-3"
+var chipSizes = {
+  icon: "polli:h-5 polli:w-5 polli:p-0 polli:text-xs",
+  sm: "polli:h-5 polli:px-2 polli:text-xs",
+  md: "polli:h-6 polli:px-2.5 polli:text-sm",
+  lg: "polli:h-7 polli:px-3 polli:text-sm"
 };
-var themeClasses = "polli:bg-theme-bg-active polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:transition-colors";
 var intentClasses = {
-  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-intent-danger-bg-hover polli:transition-colors"
+  news: "polli:bg-intent-news-bg-light polli:text-intent-news-text",
+  new: "polli:bg-intent-new-bg-light polli:text-intent-new-text",
+  free: "polli:bg-intent-free-bg-light polli:text-intent-free-text",
+  alpha: "polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text",
+  neutral: "polli:bg-ink-100/80 polli:text-ink-900",
+  success: "polli:bg-intent-success-bg-bright/15 polli:text-intent-success-text",
+  warning: "polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  info: "polli:bg-intent-info-bg-light polli:text-intent-info-text",
+  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
+};
+var Chip = ({
+  intent,
+  size = "md",
+  className,
+  children,
+  ...rest
+}) => {
+  const intentClass = intent ? intentClasses[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ...rest,
+      className: cn(
+        "polli:inline-flex polli:shrink-0 polli:items-center polli:justify-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-none",
+        chipSizes[size],
+        intentClass,
+        className
+      ),
+      children
+    }
+  );
+};
+
+// src/modules/gen/themes.ts
+var MODALITIES = [
+  "text",
+  "image",
+  "video",
+  "audio",
+  "realtime",
+  "embedding"
+];
+function getModalityKey(category) {
+  const lower = category.toLowerCase();
+  if (lower === "images") return "image";
+  if (lower === "embeddings") return "embedding";
+  return MODALITIES.includes(lower) ? lower : null;
+}
+var modalityColorVar = (key) => `var(--polli-color-modality-${key})`;
+var modalityBgVar = (key) => `var(--polli-color-modality-${key}-bg)`;
+var modalityTextColor = (key) => `color-mix(in oklab, ${modalityColorVar(key)} 60%, var(--polli-color-text-strong))`;
+
+// src/modules/gen/ModalityChip.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ModalityChip({
+  modality,
+  size = "sm",
+  className,
+  children
+}) {
+  const key = getModalityKey(modality);
+  if (!key) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chip, { intent: "neutral", size, className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Chip,
+    {
+      size,
+      className,
+      style: {
+        backgroundColor: modalityBgVar(key),
+        color: modalityTextColor(key)
+      },
+      children
+    }
+  );
+}
+
+// src/modules/gen/ModalityDot.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ModalityDot({
+  modality,
+  className
+}) {
+  const key = getModalityKey(modality);
+  if (!key) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "polli:inline-block polli:size-2 polli:shrink-0 polli:rounded-full",
+        className
+      ),
+      style: { backgroundColor: modalityColorVar(key) }
+    }
+  );
+}
+
+// src/primitives/TabButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var tabButtonBaseClass = "polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:font-medium polli:leading-normal polli:transition-colors polli:duration-200";
+var tabButtonSizeClass = {
+  xs: "polli:px-2.5 polli:py-1 polli:text-xs",
+  lg: "polli:px-5 polli:py-2 polli:text-lg",
+  md: "polli:px-4 polli:py-1.5 polli:text-base",
+  sm: "polli:px-3 polli:py-1.5 polli:text-sm"
+};
+var variantClasses = {
+  // The default tab look: borderless and monochrome. Selected uses `bg-active`
+  // — the same light resting fill as the site's normal buttons. Both states
+  // deepen to `bg-hover` and use the theme's hover label color. Non-selected
+  // uses the quiet `bg-subtle` token until then.
+  soft: {
+    base: "",
+    active: "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+    mixed: "polli:bg-theme-bg-active/45 polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+    inactive: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover"
+  },
+  // Transparent until hovered or selected — for multi-select toggles and
+  // inline rows where a filled idle pill would read as a hard selection.
+  ghost: {
+    base: "polli:border polli:border-transparent",
+    active: "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+    mixed: "polli:bg-theme-bg-active/45 polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+    inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover"
+  }
+};
+var intentClasses2 = {
+  amber: {
+    active: "polli:bg-paid-pale polli:text-paid-deep",
+    inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-paid-pale/60"
+  },
+  green: {
+    active: "polli:bg-tier-pale polli:text-tier-deep",
+    inactive: "polli:bg-transparent polli:text-tier-deep polli:hover:bg-tier-pale/60"
+  },
+  // Site navigation: the current page is the one full brand pill; hover
+  // only previews it, so "where you are" never doubles up.
+  brand: {
+    active: "polli:bg-brand-accent polli:font-bold polli:text-brand-dark",
+    inactive: "polli:bg-transparent polli:font-bold polli:text-theme-text-strong polli:hover:bg-brand-accent/60 polli:hover:text-brand-dark"
+  }
+};
+function TabButton({
+  as,
+  active,
+  onClick,
+  children,
+  icon,
+  size = "md",
+  variant = "soft",
+  intent,
+  detail,
+  ariaLabel,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const colors = intent === "neutral" ? variantClasses.soft : intent ? {
+    ...intentClasses2[intent],
+    mixed: intentClasses2[intent].active
+  } : variantClasses[variant];
+  const handleClick = disabled ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    Component,
+    {
+      ...rest,
+      ...isButton ? { type: "button", disabled } : {},
+      ...!isButton && disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      ...Component === "a" && disabled ? { href: void 0 } : {},
+      onClick: handleClick,
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      ...isButton ? { "aria-pressed": active } : { "aria-current": active === true ? "page" : void 0 },
+      className: cn(
+        tabButtonBaseClass,
+        variantClasses[variant].base,
+        active === "mixed" ? colors.mixed : active ? colors.active : colors.inactive,
+        disabled && "polli:pointer-events-none polli:cursor-not-allowed polli:opacity-50",
+        tabButtonSizeClass[size],
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "polli:mr-1.5 polli:flex polli:size-4 polli:shrink-0 polli:[&>svg]:size-full",
+            children: icon
+          }
+        ),
+        children,
+        detail != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "polli:ml-1 polli:font-normal polli:opacity-70", children: detail })
+      ]
+    }
+  );
+}
+
+// src/modules/gen/ModalityTab.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ModalityTab({
+  active,
+  onClick,
+  children,
+  size = "md",
+  disabled = false,
+  className,
+  icon: Icon,
+  modality,
+  ...rest
+}) {
+  const tint = modality && !active ? modalityTextColor(modality) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    TabButton,
+    {
+      ...rest,
+      active,
+      onClick,
+      size,
+      disabled,
+      className: cn(tint && "polli:group", className),
+      icon: Icon && (tint ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Icon,
+        {
+          className: "polli:text-(--polli-tab-icon) polli:group-hover:text-current",
+          style: { "--polli-tab-icon": tint }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {})),
+      children
+    }
+  );
+}
+
+// src/primitives/icons/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var strokeProps = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function CardIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 10h20" })
+  ] });
+}
+function SproutIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M7 20h10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M10 20c5.5-2.5.8-6.4 3-10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z" })
+  ] });
+}
+
+// src/modules/gen/ModelAccessIcon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ModelAccessIcon({
+  paidOnly = false,
+  className = "polli:h-3.5 polli:w-3.5"
+}) {
+  const label = paidOnly ? "Paid Pollen required" : "Works with any Pollen";
+  const Icon = paidOnly ? CardIcon : SproutIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      title: label,
+      className: "polli:inline-flex polli:shrink-0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className })
+    }
+  );
+}
+
+// src/primitives/Button.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var pillSizes = {
+  icon: "polli:h-12 polli:w-12 polli:p-0",
+  xs: "polli:h-5 polli:px-1.5 polli:py-0 polli:text-[11px] polli:leading-none",
+  sm: "polli:min-h-7 polli:px-2 polli:pt-0.5 polli:pb-1",
+  md: "polli:min-h-9 polli:px-4 polli:pt-1.5 polli:pb-2",
+  lg: "polli:min-h-12 polli:px-6 polli:py-3 polli:text-base"
+};
+var raisedSizes = {
+  icon: "polli:h-12 polli:w-12 polli:p-0",
+  xs: "polli:px-2 polli:py-1 polli:text-xs",
+  sm: "polli:px-4 polli:py-2 polli:text-sm",
+  md: "polli:px-7 polli:py-3.5 polli:text-base",
+  lg: "polli:px-8 polli:py-4 polli:text-lg"
+};
+var appearanceClasses = {
+  pill: "polli:rounded-full",
+  raised: "polli:rounded-xl polli:border-r-[3px] polli:border-b-[3px] polli:border-solid polli:border-theme-text-strong/20 polli:hover:border-theme-text-strong/45"
+};
+var themeClasses = "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover polli:transition-colors";
+var outlined = "polli:border polli:border-theme-text-soft polli:bg-theme-bg-active/30 polli:text-theme-text-strong polli:transition-colors polli:[.dark_&]:bg-transparent";
+var intentClasses3 = {
+  brand: `${outlined} polli:hover:bg-theme-bg-active/50 polli:[.dark_&]:hover:bg-theme-text-soft/10`,
+  commit: `${outlined} polli:hover:border-theme-bg-active polli:hover:bg-theme-bg-active polli:focus-visible:border-theme-bg-active polli:focus-visible:bg-theme-bg-active polli:[.dark_&]:hover:bg-theme-bg-active polli:[.dark_&]:focus-visible:bg-theme-bg-active`,
+  danger: "polli:border polli:border-intent-danger-text polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-intent-danger-bg-hover polli:focus-visible:bg-intent-danger-bg-hover polli:transition-colors polli:[.dark_&]:bg-transparent polli:[.dark_&]:hover:bg-intent-danger-bg-hover polli:[.dark_&]:focus-visible:bg-intent-danger-bg-hover",
+  info: "polli:bg-intent-info-bg-light polli:text-intent-info-text polli:hover:bg-intent-info-bg-hover polli:transition-colors",
+  // A quiet white pill on the desk, like the colour toggle; hover previews
+  // the accent as the ambient button does.
+  surface: "polli:bg-surface-opaque polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover polli:transition-colors",
+  // Secondary actions never take the accent: one step stronger grey on hover.
+  neutral: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:hover:bg-theme-text-muted/25 polli:hover:text-theme-text-strong polli:transition-colors"
 };
 var buttonClasses = ({
-  theme: _theme,
   intent,
+  appearance = "pill",
   size,
   className,
-  disabled
+  disabled,
+  busy
 }) => {
-  const colorClasses = intent ? intentClasses[intent] : themeClasses;
+  const colorClasses = intent ? intentClasses3[intent] : themeClasses;
+  const sizeClasses = appearance === "raised" ? raisedSizes : pillSizes;
   return cn(
-    "polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:self-center polli:font-medium polli:leading-normal polli:box-border",
-    disabled ? "polli:opacity-50 polli:cursor-not-allowed" : "polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer",
+    "polli-control polli:inline-flex polli:items-center polli:justify-center polli:self-center polli:font-body polli:text-sm polli:font-medium polli:leading-normal polli:box-border polli:border polli:border-transparent",
+    // A busy button is working, not unavailable: it keeps its strength.
+    busy ? "polli:cursor-progress" : disabled ? "polli:opacity-50 polli:cursor-not-allowed" : "polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer",
     colorClasses,
-    sizes[size || "md"],
+    appearanceClasses[appearance],
+    sizeClasses[size || "md"],
     className
   );
 };
 function Button({
   as,
   children,
-  theme,
+  icon,
   intent,
+  appearance,
   size,
   className,
   disabled,
   ...buttonProps
 }) {
   const Component = as || "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const isButton = Component === "button";
+  const isAnchor = Component === "a";
+  const buttonType = buttonProps.type;
+  const onClick = buttonProps.onClick;
+  const ariaBusy = buttonProps["aria-busy"];
+  const busy = ariaBusy === true || ariaBusy === "true";
+  const handleClick = disabled ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Component,
     {
-      "data-theme": intent ? void 0 : theme,
+      ...buttonProps,
       "data-intent": intent,
+      ...isButton ? { type: buttonType ?? "button", disabled } : {},
+      ...!isButton && disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      ...isAnchor && disabled ? { href: void 0 } : {},
+      onClick: handleClick,
       className: buttonClasses({
-        theme,
         intent,
+        appearance,
         size,
         className,
-        disabled
+        disabled,
+        busy
       }),
-      disabled,
-      ...buttonProps,
-      children
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "polli:mr-2 polli:flex polli:size-4 polli:shrink-0 polli:[&>svg]:size-full",
+            children: busy ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "polli:block polli:size-full polli:animate-spin polli:rounded-full polli:border-2 polli:border-current polli:border-r-transparent polli:motion-reduce:animate-none" }) : icon
+          }
+        ),
+        children
+      ]
     }
   );
 }
 
 // src/primitives/ChevronIcon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -107,7 +455,7 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_ru
       expanded && "polli:rotate-180",
       className
     ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "path",
       {
         d: "M3 4.5 6 7.5l3-3",
@@ -121,61 +469,24 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_ru
   }
 );
 
-// src/primitives/Chip.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var chipSizes = {
-  sm: "polli:px-2 polli:py-0.5 polli:text-xs",
-  md: "polli:px-2.5 polli:py-0.5 polli:text-sm",
-  lg: "polli:px-3 polli:py-1 polli:text-sm"
-};
-var intentClasses2 = {
-  news: "polli:bg-intent-news-bg-light polli:text-intent-news-text",
-  alpha: "polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text",
-  neutral: "polli:bg-ink-100/80 polli:text-ink-900",
-  success: "polli:bg-intent-success-bg-light polli:text-intent-success-text",
-  warning: "polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
-  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
-};
-var Chip = ({
-  theme,
-  intent,
-  size = "md",
-  className,
-  children,
-  ...rest
-}) => {
-  const intentClass = intent ? intentClasses2[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "span",
-    {
-      ...rest,
-      "data-theme": theme,
-      className: cn(
-        "polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-normal",
-        chipSizes[size],
-        intentClass,
-        className
-      ),
-      children
-    }
-  );
-};
-
 // src/primitives/Dropdown.tsx
 var import_popover = require("@ark-ui/react/popover");
 var import_portal = require("@ark-ui/react/portal");
 var import_react = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg";
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DEFAULT_PANEL = "polli:rounded-lg polli:bg-surface-menu polli:shadow-lg";
 var Dropdown = ({
-  theme,
   trigger,
   children,
   align = "start",
+  side = "bottom",
   open: openProp,
+  portalled = true,
   onOpenChange,
-  className
+  className,
+  panelStyle
 }) => {
+  const triggerId = (0, import_react.useId)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
@@ -183,22 +494,26 @@ var Dropdown = ({
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_popover.Popover.Root,
     {
+      ids: { trigger: triggerId },
       open,
+      portalled,
       onOpenChange: (details) => setOpen(details.open),
       positioning: {
-        placement: align === "end" ? "bottom-end" : "bottom-start"
+        placement: `${side}-${align}`,
+        strategy: portalled ? "absolute" : "fixed"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover.Popover.Trigger, { asChild: true, children: trigger(open) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Trigger, { asChild: true, children: trigger(open) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_portal.Portal, { disabled: !portalled, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_popover.Popover.Content,
           {
-            "data-theme": theme,
+            "aria-labelledby": triggerId,
+            style: panelStyle,
             className: cn(
-              "polli:z-50 polli:overflow-hidden polli:focus:outline-none",
+              "polli:z-[120] polli:overflow-hidden polli:focus:outline-none",
               DEFAULT_PANEL,
               className
             ),
@@ -212,17 +527,18 @@ var Dropdown = ({
 
 // src/primitives/ScrollArea.tsx
 var import_react2 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var axisClasses = {
   y: "polli:overflow-y-auto polli:overflow-x-hidden",
-  x: "polli:overflow-x-auto polli:overflow-y-hidden"
+  x: "polli:overflow-x-auto polli:overflow-y-hidden",
+  both: "polli:overflow-auto"
 };
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
 var ScrollArea = (0, import_react2.forwardRef)(
-  ({ theme, axis = "y", className, children, ...rest }, externalRef) => {
+  ({ axis = "y", scrollbar = "subtle", className, children, ...rest }, externalRef) => {
     const innerRef = (0, import_react2.useRef)(null);
     const setRef = (0, import_react2.useCallback)(
       (node) => {
@@ -232,6 +548,7 @@ var ScrollArea = (0, import_react2.forwardRef)(
       [externalRef]
     );
     (0, import_react2.useEffect)(() => {
+      if (scrollbar === "native") return;
       const element = innerRef.current;
       if (!element) return;
       let hideTimer = null;
@@ -281,15 +598,15 @@ var ScrollArea = (0, import_react2.forwardRef)(
         element.removeEventListener("focusin", handleInteraction);
         element.removeEventListener("focusout", scheduleHide);
       };
-    }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    }, [scrollbar]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         ...rest,
         ref: setRef,
-        "data-theme": theme,
         className: cn(
-          "polli-scrollbar-subtle polli:min-w-0 polli:max-w-full",
+          scrollbar === "subtle" && "polli-scrollbar-subtle",
+          "polli:min-w-0 polli:max-w-full",
           axisClasses[axis],
           className
         ),
@@ -300,96 +617,22 @@ var ScrollArea = (0, import_react2.forwardRef)(
 );
 ScrollArea.displayName = "ScrollArea";
 
-// src/primitives/TabButton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var sizeClasses = {
-  md: "polli:px-4 polli:py-1.5 polli:text-base",
-  sm: "polli:px-3 polli:py-1.5 polli:text-sm"
-};
-var variantClasses = {
-  default: {
-    base: "polli:border",
-    active: "polli:bg-theme-bg-active polli:text-theme-text-strong polli:border-theme-border",
-    inactive: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:border-theme-border polli:hover:bg-theme-bg-active"
-  },
-  ghost: {
-    base: "polli:border polli:border-transparent",
-    active: "polli:bg-theme-bg-active polli:text-theme-text-strong",
-    inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong"
-  }
-};
-var TabButton = ({
-  theme,
-  active,
-  onClick,
-  children,
-  size = "md",
-  variant = "default",
-  ariaLabel,
-  disabled = false,
-  className
-}) => {
-  const classes = variantClasses[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "button",
-    {
-      type: "button",
-      "data-theme": theme,
-      onClick,
-      "aria-label": ariaLabel,
-      "aria-pressed": active,
-      disabled,
-      className: cn(
-        "polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:font-medium polli:leading-normal polli:transition-all polli:duration-200",
-        classes.base,
-        active ? classes.active : classes.inactive,
-        disabled && "polli:cursor-not-allowed polli:opacity-50",
-        sizeClasses[size],
-        className
-      ),
-      children
-    }
-  );
-};
-
-// src/modules/gen/themes.ts
-var MODALITY_THEMES = {
-  text: "blue",
-  image: "pink",
-  video: "teal",
-  audio: "amber",
-  realtime: "coral",
-  embedding: "violet"
-};
-function modalityTheme(category) {
-  return MODALITY_THEMES[category];
-}
-function normalize(category) {
-  const lower = category.toLowerCase();
-  if (lower === "images") return "image";
-  if (lower === "embeddings") return "embedding";
-  return lower in MODALITY_THEMES ? lower : null;
-}
-function getModalityTheme(category) {
-  const key = normalize(category);
-  return key ? MODALITY_THEMES[key] : null;
-}
-
 // src/modules/gen/ModelSelector.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var CATEGORY_LABELS = {
   image: "Image",
   video: "Video",
   text: "Text",
   audio: "Audio",
+  "3d": "3D",
   embedding: "Embeddings",
   realtime: "Realtime"
 };
 function categoryLabel(category) {
   return CATEGORY_LABELS[category];
 }
-function displayModelName(model) {
-  return model.title;
+function modelId(model) {
+  return model.id ?? model.name;
 }
 function ModelSelector({
   models,
@@ -398,80 +641,78 @@ function ModelSelector({
   isLoading = false,
   onChange
 }) {
-  const filteredModels = models.filter(
-    (model) => model.category === category
-  );
-  const currentModel = models.find((model) => model.id === value);
-  const theme = modalityTheme(category);
-  const modelLabel = currentModel ? displayModelName(currentModel) : "Select";
+  const filteredModels = models.filter((model) => model.category === category).sort((a, b) => modelId(a).localeCompare(modelId(b)));
+  const currentModel = models.find((model) => modelId(model) === value);
+  const modelLabel = currentModel ? currentModel.title ?? currentModel.name : "Select";
   const accessibleLabel = currentModel ? `${CATEGORY_LABELS[category]} model: ${modelLabel}` : `Select ${CATEGORY_LABELS[category].toLowerCase()} model`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Dropdown,
     {
-      theme,
-      align: "end",
+      align: "start",
       className: "polli:w-[min(24rem,calc(100vw-2rem))] polli:p-2",
-      trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         Button,
         {
           type: "button",
-          theme,
           "aria-label": accessibleLabel,
           className: "polli:min-w-64 polli:max-w-full polli:self-start polli:justify-between polli:gap-2",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "polli:truncate", children: modelLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronIcon, { expanded: open })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "polli:flex polli:min-w-0 polli:items-center polli:gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "polli:truncate", children: modelLabel }),
+              currentModel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                ModelAccessIcon,
+                {
+                  paidOnly: currentModel.paid_only
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronIcon, { expanded: open })
           ]
         }
       ),
-      children: (close) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "polli:m-0 polli:px-2 polli:py-2 polli:text-sm polli:text-theme-text-soft", children: "Loading models..." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        ScrollArea,
-        {
-          theme,
-          className: "polli:max-h-64 polli:pr-2",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "polli:flex polli:flex-col polli:gap-1", children: filteredModels.map((model) => {
-            const isActive = value === model.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-              TabButton,
-              {
-                active: isActive,
-                theme: modalityTheme(model.category),
-                size: "sm",
-                variant: "ghost",
-                className: "polli:w-full polli:justify-between polli:text-left",
-                onClick: () => {
-                  onChange(model.id);
-                  close();
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "polli:truncate", children: displayModelName(model) }),
-                  model.paidOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    Chip,
-                    {
-                      size: "sm",
-                      className: cn(
-                        "polli:shrink-0",
-                        isActive && "polli:bg-surface-white"
-                      ),
-                      children: "paid"
-                    }
-                  )
-                ]
-              },
-              model.id
-            );
-          }) })
-        }
-      )
+      children: (close) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "polli:m-0 polli:px-2 polli:py-2 polli:text-sm polli:text-theme-text-soft", children: "Loading models..." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollArea, { className: "polli:max-h-80 polli:pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "polli:flex polli:flex-col polli:gap-1", children: filteredModels.map((model) => {
+        const id = modelId(model);
+        const isActive = value === id;
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          TabButton,
+          {
+            active: isActive,
+            size: "sm",
+            variant: "ghost",
+            className: "polli:w-full polli:justify-start polli:text-left",
+            onClick: () => {
+              onChange(id);
+              close();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "polli:flex polli:min-w-0 polli:flex-col polli:gap-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "polli:flex polli:min-w-0 polli:items-center polli:gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "polli:truncate", children: model.title ?? model.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  ModelAccessIcon,
+                  {
+                    paidOnly: model.paid_only
+                  }
+                )
+              ] }),
+              model.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "polli:truncate polli:text-xs polli:font-normal polli:text-theme-text-muted", children: model.description })
+            ] })
+          },
+          id
+        );
+      }) }) })
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CATEGORY_LABELS,
+  ModalityChip,
+  ModalityDot,
+  ModalityTab,
+  ModelAccessIcon,
   ModelSelector,
   categoryLabel,
-  getModalityTheme,
-  modalityTheme
+  getModalityKey,
+  modalityBgVar,
+  modalityTextColor
 });
 //# sourceMappingURL=index.cjs.map