@levo-so/studio 0.1.0

package/dist/interfaces/block.d.ts

@@ -0,0 +1,50 @@
+import { IBlockSource, IFieldConfig } from './levoBlock';
+import { ComponentType, LazyExoticComponent } from 'react';
+import { CSSStyleKeys } from '../pixel/propertyMap';
+export type IStyles = {
+    [key in CSSStyleKeys]?: string;
+} & {
+    mobile?: {
+        [key in CSSStyleKeys]?: string;
+    };
+    tablet?: {
+        [key in CSSStyleKeys]?: string;
+    };
+};
+type DeepStyles<T> = T extends Array<infer U> ? IStyles & {
+    [index: number]: DeepStyles<U>;
+} : T extends object ? {
+    [K in keyof T]: DeepStyles<T[K]>;
+} : IStyles;
+type DeepConfig<T> = T extends Array<infer U> ? IFieldConfig & {
+    [index: number]: DeepConfig<U>;
+} : T extends object ? IFieldConfig & {
+    [K in keyof T]: DeepConfig<T[K]>;
+} & {
+    [x: string]: IFieldConfig;
+} : IFieldConfig;
+export type ISettingsType = {
+    [key: string]: any;
+};
+export interface ILevoBlockBaseProps<ContentType = Record<string, any>> {
+    content: ContentType & {
+        [x: string]: any;
+    };
+    styles: DeepStyles<ContentType & {
+        [x: string]: any;
+    }>;
+    config: DeepConfig<ContentType & {
+        [x: string]: any;
+    }>;
+    id: string;
+}
+export interface ILevoBlockProps<ContentType = Record<string, any>> extends ILevoBlockBaseProps<ContentType> {
+    id: string;
+    block_key: string;
+    block_version: string;
+    settings: ISettingsType;
+    source: IBlockSource[];
+}
+export type BlockComponent = React.FC<ILevoBlockBaseProps> | LazyExoticComponent<ComponentType<ILevoBlockBaseProps<any>>>;
+export {};
+//# sourceMappingURL=block.d.ts.map

package/dist/interfaces/contentSchema.d.ts

@@ -0,0 +1,29 @@
+export declare const KindList: readonly ["element", "group"];
+export declare const StudioWidgetList: readonly ["BoxWidget", "ButtonWidget", "LayoutWidget", "HeadingWidget", "IframeWidget", "ImageWidget", "IconWidget", "MediaWidget", "TypographyWidget", "CarouselWidget", "FormWidget", "ContainerWidget", "CardWidget", "TitleWidget", "TextWidget", "NumberWidget", "URLWidget", "ImageUploadWidget", "MultiImageUploadWidget", "TextareaWidget", "RichTextWidget", "DropdownWidget", "SwitchWidget", "DateWidget", "ArrayWidget", "RecordWidget"];
+export declare const StudioWidgetMap: Record<"BoxWidget" | "ButtonWidget" | "LayoutWidget" | "HeadingWidget" | "IframeWidget" | "ImageWidget" | "IconWidget" | "MediaWidget" | "TypographyWidget" | "CarouselWidget" | "FormWidget" | "ContainerWidget" | "CardWidget" | "TitleWidget" | "TextWidget" | "NumberWidget" | "URLWidget" | "ImageUploadWidget" | "MultiImageUploadWidget" | "TextareaWidget" | "RichTextWidget" | "DropdownWidget" | "SwitchWidget" | "DateWidget" | "ArrayWidget" | "RecordWidget", "BoxWidget" | "ButtonWidget" | "LayoutWidget" | "HeadingWidget" | "IframeWidget" | "ImageWidget" | "IconWidget" | "MediaWidget" | "TypographyWidget" | "CarouselWidget" | "FormWidget" | "ContainerWidget" | "CardWidget" | "TitleWidget" | "TextWidget" | "NumberWidget" | "URLWidget" | "ImageUploadWidget" | "MultiImageUploadWidget" | "TextareaWidget" | "RichTextWidget" | "DropdownWidget" | "SwitchWidget" | "DateWidget" | "ArrayWidget" | "RecordWidget">;
+type MediaHint = {
+    orientation?: "landscape" | "portrait" | "square";
+    size?: "icon" | "small" | "medium" | "large" | "cover";
+    usecase?: "avatar" | "icon" | "hero" | "background" | "logo" | "other";
+};
+type ContentHint = {
+    min_characters?: number;
+    max_characters?: number;
+};
+type GroupHint = {
+    min_items?: number;
+    max_items?: number;
+};
+export interface IStudioWidget {
+    label: string;
+    key: string;
+    field_interface: (typeof StudioWidgetList)[number];
+    kind?: (typeof KindList)[number];
+    fields?: IStudioWidget[];
+    options?: Record<string, any>;
+    hint?: {
+        prompt_description?: string;
+    } & (MediaHint | ContentHint | GroupHint);
+}
+export {};
+//# sourceMappingURL=contentSchema.d.ts.map

