@pollinations/ui 0.0.1 → 0.1.0-alpha.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,15 +17,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Alert: () => Alert,
   AppIcon: () => AppIcon,
   BeakerIcon: () => BeakerIcon,
   BookIcon: () => BookIcon,
   Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
   CheckIcon: () => CheckIcon,
   ChevronIcon: () => ChevronIcon,
   Chip: () => Chip,
@@ -36,21 +48,28 @@ __export(src_exports, {
   DiscordIcon: () => DiscordIcon,
   DownloadIcon: () => DownloadIcon,
   Dropdown: () => Dropdown,
+  DropdownItem: () => DropdownItem,
   ExternalLinkButton: () => ExternalLinkButton,
   ExternalLinkIcon: () => ExternalLinkIcon,
   Field: () => import_field.Field,
+  FileUpload: () => FileUpload,
   GenApiIcon: () => GenApiIcon,
   GitHubIcon: () => GitHubIcon,
   IconButton: () => IconButton,
   ImageIcon: () => ImageIcon,
   InfoTip: () => InfoTip,
+  InlineLink: () => InlineLink,
   Input: () => Input,
+  LinkCard: () => LinkCard,
   LockIcon: () => LockIcon,
   MailIcon: () => MailIcon,
+  Markdown: () => Markdown,
   McpIcon: () => McpIcon,
   MenuIcon: () => MenuIcon,
   MultiSelect: () => MultiSelect,
+  NavItem: () => NavItem,
   PeriodPicker: () => PeriodPicker,
+  Prose: () => Prose,
   ScrollArea: () => ScrollArea,
   Section: () => Section,
   Slider: () => Slider,
@@ -58,7 +77,14 @@ __export(src_exports, {
   Surface: () => Surface,
   Switch: () => Switch,
   TabButton: () => TabButton,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableHead: () => TableHead,
+  TableHeaderCell: () => TableHeaderCell,
+  TableRow: () => TableRow,
   TerminalIcon: () => TerminalIcon,
+  Textarea: () => Textarea,
   TokensIcon: () => TokensIcon,
   Tooltip: () => Tooltip,
   TrendUpIcon: () => TrendUpIcon,
@@ -68,7 +94,6 @@ __export(src_exports, {
   currentPeriod: () => currentPeriod,
   getPeriodBucketKeys: () => getPeriodBucketKeys,
   periodBucketKeyToDate: () => periodBucketKeyToDate,
-  themeColors: () => themeColors,
   themes: () => themes,
   useScrollLock: () => useScrollLock
 });
@@ -243,16 +268,47 @@ function cn2(...inputs) {
   return twMerge2((0, import_clsx2.clsx)(...inputs));
 }
 
-// src/primitives/Button.tsx
+// src/primitives/Alert.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var intentClasses = {
+  info: "polli:border-theme-border polli:bg-theme-bg-pale polli:text-theme-text-strong",
+  success: "polli:border-intent-success-border polli:bg-intent-success-bg-light polli:text-intent-success-text",
+  warning: "polli:border-intent-warning-border polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  danger: "polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
+};
+var Alert = ({
+  intent = "info",
+  title,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "div",
+  {
+    ...rest,
+    role: intent === "danger" ? "alert" : "status",
+    className: cn2(
+      "polli:rounded-xl polli:border polli:px-3 polli:py-2 polli:text-sm",
+      intentClasses[intent],
+      className
+    ),
+    children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "polli:mb-1 polli:text-xs polli:font-bold polli:uppercase polli:tracking-wide", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+    ]
+  }
+);
+
+// src/primitives/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var sizes = {
-  small: "polli:px-2 polli:pt-0.5 polli:pb-1",
-  medium: "polli:px-4 polli:pt-1.5 polli:pb-2",
-  large: "polli:px-6 polli:py-3"
+  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-[oklch(0.88_0.075_25)] polli:transition-colors"
+var intentClasses2 = {
+  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,
@@ -261,12 +317,12 @@ var buttonClasses = ({
   className,
   disabled
 }) => {
-  const colorClasses = intent ? intentClasses[intent] : themeClasses;
+  const colorClasses = intent ? intentClasses2[intent] : themeClasses;
   return cn2(
-    "polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:self-center polli:placeholder-green-950 polli:font-medium polli:leading-normal polli:box-border",
+    "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 || "medium"],
+    sizes[size || "md"],
     className
   );
 };
@@ -281,10 +337,11 @@ function Button({
   ...buttonProps
 }) {
   const Component = as || "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       "data-theme": intent ? void 0 : theme,
+      "data-intent": intent,
       className: buttonClasses({
         theme,
         intent,
@@ -299,9 +356,31 @@ function Button({
   );
 }
 
+// src/primitives/ButtonGroup.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonGroup = ({
+  wrap = true,
+  className,
+  children,
+  role = "group",
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ...rest,
+    role,
+    className: cn2(
+      "polli:flex polli:min-w-0 polli:items-center polli:gap-1.5",
+      wrap ? "polli:flex-wrap" : "polli:flex-nowrap",
+      className
+    ),
+    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_runtime4 = require("react/jsx-runtime");
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -313,7 +392,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_runtime4.jsx)(
       "path",
       {
         d: "M3 4.5 6 7.5l3-3",
@@ -328,16 +407,19 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_ru
 );
 
 // src/primitives/Chip.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = 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-[oklch(0.935_0.06_158)] polli:text-[oklch(0.46_0.13_158)]",
-  alpha: "polli:bg-[oklch(0.93_0.06_300)] polli:text-[oklch(0.42_0.18_300)]",
-  neutral: "polli:border polli:border-gray-400/70 polli:bg-gray-100/80 polli:text-gray-900"
+var intentClasses3 = {
+  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:border polli:border-gray-400/70 polli:bg-gray-100/80 polli:text-gray-900",
+  success: "polli:border polli:border-intent-success-border polli:bg-intent-success-bg-light polli:text-intent-success-text",
+  warning: "polli:border polli:border-intent-warning-border polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  danger: "polli:border polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
 };
 var Chip = ({
   theme,
@@ -347,8 +429,8 @@ var Chip = ({
   children,
   ...rest
 }) => {
-  const intentClass = intent ? intentClasses2[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const intentClass = intent ? intentClasses3[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       ...rest,
@@ -365,7 +447,7 @@ var Chip = ({
 };
 
 // src/primitives/Collapsible.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Collapsible = ({
   label,
   expanded,
@@ -377,7 +459,7 @@ var Collapsible = ({
   focusClassName,
   panelClassName = "polli:border-t polli:border-theme-border polli:px-3 polli:pt-3 polli:pb-3",
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
   "div",
   {
     className: cn2(
@@ -386,7 +468,7 @@ var Collapsible = ({
       disabled && "polli:opacity-50"
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
@@ -395,15 +477,15 @@ var Collapsible = ({
           disabled,
           onClick: onToggle,
           className: cn2(
-            "polli:w-full polli:flex polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:transition-colors",
+            "polli-control polli:w-full polli:flex polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:transition-colors",
             expanded ? "polli:rounded-t-lg" : "polli:rounded-lg",
             !disabled && hoverClassName,
             focusClassName,
             disabled ? "polli:cursor-not-allowed" : "polli:cursor-pointer"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "polli:flex-1 polli:min-w-0", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "polli:flex-1 polli:min-w-0", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               ChevronIcon,
               {
                 expanded,
@@ -413,7 +495,7 @@ var Collapsible = ({
           ]
         }
       ),
-      expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: panelClassName, children })
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: panelClassName, children })
     ]
   }
 );
@@ -423,7 +505,7 @@ var import_react3 = require("react");
 
 // src/primitives/Tooltip.tsx
 var import_react2 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var TOOLTIP_MAX_WIDTH = 288;
 var TOOLTIP_VIEWPORT_MARGIN = 12;
 var Tooltip = ({
@@ -465,14 +547,14 @@ var Tooltip = ({
     }
   };
   const triggerClassName = cn2(
-    "polli:relative polli:cursor-help polli:text-left polli:inline-flex polli:items-center",
+    "polli-control polli:relative polli:cursor-help polli:text-left polli:inline-flex polli:items-center",
     className
   );
   const cursorClass = displayContents ? "polli:contents" : "polli:cursor-help";
   const popupClasses = "polli:fixed polli:w-max polli:px-2 polli:py-1 polli:bg-theme-bg-pale polli:text-theme-text-strong polli:border polli:border-theme-border polli:text-xs polli:rounded-md polli:shadow-sm polli:z-50 polli:pointer-events-none polli:transition-opacity polli:whitespace-pre-line polli:break-words";
-  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cursorClass, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cursorClass, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         style: {
@@ -507,7 +589,7 @@ var Tooltip = ({
     style
   };
   if (triggerAs === "span") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         ref: (node) => {
@@ -518,7 +600,7 @@ var Tooltip = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       ref: (node) => {
@@ -537,7 +619,7 @@ var Tooltip = ({
 };
 
 // src/primitives/CopyButton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CopyButton({
   value,
   children,
@@ -574,19 +656,20 @@ function CopyButton({
       onCopyError?.(error);
     }
   }
-  const button = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       ...buttonProps,
       type: "button",
       onClick: handleCopy,
       className: cn2(
+        "polli-control",
         typeof className === "function" ? className(copied) : className
       ),
       children: typeof children === "function" ? children(copied) : children
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Tooltip,
     {
       triggerAs: "span",
@@ -600,7 +683,8 @@ function CopyButton({
 // src/primitives/Dialog.tsx
 var import_dialog = require("@ark-ui/react/dialog");
 var import_portal = require("@ark-ui/react/portal");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var sizeClasses = {
   sm: "polli:max-w-md",
   md: "polli:max-w-xl",
@@ -623,77 +707,83 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-  import_dialog.Dialog.Root,
-  {
-    open,
-    onOpenChange: (details) => onOpenChange?.(details.open),
-    children: [
-      trigger && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_dialog.Dialog.Trigger,
-        {
-          asChild: triggerAsChild,
-          className: triggerClassName,
-          children: trigger
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_portal.Portal, { children: [
-        showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_dialog.Dialog.Backdrop,
+}) => {
+  const contentRef = (0, import_react4.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_dialog.Dialog.Root,
+    {
+      open,
+      initialFocusEl: () => contentRef.current,
+      onOpenChange: (details) => onOpenChange?.(details.open),
+      children: [
+        trigger && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_dialog.Dialog.Trigger,
           {
-            className: cn2(
-              "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
-              backdropClassName
-            )
+            asChild: triggerAsChild,
+            className: triggerClassName,
+            children: trigger
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_dialog.Dialog.Positioner,
-          {
-            className: cn2(
-              "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
-              positionerClassName
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-              import_dialog.Dialog.Content,
-              {
-                "data-theme": theme,
-                "aria-label": ariaLabel,
-                "aria-labelledby": labelledBy,
-                className: cn2(
-                  "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg",
-                  sizeClasses[size],
-                  contentClassName
-                ),
-                children: [
-                  title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    DialogTitle,
-                    {
-                      className: cn2(
-                        "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
-                        titleClassName
-                      ),
-                      children: title
-                    }
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_portal.Portal, { children: [
+          showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_dialog.Dialog.Backdrop,
+            {
+              className: cn2(
+                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
+                backdropClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_dialog.Dialog.Positioner,
+            {
+              "data-theme": theme,
+              className: cn2(
+                "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
+                positionerClassName
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                import_dialog.Dialog.Content,
+                {
+                  ref: contentRef,
+                  "data-theme": theme,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": labelledBy,
+                  className: cn2(
+                    "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none",
+                    sizeClasses[size],
+                    contentClassName
                   ),
-                  children
-                ]
-              }
-            )
-          }
-        )
-      ] })
-    ]
-  }
-);
+                  children: [
+                    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      DialogTitle,
+                      {
+                        className: cn2(
+                          "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
+                          titleClassName
+                        ),
+                        children: title
+                      }
+                    ),
+                    children
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var DialogTitle = import_dialog.Dialog.Title;
 
 // src/primitives/Dropdown.tsx
 var import_popover = require("@ark-ui/react/popover");
 var import_portal2 = require("@ark-ui/react/portal");
-var import_react4 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-surface-white polli:shadow-lg";
+var import_react5 = require("react");
+var import_jsx_runtime10 = 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,
@@ -701,17 +791,16 @@ var Dropdown = ({
   align = "start",
   open: openProp,
   onOpenChange,
-  panelClassName,
   className
 }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react5.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_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_popover.Popover.Root,
     {
       open,
@@ -720,14 +809,14 @@ var Dropdown = ({
         placement: align === "end" ? "bottom-end" : "bottom-start"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover.Popover.Trigger, { asChild: true, children: trigger(open) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Trigger, { asChild: true, children: trigger(open) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_portal2.Portal, { 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,
             className: cn2(
               "polli:z-50 polli:overflow-hidden polli:focus:outline-none",
-              panelClassName ?? DEFAULT_PANEL,
+              DEFAULT_PANEL,
               className
             ),
             children: typeof children === "function" ? children(() => setOpen(false)) : children
@@ -738,8 +827,31 @@ var Dropdown = ({
   );
 };
 
+// src/primitives/DropdownItem.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function DropdownItem({
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Component,
+    {
+      ...Component === "button" ? { type: "button" } : void 0,
+      ...rest,
+      className: cn2(
+        "polli-control polli:flex polli:w-full polli:cursor-pointer polli:items-center polli:gap-2 polli:rounded-lg polli:bg-transparent polli:px-3 polli:py-2 polli:text-left polli:text-sm polli:font-medium polli:text-theme-text-base polli:no-underline polli:transition-colors polli:hover:bg-theme-bg-hover polli:focus-visible:bg-theme-bg-hover",
+        className
+      ),
+      children
+    }
+  );
+}
+
 // src/primitives/icons/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -748,26 +860,26 @@ var strokeProps = {
   strokeLinejoin: "round"
 };
 function AppIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2 20h20" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M2 20h20" })
   ] });
 }
 function BeakerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M9 3h6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3v6.5L4.5 18a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 14h10" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 3v6.5L4.5 18a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M7 14h10" })
   ] });
 }
 function BookIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
   ] });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -775,24 +887,24 @@ function CheckIcon(props) {
       ...strokeProps,
       strokeWidth: 2.5,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "20 6 9 17 4 12" })
     }
   );
 }
 function ClipboardIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
   ] });
 }
 function ClockIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 7v5l3 2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 7v5l3 2" })
   ] });
 }
 function DiscordIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -801,23 +913,23 @@ function DiscordIcon(props) {
   ) });
 }
 function DownloadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
   ] });
 }
 function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 17 17 7M9 7h8v8" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M7 17 17 7M9 7h8v8" }) });
 }
 function GenApiIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 3v18M16 3v18" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M8 3v18M16 3v18" })
   ] });
 }
 function GitHubIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -826,69 +938,69 @@ function GitHubIcon(props) {
   ) });
 }
 function ImageIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m21 15-5-5L5 21" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m21 15-5-5L5 21" })
   ] });
 }
 function LockIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
   ] });
 }
 function MailIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m3 7 9 7 9-7" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m3 7 9 7 9-7" })
   ] });
 }
 function McpIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 12h4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 12h4" })
   ] });
 }
 function MenuIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 }
 function TerminalIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "4 8 8 12 4 16" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "4 8 8 12 4 16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
   ] });
 }
 function TokensIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
 }
 function TrendUpIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "3 17 9 11 13 15 21 7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "15 7 21 7 21 13" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "3 17 9 11 13 15 21 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "15 7 21 7 21 13" })
   ] });
 }
 function WalletIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
   ] });
 }
 function XIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 
 // src/primitives/ExternalLinkButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ExternalLinkButton = ({
   theme,
   href,
