@levo-so/studio 0.1.6 → 0.1.8

package/dist/pixel/constants/colorOptions.d.ts

@@ -1,29 +1,4 @@
 export declare const colorOptions: {
-    readonly black: {
-        readonly label: "Black";
-        readonly value: "black";
-        readonly css: "#000000";
-    };
-    readonly white: {
-        readonly label: "White";
-        readonly value: "white";
-        readonly css: "#FFFFFF";
-    };
-    readonly "text-1": {
-        readonly label: "Text 1";
-        readonly value: "text-1";
-        readonly css: "var(--color-text-1)";
-    };
-    readonly "text-2": {
-        readonly label: "Text 2";
-        readonly value: "text-2";
-        readonly css: "var(--color-text-2)";
-    };
-    readonly "text-3": {
-        readonly label: "Text 3";
-        readonly value: "text-3";
-        readonly css: "var(--color-text-3)";
-    };
     readonly brand: {
         readonly label: "Brand";
         readonly value: "brand";
@@ -44,6 +19,21 @@ export declare const colorOptions: {
         readonly value: "brandSecondaryForeground";
         readonly css: "var(--color-brand-secondary-foreground)";
     };
+    readonly "text-1": {
+        readonly label: "Text 1";
+        readonly value: "text-1";
+        readonly css: "var(--color-text-1)";
+    };
+    readonly "text-2": {
+        readonly label: "Text 2";
+        readonly value: "text-2";
+        readonly css: "var(--color-text-2)";
+    };
+    readonly "text-3": {
+        readonly label: "Text 3";
+        readonly value: "text-3";
+        readonly css: "var(--color-text-3)";
+    };
     readonly "background-1": {
         readonly label: "Background 1";
         readonly value: "background-1";
@@ -59,6 +49,21 @@ export declare const colorOptions: {
         readonly value: "background-3";
         readonly css: "var(--color-background-3)";
     };
+    readonly page: {
+        readonly label: "Page";
+        readonly value: "page";
+        readonly css: "var(--color-page)";
+    };
+    readonly black: {
+        readonly label: "Black";
+        readonly value: "black";
+        readonly css: "#000000";
+    };
+    readonly white: {
+        readonly label: "White";
+        readonly value: "white";
+        readonly css: "#FFFFFF";
+    };
     readonly "icon-primary": {
         readonly label: "Icon Primary";
         readonly value: "icon-primary";

package/dist/pixel/constants/fontSizeOptions.d.ts

@@ -54,5 +54,10 @@ export declare const fontSizeOptions: {
         readonly value: "7xl";
         readonly css: "calc(var(--base-font-size, 1rem) * 4.5)";
     };
+    readonly "8xl": {
+        readonly label: "8 XL";
+        readonly value: "8xl";
+        readonly css: "calc(var(--base-font-size, 1rem) * 6)";
+    };
 };
 //# sourceMappingURL=fontSizeOptions.d.ts.map

package/dist/pixel/index.d.ts

@@ -1,3 +1,3 @@
 import { CSSStyleKeys } from './propertyMap';
-export declare const styleObjectToCss: (styleObj: Record<CSSStyleKeys, any>, indent?: number, isNested?: boolean) => string;
+export declare const styleObjectToCss: (styleObj: Record<CSSStyleKeys, unknown>, isNested?: boolean) => string;
 //# sourceMappingURL=index.d.ts.map

package/dist/pixel/optionsMap.d.ts

@@ -5,10 +5,14 @@ type CSSOption = {
     css?: string;
 };
 export type CSSOptionsRecord = Record<string, CSSOption>;
+type ParseResult = {
+    value: string;
+    prefix: string;
+};
 export declare const cssOptionsMap: Partial<Record<CSSStyleKeys, {
     options: CSSOptionsRecord;
     skip?: boolean;
-    parser?: (value: any) => string;
+    parser?: (value: any) => ParseResult;
 }>>;
 export default cssOptionsMap;
 //# sourceMappingURL=optionsMap.d.ts.map

package/dist/pixel/parserUtil.d.ts

@@ -0,0 +1,15 @@
+export interface IShadowConfig {
+    x: number;
+    y: number;
+    blur: number;
+    spread?: number;
+    color?: string;
+}
+export interface IFilterConfig {
+    "drop-shadow"?: IShadowConfig;
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+}
+export declare const formatShadow: (config: IShadowConfig, includeSpread?: boolean) => string;
+//# sourceMappingURL=parserUtil.d.ts.map

package/dist/pixel/propertyMap.d.ts

@@ -1,2 +1,2 @@
-export type CSSStyleKeys = "font-size" | "font-weight" | "text-align" | "text-decoration" | "line-height" | "letter-spacing" | "color" | "display" | "flex-direction" | "justify-content" | "align-items" | "column-gap" | "row-gap" | "gap" | "grid-template-columns" | "grid-template-rows" | "width" | "min-width" | "max-width" | "height" | "filter" | "min-height" | "max-height" | "object-fit" | "border-radius" | "border-style" | "border-width" | "border-color" | "background-color" | "background-size" | "background-position" | "box-shadow" | "padding" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "margin" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "opacity" | "font" | "background-image" | "overflow" | "-webkit-line-clamp" | "-webkit-box-orient" | "font-family" | "number_of_slides" | "background_video_overlay_color" | "background_video_position";
+export type CSSStyleKeys = "font-size" | "font-weight" | "text-align" | "text-decoration" | "line-height" | "letter-spacing" | "color" | "display" | "flex-direction" | "justify-content" | "align-items" | "column-gap" | "row-gap" | "gap" | "grid-template-columns" | "grid-template-rows" | "width" | "min-width" | "max-width" | "height" | "filter" | "min-height" | "max-height" | "object-fit" | "border-radius" | "border-style" | "border-width" | "border-top-width" | "border-right-width" | "border-bottom-width" | "border-left-width" | "border-color" | "background-color" | "background-size" | "background-position" | "box-shadow" | "padding" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "margin" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "opacity" | "font" | "background-image" | "overflow" | "-webkit-line-clamp" | "-webkit-box-orient" | "font-family" | "number_of_slides" | "background_video_overlay_color" | "background_video_position";
 //# sourceMappingURL=propertyMap.d.ts.map

package/dist/providers/AuthProvider.d.ts

@@ -1,5 +1,5 @@
 import { ILevoMembership, IWorkspace } from '@levo-so/core';
-interface AuthProviderInterface {
+interface IAuthState {
     isLoggedIn: boolean;
     account: ILevoMembership.Account | null;
     workspace: IWorkspace | null;
@@ -7,19 +7,17 @@ interface AuthProviderInterface {
     isAuthLoading: boolean;
     isSignOutLoading: boolean;
     isVerifying: boolean;
-    handleRefetchLoginStatus: (onRefetchSuccess?: (user: ILevoMembership.Account) => void) => void;
-    handleSignOut: (handleSignOutSuccess?: () => void) => void;
-    handleVerifyOtp: (config: {
-        email: string;
-        otp: string;
-        onVerifySuccess?: ((account: ILevoMembership.Account | null) => void) | undefined;
-        onVerifyError?: (() => void) | undefined;
-    }) => void;
+}
+interface IAuthActions {
+    setAuthState: (updates: Partial<IAuthState>) => void;
+    resetAuth: () => void;
+}
+interface IAuthProviderInterface extends IAuthState, IAuthActions {
 }
 export declare const AuthProvider: React.FC<{
     children: React.ReactNode;
     workspace: IWorkspace | null;
 }>;
 export default AuthProvider;
-export declare const useAuth: () => AuthProviderInterface;
+export declare const useAuth: () => IAuthProviderInterface;
 //# sourceMappingURL=AuthProvider.d.ts.map

package/dist/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from './blocksLevoClient';
+export * from './levoClient';
 export * from './withBlockPropsUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/levoClient.d.ts

@@ -0,0 +1,5 @@
+import { ILevoClient } from '@levo-so/core';
+declare let studioLevoClient: ILevoClient | null;
+declare const setStudioLevoClient: (client: ILevoClient) => void;
+export { studioLevoClient, setStudioLevoClient };
+//# sourceMappingURL=levoClient.d.ts.map

package/dist/utils/withBlockPropsUtils.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { IFieldConfig, AnimationConfig } from '../interfaces';
 import { MotionProps } from 'motion/react';
+import { IFieldConfig, AnimationConfig } from '../interfaces';
 type MutableDeep<T> = T extends object ? {
     -readonly [K in keyof T]: MutableDeep<T[K]>;
 } : T;
@@ -108,7 +108,8 @@ export declare const generateElementClassName: (elementKey: string, blockId: str
 export declare const useGeneratedClassName: (elementKey: string, blockId: string, configValue: IFieldConfig | undefined) => string;
 /**
  * Hook to create a memoized Motion component
- * Only recreates the component when animation config changes
+ * Only creates Motion component when animation config exists
+ * Recreates when animation config changes to enable animation previews
  *
  * @param WrappedComponent - The component to wrap with motion
  * @param animationConfig - The animation configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levo-so/studio",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "description": "Levo Studio components and utilities for building block-based pages",
   "type": "module",
@@ -29,8 +29,7 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.1",
-    "@radix-ui/react-accordion": "1.2.0",
-    "@radix-ui/react-popover": "1.1.1",
+    "radix-ui": "1.4.3",
     "@theinternetfolks/mate": "1.0.4",
     "class-variance-authority": "0.7.0",
     "culori": "4.0.1",
@@ -68,6 +67,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    }
+    },
+    "./index.css": "./dist/index.css"
   }
 }

package/dist/Dots-CIprNvGi.js

@@ -1,140 +0,0 @@
-"use client";
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import c from "react";
-import { cn as o } from "@levo-so/react";
-import { m as $ } from "./index-DXb2tXBX.js";
-const M = c.memo(
-  ({
-    className: l,
-    dotColor: i = "#00ff00",
-    dotSize: h = 2,
-    spacing: t = 30,
-    isAnimated: m = !1,
-    speed: d = 1
-  }) => {
-    const r = c.useMemo(
-      () => ({
-        cx: t / 2,
-        cy: t / 2,
-        r: h,
-        width: t,
-        height: t
-      }),
-      [t, h]
-    ), u = c.useMemo(
-      () => `dots-pattern-${Math.random().toString(36).substr(2, 9)}`,
-      []
-    ), f = c.useMemo(() => {
-      if (!m) return [];
-      const e = [], y = Math.ceil(100 / (t / 10)), w = Math.ceil(100 / (t / 10));
-      for (let n = 0; n < y; n++)
-        for (let s = 0; s < w; s++)
-          e.push({
-            id: `${n}-${s}`,
-            x: s * t / 10 + Math.random() * 5,
-            y: n * t / 10 + Math.random() * 5,
-            delay: Math.random() * 3,
-            amplitude: 2 + Math.random() * 3
-          });
-      return e;
-    }, [m, t]);
-    return m ? /* @__PURE__ */ a(
-      "div",
-      {
-        className: o(
-          "absolute inset-0 flex h-full w-full items-center justify-center overflow-hidden",
-          "z-[-1]",
-          l
-        ),
-        children: /* @__PURE__ */ a(
-          "svg",
-          {
-            className: "pointer-events-none absolute z-0 h-full w-full",
-            width: "100%",
-            height: "100%",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: f.map((e) => /* @__PURE__ */ a(
-              $.circle,
-              {
-                cx: `${e.x}%`,
-                cy: `${e.y}%`,
-                r: h,
-                fill: i,
-                initial: { opacity: 0.3 },
-                animate: {
-                  opacity: [0.3, 0.8, 0.3],
-                  cx: [
-                    `${e.x}%`,
-                    `${e.x + e.amplitude}%`,
-                    `${e.x - e.amplitude}%`,
-                    `${e.x}%`
-                  ],
-                  cy: [
-                    `${e.y}%`,
-                    `${e.y - e.amplitude}%`,
-                    `${e.y + e.amplitude}%`,
-                    `${e.y}%`
-                  ]
-                },
-                transition: {
-                  duration: 8 / d,
-                  repeat: 1 / 0,
-                  ease: "easeInOut",
-                  delay: e.delay
-                }
-              },
-              e.id
-            ))
-          }
-        )
-      }
-    ) : /* @__PURE__ */ a(
-      "div",
-      {
-        className: o(
-          "absolute inset-0 flex h-full w-full items-center justify-center",
-          "z-[-1]",
-          l
-        ),
-        children: /* @__PURE__ */ x(
-          "svg",
-          {
-            className: "pointer-events-none absolute z-0 h-full w-full",
-            width: "100%",
-            height: "100%",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: [
-              /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a(
-                "pattern",
-                {
-                  id: u,
-                  x: "0",
-                  y: "0",
-                  width: r.width,
-                  height: r.height,
-                  patternUnits: "userSpaceOnUse",
-                  children: /* @__PURE__ */ a(
-                    "circle",
-                    {
-                      cx: r.cx,
-                      cy: r.cy,
-                      r: r.r,
-                      fill: i
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ a("rect", { width: "100%", height: "100%", fill: `url(#${u})` })
-            ]
-          }
-        )
-      }
-    );
-  },
-  // Custom comparison function for better memoization
-  (l, i) => l.className === i.className && l.dotColor === i.dotColor && l.dotSize === i.dotSize && l.spacing === i.spacing && l.isAnimated === i.isAnimated && l.speed === i.speed
-);
-M.displayName = "BackgroundDots";
-export {
-  M as BackgroundDots
-};

package/dist/Gradient-DIn_uQLE.js

@@ -1,42 +0,0 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import r from "react";
-import { cn as o } from "@levo-so/react";
-import { m as l } from "./index-DXb2tXBX.js";
-const s = r.memo(
-  ({
-    className: t,
-    fromColor: i = "#ff0000",
-    toColor: a = "#00ff00",
-    direction: n = "45deg"
-  }) => /* @__PURE__ */ e(
-    "div",
-    {
-      className: o(
-        "absolute inset-0 flex h-full w-full items-center justify-center",
-        "z-[-1]",
-        t
-      ),
-      children: /* @__PURE__ */ e(
-        l.div,
-        {
-          className: "absolute inset-0 h-full w-full",
-          style: {
-            background: `linear-gradient(${n}, ${i}, ${a})`
-          },
-          initial: { opacity: 0.8 },
-          animate: { opacity: [0.8, 0.9, 0.8] },
-          transition: {
-            duration: 4,
-            repeat: 1 / 0,
-            ease: "easeInOut"
-          }
-        }
-      )
-    }
-  )
-);
-s.displayName = "BackgroundGradient";
-export {
-  s as BackgroundGradient
-};

package/dist/Grid-DXjfqDT3.js

@@ -1,162 +0,0 @@
-"use client";
-import { jsx as r, jsxs as v } from "react/jsx-runtime";
-import a from "react";
-import { cn as f } from "@levo-so/react";
-import { m as n } from "./index-DXb2tXBX.js";
-const x = a.memo(
-  ({
-    className: t,
-    lineColor: e = "#333333",
-    lineWidth: i = 1,
-    spacing: l = 50,
-    // Interactive mode props
-    isInteractive: w = !1,
-    hoverColor: s = "#93c5fd",
-    rows: d = 150,
-    cols: c = 100
-  }) => {
-    const y = a.useMemo(() => new Array(d).fill(1), [d]), $ = a.useMemo(() => new Array(c).fill(1), [c]), o = a.useMemo(
-      () => ({
-        rowStyle: {
-          height: `${l}px`,
-          width: `${l * 2}px`,
-          borderLeft: `${i}px solid ${e}`
-        },
-        colStyle: {
-          height: `${l}px`,
-          width: `${l * 2}px`,
-          borderTop: `${i}px solid ${e}`,
-          borderRight: `${i}px solid ${e}`
-        },
-        iconStyle: {
-          top: `${-l / 3.8}px`,
-          left: `${-l / 2.4}px`,
-          color: e
-        }
-      }),
-      [l, i, e]
-    ), h = a.useMemo(
-      () => ({
-        hover: {
-          backgroundColor: s,
-          transition: { duration: 0 }
-        },
-        animate: {
-          transition: { duration: 2 }
-        }
-      }),
-      [s]
-    );
-    return w ? /* @__PURE__ */ r(
-      "div",
-      {
-        className: f(
-          "absolute inset-0 flex h-full w-full items-center justify-center overflow-hidden",
-          "z-[-1]",
-          t
-        ),
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            style: {
-              transform: "translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)"
-            },
-            className: "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
-            children: y.map((g, m) => /* @__PURE__ */ r(
-              n.div,
-              {
-                className: "relative",
-                style: o.rowStyle,
-                children: $.map((k, u) => /* @__PURE__ */ r(
-                  n.div,
-                  {
-                    whileHover: h.hover,
-                    animate: h.animate,
-                    className: "relative",
-                    style: o.colStyle,
-                    children: u % 2 === 0 && m % 2 === 0 ? /* @__PURE__ */ r(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        strokeWidth: "1.5",
-                        stroke: "currentColor",
-                        className: "pointer-events-none absolute h-6 w-10 stroke-[1px]",
-                        style: o.iconStyle,
-                        children: /* @__PURE__ */ r(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            d: "M12 6v12m6-6H6"
-                          }
-                        )
-                      }
-                    ) : null
-                  },
-                  `col-${u}`
-                ))
-              },
-              `row-${m}`
-            ))
-          }
-        )
-      }
-    ) : /* @__PURE__ */ r(
-      "div",
-      {
-        className: f(
-          "absolute inset-0 flex h-full w-full items-center justify-center",
-          "z-[-1]",
-          t
-        ),
-        children: /* @__PURE__ */ v(
-          "svg",
-          {
-            className: "pointer-events-none absolute z-0 h-full w-full",
-            width: "100%",
-            height: "100%",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: [
-              /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ r(
-                "pattern",
-                {
-                  id: "grid-pattern",
-                  x: "0",
-                  y: "0",
-                  width: l,
-                  height: l,
-                  patternUnits: "userSpaceOnUse",
-                  children: /* @__PURE__ */ r(
-                    n.path,
-                    {
-                      d: `M ${l} 0 L 0 0 0 ${l}`,
-                      fill: "none",
-                      stroke: e,
-                      strokeWidth: i,
-                      initial: { opacity: 0.2 },
-                      animate: { opacity: [0.2, 0.5, 0.2] },
-                      transition: {
-                        duration: 3,
-                        repeat: 1 / 0,
-                        ease: "easeInOut"
-                      }
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ r("rect", { width: "100%", height: "100%", fill: "url(#grid-pattern)" })
-            ]
-          }
-        )
-      }
-    );
-  },
-  // Custom comparison function for better memoization
-  (t, e) => t.className === e.className && t.lineColor === e.lineColor && t.lineWidth === e.lineWidth && t.spacing === e.spacing && t.isInteractive === e.isInteractive && t.hoverColor === e.hoverColor && t.rows === e.rows && t.cols === e.cols
-);
-x.displayName = "BackgroundGrid";
-export {
-  x as BackgroundGrid
-};