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

package/dist/wallet/index.d.cts

@@ -1,30 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FC, ReactNode } from 'react';
-import { a as ChipProps } from '../Chip-SM52sUbZ.cjs';
-import '../theme-VMRlhqST.cjs';
+import { a as ChipProps } from '../Chip-v-ADv6cz.cjs';
+
+type AccountPollenSource = {
+    type: "wallet";
+    /** Undefined while the balance is unavailable. */
+    balances?: {
+        paid: number;
+        quest: number;
+    };
+} | {
+    type: "budget";
+    /** The app's remaining budget, never the owner's wallet total. `null` = unlimited. */
+    remaining?: number | null;
+    generationEnabled?: boolean;
+};
+/** Icon + amount; unlimited, exhausted, or empty states become a badge. */
+declare function AccountPollen({ source, topUpHref, }: {
+    source: AccountPollenSource;
+    /** Shown in the empty-wallet badge. A menu keeps recovery links in its dropdown. */
+    topUpHref?: string;
+}): react_jsx_runtime.JSX.Element | null;
 
 type WalletChipProps = Omit<ChipProps, "intent">;
 declare const PaidChip: FC<WalletChipProps>;
 declare const TierChip: FC<WalletChipProps>;
 
-declare const PAID_BALANCE_CHART_COLOR = "var(--polli-color-paid-pale)";
-declare const TIER_BALANCE_CHART_COLOR = "var(--polli-color-tier-pale)";
+declare const PAID_BALANCE_CHART_COLOR = "var(--polli-color-paid-soft)";
+declare const TIER_BALANCE_CHART_COLOR = "var(--polli-color-tier-soft)";
 
 declare function formatPollen(value: number): string;
 
 type WalletBalanceKind = "paid" | "tier";
-type WalletDotProps = {
+type WalletKindIconProps = {
     kind: WalletBalanceKind;
     className?: string;
 };
-declare const WalletDot: FC<WalletDotProps>;
+/** The paid/Quest marker: a card for paid balance or sprout for Quest Pollen. */
+declare const WalletKindIcon: FC<WalletKindIconProps>;
 type WalletBalanceCardProps = {
+    tone?: "balance" | "neutral";
     kind: WalletBalanceKind;
     label: ReactNode;
     value: ReactNode;
+    icon?: ReactNode;
     info?: ReactNode;
     footer?: ReactNode;
     className?: string;
 };
 declare const WalletBalanceCard: FC<WalletBalanceCardProps>;
 
-export { PAID_BALANCE_CHART_COLOR, PaidChip, TIER_BALANCE_CHART_COLOR, TierChip, WalletBalanceCard, type WalletBalanceCardProps, type WalletChipProps, WalletDot, type WalletDotProps, formatPollen };
+export { AccountPollen, PAID_BALANCE_CHART_COLOR, PaidChip, TIER_BALANCE_CHART_COLOR, TierChip, WalletBalanceCard, type WalletBalanceCardProps, type WalletChipProps, WalletKindIcon, type WalletKindIconProps, formatPollen };

package/dist/wallet/index.d.ts

@@ -1,30 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FC, ReactNode } from 'react';
-import { a as ChipProps } from '../Chip-C5impfYd.js';
-import '../theme-VMRlhqST.js';
+import { a as ChipProps } from '../Chip-v-ADv6cz.js';
+
+type AccountPollenSource = {
+    type: "wallet";
+    /** Undefined while the balance is unavailable. */
+    balances?: {
+        paid: number;
+        quest: number;
+    };
+} | {
+    type: "budget";
+    /** The app's remaining budget, never the owner's wallet total. `null` = unlimited. */
+    remaining?: number | null;
+    generationEnabled?: boolean;
+};
+/** Icon + amount; unlimited, exhausted, or empty states become a badge. */
+declare function AccountPollen({ source, topUpHref, }: {
+    source: AccountPollenSource;
+    /** Shown in the empty-wallet badge. A menu keeps recovery links in its dropdown. */
+    topUpHref?: string;
+}): react_jsx_runtime.JSX.Element | null;
 
 type WalletChipProps = Omit<ChipProps, "intent">;
 declare const PaidChip: FC<WalletChipProps>;
 declare const TierChip: FC<WalletChipProps>;
 
