@pollinations/ui 0.0.2 → 0.1.0-alpha.0

package/dist/index.js

@@ -201,13 +201,13 @@ var Alert = ({
 // src/primitives/Button.tsx
 import { jsx as jsx2 } from "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 intentClasses2 = {
-  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-[oklch(0.88_0.075_25)] polli:transition-colors"
+  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,
@@ -218,10 +218,10 @@ var buttonClasses = ({
 }) => {
   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
   );
 };
@@ -240,6 +240,7 @@ function Button({
     Component,
     {
       "data-theme": intent ? void 0 : theme,
+      "data-intent": intent,
       className: buttonClasses({
         theme,
         intent,
@@ -312,8 +313,8 @@ var chipSizes = {
   lg: "polli:px-3 polli:py-1 polli:text-sm"
 };
 var intentClasses3 = {
-  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)]",
+  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",
@@ -375,7 +376,7 @@ 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,
@@ -452,7 +453,7 @@ 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";
@@ -568,6 +569,7 @@ function CopyButton({
       type: "button",
       onClick: handleCopy,
       className: cn2(
+        "polli-control",
         typeof className === "function" ? className(copied) : className
       ),
       children: typeof children === "function" ? children(copied) : children
@@ -587,6 +589,7 @@ function CopyButton({
 // src/primitives/Dialog.tsx
 import { Dialog as ArkDialog } from "@ark-ui/react/dialog";
 import { Portal } from "@ark-ui/react/portal";
+import { useRef as useRef3 } from "react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var sizeClasses = {
   sm: "polli:max-w-md",
@@ -610,69 +613,75 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ jsxs4(
-  ArkDialog.Root,
-  {
-    open,
-    onOpenChange: (details) => onOpenChange?.(details.open),
-    children: [
-      trigger && /* @__PURE__ */ jsx9(
-        ArkDialog.Trigger,
-        {
-          asChild: triggerAsChild,
-          className: triggerClassName,
-          children: trigger
-        }
-      ),
-      /* @__PURE__ */ jsxs4(Portal, { children: [
-        showBackdrop && /* @__PURE__ */ jsx9(
-          ArkDialog.Backdrop,
+}) => {
+  const contentRef = useRef3(null);
+  return /* @__PURE__ */ jsxs4(
+    ArkDialog.Root,
+    {
+      open,
+      initialFocusEl: () => contentRef.current,
+      onOpenChange: (details) => onOpenChange?.(details.open),
+      children: [
+        trigger && /* @__PURE__ */ jsx9(
+          ArkDialog.Trigger,
           {
-            className: cn2(
-              "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
-              backdropClassName
-            )
+            asChild: triggerAsChild,
+            className: triggerClassName,
+            children: trigger
           }
         ),
-        /* @__PURE__ */ jsx9(
-          ArkDialog.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__ */ jsxs4(
-              ArkDialog.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__ */ jsx9(
-                    DialogTitle,
-                    {
-                      className: cn2(
-                        "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
-                        titleClassName
-                      ),
-                      children: title
-                    }
+        /* @__PURE__ */ jsxs4(Portal, { children: [
+          showBackdrop && /* @__PURE__ */ jsx9(
+            ArkDialog.Backdrop,
+            {
+              className: cn2(
+                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
+                backdropClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            ArkDialog.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__ */ jsxs4(
+                ArkDialog.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__ */ jsx9(
+                      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 = ArkDialog.Title;
 
 // src/primitives/Dropdown.tsx
@@ -680,7 +689,7 @@ import { Popover } from "@ark-ui/react/popover";
 import { Portal as Portal2 } from "@ark-ui/react/portal";
 import { useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-surface-white polli:shadow-lg";
+var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg";
 var Dropdown = ({
   theme,
   trigger,
@@ -688,7 +697,6 @@ var Dropdown = ({
   align = "start",
   open: openProp,
   onOpenChange,
-  panelClassName,
   className
 }) => {
   const [internalOpen, setInternalOpen] = useState3(false);
@@ -714,7 +722,7 @@ var Dropdown = ({
             "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
@@ -725,8 +733,31 @@ var Dropdown = ({
   );
 };
 
+// src/primitives/DropdownItem.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function DropdownItem({
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx11(
+    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
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -736,25 +767,25 @@ var strokeProps = {
 };
 function AppIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ jsx11("path", { d: "M2 20h20" })
+    /* @__PURE__ */ jsx12("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx12("path", { d: "M2 20h20" })
   ] });
 }
 function BeakerIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("path", { d: "M9 3h6" }),
-    /* @__PURE__ */ jsx11("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__ */ jsx11("path", { d: "M7 14h10" })
+    /* @__PURE__ */ jsx12("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ jsx12("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__ */ jsx12("path", { d: "M7 14h10" })
   ] });
 }
 function BookIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
-    /* @__PURE__ */ jsx11("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
+    /* @__PURE__ */ jsx12("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
+    /* @__PURE__ */ jsx12("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
   ] });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "svg",
     {
       "aria-hidden": "true",
@@ -762,24 +793,24 @@ function CheckIcon(props) {
       ...strokeProps,
       strokeWidth: 2.5,
       ...props,
-      children: /* @__PURE__ */ jsx11("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ jsx12("polyline", { points: "20 6 9 17 4 12" })
     }
   );
 }
 function ClipboardIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-    /* @__PURE__ */ jsx11("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+    /* @__PURE__ */ jsx12("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx12("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__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "9" }),
-    /* @__PURE__ */ jsx11("path", { d: "M12 7v5l3 2" })
+    /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx12("path", { d: "M12 7v5l3 2" })
   ] });
 }
 function DiscordIcon(props) {
-  return /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx12(
     "path",
     {
       fill: "currentColor",
@@ -789,22 +820,22 @@ function DiscordIcon(props) {
 }
 function DownloadIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ jsx11("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ jsx11("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+    /* @__PURE__ */ jsx12("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx12("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ jsx12("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
   ] });
 }
 function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M7 17 17 7M9 7h8v8" }) });
+  return /* @__PURE__ */ jsx12("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx12("path", { d: "M7 17 17 7M9 7h8v8" }) });
 }
 function GenApiIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
-    /* @__PURE__ */ jsx11("path", { d: "M8 3v18M16 3v18" })
+    /* @__PURE__ */ jsx12("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
+    /* @__PURE__ */ jsx12("path", { d: "M8 3v18M16 3v18" })
   ] });
 }
 function GitHubIcon(props) {
-  return /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx12(
     "path",
     {
       fill: "currentColor",
@@ -814,65 +845,65 @@ function GitHubIcon(props) {
 }
 function ImageIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ jsx11("circle", { cx: "9", cy: "9", r: "2" }),
-    /* @__PURE__ */ jsx11("path", { d: "m21 15-5-5L5 21" })
+    /* @__PURE__ */ jsx12("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx12("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx12("path", { d: "m21 15-5-5L5 21" })
   ] });
 }
 function LockIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx11("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+    /* @__PURE__ */ jsx12("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx12("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
   ] });
 }
 function MailIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-    /* @__PURE__ */ jsx11("path", { d: "m3 7 9 7 9-7" })
+    /* @__PURE__ */ jsx12("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx12("path", { d: "m3 7 9 7 9-7" })
   ] });
 }
 function McpIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ jsx11("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ jsx11("path", { d: "M10 12h4" })
+    /* @__PURE__ */ jsx12("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ jsx12("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ jsx12("path", { d: "M10 12h4" })
   ] });
 }
 function MenuIcon(props) {
-  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
+  return /* @__PURE__ */ jsx12("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx12("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 }
 function TerminalIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("polyline", { points: "4 8 8 12 4 16" }),
-    /* @__PURE__ */ jsx11("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
+    /* @__PURE__ */ jsx12("polyline", { points: "4 8 8 12 4 16" }),
+    /* @__PURE__ */ jsx12("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
   ] });
 }
 function TokensIcon(props) {
-  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
+  return /* @__PURE__ */ jsx12("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx12("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
 }
 function TrendUpIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("polyline", { points: "3 17 9 11 13 15 21 7" }),
-    /* @__PURE__ */ jsx11("polyline", { points: "15 7 21 7 21 13" })
+    /* @__PURE__ */ jsx12("polyline", { points: "3 17 9 11 13 15 21 7" }),
+    /* @__PURE__ */ jsx12("polyline", { points: "15 7 21 7 21 13" })
   ] });
 }
 function WalletIcon(props) {
   return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx11("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
-    /* @__PURE__ */ jsx11("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__ */ jsx11("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
+    /* @__PURE__ */ jsx12("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
+    /* @__PURE__ */ jsx12("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__ */ jsx12("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
   ] });
 }
 function XIcon(props) {
-  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M18 6 6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ jsx12("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx12("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 
 // src/primitives/ExternalLinkButton.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var ExternalLinkButton = ({
   theme,
   href,
-  size = "medium",
+  size = "md",
   className,
   children
 }) => /* @__PURE__ */ jsxs7(
@@ -886,8 +917,8 @@ var ExternalLinkButton = ({
     size,
     className: cn2("polli:gap-2", className),
     children: [
-      /* @__PURE__ */ jsx12("span", { children }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13("span", { children }),
+      /* @__PURE__ */ jsx13(
         ExternalLinkIcon,
         {
           className: "polli:h-4 polli:w-4 polli:shrink-0 polli:opacity-60",
@@ -901,10 +932,48 @@ var ExternalLinkButton = ({
 // src/primitives/Field.tsx
 import { Field } from "@ark-ui/react/field";
 
+// src/primitives/FileUpload.tsx
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "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
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var intentClasses4 = {
-  danger: "polli:bg-intent-danger-bg-light polli:hover:bg-[oklch(0.88_0.075_25)] polli:text-intent-danger-text"
+  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 = ({
@@ -913,15 +982,16 @@ var IconButton = ({
   onClick,
   children,
   className
-}) => /* @__PURE__ */ jsx13(
+}) => /* @__PURE__ */ jsx14(
   "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",
+      "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
     ),
@@ -929,26 +999,252 @@ var IconButton = ({
   }
 );
 
+// src/primitives/FileUpload.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "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__ */ jsx15("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__ */ jsx15(ImageIcon, { className: "polli:h-5 polli:w-5" }) });
+}
+function FilePreview({ file }) {
+  const canvasRef = useRef4(null);
+  const [canPreview, setCanPreview] = useState4(
+    () => isPreviewableImage(file)
+  );
+  useEffect3(() => {
+    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__ */ jsx15(PreviewPlaceholder, {});
+  return /* @__PURE__ */ jsx15(
+    "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
+}) {
+  useEffect3(() => {
+    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__ */ jsxs8(
+    "div",
+    {
+      "data-theme": theme,
+      className: cn2("polli:flex polli:flex-col polli:gap-3", className),
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "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__ */ jsx15(ImageIcon, { className: "polli:h-6 polli:w-6" }),
+              /* @__PURE__ */ jsxs8("span", { children: [
+                "Drag images here or",
+                " ",
+                /* @__PURE__ */ jsx15("span", { className: "polli:underline", children: "browse" })
+              ] }),
+              /* @__PURE__ */ jsx15(
+                "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__ */ jsx15("ul", { className: "polli:m-0 polli:flex polli:flex-wrap polli:gap-3 polli:p-0", children: value.map((file, index) => /* @__PURE__ */ jsxs8(
+          "li",
+          {
+            className: "polli:relative polli:flex polli:list-none polli:flex-col polli:gap-1",
+            children: [
+              /* @__PURE__ */ jsx15(FilePreview, { file }),
+              /* @__PURE__ */ jsx15("span", { className: "polli:max-w-16 polli:truncate polli:text-xs polli:text-theme-text-muted", children: file.name }),
+              !disabled && /* @__PURE__ */ jsx15("div", { className: "polli:absolute polli:-top-2 polli:-right-2", children: /* @__PURE__ */ jsx15(
+                IconButton,
+                {
+                  intent: "danger",
+                  title: `Remove ${file.name}`,
+                  onClick: () => onChange(
+                    value.filter(
+                      (_, i) => i !== index
+                    )
+                  ),
+                  children: /* @__PURE__ */ jsx15(XIcon, { className: "polli:h-3 polli:w-3" })
+                }
+              ) })
+            ]
+          },
+          `${file.name}-${index}`
+        )) })
+      ]
+    }
+  );
+}
+
 // src/primitives/InfoTip.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var InfoTip = ({
   text,
   content,
   label = "More info"
-}) => /* @__PURE__ */ jsx14(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ jsx14("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__ */ jsx16(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ jsx16("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
+import { jsx as jsx17, jsxs as jsxs9 } from "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__ */ jsxs9(
+    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__ */ jsx17(
+          ExternalLinkIcon,
+          {
+            "aria-hidden": "true",
+            className: "polli:h-3.5 polli:w-3.5 polli:shrink-0 polli:opacity-65"
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/primitives/Input.tsx
 import { forwardRef } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Input = forwardRef(
-  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ jsx15(
+  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ jsx18(
     "input",
     {
       ref,
+      "data-error": error ? "true" : void 0,
       className: cn2(
-        "polli:px-3 polli:py-2 polli:border polli:rounded-lg",
+        "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",
-        error ? "polli:border-red-400" : "polli:border-gray-300",
         hideNumberSteppers && "polli-input-number-clean",
         className
       ),
@@ -957,14 +1253,150 @@ var Input = forwardRef(
   )
 );
 
+// src/primitives/Surface.tsx
+import { jsx as jsx19 } from "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__ */ jsx19(
+  "div",
+  {
+    ...rest,
+    "data-theme": theme,
+    className: cn2("polli:min-w-0", variantClasses[variant], className),
+    children
+  }
+);
+
+// src/primitives/LinkCard.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "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__ */ jsx20(
+    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__ */ jsxs10(
+        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__ */ jsx20(
+              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/Markdown.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var components = {
+  ul: ({ node, ...props }) => /* @__PURE__ */ jsx21(
+    "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__ */ jsx21(
+    "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__ */ jsx21("p", { className: "polli:mb-2 polli:last:mb-0", ...props }),
+  strong: ({ node, ...props }) => /* @__PURE__ */ jsx21(
+    "strong",
+    {
+      className: "polli:font-semibold polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ jsx21(
+    "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__ */ jsx21(
+    "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__ */ jsx21(
+    "div",
+    {
+      className: cn2(
+        "polli:min-w-0 polli:font-body polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx21(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children })
+    }
+  );
+}
+
 // src/primitives/ScrollArea.tsx
 import {
   forwardRef as forwardRef2,
   useCallback,
-  useEffect as useEffect3,
-  useRef as useRef3
+  useEffect as useEffect4,
+  useRef as useRef5
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var axisClasses = {
   y: "polli:overflow-y-auto polli:overflow-x-hidden",
   x: "polli:overflow-x-auto polli:overflow-y-hidden"
@@ -975,7 +1407,7 @@ function assignRef(ref, value) {
 }
 var ScrollArea = forwardRef2(
   ({ theme, axis = "y", className, children, ...rest }, externalRef) => {
-    const innerRef = useRef3(null);
+    const innerRef = useRef5(null);
     const setRef = useCallback(
       (node) => {
         innerRef.current = node;
@@ -983,7 +1415,7 @@ var ScrollArea = forwardRef2(
       },
       [externalRef]
     );
-    useEffect3(() => {
+    useEffect4(() => {
       const element = innerRef.current;
       if (!element) return;
       let hideTimer = null;
@@ -1034,7 +1466,7 @@ var ScrollArea = forwardRef2(
         element.removeEventListener("focusout", scheduleHide);
       };
     }, []);
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx22(
       "div",
       {
         ...rest,
@@ -1053,9 +1485,9 @@ var ScrollArea = forwardRef2(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/MultiSelect.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "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";
+import { jsx as jsx23, jsxs as jsxs11 } from "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,
@@ -1078,16 +1510,16 @@ var MultiSelect = ({
   };
   const selectAll = () => onChange([]);
   const displayText = disabled ? disabledText : isAllSelected ? "All" : `${selected.length} selected`;
-  const labelNode = label ? /* @__PURE__ */ jsx17("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
+  const labelNode = label ? /* @__PURE__ */ jsx23("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
   if (disabled) {
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         "data-theme": theme,
         className: "polli:group polli:relative polli:flex polli:items-center polli:gap-2",
         children: [
           labelNode,
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs11(
             "button",
             {
               type: "button",
@@ -1097,8 +1529,8 @@ var MultiSelect = ({
                 "polli:cursor-not-allowed polli:border-theme-border polli:bg-theme-bg-subtle polli:opacity-60"
               ),
               children: [
-                /* @__PURE__ */ jsx17("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx23("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
+                /* @__PURE__ */ jsx23(
                   ChevronIcon,
                   {
                     expanded: false,
@@ -1108,25 +1540,25 @@ var MultiSelect = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx17("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__ */ jsx23("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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:items-center polli:gap-2",
       children: [
         labelNode,
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx23(
           Dropdown,
           {
             theme,
             align,
             className: "polli:min-w-[320px]",
-            trigger: (open) => /* @__PURE__ */ jsxs8(
+            trigger: (open) => /* @__PURE__ */ jsxs11(
               "button",
               {
                 type: "button",
@@ -1135,7 +1567,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__ */ jsx17(
+                  /* @__PURE__ */ jsx23(
                     "span",
                     {
                       className: cn2(
@@ -1145,7 +1577,7 @@ var MultiSelect = ({
                       children: displayText
                     }
                   ),
-                  /* @__PURE__ */ jsx17(
+                  /* @__PURE__ */ jsx23(
                     ChevronIcon,
                     {
                       expanded: open,
@@ -1158,8 +1590,8 @@ var MultiSelect = ({
                 ]
               }
             ),
-            children: /* @__PURE__ */ jsxs8(ScrollArea, { theme, className: "polli:max-h-64", children: [
-              /* @__PURE__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs11(ScrollArea, { theme, className: "polli:max-h-64", children: [
+              /* @__PURE__ */ jsxs11(
                 "button",
                 {
                   type: "button",
@@ -1169,7 +1601,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__ */ jsx17(
+                    /* @__PURE__ */ jsx23(
                       "span",
                       {
                         className: cn2(
@@ -1185,7 +1617,7 @@ var MultiSelect = ({
               ),
               options.map((opt) => {
                 const isChecked = selected.includes(opt.value);
-                return /* @__PURE__ */ jsxs8(
+                return /* @__PURE__ */ jsxs11(
                   "button",
                   {
                     type: "button",
@@ -1195,7 +1627,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__ */ jsx17(
+                      /* @__PURE__ */ jsx23(
                         "span",
                         {
                           className: cn2(
@@ -1205,7 +1637,7 @@ var MultiSelect = ({
                           children: isChecked && "\u2713"
                         }
                       ),
-                      /* @__PURE__ */ jsx17("span", { className: "polli:whitespace-nowrap", children: opt.label })
+                      /* @__PURE__ */ jsx23("span", { className: "polli:whitespace-nowrap", children: opt.label })
                     ]
                   },
                   opt.value
@@ -1219,26 +1651,74 @@ var MultiSelect = ({
   );
 };
 
+// src/primitives/NavItem.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "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__ */ jsxs12(
+    Component,
+    {
+      "data-theme": theme,
+      "aria-current": active ? "page" : void 0,
+      className: cn2(
+        base,
+        active ? activeClasses : inactiveClasses,
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: dotClasses }),
+        children
+      ]
+    }
+  );
+}
+
 // src/primitives/PeriodPicker.tsx
-import { useEffect as useEffect4, useMemo, useState as useState4 } from "react";
+import { useEffect as useEffect5, useMemo, useState as useState5 } from "react";
 
 // src/primitives/TabButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "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__ */ jsx18(
+  const classes = variantClasses2[variant];
+  return /* @__PURE__ */ jsx25(
     "button",
     {
       type: "button",
@@ -1248,8 +1728,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
@@ -1260,7 +1741,7 @@ var TabButton = ({
 };
 
 // src/primitives/PeriodPicker.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTH_LABELS = [
   "Jan",
@@ -1276,7 +1757,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)
@@ -1313,10 +1794,10 @@ var PeriodPicker = ({
   minDate = /* @__PURE__ */ new Date(0),
   maxDate
 }) => {
-  const [open, setOpen] = useState4(false);
-  const [viewDate, setViewDate] = useState4(() => periodDate(value));
+  const [open, setOpen] = useState5(false);
+  const [viewDate, setViewDate] = useState5(() => periodDate(value));
   const { granularity, period } = value;
-  useEffect4(() => {
+  useEffect5(() => {
     setViewDate(periodDate({ granularity, period }));
   }, [granularity, period]);
   const dates = useMemo(() => monthGridDates(viewDate), [viewDate]);
@@ -1340,14 +1821,14 @@ var PeriodPicker = ({
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:flex-wrap polli:items-center polli:gap-2",
       children: [
-        /* @__PURE__ */ jsx19("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
-          (granularity2) => /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx26("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
+          (granularity2) => /* @__PURE__ */ jsx26(
             TabButton,
             {
               active: value.granularity === granularity2,
@@ -1357,33 +1838,33 @@ var PeriodPicker = ({
             granularity2
           )
         ) }),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs13(
           Dropdown,
           {
             theme,
             open,
             onOpenChange: setOpen,
             className: "polli:w-[304px] polli:rounded-xl polli:p-3",
-            trigger: (isOpen) => /* @__PURE__ */ jsxs9(
+            trigger: (isOpen) => /* @__PURE__ */ jsxs13(
               "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__ */ jsx19("span", { children: formatPeriodLabel(value) }),
-                  /* @__PURE__ */ jsx19(ChevronIcon, { expanded: isOpen })
+                  /* @__PURE__ */ jsx26("span", { children: formatPeriodLabel(value) }),
+                  /* @__PURE__ */ jsx26(ChevronIcon, { expanded: isOpen })
                 ]
               }
             ),
             children: [
-              /* @__PURE__ */ jsxs9("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
-                /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsxs13("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
+                /* @__PURE__ */ jsx26(
                   "button",
                   {
                     type: "button",
@@ -1397,8 +1878,8 @@ var PeriodPicker = ({
                     children: "<"
                   }
                 ),
-                /* @__PURE__ */ jsx19("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx26("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
+                /* @__PURE__ */ jsx26(
                   "button",
                   {
                     type: "button",
@@ -1413,7 +1894,7 @@ var PeriodPicker = ({
                   }
                 )
               ] }),
-              value.granularity === "month" ? /* @__PURE__ */ jsx19("div", { className: "polli:grid polli:grid-cols-3 polli:gap-1.5", children: MONTH_LABELS.map((label, monthIndex) => {
+              value.granularity === "month" ? /* @__PURE__ */ jsx26("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(),
@@ -1432,7 +1913,7 @@ var PeriodPicker = ({
                   year: "numeric"
                 });
                 const selected = date.getUTCFullYear() === selectedWindow.start.getUTCFullYear() && date.getUTCMonth() === selectedWindow.start.getUTCMonth();
-                return /* @__PURE__ */ jsx19(
+                return /* @__PURE__ */ jsx26(
                   "button",
                   {
                     type: "button",
@@ -1440,7 +1921,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"
                     ),
@@ -1448,9 +1929,9 @@ var PeriodPicker = ({
                   },
                   label
                 );
-              }) }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
-                /* @__PURE__ */ jsx19("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__ */ jsx19("div", { children: label }, label)) }),
-                /* @__PURE__ */ jsx19("div", { className: "polli:grid polli:grid-cols-7 polli:gap-1", children: dates.map((date) => {
+              }) }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
+                /* @__PURE__ */ jsx26("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__ */ jsx26("div", { children: label }, label)) }),
+                /* @__PURE__ */ jsx26("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),
@@ -1468,7 +1949,7 @@ var PeriodPicker = ({
                     }
                   )}`;
                   const selected = value.granularity === "day" ? sameUtcDay(date, selectedWindow.start) : date >= selectedWindow.start && date < selectedWindow.end;
-                  return /* @__PURE__ */ jsx19(
+                  return /* @__PURE__ */ jsx26(
                     "button",
                     {
                       type: "button",
@@ -1476,7 +1957,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",
@@ -1496,58 +1977,189 @@ var PeriodPicker = ({
   );
 };
 
-// src/primitives/Surface.tsx
-import { jsx as jsx20 } from "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
+import Markdown2 from "react-markdown";
+import rehypeSlug from "rehype-slug";
+import remarkGfm2 from "remark-gfm";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var components2 = {
+  h1: ({ node, ...props }) => /* @__PURE__ */ jsx27(
+    "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__ */ jsx27(
+    "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__ */ jsx27(
+    "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__ */ jsx27("p", { className: "polli:my-4 polli:leading-relaxed", ...props }),
+  a: ({ node, ...props }) => /* @__PURE__ */ jsx27(
+    "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__ */ jsx27(
+    "ul",
+    {
+      className: "polli:my-4 polli:list-disc polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ jsx27(
+    "ol",
+    {
+      className: "polli:my-4 polli:list-decimal polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  blockquote: ({ node, ...props }) => /* @__PURE__ */ jsx27(
+    "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__ */ jsx27(
+    "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__ */ jsx27(
+    "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__ */ jsx27(
+    "table",
+    {
+      className: "polli:my-4 polli:w-full polli:border-collapse polli:text-sm",
+      ...props
+    }
+  ),
+  th: ({ node, ...props }) => /* @__PURE__ */ jsx27(
+    "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__ */ jsx27(
+    "td",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2",
+      ...props
+    }
+  ),
+  hr: ({ node, ...props }) => /* @__PURE__ */ jsx27("hr", { className: "polli:my-6 polli:border-theme-border", ...props })
 };
-var Surface = ({
-  theme,
-  variant = "card",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsx20(
-  "div",
-  {
-    ...rest,
-    "data-theme": theme,
-    className: cn2("polli:min-w-0", variantClasses[variant], className),
-    children
-  }
-);
+function Prose({ children, className }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: cn2(
+        "polli:font-body polli:text-theme-text-base polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx27(
+        Markdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeSlug],
+          components: components2,
+          children
+        }
+      )
+    }
+  );
+}
 
 // src/primitives/Section.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var Section = ({
   title,
   theme,
   id,
   framed = false,
+  intro,
   action,
   actionClassName,
+  panelClassName,
+  titleClassName,
   children,
   className
-}) => /* @__PURE__ */ jsxs10("section", { id, className: cn2("scroll-mt-10 space-y-2", className), children: [
-  /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1", children: [
-    /* @__PURE__ */ jsx21(
-      "h2",
-      {
-        "data-theme": theme,
-        className: "text-left text-lg font-semibold sm:text-xl text-theme-text-strong",
-        children: title
-      }
+}) => /* @__PURE__ */ jsxs14(
+  "section",
+  {
+    id,
+    className: cn2(
+      "polli:flex polli:scroll-mt-10 polli:flex-col polli:gap-4",
+      className
     ),
-    action && /* @__PURE__ */ jsx21("div", { className: cn2("shrink-0", actionClassName), children: action })
-  ] }),
-  framed ? /* @__PURE__ */ jsx21(Surface, { variant: "panel", theme, children }) : children
-] });
+    children: [
+      /* @__PURE__ */ jsxs14("div", { className: "polli:flex polli:flex-wrap polli:items-center polli:justify-between polli:gap-3 polli:px-1", children: [
+        /* @__PURE__ */ jsx28(
+          "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__ */ jsx28("div", { className: cn2("polli:shrink-0", actionClassName), children: action })
+      ] }),
+      framed ? /* @__PURE__ */ jsxs14(
+        Surface,
+        {
+          variant: "panel",
+          theme,
+          className: cn2(
+            "polli:flex polli:flex-col polli:gap-5",
+            panelClassName
+          ),
+          children: [
+            intro && /* @__PURE__ */ jsx28("div", { className: "polli:max-w-2xl polli:text-theme-text-base", children: intro }),
+            children
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs14(Fragment3, { children: [
+        intro && /* @__PURE__ */ jsx28(
+          "div",
+          {
+            "data-theme": theme,
+            className: "polli:max-w-2xl polli:text-theme-text-base",
+            children: intro
+          }
+        ),
+        children
+      ] })
+    ]
+  }
+);
 
 // src/primitives/Slider.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var toNumber = (value) => {
   if (typeof value === "number") return value;
   if (typeof value !== "string" || value.trim() === "") return void 0;
@@ -1587,7 +2199,7 @@ var Slider = forwardRef3(
       ...style,
       ...progressPercent === void 0 ? null : { "--polli-slider-progress": `${progressPercent}%` }
     };
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx29(
       "input",
       {
         ref,
@@ -1605,7 +2217,7 @@ var Slider = forwardRef3(
 );
 
 // src/primitives/StatCard.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var StatCard = ({
   label,
   value,
@@ -1615,8 +2227,8 @@ var StatCard = ({
   labelClassName,
   valueClassName,
   detailClassName
-}) => /* @__PURE__ */ jsxs11("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
-  /* @__PURE__ */ jsx23(
+}) => /* @__PURE__ */ jsxs15("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
+  /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn2(
@@ -1626,7 +2238,7 @@ var StatCard = ({
       children: label
     }
   ),
-  /* @__PURE__ */ jsx23(
+  /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn2(
@@ -1636,7 +2248,7 @@ var StatCard = ({
       children: value
     }
   ),
-  detail && /* @__PURE__ */ jsx23(
+  detail && /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn2(
@@ -1649,11 +2261,11 @@ var StatCard = ({
 ] });
 
 // src/primitives/Switch.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "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,
@@ -1665,7 +2277,7 @@ var Switch = ({
 }) => {
   const effectiveStatus = status ?? (checked ? "on" : "off");
   const resolvedAriaLabel = ariaLabel ?? (checked ? "Turn off toggle" : "Turn on toggle");
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx31(
     "button",
     {
       type: "button",
@@ -1675,11 +2287,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__ */ jsx24(
+      children: /* @__PURE__ */ jsx31(
         "span",
         {
           className: cn2(
@@ -1693,7 +2305,7 @@ var Switch = ({
 };
 
 // src/primitives/Table.tsx
-import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 var alignClasses = {
   left: "polli:text-left",
   center: "polli:text-center",
@@ -1705,7 +2317,7 @@ var rowIntentClasses = {
   warning: "polli:bg-intent-warning-bg-light/65",
   danger: "polli:bg-intent-danger-bg-light/65"
 };
-var Table = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
+var Table = ({ className, ...rest }) => /* @__PURE__ */ jsx32(
   "table",
   {
     ...rest,
@@ -1715,7 +2327,7 @@ var Table = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
     )
   }
 );
-var TableHead = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
+var TableHead = ({ className, ...rest }) => /* @__PURE__ */ jsx32(
   "thead",
   {
     ...rest,
@@ -1725,7 +2337,7 @@ var TableHead = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
     )
   }
 );
-var TableBody = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
+var TableBody = ({ className, ...rest }) => /* @__PURE__ */ jsx32(
   "tbody",
   {
     ...rest,
@@ -1736,7 +2348,7 @@ var TableRow = ({
   intent = "default",
   className,
   ...rest
-}) => /* @__PURE__ */ jsx25(
+}) => /* @__PURE__ */ jsx32(
   "tr",
   {
     ...rest,
@@ -1756,9 +2368,9 @@ var TableHeaderCell = ({
   children,
   ...rest
 }) => {
-  const content = /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    /* @__PURE__ */ jsx25("span", { children }),
-    active && sortDirection && /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: sortDirection === "asc" ? "^" : "v" })
+  const content = /* @__PURE__ */ jsxs16(Fragment4, { children: [
+    /* @__PURE__ */ jsx32("span", { children }),
+    active && sortDirection && /* @__PURE__ */ jsx32("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",
@@ -1768,15 +2380,15 @@ var TableHeaderCell = ({
     className
   );
   if (!onSort) {
-    return /* @__PURE__ */ jsx25("th", { ...rest, className: classes, children: content });
+    return /* @__PURE__ */ jsx32("th", { ...rest, className: classes, children: content });
   }
-  return /* @__PURE__ */ jsx25("th", { ...rest, className: classes, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx32("th", { ...rest, className: classes, children: /* @__PURE__ */ jsx32(
     "button",
     {
       type: "button",
       onClick: onSort,
       className: cn2(
-        "polli:inline-flex polli:w-full polli:items-center polli:gap-1 polli:bg-transparent polli:p-0 polli:font-bold polli:text-inherit",
+        "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"
       ),
@@ -1790,7 +2402,7 @@ var TableCell = ({
   muted = false,
   className,
   ...rest
-}) => /* @__PURE__ */ jsx25(
+}) => /* @__PURE__ */ jsx32(
   "td",
   {
     ...rest,
@@ -1804,6 +2416,30 @@ var TableCell = ({
   }
 );
 
+// src/primitives/Textarea.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Textarea = forwardRef4(
+  ({ className, error, rows = 4, ...props }, ref) => /* @__PURE__ */ jsx33(
+    "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",
@@ -1832,21 +2468,28 @@ export {
   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,
@@ -1861,6 +2504,7 @@ export {
   TableHeaderCell,
   TableRow,
   TerminalIcon,
+  Textarea,
   TokensIcon,
   Tooltip,
   TrendUpIcon,