@pollinations/ui 0.0.1 → 0.1.0-alpha.0

package/dist/modality/index.cjs

@@ -20,42 +20,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/modules/modality/index.ts
 var modality_exports = {};
 __export(modality_exports, {
-  ModalityButton: () => ModalityButton,
   getModalityColors: () => getModalityColors
 });
 module.exports = __toCommonJS(modality_exports);
 
 // src/modules/modality/colors.ts
+var filled = "polli:bg-theme-bg-active polli:text-theme-text-strong";
+var hover = "polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong";
+var text = "polli:text-theme-text-strong";
 var MODALITY_COLORS = {
   text: {
-    filled: "polli:bg-blue-200 polli:text-blue-900",
-    hover: "polli:hover:bg-blue-100 polli:hover:text-blue-900",
-    text: "polli:text-blue-800"
+    theme: "blue",
+    filled,
+    hover,
+    text
   },
   image: {
-    filled: "polli:bg-pink-200 polli:text-pink-900",
-    hover: "polli:hover:bg-pink-100 polli:hover:text-pink-900",
-    text: "polli:text-pink-800"
+    theme: "pink",
+    filled,
+    hover,
+    text
   },
   video: {
-    filled: "polli:bg-teal-200 polli:text-teal-900",
-    hover: "polli:hover:bg-teal-100 polli:hover:text-teal-900",
-    text: "polli:text-teal-800"
+    theme: "teal",
+    filled,
+    hover,
+    text
   },
   audio: {
-    filled: "polli:bg-violet-200 polli:text-violet-900",
-    hover: "polli:hover:bg-violet-100 polli:hover:text-violet-900",
-    text: "polli:text-violet-800"
+    theme: "violet",
+    filled,
+    hover,
+    text
   },
   realtime: {
-    filled: "polli:bg-green-200 polli:text-green-900",
-    hover: "polli:hover:bg-green-100 polli:hover:text-green-900",
-    text: "polli:text-green-800"
+    theme: "green",
+    filled,
+    hover,
+    text
   },
   embedding: {
-    filled: "polli:bg-amber-200 polli:text-amber-900",
-    hover: "polli:hover:bg-amber-100 polli:hover:text-amber-900",
-    text: "polli:text-amber-800"
+    theme: "amber",
+    filled,
+    hover,
+    text
   }
 };
 function normalize(category) {
@@ -71,45 +79,8 @@ function getModalityColors(category) {
   const key = normalize(category);
   return key ? MODALITY_COLORS[key] : null;
 }
-
-// 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/modules/modality/ModalityButton.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var ModalityButton = ({
-  category,
-  selected = true,
-  onClick,
-  disabled,
-  children
-}) => {
-  const colors = getModalityColors(category ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled,
-      "aria-pressed": selected,
-      className: cn(
-        "polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors",
-        selected ? colors?.filled ?? "polli:bg-gray-200 polli:text-gray-900" : "polli:bg-gray-100 polli:text-gray-600",
-        !disabled && !selected && colors?.hover,
-        disabled ? "polli:cursor-not-allowed polli:opacity-50" : "polli:cursor-pointer"
-      ),
-      children
-    }
-  );
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ModalityButton,
   getModalityColors
 });
 //# sourceMappingURL=index.cjs.map