package/dist/interfaces/index.d.ts

@@ -0,0 +1,7 @@
+export * from './block';
+export * from './contentSchema';
+export * from './levoBlock';
+export * from './site';
+export * from './sites';
+export * from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/interfaces/levoBlock.d.ts

@@ -0,0 +1,203 @@
+import { IField, ILemaCollection, IMediaObject } from '@levo-so/core';
+import { MotionProps } from 'motion/react';
+import { IStudioWidget } from './contentSchema';
+export interface IBlockLayouts {
+    key: string;
+    title: string;
+    styles: IElementStyle;
+    content: any;
+    config: Record<string, IFieldConfig>;
+}
+export interface IBlock {
+    category_id: string;
+    title: string;
+    key: string;
+    version: string;
+    prompt_description?: string;
+    content_schema: IStudioWidget[];
+    layouts: IBlockLayouts[];
+}
+export interface IBlockCategory {
+    id: string;
+    title: string;
+    description: string;
+    media?: any[];
+}
+export declare const BlockSourceModuleList: readonly ["collection", "event", "blog", "context"];
+export type IStudioSource = {
+    id?: string;
+    workspace_id: string;
+    module: (typeof BlockSourceModuleList)[number];
+    identifier: string;
+    field_key: string;
+    params?: Record<string, any>;
+    options?: {
+        sub_module?: "popular_posts" | "related_posts";
+        blog_id?: string;
+        context_key?: string;
+    };
+    metadata?: Record<string, any>;
+    filters?: string[];
+    created_at?: string;
+    updated_at?: string;
+};
+export type IBlockSource = IStudioSource & {
+    block_instance_id?: string;
+};
+export type IPageSource = IStudioSource & {
+    page_id?: string;
+};
+export type ISettingsField = {
+    type: "custom";
+    schema: {
+        field_interface: string;
+        settings?: Record<string, any>;
+    };
+} | {
+    type: "collection";
+    schema: IField;
+};
+type MutableDeep<T> = T extends readonly (infer U)[] ? MutableDeep<U>[] : T extends object ? {
+    -readonly [K in keyof T]: MutableDeep<T[K]>;
+} : T;
+export interface AnimationConfig {
+    initial?: MutableDeep<MotionProps["initial"]>;
+    exit?: MutableDeep<MotionProps["exit"]>;
+    whileHover?: MutableDeep<MotionProps["whileHover"]>;
+}
+export interface BackgroundEffectConfig {
+    type: "beams" | "dots" | "grid" | "gradient" | "waves";
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        accent?: string;
+    };
+    settings?: {
+        size?: number;
+        spacing?: number;
+        direction?: string;
+        opacity?: number;
+        amplitude?: number;
+        frequency?: number;
+        speed?: number;
+        isInteractive?: boolean;
+        rows?: number;
+        cols?: number;
+        gridSize?: number;
+        hoverColor?: string;
+        lineWidth?: number;
+    };
+}
+export interface BackgroundPreset {
+    id: string;
+    name: string;
+    description?: string;
+    category: "minimal" | "dynamic" | "interactive" | "custom";
+    effect: BackgroundEffectConfig;
+    thumbnail?: string;
+}
+export interface IFieldConfig {
+    selectedVariants?: Record<string, string>;
+    animation?: AnimationConfig;
+    form?: {
+        collection_id: string;
+        collection_name?: string;
+        submit_button_label?: string;
+        workspace_id: string;
+        schema: ILemaCollection;
+        hidden_fields: string[];
+    };
+    action?: {
+        type: "page" | "external_link" | "email" | "phone" | "login" | "none";
+        value: string;
+        options: {
+            openInNewTab?: boolean;
+        };
+    };
+    button_icons?: {
+        left?: {
+            enabled?: boolean;
+        };
+        right?: {
+            enabled?: boolean;
+        };
+    };
+    heading?: {
+        level?: number;
+    };
+    backgroundVideo?: {
+        media?: IMediaObject;
+    };
+    backgroundEffects?: BackgroundEffectConfig;
+    backgroundPresetId?: string;
+    action_type?: "link" | "email" | "phone" | "login" | "none";
+    action_value?: string;
+    carousel?: {
+        autoScroll?: boolean;
+        loop?: boolean;
+        autoPlay?: boolean;
+        speed?: number;
+        time_per_slide?: number;
+        stopOnFocusIn?: boolean;
+        stopOnInteraction?: boolean;
+        stopOnMouseEnter?: boolean;
+    };
+    image?: {
+        high_priority?: boolean;
+    };
+    media?: {
+        autoPlay?: boolean;
+        controls?: boolean;
+        muted?: boolean;
+        loop?: boolean;
+        poster?: IMediaObject;
+        high_priority?: boolean;
+    };
+    custom_html?: {
+        before?: string;
+        after?: string;
+    };
+}
+export interface IBlockInstance {
+    id: string;
+    workspace_id: string;
+    key: string;
+    version: string;
+    title: string;
+    status: string;
+    content: Record<string, any>;
+    source: IBlockSource[];
+    settings: {
+        [key: string]: any;
+        sources?: never;
+    };
+    layout: string | null;
+    category: string;
+    config: Record<string, IFieldConfig>;
+    styles: IElementStyle;
+    theme: Record<string, any>;
+    view_count: number;
+    impression_count: number;
+    page_count: number;
+    source_count: number;
+    created_at: string;
+    updated_at: string;
+    deleted_at: any;
+}
+export interface IMyCategory {
+    name: string;
+    count: number;
+}
+export interface IMyBlockPages {
+    id: string;
+    title: string;
+    url: string;
+    kind: string;
+    status: string;
+}
+export type IBlockCategoryExpanded = IBlockCategory & {
+    block: IBlock;
+};
+export type IElementStyle = Record<string, any>;
+export {};
+//# sourceMappingURL=levoBlock.d.ts.map

