@vibes.diy/base 2.0.3 → 2.0.7

package/README.md

@@ -19,6 +19,12 @@ Create beautiful, interactive mini apps with zero setup. Your creations are auto
    - Install with `pnpm i`
    - Run `pnpm dev`
 
+## Community
+
+We are committed to providing a welcoming and inclusive environment for all contributors. Please review our [Code of Conduct](CODE_OF_CONDUCT.md) before participating.
+
+Interested in contributing? Check out our [Contributing Guide](CONTRIBUTING.md) to get started.
+
 ## Your Work is Always Safe
 
 Every app you create is automatically saved, so you can:

package/components/ControlsBar.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ImgVibesClasses } from "@vibes.diy/use-vibes-types";
+interface ControlsBarProps {
+    readonly handleDeleteConfirm: () => void;
+    readonly handlePrevVersion: () => void;
+    readonly handleNextVersion: () => void;
+    readonly handleRegen: () => void;
+    readonly versionIndex: number;
+    readonly totalVersions: number;
+    readonly classes?: Partial<ImgVibesClasses>;
+    readonly showControls?: boolean;
+    readonly editedPrompt: string | null;
+    readonly promptText: string;
+    readonly progress?: number;
+    readonly showDelete?: boolean;
+    readonly versionFlash?: boolean;
+    readonly isRegenerating?: boolean;
+}
+export declare function ControlsBar({ handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, classes, showControls, editedPrompt, promptText, progress, showDelete, versionFlash, isRegenerating }: ControlsBarProps): React.JSX.Element;
+export {};

package/components/ControlsBar.js

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { combineClasses, defaultClasses } from "../utils/style-utils.js";
+import { imgVibesStyles, imgVibesTheme } from "../utils/styles.js";
+import { logDebug } from "../utils/debug.js";
+export function ControlsBar({ handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, classes = defaultClasses, showControls = true, editedPrompt, promptText, progress = 100, showDelete = true, versionFlash = false, isRegenerating = false, }) {
+    const [showConfirmation, setShowConfirmation] = React.useState(false);
+    const cancelTimerRef = React.useRef(null);
+    const isConfirming = showConfirmation;
+    const onDeleteClick = () => {
+        if (isConfirming) {
+            logDebug("ControlsBar: Delete confirmed, calling handleDeleteConfirm");
+            handleDeleteConfirm();
+            setShowConfirmation(false);
+            if (cancelTimerRef.current) {
+                window.clearTimeout(cancelTimerRef.current);
+                cancelTimerRef.current = null;
+            }
+        }
+        else {
+            logDebug("ControlsBar: Showing delete confirmation");
+            setShowConfirmation(true);
+            cancelTimerRef.current = window.setTimeout(() => {
+                setShowConfirmation(false);
+            }, 6500);
+        }
+    };
+    React.useEffect(() => {
+        return () => {
+            if (cancelTimerRef.current) {
+                window.clearTimeout(cancelTimerRef.current);
+            }
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        progress < 100 && (React.createElement("div", { className: "imggen-progress", style: {
+                ...imgVibesStyles.progress,
+                width: `${progress}%`,
+            } })),
+        React.createElement("div", { className: combineClasses(classes.controls), style: imgVibesStyles.controls }, showControls ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    display: "flex",
+                    gap: "6px",
+                    alignItems: "center",
+                    justifyContent: "flex-start",
+                } }, showDelete && (React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } },
+                React.createElement("button", { "aria-label": "Delete image", onClick: onDeleteClick, className: combineClasses("imggen-button imggen-delete-button", classes.button), style: {
+                        ...imgVibesStyles.button,
+                        position: "static",
+                        top: "auto",
+                        right: "auto",
+                        backgroundColor: isConfirming ? imgVibesTheme.colors.errorBorder : imgVibesStyles.button.background,
+                        color: isConfirming ? "white" : imgVibesStyles.button.color,
+                        opacity: isConfirming ? 1 : imgVibesStyles.button.opacity,
+                    } }, "\u2715"),
+                isConfirming && (React.createElement("div", { className: "fade-transition", style: { animationDelay: "6s" } },
+                    React.createElement("button", { onClick: () => {
+                            handleDeleteConfirm();
+                            setShowConfirmation(false);
+                        }, "aria-label": "Confirm delete", style: {
+                            fontSize: imgVibesTheme.typography.fontSize,
+                            fontWeight: "bold",
+                            whiteSpace: "nowrap",
+                            border: `1px solid ${imgVibesTheme.colors.errorBorder}`,
+                            background: imgVibesTheme.colors.errorBorder,
+                            color: "white",
+                            borderRadius: imgVibesTheme.dimensions.borderRadius,
+                            cursor: "pointer",
+                            padding: "2px 8px",
+                        } }, "Delete image?"),
+                    React.createElement("button", { onClick: () => {
+                            logDebug("ControlsBar: Delete canceled");
+                            setShowConfirmation(false);
+                            if (cancelTimerRef.current) {
+                                window.clearTimeout(cancelTimerRef.current);
+                            }
+                        }, "aria-label": "Cancel delete", style: {
+                            fontSize: imgVibesTheme.typography.fontSize,
+                            whiteSpace: "nowrap",
+                            border: "none",
+                            background: "none",
+                            color: imgVibesTheme.colors.text,
+                            cursor: "pointer",
+                            padding: "0 4px",
+                        } }, "Cancel")))))),
+            React.createElement("div", { className: "imggen-control-group", style: imgVibesStyles.controlGroup },
+                totalVersions > 1 && (React.createElement("button", { "aria-label": "Previous version", disabled: versionIndex === 0, onClick: handlePrevVersion, className: combineClasses("imggen-button", classes.button), style: imgVibesStyles.button }, "\u25C0\uFE0E")),
+                totalVersions > 1 && (React.createElement("span", { className: `imggen-version-indicator version-indicator ${versionFlash ? "imggen-version-flash" : ""}`, "aria-live": "polite" },
+                    versionIndex + 1,
+                    " / ",
+                    totalVersions)),
+                totalVersions > 1 && (React.createElement("button", { "aria-label": "Next version", disabled: versionIndex >= totalVersions - 1, onClick: handleNextVersion, className: combineClasses("imggen-button", classes.button), style: imgVibesStyles.button }, "\u25B6\uFE0E")),
+                React.createElement("button", { "aria-label": "Regenerate image", onClick: () => {
+                        handleRegen();
+                    }, disabled: isRegenerating, className: combineClasses("imggen-button", classes.button, editedPrompt !== null && editedPrompt.trim() !== promptText ? "imggen-button-highlight" : "", isRegenerating ? "imggen-button-disabled" : ""), style: {
+                        ...imgVibesStyles.button,
+                        backgroundColor: editedPrompt !== null && editedPrompt.trim() !== promptText
+                            ? imgVibesTheme.colors.accent
+                            : imgVibesStyles.button.background,
+                        opacity: isRegenerating ? 0.3 : imgVibesStyles.button.opacity,
+                        cursor: isRegenerating ? "not-allowed" : imgVibesStyles.button.cursor,
+                    } },
+                    React.createElement("span", { className: isRegenerating ? "imggen-regen-spinning" : "" }, "\u27F3"))))) : progress < 100 ? (React.createElement("div", { className: "imggen-status-text", style: imgVibesStyles.statusText }, "Generating...")) : null)));
+}
+//# sourceMappingURL=ControlsBar.js.map

