@withpotter/components 0.13.0-next.101

package/dist/dashboard/template-status-card.js

@@ -0,0 +1,171 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import {
+  Package,
+  Globe,
+  ArrowRightLeft,
+  ExternalLink,
+  Mail
+} from "lucide-react";
+import { useState } from "react";
+import { accountsApi } from "@withpotter/lib/api/accounts";
+import { Button } from "@withpotter/ui-kit/button";
+function TemplateStatusCard({
+  templateName,
+  templateDescription,
+  templateIcon: TemplateIcon,
+  isSetupComplete,
+  storefrontUrl,
+  customDomain,
+  publishing,
+  emailVerified,
+  onTogglePublish,
+  onEmailVerified
+}) {
+  const [resending, setResending] = useState(false);
+  const [resendMessage, setResendMessage] = useState("");
+  const hasCustomDomain = Boolean(customDomain);
+  const displayUrl = hasCustomDomain ? `https://${customDomain}` : storefrontUrl;
+  const handlePublishClick = async (publish) => {
+    if (publish && !emailVerified) {
+      return;
+    }
+    await onTogglePublish(publish);
+  };
+  const handleResendVerification = async () => {
+    setResending(true);
+    setResendMessage("");
+    try {
+      await accountsApi.resendVerification();
+      setResendMessage("Verification email sent. Check your inbox.");
+    } catch (err) {
+      setResendMessage(
+        err instanceof Error ? err.message : "Failed to send. Try again later."
+      );
+    } finally {
+      setResending(false);
+    }
+  };
+  const showBanner = !emailVerified;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 space-y-0", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `surface ${showBanner ? "rounded-b-none border-b-0" : ""} p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-11 h-11 rounded-md bg-[var(--accent-secondary)] flex items-center justify-center shrink-0", children: TemplateIcon ? /* @__PURE__ */ jsx(TemplateIcon, { className: "w-5 h-5 text-brand-500" }) : /* @__PURE__ */ jsx(Package, { className: "size-5 text-brand-500" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-3xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-0.5", children: "Template" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--text-primary)] truncate", children: templateName || "Your Business" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `px-2 py-0.5 text-xs font-medium rounded-md shrink-0 ${isSetupComplete ? "bg-[var(--success-bg)] text-[var(--success)]" : "bg-[var(--warning-bg)] text-[var(--warning)]"}`,
+                    children: isSetupComplete ? "Published" : "Draft"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: displayUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "inline-flex items-center gap-1 text-xs text-[var(--text-tertiary)] hover:text-brand-500 transition-colors truncate mt-0.5",
+                  children: [
+                    displayUrl.replace(/^https?:\/\//, ""),
+                    /* @__PURE__ */ jsx(ExternalLink, { className: "shrink-0" })
+                  ]
+                }
+              ),
+              !hasCustomDomain && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)] mx-2 hidden sm:inline", children: "\xB7" }),
+              !hasCustomDomain && /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: "/dashboard/business/domains",
+                  className: "text-xs text-brand-500 hover:text-brand-600 transition-colors hidden sm:inline",
+                  children: "Get a custom domain"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+            isSetupComplete ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                className: "text-[var(--warning)] border-[var(--warning)]/20",
+                onClick: () => handlePublishClick(false),
+                disabled: publishing,
+                children: [
+                  /* @__PURE__ */ jsx(Globe, {}),
+                  publishing ? "Unpublishing..." : "Unpublish"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                onClick: () => handlePublishClick(true),
+                disabled: publishing || !emailVerified,
+                title: !emailVerified ? "Verify your email to publish" : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Globe, {}),
+                  publishing ? "Publishing..." : "Publish Site"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: "/dashboard/templates",
+                className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-[var(--accent-secondary-ink)] hover:bg-[var(--accent-secondary)] rounded-md transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(ArrowRightLeft, {}),
+                  "Change"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    showBanner && /* @__PURE__ */ jsxs("div", { className: "bg-amber-50 border border-amber-200 rounded-b-md px-4 py-3 flex items-center justify-between gap-4 flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+        /* @__PURE__ */ jsx(Mail, { className: "size-4 text-amber-600 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-amber-800", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Verify your email" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-amber-700", children: [
+              " ",
+              "\u2014 required before you can publish your site"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-700 mt-0.5", children: "Check your inbox and click the verify button in our welcome email." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+        resendMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-amber-700", children: resendMessage }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            className: "text-amber-800",
+            onClick: handleResendVerification,
+            disabled: resending,
+            children: [
+              /* @__PURE__ */ jsx(Mail, {}),
+              resending ? "Sending..." : "Resend email"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  TemplateStatusCard
+};
+//# sourceMappingURL=template-status-card.js.map

package/dist/dashboard/template-status-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dashboard/template-status-card.tsx"],"sourcesContent":["import Link from 'next/link';\nimport {\n  Package,\n  Globe,\n  ArrowRightLeft,\n  ExternalLink,\n  Mail,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport { accountsApi } from '@withpotter/lib/api/accounts';\nimport { Button } from '@withpotter/ui-kit/button';\n\ninterface TemplateStatusCardProps {\n  templateName?: string;\n  templateDescription?: string;\n  templateIcon?: React.ElementType;\n  isSetupComplete: boolean;\n  storefrontUrl: string;\n  customDomain?: string;\n  publishing: boolean;\n  emailVerified: boolean;\n  onTogglePublish: (\n    publish: boolean,\n  ) => Promise<{ error?: string; needsVerification?: boolean }>;\n  onEmailVerified?: () => void;\n}\n\n/**\n * Card showing the current template with publish/unpublish + change actions.\n */\nexport function TemplateStatusCard({\n  templateName,\n  templateDescription,\n  templateIcon: TemplateIcon,\n  isSetupComplete,\n  storefrontUrl,\n  customDomain,\n  publishing,\n  emailVerified,\n  onTogglePublish,\n  onEmailVerified,\n}: TemplateStatusCardProps) {\n  const [resending, setResending] = useState(false);\n  const [resendMessage, setResendMessage] = useState('');\n  const hasCustomDomain = Boolean(customDomain);\n  const displayUrl = hasCustomDomain\n    ? `https://${customDomain}`\n    : storefrontUrl;\n\n  const handlePublishClick = async (publish: boolean) => {\n    if (publish && !emailVerified) {\n      return;\n    }\n    await onTogglePublish(publish);\n  };\n\n  const handleResendVerification = async () => {\n    setResending(true);\n    setResendMessage('');\n    try {\n      await accountsApi.resendVerification();\n      setResendMessage('Verification email sent. Check your inbox.');\n    } catch (err) {\n      setResendMessage(\n        err instanceof Error ? err.message : 'Failed to send. Try again later.',\n      );\n    } finally {\n      setResending(false);\n    }\n  };\n\n  const showBanner = !emailVerified;\n\n  return (\n    <div className=\"mb-6 space-y-0\">\n      {/* Main card row */}\n      <div\n        className={`surface ${showBanner ? 'rounded-b-none border-b-0' : ''} p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4`}\n      >\n        <div className=\"flex items-center gap-4 min-w-0\">\n          <div className=\"w-11 h-11 rounded-md bg-[var(--accent-secondary)] flex items-center justify-center shrink-0\">\n            {TemplateIcon ? (\n              <TemplateIcon className=\"w-5 h-5 text-brand-500\" />\n            ) : (\n              <Package className=\"size-5 text-brand-500\" />\n            )}\n          </div>\n          <div className=\"min-w-0\">\n            <p className=\"text-3xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-0.5\">\n              Template\n            </p>\n            <div className=\"flex items-center gap-2\">\n              <h3 className=\"font-semibold text-[var(--text-primary)] truncate\">\n                {templateName || 'Your Business'}\n              </h3>\n              <span\n                className={`px-2 py-0.5 text-xs font-medium rounded-md shrink-0 ${\n                  isSetupComplete\n                    ? 'bg-[var(--success-bg)] text-[var(--success)]'\n                    : 'bg-[var(--warning-bg)] text-[var(--warning)]'\n                }`}\n              >\n                {isSetupComplete ? 'Published' : 'Draft'}\n              </span>\n            </div>\n            <a\n              href={displayUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"inline-flex items-center gap-1 text-xs text-[var(--text-tertiary)] hover:text-brand-500 transition-colors truncate mt-0.5\"\n            >\n              {displayUrl.replace(/^https?:\\/\\//, '')}\n              <ExternalLink className=\"shrink-0\" />\n            </a>\n            {!hasCustomDomain && (\n              <span className=\"text-[var(--text-tertiary)] mx-2 hidden sm:inline\">\n                ·\n              </span>\n            )}\n            {!hasCustomDomain && (\n              <Link\n                href=\"/dashboard/business/domains\"\n                className=\"text-xs text-brand-500 hover:text-brand-600 transition-colors hidden sm:inline\"\n              >\n                Get a custom domain\n              </Link>\n            )}\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2 shrink-0\">\n          {isSetupComplete ? (\n            <Button\n              variant=\"secondary\"\n              className=\"text-[var(--warning)] border-[var(--warning)]/20\"\n              onClick={() => handlePublishClick(false)}\n              disabled={publishing}\n            >\n              <Globe />\n              {publishing ? 'Unpublishing...' : 'Unpublish'}\n            </Button>\n          ) : (\n            <Button\n              variant=\"ghost\"\n              onClick={() => handlePublishClick(true)}\n              disabled={publishing || !emailVerified}\n              title={\n                !emailVerified ? 'Verify your email to publish' : undefined\n              }\n            >\n              <Globe />\n              {publishing ? 'Publishing...' : 'Publish Site'}\n            </Button>\n          )}\n          <Link\n            href=\"/dashboard/templates\"\n            className=\"flex items-center gap-2 px-3 py-2 text-sm font-medium text-[var(--accent-secondary-ink)] hover:bg-[var(--accent-secondary)] rounded-md transition-colors\"\n          >\n            <ArrowRightLeft />\n            Change\n          </Link>\n        </div>\n      </div>\n\n      {/* Email verification banner — always visible when unverified */}\n      {showBanner && (\n        <div className=\"bg-amber-50 border border-amber-200 rounded-b-md px-4 py-3 flex items-center justify-between gap-4 flex-wrap\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <Mail className=\"size-4 text-amber-600 shrink-0\" />\n            <div className=\"min-w-0\">\n              <p className=\"text-sm text-amber-800\">\n                <span className=\"font-medium\">Verify your email</span>\n                <span className=\"text-amber-700\">\n                  {' '}\n                  — required before you can publish your site\n                </span>\n              </p>\n              <p className=\"text-xs text-amber-700 mt-0.5\">\n                Check your inbox and click the verify button in our welcome\n                email.\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2 shrink-0\">\n            {resendMessage && (\n              <span className=\"text-xs text-amber-700\">{resendMessage}</span>\n            )}\n            <Button\n              variant=\"secondary\"\n              className=\"text-amber-800\"\n              onClick={handleResendVerification}\n              disabled={resending}\n            >\n              <Mail />\n              {resending ? 'Sending...' : 'Resend email'}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard-blockers.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Could not load the workspace.
+ *
+ * Calm and honest: a merchant who cannot reach their business needs confidence
+ * that their data is safe, not baby-talk about sleeping servers.
+ */
+export declare function ConnectionBlocker({ email, loading, onRetry, }: {
+    email?: string;
+    loading?: boolean;
+    onRetry: () => void;
+}): import("react").JSX.Element;
+/**
+ * The workspace requires two-step and this person has not turned it on.
+ *
+ * Not a dead end: the one route it offers — Login & security — is the same one
+ * the API exempts from the requirement, so the way to satisfy it is always
+ * reachable. A requirement that also blocks the way to satisfy it is a locked
+ * door with the key inside.
+ */
+export declare function TwoFactorBlocker({ businessName, email, }: {
+    businessName?: string;
+    email?: string;
+}): import("react").JSX.Element;
+/**
+ * Whether this person is standing outside the two-step requirement.
+ *
+ * Here rather than in the layout so the branch there is one line: the reasoning
+ * — including why Login & security and the account screen are exempt — belongs
+ * with the screen that states it.
+ */
+export declare function isBlockedByTwoFactor(input: {
+    tenant?: {
+        settings?: unknown;
+    } | null;
+    user?: {
+        mfaEnabled?: boolean;
+    } | null;
+    pathname: string;
+}): boolean;

package/dist/dashboard-blockers.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { RefreshCw, ShieldCheck } from "lucide-react";
+import { Button, Logo } from "@withpotter/ui-kit";
+function BlockerFrame({
+  children,
+  email
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center bg-canvas px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsx(Logo, { variant: "icon", size: "lg" }) }),
+    children,
+    email && /* @__PURE__ */ jsxs("p", { className: "mt-4 text-xs text-ink-4", children: [
+      "Signed in as ",
+      email
+    ] })
+  ] }) });
+}
+function ConnectionBlocker({
+  email,
+  loading,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs(BlockerFrame, { email, children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-[-0.02em] text-ink", children: "We couldn\u2019t reach Box" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-ink-3", children: "Your business is safe. This looks like a connection issue. Check your network and try again." }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        className: "mt-6 h-11 w-full",
+        loading,
+        icon: /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
+        onClick: onRetry,
+        children: "Try again"
+      }
+    )
+  ] });
+}
+function TwoFactorBlocker({
+  businessName,
+  email
+}) {
+  const router = useRouter();
+  return /* @__PURE__ */ jsxs(BlockerFrame, { email, children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ jsx("span", { className: "flex size-10 items-center justify-center rounded-lg bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(ShieldCheck, { className: "size-5 text-[var(--text-secondary)]" }) }) }),
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-[-0.02em] text-ink", children: "One more step to get in" }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm leading-relaxed text-ink-3", children: [
+      businessName ?? "This business",
+      " asks everyone with access to sign in with two steps. Add yours and you are back in \u2014 it takes about a minute."
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        className: "mt-6 h-11 w-full",
+        onClick: () => router.push("/dashboard/settings/devices"),
+        children: "Set up two-step verification"
+      }
+    )
+  ] });
+}
+function isBlockedByTwoFactor(input) {
+  const security = input.tenant?.settings?.security;
+  if (security?.requireTwoFactor !== true) return false;
+  if (!input.user || input.user.mfaEnabled === true) return false;
+  return !input.pathname.startsWith("/dashboard/settings/devices") && !input.pathname.startsWith("/dashboard/settings/profile");
+}
+export {
+  ConnectionBlocker,
+  TwoFactorBlocker,
+  isBlockedByTwoFactor
+};
+//# sourceMappingURL=dashboard-blockers.js.map