-declare const PAID_BALANCE_CHART_COLOR = "var(--polli-color-paid-pale)";
-declare const TIER_BALANCE_CHART_COLOR = "var(--polli-color-tier-pale)";
+declare const PAID_BALANCE_CHART_COLOR = "var(--polli-color-paid-soft)";
+declare const TIER_BALANCE_CHART_COLOR = "var(--polli-color-tier-soft)";
 
 declare function formatPollen(value: number): string;
 
 type WalletBalanceKind = "paid" | "tier";
-type WalletDotProps = {
+type WalletKindIconProps = {
     kind: WalletBalanceKind;
     className?: string;
 };
-declare const WalletDot: FC<WalletDotProps>;
+/** The paid/Quest marker: a card for paid balance or sprout for Quest Pollen. */
+declare const WalletKindIcon: FC<WalletKindIconProps>;
 type WalletBalanceCardProps = {
+    tone?: "balance" | "neutral";
     kind: WalletBalanceKind;
     label: ReactNode;
     value: ReactNode;
+    icon?: ReactNode;
     info?: ReactNode;
     footer?: ReactNode;
     className?: string;
 };
 declare const WalletBalanceCard: FC<WalletBalanceCardProps>;
 
-export { PAID_BALANCE_CHART_COLOR, PaidChip, TIER_BALANCE_CHART_COLOR, TierChip, WalletBalanceCard, type WalletBalanceCardProps, type WalletChipProps, WalletDot, type WalletDotProps, formatPollen };
+export { AccountPollen, PAID_BALANCE_CHART_COLOR, PaidChip, TIER_BALANCE_CHART_COLOR, TierChip, WalletBalanceCard, type WalletBalanceCardProps, type WalletChipProps, WalletKindIcon, type WalletKindIconProps, formatPollen };

package/dist/wallet/index.js

@@ -1,7 +1,10 @@
 // src/lib/cn.ts
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({ prefix: "polli" });
+var twMerge = extendTailwindMerge({
+  prefix: "polli",
+  extend: { theme: { text: ["micro"] } }
+});
 function cn(...inputs) {
   return twMerge(clsx(...inputs));
 }
@@ -9,20 +12,23 @@ function cn(...inputs) {
 // src/primitives/Chip.tsx
 import { jsx } 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",
-  lg: "polli:px-3 polli:py-1 polli:text-sm"
+  icon: "polli:h-5 polli:w-5 polli:p-0 polli:text-xs",
+  sm: "polli:h-5 polli:px-2 polli:text-xs",
+  md: "polli:h-6 polli:px-2.5 polli:text-sm",
+  lg: "polli:h-7 polli:px-3 polli:text-sm"
 };
 var intentClasses = {
   news: "polli:bg-intent-news-bg-light polli:text-intent-news-text",
+  new: "polli:bg-intent-new-bg-light polli:text-intent-new-text",
+  free: "polli:bg-intent-free-bg-light polli:text-intent-free-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-bright/15 polli:text-intent-success-text",
+  warning: "polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  info: "polli:bg-intent-info-bg-light polli:text-intent-info-text",
+  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
 };
 var Chip = ({
-  theme,
   intent,
   size = "md",
   className,
@@ -34,9 +40,8 @@ var Chip = ({
     "span",
     {
       ...rest,
-      "data-theme": theme,
       className: cn(
-        "polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-normal",
+        "polli:inline-flex polli:shrink-0 polli:items-center polli:justify-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-none",
         chipSizes[size],
         intentClass,
         className
@@ -46,22 +51,95 @@ var Chip = ({
   );
 };
 
-// src/modules/wallet/chips.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var PaidChip = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx2(Chip, { ...props, className: cn("polli-wallet-chip-paid", className), children });
-var TierChip = ({
+// src/lib/link.ts
+function isExternalHref(href, origin = globalThis.location?.origin) {
+  if (typeof href !== "string" || !/^(https?:)?\/\//i.test(href))
+    return false;
+  if (!origin) return true;
+  try {
+    return new URL(href, origin).origin !== origin;
+  } catch {
+    return false;
+  }
+}
+
+// src/primitives/icons/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var strokeProps = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function ExternalLinkIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx2("path", { d: "M7 17 17 7M9 7h8v8" }) });
+}
+function WalletIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
+    /* @__PURE__ */ jsx2("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__ */ jsx2("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
+  ] });
+}
+function CardIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2 10h20" })
+  ] });
+}
+function SproutIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M7 20h10" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 20c5.5-2.5.8-6.4 3-10" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z" })
+  ] });
+}
+function KeyIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m21 2-9.6 9.6" }),
+    /* @__PURE__ */ jsx2("path", { d: "m15.5 7.5 3 3L22 7l-3-3" })
+  ] });
+}
+
+// src/primitives/InlineLink.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function InlineLink({
+  as,
+  external,
+  showIcon = true,
+  size = "inherit",
+  tone = "accent",
   className,
   children,