package/components/ControlsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsBar.js","sourceRoot":"","sources":["../../jsr/components/ControlsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAiC7C,MAAM,UAAU,WAAW,CAAC,EAC1B,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,OAAO,GAAG,cAAc,EACxB,YAAY,GAAG,IAAI,EACnB,YAAY,EACZ,UAAU,EACV,QAAQ,GAAG,GAAG,EACd,UAAU,GAAG,IAAI,EACjB,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,GACL;IAEjB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAGtE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IAGzD,MAAM,YAAY,GAAG,gBAAgB,CAAC;IAGtC,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,YAAY,EAAE,CAAC;YAEjB,QAAQ,CAAC,4DAA4D,CAAC,CAAC;YAEvE,mBAAmB,EAAE,CAAC;YAGtB,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;gBAC3B,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;gBAC5C,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;YAChC,CAAC;QACH,CAAC;aAAM,CAAC;YAEN,QAAQ,CAAC,0CAA0C,CAAC,CAAC;YACrD,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAG1B,cAAc,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC9C,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;IACH,CAAC,CAAC;IAGF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;gBAC3B,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL;QAEG,QAAQ,GAAG,GAAG,IAAI,CACjB,6BACE,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE;gBACL,GAAG,cAAc,CAAC,QAAQ;gBAC1B,KAAK,EAAE,GAAG,QAAQ,GAAG;aACtB,GACD,CACH;QAGD,6BAAK,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,QAAQ,IAC7E,YAAY,CAAC,CAAC,CAAC,CACd;YAEE,6BACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,GAAG,EAAE,KAAK;oBACV,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,YAAY;iBAC7B,IAEA,UAAU,IAAI,CACb,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC/D,8CACa,cAAc,EACzB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,cAAc,CAAC,oCAAoC,EAAE,OAAO,CAAC,MAAM,CAAC,EAC/E,KAAK,EAAE;wBACL,GAAG,cAAc,CAAC,MAAM;wBACxB,QAAQ,EAAE,QAAQ;wBAClB,GAAG,EAAE,MAAM;wBACX,KAAK,EAAE,MAAM;wBACb,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU;wBACnG,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK;wBAC3D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO;qBAC1D,aAGM;gBACR,YAAY,IAAI,CACf,6BAAK,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;oBAC9D,gCACE,OAAO,EAAE,GAAG,EAAE;4BACZ,mBAAmB,EAAE,CAAC;4BACtB,mBAAmB,CAAC,KAAK,CAAC,CAAC;wBAC7B,CAAC,gBACU,gBAAgB,EAC3B,KAAK,EAAE;4BACL,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,QAAQ;4BAC3C,UAAU,EAAE,MAAM;4BAClB,UAAU,EAAE,QAAQ;4BACpB,MAAM,EAAE,aAAa,aAAa,CAAC,MAAM,CAAC,WAAW,EAAE;4BACvD,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,WAAW;4BAC5C,KAAK,EAAE,OAAO;4BACd,YAAY,EAAE,aAAa,CAAC,UAAU,CAAC,YAAY;4BACnD,MAAM,EAAE,SAAS;4BACjB,OAAO,EAAE,SAAS;yBACnB,oBAGM;oBACT,gCACE,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,CAAC,8BAA8B,CAAC,CAAC;4BACzC,mBAAmB,CAAC,KAAK,CAAC,CAAC;4BAC3B,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;gCAC3B,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;4BAC9C,CAAC;wBACH,CAAC,gBACU,eAAe,EAC1B,KAAK,EAAE;4BACL,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,QAAQ;4BAC3C,UAAU,EAAE,QAAQ;4BACpB,MAAM,EAAE,MAAM;4BACd,UAAU,EAAE,MAAM;4BAClB,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI;4BAChC,MAAM,EAAE,SAAS;4BACjB,OAAO,EAAE,OAAO;yBACjB,aAGM,CACL,CACP,CACG,CACP,CACG;YAGN,6BAAK,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,cAAc,CAAC,YAAY;gBAErE,aAAa,GAAG,CAAC,IAAI,CACpB,8CACa,kBAAkB,EAC7B,QAAQ,EAAE,YAAY,KAAK,CAAC,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,cAAc,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,EAC1D,KAAK,EAAE,cAAc,CAAC,MAAM,mBAGrB,CACV;gBAGA,aAAa,GAAG,CAAC,IAAI,CACpB,8BACE,SAAS,EAAE,8CAA8C,YAAY,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,eAC3F,QAAQ;oBAEjB,YAAY,GAAG,CAAC;;oBAAK,aAAa,CAC9B,CACR;gBAGA,aAAa,GAAG,CAAC,IAAI,CACpB,8CACa,cAAc,EACzB,QAAQ,EAAE,YAAY,IAAI,aAAa,GAAG,CAAC,EAC3C,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,cAAc,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,EAC1D,KAAK,EAAE,cAAc,CAAC,MAAM,mBAGrB,CACV;gBAID,8CACa,kBAAkB,EAC7B,OAAO,EAAE,GAAG,EAAE;wBACZ,WAAW,EAAE,CAAC;oBAChB,CAAC,EACD,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAE,cAAc,CACvB,eAAe,EACf,OAAO,CAAC,MAAM,EACd,YAAY,KAAK,IAAI,IAAI,YAAY,CAAC,IAAI,EAAE,KAAK,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAC5F,cAAc,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAC/C,EACD,KAAK,EAAE;wBACL,GAAG,cAAc,CAAC,MAAM;wBACxB,eAAe,EACb,YAAY,KAAK,IAAI,IAAI,YAAY,CAAC,IAAI,EAAE,KAAK,UAAU;4BACzD,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM;4BAC7B,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU;wBACtC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO;wBAC7D,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM;qBACtE;oBAED,8BAAM,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,aAAU,CACjE,CACL,CACL,CACJ,CAAC,CAAC,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CACnB,6BAAK,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,cAAc,CAAC,UAAU,oBAE9D,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACL,CACJ,CAAC;AACJ,CAAC"}

