@pollinations/ui 0.0.2 → 0.1.0-alpha.1

package/dist/gen/index.cjs

@@ -0,0 +1,477 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/gen/index.ts
+var gen_exports = {};
+__export(gen_exports, {
+  CATEGORY_LABELS: () => CATEGORY_LABELS,
+  ModelSelector: () => ModelSelector,
+  categoryLabel: () => categoryLabel,
+  getModalityTheme: () => getModalityTheme,
+  modalityTheme: () => modalityTheme
+});
+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" });
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(...inputs));
+}
+
+// src/primitives/Button.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 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"
+};
+var buttonClasses = ({
+  theme: _theme,
+  intent,
+  size,
+  className,
+  disabled
+}) => {
+  const colorClasses = intent ? intentClasses[intent] : themeClasses;
+  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",
+    colorClasses,
+    sizes[size || "md"],
+    className
+  );
+};
+function Button({
+  as,
+  children,
+  theme,
+  intent,
+  size,
+  className,
+  disabled,
+  ...buttonProps
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      "data-theme": intent ? void 0 : theme,
+      "data-intent": intent,
+      className: buttonClasses({
+        theme,
+        intent,
+        size,
+        className,
+        disabled
+      }),
+      disabled,
+      ...buttonProps,
+      children
+    }
+  );
+}
+
+// src/primitives/ChevronIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    className: cn(
+      "polli:shrink-0 polli:transition-transform polli:duration-200 polli:ease-out",
+      expanded && "polli:rotate-180",
+      className
+    ),
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M3 4.5 6 7.5l3-3",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+// 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 Dropdown = ({
+  theme,
+  trigger,
+  children,
+  align = "start",
+  open: openProp,
+  onOpenChange,
+  className
+}) => {
+  const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_popover.Popover.Root,
+    {
+      open,
+      onOpenChange: (details) => setOpen(details.open),
+      positioning: {
+        placement: align === "end" ? "bottom-end" : "bottom-start"
+      },
+      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)(
+          import_popover.Popover.Content,
+          {
+            "data-theme": theme,
+            className: cn(
+              "polli:z-50 polli:overflow-hidden polli:focus:outline-none",
+              DEFAULT_PANEL,
+              className
+            ),
+            children: typeof children === "function" ? children(() => setOpen(false)) : children
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+// src/primitives/ScrollArea.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var axisClasses = {
+  y: "polli:overflow-y-auto polli:overflow-x-hidden",
+  x: "polli:overflow-x-auto polli:overflow-y-hidden"
+};
+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) => {
+    const innerRef = (0, import_react2.useRef)(null);
+    const setRef = (0, import_react2.useCallback)(
+      (node) => {
+        innerRef.current = node;
+        assignRef(externalRef, node);
+      },
+      [externalRef]
+    );
+    (0, import_react2.useEffect)(() => {
+      const element = innerRef.current;
+      if (!element) return;
+      let hideTimer = null;
+      const clearHideTimer = () => {
+        if (hideTimer !== null) {
+          window.clearTimeout(hideTimer);
+          hideTimer = null;
+        }
+      };
+      const show = () => {
+        element.dataset.scrollbarActive = "true";
+        clearHideTimer();
+      };
+      const hide = () => {
+        element.dataset.scrollbarActive = "false";
+        clearHideTimer();
+      };
+      const scheduleHide = () => {
+        clearHideTimer();
+        hideTimer = window.setTimeout(hide, 2e3);
+      };
+      const handleInteraction = () => {
+        show();
+        scheduleHide();
+      };
+      hide();
+      element.addEventListener("scroll", handleInteraction, {
+        passive: true
+      });
+      element.addEventListener("wheel", handleInteraction, {
+        passive: true
+      });
+      element.addEventListener("touchstart", handleInteraction, {
+        passive: true
+      });
+      element.addEventListener("pointerdown", handleInteraction);
+      element.addEventListener("keydown", handleInteraction);
+      element.addEventListener("focusin", handleInteraction);
+      element.addEventListener("focusout", scheduleHide);
+      return () => {
+        clearHideTimer();
+        element.removeEventListener("scroll", handleInteraction);
+        element.removeEventListener("wheel", handleInteraction);
+        element.removeEventListener("touchstart", handleInteraction);
+        element.removeEventListener("pointerdown", handleInteraction);
+        element.removeEventListener("keydown", handleInteraction);
+        element.removeEventListener("focusin", handleInteraction);
+        element.removeEventListener("focusout", scheduleHide);
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        "data-theme": theme,
+        className: cn(
+          "polli-scrollbar-subtle polli:min-w-0 polli:max-w-full",
+          axisClasses[axis],
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+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 CATEGORY_LABELS = {
+  image: "Image",
+  video: "Video",
+  text: "Text",
+  audio: "Audio",
+  embedding: "Embeddings",
+  realtime: "Realtime"
+};
+function categoryLabel(category) {
+  return CATEGORY_LABELS[category];
+}
+function displayModelName(model) {
+  return model.title;
+}
+function ModelSelector({
+  models,
+  category,
+  value,
+  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 accessibleLabel = currentModel ? `${CATEGORY_LABELS[category]} model: ${modelLabel}` : `Select ${CATEGORY_LABELS[category].toLowerCase()} model`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Dropdown,
+    {
+      theme,
+      align: "end",
+      className: "polli:w-[min(24rem,calc(100vw-2rem))] polli:p-2",
+      trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime7.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 })
+          ]
+        }
+      ),
+      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
+            );
+          }) })
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CATEGORY_LABELS,
+  ModelSelector,
+  categoryLabel,
+  getModalityTheme,
+  modalityTheme
+});
+//# sourceMappingURL=index.cjs.map