-  ...props
-}) => /* @__PURE__ */ jsx2(Chip, { ...props, className: cn("polli-wallet-chip-tier", className), children });
-
-// src/modules/wallet/colors.ts
-var PAID_BALANCE_CHART_COLOR = "var(--polli-color-paid-pale)";
-var TIER_BALANCE_CHART_COLOR = "var(--polli-color-tier-pale)";
+  ...linkProps
+}) {
+  const Component = as || "a";
+  const isExternal = external ?? isExternalHref(linkProps.href);
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      target: isExternal && as !== "button" ? "_blank" : void 0,
+      rel: isExternal && as !== "button" ? "noopener noreferrer" : void 0,
+      className: ["polli-link", className].filter(Boolean).join(" "),
+      "data-size": size,
+      "data-tone": tone,
+      ...linkProps,
+      children: [
+        children,
+        showIcon && isExternal && /* @__PURE__ */ jsx3(
+          ExternalLinkIcon,
+          {
+            "aria-hidden": "true",
+            className: "polli-link-external-icon"
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/modules/wallet/format-pollen.ts
 var BUDGET = 5;
@@ -93,7 +171,7 @@ function formatPollen(value) {
 }
 
 // src/modules/wallet/wallet-display.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var walletPanelClasses = {
   paid: "polli-wallet-panel-paid",
   tier: "polli-wallet-panel-tier"
@@ -102,68 +180,219 @@ var walletTextClasses = {
   paid: "polli-wallet-text-paid",
   tier: "polli-wallet-text-tier"
 };
-var WalletDot = ({ kind, className }) => /* @__PURE__ */ jsx3(
-  "span",
-  {
-    className: cn(
-      "polli:h-2 polli:w-2 polli:rounded-full",
-      kind === "paid" ? "polli-wallet-dot-paid" : "polli-wallet-dot-tier",
-      className
-    ),
-    "aria-hidden": "true"
-  }
-);
+var walletKindIcons = {
+  paid: CardIcon,
+  tier: SproutIcon
+};
+var WalletKindIcon = ({
+  kind,
+  className
+}) => {
+  const Icon = walletKindIcons[kind];
+  return /* @__PURE__ */ jsx4(
+    Icon,
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "polli:h-3.5 polli:w-3.5 polli:shrink-0",
+        walletTextClasses[kind],
+        className
+      )
+    }
+  );
+};
 var WalletBalanceCard = ({
+  tone = "balance",
   kind,
   label,
   value,
+  icon,
   info,
   footer,
   className
-}) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: cn(
-      "polli:rounded-xl polli:p-4",
-      walletPanelClasses[kind],
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxs("span", { className: "polli:flex polli:items-center polli:gap-2", children: [
-        /* @__PURE__ */ jsx3(WalletDot, { kind }),
-        /* @__PURE__ */ jsx3(
-          "span",
+}) => {
+  const Icon = walletKindIcons[kind];
+  const textColor = tone === "neutral" ? "polli:text-theme-text-strong" : walletTextClasses[kind];
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "polli:min-w-0 polli:rounded-card polli:p-3.5 polli:sm:p-5",
+        tone === "neutral" ? "polli:bg-surface-opaque" : walletPanelClasses[kind],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("span", { className: "polli:flex polli:items-center polli:gap-2", children: [
+          icon ?? /* @__PURE__ */ jsx4(
+            Icon,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "polli:h-3.5 polli:w-3.5 polli:shrink-0",
+                textColor
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "polli:text-sm polli:font-bold polli:uppercase polli:tracking-wide",
+                textColor
+              ),
+              children: label
+            }
+          ),
+          info
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "div",
           {
             className: cn(
-              "polli:text-sm polli:font-bold polli:uppercase polli:tracking-wide",
-              walletTextClasses[kind]
+              "polli-wallet-balance-value polli:[overflow-wrap:anywhere] polli:mt-1 polli:font-bold polli:leading-none polli:tracking-tight polli:tabular-nums",
+              textColor
             ),
-            children: label
+            children: value
+          }
+        ),
+        footer && /* @__PURE__ */ jsx4("div", { className: "polli:mt-1.5 polli:text-sm polli:font-bold polli:tabular-nums polli:text-intent-success-text", children: footer })
+      ]
+    }
+  );
+};
+
+// src/modules/wallet/AccountPollen.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function isEmpty(amount) {
+  return amount != null && amount <= 0;
+}
+var labels = {
+  "limit-reached": "Limit reached",
+  "no-pollen": "No Pollen",
+  unlimited: "Unlimited"
+};
+function PollenStatusBadge({
+  state,
+  topUpHref
+}) {
+  const Icon = state === "no-pollen" ? WalletIcon : KeyIcon;
+  const label = labels[state];
+  return /* @__PURE__ */ jsxs4(
+    Chip,
+    {
+      size: "sm",
+      intent: state === "unlimited" ? "info" : "danger",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx5(
+          Icon,
+          {
+            "aria-hidden": "true",
+            className: "polli:h-3.5 polli:w-3.5 polli:shrink-0"
           }
         ),
-        info
-      ] }),
-      /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: cn(
-            "polli-wallet-balance-value polli:mt-1 polli:font-bold polli:leading-none polli:tracking-tight polli:tabular-nums",
-            walletTextClasses[kind]
+        label,
+        state === "no-pollen" && topUpHref && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: "\xB7" }),
+          /* @__PURE__ */ jsx5(
+            InlineLink,
+            {
+              href: topUpHref,
+              "aria-label": `${label}. Top up`,
+              children: "Top up"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AccountPollen({
+  source,
+  topUpHref
+}) {
+  if (source.type === "budget") {
+    if (source.generationEnabled === false) return null;
+    const unlimited = source.remaining === null;
+    if (!unlimited && source.remaining === void 0) return null;
+    if (unlimited) return /* @__PURE__ */ jsx5(PollenStatusBadge, { state: "unlimited" });
+    const remaining = source.remaining;
+    if (isEmpty(remaining))
+      return /* @__PURE__ */ jsx5(PollenStatusBadge, { state: "limit-reached" });
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        title: "App budget left",
+        className: "polli:inline-flex polli:items-center polli:gap-1 polli:tabular-nums",
+        children: [
+          /* @__PURE__ */ jsx5(
+            KeyIcon,
+            {
+              "aria-hidden": "true",
+              className: "polli:h-3.5 polli:w-3.5 polli:shrink-0"
+            }
           ),
-          children: value
-        }
-      ),
-      footer && /* @__PURE__ */ jsx3("div", { className: "polli:mt-1.5 polli:text-sm polli:font-bold polli:tabular-nums polli:text-intent-success-text", children: footer })
-    ]
+          /* @__PURE__ */ jsx5("span", { className: "polli:sr-only", children: "App budget: " }),
+          formatPollen(remaining),
+          " pollen"
+        ]
+      }
+    );
   }