package/dist/dashboard-blockers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dashboard-blockers.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { RefreshCw, ShieldCheck } from 'lucide-react';\nimport { Button, Logo } from '@withpotter/ui-kit';\n\n/**\n * The full-screen states the dashboard shows INSTEAD of itself.\n *\n * Both of these are conditions rather than errors: nothing behind them works\n * until they are resolved, so a banner over a rendered dashboard would be a\n * wall of failing requests with an explanation floating above it. They live\n * here rather than inside `layout.tsx` because that file is on the 500-line\n * ledger and a full-screen state is a component, not a layout concern.\n */\n\n/** One centred column, the shape every blocking state here takes. */\nfunction BlockerFrame({\n  children,\n  email,\n}: {\n  children: React.ReactNode;\n  email?: string;\n}) {\n  return (\n    <div className=\"flex min-h-screen items-center justify-center bg-canvas px-4\">\n      <div className=\"w-full max-w-sm text-center\">\n        <div className=\"mb-6 flex justify-center\">\n          <Logo variant=\"icon\" size=\"lg\" />\n        </div>\n        {children}\n        {email && (\n          <p className=\"mt-4 text-xs text-ink-4\">Signed in as {email}</p>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Could not load the workspace.\n *\n * Calm and honest: a merchant who cannot reach their business needs confidence\n * that their data is safe, not baby-talk about sleeping servers.\n */\nexport function ConnectionBlocker({\n  email,\n  loading,\n  onRetry,\n}: {\n  email?: string;\n  loading?: boolean;\n  onRetry: () => void;\n}) {\n  return (\n    <BlockerFrame email={email}>\n      <h1 className=\"text-2xl font-semibold tracking-[-0.02em] text-ink\">\n        We couldn’t reach Box\n      </h1>\n      <p className=\"mt-2 text-sm leading-relaxed text-ink-3\">\n        Your business is safe. This looks like a connection issue. Check your\n        network and try again.\n      </p>\n      <Button\n        variant=\"primary\"\n        className=\"mt-6 h-11 w-full\"\n        loading={loading}\n        icon={<RefreshCw className=\"size-4\" />}\n        onClick={onRetry}\n      >\n        Try again\n      </Button>\n    </BlockerFrame>\n  );\n}\n\n/**\n * The workspace requires two-step and this person has not turned it on.\n *\n * Not a dead end: the one route it offers — Login & security — is the same one\n * the API exempts from the requirement, so the way to satisfy it is always\n * reachable. A requirement that also blocks the way to satisfy it is a locked\n * door with the key inside.\n */\nexport function TwoFactorBlocker({\n  businessName,\n  email,\n}: {\n  businessName?: string;\n  email?: string;\n}) {\n  const router = useRouter();\n\n  return (\n    <BlockerFrame email={email}>\n      <div className=\"mb-4 flex justify-center\">\n        <span className=\"flex size-10 items-center justify-center rounded-lg bg-[var(--bg-muted)]\">\n          <ShieldCheck className=\"size-5 text-[var(--text-secondary)]\" />\n        </span>\n      </div>\n      <h1 className=\"text-2xl font-semibold tracking-[-0.02em] text-ink\">\n        One more step to get in\n      </h1>\n      <p className=\"mt-2 text-sm leading-relaxed text-ink-3\">\n        {businessName ?? 'This business'} asks everyone with access to sign in\n        with two steps. Add yours and you are back in — it takes about a minute.\n      </p>\n      <Button\n        variant=\"primary\"\n        className=\"mt-6 h-11 w-full\"\n        onClick={() => router.push('/dashboard/settings/devices')}\n      >\n        Set up two-step verification\n      </Button>\n    </BlockerFrame>\n  );\n}\n\n/**\n * Whether this person is standing outside the two-step requirement.\n *\n * Here rather than in the layout so the branch there is one line: the reasoning\n * — including why Login & security and the account screen are exempt — belongs\n * with the screen that states it.\n */\nexport function isBlockedByTwoFactor(input: {\n  tenant?: { settings?: unknown } | null;\n  user?: { mfaEnabled?: boolean } | null;\n  pathname: string;\n}): boolean {\n  const security = (\n    input.tenant?.settings as\n      | { security?: { requireTwoFactor?: boolean } }\n      | undefined\n  )?.security;\n\n  if (security?.requireTwoFactor !== true) return false;\n  if (!input.user || input.user.mfaEnabled === true) return false;\n\n  // The two screens somebody blocked has to be able to reach — the same pair\n  // the API carries `@SkipTwoFactorPolicy()` on.\n  return (\n    !input.pathname.startsWith('/dashboard/settings/devices') &&\n    !input.pathname.startsWith('/dashboard/settings/profile')\n  );\n}\n"],"mappings":";AA4BU,cAIA,YAJA;AA1BV,SAAS,iBAAiB;AAC1B,SAAS,WAAW,mBAAmB;AACvC,SAAS,QAAQ,YAAY;AAa7B,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,SAAI,WAAU,gEACb,+BAAC,SAAI,WAAU,+BACb;AAAA,wBAAC,SAAI,WAAU,4BACb,8BAAC,QAAK,SAAQ,QAAO,MAAK,MAAK,GACjC;AAAA,IACC;AAAA,IACA,SACC,qBAAC,OAAE,WAAU,2BAA0B;AAAA;AAAA,MAAc;AAAA,OAAM;AAAA,KAE/D,GACF;AAEJ;AAQO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,gBAAa,OACZ;AAAA,wBAAC,QAAG,WAAU,sDAAqD,wCAEnE;AAAA,IACA,oBAAC,OAAE,WAAU,2CAA0C,0GAGvD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV;AAAA,QACA,MAAM,oBAAC,aAAU,WAAU,UAAS;AAAA,QACpC,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AAUO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,gBAAa,OACZ;AAAA,wBAAC,SAAI,WAAU,4BACb,8BAAC,UAAK,WAAU,4EACd,8BAAC,eAAY,WAAU,uCAAsC,GAC/D,GACF;AAAA,IACA,oBAAC,QAAG,WAAU,sDAAqD,qCAEnE;AAAA,IACA,qBAAC,OAAE,WAAU,2CACV;AAAA,sBAAgB;AAAA,MAAgB;AAAA,OAEnC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS,MAAM,OAAO,KAAK,6BAA6B;AAAA,QACzD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;AASO,SAAS,qBAAqB,OAIzB;AACV,QAAM,WACJ,MAAM,QAAQ,UAGb;AAEH,MAAI,UAAU,qBAAqB,KAAM,QAAO;AAChD,MAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,eAAe,KAAM,QAAO;AAI1D,SACE,CAAC,MAAM,SAAS,WAAW,6BAA6B,KACxD,CAAC,MAAM,SAAS,WAAW,6BAA6B;AAE5D;","names":[]}