package/dist/gen/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/modules/gen/index.ts","../../src/lib/cn.ts","../../src/primitives/Button.tsx","../../src/primitives/ChevronIcon.tsx","../../src/primitives/Chip.tsx","../../src/primitives/Dropdown.tsx","../../src/primitives/ScrollArea.tsx","../../src/primitives/TabButton.tsx","../../src/modules/gen/themes.ts","../../src/modules/gen/ModelSelector.tsx"],"sourcesContent":["export {\n    CATEGORY_LABELS,\n    categoryLabel,\n    ModelSelector,\n    type ModelSelectorCategory,\n    type ModelSelectorItem,\n    type ModelSelectorProps,\n} from \"./ModelSelector.tsx\";\nexport {\n    getModalityTheme,\n    type Modality,\n    modalityTheme,\n} from \"./themes.ts\";\n","import { clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"polli\" });\n\n/** Internal class merge for polli:-prefixed package primitive classes. */\nexport function cn(...inputs: (string | undefined | null | false)[]) {\n    return twMerge(clsx(...inputs));\n}\n","import type { PropsWithChildren } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\n/** Button only supports `danger`. Label/status color recipes live on Chip. */\ntype ButtonIntent = \"danger\";\n\nconst sizes = {\n    sm: \"polli:px-2 polli:pt-0.5 polli:pb-1\",\n    md: \"polli:px-4 polli:pt-1.5 polli:pb-2\",\n    lg: \"polli:px-6 polli:py-3\",\n} as const;\n\n// Cascade-driven base — reads [data-theme] vars.\nconst themeClasses =\n    \"polli:bg-theme-bg-active polli:text-theme-text-base \" +\n    \"polli:hover:bg-theme-bg-hover polli:transition-colors\";\n\n// Single intent: danger. Soft recipe — light tile + deep text, slightly\n// deeper bg on hover. No filled CTAs anywhere.\nconst intentClasses: Record<ButtonIntent, string> = {\n    danger:\n        \"polli:bg-intent-danger-bg-light polli:text-intent-danger-text \" +\n        \"polli:hover:bg-intent-danger-bg-hover polli:transition-colors\",\n};\n\ntype BaseButtonProps = {\n    /** Override the cascade theme for this button's subtree. Ignored when `intent` is set. */\n    theme?: ThemeName;\n    /** Only `\"danger\"` for now. */\n    intent?: ButtonIntent;\n    size?: keyof typeof sizes;\n    className?: string;\n    disabled?: boolean;\n};\n\nconst buttonClasses = ({\n    theme: _theme,\n    intent,\n    size,\n    className,\n    disabled,\n}: BaseButtonProps & { disabled?: boolean }) => {\n    const colorClasses = intent ? intentClasses[intent] : themeClasses;\n    return cn(\n        \"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\",\n        disabled\n            ? \"polli:opacity-50 polli:cursor-not-allowed\"\n            : \"polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer\",\n        colorClasses,\n        sizes[size || \"md\"],\n        className,\n    );\n};\n\nexport type ButtonProps<T extends React.ElementType = \"button\"> =\n    PropsWithChildren<BaseButtonProps> & {\n        as?: T;\n    } & Omit<React.ComponentPropsWithoutRef<T>, keyof BaseButtonProps | \"as\">;\n\nexport function Button<T extends React.ElementType = \"button\">({\n    as,\n    children,\n    theme,\n    intent,\n    size,\n    className,\n    disabled,\n    ...buttonProps\n}: ButtonProps<T>) {\n    const Component: React.ElementType = as || \"button\";\n\n    return (\n        <Component\n            // Cascade override only applies when `intent` is unset.\n            data-theme={intent ? undefined : theme}\n            data-intent={intent}\n            className={buttonClasses({\n                theme,\n                intent,\n                size,\n                className,\n                disabled,\n            })}\n            disabled={disabled}\n            {...buttonProps}\n        >\n            {children}\n        </Component>\n    );\n}\n","import type { FC } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\n\ntype ChevronIconProps = {\n    /** Rotate 180° when expanded/open. */\n    expanded?: boolean;\n    className?: string;\n};\n\n/**\n * Canonical chevron used for collapsibles, dropdown triggers, and select pills\n * across the app. One icon everywhere.\n */\nexport const ChevronIcon: FC<ChevronIconProps> = ({ expanded, className }) => (\n    <svg\n        aria-hidden=\"true\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 12 12\"\n        className={cn(\n            \"polli:shrink-0 polli:transition-transform polli:duration-200 polli:ease-out\",\n            expanded && \"polli:rotate-180\",\n            className,\n        )}\n    >\n        <path\n            d=\"M3 4.5 6 7.5l3-3\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n        />\n    </svg>\n);\n","import type { ComponentPropsWithoutRef, FC } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\n/** Semantic chip labels for status and metadata badges. */\ntype ChipIntent =\n    | \"news\"\n    | \"alpha\"\n    | \"neutral\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\";\n\nconst chipSizes = {\n    sm: \"polli:px-2 polli:py-0.5 polli:text-xs\",\n    md: \"polli:px-2.5 polli:py-0.5 polli:text-sm\",\n    lg: \"polli:px-3 polli:py-1 polli:text-sm\",\n} as const;\n\nconst intentClasses: Record<ChipIntent, string> = {\n    news: \"polli:bg-intent-news-bg-light polli:text-intent-news-text\",\n    alpha: \"polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text\",\n    neutral: \"polli:bg-ink-100/80 polli:text-ink-900\",\n    success: \"polli:bg-intent-success-bg-light polli:text-intent-success-text\",\n    warning: \"polli:bg-intent-warning-bg-light polli:text-intent-warning-text\",\n    danger: \"polli:bg-intent-danger-bg-light polli:text-intent-danger-text\",\n};\n\nexport type ChipProps = ComponentPropsWithoutRef<\"span\"> & {\n    /** Override the cascade theme for this chip's subtree. */\n    theme?: ThemeName;\n    /** Semantic intent. Wins over `theme` when set. */\n    intent?: ChipIntent;\n    size?: keyof typeof chipSizes;\n};\n\n// Static, rectangular colored container. Round shapes are reserved for buttons.\n// Reads `bg-theme-bg-active` / `text-theme-text-strong` from the cascade unless\n// `intent` is set (semantic, theme-independent).\nexport const Chip: FC<ChipProps> = ({\n    theme,\n    intent,\n    size = \"md\",\n    className,\n    children,\n    ...rest\n}) => {\n    const intentClass = intent\n        ? intentClasses[intent]\n        : \"polli:bg-theme-bg-active polli:text-theme-text-strong\";\n    return (\n        <span\n            {...rest}\n            data-theme={theme}\n            className={cn(\n                \"polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-normal\",\n                chipSizes[size],\n                intentClass,\n                className,\n            )}\n        >\n            {children}\n        </span>\n    );\n};\n","import { Popover } from \"@ark-ui/react/popover\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport type { FC, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nconst DEFAULT_PANEL =\n    \"polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg\";\n\nexport type DropdownProps = {\n    theme: ThemeName;\n    /** Trigger element; receives the current open state (e.g. to rotate a chevron). */\n    trigger: (open: boolean) => ReactNode;\n    /** Panel content. As a function, receives `close` to dismiss after a selection. */\n    children: ReactNode | ((close: () => void) => ReactNode);\n    /** Panel placement relative to the trigger. */\n    align?: \"start\" | \"end\";\n    /** Controlled open state. Omit to let the Dropdown manage its own. */\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    /** Appended after the surface (widths, padding, max-height…). */\n    className?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = ({\n    theme,\n    trigger,\n    children,\n    align = \"start\",\n    open: openProp,\n    onOpenChange,\n    className,\n}) => {\n    const [internalOpen, setInternalOpen] = useState(false);\n    const isControlled = openProp !== undefined;\n    const open = isControlled ? openProp : internalOpen;\n\n    const setOpen = (next: boolean) => {\n        if (!isControlled) setInternalOpen(next);\n        onOpenChange?.(next);\n    };\n\n    return (\n        <Popover.Root\n            open={open}\n            onOpenChange={(details) => setOpen(details.open)}\n            positioning={{\n                placement: align === \"end\" ? \"bottom-end\" : \"bottom-start\",\n            }}\n        >\n            <Popover.Trigger asChild>{trigger(open)}</Popover.Trigger>\n            <Portal>\n                <Popover.Positioner>\n                    <Popover.Content\n                        data-theme={theme}\n                        className={cn(\n                            \"polli:z-50 polli:overflow-hidden polli:focus:outline-none\",\n                            DEFAULT_PANEL,\n                            className,\n                        )}\n                    >\n                        {typeof children === \"function\"\n                            ? children(() => setOpen(false))\n                            : children}\n                    </Popover.Content>\n                </Popover.Positioner>\n            </Portal>\n        </Popover.Root>\n    );\n};\n","import {\n    type ComponentPropsWithoutRef,\n    forwardRef,\n    type MutableRefObject,\n    type PropsWithChildren,\n    type Ref,\n    useCallback,\n    useEffect,\n    useRef,\n} from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\ntype ScrollAxis = \"y\" | \"x\";\n\nconst axisClasses: Record<ScrollAxis, string> = {\n    y: \"polli:overflow-y-auto polli:overflow-x-hidden\",\n    x: \"polli:overflow-x-auto polli:overflow-y-hidden\",\n};\n\ntype ScrollAreaOwnProps = {\n    /** Override the ambient cascade theme for this scroller's thumb. */\n    theme?: ThemeName;\n    /** Scroll direction. Default `y`. */\n    axis?: ScrollAxis;\n    className?: string;\n};\n\nexport type ScrollAreaProps = PropsWithChildren<\n    ScrollAreaOwnProps &\n        Omit<ComponentPropsWithoutRef<\"div\">, keyof ScrollAreaOwnProps>\n>;\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n    if (typeof ref === \"function\") ref(value);\n    else if (ref) (ref as MutableRefObject<T | null>).current = value;\n}\n\n/**\n * Themed auto-hide scroll container. Thumb color follows the nearest\n * `[data-theme=\"...\"]` ancestor; pass `theme` to override locally.\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n    ({ theme, axis = \"y\", className, children, ...rest }, externalRef) => {\n        const innerRef = useRef<HTMLDivElement | null>(null);\n\n        const setRef = useCallback(\n            (node: HTMLDivElement | null) => {\n                innerRef.current = node;\n                assignRef(externalRef, node);\n            },\n            [externalRef],\n        );\n\n        useEffect(() => {\n            const element = innerRef.current;\n            if (!element) return;\n\n            let hideTimer: number | null = null;\n\n            const clearHideTimer = () => {\n                if (hideTimer !== null) {\n                    window.clearTimeout(hideTimer);\n                    hideTimer = null;\n                }\n            };\n\n            const show = () => {\n                element.dataset.scrollbarActive = \"true\";\n                clearHideTimer();\n            };\n\n            const hide = () => {\n                element.dataset.scrollbarActive = \"false\";\n                clearHideTimer();\n            };\n\n            const scheduleHide = () => {\n                clearHideTimer();\n                hideTimer = window.setTimeout(hide, 2000);\n            };\n\n            const handleInteraction = () => {\n                show();\n                scheduleHide();\n            };\n\n            hide();\n\n            element.addEventListener(\"scroll\", handleInteraction, {\n                passive: true,\n            });\n            element.addEventListener(\"wheel\", handleInteraction, {\n                passive: true,\n            });\n            element.addEventListener(\"touchstart\", handleInteraction, {\n                passive: true,\n            });\n            element.addEventListener(\"pointerdown\", handleInteraction);\n            element.addEventListener(\"keydown\", handleInteraction);\n            element.addEventListener(\"focusin\", handleInteraction);\n            element.addEventListener(\"focusout\", scheduleHide);\n\n            return () => {\n                clearHideTimer();\n                element.removeEventListener(\"scroll\", handleInteraction);\n                element.removeEventListener(\"wheel\", handleInteraction);\n                element.removeEventListener(\"touchstart\", handleInteraction);\n                element.removeEventListener(\"pointerdown\", handleInteraction);\n                element.removeEventListener(\"keydown\", handleInteraction);\n                element.removeEventListener(\"focusin\", handleInteraction);\n                element.removeEventListener(\"focusout\", scheduleHide);\n            };\n        }, []);\n\n        return (\n            <div\n                {...rest}\n                ref={setRef}\n                data-theme={theme}\n                className={cn(\n                    \"polli-scrollbar-subtle polli:min-w-0 polli:max-w-full\",\n                    axisClasses[axis],\n                    className,\n                )}\n            >\n                {children}\n            </div>\n        );\n    },\n);\n\nScrollArea.displayName = \"ScrollArea\";\n","import type { FC, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nexport type TabButtonProps = {\n    active: boolean;\n    onClick: () => void;\n    children: ReactNode;\n    /** Optional cascade override; defaults to inherited [data-theme]. */\n    theme?: ThemeName;\n    size?: \"md\" | \"sm\";\n    variant?: \"default\" | \"ghost\";\n    ariaLabel?: string;\n    disabled?: boolean;\n    className?: string;\n};\n\nconst sizeClasses = {\n    md: \"polli:px-4 polli:py-1.5 polli:text-base\",\n    sm: \"polli:px-3 polli:py-1.5 polli:text-sm\",\n} as const;\n\nconst variantClasses = {\n    default: {\n        base: \"polli:border\",\n        active: \"polli:bg-theme-bg-active polli:text-theme-text-strong polli:border-theme-border\",\n        inactive:\n            \"polli:bg-theme-bg-subtle polli:text-theme-text-base polli:border-theme-border polli:hover:bg-theme-bg-active\",\n    },\n    ghost: {\n        base: \"polli:border polli:border-transparent\",\n        active: \"polli:bg-theme-bg-active polli:text-theme-text-strong\",\n        inactive:\n            \"polli:bg-transparent polli:text-theme-text-base polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong\",\n    },\n} as const;\n\nexport const TabButton: FC<TabButtonProps> = ({\n    theme,\n    active,\n    onClick,\n    children,\n    size = \"md\",\n    variant = \"default\",\n    ariaLabel,\n    disabled = false,\n    className,\n}) => {\n    const classes = variantClasses[variant];\n    return (\n        <button\n            type=\"button\"\n            data-theme={theme}\n            onClick={onClick}\n            aria-label={ariaLabel}\n            aria-pressed={active}\n            disabled={disabled}\n            className={cn(\n                \"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\",\n                classes.base,\n                active ? classes.active : classes.inactive,\n                disabled && \"polli:cursor-not-allowed polli:opacity-50\",\n                sizeClasses[size],\n                className,\n            )}\n        >\n            {children}\n        </button>\n    );\n};\n","/** Pollinations model modality to package theme mapping. */\nimport type { ModelCategory } from \"@pollinations/sdk\";\nimport type { ThemeName } from \"../../theme.ts\";\n\n/** A model modality is just a model category. Single source of truth: the SDK. */\nexport type Modality = ModelCategory;\n\nexport const MODALITY_THEMES: Record<ModelCategory, ThemeName> = {\n    text: \"blue\",\n    image: \"pink\",\n    video: \"teal\",\n    audio: \"amber\",\n    realtime: \"coral\",\n    embedding: \"violet\",\n};\n\n/** Theme for a known model category. Total — every category has a theme. */\nexport function modalityTheme(category: ModelCategory): ThemeName {\n    return MODALITY_THEMES[category];\n}\n\n/** Map a human-typed category string to the canonical `ModelCategory` key. */\nfunction normalize(category: string): ModelCategory | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    return lower in MODALITY_THEMES ? (lower as ModelCategory) : null;\n}\n\n/** Theme for an untrusted category string (e.g. user input); null if unknown. */\nexport function getModalityTheme(category: string): ThemeName | null {\n    const key = normalize(category);\n    return key ? MODALITY_THEMES[key] : null;\n}\n","import type { ModelCategory } from \"@pollinations/sdk\";\nimport { cn } from \"../../lib/cn.ts\";\nimport { Button } from \"../../primitives/Button.tsx\";\nimport { ChevronIcon } from \"../../primitives/ChevronIcon.tsx\";\nimport { Chip } from \"../../primitives/Chip.tsx\";\nimport { Dropdown } from \"../../primitives/Dropdown.tsx\";\nimport { ScrollArea } from \"../../primitives/ScrollArea.tsx\";\nimport { TabButton } from \"../../primitives/TabButton.tsx\";\nimport { modalityTheme } from \"./themes.ts\";\n\nexport type ModelSelectorCategory = ModelCategory;\n\nexport type ModelSelectorItem = {\n    id: string;\n    name: string;\n    title: string;\n    description?: string;\n    category: ModelSelectorCategory;\n    paidOnly?: boolean;\n};\n\nexport type ModelSelectorProps = {\n    models: readonly ModelSelectorItem[];\n    category: ModelSelectorCategory;\n    value: string;\n    isLoading?: boolean;\n    onChange: (modelId: string) => void;\n};\n\nexport const CATEGORY_LABELS: Record<ModelSelectorCategory, string> = {\n    image: \"Image\",\n    video: \"Video\",\n    text: \"Text\",\n    audio: \"Audio\",\n    embedding: \"Embeddings\",\n    realtime: \"Realtime\",\n};\n\n/** Human-readable label for a model category, e.g. \"embedding\" -> \"Embeddings\". */\nexport function categoryLabel(category: ModelSelectorCategory): string {\n    return CATEGORY_LABELS[category];\n}\n\nfunction displayModelName(model: ModelSelectorItem): string {\n    return model.title;\n}\n\nexport function ModelSelector({\n    models,\n    category,\n    value,\n    isLoading = false,\n    onChange,\n}: ModelSelectorProps) {\n    const filteredModels = models.filter(\n        (model) => model.category === category,\n    );\n    const currentModel = models.find((model) => model.id === value);\n    const theme = modalityTheme(category);\n    const modelLabel = currentModel ? displayModelName(currentModel) : \"Select\";\n    const accessibleLabel = currentModel\n        ? `${CATEGORY_LABELS[category]} model: ${modelLabel}`\n        : `Select ${CATEGORY_LABELS[category].toLowerCase()} model`;\n\n    return (\n        <Dropdown\n            theme={theme}\n            align=\"end\"\n            className=\"polli:w-[min(24rem,calc(100vw-2rem))] polli:p-2\"\n            trigger={(open) => (\n                <Button\n                    type=\"button\"\n                    theme={theme}\n                    aria-label={accessibleLabel}\n                    className=\"polli:min-w-64 polli:max-w-full polli:self-start polli:justify-between polli:gap-2\"\n                >\n                    <span className=\"polli:truncate\">{modelLabel}</span>\n                    <ChevronIcon expanded={open} />\n                </Button>\n            )}\n        >\n            {(close) =>\n                isLoading ? (\n                    <p className=\"polli:m-0 polli:px-2 polli:py-2 polli:text-sm polli:text-theme-text-soft\">\n                        Loading models...\n                    </p>\n                ) : (\n                    <ScrollArea\n                        theme={theme}\n                        className=\"polli:max-h-64 polli:pr-2\"\n                    >\n                        <div className=\"polli:flex polli:flex-col polli:gap-1\">\n                            {filteredModels.map((model) => {\n                                const isActive = value === model.id;\n                                return (\n                                    <TabButton\n                                        key={model.id}\n                                        active={isActive}\n                                        theme={modalityTheme(model.category)}\n                                        size=\"sm\"\n                                        variant=\"ghost\"\n                                        className=\"polli:w-full polli:justify-between polli:text-left\"\n                                        onClick={() => {\n                                            onChange(model.id);\n                                            close();\n                                        }}\n                                    >\n                                        <span className=\"polli:truncate\">\n                                            {displayModelName(model)}\n                                        </span>\n                                        {model.paidOnly && (\n                                            <Chip\n                                                size=\"sm\"\n                                                className={cn(\n                                                    \"polli:shrink-0\",\n                                                    isActive &&\n                                                        \"polli:bg-surface-white\",\n                                                )}\n                                            >\n                                                paid\n                                            </Chip>\n                                        )}\n                                    </TabButton>\n                                );\n                            })}\n                        </div>\n                    </ScrollArea>\n                )\n            }\n        </Dropdown>\n    );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","intentClasses","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/gen/index.d.cts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModelCategory } from '@pollinations/sdk';
+import { T as ThemeName } from '../theme-jRPPBmld.cjs';
+
+type ModelSelectorCategory = ModelCategory;
+type ModelSelectorItem = {
+    id: string;
+    name: string;
+    title: string;
+    description?: string;
+    category: ModelSelectorCategory;
+    paidOnly?: boolean;
+};
+type ModelSelectorProps = {
+    models: readonly ModelSelectorItem[];
+    category: ModelSelectorCategory;
+    value: string;
+    isLoading?: boolean;
+    onChange: (modelId: string) => void;
+};
+declare const CATEGORY_LABELS: Record<ModelSelectorCategory, string>;
+/** Human-readable label for a model category, e.g. "embedding" -> "Embeddings". */
+declare function categoryLabel(category: ModelSelectorCategory): string;
+declare function ModelSelector({ models, category, value, isLoading, onChange, }: ModelSelectorProps): react_jsx_runtime.JSX.Element;
+
+/** Pollinations model modality to package theme mapping. */
+
+/** A model modality is just a model category. Single source of truth: the SDK. */
+type Modality = ModelCategory;
+/** Theme for a known model category. Total — every category has a theme. */
+declare function modalityTheme(category: ModelCategory): ThemeName;
+/** Theme for an untrusted category string (e.g. user input); null if unknown. */
+declare function getModalityTheme(category: string): ThemeName | null;
+
+export { CATEGORY_LABELS, type Modality, ModelSelector, type ModelSelectorCategory, type ModelSelectorItem, type ModelSelectorProps, categoryLabel, getModalityTheme, modalityTheme };