-);
+  const { balances } = source;
+  if (!balances) return null;
+  if (isEmpty(balances.paid) && isEmpty(balances.quest))
+    return /* @__PURE__ */ jsx5(PollenStatusBadge, { state: "no-pollen", topUpHref });
+  return /* @__PURE__ */ jsx5("span", { className: "polli:inline-flex polli:items-center polli:gap-2 polli:tabular-nums", children: ["quest", "paid"].map((kind) => {
+    const amount = balances[kind];
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        className: "polli:inline-flex polli:items-center polli:gap-1",
+        children: [
+          /* @__PURE__ */ jsx5(
+            WalletKindIcon,
+            {
+              kind: kind === "paid" ? "paid" : "tier"
+            }
+          ),
+          /* @__PURE__ */ jsxs4("span", { className: "polli:sr-only", children: [
+            kind === "paid" ? "Paid" : "Quest",
+            " Pollen:",
+            " "
+          ] }),
+          formatPollen(Math.max(0, amount))
+        ]
+      },
+      kind
+    );
+  }) });
+}
+
+// src/modules/wallet/chips.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PaidChip = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx6(Chip, { ...props, className: cn("polli-wallet-chip-paid", className), children });
+var TierChip = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx6(Chip, { ...props, className: cn("polli-wallet-chip-tier", className), children });
+
+// src/modules/wallet/colors.ts
+var PAID_BALANCE_CHART_COLOR = "var(--polli-color-paid-soft)";
+var TIER_BALANCE_CHART_COLOR = "var(--polli-color-tier-soft)";
 export {
+  AccountPollen,
   PAID_BALANCE_CHART_COLOR,
   PaidChip,
   TIER_BALANCE_CHART_COLOR,
   TierChip,
   WalletBalanceCard,
-  WalletDot,
+  WalletKindIcon,
   formatPollen
 };
 //# sourceMappingURL=index.js.map