package/components/ExpandedVibesPill.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ExpandedVibesPillProps {
+    size?: number | string;
+    className?: string;
+    onRemix?: () => void;
+}
+export declare function ExpandedVibesPill({ size, className, onRemix }: ExpandedVibesPillProps): React.JSX.Element;

package/components/ExpandedVibesPill.js

@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from "react";
+import { switchColors } from "./VibesSwitch.styles.js";
+function PillActionButton({ height, label, icon, bgColor, labelColor, onClick, }) {
+    const [hovered, setHovered] = useState(false);
+    const btnWidth = height * 0.75;
+    return (React.createElement("button", { type: "button", onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            border: "none",
+            cursor: "pointer",
+            overflow: "hidden",
+            padding: 0,
+            background: bgColor,
+            borderRadius: 0,
+            transition: "width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+            width: hovered ? height * 1.8 : btnWidth,
+            flexShrink: 0,
+        } },
+        React.createElement("div", { style: {
+                width: btnWidth,
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+            } },
+            React.createElement("svg", { width: height * 0.55 * 0.75, height: height * 0.55 * 0.75, viewBox: "0 0 35 35", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("circle", { cx: "17.5", cy: "17.5", r: "17.5", fill: "var(--vibes-near-black, #1a1a1a)" }),
+                React.createElement("foreignObject", { x: "7", y: "7", width: "21", height: "21" },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "100%",
+                            height: "100%",
+                            color: "var(--vibes-cream, #FFFEF0)",
+                        } }, icon)))),
+        React.createElement("span", { style: {
+                color: labelColor || "var(--vibes-near-black, #1a1a1a)",
+                fontSize: height * 0.16,
+                fontWeight: 700,
+                whiteSpace: "nowrap",
+                textTransform: "uppercase",
+                letterSpacing: "1.5px",
+                opacity: hovered ? 1 : 0,
+                width: hovered ? "auto" : 0,
+                maxWidth: hovered ? 120 : 0,
+                padding: hovered ? "0 14px 0 4px" : 0,
+                overflow: "hidden",
+                transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                fontFamily: "'Inter', sans-serif",
+            } }, label)));
+}
+const outerPath = "M293.353,298.09c-41.038,0-82.078,0.125-123.115-0.077c-11.993-0.06-24.011-0.701-35.964-1.703c-15.871-1.331-29.73-7.937-41.948-17.946c-16.769-13.736-27.207-31.417-30.983-52.7c-4.424-24.93,1.404-47.685,16.506-67.913c11.502-15.407,26.564-26.1,45.258-30.884c7.615-1.949,15.631-2.91,23.501-3.165c20.08-0.652,40.179-0.853,60.271-0.879c69.503-0.094,139.007-0.106,208.51,0.02c14.765,0.026,29.583,0.097,44.28,1.313c36.984,3.059,61.78,23.095,74.653,57.301c17.011,45.199-8.414,96.835-54.29,111.864c-7.919,2.595-16.165,3.721-24.434,3.871c-25.614,0.467-51.234,0.742-76.853,0.867C350.282,298.197,321.817,298.09,293.353,298.09z";
+const diyD = "M426.866,285.985c-7.999-0.416-19.597-0.733-31.141-1.687c-15.692-1.297-28.809-8.481-40.105-19.104c-12.77-12.008-20.478-26.828-22.714-44.177c-3.048-23.644,3.384-44.558,19.646-62.143c9.174-9.92,20.248-17.25,33.444-20.363c7.786-1.837,15.944-2.399,23.973-2.828c9.988-0.535,20.023-0.666,30.021-0.371c10.191,0.301,20.433,0.806,30.521,2.175c12.493,1.696,23.132,7.919,32.552,16.091c14.221,12.337,22.777,27.953,25.184,46.594c2.822,21.859-2.605,41.617-16.777,58.695c-9.494,11.441-21.349,19.648-35.722,23.502c-6.656,1.785-13.724,2.278-20.647,2.77C446.914,285.721,438.682,285.667,426.866,285.985z";
+const vibesD = "M165.866,285.985c-7.999-0.416-19.597-0.733-31.141-1.687c-15.692-1.297-28.809-8.481-40.105-19.104c-12.77-12.008-20.478-26.828-22.714-44.177c-3.048-23.644,3.384-44.558,19.646-62.143c9.174-9.92,20.248-17.25,33.444-20.363c7.786-1.837,15.944-2.399,23.973-2.828c9.988-0.535,111.023-0.666,121.021-0.371c10.191,0.301,20.433,0.806,30.521,2.175c12.493,1.696,23.132,7.919,32.552,16.091c14.221,12.337,22.777,27.953,25.184,46.594c2.822,21.859-2.605,41.617-16.777,58.695c-9.494,11.441-21.349,19.648-35.722,23.502c-6.656,1.785-13.724,2.278-20.647,2.77C276.914,285.721,177.682,285.667,165.866,285.985z";
+const vibesLetters = [
+    {
+        delay: "0.5s",
+        d: "M181.891,205.861c0-5.043-0.001-10.086,0-15.129c0.001-5.046,1.679-7.539,6.606-7.695c9.292-0.294,18.653-1.051,27.888,0.707c7.614,1.449,11.523,5.954,11.902,13.446c0.066,1.312-0.313,2.752-0.857,3.966c-1.401,3.123-1.399,6.266-0.673,9.507c0.301,1.342,0.443,2.723,0.787,4.053c1.274,4.925-1.78,10.114-6.085,11.937c-3.111,1.318-6.561,2.327-9.909,2.497c-7.303,0.37-14.639,0.136-21.96,0.101c-1.165-0.005-2.345-0.181-3.488-0.422c-2.657-0.56-4.162-2.962-4.197-6.801C181.854,216.639,181.891,211.25,181.891,205.861z M204.442,192.385c-2.757,0-5.514,0-8.271,0c-3.695,0-5.151,1.669-4.712,5.403c0.369,3.14,1.05,3.735,4.225,3.737c5.024,0.004,10.05,0.109,15.07-0.014c2.028-0.05,4.167-0.27,6.04-0.98c3.182-1.207,3.639-4.256,1.008-6.455c-1.073-0.896-2.659-1.509-4.06-1.618C210.659,192.22,207.544,192.385,204.442,192.385z M204.334,211.104c0,0.045,0,0.091,0,0.137c-3.101,0-6.203-0.055-9.302,0.037c-0.823,0.024-2.257,0.373-2.344,0.794c-0.447,2.154-0.959,4.444-0.639,6.563c0.276,1.822,2.447,1.451,3.882,1.441c5.989-0.042,11.98-0.118,17.961-0.385c1.416-0.063,2.859-0.79,4.176-1.441c1.79-0.886,1.833-2.475,1.029-4.046c-1.166-2.276-3.297-3.024-5.677-3.081C210.394,211.049,207.363,211.104,204.334,211.104z",
+    },
+    {
+        delay: "0.8s",
+        d: "M291.409,229.748c-3.621-0.394-7.838-0.587-11.94-1.379c-3.577-0.69-6.343-2.991-8.213-6.163c-1.763-2.99-0.301-5.6,3.139-5.292c2.287,0.205,4.512,1.129,6.758,1.755c6.281,1.751,12.643,1.892,19.053,0.951c0.667-0.098,1.31-0.416,1.941-0.686c1.502-0.644,2.55-1.682,2.581-3.415c0.031-1.74-1.195-2.749-2.579-3.132c-2.298-0.637-4.688-1.021-7.065-1.273c-5.062-0.536-10.252-0.401-15.187-1.475c-9.677-2.105-11.678-10.53-10.101-16.009c1.62-5.625,5.911-8.92,11.318-9.73c8.388-1.257,16.925-1.491,25.279,0.654c3.702,0.951,6.615,3.072,7.883,6.931c0.918,2.792-0.332,4.6-3.268,4.357c-1.684-0.139-3.367-0.676-4.974-1.248c-6.711-2.387-13.572-2.897-20.569-1.783c-1.001,0.159-2.146,0.414-2.875,1.034c-0.901,0.766-2.016,1.981-1.98,2.964c0.041,1.128,0.995,2.733,1.991,3.206c1.81,0.857,3.925,1.279,5.948,1.441c5.152,0.41,10.356,0.296,15.479,0.905c7.98,0.949,13.779,9.833,11.241,17.125c-1.959,5.628-6.44,8.489-12.143,9.322C299.455,229.344,295.715,229.419,291.409,229.748z",
+    },
+    {
+        delay: "1.2s",
+        d: "M235.786,208.14c0-6.905-0.01-13.809,0.004-20.714c0.007-3.474,0.948-4.428,4.415-3.758c6.62,1.279,13.232,2.651,19.759,4.331c1.7,0.438,3.404,1.896,4.515,3.341c1.777,2.31,0.433,5.367-2.463,5.745c-1.86,0.243-3.819-0.138-5.717-0.368c-2.183-0.264-4.339-0.783-6.525-0.976c-1.572-0.138-3.065,0.375-3.8,1.959c-0.76,1.638-0.319,3.329,0.942,4.34c1.619,1.296,3.522,2.327,5.447,3.128c2.146,0.894,4.539,1.207,6.66,2.145c1.446,0.64,2.982,1.687,3.786,2.981c0.689,1.11,0.928,3.094,0.378,4.202c-0.492,0.991-2.32,1.795-3.579,1.825c-2.238,0.052-4.483-0.652-6.741-0.832c-1.614-0.127-3.333-0.203-4.865,0.212c-2.574,0.699-3.225,3.013-1.719,5.218c1.396,2.044,3.431,3.141,5.757,3.761c2.791,0.744,5.637,1.315,8.373,2.222c3.19,1.058,4.791,3.496,4.801,6.723c0.011,3.365-1.759,5.021-5.138,4.424c-4.402-0.778-8.759-1.81-13.134-2.735c-2.357-0.499-4.718-0.981-7.069-1.511c-3.263-0.737-4.132-1.805-4.141-5.154c-0.019-6.836-0.006-13.672-0.006-20.508C235.747,208.141,235.766,208.14,235.786,208.14z",
+    },
+    {
+        delay: "0.6s",
+        d: "M135.138,229.842c-2.941-0.084-5.296-1.462-6.684-3.9c-1.827-3.21-3.328-6.618-4.81-10.011c-3.55-8.128-7.021-16.291-10.486-24.455c-0.48-1.132-0.902-2.329-1.087-3.536c-0.417-2.72,1.238-4.585,3.938-4.119c1.591,0.275,3.569,0.98,4.45,2.173c2.226,3.015,4.175,6.299,5.784,9.69c2.208,4.654,3.898,9.552,6.032,14.244c0.628,1.379,2.009,2.416,3.045,3.609c0.892-1.159,2.042-2.201,2.63-3.498c2.697-5.953,5.22-11.985,7.841-17.974c1.423-3.252,3.089-6.418,6.532-7.905c1.238-0.535,3.012-0.712,4.184-0.214c0.81,0.344,1.377,2.126,1.385,3.271c0.009,1.458-0.479,2.997-1.059,4.371c-4.227,10.013-8.504,20.005-12.833,29.974c-0.79,1.819-1.762,3.589-2.875,5.229C139.73,228.848,137.671,229.894,135.138,229.842z",
+    },
+    {
+        delay: "1.3s",
+        d: "M164.636,206.263c0-6.691,0.054-13.383-0.036-20.073c-0.024-1.851,0.716-2.67,2.449-2.81c0.274-0.022,0.549-0.054,0.823-0.076c5.488-0.445,6.091,0.105,6.091,5.562c0,12.348,0,24.695,0,37.043c0,2.887-0.354,3.405-3.222,3.618c-1.628,0.121-3.338-0.001-4.91-0.408c-0.593-0.153-1.265-1.408-1.278-2.171c-0.096-5.584-0.034-11.172-0.022-16.759c0.002-1.308,0-2.617,0-3.926C164.566,206.263,164.601,206.263,164.636,206.263z",
+    },
+];
+const diyLetters = [
+    {
+        d: "M388.313,210.147c0-6.356,0.034-12.713-0.023-19.069c-0.015-1.61,0.359-2.472,2.19-2.346c2.887,0.198,5.809,0.045,8.671,0.398c4.396,0.542,8.019,4.294,8.144,8.904c0.223,8.142,0.265,16.304-0.074,24.439c-0.248,5.945-4.552,9.662-10.491,9.831c-1.999,0.057-4.003-0.081-6.006-0.09c-1.746-0.008-2.439-0.853-2.428-2.584C388.34,223.136,388.313,216.642,388.313,210.147z M393.418,210.324c-0.037,0-0.075,0-0.114,0c0,4.55-0.038,9.101,0.015,13.65c0.031,2.688,0.926,3.439,3.56,3.239c3.273-0.248,5.493-2.511,5.534-6.04c0.082-7.099,0.054-14.2-0.033-21.299c-0.041-3.268-1.739-5.241-4.87-6.092c-2.68-0.728-4.025,0.161-4.07,2.896C393.364,201.226,393.418,205.775,393.418,210.324z",
+    },
+    {
+        d: "M478.079,200.8c0.674-1.566,1.121-2.53,1.506-3.519c0.673-1.73,1.252-3.5,1.981-5.205c0.315-0.737,0.766-1.654,1.407-1.961c1.094-0.523,2.388-0.63,3.598-0.912c0.205,1.142,0.798,2.381,0.537,3.404c-0.606,2.388-1.448,4.756-2.507,6.984c-3.981,8.389-4.352,17.254-3.78,26.282c0.091,1.438,0.031,2.899-0.105,4.335c-0.14,1.473-0.989,2.428-2.542,2.497c-1.514,0.067-2.311-0.903-2.54-2.23c-0.232-1.348-0.394-2.754-0.277-4.108c0.94-10.972-1.116-21.38-5.626-31.375c-0.586-1.298-0.899-2.762-1.093-4.183c-0.233-1.712,0.825-2.592,2.379-1.843c1.164,0.561,2.345,1.55,2.973,2.657c1.078,1.897,1.712,4.043,2.568,6.07C476.918,198.547,477.37,199.361,478.079,200.8z",
+    },
+    {
+        d: "M440.516,210.627c0,6.281,0.007,12.563-0.004,18.844c-0.004,2.067-0.805,3.038-2.531,3.015c-1.877-0.025-2.365-1.136-2.359-2.876c0.046-12.631,0.019-25.263,0.029-37.895c0.002-2.592,0.525-3.205,2.419-3.148c1.856,0.057,2.479,1.03,2.466,2.803C440.484,197.788,440.515,204.208,440.516,210.627z",
+    },
+    {
+        d: "M416.875,210.721c0.068-3.305,1.849-5.306,4.727-5.309c2.765-0.003,4.924,2.404,4.816,5.371c-0.106,2.956-2.355,5.212-5.12,5.138C418.626,215.849,416.813,213.718,416.875,210.721z",
+    },
+    {
+        d: "M449.933,210.636c0.102-3.331,1.886-5.279,4.778-5.22c2.67,0.055,4.829,2.432,4.762,5.243c-0.073,3.021-2.404,5.36-5.242,5.261C451.606,215.829,449.84,213.657,449.933,210.636z",
+    },
+];
+export function ExpandedVibesPill({ size = 75, className, onRemix }) {
+    const [phase, setPhase] = useState("idle");
+    const handleClick = () => {
+        if (phase === "idle")
+            setPhase("bubble");
+        else if (phase === "open")
+            setPhase("collapsing");
+    };
+    useEffect(() => {
+        let t;
+        if (phase === "bubble")
+            t = setTimeout(() => setPhase("expanding"), 250);
+        else if (phase === "expanding")
+            t = setTimeout(() => setPhase("open"), 500);
+        else if (phase === "collapsing")
+            t = setTimeout(() => setPhase("shrinking"), 400);
+        else if (phase === "shrinking")
+            t = setTimeout(() => setPhase("idle"), 300);
+        return () => clearTimeout(t);
+    }, [phase]);
+    const numericSize = typeof size === "number" ? size : parseFloat(size) || 75;
+    const height = numericSize;
+    const scale = height / 300;
+    const showBubble = phase !== "idle";
+    const expanded = phase === "expanding" || phase === "open";
+    const shrinking = phase === "shrinking";
+    const buttonsVisible = phase === "open";
+    const creamSlid = phase !== "idle" && phase !== "shrinking";
+    const pillWidth = 600 * scale;
+    const btnWidth = height * 0.75;
+    const btnExpandedWidth = height * 1.8;
+    const visibleButtons = 1;
+    const btnPadding = 10;
+    const trayExtra = btnExpandedWidth + btnWidth * (visibleButtons - 1) + btnPadding;
+    const trayCollapsed = pillWidth + 8;
+    const trayExpanded = pillWidth + trayExtra + 8;
+    return (React.createElement("div", { style: { position: "relative", display: "inline-block", cursor: "pointer" }, onClick: handleClick },
+        React.createElement("div", { style: {
+                position: "absolute",
+                top: 123 * scale - 4,
+                right: -4,
+                height: 175 * scale + 8,
+                width: expanded ? trayExpanded : trayCollapsed,
+                zIndex: 1,
+                background: "var(--vibes-cream, #FFFEF0)",
+                border: "1px solid var(--vibes-near-black, #1a1a1a)",
+                borderRadius: `${87 * scale + 4}px`,
+                transformOrigin: `calc(100% - ${300 * scale}px) center`,
+                transform: shrinking ? "scale(0)" : showBubble ? "scale(1)" : "scale(0)",
+                opacity: showBubble ? 1 : 0,
+                transition: phase === "shrinking"
+                    ? "transform 0.25s ease, opacity 0.01s ease 0.25s"
+                    : phase === "collapsing"
+                        ? "width 0.4s ease"
+                        : phase === "bubble"
+                            ? "transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.01s ease"
+                            : "width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                padding: 0,
+                gap: 0,
+                boxSizing: "border-box",
+            } },
+            React.createElement("div", { style: {
+                    display: "flex",
+                    height: "100%",
+                    gap: 0,
+                    opacity: buttonsVisible ? 1 : 0,
+                    transition: "opacity 0.3s ease",
+                    pointerEvents: buttonsVisible ? "auto" : "none",
+                } },
+                React.createElement(PillActionButton, { height: height, label: "Remix", bgColor: "var(--vibes-yellow, #fedd00)", labelColor: "var(--vibes-near-black, #1a1a1a)", onClick: (e) => {
+                        e.stopPropagation();
+                        onRemix?.();
+                    }, icon: React.createElement("svg", { width: "13", height: "13", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" },
+                        React.createElement("path", { d: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" }),
+                        React.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" })) }))),
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: height, viewBox: "0 0 600 300", fill: "currentColor", className: className, style: { position: "relative", zIndex: 2 } },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#000", d: outerPath }),
+            React.createElement("path", { fill: switchColors.secondary, fillRule: "evenodd", clipRule: "evenodd", d: creamSlid ? vibesD : diyD, style: { transition: "d 0.4s ease, transform 0.4s ease", transform: creamSlid ? "translateX(3px)" : "none" } }),
+            vibesLetters.map((l, i) => (React.createElement("path", { key: `v${i}`, fillRule: "evenodd", clipRule: "evenodd", style: { transition: `fill ${l.delay} ease`, fill: creamSlid ? switchColors.primary : switchColors.secondary }, d: l.d }))),
+            diyLetters.map((l, i) => (React.createElement("path", { key: `d${i}`, fillRule: "evenodd", clipRule: "evenodd", style: { transition: "fill 1s ease", fill: creamSlid ? switchColors.secondary : switchColors.primary }, d: l.d }))))));
+}
+//# sourceMappingURL=ExpandedVibesPill.js.map

package/components/ExpandedVibesPill.js.map

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

package/components/ImgVibes.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Database } from "@fireproof/use-fireproof";
+export interface ImgVibesProps {
+    prompt?: string;
+    _id?: string;
+    images?: File[];
+    database?: string | Database;
+    className?: string;
+    alt?: string;
+    style?: React.CSSProperties;
+    showControls?: boolean;
+}
+export declare function ImgVibes({ prompt, _id: propId, images, database, className, alt, style, showControls }: ImgVibesProps): React.JSX.Element;
+export default ImgVibes;

package/components/ImgVibes.js

@@ -0,0 +1,123 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { useImgVibes } from "../hooks/img-vibes/use-img-vibes.js";
+function promptToId(prompt) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < prompt.length; i++) {
+        hash ^= prompt.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return `img-${(hash >>> 0).toString(36)}`;
+}
+export function ImgVibes({ prompt, _id: propId, images, database, className, alt, style, showControls = true }) {
+    const inputImage = images?.[0];
+    const imageKey = inputImage ? `${inputImage.name}-${inputImage.size}-${inputImage.lastModified}` : "";
+    const stableId = useMemo(() => propId ?? (prompt ? promptToId(prompt + imageKey) : undefined), [propId, prompt, imageKey]);
+    const [generationId, setGenerationId] = useState(undefined);
+    const [versionIndex, setVersionIndex] = useState(null);
+    const { assetUrl, loading, progress, error, document } = useImgVibes({
+        prompt,
+        _id: stableId,
+        database,
+        skip: !prompt && !stableId,
+        generationId,
+        inputImage,
+    });
+    const versions = document?.versions ?? [];
+    const currentVersion = versionIndex ?? document?.currentVersion ?? 0;
+    const fallbackAssetUrl = versions[document?.currentVersion ?? 0]?.assetUrl;
+    const displayUrl = versionIndex !== null ? versions[versionIndex]?.assetUrl : (assetUrl ?? fallbackAssetUrl);
+    const hasMultipleVersions = versions.length > 1;
+    const hasExistingImage = versions.length > 0 && !!displayUrl;
+    const handleRegen = useCallback(() => {
+        setGenerationId(crypto.randomUUID());
+        setVersionIndex(null);
+    }, []);
+    const handlePrev = useCallback(() => {
+        setVersionIndex((prev) => {
+            const cur = prev ?? document?.currentVersion ?? 0;
+            return cur > 0 ? cur - 1 : cur;
+        });
+    }, [document?.currentVersion]);
+    const handleNext = useCallback(() => {
+        setVersionIndex((prev) => {
+            const cur = prev ?? document?.currentVersion ?? 0;
+            return cur < versions.length - 1 ? cur + 1 : cur;
+        });
+    }, [document?.currentVersion, versions.length]);
+    if (!prompt && !stableId) {
+        return (React.createElement("div", { className: className, style: { padding: 20, textAlign: "center", color: "#888" } }, "No prompt provided"));
+    }
+    if (error && !hasExistingImage) {
+        return (React.createElement("div", { className: className, style: { padding: 20, textAlign: "center", color: "#e53e3e" } },
+            React.createElement("strong", null, "Error"),
+            React.createElement("div", null, error.message)));
+    }
+    if (!hasExistingImage) {
+        return (React.createElement("div", { className: className, style: { padding: 20, textAlign: "center", color: "#888" } },
+            React.createElement("div", null, "Generating image..."),
+            React.createElement("div", { style: { fontSize: 14, marginTop: 8 } }, prompt)));
+    }
+    return (React.createElement("div", { style: { position: "relative", display: "inline-block" } },
+        React.createElement("img", { src: displayUrl, alt: alt || prompt || "", className: className, style: style ?? { maxWidth: "100%", height: "auto" } }),
+        loading && (React.createElement("div", { style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: 6,
+                overflow: "hidden",
+                backgroundColor: "rgba(0, 0, 0, 0.1)",
+                zIndex: 10,
+            }, "aria-hidden": "true" },
+            React.createElement("div", { style: {
+                    width: `${progress ?? 0}%`,
+                    height: "100%",
+                    backgroundColor: "#0074d9",
+                    transition: "width 0.5s ease-out",
+                } }))),
+        error && (React.createElement("div", { title: error.message, style: {
+                position: "absolute",
+                top: 10,
+                right: 10,
+                backgroundColor: "rgba(229, 62, 62, 0.9)",
+                color: "#fff",
+                padding: "4px 8px",
+                borderRadius: 4,
+                fontSize: 12,
+                zIndex: 11,
+                maxWidth: "80%",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+            } },
+            "Error: ",
+            error.message)),
+        showControls && (React.createElement("div", { style: {
+                position: "absolute",
+                bottom: 8,
+                right: 8,
+                display: "flex",
+                gap: 4,
+                opacity: 0.8,
+            } },
+            hasMultipleVersions && (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: handlePrev, disabled: currentVersion <= 0, style: btnStyle, title: "Previous version" }, "\u2039"),
+                React.createElement("span", { style: { ...btnStyle, cursor: "default", minWidth: 40, textAlign: "center" } },
+                    currentVersion + 1,
+                    "/",
+                    versions.length),
+                React.createElement("button", { onClick: handleNext, disabled: currentVersion >= versions.length - 1, style: btnStyle, title: "Next version" }, "\u203A"))),
+            React.createElement("button", { onClick: handleRegen, disabled: loading, style: btnStyle, title: "Regenerate" }, "\u21BB")))));
+}
+const btnStyle = {
+    background: "rgba(0,0,0,0.6)",
+    color: "#fff",
+    border: "none",
+    borderRadius: 4,
+    padding: "4px 8px",
+    fontSize: 14,
+    cursor: "pointer",
+    lineHeight: 1,
+};
+export default ImgVibes;
+//# sourceMappingURL=ImgVibes.js.map