package/dist/dashboard-empty-state.d.ts

@@ -0,0 +1 @@
+export declare function DashboardEmptyState(): import("react").JSX.Element;

package/dist/dashboard-empty-state.js

@@ -0,0 +1,273 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import {
+  Wand2,
+  ArrowRight,
+  Palette,
+  Package,
+  CreditCard,
+  Users,
+  CheckCircle2,
+  Circle,
+  TrendingUp,
+  Eye
+} from "lucide-react";
+import { Button } from "@withpotter/ui-kit";
+import { storefrontUrl } from "@withpotter/lib/storefront";
+function getInitialOnboarding() {
+  if (typeof window === "undefined") return null;
+  const data = localStorage.getItem("pb_onboarding");
+  return data ? JSON.parse(data) : null;
+}
+function getInitialChecklist() {
+  if (typeof window === "undefined") return [];
+  const progress = localStorage.getItem("pb_checklist_progress");
+  const completedItems = progress ? JSON.parse(progress) : [];
+  return [
+    {
+      id: "template",
+      label: "Choose a template",
+      description: "Pick the design your website uses",
+      href: "/dashboard/templates",
+      icon: Palette,
+      completed: completedItems.includes("template")
+    },
+    {
+      id: "content",
+      label: "Add your first content",
+      description: "Create a product, service, or portfolio item",
+      href: "/dashboard/treatments",
+      icon: Package,
+      completed: completedItems.includes("content")
+    },
+    {
+      id: "payments",
+      label: "Set up payments",
+      description: "Connect Stripe or Paystack to accept payments",
+      href: "/dashboard/payments",
+      icon: CreditCard,
+      completed: completedItems.includes("payments")
+    },
+    {
+      id: "team",
+      label: "Invite your team",
+      description: "Add team members to help manage your business",
+      href: "/dashboard/content/team",
+      icon: Users,
+      completed: completedItems.includes("team")
+    }
+  ];
+}
+function DashboardEmptyState() {
+  const [onboarding] = useState(getInitialOnboarding);
+  const [checklist, setChecklist] = useState(getInitialChecklist);
+  useEffect(() => {
+    const handleStorage = () => {
+      setChecklist(getInitialChecklist());
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+  const completedCount = checklist.filter((item) => item.completed).length;
+  const progress = checklist.length > 0 ? completedCount / checklist.length * 100 : 0;
+  if (onboarding?.completed) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-br from-brand-500 to-brand-600 rounded-md p-8 text-white mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-2", children: "Welcome back! \u{1F44B}" }),
+          /* @__PURE__ */ jsx("p", { className: "text-white/80 mb-6", children: "Here's what's happening with your business today." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(Link, { href: "/dashboard/appearance", children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                className: "bg-[var(--bg-base)]/20 border-[var(--bg-base)]/30 text-white hover:bg-[var(--bg-base)]/30",
+                children: [
+                  /* @__PURE__ */ jsx(Palette, { className: "size-4 mr-2" }),
+                  "Customize site"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: storefrontUrl(
+                  onboarding.businessName?.toLowerCase().replace(/\s+/g, "-")
+                ),
+                target: "_blank",
+                children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    className: "bg-[var(--bg-base)]/20 border-[var(--bg-base)]/30 text-white hover:bg-[var(--bg-base)]/30",
+                    children: [
+                      /* @__PURE__ */ jsx(Eye, { className: "size-4 mr-2" }),
+                      "View live site"
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(TrendingUp, { className: "size-20 text-white/20" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-8", children: [
+        { label: "Total views", value: "0", change: "+0%", icon: Eye },
+        { label: "Bookings", value: "0", change: "+0%", icon: Package },
+        { label: "Revenue", value: "\u20A60", change: "+0%", icon: TrendingUp }
+      ].map((stat) => /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsx(stat.icon, { className: "w-5 h-5 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: stat.change })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-[var(--text-primary)]", children: stat.value }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: stat.label })
+      ] }, stat.label)) }),
+      /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: "Complete your setup" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-tertiary)]", children: [
+              completedCount,
+              " of ",
+              checklist.length,
+              " completed"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-24 h-2 bg-[var(--bg-muted)] rounded-full overflow-x-auto", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-brand-500 rounded-full transition",
+              style: { width: `${progress}%` }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: checklist.map((item) => /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: item.href,
+            className: `flex items-center gap-4 p-4 rounded-md border transition ${item.completed ? "bg-[var(--success-bg)] border-[var(--success)]/20" : "bg-[var(--bg-subtle)] border-[var(--border-default)] hover:border-brand-500 hover:bg-brand-500/5"}`,
+            children: [
+              item.completed ? /* @__PURE__ */ jsx(CheckCircle2, { className: "size-6 text-[var(--success)] flex-shrink-0" }) : /* @__PURE__ */ jsx(Circle, { className: "size-6 text-[var(--text-muted)] flex-shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: `font-medium ${item.completed ? "text-[var(--success)]" : "text-[var(--text-primary)]"}`,
+                    children: item.label
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: `text-sm ${item.completed ? "text-[var(--success)]" : "text-[var(--text-tertiary)]"}`,
+                    children: item.description
+                  }
+                )
+              ] }),
+              !item.completed && /* @__PURE__ */ jsx(ArrowRight, { className: "size-5 text-[var(--text-muted)]" })
+            ]
+          },
+          item.id
+        )) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-20 h-20 rounded-md bg-brand-500/10 flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ jsx(Wand2, { className: "size-10 text-brand-500" }) }),
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-[var(--text-primary)] mb-3", children: "Set up your business" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)] text-lg", children: "Complete these steps to publish your website" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm mb-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-secondary)]", children: [
+          completedCount,
+          " of ",
+          checklist.length,
+          " completed"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-brand-500 font-medium", children: [
+          Math.round(progress),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-full overflow-hidden rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full w-full origin-left bg-brand-500",
+          style: {
+            transform: `scaleX(${progress / 100})`,
+            transition: "transform var(--motion-normal) var(--motion-ease-out)"
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: checklist.map((item, index) => {
+      const Icon = item.icon;
+      const isNext = !item.completed && checklist.slice(0, index).every((i) => i.completed);
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: item.href,
+          className: `group flex items-center gap-4 p-4 rounded-md border-2 transition ${item.completed ? "bg-[var(--success-bg)] border-[var(--success)]/20" : isNext ? "bg-[var(--bg-base)] border-brand-500" : "bg-[var(--bg-base)] border-[var(--border-default)] hover:border-[var(--border-strong)]"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `w-12 h-12 rounded-md flex items-center justify-center flex-shrink-0 ${item.completed ? "bg-[var(--success-bg)]0" : isNext ? "bg-brand-500" : "bg-[var(--bg-muted)]"}`,
+                children: item.completed ? /* @__PURE__ */ jsx(CheckCircle2, { className: "size-6 text-white" }) : /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: `w-6 h-6 ${isNext ? "text-white" : "text-[var(--text-muted)]"}`
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: `font-semibold ${item.completed ? "text-[var(--success)]" : "text-[var(--text-primary)]"}`,
+                  children: item.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: `text-sm ${item.completed ? "text-[var(--success)]" : "text-[var(--text-tertiary)]"}`,
+                  children: item.description
+                }
+              )
+            ] }),
+            !item.completed && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `flex items-center gap-2 ${isNext ? "text-brand-500" : "text-[var(--text-muted)]"}`,
+                children: [
+                  isNext && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Start" }),
+                  /* @__PURE__ */ jsx(ArrowRight, { className: "size-5 group-hover:translate-x-1 transition-transform" })
+                ]
+              }
+            )
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-10 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-tertiary)]", children: [
+      "Need help getting started?",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: "#", className: "text-brand-500 hover:underline font-medium", children: "Watch our quick setup guide" })
+    ] }) })
+  ] });
+}
+export {
+  DashboardEmptyState
+};
+//# sourceMappingURL=dashboard-empty-state.js.map

package/dist/dashboard-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dashboard-empty-state.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport Link from 'next/link';\nimport {\n  Wand2,\n  ArrowRight,\n  Palette,\n  Package,\n  CreditCard,\n  Users,\n  CheckCircle2,\n  Circle,\n  TrendingUp,\n  Eye,\n} from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit';\nimport { storefrontUrl } from '@withpotter/lib/storefront';\n\ninterface OnboardingData {\n  completed?: boolean;\n  skipped?: boolean;\n  category?: string;\n  templateId?: string;\n  businessName?: string;\n}\n\ninterface ChecklistItem {\n  id: string;\n  label: string;\n  description: string;\n  href: string;\n  icon: React.ElementType;\n  completed: boolean;\n}\n\n// Helper to get initial onboarding data\nfunction getInitialOnboarding(): OnboardingData | null {\n  if (typeof window === 'undefined') return null;\n  const data = localStorage.getItem('pb_onboarding');\n  return data ? JSON.parse(data) : null;\n}\n\n// Helper to get initial checklist\nfunction getInitialChecklist(): ChecklistItem[] {\n  if (typeof window === 'undefined') return [];\n  const progress = localStorage.getItem('pb_checklist_progress');\n  const completedItems = progress ? JSON.parse(progress) : [];\n  return [\n    {\n      id: 'template',\n      label: 'Choose a template',\n      description: 'Pick the design your website uses',\n      href: '/dashboard/templates',\n      icon: Palette,\n      completed: completedItems.includes('template'),\n    },\n    {\n      id: 'content',\n      label: 'Add your first content',\n      description: 'Create a product, service, or portfolio item',\n      href: '/dashboard/treatments',\n      icon: Package,\n      completed: completedItems.includes('content'),\n    },\n    {\n      id: 'payments',\n      label: 'Set up payments',\n      description: 'Connect Stripe or Paystack to accept payments',\n      href: '/dashboard/payments',\n      icon: CreditCard,\n      completed: completedItems.includes('payments'),\n    },\n    {\n      id: 'team',\n      label: 'Invite your team',\n      description: 'Add team members to help manage your business',\n      href: '/dashboard/content/team',\n      icon: Users,\n      completed: completedItems.includes('team'),\n    },\n  ];\n}\n\nexport function DashboardEmptyState() {\n  const [onboarding] = useState<OnboardingData | null>(getInitialOnboarding);\n  const [checklist, setChecklist] =\n    useState<ChecklistItem[]>(getInitialChecklist);\n\n  // Update checklist when progress changes (e.g., from another tab)\n  useEffect(() => {\n    const handleStorage = () => {\n      setChecklist(getInitialChecklist());\n    };\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, []);\n\n  const completedCount = checklist.filter((item) => item.completed).length;\n  const progress =\n    checklist.length > 0 ? (completedCount / checklist.length) * 100 : 0;\n\n  // If onboarding was completed, show a different view\n  if (onboarding?.completed) {\n    return (\n      <div className=\"max-w-4xl mx-auto\">\n        {/* Welcome Back Card */}\n        <div className=\"bg-gradient-to-br from-brand-500 to-brand-600 rounded-md p-8 text-white mb-8\">\n          <div className=\"flex items-start justify-between\">\n            <div>\n              <h1 className=\"text-2xl font-bold mb-2\">Welcome back! 👋</h1>\n              <p className=\"text-white/80 mb-6\">\n                Here&apos;s what&apos;s happening with your business today.\n              </p>\n              <div className=\"flex gap-3\">\n                <Link href=\"/dashboard/appearance\">\n                  <Button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    className=\"bg-[var(--bg-base)]/20 border-[var(--bg-base)]/30 text-white hover:bg-[var(--bg-base)]/30\"\n                  >\n                    <Palette className=\"size-4 mr-2\" />\n                    Customize site\n                  </Button>\n                </Link>\n                <Link\n                  href={storefrontUrl(\n                    onboarding.businessName?.toLowerCase().replace(/\\s+/g, '-'),\n                  )}\n                  target=\"_blank\"\n                >\n                  <Button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    className=\"bg-[var(--bg-base)]/20 border-[var(--bg-base)]/30 text-white hover:bg-[var(--bg-base)]/30\"\n                  >\n                    <Eye className=\"size-4 mr-2\" />\n                    View live site\n                  </Button>\n                </Link>\n              </div>\n            </div>\n            <div className=\"hidden md:block\">\n              <TrendingUp className=\"size-20 text-white/20\" />\n            </div>\n          </div>\n        </div>\n\n        {/* Quick Stats */}\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-8\">\n          {[\n            { label: 'Total views', value: '0', change: '+0%', icon: Eye },\n            { label: 'Bookings', value: '0', change: '+0%', icon: Package },\n            { label: 'Revenue', value: '₦0', change: '+0%', icon: TrendingUp },\n          ].map((stat) => (\n            <div key={stat.label} className=\"surface p-4\">\n              <div className=\"flex items-center justify-between mb-3\">\n                <stat.icon className=\"w-5 h-5 text-[var(--text-muted)]\" />\n                <span className=\"text-xs text-[var(--text-muted)]\">\n                  {stat.change}\n                </span>\n              </div>\n              <p className=\"text-2xl font-bold text-[var(--text-primary)]\">\n                {stat.value}\n              </p>\n              <p className=\"text-sm text-[var(--text-tertiary)]\">\n                {stat.label}\n              </p>\n            </div>\n          ))}\n        </div>\n\n        {/* Setup Checklist */}\n        <div className=\"surface p-4\">\n          <div className=\"flex items-center justify-between mb-6\">\n            <div>\n              <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">\n                Complete your setup\n              </h2>\n              <p className=\"text-sm text-[var(--text-tertiary)]\">\n                {completedCount} of {checklist.length} completed\n              </p>\n            </div>\n            <div className=\"w-24 h-2 bg-[var(--bg-muted)] rounded-full overflow-x-auto\">\n              <div\n                className=\"h-full bg-brand-500 rounded-full transition\"\n                style={{ width: `${progress}%` }}\n              />\n            </div>\n          </div>\n\n          <div className=\"space-y-3\">\n            {checklist.map((item) => (\n              <Link\n                key={item.id}\n                href={item.href}\n                className={`flex items-center gap-4 p-4 rounded-md border transition ${\n                  item.completed\n                    ? 'bg-[var(--success-bg)] border-[var(--success)]/20'\n                    : 'bg-[var(--bg-subtle)] border-[var(--border-default)] hover:border-brand-500 hover:bg-brand-500/5'\n                }`}\n              >\n                {item.completed ? (\n                  <CheckCircle2 className=\"size-6 text-[var(--success)] flex-shrink-0\" />\n                ) : (\n                  <Circle className=\"size-6 text-[var(--text-muted)] flex-shrink-0\" />\n                )}\n                <div className=\"flex-1\">\n                  <p\n                    className={`font-medium ${item.completed ? 'text-[var(--success)]' : 'text-[var(--text-primary)]'}`}\n                  >\n                    {item.label}\n                  </p>\n                  <p\n                    className={`text-sm ${item.completed ? 'text-[var(--success)]' : 'text-[var(--text-tertiary)]'}`}\n                  >\n                    {item.description}\n                  </p>\n                </div>\n                {!item.completed && (\n                  <ArrowRight className=\"size-5 text-[var(--text-muted)]\" />\n                )}\n              </Link>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // If onboarding was skipped, show setup prompt\n  return (\n    <div className=\"max-w-2xl mx-auto\">\n      <div className=\"text-center mb-10\">\n        <div className=\"w-20 h-20 rounded-md bg-brand-500/10 flex items-center justify-center mx-auto mb-6\">\n          <Wand2 className=\"size-10 text-brand-500\" />\n        </div>\n        <h1 className=\"text-3xl font-bold text-[var(--text-primary)] mb-3\">\n          Set up your business\n        </h1>\n        <p className=\"text-[var(--text-tertiary)] text-lg\">\n          Complete these steps to publish your website\n        </p>\n      </div>\n\n      {/* Progress */}\n      <div className=\"mb-8\">\n        <div className=\"flex items-center justify-between text-sm mb-2\">\n          <span className=\"text-[var(--text-secondary)]\">\n            {completedCount} of {checklist.length} completed\n          </span>\n          <span className=\"text-brand-500 font-medium\">\n            {Math.round(progress)}%\n          </span>\n        </div>\n        {/* `overflow-hidden`, not `overflow-x-auto` — this is a shape that clips\n            its fill, not a scroll container. */}\n        <div className=\"h-3 w-full overflow-hidden rounded-full bg-[var(--bg-muted)]\">\n          <div\n            // Flat brand, not a gradient: house rule, and a two-stop ramp on a\n            // 12px bar reads as a rendering artefact rather than a decision.\n            className=\"h-full w-full origin-left bg-brand-500\"\n            style={{\n              transform: `scaleX(${progress / 100})`,\n              transition:\n                'transform var(--motion-normal) var(--motion-ease-out)',\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Checklist */}\n      <div className=\"space-y-4\">\n        {checklist.map((item, index) => {\n          const Icon = item.icon;\n          const isNext =\n            !item.completed &&\n            checklist.slice(0, index).every((i) => i.completed);\n\n          return (\n            <Link\n              key={item.id}\n              href={item.href}\n              className={`group flex items-center gap-4 p-4 rounded-md border-2 transition ${\n                item.completed\n                  ? 'bg-[var(--success-bg)] border-[var(--success)]/20'\n                  : isNext\n                    ? 'bg-[var(--bg-base)] border-brand-500'\n                    : 'bg-[var(--bg-base)] border-[var(--border-default)] hover:border-[var(--border-strong)]'\n              }`}\n            >\n              <div\n                className={`w-12 h-12 rounded-md flex items-center justify-center flex-shrink-0 ${\n                  item.completed\n                    ? 'bg-[var(--success-bg)]0'\n                    : isNext\n                      ? 'bg-brand-500'\n                      : 'bg-[var(--bg-muted)]'\n                }`}\n              >\n                {item.completed ? (\n                  <CheckCircle2 className=\"size-6 text-white\" />\n                ) : (\n                  <Icon\n                    className={`w-6 h-6 ${isNext ? 'text-white' : 'text-[var(--text-muted)]'}`}\n                  />\n                )}\n              </div>\n\n              <div className=\"flex-1\">\n                <p\n                  className={`font-semibold ${item.completed ? 'text-[var(--success)]' : 'text-[var(--text-primary)]'}`}\n                >\n                  {item.label}\n                </p>\n                <p\n                  className={`text-sm ${item.completed ? 'text-[var(--success)]' : 'text-[var(--text-tertiary)]'}`}\n                >\n                  {item.description}\n                </p>\n              </div>\n\n              {!item.completed && (\n                <div\n                  className={`flex items-center gap-2 ${\n                    isNext ? 'text-brand-500' : 'text-[var(--text-muted)]'\n                  }`}\n                >\n                  {isNext && <span className=\"text-sm font-medium\">Start</span>}\n                  <ArrowRight className=\"size-5 group-hover:translate-x-1 transition-transform\" />\n                </div>\n              )}\n            </Link>\n          );\n        })}\n      </div>\n\n      {/* Help */}\n      <div className=\"mt-10 text-center\">\n        <p className=\"text-sm text-[var(--text-tertiary)]\">\n          Need help getting started?{' '}\n          <a href=\"#\" className=\"text-brand-500 hover:underline font-medium\">\n            Watch our quick setup guide\n          </a>\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}