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

package/dist/{compositions/app-user.js → app-user-menu/sdk.js}

@@ -1,9 +1,6 @@
-// src/compositions/app-user/AppUserMenu.tsx
+// src/modules/app-user-menu/AppUserMenu.tsx
 import { useAuthActions as useAuthActions2 } from "@pollinations/sdk/react";
 
-// src/modules/auth/LoginButton.tsx
-import { useAuthActions, useAuthState } from "@pollinations/sdk/react";
-
 // src/lib/cn.ts
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -12,8 +9,111 @@ function cn(...inputs) {
   return twMerge(clsx(...inputs));
 }
 
-// src/primitives/Button.tsx
+// src/primitives/ChevronIcon.tsx
 import { jsx } from "react/jsx-runtime";
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    className: cn(
+      "polli:shrink-0 polli:transition-transform polli:duration-200 polli:ease-out",
+      expanded && "polli:rotate-180",
+      className
+    ),
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3 4.5 6 7.5l3-3",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+// src/primitives/Dropdown.tsx
+import { Popover } from "@ark-ui/react/popover";
+import { Portal } from "@ark-ui/react/portal";
+import { useState } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg";
+var Dropdown = ({
+  theme,
+  trigger,
+  children,
+  align = "start",
+  open: openProp,
+  onOpenChange,
+  className
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open,
+      onOpenChange: (details) => setOpen(details.open),
+      positioning: {
+        placement: align === "end" ? "bottom-end" : "bottom-start"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(Popover.Trigger, { asChild: true, children: trigger(open) }),
+        /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(Popover.Positioner, { children: /* @__PURE__ */ jsx2(
+          Popover.Content,
+          {
+            "data-theme": theme,
+            className: cn(
+              "polli:z-50 polli:overflow-hidden polli:focus:outline-none",
+              DEFAULT_PANEL,
+              className
+            ),
+            children: typeof children === "function" ? children(() => setOpen(false)) : children
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+// src/primitives/DropdownItem.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DropdownItem({
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx3(
+    Component,
+    {
+      ...Component === "button" ? { type: "button" } : void 0,
+      ...rest,
+      className: cn(
+        "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/modules/auth/LoginButton.tsx
+import { useAuthActions, useAuthState } from "@pollinations/sdk/react";
+
+// src/primitives/Button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
 var sizes = {
   sm: "polli:px-2 polli:pt-0.5 polli:pb-1",
   md: "polli:px-4 polli:pt-1.5 polli:pb-2",
@@ -50,7 +150,7 @@ function Button({
   ...buttonProps
 }) {
   const Component = as || "button";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     Component,
     {
       "data-theme": intent ? void 0 : theme,
@@ -70,17 +170,17 @@ function Button({
 }
 
 // src/modules/auth/LoginButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function LoginButton({ children, ...buttonProps }) {
   const { isLoggedIn } = useAuthState();
   const { login } = useAuthActions();
   if (isLoggedIn) return null;
-  return /* @__PURE__ */ jsx2(Button, { ...buttonProps, onClick: () => login(), children });
+  return /* @__PURE__ */ jsx5(Button, { ...buttonProps, onClick: () => login(), children });
 }
 
 // src/modules/auth/UserAvatar.tsx
 import { useAccountProfile, useAuthState as useAuthState2 } from "@pollinations/sdk/react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var sizeClass = {
   sm: "polli:w-6 polli:h-6 polli:text-xs",
   md: "polli:w-9 polli:h-9 polli:text-sm",
@@ -104,7 +204,7 @@ function UserAvatar({ size = "md", className }) {
     className
   );
   if (profile?.image) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx6(
       "img",
       {
         "data-polli": "user-avatar",
@@ -116,7 +216,7 @@ function UserAvatar({ size = "md", className }) {
   }
   const label = profile?.name ? initials(profile.name) : null;
   if (!label) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-polli": "user-avatar",
@@ -130,41 +230,41 @@ function UserAvatar({ size = "md", className }) {
 
 // src/modules/auth/UserName.tsx
 import { useAccountProfile as useAccountProfile2, useAuthState as useAuthState3 } from "@pollinations/sdk/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function UserName({ className }) {
   const { isLoggedIn } = useAuthState3();
   const { data: profile } = useAccountProfile2({ enabled: isLoggedIn });
   if (!isLoggedIn || !profile) return null;
   const display = profile.name || profile.githubUsername;
   if (!display) return null;
-  return /* @__PURE__ */ jsx4("span", { "data-polli": "user-name", className, children: display });
+  return /* @__PURE__ */ jsx7("span", { "data-polli": "user-name", className, children: display });
 }
 
 // src/modules/auth/WhenLoggedIn.tsx
 import { useAuthState as useAuthState4 } from "@pollinations/sdk/react";
 import { Fragment } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function WhenLoggedIn({ children }) {
   const { isLoggedIn } = useAuthState4();
   if (!isLoggedIn) return null;
-  return /* @__PURE__ */ jsx5(Fragment, { children });
+  return /* @__PURE__ */ jsx8(Fragment, { children });
 }
 
 // src/modules/auth/WhenLoggedOut.tsx
 import { useAuthState as useAuthState5 } from "@pollinations/sdk/react";
 import { Fragment as Fragment2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function WhenLoggedOut({ children }) {
   const { isLoggedIn } = useAuthState5();
   if (isLoggedIn) return null;
-  return /* @__PURE__ */ jsx6(Fragment2, { children });
+  return /* @__PURE__ */ jsx9(Fragment2, { children });
 }
 
 // src/modules/wallet/Balance.tsx
 import { useAccountBalance, useAuthState as useAuthState6 } from "@pollinations/sdk/react";
 
 // src/primitives/Chip.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "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",
@@ -173,10 +273,10 @@ var chipSizes = {
 var intentClasses2 = {
   news: "polli:bg-intent-news-bg-light polli:text-intent-news-text",
   alpha: "polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text",
-  neutral: "polli: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"
+  neutral: "polli:bg-ink-100/80 polli:text-ink-900",
+  success: "polli:bg-intent-success-bg-light polli:text-intent-success-text",
+  warning: "polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
 };
 var Chip = ({
   theme,
@@ -187,7 +287,7 @@ var Chip = ({
   ...rest
 }) => {
   const intentClass = intent ? intentClasses2[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       ...rest,
@@ -233,12 +333,12 @@ function formatPollen(value) {
 }
 
 // src/modules/wallet/Balance.tsx
-import { jsxs } from "react/jsx-runtime";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
 function Balance({ className } = {}) {
   const { isLoggedIn } = useAuthState6();
   const { data: balance } = useAccountBalance({ enabled: isLoggedIn });
   if (!isLoggedIn || balance == null) return null;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Chip,
     {
       "data-polli": "balance",
@@ -251,107 +351,7 @@ function Balance({ className } = {}) {
   );
 }
 
-// src/primitives/ChevronIcon.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx8(
-  "svg",
-  {
-    "aria-hidden": "true",
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    className: cn(
-      "polli:shrink-0 polli:transition-transform polli:duration-200 polli:ease-out",
-      expanded && "polli:rotate-180",
-      className
-    ),
-    children: /* @__PURE__ */ jsx8(
-      "path",
-      {
-        d: "M3 4.5 6 7.5l3-3",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.5"
-      }
-    )
-  }
-);
-
-// src/primitives/Dropdown.tsx
-import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
-import { useState } from "react";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg";
-var Dropdown = ({
-  theme,
-  trigger,
-  children,
-  align = "start",
-  open: openProp,
-  onOpenChange,
-  className
-}) => {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : internalOpen;
-  const setOpen = (next) => {
-    if (!isControlled) setInternalOpen(next);
-    onOpenChange?.(next);
-  };
-  return /* @__PURE__ */ jsxs2(
-    Popover.Root,
-    {
-      open,
-      onOpenChange: (details) => setOpen(details.open),
-      positioning: {
-        placement: align === "end" ? "bottom-end" : "bottom-start"
-      },
-      children: [
-        /* @__PURE__ */ jsx9(Popover.Trigger, { asChild: true, children: trigger(open) }),
-        /* @__PURE__ */ jsx9(Portal, { children: /* @__PURE__ */ jsx9(Popover.Positioner, { children: /* @__PURE__ */ jsx9(
-          Popover.Content,
-          {
-            "data-theme": theme,
-            className: cn(
-              "polli:z-50 polli:overflow-hidden polli:focus:outline-none",
-              DEFAULT_PANEL,
-              className
-            ),
-            children: typeof children === "function" ? children(() => setOpen(false)) : children
-          }
-        ) }) })
-      ]
-    }
-  );
-};
-
-// src/primitives/DropdownItem.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function DropdownItem({
-  as,
-  className,
-  children,
-  ...rest
-}) {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx10(
-    Component,
-    {
-      ...Component === "button" ? { type: "button" } : void 0,
-      ...rest,
-      className: cn(
-        "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/compositions/app-user/AppUserMenu.tsx
+// src/modules/app-user-menu/AppUserMenu.tsx
 import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultLabels = {
   authorize: "Authorize app",
@@ -466,4 +466,4 @@ export {
   AppUserMenu,
   isEmbeddedContext
 };
-//# sourceMappingURL=app-user.js.map
+//# sourceMappingURL=sdk.js.map

package/dist/app-user-menu/sdk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/modules/app-user-menu/AppUserMenu.tsx","../../src/lib/cn.ts","../../src/primitives/ChevronIcon.tsx","../../src/primitives/Dropdown.tsx","../../src/primitives/DropdownItem.tsx","../../src/modules/auth/LoginButton.tsx","../../src/primitives/Button.tsx","../../src/modules/auth/UserAvatar.tsx","../../src/modules/auth/UserName.tsx","../../src/modules/auth/WhenLoggedIn.tsx","../../src/modules/auth/WhenLoggedOut.tsx","../../src/modules/wallet/Balance.tsx","../../src/primitives/Chip.tsx","../../src/modules/wallet/format-pollen.ts"],"sourcesContent":["import { useAuthActions } from \"@pollinations/sdk/react\";\nimport { ChevronIcon } from \"../../primitives/ChevronIcon.tsx\";\nimport { Dropdown } from \"../../primitives/Dropdown.tsx\";\nimport { DropdownItem } from \"../../primitives/DropdownItem.tsx\";\nimport {\n    LoginButton,\n    UserAvatar,\n    UserName,\n    WhenLoggedIn,\n    WhenLoggedOut,\n} from \"../auth/sdk.ts\";\nimport { Balance } from \"../wallet/sdk.ts\";\n\nexport type AppUserMenuLabels = {\n    authorize: string;\n    appUserMenu: string;\n    topUpAccount: string;\n    logout: string;\n};\n\nexport type AppUserMenuProps = {\n    dashboardHref: string;\n    labels?: Partial<AppUserMenuLabels>;\n    hiddenWhenEmbedded?: boolean;\n    embedQueryParam?: string;\n};\n\nconst defaultLabels: AppUserMenuLabels = {\n    authorize: \"Authorize app\",\n    appUserMenu: \"App user menu\",\n    topUpAccount: \"Top up account\",\n    logout: \"Log out from this app\",\n};\n\nexport function isEmbeddedContext(embedQueryParam = \"embed\"): boolean {\n    if (typeof window === \"undefined\") return false;\n    const search = new URLSearchParams(window.location.search);\n    if (search.get(embedQueryParam) === \"1\") return true;\n    try {\n        return window.self !== window.top;\n    } catch {\n        return true;\n    }\n}\n\nexport function AppUserMenu({\n    dashboardHref,\n    labels: labelOverrides,\n    hiddenWhenEmbedded = false,\n    embedQueryParam = \"embed\",\n}: AppUserMenuProps) {\n    if (hiddenWhenEmbedded && isEmbeddedContext(embedQueryParam)) return null;\n\n    return (\n        <AppUserMenuContent\n            dashboardHref={dashboardHref}\n            labels={labelOverrides}\n        />\n    );\n}\n\nfunction AppUserMenuContent({\n    dashboardHref,\n    labels: labelOverrides,\n}: Pick<AppUserMenuProps, \"dashboardHref\" | \"labels\">) {\n    const labels = { ...defaultLabels, ...labelOverrides };\n    const { logout } = useAuthActions();\n\n    return (\n        <div data-theme=\"amber\" className=\"polli:flex polli:justify-end\">\n            <WhenLoggedOut>\n                <LoginButton theme=\"amber\">{labels.authorize}</LoginButton>\n            </WhenLoggedOut>\n\n            <WhenLoggedIn>\n                <Dropdown\n                    theme=\"amber\"\n                    align=\"end\"\n                    className=\"polli:w-64 polli:p-1\"\n                    trigger={(open) => (\n                        <button\n                            type=\"button\"\n                            data-theme=\"amber\"\n                            aria-label={labels.appUserMenu}\n                            className=\"polli-control polli:flex polli:min-w-0 polli:items-center polli:gap-2 polli:rounded-full polli:bg-theme-bg-active polli:py-1 polli:pl-1 polli:pr-3 polli:text-theme-text-base polli:shadow-sm polli:transition-colors polli:hover:bg-theme-bg-hover\"\n                        >\n                            <UserAvatar\n                                size=\"md\"\n                                className=\"polli:h-8 polli:w-8\"\n                            />\n                            <span className=\"polli:flex polli:min-w-0 polli:flex-col polli:items-start polli:leading-tight\">\n                                <UserName className=\"polli:max-w-32 polli:truncate polli:text-sm polli:font-semibold\" />\n                                <Balance className=\"polli:bg-transparent polli:px-0 polli:py-0 polli:text-xs polli:text-theme-text-base\" />\n                            </span>\n                            <ChevronIcon\n                                expanded={open}\n                                className=\"polli:h-4 polli:w-4 polli:text-theme-text-base\"\n                            />\n                        </button>\n                    )}\n                >\n                    {(close) => (\n                        <div\n                            data-theme=\"amber\"\n                            className=\"polli:flex polli:flex-col\"\n                        >\n                            <DropdownItem\n                                as=\"a\"\n                                href={dashboardHref}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                onClick={close}\n                            >\n                                {labels.topUpAccount}\n                            </DropdownItem>\n                            <DropdownItem\n                                type=\"button\"\n                                onClick={() => {\n                                    close();\n                                    logout();\n                                }}\n                            >\n                                {labels.logout}\n                            </DropdownItem>\n                        </div>\n                    )}\n                </Dropdown>\n            </WhenLoggedIn>\n        </div>\n    );\n}\n","import { clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"polli\" });\n\n/** Internal class merge for polli:-prefixed package primitive classes. */\nexport function cn(...inputs: (string | undefined | null | false)[]) {\n    return twMerge(clsx(...inputs));\n}\n","import type { FC } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\n\ntype ChevronIconProps = {\n    /** Rotate 180° when expanded/open. */\n    expanded?: boolean;\n    className?: string;\n};\n\n/**\n * Canonical chevron used for collapsibles, dropdown triggers, and select pills\n * across the app. One icon everywhere.\n */\nexport const ChevronIcon: FC<ChevronIconProps> = ({ expanded, className }) => (\n    <svg\n        aria-hidden=\"true\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 12 12\"\n        className={cn(\n            \"polli:shrink-0 polli:transition-transform polli:duration-200 polli:ease-out\",\n            expanded && \"polli:rotate-180\",\n            className,\n        )}\n    >\n        <path\n            d=\"M3 4.5 6 7.5l3-3\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n        />\n    </svg>\n);\n","import { Popover } from \"@ark-ui/react/popover\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport type { FC, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nconst DEFAULT_PANEL =\n    \"polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg\";\n\nexport type DropdownProps = {\n    theme: ThemeName;\n    /** Trigger element; receives the current open state (e.g. to rotate a chevron). */\n    trigger: (open: boolean) => ReactNode;\n    /** Panel content. As a function, receives `close` to dismiss after a selection. */\n    children: ReactNode | ((close: () => void) => ReactNode);\n    /** Panel placement relative to the trigger. */\n    align?: \"start\" | \"end\";\n    /** Controlled open state. Omit to let the Dropdown manage its own. */\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    /** Appended after the surface (widths, padding, max-height…). */\n    className?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = ({\n    theme,\n    trigger,\n    children,\n    align = \"start\",\n    open: openProp,\n    onOpenChange,\n    className,\n}) => {\n    const [internalOpen, setInternalOpen] = useState(false);\n    const isControlled = openProp !== undefined;\n    const open = isControlled ? openProp : internalOpen;\n\n    const setOpen = (next: boolean) => {\n        if (!isControlled) setInternalOpen(next);\n        onOpenChange?.(next);\n    };\n\n    return (\n        <Popover.Root\n            open={open}\n            onOpenChange={(details) => setOpen(details.open)}\n            positioning={{\n                placement: align === \"end\" ? \"bottom-end\" : \"bottom-start\",\n            }}\n        >\n            <Popover.Trigger asChild>{trigger(open)}</Popover.Trigger>\n            <Portal>\n                <Popover.Positioner>\n                    <Popover.Content\n                        data-theme={theme}\n                        className={cn(\n                            \"polli:z-50 polli:overflow-hidden polli:focus:outline-none\",\n                            DEFAULT_PANEL,\n                            className,\n                        )}\n                    >\n                        {typeof children === \"function\"\n                            ? children(() => setOpen(false))\n                            : children}\n                    </Popover.Content>\n                </Popover.Positioner>\n            </Portal>\n        </Popover.Root>\n    );\n};\n","import type { PropsWithChildren } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\n\ntype BaseDropdownItemProps = {\n    className?: string;\n};\n\nexport type DropdownItemProps<T extends React.ElementType = \"button\"> =\n    PropsWithChildren<BaseDropdownItemProps> & {\n        as?: T;\n    } & Omit<\n            React.ComponentPropsWithoutRef<T>,\n            keyof BaseDropdownItemProps | \"as\"\n        >;\n\nexport function DropdownItem<T extends React.ElementType = \"button\">({\n    as,\n    className,\n    children,\n    ...rest\n}: DropdownItemProps<T>) {\n    const Component: React.ElementType = as || \"button\";\n    return (\n        <Component\n            {...(Component === \"button\" ? { type: \"button\" } : undefined)}\n            {...rest}\n            className={cn(\n                \"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\",\n                className,\n            )}\n        >\n            {children}\n        </Component>\n    );\n}\n","import { useAuthActions, useAuthState } from \"@pollinations/sdk/react\";\nimport type { ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"../../primitives/Button.tsx\";\n\nexport type LoginButtonProps = Omit<\n    ButtonProps<\"button\">,\n    \"as\" | \"onClick\" | \"children\"\n> & {\n    children: ReactNode;\n};\n\n/** Button that kicks off the auth redirect. `null` when already logged in. */\nexport function LoginButton({ children, ...buttonProps }: LoginButtonProps) {\n    const { isLoggedIn } = useAuthState();\n    const { login } = useAuthActions();\n    if (isLoggedIn) return null;\n    return (\n        <Button {...buttonProps} onClick={() => login()}>\n            {children}\n        </Button>\n    );\n}\n","import type { PropsWithChildren } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\n/** Button only supports `danger`. Label/status color recipes live on Chip. */\ntype ButtonIntent = \"danger\";\n\nconst sizes = {\n    sm: \"polli:px-2 polli:pt-0.5 polli:pb-1\",\n    md: \"polli:px-4 polli:pt-1.5 polli:pb-2\",\n    lg: \"polli:px-6 polli:py-3\",\n} as const;\n\n// Cascade-driven base — reads [data-theme] vars.\nconst themeClasses =\n    \"polli:bg-theme-bg-active polli:text-theme-text-base \" +\n    \"polli:hover:bg-theme-bg-hover polli:transition-colors\";\n\n// Single intent: danger. Soft recipe — light tile + deep text, slightly\n// deeper bg on hover. No filled CTAs anywhere.\nconst intentClasses: Record<ButtonIntent, string> = {\n    danger:\n        \"polli:bg-intent-danger-bg-light polli:text-intent-danger-text \" +\n        \"polli:hover:bg-intent-danger-bg-hover polli:transition-colors\",\n};\n\ntype BaseButtonProps = {\n    /** Override the cascade theme for this button's subtree. Ignored when `intent` is set. */\n    theme?: ThemeName;\n    /** Only `\"danger\"` for now. */\n    intent?: ButtonIntent;\n    size?: keyof typeof sizes;\n    className?: string;\n    disabled?: boolean;\n};\n\nconst buttonClasses = ({\n    theme: _theme,\n    intent,\n    size,\n    className,\n    disabled,\n}: BaseButtonProps & { disabled?: boolean }) => {\n    const colorClasses = intent ? intentClasses[intent] : themeClasses;\n    return cn(\n        \"polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:self-center polli:font-medium polli:leading-normal polli:box-border\",\n        disabled\n            ? \"polli:opacity-50 polli:cursor-not-allowed\"\n            : \"polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer\",\n        colorClasses,\n        sizes[size || \"md\"],\n        className,\n    );\n};\n\nexport type ButtonProps<T extends React.ElementType = \"button\"> =\n    PropsWithChildren<BaseButtonProps> & {\n        as?: T;\n    } & Omit<React.ComponentPropsWithoutRef<T>, keyof BaseButtonProps | \"as\">;\n\nexport function Button<T extends React.ElementType = \"button\">({\n    as,\n    children,\n    theme,\n    intent,\n    size,\n    className,\n    disabled,\n    ...buttonProps\n}: ButtonProps<T>) {\n    const Component: React.ElementType = as || \"button\";\n\n    return (\n        <Component\n            // Cascade override only applies when `intent` is unset.\n            data-theme={intent ? undefined : theme}\n            data-intent={intent}\n            className={buttonClasses({\n                theme,\n                intent,\n                size,\n                className,\n                disabled,\n            })}\n            disabled={disabled}\n            {...buttonProps}\n        >\n            {children}\n        </Component>\n    );\n}\n","import { useAccountProfile, useAuthState } from \"@pollinations/sdk/react\";\nimport { cn } from \"../../lib/cn.ts\";\n\nexport type UserAvatarProps = {\n    size?: \"sm\" | \"md\" | \"lg\";\n    className?: string;\n};\n\nconst sizeClass = {\n    sm: \"polli:w-6 polli:h-6 polli:text-xs\",\n    md: \"polli:w-9 polli:h-9 polli:text-sm\",\n    lg: \"polli:w-12 polli:h-12 polli:text-base\",\n} as const;\n\nfunction initials(name: string): string | null {\n    const parts = name.trim().split(/\\s+/).filter(Boolean);\n    if (parts.length === 0) return null;\n    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase() || null;\n    const first = parts[0][0] ?? \"\";\n    const last = parts[parts.length - 1][0] ?? \"\";\n    return (first + last).toUpperCase() || null;\n}\n\n/** Avatar from `profile.image`, or initials from `profile.name`. `null` otherwise. */\nexport function UserAvatar({ size = \"md\", className }: UserAvatarProps) {\n    const { isLoggedIn } = useAuthState();\n    const { data: profile } = useAccountProfile({ enabled: isLoggedIn });\n    if (!isLoggedIn) return null;\n\n    const base = cn(\n        \"polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:overflow-hidden polli:bg-theme-bg-pale polli:text-theme-text-strong polli:font-semibold polli:select-none\",\n        sizeClass[size],\n        className,\n    );\n\n    if (profile?.image) {\n        return (\n            <img\n                data-polli=\"user-avatar\"\n                src={profile.image}\n                alt={profile.name ?? \"\"}\n                className={base}\n            />\n        );\n    }\n    const label = profile?.name ? initials(profile.name) : null;\n    if (!label) return null;\n    return (\n        <div\n            data-polli=\"user-avatar\"\n            role=\"img\"\n            aria-label={profile?.name ?? undefined}\n            className={base}\n        >\n            {label}\n        </div>\n    );\n}\n","import { useAccountProfile, useAuthState } from \"@pollinations/sdk/react\";\n\nexport type UserNameProps = { className?: string };\n\n/**\n * Renders the user's display name. Falls back to GitHub username when the\n * `profile` scope was not granted (or `name` is empty). `null` when logged\n * out, or when neither name nor GitHub username is available.\n */\nexport function UserName({ className }: UserNameProps) {\n    const { isLoggedIn } = useAuthState();\n    const { data: profile } = useAccountProfile({ enabled: isLoggedIn });\n    if (!isLoggedIn || !profile) return null;\n    const display = profile.name || profile.githubUsername;\n    if (!display) return null;\n    return (\n        <span data-polli=\"user-name\" className={className}>\n            {display}\n        </span>\n    );\n}\n","import { useAuthState } from \"@pollinations/sdk/react\";\nimport { Fragment, type ReactNode } from \"react\";\n\nexport type WhenLoggedInProps = { children: ReactNode };\n\n/** Renders `children` only when a user is signed in. */\nexport function WhenLoggedIn({ children }: WhenLoggedInProps) {\n    const { isLoggedIn } = useAuthState();\n    if (!isLoggedIn) return null;\n    return <Fragment>{children}</Fragment>;\n}\n","import { useAuthState } from \"@pollinations/sdk/react\";\nimport { Fragment, type ReactNode } from \"react\";\n\nexport type WhenLoggedOutProps = { children: ReactNode };\n\n/** Renders `children` only when no user is signed in. */\nexport function WhenLoggedOut({ children }: WhenLoggedOutProps) {\n    const { isLoggedIn } = useAuthState();\n    if (isLoggedIn) return null;\n    return <Fragment>{children}</Fragment>;\n}\n","import { useAccountBalance, useAuthState } from \"@pollinations/sdk/react\";\nimport { cn } from \"../../lib/cn.ts\";\nimport { Chip } from \"../../primitives/Chip.tsx\";\nimport { formatPollen } from \"./format-pollen.ts\";\n\nexport type BalanceProps = { className?: string };\n\n/** Renders the logged-in user's pollen balance. `null` until loaded. */\nexport function Balance({ className }: BalanceProps = {}) {\n    const { isLoggedIn } = useAuthState();\n    const { data: balance } = useAccountBalance({ enabled: isLoggedIn });\n    if (!isLoggedIn || balance == null) return null;\n    return (\n        <Chip\n            data-polli=\"balance\"\n            className={cn(\"polli:tabular-nums\", className)}\n        >\n            {formatPollen(balance.balance)} pollen\n        </Chip>\n    );\n}\n","import type { ComponentPropsWithoutRef, FC } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\n/** Semantic chip labels for status and metadata badges. */\ntype ChipIntent =\n    | \"news\"\n    | \"alpha\"\n    | \"neutral\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\";\n\nconst chipSizes = {\n    sm: \"polli:px-2 polli:py-0.5 polli:text-xs\",\n    md: \"polli:px-2.5 polli:py-0.5 polli:text-sm\",\n    lg: \"polli:px-3 polli:py-1 polli:text-sm\",\n} as const;\n\nconst intentClasses: Record<ChipIntent, string> = {\n    news: \"polli:bg-intent-news-bg-light polli:text-intent-news-text\",\n    alpha: \"polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text\",\n    neutral: \"polli:bg-ink-100/80 polli:text-ink-900\",\n    success: \"polli:bg-intent-success-bg-light polli:text-intent-success-text\",\n    warning: \"polli:bg-intent-warning-bg-light polli:text-intent-warning-text\",\n    danger: \"polli:bg-intent-danger-bg-light polli:text-intent-danger-text\",\n};\n\nexport type ChipProps = ComponentPropsWithoutRef<\"span\"> & {\n    /** Override the cascade theme for this chip's subtree. */\n    theme?: ThemeName;\n    /** Semantic intent. Wins over `theme` when set. */\n    intent?: ChipIntent;\n    size?: keyof typeof chipSizes;\n};\n\n// Static, rectangular colored container. Round shapes are reserved for buttons.\n// Reads `bg-theme-bg-active` / `text-theme-text-strong` from the cascade unless\n// `intent` is set (semantic, theme-independent).\nexport const Chip: FC<ChipProps> = ({\n    theme,\n    intent,\n    size = \"md\",\n    className,\n    children,\n    ...rest\n}) => {\n    const intentClass = intent\n        ? intentClasses[intent]\n        : \"polli:bg-theme-bg-active polli:text-theme-text-strong\";\n    return (\n        <span\n            {...rest}\n            data-theme={theme}\n            className={cn(\n                \"polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-normal\",\n                chipSizes[size],\n                intentClass,\n                className,\n            )}\n        >\n            {children}\n        </span>\n    );\n};\n","// 5-digit budget for pollen display. Integer takes its space, decimals fill\n// the remainder (capped at 4), floor toward -infinity, trailing zeros stripped.\n// Integers needing >=6 digits switch to compact (K/M/B, 3 sig figs).\n// Decimal point and minus sign do not count toward the budget.\n\nconst BUDGET = 5;\nconst MAX_DECIMALS = 4;\nconst COMPACT_THRESHOLD = 100_000;\n\nfunction floorTo(value: number, decimals: number): number {\n    const factor = 10 ** decimals;\n    return Math.floor(value * factor) / factor;\n}\n\nfunction formatCompact(value: number): string {\n    const abs = Math.abs(value);\n    const sign = value < 0 ? \"-\" : \"\";\n    const [unit, scale] =\n        abs >= 1e9\n            ? ([\"B\", 1e9] as const)\n            : abs >= 1e6\n              ? ([\"M\", 1e6] as const)\n              : ([\"K\", 1e3] as const);\n    const ratio = abs / scale;\n    const intDigits = Math.max(1, Math.floor(Math.log10(ratio)) + 1);\n    const decimals = Math.max(0, 3 - intDigits);\n    const floored = floorTo(ratio, decimals);\n    return `${sign}${Number(floored.toFixed(decimals)).toString()}${unit}`;\n}\n\nexport function formatPollen(value: number): string {\n    if (!Number.isFinite(value) || value === 0) return \"0\";\n\n    const abs = Math.abs(value);\n\n    if (abs >= COMPACT_THRESHOLD) return formatCompact(value);\n\n    const intDigits = abs >= 1 ? Math.floor(Math.log10(abs)) + 1 : 1;\n    const decimals = Math.min(MAX_DECIMALS, Math.max(0, BUDGET - intDigits));\n    const floored = floorTo(value, decimals);\n    if (floored === 0) return \"0\";\n    return Number(floored.toFixed(decimals)).toString();\n}\n"],"mappings":"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","names":["useAuthActions","jsx","jsx","jsx","jsx","useAuthState","jsx","useAuthState","useAccountProfile","useAuthState","jsx","useAuthState","jsx","useAuthState","Fragment","jsx","useAuthState","jsx","intentClasses","jsxs","useAuthState","jsx","jsxs","useAuthActions"]}

package/dist/app.css

@@ -5,6 +5,8 @@
 /* Tailwind utility surface for Pollinations UI app classes.
    Values stay anchored to package-owned `--polli-*` tokens. */
 @theme inline {
+    --color-*: initial;
+
     --font-heading:                 var(--polli-font-heading);
     --font-subheading:              var(--polli-font-subheading);
     --font-body:                    var(--polli-font-body);
@@ -12,6 +14,24 @@
     --text-micro:                   var(--polli-text-micro);
     --text-base:                    var(--polli-text-base);
 
+    --color-transparent:            transparent;
+    --color-current:                currentColor;
+    --color-inherit:                inherit;
+
+    --color-brand-dark:             var(--polli-color-brand-dark);
+
+    --color-ink-50:                 var(--polli-color-ink-50);
+    --color-ink-100:                var(--polli-color-ink-100);
+    --color-ink-200:                var(--polli-color-ink-200);
+    --color-ink-300:                var(--polli-color-ink-300);
+    --color-ink-400:                var(--polli-color-ink-400);
+    --color-ink-500:                var(--polli-color-ink-500);
+    --color-ink-600:                var(--polli-color-ink-600);
+    --color-ink-700:                var(--polli-color-ink-700);
+    --color-ink-800:                var(--polli-color-ink-800);
+    --color-ink-900:                var(--polli-color-ink-900);
+    --color-ink-950:                var(--polli-color-ink-950);
+
     --color-theme-text-base:        var(--polli-color-text-base);
     --color-theme-text-strong:      var(--polli-color-text-strong);
     --color-theme-text-soft:        var(--polli-color-text-soft);
@@ -23,9 +43,80 @@
     --color-theme-bg-pale:          var(--polli-color-bg-pale);
 
     --color-intent-danger-bg-light: var(--polli-color-danger-bg-light);
+    --color-intent-danger-bg-hover: var(--polli-color-danger-bg-hover);
     --color-intent-danger-text:     var(--polli-color-danger-text);
     --color-intent-danger-border:   var(--polli-color-danger-border);
-    --color-surface-white:          var(--polli-color-surface-white);
+    --color-intent-danger-50:       var(--polli-color-danger-bg-light);
+    --color-intent-danger-200:      var(--polli-color-danger-border);
+    --color-intent-danger-500:      var(--polli-color-danger-text);
+    --color-intent-danger-600:      var(--polli-color-danger-text);
+    --color-intent-danger-700:      var(--polli-color-danger-text);
+    --color-intent-danger-800:      var(--polli-color-danger-text);
+
+    --color-intent-success-bg-light: var(--polli-color-success-bg-light);
+    --color-intent-success-text:    var(--polli-color-success-text);
+    --color-intent-success-100:     var(--polli-color-success-bg-light);
+    --color-intent-success-600:     var(--polli-color-success-text);
+    --color-intent-success-700:     var(--polli-color-success-text);
+    --color-intent-success-800:     var(--polli-color-success-text);
+
+    --color-intent-warning-bg-light: var(--polli-color-warning-bg-light);
+    --color-intent-warning-text:    var(--polli-color-warning-text);
+
+    --color-intent-news-bg-light:   var(--polli-color-news-bg-light);
+    --color-intent-news-text:       var(--polli-color-news-text);
+
+    --color-intent-alpha-bg-light:  var(--polli-color-alpha-bg-light);
+    --color-intent-alpha-text:      var(--polli-color-alpha-text);
+
+    --color-surface-opaque:         var(--polli-color-surface-opaque);
+    --color-surface-translucent:    var(--polli-color-surface-translucent);
+    --color-surface-white:          var(--polli-color-surface-translucent);
+
+    --color-accent-amber-50:        var(--polli-color-accent-amber-50);
+    --color-accent-amber-100:       var(--polli-color-accent-amber-100);
+    --color-accent-amber-200:       var(--polli-color-accent-amber-200);
+    --color-accent-amber-300:       var(--polli-color-accent-amber-300);
+    --color-accent-amber-400:       var(--polli-color-accent-amber-400);
+    --color-accent-amber-500:       var(--polli-color-accent-amber-500);
+    --color-accent-amber-600:       var(--polli-color-accent-amber-600);
+    --color-accent-amber-700:       var(--polli-color-accent-amber-700);
+    --color-accent-amber-800:       var(--polli-color-accent-amber-800);
+    --color-accent-amber-900:       var(--polli-color-accent-amber-900);
+    --color-accent-amber-950:       var(--polli-color-accent-amber-950);
+
+    --color-accent-blue-50:         var(--polli-color-accent-blue-50);
+    --color-accent-blue-100:        var(--polli-color-accent-blue-100);
+    --color-accent-blue-200:        var(--polli-color-accent-blue-200);
+    --color-accent-blue-300:        var(--polli-color-accent-blue-300);
+    --color-accent-blue-400:        var(--polli-color-accent-blue-400);
+    --color-accent-blue-500:        var(--polli-color-accent-blue-500);
+    --color-accent-blue-600:        var(--polli-color-accent-blue-600);
+    --color-accent-blue-700:        var(--polli-color-accent-blue-700);
+    --color-accent-blue-800:        var(--polli-color-accent-blue-800);
+    --color-accent-blue-900:        var(--polli-color-accent-blue-900);
+    --color-accent-blue-950:        var(--polli-color-accent-blue-950);
+
+    --color-accent-emerald-100:     var(--polli-color-accent-emerald-100);
+    --color-accent-emerald-600:     var(--polli-color-accent-emerald-600);
+
+    --color-accent-teal-100:        var(--polli-color-accent-teal-100);
+    --color-accent-teal-200:        var(--polli-color-accent-teal-200);
+    --color-accent-teal-700:        var(--polli-color-accent-teal-700);
+
+    --color-accent-violet-100:      var(--polli-color-accent-violet-100);
+    --color-accent-violet-300:      var(--polli-color-accent-violet-300);
+    --color-accent-violet-400:      var(--polli-color-accent-violet-400);
+    --color-accent-violet-600:      var(--polli-color-accent-violet-600);
+    --color-accent-violet-700:      var(--polli-color-accent-violet-700);
+    --color-accent-violet-800:      var(--polli-color-accent-violet-800);
+    --color-accent-violet-950:      var(--polli-color-accent-violet-950);
+
+    --color-accent-purple-600:      var(--polli-color-accent-purple-600);
+    --color-accent-purple-700:      var(--polli-color-accent-purple-700);
+    --color-accent-purple-800:      var(--polli-color-accent-purple-800);
+
+    --color-accent-pink-500:        var(--polli-color-accent-pink-500);
 }
 
 @layer base {
@@ -41,12 +132,12 @@
     }
 
     html.polli-ui-root * {
-        @apply border-gray-800;
+        @apply border-ink-800;
     }
 
     body.polli-ui-body {
         max-width: 800px;
-        @apply mx-auto min-h-screen overflow-x-hidden bg-emerald-100 px-4 pt-4 pb-8 font-body font-medium text-base text-green-950 sm:px-6 md:px-8;
+        @apply mx-auto min-h-screen overflow-x-hidden bg-theme-bg-pale px-4 pt-4 pb-8 font-body font-medium text-base text-theme-text-strong sm:px-6 md:px-8;
     }
 
     html.polli-ui-shell,

package/dist/auth/index.cjs

@@ -90,7 +90,7 @@ var Dialog = ({
             import_dialog.Dialog.Backdrop,
             {
               className: cn(
-                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
+                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-ink-950/50",
                 backdropClassName
               )
             }
@@ -111,7 +111,7 @@ var Dialog = ({
                   "aria-label": ariaLabel,
                   "aria-labelledby": labelledBy,
                   className: cn(
-                    "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",
+                    "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-surface-opaque polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none",
                     sizeClasses[size],
                     contentClassName
                   ),

package/dist/auth/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modules/auth/index.ts","../../src/primitives/Dialog.tsx","../../src/lib/cn.ts","../../src/modules/auth/AuthModal.tsx"],"sourcesContent":["export {\n    AuthInfoCard,\n    type AuthInfoCardProps,\n    AuthModal,\n    AuthModalHeader,\n    type AuthModalHeaderProps,\n    AuthModalLoading,\n    type AuthModalProps,\n    ErrorBanner,\n} from \"./AuthModal.tsx\";\n","import { Dialog as ArkDialog } from \"@ark-ui/react/dialog\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport type { FC, ReactNode } from \"react\";\nimport { useRef } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nconst sizeClasses = {\n    sm: \"polli:max-w-md\",\n    md: \"polli:max-w-xl\",\n    lg: \"polli:max-w-2xl\",\n} as const;\n\nexport type DialogProps = {\n    open: boolean;\n    onOpenChange?: (open: boolean) => void;\n    trigger?: ReactNode;\n    triggerAsChild?: boolean;\n    triggerClassName?: string;\n    title?: ReactNode;\n    titleClassName?: string;\n    ariaLabel?: string;\n    labelledBy?: string;\n    theme?: ThemeName;\n    size?: keyof typeof sizeClasses;\n    showBackdrop?: boolean;\n    backdropClassName?: string;\n    positionerClassName?: string;\n    contentClassName?: string;\n    children: ReactNode;\n};\n\nexport const Dialog: FC<DialogProps> = ({\n    open,\n    onOpenChange,\n    trigger,\n    triggerAsChild = false,\n    triggerClassName,\n    title,\n    titleClassName,\n    ariaLabel,\n    labelledBy,\n    theme = \"blue\",\n    size = \"md\",\n    showBackdrop = true,\n    backdropClassName,\n    positionerClassName,\n    contentClassName,\n    children,\n}) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <ArkDialog.Root\n            open={open}\n            initialFocusEl={() => contentRef.current}\n            onOpenChange={(details) => onOpenChange?.(details.open)}\n        >\n            {trigger && (\n                <ArkDialog.Trigger\n                    asChild={triggerAsChild}\n                    className={triggerClassName}\n                >\n                    {trigger}\n                </ArkDialog.Trigger>\n            )}\n            <Portal>\n                {showBackdrop && (\n                    <ArkDialog.Backdrop\n                        className={cn(\n                            \"polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50\",\n                            backdropClassName,\n                        )}\n                    />\n                )}\n                <ArkDialog.Positioner\n                    data-theme={theme}\n                    className={cn(\n                        \"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\",\n                        positionerClassName,\n                    )}\n                >\n                    <ArkDialog.Content\n                        ref={contentRef}\n                        data-theme={theme}\n                        aria-label={ariaLabel}\n                        aria-labelledby={labelledBy}\n                        className={cn(\n                            \"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\",\n                            sizeClasses[size],\n                            contentClassName,\n                        )}\n                    >\n                        {title && (\n                            <DialogTitle\n                                className={cn(\n                                    \"polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong\",\n                                    titleClassName,\n                                )}\n                            >\n                                {title}\n                            </DialogTitle>\n                        )}\n                        {children}\n                    </ArkDialog.Content>\n                </ArkDialog.Positioner>\n            </Portal>\n        </ArkDialog.Root>\n    );\n};\n\nexport const DialogTitle = ArkDialog.Title;\n","import { clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"polli\" });\n\n/** Internal class merge for polli:-prefixed package primitive classes. */\nexport function cn(...inputs: (string | undefined | null | false)[]) {\n    return twMerge(clsx(...inputs));\n}\n","import type { CSSProperties, ReactNode } from \"react\";\nimport logoUrl from \"../../assets/logo.svg\";\nimport { Dialog } from \"../../primitives/Dialog.tsx\";\n\nconst authLogoMaskUrl = `url('${logoUrl}')`;\n\nconst authLogoMask: CSSProperties = {\n    WebkitMaskImage: authLogoMaskUrl,\n    WebkitMaskPosition: \"center\",\n    WebkitMaskRepeat: \"no-repeat\",\n    WebkitMaskSize: \"contain\",\n    maskImage: authLogoMaskUrl,\n    maskPosition: \"center\",\n    maskRepeat: \"no-repeat\",\n    maskSize: \"contain\",\n};\n\nexport type AuthModalProps = {\n    children: ReactNode;\n    dialog?: {\n        label?: string;\n        labelledBy?: string;\n    };\n    tone?: \"default\" | \"error\";\n};\n\nexport function AuthModal({\n    children,\n    dialog,\n    tone = \"default\",\n}: AuthModalProps) {\n    const borderClass =\n        tone === \"error\"\n            ? \"polli:border-intent-danger-border\"\n            : \"polli:border-theme-border\";\n    return (\n        <Dialog\n            open\n            theme=\"amber\"\n            showBackdrop={false}\n            ariaLabel={dialog?.label}\n            labelledBy={dialog?.labelledBy}\n            positionerClassName=\"polli:items-start polli:overflow-y-auto polli:bg-theme-bg-pale\"\n            contentClassName={`polli:bg-surface-white polli:border-2 ${borderClass} polli:rounded-lg polli:shadow-lg polli:max-w-xl polli:w-full polli:my-auto`}\n        >\n            {children}\n        </Dialog>\n    );\n}\n\nexport type AuthModalHeaderProps = {\n    children?: ReactNode;\n};\n\nexport function AuthModalHeader({ children }: AuthModalHeaderProps) {\n    const logo = (\n        <a\n            href=\"https://pollinations.ai\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            tabIndex={-1}\n            className=\"polli:block polli:shrink-0 polli:text-theme-text-strong polli:focus:outline-none\"\n            aria-label=\"pollinations.ai\"\n        >\n            <span className=\"polli:sr-only\">pollinations.ai</span>\n            <span\n                aria-hidden=\"true\"\n                className=\"polli:block polli:h-8 polli:w-8 polli:bg-current\"\n                style={authLogoMask}\n            />\n        </a>\n    );\n    if (!children) {\n        return (\n            <div className=\"polli:flex polli:justify-start polli:px-6 polli:pt-6\">\n                {logo}\n            </div>\n        );\n    }\n    return (\n        <div className=\"polli:px-6 polli:pt-6 polli:pb-2\">\n            <div className=\"polli:flex polli:items-center polli:justify-between polli:gap-3\">\n                {logo}\n                {children}\n            </div>\n        </div>\n    );\n}\n\nexport function AuthModalLoading() {\n    return (\n        <AuthModal>\n            <AuthModalHeader />\n            <div className=\"polli:px-8 polli:pt-2 polli:pb-8 polli:text-center\">\n                <p className=\"polli:text-theme-text-strong\">Loading...</p>\n            </div>\n        </AuthModal>\n    );\n}\n\nexport function ErrorBanner({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:p-4\">\n            <p className=\"polli:text-sm polli:text-intent-danger-text\">\n                {children}\n            </p>\n        </div>\n    );\n}\n\nexport type AuthInfoCardProps = {\n    title?: string;\n    children: ReactNode;\n};\n\nexport function AuthInfoCard({\n    title = \"Authorize\",\n    children,\n}: AuthInfoCardProps) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-theme-bg-pale polli:p-4\">\n            <p className=\"polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft\">\n                {title}\n            </p>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"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","names":["ArkDialog","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/modules/auth/index.ts","../../src/primitives/Dialog.tsx","../../src/lib/cn.ts","../../src/modules/auth/AuthModal.tsx"],"sourcesContent":["export {\n    AuthInfoCard,\n    type AuthInfoCardProps,\n    AuthModal,\n    AuthModalHeader,\n    type AuthModalHeaderProps,\n    AuthModalLoading,\n    type AuthModalProps,\n    ErrorBanner,\n} from \"./AuthModal.tsx\";\n","import { Dialog as ArkDialog } from \"@ark-ui/react/dialog\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport type { FC, ReactNode } from \"react\";\nimport { useRef } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nconst sizeClasses = {\n    sm: \"polli:max-w-md\",\n    md: \"polli:max-w-xl\",\n    lg: \"polli:max-w-2xl\",\n} as const;\n\nexport type DialogProps = {\n    open: boolean;\n    onOpenChange?: (open: boolean) => void;\n    trigger?: ReactNode;\n    triggerAsChild?: boolean;\n    triggerClassName?: string;\n    title?: ReactNode;\n    titleClassName?: string;\n    ariaLabel?: string;\n    labelledBy?: string;\n    theme?: ThemeName;\n    size?: keyof typeof sizeClasses;\n    showBackdrop?: boolean;\n    backdropClassName?: string;\n    positionerClassName?: string;\n    contentClassName?: string;\n    children: ReactNode;\n};\n\nexport const Dialog: FC<DialogProps> = ({\n    open,\n    onOpenChange,\n    trigger,\n    triggerAsChild = false,\n    triggerClassName,\n    title,\n    titleClassName,\n    ariaLabel,\n    labelledBy,\n    theme = \"blue\",\n    size = \"md\",\n    showBackdrop = true,\n    backdropClassName,\n    positionerClassName,\n    contentClassName,\n    children,\n}) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <ArkDialog.Root\n            open={open}\n            initialFocusEl={() => contentRef.current}\n            onOpenChange={(details) => onOpenChange?.(details.open)}\n        >\n            {trigger && (\n                <ArkDialog.Trigger\n                    asChild={triggerAsChild}\n                    className={triggerClassName}\n                >\n                    {trigger}\n                </ArkDialog.Trigger>\n            )}\n            <Portal>\n                {showBackdrop && (\n                    <ArkDialog.Backdrop\n                        className={cn(\n                            \"polli:fixed polli:inset-0 polli:z-[100] polli:bg-ink-950/50\",\n                            backdropClassName,\n                        )}\n                    />\n                )}\n                <ArkDialog.Positioner\n                    data-theme={theme}\n                    className={cn(\n                        \"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\",\n                        positionerClassName,\n                    )}\n                >\n                    <ArkDialog.Content\n                        ref={contentRef}\n                        data-theme={theme}\n                        aria-label={ariaLabel}\n                        aria-labelledby={labelledBy}\n                        className={cn(\n                            \"polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-surface-opaque polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none\",\n                            sizeClasses[size],\n                            contentClassName,\n                        )}\n                    >\n                        {title && (\n                            <DialogTitle\n                                className={cn(\n                                    \"polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong\",\n                                    titleClassName,\n                                )}\n                            >\n                                {title}\n                            </DialogTitle>\n                        )}\n                        {children}\n                    </ArkDialog.Content>\n                </ArkDialog.Positioner>\n            </Portal>\n        </ArkDialog.Root>\n    );\n};\n\nexport const DialogTitle = ArkDialog.Title;\n","import { clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"polli\" });\n\n/** Internal class merge for polli:-prefixed package primitive classes. */\nexport function cn(...inputs: (string | undefined | null | false)[]) {\n    return twMerge(clsx(...inputs));\n}\n","import type { CSSProperties, ReactNode } from \"react\";\nimport logoUrl from \"../../assets/logo.svg\";\nimport { Dialog } from \"../../primitives/Dialog.tsx\";\n\nconst authLogoMaskUrl = `url('${logoUrl}')`;\n\nconst authLogoMask: CSSProperties = {\n    WebkitMaskImage: authLogoMaskUrl,\n    WebkitMaskPosition: \"center\",\n    WebkitMaskRepeat: \"no-repeat\",\n    WebkitMaskSize: \"contain\",\n    maskImage: authLogoMaskUrl,\n    maskPosition: \"center\",\n    maskRepeat: \"no-repeat\",\n    maskSize: \"contain\",\n};\n\nexport type AuthModalProps = {\n    children: ReactNode;\n    dialog?: {\n        label?: string;\n        labelledBy?: string;\n    };\n    tone?: \"default\" | \"error\";\n};\n\nexport function AuthModal({\n    children,\n    dialog,\n    tone = \"default\",\n}: AuthModalProps) {\n    const borderClass =\n        tone === \"error\"\n            ? \"polli:border-intent-danger-border\"\n            : \"polli:border-theme-border\";\n    return (\n        <Dialog\n            open\n            theme=\"amber\"\n            showBackdrop={false}\n            ariaLabel={dialog?.label}\n            labelledBy={dialog?.labelledBy}\n            positionerClassName=\"polli:items-start polli:overflow-y-auto polli:bg-theme-bg-pale\"\n            contentClassName={`polli:bg-surface-white polli:border-2 ${borderClass} polli:rounded-lg polli:shadow-lg polli:max-w-xl polli:w-full polli:my-auto`}\n        >\n            {children}\n        </Dialog>\n    );\n}\n\nexport type AuthModalHeaderProps = {\n    children?: ReactNode;\n};\n\nexport function AuthModalHeader({ children }: AuthModalHeaderProps) {\n    const logo = (\n        <a\n            href=\"https://pollinations.ai\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            tabIndex={-1}\n            className=\"polli:block polli:shrink-0 polli:text-theme-text-strong polli:focus:outline-none\"\n            aria-label=\"pollinations.ai\"\n        >\n            <span className=\"polli:sr-only\">pollinations.ai</span>\n            <span\n                aria-hidden=\"true\"\n                className=\"polli:block polli:h-8 polli:w-8 polli:bg-current\"\n                style={authLogoMask}\n            />\n        </a>\n    );\n    if (!children) {\n        return (\n            <div className=\"polli:flex polli:justify-start polli:px-6 polli:pt-6\">\n                {logo}\n            </div>\n        );\n    }\n    return (\n        <div className=\"polli:px-6 polli:pt-6 polli:pb-2\">\n            <div className=\"polli:flex polli:items-center polli:justify-between polli:gap-3\">\n                {logo}\n                {children}\n            </div>\n        </div>\n    );\n}\n\nexport function AuthModalLoading() {\n    return (\n        <AuthModal>\n            <AuthModalHeader />\n            <div className=\"polli:px-8 polli:pt-2 polli:pb-8 polli:text-center\">\n                <p className=\"polli:text-theme-text-strong\">Loading...</p>\n            </div>\n        </AuthModal>\n    );\n}\n\nexport function ErrorBanner({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:p-4\">\n            <p className=\"polli:text-sm polli:text-intent-danger-text\">\n                {children}\n            </p>\n        </div>\n    );\n}\n\nexport type AuthInfoCardProps = {\n    title?: string;\n    children: ReactNode;\n};\n\nexport function AuthInfoCard({\n    title = \"Authorize\",\n    children,\n}: AuthInfoCardProps) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-theme-bg-pale polli:p-4\">\n            <p className=\"polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft\">\n                {title}\n            </p>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A;;;;;ACAA,oBAAoC;AACpC,oBAAuB;AAEvB,mBAAuB;;;ACHvB,kBAAqB;AACrB,4BAAoC;AAEpC,IAAM,cAAU,2CAAoB,EAAE,QAAQ,QAAQ,CAAC;AAGhD,SAAS,MAAM,QAA+C;AACjE,SAAO,YAAQ,kBAAK,GAAG,MAAM,CAAC;AAClC;;;ADmDgB;AApDhB,IAAM,cAAc;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAqBO,IAAM,SAA0B,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,iBAAa,qBAAuB,IAAI;AAE9C,SACI;AAAA,IAAC,cAAAA,OAAU;AAAA,IAAV;AAAA,MACG;AAAA,MACA,gBAAgB,MAAM,WAAW;AAAA,MACjC,cAAc,CAAC,YAAY,eAAe,QAAQ,IAAI;AAAA,MAErD;AAAA,mBACG;AAAA,UAAC,cAAAA,OAAU;AAAA,UAAV;AAAA,YACG,SAAS;AAAA,YACT,WAAW;AAAA,YAEV;AAAA;AAAA,QACL;AAAA,QAEJ,6CAAC,wBACI;AAAA,0BACG;AAAA,YAAC,cAAAA,OAAU;AAAA,YAAV;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA;AAAA,cACJ;AAAA;AAAA,UACJ;AAAA,UAEJ;AAAA,YAAC,cAAAA,OAAU;AAAA,YAAV;AAAA,cACG,cAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA;AAAA,cACJ;AAAA,cAEA;AAAA,gBAAC,cAAAA,OAAU;AAAA,gBAAV;AAAA,kBACG,KAAK;AAAA,kBACL,cAAY;AAAA,kBACZ,cAAY;AAAA,kBACZ,mBAAiB;AAAA,kBACjB,WAAW;AAAA,oBACP;AAAA,oBACA,YAAY,IAAI;AAAA,oBAChB;AAAA,kBACJ;AAAA,kBAEC;AAAA,6BACG;AAAA,sBAAC;AAAA;AAAA,wBACG,WAAW;AAAA,0BACP;AAAA,0BACA;AAAA,wBACJ;AAAA,wBAEC;AAAA;AAAA,oBACL;AAAA,oBAEH;AAAA;AAAA;AAAA,cACL;AAAA;AAAA,UACJ;AAAA,WACJ;AAAA;AAAA;AAAA,EACJ;AAER;AAEO,IAAM,cAAc,cAAAA,OAAU;;;AE3E7B,IAAAC,sBAAA;AAhCR,IAAM,kBAAkB,QAAQ,YAAO;AAEvC,IAAM,eAA8B;AAAA,EAChC,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AACd;AAWO,SAAS,UAAU;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AACX,GAAmB;AACf,QAAM,cACF,SAAS,UACH,sCACA;AACV,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAI;AAAA,MACJ,OAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAW,QAAQ;AAAA,MACnB,YAAY,QAAQ;AAAA,MACpB,qBAAoB;AAAA,MACpB,kBAAkB,yCAAyC,WAAW;AAAA,MAErE;AAAA;AAAA,EACL;AAER;AAMO,SAAS,gBAAgB,EAAE,SAAS,GAAyB;AAChE,QAAM,OACF;AAAA,IAAC;AAAA;AAAA,MACG,MAAK;AAAA,MACL,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,UAAU;AAAA,MACV,WAAU;AAAA,MACV,cAAW;AAAA,MAEX;AAAA,qDAAC,UAAK,WAAU,iBAAgB,6BAAe;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACG,eAAY;AAAA,YACZ,WAAU;AAAA,YACV,OAAO;AAAA;AAAA,QACX;AAAA;AAAA;AAAA,EACJ;AAEJ,MAAI,CAAC,UAAU;AACX,WACI,6CAAC,SAAI,WAAU,wDACV,gBACL;AAAA,EAER;AACA,SACI,6CAAC,SAAI,WAAU,oCACX,wDAAC,SAAI,WAAU,mEACV;AAAA;AAAA,IACA;AAAA,KACL,GACJ;AAER;AAEO,SAAS,mBAAmB;AAC/B,SACI,8CAAC,aACG;AAAA,iDAAC,mBAAgB;AAAA,IACjB,6CAAC,SAAI,WAAU,sDACX,uDAAC,OAAE,WAAU,gCAA+B,wBAAU,GAC1D;AAAA,KACJ;AAER;AAEO,SAAS,YAAY,EAAE,SAAS,GAA4B;AAC/D,SACI,6CAAC,SAAI,WAAU,+GACX,uDAAC,OAAE,WAAU,+CACR,UACL,GACJ;AAER;AAOO,SAAS,aAAa;AAAA,EACzB,QAAQ;AAAA,EACR;AACJ,GAAsB;AAClB,SACI,8CAAC,SAAI,WAAU,8FACX;AAAA,iDAAC,OAAE,WAAU,+GACR,iBACL;AAAA,IACC;AAAA,KACL;AAER;","names":["ArkDialog","import_jsx_runtime"]}