package/components/ImgVibes.js.map

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

package/components/ImgVibesUtils/AsyncImg.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { DocFileMeta } from "@fireproof/use-fireproof";
+interface AsyncImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    file: DocFileMeta | File | null | undefined;
+}
+export declare function AsyncImg({ file, ...props }: AsyncImgProps): React.JSX.Element | null;
+export {};

package/components/ImgVibesUtils/AsyncImg.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+export function AsyncImg({ file, ...props }) {
+    const [src, setSrc] = React.useState(null);
+    React.useEffect(() => {
+        let objectUrl = null;
+        let isMounted = true;
+        if (!file) {
+            setSrc(null);
+            return;
+        }
+        if ("file" in file && typeof file.file === "function") {
+            file
+                .file()
+                .then((fileObj) => {
+                if (!isMounted)
+                    return;
+                if (fileObj.type.startsWith("image/")) {
+                    objectUrl = URL.createObjectURL(fileObj);
+                    setSrc(objectUrl);
+                }
+            })
+                .catch((error) => {
+                console.error("[AsyncImg] Failed to load file:", error);
+            });
+        }
+        else if (file instanceof File) {
+            if (file.type.startsWith("image/")) {
+                objectUrl = URL.createObjectURL(file);
+                setSrc(objectUrl);
+            }
+        }
+        return () => {
+            isMounted = false;
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [file]);
+    return src ? React.createElement("img", { src: src, ...props }) : null;
+}
+//# sourceMappingURL=AsyncImg.js.map

package/components/ImgVibesUtils/AsyncImg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncImg.js","sourceRoot":"","sources":["../../../jsr/components/ImgVibesUtils/AsyncImg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB;IACxD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,GAAkB,IAAI,CAAC;QACpC,IAAI,SAAS,GAAG,IAAI,CAAC;QAGrB,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,CAAC,IAAI,CAAC,CAAC;YACb,OAAO;QACT,CAAC;QAGD,IAAI,MAAM,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAEtD,IAAI;iBACD,IAAI,EAAE;iBACN,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;gBAChB,IAAI,CAAC,SAAS;oBAAE,OAAO;gBAGvB,IAAI,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACtC,SAAS,GAAG,GAAG,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBACzC,MAAM,CAAC,SAAS,CAAC,CAAC;gBACpB,CAAC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;gBACf,OAAO,CAAC,KAAK,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC;YAC1D,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;YAEhC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACnC,SAAS,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtC,MAAM,CAAC,SAAS,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,IAAI,SAAS,EAAE,CAAC;gBACd,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,GAAG,CAAC,CAAC,CAAC,6BAAK,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACnD,CAAC"}

package/components/ImgVibesUtils/ImgVibesDisplay.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ImgVibesDisplayProps } from "./types.js";
+export declare function ImgVibesDisplay({ document, className, alt, onDelete, onRegen, onPromptEdit, classes, loading, progress, error, debug }: Partial<ImgVibesDisplayProps>): React.JSX.Element;