package/dist/modality/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modules/modality/index.ts","../../src/modules/modality/colors.ts","../../src/lib/cn.ts","../../src/modules/modality/ModalityButton.tsx"],"sourcesContent":["export {\n    getModalityColors,\n    type Modality,\n    type ModalityColorSet,\n} from \"./colors.ts\";\nexport { ModalityButton, type ModalityButtonProps } from \"./ModalityButton.tsx\";\n","/**\n * Single source of truth for modality colors.\n *\n * Each modality (text/image/video/audio/realtime/embedding) gets one\n * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.\n * Used in two places:\n *   1. The model-selection buttons in the API key creation flow.\n *   2. The static modality chips on the OAuth authorize screen.\n *\n * Interactive selection (model-picker) renders as `rounded-full` pills\n * aligned to the canonical Button. Static display (authorize summary)\n * renders as `rounded-lg` chips. Page-theme hues only — no rogue\n * indigo/rose.\n */\nexport type Modality =\n    | \"text\"\n    | \"image\"\n    | \"video\"\n    | \"audio\"\n    | \"realtime\"\n    | \"embedding\";\n\nexport type ModalityColorSet = {\n    /** Selected/filled state: `bg + text + border` classes. */\n    filled: string;\n    /** Hover hint shown on the unselected button (subtle tint). */\n    hover: string;\n    /** Heading text colour for the category label. */\n    text: string;\n};\n\n// No borders — chips and buttons in this system are borderless.\nexport const MODALITY_COLORS: Record<Modality, ModalityColorSet> = {\n    text: {\n        filled: \"polli:bg-blue-200 polli:text-blue-900\",\n        hover: \"polli:hover:bg-blue-100 polli:hover:text-blue-900\",\n        text: \"polli:text-blue-800\",\n    },\n    image: {\n        filled: \"polli:bg-pink-200 polli:text-pink-900\",\n        hover: \"polli:hover:bg-pink-100 polli:hover:text-pink-900\",\n        text: \"polli:text-pink-800\",\n    },\n    video: {\n        filled: \"polli:bg-teal-200 polli:text-teal-900\",\n        hover: \"polli:hover:bg-teal-100 polli:hover:text-teal-900\",\n        text: \"polli:text-teal-800\",\n    },\n    audio: {\n        filled: \"polli:bg-violet-200 polli:text-violet-900\",\n        hover: \"polli:hover:bg-violet-100 polli:hover:text-violet-900\",\n        text: \"polli:text-violet-800\",\n    },\n    realtime: {\n        filled: \"polli:bg-green-200 polli:text-green-900\",\n        hover: \"polli:hover:bg-green-100 polli:hover:text-green-900\",\n        text: \"polli:text-green-800\",\n    },\n    embedding: {\n        filled: \"polli:bg-amber-200 polli:text-amber-900\",\n        hover: \"polli:hover:bg-amber-100 polli:hover:text-amber-900\",\n        text: \"polli:text-amber-800\",\n    },\n};\n\n/** Map any human-typed category string to the canonical `Modality` key. */\nfunction normalize(category: string): Modality | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    if (\n        lower === \"text\" ||\n        lower === \"image\" ||\n        lower === \"video\" ||\n        lower === \"audio\" ||\n        lower === \"realtime\" ||\n        lower === \"embedding\"\n    ) {\n        return lower;\n    }\n    return null;\n}\n\nexport function getModalityColors(category: string): ModalityColorSet | null {\n    const key = normalize(category);\n    return key ? MODALITY_COLORS[key] : null;\n}\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 { FC, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.ts\";\nimport { getModalityColors } from \"./colors.ts\";\n\nexport type ModalityButtonProps = {\n    /** Modality key or category string (\"Text\", \"Images\", etc). */\n    category?: string;\n    /** Filled (modality hue) when true, muted gray when false. */\n    selected?: boolean;\n    onClick?: () => void;\n    disabled?: boolean;\n    children: ReactNode;\n};\n\n/**\n * Rounded-full pill button colored by modality. Single source of truth\n * for every interactive modality affordance — model picker, design\n * showcase, etc. Shape and recipe live here; consumers only supply\n * content + state.\n */\nexport const ModalityButton: FC<ModalityButtonProps> = ({\n    category,\n    selected = true,\n    onClick,\n    disabled,\n    children,\n}) => {\n    const colors = getModalityColors(category ?? \"\");\n    return (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            disabled={disabled}\n            aria-pressed={selected}\n            className={cn(\n                \"polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors\",\n                selected\n                    ? (colors?.filled ??\n                          \"polli:bg-gray-200 polli:text-gray-900\")\n                    : \"polli:bg-gray-100 polli:text-gray-600\",\n                !disabled && !selected && colors?.hover,\n                disabled\n                    ? \"polli:cursor-not-allowed polli:opacity-50\"\n                    : \"polli:cursor-pointer\",\n            )}\n        >\n            {children}\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgCO,IAAM,kBAAsD;AAAA,EAC/D,MAAM;AAAA,IACF,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AACJ;AAGA,SAAS,UAAU,UAAmC;AAClD,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,UAAU,SAAU,QAAO;AAC/B,MAAI,UAAU,aAAc,QAAO;AACnC,MACI,UAAU,UACV,UAAU,WACV,UAAU,WACV,UAAU,WACV,UAAU,cACV,UAAU,aACZ;AACE,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,SAAS,kBAAkB,UAA2C;AACzE,QAAM,MAAM,UAAU,QAAQ;AAC9B,SAAO,MAAM,gBAAgB,GAAG,IAAI;AACxC;;;ACtFA,kBAAqB;AACrB,4BAAoC;AAEpC,IAAM,cAAU,2CAAoB,EAAE,QAAQ,QAAQ,CAAC;AAGhD,SAAS,MAAM,QAA+C;AACjE,SAAO,YAAQ,kBAAK,GAAG,MAAM,CAAC;AAClC;;;ACqBQ;AATD,IAAM,iBAA0C,CAAC;AAAA,EACpD;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,SAAS,kBAAkB,YAAY,EAAE;AAC/C,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACP;AAAA,QACA,WACO,QAAQ,UACL,0CACJ;AAAA,QACN,CAAC,YAAY,CAAC,YAAY,QAAQ;AAAA,QAClC,WACM,8CACA;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACL;AAER;","names":[]}
+{"version":3,"sources":["../../src/modules/modality/index.ts","../../src/modules/modality/colors.ts"],"sourcesContent":["export {\n    getModalityColors,\n    type Modality,\n    type ModalityColorSet,\n} from \"./colors.ts\";\n","/**\n * Single source of truth for modality colors.\n *\n * Each modality (text/image/video/audio/realtime/embedding) maps to one\n * package theme. Class recipes are token-based, so callers should pass the\n * returned `theme` to the primitive or set `data-theme` on an ancestor.\n * Used by apps to compose model-selection buttons and static modality chips.\n * This module only owns modality color data; primitives own shape and behavior.\n */\nimport type { ThemeName } from \"../../theme.ts\";\n\nexport type Modality =\n    | \"text\"\n    | \"image\"\n    | \"video\"\n    | \"audio\"\n    | \"realtime\"\n    | \"embedding\";\n\nexport type ModalityColorSet = {\n    /** Matching package theme for surfaces/chips that should inherit this hue. */\n    theme: ThemeName;\n    /** Selected/filled state using the active theme tokens. */\n    filled: string;\n    /** Hover hint shown on the unselected button using the active theme. */\n    hover: string;\n    /** Heading text colour using the active theme. */\n    text: string;\n};\n\nconst filled = \"polli:bg-theme-bg-active polli:text-theme-text-strong\";\nconst hover =\n    \"polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong\";\nconst text = \"polli:text-theme-text-strong\";\n\n// No borders — chips and buttons in this system are borderless.\nexport const MODALITY_COLORS: Record<Modality, ModalityColorSet> = {\n    text: {\n        theme: \"blue\",\n        filled,\n        hover,\n        text,\n    },\n    image: {\n        theme: \"pink\",\n        filled,\n        hover,\n        text,\n    },\n    video: {\n        theme: \"teal\",\n        filled,\n        hover,\n        text,\n    },\n    audio: {\n        theme: \"violet\",\n        filled,\n        hover,\n        text,\n    },\n    realtime: {\n        theme: \"green\",\n        filled,\n        hover,\n        text,\n    },\n    embedding: {\n        theme: \"amber\",\n        filled,\n        hover,\n        text,\n    },\n};\n\n/** Map any human-typed category string to the canonical `Modality` key. */\nfunction normalize(category: string): Modality | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    if (\n        lower === \"text\" ||\n        lower === \"image\" ||\n        lower === \"video\" ||\n        lower === \"audio\" ||\n        lower === \"realtime\" ||\n        lower === \"embedding\"\n    ) {\n        return lower;\n    }\n    return null;\n}\n\nexport function getModalityColors(category: string): ModalityColorSet | null {\n    const key = normalize(category);\n    return key ? MODALITY_COLORS[key] : null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;AC8BA,IAAM,SAAS;AACf,IAAM,QACF;AACJ,IAAM,OAAO;AAGN,IAAM,kBAAsD;AAAA,EAC/D,MAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAGA,SAAS,UAAU,UAAmC;AAClD,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,UAAU,SAAU,QAAO;AAC/B,MAAI,UAAU,aAAc,QAAO;AACnC,MACI,UAAU,UACV,UAAU,WACV,UAAU,WACV,UAAU,WACV,UAAU,cACV,UAAU,aACZ;AACE,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,SAAS,kBAAkB,UAA2C;AACzE,QAAM,MAAM,UAAU,QAAQ;AAC9B,SAAO,MAAM,gBAAgB,GAAG,IAAI;AACxC;","names":[]}

package/dist/modality/index.d.cts

@@ -1,45 +1,26 @@
-import { FC, ReactNode } from 'react';
+import { T as ThemeName } from '../theme-VMRlhqST.cjs';
 
 /**
  * Single source of truth for modality colors.
  *
- * Each modality (text/image/video/audio/realtime/embedding) gets one
- * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.
- * Used in two places:
- *   1. The model-selection buttons in the API key creation flow.
- *   2. The static modality chips on the OAuth authorize screen.
- *
- * Interactive selection (model-picker) renders as `rounded-full` pills
- * aligned to the canonical Button. Static display (authorize summary)
- * renders as `rounded-lg` chips. Page-theme hues only — no rogue
- * indigo/rose.
+ * Each modality (text/image/video/audio/realtime/embedding) maps to one
+ * package theme. Class recipes are token-based, so callers should pass the
+ * returned `theme` to the primitive or set `data-theme` on an ancestor.
+ * Used by apps to compose model-selection buttons and static modality chips.
+ * This module only owns modality color data; primitives own shape and behavior.
  */
+
 type Modality = "text" | "image" | "video" | "audio" | "realtime" | "embedding";
 type ModalityColorSet = {
-    /** Selected/filled state: `bg + text + border` classes. */
+    /** Matching package theme for surfaces/chips that should inherit this hue. */
+    theme: ThemeName;
+    /** Selected/filled state using the active theme tokens. */
     filled: string;
-    /** Hover hint shown on the unselected button (subtle tint). */
+    /** Hover hint shown on the unselected button using the active theme. */
     hover: string;
-    /** Heading text colour for the category label. */
+    /** Heading text colour using the active theme. */
     text: string;
 };
 declare function getModalityColors(category: string): ModalityColorSet | null;
 
-type ModalityButtonProps = {
-    /** Modality key or category string ("Text", "Images", etc). */
-    category?: string;
-    /** Filled (modality hue) when true, muted gray when false. */
-    selected?: boolean;
-    onClick?: () => void;
-    disabled?: boolean;
-    children: ReactNode;
-};
-/**
- * Rounded-full pill button colored by modality. Single source of truth
- * for every interactive modality affordance — model picker, design
- * showcase, etc. Shape and recipe live here; consumers only supply
- * content + state.
- */
-declare const ModalityButton: FC<ModalityButtonProps>;
-
-export { type Modality, ModalityButton, type ModalityButtonProps, type ModalityColorSet, getModalityColors };
+export { type Modality, type ModalityColorSet, getModalityColors };

package/dist/modality/index.d.ts

@@ -1,45 +1,26 @@
-import { FC, ReactNode } from 'react';
+import { T as ThemeName } from '../theme-VMRlhqST.js';
 
 /**
  * Single source of truth for modality colors.
  *
- * Each modality (text/image/video/audio/realtime/embedding) gets one
- * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.
- * Used in two places:
- *   1. The model-selection buttons in the API key creation flow.
- *   2. The static modality chips on the OAuth authorize screen.
- *
- * Interactive selection (model-picker) renders as `rounded-full` pills
- * aligned to the canonical Button. Static display (authorize summary)
- * renders as `rounded-lg` chips. Page-theme hues only — no rogue
- * indigo/rose.
+ * Each modality (text/image/video/audio/realtime/embedding) maps to one
+ * package theme. Class recipes are token-based, so callers should pass the
+ * returned `theme` to the primitive or set `data-theme` on an ancestor.
+ * Used by apps to compose model-selection buttons and static modality chips.
+ * This module only owns modality color data; primitives own shape and behavior.
  */
+
 type Modality = "text" | "image" | "video" | "audio" | "realtime" | "embedding";
 type ModalityColorSet = {
-    /** Selected/filled state: `bg + text + border` classes. */
+    /** Matching package theme for surfaces/chips that should inherit this hue. */
+    theme: ThemeName;
+    /** Selected/filled state using the active theme tokens. */
     filled: string;
-    /** Hover hint shown on the unselected button (subtle tint). */
+    /** Hover hint shown on the unselected button using the active theme. */
     hover: string;
-    /** Heading text colour for the category label. */
+    /** Heading text colour using the active theme. */
     text: string;
 };
 declare function getModalityColors(category: string): ModalityColorSet | null;
 
-type ModalityButtonProps = {
-    /** Modality key or category string ("Text", "Images", etc). */
-    category?: string;
-    /** Filled (modality hue) when true, muted gray when false. */
-    selected?: boolean;
-    onClick?: () => void;
-    disabled?: boolean;
-    children: ReactNode;
-};
-/**
- * Rounded-full pill button colored by modality. Single source of truth
- * for every interactive modality affordance — model picker, design
- * showcase, etc. Shape and recipe live here; consumers only supply
- * content + state.
- */
-declare const ModalityButton: FC<ModalityButtonProps>;
-
-export { type Modality, ModalityButton, type ModalityButtonProps, type ModalityColorSet, getModalityColors };
+export { type Modality, type ModalityColorSet, getModalityColors };

package/dist/modality/index.js

@@ -1,34 +1,43 @@
 // src/modules/modality/colors.ts
+var filled = "polli:bg-theme-bg-active polli:text-theme-text-strong";
+var hover = "polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong";
+var text = "polli:text-theme-text-strong";
 var MODALITY_COLORS = {
   text: {
-    filled: "polli:bg-blue-200 polli:text-blue-900",
-    hover: "polli:hover:bg-blue-100 polli:hover:text-blue-900",
-    text: "polli:text-blue-800"
+    theme: "blue",
+    filled,
+    hover,
+    text
   },
   image: {
-    filled: "polli:bg-pink-200 polli:text-pink-900",
-    hover: "polli:hover:bg-pink-100 polli:hover:text-pink-900",
-    text: "polli:text-pink-800"
+    theme: "pink",
+    filled,
+    hover,
+    text
   },
   video: {
-    filled: "polli:bg-teal-200 polli:text-teal-900",
-    hover: "polli:hover:bg-teal-100 polli:hover:text-teal-900",
-    text: "polli:text-teal-800"
+    theme: "teal",
+    filled,
+    hover,
+    text
   },
   audio: {
-    filled: "polli:bg-violet-200 polli:text-violet-900",
-    hover: "polli:hover:bg-violet-100 polli:hover:text-violet-900",
-    text: "polli:text-violet-800"
+    theme: "violet",
+    filled,
+    hover,
+    text
   },
   realtime: {
-    filled: "polli:bg-green-200 polli:text-green-900",
-    hover: "polli:hover:bg-green-100 polli:hover:text-green-900",
-    text: "polli:text-green-800"
+    theme: "green",
+    filled,
+    hover,
+    text
   },
   embedding: {
-    filled: "polli:bg-amber-200 polli:text-amber-900",
-    hover: "polli:hover:bg-amber-100 polli:hover:text-amber-900",
-    text: "polli:text-amber-800"
+    theme: "amber",
+    filled,
+    hover,
+    text
   }
 };
 function normalize(category) {
@@ -44,44 +53,7 @@ function getModalityColors(category) {
   const key = normalize(category);
   return key ? MODALITY_COLORS[key] : null;
 }
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({ prefix: "polli" });
-function cn(...inputs) {
-  return twMerge(clsx(...inputs));
-}
-
-// src/modules/modality/ModalityButton.tsx
-import { jsx } from "react/jsx-runtime";
-var ModalityButton = ({
-  category,
-  selected = true,
-  onClick,
-  disabled,
-  children
-}) => {
-  const colors = getModalityColors(category ?? "");
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled,
-      "aria-pressed": selected,
-      className: cn(
-        "polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors",
-        selected ? colors?.filled ?? "polli:bg-gray-200 polli:text-gray-900" : "polli:bg-gray-100 polli:text-gray-600",
-        !disabled && !selected && colors?.hover,
-        disabled ? "polli:cursor-not-allowed polli:opacity-50" : "polli:cursor-pointer"
-      ),
-      children
-    }
-  );
-};
 export {
-  ModalityButton,
   getModalityColors
 };
 //# sourceMappingURL=index.js.map