package/dist/interfaces/site.d.ts

@@ -0,0 +1,179 @@
+import { IMediaObject, LevoQuery, IWorkspace } from '@levo-so/core';
+import { ISite } from './sites';
+import { IBlockInstance, IPageSource } from './levoBlock';
+export interface IPageSpeedData {
+    audit_id: string;
+    mobile: Scores;
+    desktop: Scores;
+    completed_at: string;
+}
+interface Scores {
+    performance: number;
+    seo: number;
+    "best-practices": number;
+    accessibility: number;
+}
+export interface IStudioTags {
+    id: string;
+    title: string;
+    slug: string;
+}
+export interface IPageStatMetric {
+    current: number | null;
+    past: number | null;
+    change: number | null;
+}
+export interface IPage {
+    id: string;
+    workspace_id: string;
+    site_id: string;
+    title: string;
+    description: string;
+    key: string;
+    url: string;
+    live_url: string;
+    domain: string;
+    status: "published" | "draft";
+    meta: IPageMeta;
+    tags: IStudioTags[];
+    pagespeed_score: IPageSpeedData;
+    access: IPageAccess[];
+    settings: {
+        structured_data_json?: string;
+        [key: string]: any;
+    };
+    theme: {
+        colors: {
+            brand: {
+                main: string;
+                foreground: string;
+                background: string;
+            };
+            brandSecondary: {
+                main: string;
+                foreground: string;
+                background: string;
+            };
+            text1: string;
+            text2: string;
+            text3: string;
+            [x: string]: any;
+        };
+    };
+    block_count: number;
+    variable_count: number;
+    source_count: number;
+    url_count: number;
+    created_at: string;
+    updated_at: string;
+    source?: IPageSource[];
+    kind: IPageKind;
+    sample_url: string;
+    insights: {
+        bounce_rate: IPageStatMetric;
+        page_views: IPageStatMetric;
+        scroll_depth: IPageStatMetric;
+    };
+}
+export interface IPageMeta {
+    meta_title: string;
+    meta_description: string;
+    og_title: string;
+    og_description: string;
+    og_image: IMediaObject | null;
+    og_url: string;
+    keywords: string;
+    disable_indexing: boolean;
+}
+export type IPageKind = "blog.page" | "collection.page" | "event.page" | "static";
+export interface IPageExpanded extends IPage {
+    workspace: IWorkspace;
+    site: ISite;
+    source?: IPageSource[];
+    kind: IPageKind;
+    blocks: (IBlockInstance & {
+        isPreview?: boolean;
+    })[];
+    access: IPageAccess[];
+}
+export interface IPageFromPath {
+    workspace: IWorkspace;
+    site: ISite;
+    query: Record<string, string>;
+    data: IPageExpanded | null;
+    access: IPageAccessCheck | null;
+}
+export interface IPageAccessGatingOptions {
+    collection: string;
+    field: string;
+    condition?: LevoQuery.Where;
+    default_value?: Record<string, any>;
+    hidden?: string[];
+}
+export declare const IMembershipAuthenticationMethods: readonly ["linkedin", "google", "otp", "magiclink", "password"];
+export interface IPageAccessAuthenticationOptions {
+    methods: (typeof IMembershipAuthenticationMethods)[number][];
+    primary_method: (typeof IMembershipAuthenticationMethods)[number];
+}
+export type IPageAccessGating = {
+    kind: "gating";
+    options: IPageAccessGatingOptions;
+};
+export type IPageAccessAuthentication = {
+    kind: "authentication";
+    options: IPageAccessAuthenticationOptions;
+};
+export type IPageAccess = (IPageAccessGating | IPageAccessAuthentication) & {
+    enabled: boolean;
+};
+export type IPageAccessAuthenticationCodes = 
+/**
+ * if `options.methods` is empty
+ */
+"authentication.NOT_CONFIGURED"
+/**
+ * if `getNullableAccount` returns `null`, when `kind: authentication` is not optional
+ */
+ | "authentication.NOT_LOGGED_IN" | "authentication.SUCCESS";
+export type IPageAccessGatingCodes = 
+/**
+ * if `options.collection` is empty
+ */
+"gating.NOT_CONFIGURED"
+/**
+ * if not `email` is given, and it could not fetched with authentication also
+ */
+ | "gating.IDENTIFIER_NOT_FOUND"
+/**
+ * if `options.collection` does not have entry with the given `email`
+ */
+ | "gating.ENTRY_NOT_FOUND"
+/**
+ * if `options.collection` has entry, but doesn't pass the `options.condition` criteria
+ */
+ | "gating.ENTRY_CONDITION_NOT_FULFILLED" | "gating.SUCCESS";
+export interface IPageAccessCheck {
+    has_access: boolean;
+    code?: IPageAccessAuthenticationCodes | IPageAccessGatingCodes;
+    message: string;
+    options?: Pick<IPageAccessGatingOptions, "collection" | "field"> | IPageAccessAuthenticationOptions;
+}
+export interface ISitemap {
+    created_at: string;
+    filename: string;
+    id: string;
+    location: string;
+    name: string;
+    page_id: string | null;
+    path: string;
+    updated_at: string;
+    url_count: number;
+    workspace_id: string;
+}
+export interface ISitemapsSettings {
+    allow: string[];
+    disallow: string[];
+    sitemaps: string[];
+}
+export {};
+//# sourceMappingURL=site.d.ts.map

