@vibes.diy/use-vibes-base 0.19.8-dev → 0.19.14-dev-cli

package/utils/styles.js

@@ -1,67 +1,67 @@
 export const imgGenTheme = {
     colors: {
-        text: '#333',
-        background: '#333333',
-        overlayBg: 'rgba(255, 255, 255, 0.5)',
-        accent: '#0066cc',
-        flash: '#fe0',
-        errorBg: 'rgba(0, 0, 0, 0.7)',
-        errorBorder: '#ff6666',
-        errorText: '#ff6666',
-        errorTextBody: '#ffffff',
-        buttonBg: 'rgba(255, 255, 255, 0.7)',
-        deleteHover: '#ff3333',
-        inputBorder: 'light-dark(#ccc, #555)',
-        inputBg: 'light-dark(#ffffff, #2a2a2a)',
-        inputText: 'light-dark(#333, #e0e0e0)',
-        dropZoneBorder: 'light-dark(#ccc, #555)',
-        dropZoneBg: 'light-dark(#fafafa, #2a2a2a)',
-        dropZoneActiveBg: 'light-dark(#f0f8ff, #1a3a4a)',
-        mutedText: 'light-dark(#666, #aaa)',
-        lightBg: 'light-dark(#f0f0f0, #404040)',
-        thumbnailBorder: 'light-dark(#ddd, #555)',
-        titleText: 'light-dark(#333, #e0e0e0)',
+        text: "#333",
+        background: "#333333",
+        overlayBg: "rgba(255, 255, 255, 0.5)",
+        accent: "#0066cc",
+        flash: "#fe0",
+        errorBg: "rgba(0, 0, 0, 0.7)",
+        errorBorder: "#ff6666",
+        errorText: "#ff6666",
+        errorTextBody: "#ffffff",
+        buttonBg: "rgba(255, 255, 255, 0.7)",
+        deleteHover: "#ff3333",
+        inputBorder: "light-dark(#ccc, #555)",
+        inputBg: "light-dark(#ffffff, #2a2a2a)",
+        inputText: "light-dark(#333, #e0e0e0)",
+        dropZoneBorder: "light-dark(#ccc, #555)",
+        dropZoneBg: "light-dark(#fafafa, #2a2a2a)",
+        dropZoneActiveBg: "light-dark(#f0f8ff, #1a3a4a)",
+        mutedText: "light-dark(#666, #aaa)",
+        lightBg: "light-dark(#f0f0f0, #404040)",
+        thumbnailBorder: "light-dark(#ddd, #555)",
+        titleText: "light-dark(#333, #e0e0e0)",
     },
     dimensions: {
-        borderRadius: '8px',
-        padding: '8px',
-        buttonSize: '28px',
-        progressHeight: '8px',
+        borderRadius: "8px",
+        padding: "8px",
+        buttonSize: "28px",
+        progressHeight: "8px",
     },
     typography: {
-        fontSize: '14px',
-        fontWeight: 'bold',
-        lineHeight: '1.5',
+        fontSize: "14px",
+        fontWeight: "bold",
+        lineHeight: "1.5",
     },
     effects: {
-        blurRadius: '4px',
-        transitionSpeed: '0.2s',
-        shadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+        blurRadius: "4px",
+        transitionSpeed: "0.2s",
+        shadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
     },
 };
 export const imgGenStyles = {
     root: {
-        position: 'relative',
-        maxWidth: '100%',
-        overflow: 'hidden',
+        position: "relative",
+        maxWidth: "100%",
+        overflow: "hidden",
     },
     container: {
-        position: 'relative',
-        width: '100%',
-        height: '100%',
+        position: "relative",
+        width: "100%",
+        height: "100%",
     },
     imageContainer: {
-        position: 'relative',
-        width: '100%',
-        overflow: 'hidden',
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
     },
     image: {
-        width: '100%',
-        height: 'auto',
-        display: 'block',
+        width: "100%",
+        height: "auto",
+        display: "block",
     },
     overlay: {
-        position: 'absolute',
+        position: "absolute",
         bottom: 0,
         left: 0,
         right: 0,
@@ -71,50 +71,50 @@ export const imgGenStyles = {
         WebkitBackdropFilter: `blur(${imgGenTheme.effects.blurRadius})`, // Safari support
         transition: `opacity ${imgGenTheme.effects.transitionSpeed} ease`,
         zIndex: 10,
-        display: 'flex',
-        flexDirection: 'column',
+        display: "flex",
+        flexDirection: "column",
     },
     topLine: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
     },
     prompt: {
-        width: '100%',
-        padding: '4px',
-        marginBottom: '8px',
+        width: "100%",
+        padding: "4px",
+        marginBottom: "8px",
     },
     promptText: {
         color: imgGenTheme.colors.text,
-        width: '100%',
-        textAlign: 'center',
+        width: "100%",
+        textAlign: "center",
         fontWeight: imgGenTheme.typography.fontWeight,
-        padding: '2px',
-        cursor: 'pointer',
+        padding: "2px",
+        cursor: "pointer",
     },
     controls: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        paddingTop: '2px',
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        paddingTop: "2px",
     },
     controlGroup: {
-        display: 'flex',
-        gap: '6px',
-        alignItems: 'center',
+        display: "flex",
+        gap: "6px",
+        alignItems: "center",
     },
     button: {
         background: imgGenTheme.colors.buttonBg,
-        borderRadius: '50%',
+        borderRadius: "50%",
         width: imgGenTheme.dimensions.buttonSize,
         height: imgGenTheme.dimensions.buttonSize,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        border: 'none',
-        cursor: 'pointer',
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "none",
+        cursor: "pointer",
         opacity: 0.5,
         transition: `opacity ${imgGenTheme.effects.transitionSpeed} ease`,
         padding: 0,
@@ -122,135 +122,135 @@ export const imgGenStyles = {
         color: imgGenTheme.colors.text,
     },
     progressContainer: {
-        position: 'absolute',
+        position: "absolute",
         top: 0,
         left: 0,
         right: 0,
         zIndex: 50,
     },
     progress: {
-        position: 'absolute',
+        position: "absolute",
         top: 0,
         left: 0,
         height: imgGenTheme.dimensions.progressHeight,
         backgroundColor: imgGenTheme.colors.accent,
-        transition: 'width 0.3s ease-in-out',
+        transition: "width 0.3s ease-in-out",
         zIndex: 11,
     },
     placeholder: {
-        width: '100%',
-        aspectRatio: '1 / 1',
+        width: "100%",
+        aspectRatio: "1 / 1",
         backgroundColor: imgGenTheme.colors.background,
-        position: 'relative',
-        overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        boxSizing: 'border-box',
+        position: "relative",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
     },
     statusText: {
-        width: '100%',
-        textAlign: 'center',
+        width: "100%",
+        textAlign: "center",
         fontSize: imgGenTheme.typography.fontSize,
         color: imgGenTheme.colors.text,
         opacity: 0.7,
-        padding: '8px 0',
+        padding: "8px 0",
     },
     errorContainer: {
-        backgroundColor: '#222',
-        aspectRatio: '1 / 1',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '1rem',
-        width: '100%',
+        backgroundColor: "#222",
+        aspectRatio: "1 / 1",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "1rem",
+        width: "100%",
         borderRadius: imgGenTheme.dimensions.borderRadius,
-        overflow: 'hidden',
+        overflow: "hidden",
     },
     error: {
-        backgroundColor: '#000',
+        backgroundColor: "#000",
         color: imgGenTheme.colors.errorText,
-        padding: '1.5rem',
+        padding: "1.5rem",
         borderRadius: imgGenTheme.dimensions.borderRadius,
         border: `1px solid ${imgGenTheme.colors.errorBorder}`,
         boxShadow: imgGenTheme.effects.shadow,
-        maxWidth: '80%',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: 'center',
+        maxWidth: "80%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
     },
     errorTitle: {
         color: imgGenTheme.colors.errorText,
         marginTop: 0,
-        fontWeight: 'bold',
-        fontSize: '18px',
-        marginBottom: '12px',
-        textAlign: 'center',
+        fontWeight: "bold",
+        fontSize: "18px",
+        marginBottom: "12px",
+        textAlign: "center",
     },
     errorMessage: {
-        whiteSpace: 'pre-wrap',
+        whiteSpace: "pre-wrap",
         color: imgGenTheme.colors.errorTextBody,
         fontSize: imgGenTheme.typography.fontSize,
         lineHeight: imgGenTheme.typography.lineHeight,
-        textAlign: 'left',
-        fontFamily: 'monospace, sans-serif',
+        textAlign: "left",
+        fontFamily: "monospace, sans-serif",
         marginBottom: 0,
     },
     promptInputEditMode: {
         border: `2px solid ${imgGenTheme.colors.accent}`,
-        padding: '6px 10px',
-        borderRadius: '6px',
+        padding: "6px 10px",
+        borderRadius: "6px",
     },
     uploadWaiting: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '1rem',
-        padding: '1rem',
-        alignItems: 'center',
-        textAlign: 'center',
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        padding: "1rem",
+        alignItems: "center",
+        textAlign: "center",
         backgroundColor: imgGenTheme.colors.inputBg,
         borderRadius: imgGenTheme.dimensions.borderRadius,
         border: `1px solid ${imgGenTheme.colors.inputBorder}`,
     },
     promptForm: {
-        display: 'flex',
-        gap: '0.5rem',
-        width: '100%',
-        maxWidth: '600px',
-        flexDirection: 'column',
+        display: "flex",
+        gap: "0.5rem",
+        width: "100%",
+        maxWidth: "600px",
+        flexDirection: "column",
     },
     promptInput: {
-        width: '100%',
-        padding: '0.8rem',
-        fontSize: '1rem',
+        width: "100%",
+        padding: "0.8rem",
+        fontSize: "1rem",
         border: `1px solid ${imgGenTheme.colors.inputBorder}`,
-        borderRadius: '4px',
-        boxSizing: 'border-box',
+        borderRadius: "4px",
+        boxSizing: "border-box",
         backgroundColor: imgGenTheme.colors.inputBg,
         color: imgGenTheme.colors.inputText,
     },
     promptSubmit: {
-        padding: '0.8rem',
-        fontSize: '1rem',
+        padding: "0.8rem",
+        fontSize: "1rem",
         backgroundColor: imgGenTheme.colors.accent,
-        color: 'white',
-        border: 'none',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        transition: 'background-color 0.3s',
+        color: "white",
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+        transition: "background-color 0.3s",
     },
     fileDrop: {
         border: `2px dashed ${imgGenTheme.colors.dropZoneBorder}`,
-        borderRadius: '8px',
-        padding: '2rem',
-        textAlign: 'center',
-        cursor: 'pointer',
-        transition: 'border-color 0.3s, background-color 0.3s',
+        borderRadius: "8px",
+        padding: "2rem",
+        textAlign: "center",
+        cursor: "pointer",
+        transition: "border-color 0.3s, background-color 0.3s",
         backgroundColor: imgGenTheme.colors.dropZoneBg,
-        marginTop: '1rem',
+        marginTop: "1rem",
     },
     fileDropActive: {
         borderColor: imgGenTheme.colors.accent,
@@ -258,54 +258,54 @@ export const imgGenStyles = {
     },
     fileDropDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: "not-allowed",
     },
     fileDropMessage: {
         color: imgGenTheme.colors.mutedText,
-        fontSize: '1rem',
-        fontWeight: 'normal',
+        fontSize: "1rem",
+        fontWeight: "normal",
     },
     uploadedPreviews: {
-        width: '100%',
-        marginTop: '1rem',
+        width: "100%",
+        marginTop: "1rem",
     },
     uploadCount: {
-        fontSize: '0.9rem',
+        fontSize: "0.9rem",
         color: imgGenTheme.colors.mutedText,
-        marginBottom: '0.5rem',
-        fontWeight: 'bold',
+        marginBottom: "0.5rem",
+        fontWeight: "bold",
     },
     thumbnails: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
