@vibes.diy/base 8.2.1 → 9.0.0

package/components/OnboardingOverlay.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface OnboardingOverlayProps {
+    readonly placeholder: string;
+    readonly wordSlugCandidates: readonly string[];
+    readonly clerkSuggestions: readonly string[];
+    readonly onRefreshCandidates: () => void;
+    readonly refreshing?: boolean;
+    readonly busy?: boolean;
+    readonly onConfirmHandle: (handle: string) => Promise<boolean>;
+    readonly avatarSlot?: React.ReactNode;
+    readonly appReady?: boolean;
+    readonly onViewApp?: () => void;
+    readonly onFinish: () => void;
+    readonly onSkip: () => void;
+}
+export declare function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirmHandle, avatarSlot, appReady, onViewApp, onFinish, onSkip, }: OnboardingOverlayProps): React.ReactElement;

package/components/OnboardingOverlay.js

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from "react";
+import { toRFC2822_32ByteLength } from "@vibes.diy/vibe-types";
+const STEPS = ["handle", "avatar"];
+export function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirmHandle, avatarSlot, appReady, onViewApp, onFinish, onSkip, }) {
+    const [stepIndex, setStepIndex] = useState(0);
+    const [draft, setDraft] = useState(placeholder);
+    const [confirming, setConfirming] = useState(false);
+    const step = STEPS[stepIndex];
+    const advance = () => setStepIndex((i) => Math.min(i + 1, STEPS.length));
+    useEffect(() => {
+        if (stepIndex >= STEPS.length)
+            onFinish();
+    }, [stepIndex, onFinish]);
+    const sanitized = toRFC2822_32ByteLength(draft);
+    const valid = sanitized.length > 0;
+    const confirmHandle = async () => {
+        if (!valid || busy || confirming)
+            return;
+        if (sanitized === placeholder) {
+            advance();
+            return;
+        }
+        setConfirming(true);
+        const ok = await onConfirmHandle(sanitized);
+        setConfirming(false);
+        if (ok)
+            advance();
+    };
+    return (React.createElement("div", { role: "dialog", "aria-label": "Set up your handle and avatar", "aria-modal": "false", style: {
+            position: "fixed",
+            top: 16,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            pointerEvents: "none",
+            zIndex: 60,
+        } },
+        React.createElement("div", { className: "text-light-primary dark:text-dark-primary", style: {
+                pointerEvents: "auto",
+                width: 360,
+                maxWidth: "calc(100vw - 24px)",
+                background: "var(--color-light-background-00, #fff)",
+                border: "1px solid var(--color-light-decorative-01, #ddd)",
+                borderRadius: 14,
+                boxShadow: "0 12px 40px rgba(0,0,0,0.28)",
+                padding: 16,
+            } },
+            React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 } },
+                React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 11 } },
+                    "Step ",
+                    stepIndex + 1,
+                    " of ",
+                    STEPS.length,
+                    " \u00B7 while your app builds"),
+                React.createElement("button", { type: "button", "aria-label": "Skip onboarding", onClick: onSkip, className: "text-light-secondary dark:text-dark-secondary", style: { border: "none", background: "transparent", cursor: "pointer", fontSize: 16, lineHeight: 1, padding: 2 } }, "\u2715")),
+            appReady === true && (React.createElement("button", { type: "button", onClick: onViewApp ?? onFinish, style: {
+                    width: "100%",
+                    marginBottom: 12,
+                    padding: "8px 10px",
+                    borderRadius: 10,
+                    border: "none",
+                    background: "#16a34a",
+                    color: "#fff",
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    fontSize: 13,
+                } }, "Your app is ready \u2014 take a look \u2192")),
+            step === "handle" && (React.createElement(HandleStep, { placeholder: placeholder, draft: draft, setDraft: setDraft, sanitized: sanitized, valid: valid, wordSlugCandidates: wordSlugCandidates, clerkSuggestions: clerkSuggestions, onRefreshCandidates: onRefreshCandidates, refreshing: refreshing, busy: busy || confirming, onConfirm: confirmHandle, onSkip: advance })),
+            step === "avatar" && React.createElement(AvatarStep, { avatarSlot: avatarSlot, busy: busy, onDone: onFinish, onSkip: onFinish }))));
+}
+function HandleStep({ placeholder, draft, setDraft, sanitized, valid, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirm, onSkip, }) {
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { fontSize: 15, fontWeight: 700, marginBottom: 2 } }, "Pick your handle"),
+        React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, marginBottom: 10 } }, "This is the name people see on your apps. You can keep the one we picked."),
+        React.createElement("input", { type: "text", value: draft, disabled: busy, placeholder: placeholder, "aria-label": "Your handle", onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    onConfirm();
+                }
+            }, className: "text-sm text-light-primary dark:text-dark-primary", style: {
+                width: "100%",
+                boxSizing: "border-box",
+                padding: "8px 10px",
+                borderRadius: 8,
+                border: "1px solid var(--color-light-decorative-01, #ddd)",
+                background: "var(--color-light-background-00, #fff)",
+                outline: "none",
+            } }),
+        React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", "aria-live": "polite", style: { fontSize: 11, padding: "4px 2px 8px", minHeight: 15 } }, valid ? `@${sanitized}` : "letters, numbers, and dashes"),
+        clerkSuggestions.length > 0 && (React.createElement(SuggestionRow, { label: "Suggested for you", slugs: clerkSuggestions, busy: busy, onPick: setDraft })),
+        React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", margin: "6px 0 4px" } },
+            React.createElement("span", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 11 } }, "Or try a random one"),
+            React.createElement("button", { type: "button", onClick: onRefreshCandidates, disabled: busy || refreshing, className: "text-light-secondary dark:text-dark-secondary", style: {
+                    border: "1px solid var(--color-light-decorative-01, #ddd)",
+                    background: "transparent",
+                    borderRadius: 8,
+                    padding: "3px 8px",
+                    fontSize: 11,
+                    cursor: busy || refreshing ? "default" : "pointer",
+                    opacity: busy || refreshing ? 0.5 : 1,
+                } }, refreshing ? "…" : "↻ Refresh")),
+        React.createElement(SuggestionRow, { slugs: wordSlugCandidates, busy: busy, onPick: setDraft }),
+        React.createElement("div", { style: { display: "flex", gap: 8, marginTop: 12 } },
+            React.createElement("button", { type: "button", disabled: !valid || busy, onClick: onConfirm, className: "text-sm", style: {
+                    flex: 1,
+                    padding: "8px 10px",
+                    borderRadius: 8,
+                    border: "none",
+                    cursor: !valid || busy ? "default" : "pointer",
+                    opacity: !valid || busy ? 0.5 : 1,
+                    background: "#6366f1",
+                    color: "#fff",
+                    fontWeight: 600,
+                } }, "Use this handle"),
+            React.createElement("button", { type: "button", disabled: busy, onClick: onSkip, className: "text-sm text-light-primary dark:text-dark-primary", style: {
+                    padding: "8px 12px",
+                    borderRadius: 8,
+                    border: "1px solid var(--color-light-decorative-01, #ddd)",
+                    background: "transparent",
+                    cursor: busy ? "default" : "pointer",
+                    opacity: busy ? 0.5 : 1,
+                } }, "Skip"))));
+}
+function SuggestionRow({ label, slugs, busy, onPick, }) {
+    if (slugs.length === 0)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement("div", { style: { marginBottom: 4 } },
+        label && (React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 11, margin: "2px 0 4px" } }, label)),
+        React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 } }, slugs.map((slug) => (React.createElement("button", { key: slug, type: "button", disabled: busy, onClick: () => onPick(slug), className: "text-light-primary dark:text-dark-primary", style: {
+                border: "1px solid var(--color-light-decorative-01, #ddd)",
+                background: "var(--color-light-background-01, #f5f5f5)",
+                borderRadius: 999,
+                padding: "4px 10px",
+                fontSize: 12,
+                cursor: busy ? "default" : "pointer",
+                opacity: busy ? 0.5 : 1,
+            } },
+            "@",
+            slug))))));
+}
+function AvatarStep({ avatarSlot, busy, onDone, onSkip, }) {
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { fontSize: 15, fontWeight: 700, marginBottom: 2 } }, "Add a photo"),
+        React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, marginBottom: 12 } }, "Optional \u2014 a picture makes your apps feel like yours."),
+        React.createElement("div", { style: { marginBottom: 12 } }, avatarSlot),
+        React.createElement("div", { style: { display: "flex", gap: 8 } },
+            React.createElement("button", { type: "button", disabled: busy, onClick: onDone, className: "text-sm", style: {
+                    flex: 1,
+                    padding: "8px 10px",
+                    borderRadius: 8,
+                    border: "none",
+                    cursor: busy ? "default" : "pointer",
+                    opacity: busy ? 0.5 : 1,
+                    background: "#6366f1",
+                    color: "#fff",
+                    fontWeight: 600,
+                } }, "Done"),
+            React.createElement("button", { type: "button", disabled: busy, onClick: onSkip, className: "text-sm text-light-primary dark:text-dark-primary", style: {
+                    padding: "8px 12px",
+                    borderRadius: 8,
+                    border: "1px solid var(--color-light-decorative-01, #ddd)",
+                    background: "transparent",
+                    cursor: busy ? "default" : "pointer",
+                    opacity: busy ? 0.5 : 1,
+                } }, "Skip"))));
+}
+//# sourceMappingURL=OnboardingOverlay.js.map