package/dist/modality/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modules/modality/colors.ts","../../src/lib/cn.ts","../../src/modules/modality/ModalityButton.tsx"],"sourcesContent":["/**\n * Single source of truth for modality colors.\n *\n * Each modality (text/image/video/audio/realtime/embedding) gets one\n * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.\n * Used in two places:\n *   1. The model-selection buttons in the API key creation flow.\n *   2. The static modality chips on the OAuth authorize screen.\n *\n * Interactive selection (model-picker) renders as `rounded-full` pills\n * aligned to the canonical Button. Static display (authorize summary)\n * renders as `rounded-lg` chips. Page-theme hues only — no rogue\n * indigo/rose.\n */\nexport type Modality =\n    | \"text\"\n    | \"image\"\n    | \"video\"\n    | \"audio\"\n    | \"realtime\"\n    | \"embedding\";\n\nexport type ModalityColorSet = {\n    /** Selected/filled state: `bg + text + border` classes. */\n    filled: string;\n    /** Hover hint shown on the unselected button (subtle tint). */\n    hover: string;\n    /** Heading text colour for the category label. */\n    text: string;\n};\n\n// No borders — chips and buttons in this system are borderless.\nexport const MODALITY_COLORS: Record<Modality, ModalityColorSet> = {\n    text: {\n        filled: \"polli:bg-blue-200 polli:text-blue-900\",\n        hover: \"polli:hover:bg-blue-100 polli:hover:text-blue-900\",\n        text: \"polli:text-blue-800\",\n    },\n    image: {\n        filled: \"polli:bg-pink-200 polli:text-pink-900\",\n        hover: \"polli:hover:bg-pink-100 polli:hover:text-pink-900\",\n        text: \"polli:text-pink-800\",\n    },\n    video: {\n        filled: \"polli:bg-teal-200 polli:text-teal-900\",\n        hover: \"polli:hover:bg-teal-100 polli:hover:text-teal-900\",\n        text: \"polli:text-teal-800\",\n    },\n    audio: {\n        filled: \"polli:bg-violet-200 polli:text-violet-900\",\n        hover: \"polli:hover:bg-violet-100 polli:hover:text-violet-900\",\n        text: \"polli:text-violet-800\",\n    },\n    realtime: {\n        filled: \"polli:bg-green-200 polli:text-green-900\",\n        hover: \"polli:hover:bg-green-100 polli:hover:text-green-900\",\n        text: \"polli:text-green-800\",\n    },\n    embedding: {\n        filled: \"polli:bg-amber-200 polli:text-amber-900\",\n        hover: \"polli:hover:bg-amber-100 polli:hover:text-amber-900\",\n        text: \"polli:text-amber-800\",\n    },\n};\n\n/** Map any human-typed category string to the canonical `Modality` key. */\nfunction normalize(category: string): Modality | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    if (\n        lower === \"text\" ||\n        lower === \"image\" ||\n        lower === \"video\" ||\n        lower === \"audio\" ||\n        lower === \"realtime\" ||\n        lower === \"embedding\"\n    ) {\n        return lower;\n    }\n    return null;\n}\n\nexport function getModalityColors(category: string): ModalityColorSet | null {\n    const key = normalize(category);\n    return key ? MODALITY_COLORS[key] : null;\n}\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 { FC, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.ts\";\nimport { getModalityColors } from \"./colors.ts\";\n\nexport type ModalityButtonProps = {\n    /** Modality key or category string (\"Text\", \"Images\", etc). */\n    category?: string;\n    /** Filled (modality hue) when true, muted gray when false. */\n    selected?: boolean;\n    onClick?: () => void;\n    disabled?: boolean;\n    children: ReactNode;\n};\n\n/**\n * Rounded-full pill button colored by modality. Single source of truth\n * for every interactive modality affordance — model picker, design\n * showcase, etc. Shape and recipe live here; consumers only supply\n * content + state.\n */\nexport const ModalityButton: FC<ModalityButtonProps> = ({\n    category,\n    selected = true,\n    onClick,\n    disabled,\n    children,\n}) => {\n    const colors = getModalityColors(category ?? \"\");\n    return (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            disabled={disabled}\n            aria-pressed={selected}\n            className={cn(\n                \"polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors\",\n                selected\n                    ? (colors?.filled ??\n                          \"polli:bg-gray-200 polli:text-gray-900\")\n                    : \"polli:bg-gray-100 polli:text-gray-600\",\n                !disabled && !selected && colors?.hover,\n                disabled\n                    ? \"polli:cursor-not-allowed polli:opacity-50\"\n                    : \"polli:cursor-pointer\",\n            )}\n        >\n            {children}\n        </button>\n    );\n};\n"],"mappings":";AAgCO,IAAM,kBAAsD;AAAA,EAC/D,MAAM;AAAA,IACF,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AACJ;AAGA,SAAS,UAAU,UAAmC;AAClD,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,UAAU,SAAU,QAAO;AAC/B,MAAI,UAAU,aAAc,QAAO;AACnC,MACI,UAAU,UACV,UAAU,WACV,UAAU,WACV,UAAU,WACV,UAAU,cACV,UAAU,aACZ;AACE,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,SAAS,kBAAkB,UAA2C;AACzE,QAAM,MAAM,UAAU,QAAQ;AAC9B,SAAO,MAAM,gBAAgB,GAAG,IAAI;AACxC;;;ACtFA,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB,EAAE,QAAQ,QAAQ,CAAC;AAGhD,SAAS,MAAM,QAA+C;AACjE,SAAO,QAAQ,KAAK,GAAG,MAAM,CAAC;AAClC;;;ACqBQ;AATD,IAAM,iBAA0C,CAAC;AAAA,EACpD;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,SAAS,kBAAkB,YAAY,EAAE;AAC/C,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACP;AAAA,QACA,WACO,QAAQ,UACL,0CACJ;AAAA,QACN,CAAC,YAAY,CAAC,YAAY,QAAQ;AAAA,QAClC,WACM,8CACA;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACL;AAER;","names":[]}
+{"version":3,"sources":["../../src/modules/modality/colors.ts"],"sourcesContent":["/**\n * Single source of truth for modality colors.\n *\n * Each modality (text/image/video/audio/realtime/embedding) maps to one\n * package theme. Class recipes are token-based, so callers should pass the\n * returned `theme` to the primitive or set `data-theme` on an ancestor.\n * Used by apps to compose model-selection buttons and static modality chips.\n * This module only owns modality color data; primitives own shape and behavior.\n */\nimport type { ThemeName } from \"../../theme.ts\";\n\nexport type Modality =\n    | \"text\"\n    | \"image\"\n    | \"video\"\n    | \"audio\"\n    | \"realtime\"\n    | \"embedding\";\n\nexport type ModalityColorSet = {\n    /** Matching package theme for surfaces/chips that should inherit this hue. */\n    theme: ThemeName;\n    /** Selected/filled state using the active theme tokens. */\n    filled: string;\n    /** Hover hint shown on the unselected button using the active theme. */\n    hover: string;\n    /** Heading text colour using the active theme. */\n    text: string;\n};\n\nconst filled = \"polli:bg-theme-bg-active polli:text-theme-text-strong\";\nconst hover =\n    \"polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong\";\nconst text = \"polli:text-theme-text-strong\";\n\n// No borders — chips and buttons in this system are borderless.\nexport const MODALITY_COLORS: Record<Modality, ModalityColorSet> = {\n    text: {\n        theme: \"blue\",\n        filled,\n        hover,\n        text,\n    },\n    image: {\n        theme: \"pink\",\n        filled,\n        hover,\n        text,\n    },\n    video: {\n        theme: \"teal\",\n        filled,\n        hover,\n        text,\n    },\n    audio: {\n        theme: \"violet\",\n        filled,\n        hover,\n        text,\n    },\n    realtime: {\n        theme: \"green\",\n        filled,\n        hover,\n        text,\n    },\n    embedding: {\n        theme: \"amber\",\n        filled,\n        hover,\n        text,\n    },\n};\n\n/** Map any human-typed category string to the canonical `Modality` key. */\nfunction normalize(category: string): Modality | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    if (\n        lower === \"text\" ||\n        lower === \"image\" ||\n        lower === \"video\" ||\n        lower === \"audio\" ||\n        lower === \"realtime\" ||\n        lower === \"embedding\"\n    ) {\n        return lower;\n    }\n    return null;\n}\n\nexport function getModalityColors(category: string): ModalityColorSet | null {\n    const key = normalize(category);\n    return key ? MODALITY_COLORS[key] : null;\n}\n"],"mappings":";AA8BA,IAAM,SAAS;AACf,IAAM,QACF;AACJ,IAAM,OAAO;AAGN,IAAM,kBAAsD;AAAA,EAC/D,MAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAGA,SAAS,UAAU,UAAmC;AAClD,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,UAAU,SAAU,QAAO;AAC/B,MAAI,UAAU,aAAc,QAAO;AACnC,MACI,UAAU,UACV,UAAU,WACV,UAAU,WACV,UAAU,WACV,UAAU,cACV,UAAU,aACZ;AACE,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,SAAS,kBAAkB,UAA2C;AACzE,QAAM,MAAM,UAAU,QAAQ;AAC9B,SAAO,MAAM,gBAAgB,GAAG,IAAI;AACxC;","names":[]}