-  size = "medium",
+  size = "md",
   className,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
   Button,
   {
     as: "a",
@@ -899,8 +1011,8 @@ var ExternalLinkButton = ({
     size,
     className: cn2("polli:gap-2", className),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ExternalLinkIcon,
         {
           className: "polli:h-4 polli:w-4 polli:shrink-0 polli:opacity-60",
@@ -914,10 +1026,48 @@ var ExternalLinkButton = ({
 // src/primitives/Field.tsx
 var import_field = require("@ark-ui/react/field");
 
+// src/primitives/FileUpload.tsx
+var import_react6 = require("react");
+
+// src/lib/partition-files.ts
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  return tokens.some((token) => {
+    if (token.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(token.toLowerCase());
+    }
+    if (token.endsWith("/*")) {
+      const prefix = token.slice(0, token.length - 1);
+      return file.type.startsWith(prefix);
+    }
+    return file.type === token;
+  });
+}
+function partitionFiles(incoming, current, { maxFiles, maxSizeBytes, accept }) {
+  const accepted = [];
+  const rejected = [];
+  let slots = Math.max(0, maxFiles - current.length);
+  for (const file of incoming) {
+    if (!matchesAccept(file, accept)) {
+      rejected.push({ file, reason: "type" });
+    } else if (file.size > maxSizeBytes) {
+      rejected.push({ file, reason: "size" });
+    } else if (slots <= 0) {
+      rejected.push({ file, reason: "count" });
+    } else {
+      accepted.push(file);
+      slots -= 1;
+    }
+  }
+  return { accepted, rejected };
+}
+
 // src/primitives/IconButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var intentClasses3 = {
-  danger: "polli:bg-intent-danger-bg-light polli:hover:bg-[oklch(0.88_0.075_25)] polli:text-intent-danger-text"
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var intentClasses4 = {
+  danger: "polli:bg-intent-danger-bg-light polli:hover:bg-intent-danger-bg-hover polli:text-intent-danger-text"
 };
 var defaultClasses = "polli:bg-theme-bg-active polli:hover:bg-theme-bg-hover polli:text-theme-text-soft polli:hover:text-theme-text-strong";
 var IconButton = ({
@@ -926,73 +1076,435 @@ var IconButton = ({
   onClick,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "button",
   {
     type: "button",
     onClick,
     title,
     "aria-label": title,
+    "data-intent": intent,
     className: cn2(
-      "polli:inline-flex polli:h-6 polli:w-6 polli:cursor-pointer polli:items-center polli:justify-center polli:rounded polli:transition-colors",
-      intent ? intentClasses3[intent] : defaultClasses,
+      "polli-control polli:inline-flex polli:h-6 polli:w-6 polli:cursor-pointer polli:items-center polli:justify-center polli:rounded polli:transition-colors",
+      intent ? intentClasses4[intent] : defaultClasses,
       className
     ),
     children
   }
 );
 
+// src/primitives/FileUpload.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var PREVIEWABLE_IMAGE_TYPES = /* @__PURE__ */ new Set([
+  "image/gif",
+  "image/jpeg",
+  "image/png",
+  "image/webp"
+]);
+var PREVIEW_SIZE = 64;
+function isPreviewableImage(file) {
+  return PREVIEWABLE_IMAGE_TYPES.has(file.type);
+}
+function PreviewPlaceholder() {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "polli:flex polli:h-16 polli:w-16 polli:items-center polli:justify-center polli:rounded-lg polli:bg-theme-bg-active polli:text-theme-text-soft", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageIcon, { className: "polli:h-5 polli:w-5" }) });
+}
+function FilePreview({ file }) {
+  const canvasRef = (0, import_react6.useRef)(null);
+  const [canPreview, setCanPreview] = (0, import_react6.useState)(
+    () => isPreviewableImage(file)
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!isPreviewableImage(file)) {
+      setCanPreview(false);
+      return;
+    }
+    let cancelled = false;
+    setCanPreview(true);
+    async function drawPreview() {
+      try {
+        const bitmap = await createImageBitmap(file);
+        if (cancelled) {
+          bitmap.close();
+          return;
+        }
+        const canvas = canvasRef.current;
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) {
+          bitmap.close();
+          setCanPreview(false);
+          return;
+        }
+        canvas.width = PREVIEW_SIZE;
+        canvas.height = PREVIEW_SIZE;
+        const scale = Math.max(
+          PREVIEW_SIZE / bitmap.width,
+          PREVIEW_SIZE / bitmap.height
+        );
+        const width = bitmap.width * scale;
+        const height = bitmap.height * scale;
+        const x = (PREVIEW_SIZE - width) / 2;
+        const y = (PREVIEW_SIZE - height) / 2;
+        context.clearRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
+        context.drawImage(bitmap, x, y, width, height);
+        bitmap.close();
+      } catch {
+        if (!cancelled) setCanPreview(false);
+      }
+    }
+    void drawPreview();
+    return () => {
+      cancelled = true;
+    };
+  }, [file]);
+  if (!canPreview) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PreviewPlaceholder, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      role: "img",
+      "aria-label": file.name,
+      className: "polli:h-16 polli:w-16 polli:rounded-lg",
+      width: PREVIEW_SIZE,
+      height: PREVIEW_SIZE
+    }
+  );
+}
+function FileUpload({
+  value,
+  onChange,
+  onReject,
+  maxFiles = 4,
+  maxSizeBytes = 10 * 1024 * 1024,
+  accept = "image/*",
+  disabled = false,
+  theme,
+  className
+}) {
+  (0, import_react6.useEffect)(() => {
+    const prevent = (event) => event.preventDefault();
+    document.addEventListener("dragover", prevent);
+    document.addEventListener("drop", prevent);
+    return () => {
+      document.removeEventListener("dragover", prevent);
+      document.removeEventListener("drop", prevent);
+    };
+  }, []);
+  function addFiles(incoming) {
+    if (disabled || incoming.length === 0) return;
+    const { accepted, rejected } = partitionFiles(incoming, value, {
+      maxFiles,
+      maxSizeBytes,
+      accept
+    });
+    if (accepted.length > 0) onChange([...value, ...accepted]);
+    if (rejected.length > 0) onReject?.(rejected);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      "data-theme": theme,
+      className: cn2("polli:flex polli:flex-col polli:gap-3", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "label",
+          {
+            className: cn2(
+              "polli-control polli:flex polli:flex-col polli:items-center polli:justify-center polli:gap-2",
+              "polli:rounded-xl polli:border polli:border-dashed polli:border-theme-border",
+              "polli:bg-theme-bg-pale polli:px-4 polli:py-6 polli:text-center polli:text-sm",
+              "polli:text-theme-text-soft polli:transition-colors",
+              disabled ? "polli:cursor-not-allowed polli:opacity-50" : "polli:cursor-pointer polli:hover:bg-theme-bg-hover"
+            ),
+            onDragOver: (e) => e.preventDefault(),
+            onDrop: (e) => {
+              e.preventDefault();
+              if (disabled) return;
+              addFiles(Array.from(e.dataTransfer.files));
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageIcon, { className: "polli:h-6 polli:w-6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+                "Drag images here or",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:underline", children: "browse" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "input",
+                {
+                  type: "file",
+                  accept,
+                  multiple: maxFiles > 1,
+                  disabled,
+                  className: "polli:sr-only",
+                  onChange: (e) => {
+                    addFiles(Array.from(e.target.files ?? []));
+                    e.target.value = "";
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "polli:m-0 polli:flex polli:flex-wrap polli:gap-3 polli:p-0", children: value.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "li",
+          {
+            className: "polli:relative polli:flex polli:list-none polli:flex-col polli:gap-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FilePreview, { file }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:max-w-16 polli:truncate polli:text-xs polli:text-theme-text-muted", children: file.name }),
+              !disabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "polli:absolute polli:-top-2 polli:-right-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                IconButton,
+                {
+                  intent: "danger",
+                  title: `Remove ${file.name}`,
+                  onClick: () => onChange(
+                    value.filter(
+                      (_, i) => i !== index
+                    )
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { className: "polli:h-3 polli:w-3" })
+                }
+              ) })
+            ]
+          },
+          `${file.name}-${index}`
+        )) })
+      ]
+    }
+  );
+}
+
 // src/primitives/InfoTip.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var InfoTip = ({
   text,
   content,
   label = "More info"
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "polli:inline-flex polli:h-3.5 polli:w-3.5 polli:items-center polli:justify-center polli:rounded-full polli:border polli:border-theme-border polli:bg-theme-bg-active polli:font-bold polli:text-micro polli:text-theme-text-strong polli:transition-colors", children: "i" }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "polli:inline-flex polli:h-3.5 polli:w-3.5 polli:items-center polli:justify-center polli:rounded-full polli:border polli:border-theme-border polli:bg-theme-bg-active polli:font-bold polli:text-micro polli:text-theme-text-strong polli:transition-colors", children: "i" }) });
+
+// src/primitives/InlineLink.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function isExternalHref(href) {
+  return typeof href === "string" && /^https?:\/\//.test(href);
+}
+function InlineLink({
+  as,
+  theme,
+  external,
+  showIcon = true,
+  className,
+  children,
+  ...linkProps
+}) {
+  const Component = as || "a";
+  const isExternal = external ?? isExternalHref(linkProps.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Component,
+    {
+      "data-theme": theme,
+      target: isExternal ? "_blank" : void 0,
+      rel: isExternal ? "noopener noreferrer" : void 0,
+      className: cn2(
+        "polli-control polli:inline-flex polli:items-center polli:gap-1 polli:rounded-sm polli:font-semibold polli:text-theme-text-strong",
+        "polli:underline polli:decoration-theme-border polli:decoration-2 polli:underline-offset-3",
+        "polli:transition-colors polli:hover:text-theme-text-soft polli:hover:decoration-theme-text-soft",
+        className
+      ),
+      ...linkProps,
+      children: [
+        children,
+        showIcon && isExternal && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ExternalLinkIcon,
+          {
+            "aria-hidden": "true",
+            className: "polli:h-3.5 polli:w-3.5 polli:shrink-0 polli:opacity-65"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/primitives/Input.tsx
+var import_react7 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Input = (0, import_react7.forwardRef)(
+  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "input",
+    {
+      ref,
+      "data-error": error ? "true" : void 0,
+      className: cn2(
+        "polli-input polli:px-3 polli:py-2 polli:border polli:rounded-lg",
+        "polli:text-gray-950",
+        "polli:transition-colors",
+        "polli:disabled:opacity-50 polli:disabled:cursor-not-allowed",
+        hideNumberSteppers && "polli-input-number-clean",
+        className
+      ),
+      ...props
+    }
+  )
+);
+
+// src/primitives/Surface.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var variantClasses = {
+  panel: "polli:rounded-2xl polli:border polli:border-theme-border polli:bg-theme-bg-subtle polli:p-6",
+  card: "polli:rounded-xl polli:bg-surface-white polli:p-4",
+  "card-themed": "polli:rounded-xl polli:bg-theme-bg-pale polli:p-4"
+};
+var Surface = ({
+  theme,
+  variant = "card",
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  "div",
+  {
+    ...rest,
+    "data-theme": theme,
+    className: cn2("polli:min-w-0", variantClasses[variant], className),
+    children
+  }
+);
+
+// src/primitives/LinkCard.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function isExternalHref2(href) {
+  return typeof href === "string" && /^https?:\/\//.test(href);
+}
+function LinkCard({
+  as,
+  theme,
+  external,
+  showIcon = true,
+  className,
+  surfaceClassName,
+  children,
+  ...linkProps
+}) {
+  const Component = as || "a";
+  const isExternal = external ?? isExternalHref2(linkProps.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Component,
+    {
+      "data-theme": theme,
+      target: isExternal ? "_blank" : void 0,
+      rel: isExternal ? "noopener noreferrer" : void 0,
+      className: cn2(
+        "polli:group polli:block polli:h-full polli:rounded-xl polli:outline-none",
+        className
+      ),
+      ...linkProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        Surface,
+        {
+          theme,
+          variant: "card",
+          className: cn2(
+            "polli:relative polli:flex polli:h-full polli:flex-col polli:gap-2 polli:bg-white/80 polli:p-5",
+            showIcon && isExternal && "polli:pr-10",
+            "polli:transition polli:group-hover:-translate-y-0.5 polli:group-hover:bg-white/95",
+            "polli:group-focus-visible:ring-2 polli:group-focus-visible:ring-theme-border",
+            surfaceClassName
+          ),
+          children: [
+            showIcon && isExternal && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              ExternalLinkIcon,
+              {
+                "aria-hidden": "true",
+                className: "polli:absolute polli:top-4 polli:right-4 polli:h-3.5 polli:w-3.5 polli:text-theme-text-soft"
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
 
-// src/primitives/Input.tsx
-var import_react5 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Input = (0, import_react5.forwardRef)(
-  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "input",
+// src/primitives/Markdown.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var components = {
+  ul: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "ul",
+    {
+      className: "polli:flex polli:min-w-0 polli:list-disc polli:flex-col polli:gap-1 polli:pl-5 polli:marker:text-theme-text-muted",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "ol",
+    {
+      className: "polli:flex polli:min-w-0 polli:list-decimal polli:flex-col polli:gap-1 polli:pl-5 polli:marker:text-theme-text-muted",
+      ...props
+    }
+  ),
+  p: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "polli:mb-2 polli:last:mb-0", ...props }),
+  strong: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "strong",
+    {
+      className: "polli:font-semibold polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "code",
+    {
+      className: "polli:break-words polli:rounded polli:bg-theme-bg-subtle polli:px-1 polli:py-0.5 polli:font-mono polli:text-xs",
+      ...props
+    }
+  ),
+  a: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "a",
+    {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "polli-control polli:rounded-sm polli:font-semibold polli:text-theme-text-strong polli:underline polli:underline-offset-2",
+      ...props
+    }
+  )
+};
+function Markdown({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
     {
-      ref,
       className: cn2(
-        "polli:px-3 polli:py-2 polli:border polli:rounded-lg",
-        "polli:disabled:opacity-50 polli:disabled:cursor-not-allowed",
-        error ? "polli:border-red-400" : "polli:border-gray-300",
-        hideNumberSteppers && "polli-input-number-clean",
+        "polli:min-w-0 polli:font-body polli:leading-relaxed",
         className
       ),
-      ...props
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components, children })
     }
-  )
-);
+  );
+}
 
 // src/primitives/ScrollArea.tsx
-var import_react6 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var axisClasses = {
   y: "polli:overflow-y-auto polli:overflow-x-hidden",
-  x: "polli:overflow-x-auto polli:overflow-y-hidden",
-  both: "polli:overflow-auto"
+  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_react6.forwardRef)(
-  ({ theme, axis = "y", hideDelayMs = 2e3, className, children, ...rest }, externalRef) => {
-    const innerRef = (0, import_react6.useRef)(null);
-    const setRef = (0, import_react6.useCallback)(
+var ScrollArea = (0, import_react8.forwardRef)(
+  ({ theme, axis = "y", className, children, ...rest }, externalRef) => {
+    const innerRef = (0, import_react8.useRef)(null);
+    const setRef = (0, import_react8.useCallback)(
       (node) => {
         innerRef.current = node;
         assignRef(externalRef, node);
       },
       [externalRef]
     );
-    (0, import_react6.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       const element = innerRef.current;
       if (!element) return;
       let hideTimer = null;
@@ -1012,7 +1524,7 @@ var ScrollArea = (0, import_react6.forwardRef)(
       };
       const scheduleHide = () => {
         clearHideTimer();
-        hideTimer = window.setTimeout(hide, hideDelayMs);
+        hideTimer = window.setTimeout(hide, 2e3);
       };
       const handleInteraction = () => {
         show();
@@ -1042,15 +1554,15 @@ var ScrollArea = (0, import_react6.forwardRef)(
         element.removeEventListener("focusin", handleInteraction);
         element.removeEventListener("focusout", scheduleHide);
       };
-    }, [hideDelayMs]);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         ...rest,
         ref: setRef,
         "data-theme": theme,
         className: cn2(
-          "polli-scrollbar-subtle",
+          "polli-scrollbar-subtle polli:min-w-0 polli:max-w-full",
           axisClasses[axis],
           className
         ),
@@ -1062,9 +1574,9 @@ var ScrollArea = (0, import_react6.forwardRef)(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/MultiSelect.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TRIGGER_BASE = "polli:inline-flex polli:min-h-8 polli:min-w-[140px] polli:items-center polli:gap-2 polli:rounded-full polli:border polli:px-3 polli:py-1.5 polli:text-xs polli:font-medium polli:transition-all polli:duration-200";
-var ROW_BASE = "polli:flex polli:w-full polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:text-xs polli:transition-colors";
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var TRIGGER_BASE = "polli-control polli:inline-flex polli:min-h-8 polli:min-w-[140px] polli:items-center polli:gap-2 polli:rounded-full polli:border polli:px-3 polli:py-1.5 polli:text-xs polli:font-medium polli:transition-all polli:duration-200";
+var ROW_BASE = "polli-control polli:flex polli:w-full polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:text-xs polli:transition-colors";
 var CHECK_BASE = "polli:flex polli:h-4 polli:w-4 polli:flex-shrink-0 polli:items-center polli:justify-center polli:rounded polli:border polli:border-theme-border polli:text-xs";
 var MultiSelect = ({
   options,
@@ -1087,16 +1599,16 @@ var MultiSelect = ({
   };
   const selectAll = () => onChange([]);
   const displayText = disabled ? disabledText : isAllSelected ? "All" : `${selected.length} selected`;
-  const labelNode = label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
+  const labelNode = label ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         "data-theme": theme,
         className: "polli:group polli:relative polli:flex polli:items-center polli:gap-2",
         children: [
           labelNode,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "button",
             {
               type: "button",
@@ -1106,8 +1618,8 @@ var MultiSelect = ({
                 "polli:cursor-not-allowed polli:border-theme-border polli:bg-theme-bg-subtle polli:opacity-60"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   ChevronIcon,
                   {
                     expanded: false,
@@ -1117,25 +1629,25 @@ var MultiSelect = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:pointer-events-none polli:absolute polli:-top-8 polli:left-1/2 polli:z-[100] polli:-translate-x-1/2 polli:whitespace-nowrap polli:rounded-md polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:px-2 polli:py-1 polli:text-xs polli:text-theme-text-strong polli:opacity-0 polli:shadow-sm polli:transition-opacity polli:group-hover:opacity-100", children: "No items available" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:pointer-events-none polli:absolute polli:-top-8 polli:left-1/2 polli:z-[100] polli:-translate-x-1/2 polli:whitespace-nowrap polli:rounded-md polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:px-2 polli:py-1 polli:text-xs polli:text-theme-text-strong polli:opacity-0 polli:shadow-sm polli:transition-opacity polli:group-hover:opacity-100", children: "No items available" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:items-center polli:gap-2",
       children: [
         labelNode,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Dropdown,
           {
             theme,
             align,
             className: "polli:min-w-[320px]",
-            trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "button",
               {
                 type: "button",
@@ -1144,7 +1656,7 @@ var MultiSelect = ({
                   open ? "polli:border-theme-border polli:bg-theme-bg-active" : "polli:border-theme-border polli:bg-theme-bg-subtle polli:hover:bg-theme-bg-pale"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "span",
                     {
                       className: cn2(
@@ -1154,7 +1666,7 @@ var MultiSelect = ({
                       children: displayText
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     ChevronIcon,
                     {
                       expanded: open,
@@ -1167,8 +1679,8 @@ var MultiSelect = ({
                 ]
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ScrollArea, { theme, className: "polli:max-h-64", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ScrollArea, { theme, className: "polli:max-h-64", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1178,7 +1690,7 @@ var MultiSelect = ({
                     isAllSelected ? "polli:bg-theme-bg-active polli:font-medium polli:text-theme-text-strong" : "polli:text-theme-text-base polli:hover:bg-theme-bg-subtle"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       "span",
                       {
                         className: cn2(
@@ -1194,7 +1706,7 @@ var MultiSelect = ({
               ),
               options.map((opt) => {
                 const isChecked = selected.includes(opt.value);
-                return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -1204,7 +1716,7 @@ var MultiSelect = ({
                       isChecked ? "polli:bg-theme-bg-active polli:text-theme-text-strong" : "polli:text-theme-text-base polli:hover:bg-theme-bg-subtle"
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "span",
                         {
                           className: cn2(
@@ -1214,7 +1726,7 @@ var MultiSelect = ({
                           children: isChecked && "\u2713"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:whitespace-nowrap", children: opt.label })
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:whitespace-nowrap", children: opt.label })
                     ]
                   },
                   opt.value
@@ -1228,26 +1740,74 @@ var MultiSelect = ({
   );
 };
 
+// src/primitives/NavItem.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var base = "polli-control polli:flex polli:items-center polli:gap-2 polli:rounded-full polli:px-3 polli:py-2 polli:text-left polli:text-sm polli:font-medium polli:whitespace-nowrap polli:transition-colors";
+var activeClasses = "polli:bg-theme-bg-active polli:text-theme-text-strong";
+var inactiveClasses = "polli:text-gray-800 polli:hover:bg-white/60 polli:hover:text-gray-950";
+var dotClasses = "polli:h-2.5 polli:w-2.5 polli:shrink-0 polli:rounded-full polli:bg-theme-bg-hover polli:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]";
+function NavItem({
+  as,
+  theme,
+  active = false,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    Component,
+    {
+      "data-theme": theme,
+      "aria-current": active ? "page" : void 0,
+      className: cn2(
+        base,
+        active ? activeClasses : inactiveClasses,
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", className: dotClasses }),
+        children
+      ]
+    }
+  );
+}
+
 // src/primitives/PeriodPicker.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/primitives/TabButton.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var sizeClasses2 = {
-  medium: "polli:px-4 polli:py-1.5 polli:text-base",
-  small: "polli:px-3 polli:py-1.5 polli:text-sm"
+  md: "polli:px-4 polli:py-1.5 polli:text-base",
+  sm: "polli:px-3 polli:py-1.5 polli:text-sm"
+};
+var variantClasses2 = {
+  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 = "medium",
+  size = "md",
+  variant = "default",
   ariaLabel,
   disabled = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const classes = variantClasses2[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "button",
     {
       type: "button",
@@ -1257,8 +1817,9 @@ var TabButton = ({
       "aria-pressed": active,
       disabled,
       className: cn2(
-        "polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:border polli:font-medium polli:leading-normal polli:transition-all polli:duration-200",
-        active ? "polli:bg-theme-bg-active polli:text-theme-text-strong polli:border-theme-border" : "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:border-theme-border polli:hover:bg-theme-bg-active",
+        "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",
         sizeClasses2[size],
         className
@@ -1269,7 +1830,7 @@ var TabButton = ({
 };
 
 // src/primitives/PeriodPicker.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTH_LABELS = [
   "Jan",
@@ -1285,7 +1846,7 @@ var MONTH_LABELS = [
   "Nov",
   "Dec"
 ];
-var NAV_BUTTON = "polli:rounded-full polli:px-2 polli:py-1 polli:text-xs polli:font-semibold polli:text-theme-text-base polli:transition-colors polli:hover:bg-theme-bg-subtle";
+var NAV_BUTTON = "polli-control polli:rounded-full polli:px-2 polli:py-1 polli:text-xs polli:font-semibold polli:text-theme-text-base polli:transition-colors polli:hover:bg-theme-bg-subtle";
 function addUtcMonths2(date, months) {
   return new Date(
     Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1)
@@ -1322,13 +1883,13 @@ var PeriodPicker = ({
   minDate = /* @__PURE__ */ new Date(0),
   maxDate
 }) => {
-  const [open, setOpen] = (0, import_react7.useState)(false);
-  const [viewDate, setViewDate] = (0, import_react7.useState)(() => periodDate(value));
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react9.useState)(() => periodDate(value));
   const { granularity, period } = value;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setViewDate(periodDate({ granularity, period }));
   }, [granularity, period]);
-  const dates = (0, import_react7.useMemo)(() => monthGridDates(viewDate), [viewDate]);
+  const dates = (0, import_react9.useMemo)(() => monthGridDates(viewDate), [viewDate]);
   const selectedWindow = periodToWindow(value);
   const today = startOfUtcDay(maxDate);
   const previousViewDate = value.granularity === "month" ? addUtcMonths2(viewDate, -12) : addUtcMonths2(viewDate, -1);
@@ -1349,14 +1910,14 @@ var PeriodPicker = ({
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:flex-wrap polli:items-center polli:gap-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
-          (granularity2) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
+          (granularity2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TabButton,
             {
               active: value.granularity === granularity2,
@@ -1366,33 +1927,33 @@ var PeriodPicker = ({
             granularity2
           )
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Dropdown,
           {
             theme,
             open,
             onOpenChange: setOpen,
             className: "polli:w-[304px] polli:rounded-xl polli:p-3",
-            trigger: (isOpen) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            trigger: (isOpen) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "button",
               {
                 type: "button",
                 "aria-label": `Select period, current ${formatPeriodLabel(value)}`,
                 className: cn2(
-                  "polli:inline-flex polli:min-w-[150px] polli:items-center polli:justify-between polli:gap-2 polli:rounded-full polli:border polli:px-4 polli:pt-1.5 polli:pb-2 polli:text-left polli:text-base polli:font-medium polli:leading-normal",
+                  "polli-control polli:inline-flex polli:min-w-[150px] polli:items-center polli:justify-between polli:gap-2 polli:rounded-full polli:border polli:px-4 polli:pt-1.5 polli:pb-2 polli:text-left polli:text-base polli:font-medium polli:leading-normal",
                   "polli:border-theme-border polli:bg-theme-bg-subtle polli:text-theme-text-base",
                   "polli:transition-all polli:duration-200 polli:ease-out polli:hover:bg-theme-bg-pale",
                   isOpen && "polli:bg-theme-bg-active polli:text-theme-text-strong polli:shadow-sm"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: formatPeriodLabel(value) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronIcon, { expanded: isOpen })
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: formatPeriodLabel(value) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronIcon, { expanded: isOpen })
                 ]
               }
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1406,8 +1967,8 @@ var PeriodPicker = ({
                     children: "<"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1422,7 +1983,7 @@ var PeriodPicker = ({
                   }
                 )
               ] }),
-              value.granularity === "month" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:grid polli:grid-cols-3 polli:gap-1.5", children: MONTH_LABELS.map((label, monthIndex) => {
+              value.granularity === "month" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:grid polli:grid-cols-3 polli:gap-1.5", children: MONTH_LABELS.map((label, monthIndex) => {
                 const date = new Date(
                   Date.UTC(
                     viewDate.getUTCFullYear(),
@@ -1441,7 +2002,7 @@ var PeriodPicker = ({
                   year: "numeric"
                 });
                 const selected = date.getUTCFullYear() === selectedWindow.start.getUTCFullYear() && date.getUTCMonth() === selectedWindow.start.getUTCMonth();
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1449,7 +2010,7 @@ var PeriodPicker = ({
                     disabled: !selectable,
                     onClick: () => selectDate(date),
                     className: cn2(
-                      "polli:rounded-lg polli:px-3 polli:py-2 polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
+                      "polli-control polli:rounded-lg polli:px-3 polli:py-2 polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
                       selected ? "polli:bg-theme-bg-active polli:text-theme-text-strong" : "polli:text-gray-700 polli:hover:bg-theme-bg-subtle",
                       !selectable && "polli:cursor-not-allowed polli:text-gray-300 polli:hover:bg-transparent"
                     ),
@@ -1457,9 +2018,9 @@ var PeriodPicker = ({
                   },
                   label
                 );
-              }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:mb-1 polli:grid polli:grid-cols-7 polli:gap-1 polli:text-center polli:text-micro polli:font-bold polli:uppercase polli:text-gray-400", children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: label }, label)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:grid polli:grid-cols-7 polli:gap-1", children: dates.map((date) => {
+              }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:mb-1 polli:grid polli:grid-cols-7 polli:gap-1 polli:text-center polli:text-micro polli:font-bold polli:uppercase polli:text-gray-400", children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: label }, label)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:grid polli:grid-cols-7 polli:gap-1", children: dates.map((date) => {
                   const inCurrentMonth = date.getUTCMonth() === viewDate.getUTCMonth();
                   const selectable = isPeriodSelectable(
                     periodFromDate(value.granularity, date),
@@ -1477,7 +2038,7 @@ var PeriodPicker = ({
                     }
                   )}`;
                   const selected = value.granularity === "day" ? sameUtcDay(date, selectedWindow.start) : date >= selectedWindow.start && date < selectedWindow.end;
-                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1485,7 +2046,7 @@ var PeriodPicker = ({
                       disabled: !selectable,
                       onClick: () => selectDate(date),
                       className: cn2(
-                        "polli:aspect-square polli:rounded-lg polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
+                        "polli-control polli:aspect-square polli:rounded-lg polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
                         !inCurrentMonth && "polli:text-gray-300",
                         sameUtcDay(date, today) && "polli:ring-1 polli:ring-theme-border",
                         selected ? "polli:bg-theme-bg-active polli:text-theme-text-strong" : "polli:text-gray-700 polli:hover:bg-theme-bg-subtle",
@@ -1505,58 +2066,189 @@ var PeriodPicker = ({
   );
 };
 
-// src/primitives/Surface.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var variantClasses = {
-  panel: "polli:rounded-2xl polli:border polli:border-theme-border polli:bg-theme-bg-subtle polli:p-6",
-  card: "polli:rounded-xl polli:bg-surface-white polli:p-4",
-  "card-themed": "polli:rounded-xl polli:bg-theme-bg-pale polli:p-4"
+// src/primitives/Prose.tsx
+var import_react_markdown2 = __toESM(require("react-markdown"), 1);
+var import_rehype_slug = __toESM(require("rehype-slug"), 1);
+var import_remark_gfm2 = __toESM(require("remark-gfm"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var components2 = {
+  h1: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "h1",
+    {
+      className: "polli:mt-0 polli:mb-5 polli:break-words polli:font-heading polli:text-4xl polli:leading-none polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  h2: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "h2",
+    {
+      className: "polli:mt-8 polli:mb-3 polli:break-words polli:font-subheading polli:text-2xl polli:leading-tight polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  h3: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "h3",
+    {
+      className: "polli:mt-6 polli:mb-2 polli:break-words polli:font-subheading polli:text-xl polli:leading-tight polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  p: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "polli:my-4 polli:leading-relaxed", ...props }),
+  a: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "a",
+    {
+      className: "polli-control polli:rounded-sm polli:font-semibold polli:text-theme-text-strong polli:underline polli:decoration-theme-border polli:decoration-2 polli:underline-offset-3 polli:hover:decoration-theme-text-soft",
+      ...props
+    }
+  ),
+  ul: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "ul",
+    {
+      className: "polli:my-4 polli:list-disc polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "ol",
+    {
+      className: "polli:my-4 polli:list-decimal polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  blockquote: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "blockquote",
+    {
+      className: "polli:my-4 polli:border-l-4 polli:border-theme-border polli:pl-4 polli:text-theme-text-soft",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "code",
+    {
+      className: "polli:rounded polli:bg-theme-bg-active polli:px-1 polli:py-0.5 polli:font-pixel polli:text-sm",
+      ...props
+    }
+  ),
+  pre: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "pre",
+    {
+      className: "polli:my-4 polli:overflow-x-auto polli:rounded-lg polli:bg-theme-bg-active polli:p-4",
+      ...props
+    }
+  ),
+  table: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "table",
+    {
+      className: "polli:my-4 polli:w-full polli:border-collapse polli:text-sm",
+      ...props
+    }
+  ),
+  th: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "th",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2 polli:text-left polli:font-semibold",
+      ...props
+    }
+  ),
+  td: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "td",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2",
+      ...props
+    }
+  ),
+  hr: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("hr", { className: "polli:my-6 polli:border-theme-border", ...props })
 };
-var Surface = ({
-  theme,
-  variant = "card",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  "div",
-  {
-    ...rest,
-    "data-theme": theme,
-    className: cn2("polli:min-w-0", variantClasses[variant], className),
-    children
-  }
-);
+function Prose({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      className: cn2(
+        "polli:font-body polli:text-theme-text-base polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react_markdown2.default,
+        {
+          remarkPlugins: [import_remark_gfm2.default],
+          rehypePlugins: [import_rehype_slug.default],
+          components: components2,
+          children
+        }
+      )
+    }
+  );
+}
 
 // src/primitives/Section.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Section = ({
   title,
   theme,
   id,
   framed = false,
+  intro,
   action,
   actionClassName,
+  panelClassName,
+  titleClassName,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("section", { id, className: cn2("scroll-mt-10 space-y-2", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "h2",
-      {
-        "data-theme": theme,
-        className: "text-left text-lg font-semibold sm:text-xl text-theme-text-strong",
-        children: title
-      }
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  "section",
+  {
+    id,
+    className: cn2(
+      "polli:flex polli:scroll-mt-10 polli:flex-col polli:gap-4",
+      className
     ),
-    action && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn2("shrink-0", actionClassName), children: action })
-  ] }),
-  framed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Surface, { variant: "panel", theme, children }) : children
-] });
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "polli:flex polli:flex-wrap polli:items-center polli:justify-between polli:gap-3 polli:px-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "h2",
+          {
+            "data-theme": theme,
+            className: cn2(
+              "polli:text-left polli:font-subheading polli:text-2xl polli:leading-tight polli:text-theme-text-strong",
+              titleClassName
+            ),
+            children: title
+          }
+        ),
+        action && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn2("polli:shrink-0", actionClassName), children: action })
+      ] }),
+      framed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        Surface,
+        {
+          variant: "panel",
+          theme,
+          className: cn2(
+            "polli:flex polli:flex-col polli:gap-5",
+            panelClassName
+          ),
+          children: [
+            intro && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "polli:max-w-2xl polli:text-theme-text-base", children: intro }),
+            children
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        intro && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "div",
+          {
+            "data-theme": theme,
+            className: "polli:max-w-2xl polli:text-theme-text-base",
+            children: intro
+          }
+        ),
+        children
+      ] })
+    ]
+  }
+);
 
 // src/primitives/Slider.tsx
-var import_react8 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var toNumber = (value) => {
   if (typeof value === "number") return value;
   if (typeof value !== "string" || value.trim() === "") return void 0;
@@ -1583,7 +2275,7 @@ var getProgressPercent = ({
     (numericValue - numericMin) / (numericMax - numericMin) * 100
   );
 };
-var Slider = (0, import_react8.forwardRef)(
+var Slider = (0, import_react10.forwardRef)(
   ({ className, defaultValue, max, min, progress, style, value, ...props }, ref) => {
     const progressPercent = getProgressPercent({
       progress,
@@ -1596,7 +2288,7 @@ var Slider = (0, import_react8.forwardRef)(
       ...style,
       ...progressPercent === void 0 ? null : { "--polli-slider-progress": `${progressPercent}%` }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "input",
       {
         ref,
@@ -1614,7 +2306,7 @@ var Slider = (0, import_react8.forwardRef)(
 );
 
 // src/primitives/StatCard.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var StatCard = ({
   label,
   value,
@@ -1624,8 +2316,8 @@ var StatCard = ({
   labelClassName,
   valueClassName,
   detailClassName
-}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn2(
@@ -1635,7 +2327,7 @@ var StatCard = ({
       children: label
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn2(
@@ -1645,7 +2337,7 @@ var StatCard = ({
       children: value
     }
   ),
-  detail && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  detail && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn2(
@@ -1658,11 +2350,11 @@ var StatCard = ({
 ] });
 
 // src/primitives/Switch.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var trackClasses = {
   off: "polli:bg-gray-200",
-  on: "polli:bg-[oklch(0.88_0.12_158)]",
-  invalid: "polli:bg-[oklch(0.88_0.12_25)]"
+  on: "polli:bg-intent-success-bg-light",
+  invalid: "polli:bg-intent-danger-bg-light"
 };
 var Switch = ({
   checked,
@@ -1674,7 +2366,7 @@ var Switch = ({
 }) => {
   const effectiveStatus = status ?? (checked ? "on" : "off");
   const resolvedAriaLabel = ariaLabel ?? (checked ? "Turn off toggle" : "Turn on toggle");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "button",
     {
       type: "button",
@@ -1684,11 +2376,11 @@ var Switch = ({
       onClick: () => onChange(!checked),
       disabled,
       className: cn2(
-        "polli:relative polli:inline-flex polli:h-7 polli:w-12 polli:shrink-0 polli:items-center polli:rounded-full polli:transition polli:disabled:cursor-not-allowed polli:disabled:opacity-60",
+        "polli-control polli:relative polli:inline-flex polli:h-7 polli:w-12 polli:shrink-0 polli:items-center polli:rounded-full polli:transition polli:disabled:cursor-not-allowed polli:disabled:opacity-60",
         trackClasses[effectiveStatus],
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "span",
         {
           className: cn2(
@@ -1701,6 +2393,142 @@ var Switch = ({
   );
 };
 
+// src/primitives/Table.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var alignClasses = {
+  left: "polli:text-left",
+  center: "polli:text-center",
+  right: "polli:text-right"
+};
+var rowIntentClasses = {
+  default: "",
+  success: "polli:bg-intent-success-bg-light/55",
+  warning: "polli:bg-intent-warning-bg-light/65",
+  danger: "polli:bg-intent-danger-bg-light/65"
+};
+var Table = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  "table",
+  {
+    ...rest,
+    className: cn2(
+      "polli:w-full polli:border-collapse polli:text-sm",
+      className
+    )
+  }
+);
+var TableHead = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  "thead",
+  {
+    ...rest,
+    className: cn2(
+      "polli:bg-theme-bg-active polli:text-micro polli:text-theme-text-muted",
+      className
+    )
+  }
+);
+var TableBody = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  "tbody",
+  {
+    ...rest,
+    className: cn2("polli:divide-y polli:divide-theme-border/65", className)
+  }
+);
+var TableRow = ({
+  intent = "default",
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  "tr",
+  {
+    ...rest,
+    className: cn2(
+      "polli:transition-colors polli:hover:bg-theme-bg-subtle",
+      rowIntentClasses[intent],
+      className
+    )
+  }
+);
+var TableHeaderCell = ({
+  align = "left",
+  active = false,
+  sortDirection,
+  onSort,
+  className,
+  children,
+  ...rest
+}) => {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children }),
+    active && sortDirection && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", children: sortDirection === "asc" ? "^" : "v" })
+  ] });
+  const classes = cn2(
+    "polli:px-3 polli:py-2 polli:font-bold polli:uppercase polli:tracking-wide",
+    alignClasses[align],
+    active && "polli:text-theme-text-strong",
+    onSort && "polli:cursor-pointer polli:select-none polli:hover:text-theme-text-strong",
+    className
+  );
+  if (!onSort) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { ...rest, className: classes, children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { ...rest, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: onSort,
+      className: cn2(
+        "polli-control polli:inline-flex polli:w-full polli:items-center polli:gap-1 polli:bg-transparent polli:p-0 polli:font-bold polli:text-inherit",
+        align === "right" && "polli:justify-end",
+        align === "center" && "polli:justify-center"
+      ),
+      children: content
+    }
+  ) });
+};
+var TableCell = ({
+  align = "left",
+  numeric = false,
+  muted = false,
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  "td",
+  {
+    ...rest,
+    className: cn2(
+      "polli:px-3 polli:py-2 polli:align-middle",
+      alignClasses[align],
+      numeric && "polli:tabular-nums",
+      muted && "polli:text-theme-text-muted",
+      className
+    )
+  }
+);
+
+// src/primitives/Textarea.tsx
+var import_react11 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Textarea = (0, import_react11.forwardRef)(
+  ({ className, error, rows = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "textarea",
+    {
+      ref,
+      rows,
+      "data-error": error ? "true" : void 0,
+      className: cn2(
+        "polli-textarea polli:w-full polli:rounded-lg polli:border polli:px-3 polli:py-2",
+        "polli:min-h-20 polli:resize-y polli:font-body polli:text-base",
+        "polli:text-gray-950",
+        "polli:transition-colors",
+        "polli:disabled:opacity-50 polli:disabled:cursor-not-allowed",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
 // src/theme.ts
 var themes = [
   "amber",
@@ -1710,16 +2538,14 @@ var themes = [
   "violet",
   "green"
 ];
-var themeColors = {
-  amber: "#FEF3C7",
-  blue: "#DBEAFE"
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
   AppIcon,
   BeakerIcon,
   BookIcon,
   Button,
+  ButtonGroup,
   CheckIcon,
   ChevronIcon,
   Chip,
@@ -1732,21 +2558,28 @@ var themeColors = {
   DiscordIcon,
   DownloadIcon,
   Dropdown,
+  DropdownItem,
   ExternalLinkButton,
   ExternalLinkIcon,
   Field,
+  FileUpload,
   GenApiIcon,
   GitHubIcon,
   IconButton,
   ImageIcon,
   InfoTip,
+  InlineLink,
   Input,
+  LinkCard,
   LockIcon,
   MailIcon,
+  Markdown,
   McpIcon,
   MenuIcon,
   MultiSelect,
+  NavItem,
   PeriodPicker,
+  Prose,
   ScrollArea,
   Section,
   Slider,
@@ -1754,7 +2587,14 @@ var themeColors = {
   Surface,
   Switch,
   TabButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
   TerminalIcon,
+  Textarea,
   TokensIcon,
   Tooltip,
   TrendUpIcon,
@@ -1764,7 +2604,6 @@ var themeColors = {
   currentPeriod,
   getPeriodBucketKeys,
   periodBucketKeyToDate,
-  themeColors,
   themes,
   useScrollLock
 });