package/components/OnboardingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingOverlay.js","sourceRoot":"","sources":["../../jsr/components/OnboardingOverlay.tsx"],"names":[],"mappings":"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"}

package/components/index.d.ts

@@ -13,6 +13,7 @@ export * from "./VibesSwitch.js";
 export * from "./OptionButtons.js";
 export * from "./ViewerTagView.js";
 export * from "./HandlePickerMenu.js";
+export * from "./OnboardingOverlay.js";
 export * from "./HandleLookupView.js";
 export * from "./UnifiedVibeCard.js";
 export * from "./EditorTabStrip.js";

package/components/index.js

@@ -13,6 +13,7 @@ export * from "./VibesSwitch.js";
 export * from "./OptionButtons.js";
 export * from "./ViewerTagView.js";
 export * from "./HandlePickerMenu.js";
+export * from "./OnboardingOverlay.js";
 export * from "./HandleLookupView.js";
 export * from "./UnifiedVibeCard.js";
 export * from "./EditorTabStrip.js";

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/base",
-  "version": "8.2.1",
+  "version": "9.0.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -10,9 +10,9 @@
   "dependencies": {
     "@adviser/cement": "~0.5.34",
     "@emotion/css": "~11.13.5",
-    "@vibes.diy/use-vibes-types": "8.2.1",
-    "@vibes.diy/vibe-runtime": "8.2.1",
-    "@vibes.diy/vibe-types": "8.2.1",
+    "@vibes.diy/use-vibes-types": "9.0.0",
+    "@vibes.diy/vibe-runtime": "9.0.0",
+    "@vibes.diy/vibe-types": "9.0.0",
     "officeparser": "~7.2.3",
     "qrcode-generator": "~2.0.4",
     "react": "~19.2.7"

package/theme/global-styles.js

@@ -165,6 +165,21 @@ const backgroundPatterns = `
   }
 }
 
+/* Cache-first cached-boot container surface: the flat first-paint surface
+   colors (byte-matched to the iframe's .vibe-app-surface and the cached
+   srcdoc's own surface style), WITHOUT the grid texture. The cached frame is
+   transparent until its srcdoc paints; painting its host container flat makes
+   the insert read as "app loading" instead of the grid persisting. Fails to
+   grey/black, never white. */
+.vibe-cached-boot-surface {
+  background-color: #d4d4d4;
+}
+@media (prefers-color-scheme: dark) {
+  .vibe-cached-boot-surface {
+    background-color: #2a2a2a;
+  }
+}
+
 /* Vibe viewport reload flash (jchris, 2026-07-11): a /vibe/ page is a
    full-bleed iframe whose hosted app is frequently dark. On reload the outer
    wrapper <body> paints before the iframe repaints its app, and because the

package/theme/global-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-styles.js","sourceRoot":"","sources":["../../jsr/theme/global-styles.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAC;AAMF,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCtB,CAAC;AAMF,MAAM,eAAe,GAAG;;;;CAIvB,CAAC;AAMF,MAAM,eAAe,GAAG;;;;;;;;;;;;;CAavB,CAAC;AAMF,MAAM,iBAAiB,GAAG;;;;;;;;CAQzB,CAAC;AAMF,MAAM,YAAY,GAAG;;;;;;;;;;;;;CAapB,CAAC;AAMF,MAAM,eAAe,GAAG;;;;;CAKvB,CAAC;AAMF,MAAM,kBAAkB,GAAG;;CAE1B,CAAC;AAMF,MAAM,kBAAkB,GAAG;;;;;;;;;iDASsB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAqDnD,MAAM,CAAC,YAAY;;;;;;;;wBAQjB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS;;;;CAIjD,CAAC;AASF,MAAM,UAAU,cAAc;IAC5B,OAAO;QACL,oBAAoB,EAAE;QACtB,SAAS;QACT,cAAc;QACd,eAAe;QACf,eAAe;QACf,iBAAiB;QACjB,YAAY;QACZ,eAAe;QACf,kBAAkB;QAClB,kBAAkB;KACnB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACjB,CAAC"}
+{"version":3,"file":"global-styles.js","sourceRoot":"","sources":["../../jsr/theme/global-styles.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAC;AAMF,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCtB,CAAC;AAMF,MAAM,eAAe,GAAG;;;;CAIvB,CAAC;AAMF,MAAM,eAAe,GAAG;;;;;;;;;;;;;CAavB,CAAC;AAMF,MAAM,iBAAiB,GAAG;;;;;;;;CAQzB,CAAC;AAMF,MAAM,YAAY,GAAG;;;;;;;;;;;;;CAapB,CAAC;AAMF,MAAM,eAAe,GAAG;;;;;CAKvB,CAAC;AAMF,MAAM,kBAAkB,GAAG;;CAE1B,CAAC;AAMF,MAAM,kBAAkB,GAAG;;;;;;;;;iDASsB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAoEnD,MAAM,CAAC,YAAY;;;;;;;;wBAQjB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS;;;;CAIjD,CAAC;AASF,MAAM,UAAU,cAAc;IAC5B,OAAO;QACL,oBAAoB,EAAE;QACtB,SAAS;QACT,cAAc;QACd,eAAe;QACf,eAAe;QACf,iBAAiB;QACjB,YAAY;QACZ,eAAe;QACf,kBAAkB;QAClB,kBAAkB;KACnB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACjB,CAAC"}