package/dist/gen/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModelCategory } from '@pollinations/sdk';
+import { T as ThemeName } from '../theme-jRPPBmld.js';
+
+type ModelSelectorCategory = ModelCategory;
+type ModelSelectorItem = {
+    id: string;
+    name: string;
+    title: string;
+    description?: string;
+    category: ModelSelectorCategory;
+    paidOnly?: boolean;
+};
+type ModelSelectorProps = {
+    models: readonly ModelSelectorItem[];
+    category: ModelSelectorCategory;
+    value: string;
+    isLoading?: boolean;
+    onChange: (modelId: string) => void;
+};
+declare const CATEGORY_LABELS: Record<ModelSelectorCategory, string>;
+/** Human-readable label for a model category, e.g. "embedding" -> "Embeddings". */
+declare function categoryLabel(category: ModelSelectorCategory): string;
+declare function ModelSelector({ models, category, value, isLoading, onChange, }: ModelSelectorProps): react_jsx_runtime.JSX.Element;
+
+/** Pollinations model modality to package theme mapping. */
+
+/** A model modality is just a model category. Single source of truth: the SDK. */
+type Modality = ModelCategory;
+/** Theme for a known model category. Total — every category has a theme. */
+declare function modalityTheme(category: ModelCategory): ThemeName;
+/** Theme for an untrusted category string (e.g. user input); null if unknown. */
+declare function getModalityTheme(category: string): ThemeName | null;
+
+export { CATEGORY_LABELS, type Modality, ModelSelector, type ModelSelectorCategory, type ModelSelectorItem, type ModelSelectorProps, categoryLabel, getModalityTheme, modalityTheme };