package/dist/interfaces/sites.d.ts

@@ -0,0 +1,32 @@
+import { IMediaObject } from '@levo-so/core';
+import { ITheme } from './theme';
+import { ISitemapsSettings } from './site';
+export type ISiteCompact = Pick<ISite, "object" | "id" | "name" | "slug" | "icon" | "logo" | "is_default" | "created_at" | "updated_at">;
+export interface ISite {
+    object: string;
+    id: string;
+    workspace_id: string;
+    name: string;
+    slug: string;
+    timezone: string;
+    description: string;
+    logo: IMediaObject | null;
+    icon: IMediaObject | null;
+    industry: string | null;
+    domain: string | null;
+    theme: ITheme;
+    settings: {
+        head_code?: string;
+        [key: string]: any;
+    };
+    page_count: number;
+    domain_count: number;
+    robots: ISitemapsSettings;
+    is_default: boolean;
+    is_proxied: boolean;
+    host_domain: string | null;
+    proxy_domain: string | null;
+    created_at: string;
+    updated_at: string;
+}
+//# sourceMappingURL=sites.d.ts.map

package/dist/interfaces/theme.d.ts

@@ -0,0 +1,144 @@
+import { IElementStyle } from './levoBlock';
+/**
+ * OKLCH color representation for theme storage
+ * Provides better color accuracy and perceptual uniformity than hex
+ */
+export interface OKLCHColor {
+    l: number;
+    c: number;
+    h: number;
+    alpha?: number;
+}
+/**
+ * Font configuration for the theme system
+ * Defines which fonts to use for different text elements
+ */
+export type IThemeFonts = {
+    heading: string;
+    body: string;
+};
+/**
+ * Configuration for a single variant group within a component theme
+ *
+ * Variant groups organize related style variations (e.g., "Button Sizes", "Heading Levels")
+ * Each group contains multiple variants that users can select from
+ *
+ * @example
+ * // Button sizes variant group
+ * {
+ *   id: "sizes",
+ *   name: "Button Sizes",
+ *   variants: {
+ *     small: { fontSize: "12px", padding: "8px 12px" },
+ *     medium: { fontSize: "14px", padding: "10px 16px" },
+ *     large: { fontSize: "16px", padding: "12px 20px" }
+ *   }
+ * }
+ */
+export interface IVariantGroupConfig {
+    id: string;
+    name: string;
+    variants: Record<string, IElementStyle>;
+}
+/**
+ * Complete theme configuration for a single component type
+ *
+ * Combines default styles that apply to all instances of the component
+ * with variant groups that provide specific style options
+ *
+ * @example
+ * // Heading component theme
+ * {
+ *   defaultStyles: { fontFamily: "Inter", color: "#000" },
+ *   variantGroups: {
+ *     headingLevel: {
+ *       id: "headingLevel",
+ *       name: "Heading Level",
+ *       variants: {
+ *         h1: { fontSize: "32px", fontWeight: "bold" },
+ *         h2: { fontSize: "28px", fontWeight: "bold" }
+ *       }
+ *     }
+ *   }
+ * }
+ */
+export interface IComponentTheme {
+    defaultStyles?: IElementStyle;
+    variantGroups?: Record<string, IVariantGroupConfig>;
+}
+/**
+ * Container for all component themes in the system
+ *
+ * Pre-defines common component types while allowing custom components
+ * through the index signature
+ */
+export interface IThemeComponents {
+    heading?: IComponentTheme;
+    button?: IComponentTheme;
+    typography?: IComponentTheme;
+    container?: IComponentTheme;
+    icon?: IComponentTheme;
+    section?: IComponentTheme;
+}
+/**
+ * Complete theme configuration for a workspace/page
+ *
+ * Combines legacy primitive theme properties (colors, fonts, sizes) with the new
+ * component-based theme system for maximum flexibility and backward compatibility
+ *
+ * CSS Generation:
+ * - Colors/fonts/sizes generate CSS custom properties (--color-brand, --font-heading, etc.)
+ * - Component default styles generate [data-levo_element_type] selectors
+ * - Component variants generate .levo-variant-{group}-{variant} class selectors
+ *
+ * @example
+ * // Complete theme structure
+ * {
+ *   colors: { brand: { main: "#007bff", foreground: "#fff" } },
+ *   fonts: { heading: "Inter", body: "Inter" },
+ *   sizes: { radius: "4px", spacing: "8px", fontSize: "14px" },
+ *   components: {
+ *     button: {
+ *       defaultStyles: { fontSize: "14px", borderRadius: "4px" },
+ *       variantGroups: {
+ *         variants: { variants: { primary: { backgroundColor: "#007bff" } } },
+ *         sizes: { variants: { large: { padding: "12px 20px" } } }
+ *       }
+ *     }
+ *   }
+ * }
+ */
+export interface ITheme {
+    colors: {
+        brand: {
+            main: OKLCHColor;
+            foreground: OKLCHColor;
+        };
+        brandSecondary: {
+            main: OKLCHColor;
+            foreground: OKLCHColor;
+        };
+        text1: OKLCHColor;
+        text2: OKLCHColor;
+        text3: OKLCHColor;
+        page: OKLCHColor;
+        border: OKLCHColor;
+        background1: OKLCHColor;
+        background2: OKLCHColor;
+        background3: OKLCHColor;
+        iconPrimary: OKLCHColor;
+        iconSecondary: OKLCHColor;
+    };
+    fonts: IThemeFonts;
+    sizes: {
+        radius: string;
+        spacing: string;
+        fontSize: string;
+    };
+    effects: {
+        shadow: string;
+    };
+    components: IThemeComponents;
+    [x: string]: unknown;
+}
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1,43 @@
+export declare const borderRadius: {
+    readonly none: {
+        readonly label: "None";
+        readonly value: "none";
+        readonly css: "0px";
+    };
+    readonly sm: {
+        readonly label: "SM";
+        readonly value: "sm";
+        readonly css: "calc(var(--base-radius, 4px) * 0.5)";
+    };
+    readonly base: {
+        readonly label: "Base";
+        readonly value: "base";
+        readonly css: "var(--base-radius, 4px)";
+    };
+    readonly md: {
+        readonly label: "MD";
+        readonly value: "md";
+        readonly css: "calc(var(--base-radius, 4px) * 1.5)";
+    };
+    readonly lg: {
+        readonly label: "LG";
+        readonly value: "lg";
+        readonly css: "calc(var(--base-radius, 4px) * 2)";
+    };
+    readonly xl: {
+        readonly label: "XL";
+        readonly value: "xl";
+        readonly css: "calc(var(--base-radius, 4px) * 3)";
+    };
+    readonly "2xl": {
+        readonly label: "2XL";
+        readonly value: "2xl";
+        readonly css: "calc(var(--base-radius, 4px) * 4)";
+    };
+    readonly "3xl": {
+        readonly label: "3XL";
+        readonly value: "3xl";
+        readonly css: "calc(var(--base-radius, 4px) * 6)";
+    };
+};
+//# sourceMappingURL=borderRadius.d.ts.map