-        gap: '0.5rem',
-        maxWidth: '400px',
-        margin: '0 auto',
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(80px, 1fr))",
+        gap: "0.5rem",
+        maxWidth: "400px",
+        margin: "0 auto",
     },
     thumbnail: {
-        aspectRatio: '1 / 1',
-        overflow: 'hidden',
-        borderRadius: '4px',
+        aspectRatio: "1 / 1",
+        overflow: "hidden",
+        borderRadius: "4px",
         border: `1px solid ${imgGenTheme.colors.thumbnailBorder}`,
     },
     thumbnailImg: {
-        width: '100%',
-        height: '100%',
-        objectFit: 'cover',
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
     },
     moreCount: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         backgroundColor: imgGenTheme.colors.lightBg,
         color: imgGenTheme.colors.mutedText,
-        fontSize: '0.8rem',
-        fontWeight: 'bold',
+        fontSize: "0.8rem",
+        fontWeight: "bold",
     },
     truncate: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
     },
 };
 export function createStyledVariant(baseStyle, variants = {}) {
@@ -313,16 +313,16 @@ export function createStyledVariant(baseStyle, variants = {}) {
 }
 export const styleUtils = {
     hover: (styles) => ({
-        '&:hover': styles,
+        "&:hover": styles,
     }),
     disabled: (styles) => ({
-        '&:disabled': styles,
+        "&:disabled": styles,
     }),
     mediaQuery: (query, styles) => ({
         [`@media ${query}`]: styles,
     }),
     transition: (properties, duration = imgGenTheme.effects.transitionSpeed) => ({
-        transition: properties.map((prop) => `${prop} ${duration} ease`).join(', '),
+        transition: properties.map((prop) => `${prop} ${duration} ease`).join(", "),
     }),
 };
 //# sourceMappingURL=styles.js.map

package/utils/vibe-control-styles.d.ts

@@ -1,4 +1,4 @@
-export type VibeControlPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export type VibeControlPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
 export declare const vibeControlTheme: {
     colors: {
         buttonBg: string;