@skylivellc/lienzo-editor 0.10.1 → 0.11.0

package/dist/types/i18n/en.d.ts

@@ -90,9 +90,14 @@ export declare const en: {
     'type.shape': string;
     'type.icon': string;
     'type.gallery': string;
+    'type.slider': string;
     'el.galleryItem': string;
     'el.gallery': string;
     'el.galleryAdd': string;
+    'el.sliderArrows': string;
+    'el.sliderDots': string;
+    'el.sliderAutoplay': string;
+    'el.sliderInterval': string;
     'el.galleryHint': string;
     'el.galleryLayout': string;
     'el.gallery.grid': string;
@@ -521,6 +526,15 @@ export declare const en: {
     'style.scroll.zoom': string;
     'el.navbarTemplate.floating': string;
     'el.navbarTemplate.boxed': string;
+    'el.navbarTemplate.ribbon': string;
+    'el.navbarTemplate.outline': string;
+    'el.navbarTemplate.minimal': string;
+    'el.navbarTemplate.stack': string;
+    'el.navbarTemplate.rail': string;
+    'el.navbarPosition': string;
+    'el.navbarPosition.top': string;
+    'el.navbarPosition.bottom': string;
+    'el.layout.right': string;
     'el.navbarTemplate.tracked': string;
     'style.hover': string;
     'style.hover.none': string;
@@ -563,6 +577,22 @@ export declare const en: {
     'default.link.about': string;
     'default.link.contact': string;
     'default.link.start': string;
+    'template.group.open': string;
+    'template.group.tell': string;
+    'template.group.convince': string;
+    'template.group.close': string;
+    'template.heroCentered': string;
+    'template.heroSlider': string;
+    'template.steps': string;
+    'template.gallery': string;
+    'template.faq': string;
+    'template.logos': string;
+    'template.testimonial': string;
+    'template.stats': string;
+    'template.team': string;
+    'template.pricing': string;
+    'template.newsletter': string;
+    'template.footerBig': string;
     'template.hero': string;
     'template.features': string;
     'template.about': string;

package/dist/types/model/document.d.ts

@@ -5,7 +5,7 @@ export type Device = 'desktop' | 'mobile';
 export declare const MOBILE_WIDTH = 390;
 /** A section or a modal: both are free-layout canvases of elements. */
 export type Canvas = Section | Modal;
-export declare const CORE_TYPES: readonly ["heading", "text", "image", "button", "divider", "video", "shape", "icon", "navbar", "gallery", "input", "textarea", "select", "checkbox"];
+export declare const CORE_TYPES: readonly ["heading", "text", "image", "button", "divider", "video", "shape", "icon", "navbar", "gallery", "slider", "input", "textarea", "select", "checkbox"];
 export declare const isCoreType: (type: string) => type is CoreElementType;
 export declare const isModal: (canvas: Canvas) => canvas is Modal;
 export declare function canvasesOf(document: Document): Canvas[];

package/dist/types/model/elements.d.ts

@@ -237,6 +237,29 @@ export declare const coreSpecs: {
             };
         };
     };
+    slider: {
+        label: "type.slider";
+        group: "content";
+        styles: readonly StyleGroup[];
+        inline: null;
+        create: () => {
+            box: {
+                x: number;
+                w: number;
+                h: number;
+            };
+            props: {
+                images: never[];
+                arrows: true;
+                dots: true;
+                autoplay: false;
+                interval: number;
+            };
+            style: {
+                radius: number;
+            };
+        };
+    };
     input: {
         label: "type.input";
         group: "form";

package/dist/types/model/templates.d.ts

@@ -7,11 +7,89 @@ declare const sections: {
     cta: () => Section;
     contact: () => Section;
     footer: () => Section;
+    heroCentered: () => Section;
+    heroSlider: () => Section;
+    logos: () => Section;
+    testimonial: () => Section;
+    stats: () => {
+        flow: "row";
+        flow_gap: number;
+        flow_align: "between";
+        id: string;
+        group?: {
+            id?: string | null | undefined;
+            type?: "tabs" | "steps" | null | undefined;
+            label?: string | null | undefined;
+        } | null | undefined;
+        height: {
+            desktop: number;
+            mobile: number;
+        };
+        background: {
+            type: "color" | "gradient" | "image" | "video";
+            color?: string | null | undefined;
+            gradient?: {
+                type?: "linear" | "radial" | null | undefined;
+                from?: string | null | undefined;
+                to?: string | null | undefined;
+                angle?: number | null | undefined;
+            } | null | undefined;
+            image?: string | null | undefined;
+            video?: string | null | undefined;
+            overlay?: number | null | undefined;
+            parallax?: boolean | null | undefined;
+        };
+        wide?: boolean | null | undefined;
+        elements: import("@skylivellc/lienzo-core").Element[];
+    };
+    gallery: () => {
+        flow: "column";
+        flow_gap: number;
+        id: string;
+        group?: {
+            id?: string | null | undefined;
+            type?: "tabs" | "steps" | null | undefined;
+            label?: string | null | undefined;
+        } | null | undefined;
+        height: {
+            desktop: number;
+            mobile: number;
+        };
+        background: {
+            type: "color" | "gradient" | "image" | "video";
+            color?: string | null | undefined;
+            gradient?: {
+                type?: "linear" | "radial" | null | undefined;
+                from?: string | null | undefined;
+                to?: string | null | undefined;
+                angle?: number | null | undefined;
+            } | null | undefined;
+            image?: string | null | undefined;
+            video?: string | null | undefined;
+            overlay?: number | null | undefined;
+            parallax?: boolean | null | undefined;
+        };
+        wide?: boolean | null | undefined;
+        flow_align?: "center" | "start" | "end" | "between" | null | undefined;
+        elements: import("@skylivellc/lienzo-core").Element[];
+    };
+    steps: () => Section;
+    pricing: () => Section;
+    team: () => Section;
+    faq: () => Section;
+    newsletter: () => Section;
+    footerBig: () => Section;
 };
 export type SectionTemplateKey = keyof typeof sections;
+export type TemplateGroup = 'open' | 'tell' | 'convince' | 'close';
 export declare const SECTION_TEMPLATES: readonly {
     key: SectionTemplateKey;
     name: MessageKey;
+    group: TemplateGroup;
+}[];
+export declare const TEMPLATE_GROUPS: readonly {
+    key: TemplateGroup;
+    name: MessageKey;
 }[];
 declare const pages: {
     readonly full: readonly ["hero", "features", "about", "cta", "footer"];

package/dist/types/panels/content/GalleryContent.vue.d.ts

@@ -1,5 +1,5 @@
 import type { CoreElement } from '@skylivellc/lienzo-core';
-/** A gallery is a list of pictures: one field per slot, in the order shown. */
+/** A gallery is a list of pictures, laid out as a grid or as a strip. */
 type __VLS_Props = {
     element: CoreElement;
 };

package/dist/types/panels/content/PictureList.vue.d.ts

@@ -0,0 +1,8 @@
+import type { CoreElement } from '@skylivellc/lienzo-core';
+/** The pictures of a gallery or a slider: one field per slot, in the order shown. */
+type __VLS_Props = {
+    element: CoreElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/panels/content/SliderContent.vue.d.ts

@@ -0,0 +1,8 @@
+import type { CoreElement } from '@skylivellc/lienzo-core';
+/** A slider shows one picture at a time, and says how a reader moves it. */
+type __VLS_Props = {
+    element: CoreElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/state/editor.d.ts

@@ -479,17 +479,22 @@ export declare function createEditor({ client, i18n }: EditorDeps): {
                         scroll_style?: "shadow" | "solid" | "same" | "compact" | null | undefined;
                         stroke?: number | null | undefined;
                         accent?: string | null | undefined;
-                        shape?: "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "dots" | "grid" | null | undefined;
+                        shape?: "dots" | "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "grid" | null | undefined;
                         placeholder?: string | null | undefined;
                         required?: boolean | null | undefined;
                         input_type?: "number" | "text" | "email" | "date" | "tel" | null | undefined;
                         options?: string[] | null | undefined;
                         images?: string[] | null | undefined;
                         columns?: number | null | undefined;
+                        autoplay?: boolean | null | undefined;
+                        interval?: number | null | undefined;
+                        arrows?: boolean | null | undefined;
+                        dots?: boolean | null | undefined;
                         multiple?: boolean | null | undefined;
                         brand?: string | null | undefined;
-                        layout?: "center" | "left" | "grid" | "split" | "strip" | null | undefined;
-                        template?: "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | null | undefined;
+                        layout?: "center" | "left" | "right" | "grid" | "split" | "strip" | null | undefined;
+                        template?: "outline" | "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | "ribbon" | "minimal" | "stack" | "rail" | null | undefined;
+                        position?: "top" | "bottom" | null | undefined;
                         links?: {
                             label: string;
                             action: {
@@ -754,17 +759,22 @@ export declare function createEditor({ client, i18n }: EditorDeps): {
                         scroll_style?: "shadow" | "solid" | "same" | "compact" | null | undefined;
                         stroke?: number | null | undefined;
                         accent?: string | null | undefined;
-                        shape?: "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "dots" | "grid" | null | undefined;
+                        shape?: "dots" | "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "grid" | null | undefined;
                         placeholder?: string | null | undefined;
                         required?: boolean | null | undefined;
                         input_type?: "number" | "text" | "email" | "date" | "tel" | null | undefined;
                         options?: string[] | null | undefined;
                         images?: string[] | null | undefined;
                         columns?: number | null | undefined;
+                        autoplay?: boolean | null | undefined;
+                        interval?: number | null | undefined;
+                        arrows?: boolean | null | undefined;
+                        dots?: boolean | null | undefined;
                         multiple?: boolean | null | undefined;
                         brand?: string | null | undefined;
-                        layout?: "center" | "left" | "grid" | "split" | "strip" | null | undefined;
-                        template?: "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | null | undefined;
+                        layout?: "center" | "left" | "right" | "grid" | "split" | "strip" | null | undefined;
+                        template?: "outline" | "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | "ribbon" | "minimal" | "stack" | "rail" | null | undefined;
+                        position?: "top" | "bottom" | null | undefined;
                         links?: {
                             label: string;
                             action: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skylivellc/lienzo-editor",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Visual editor for Lienzo landing pages. A Vue 3 component and a <lienzo-editor> custom element that talk to any backend over the Lienzo protocol.",
   "keywords": [
     "landing-page",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@lucide/vue": "^1.52.0",
-    "@skylivellc/lienzo-core": "0.10.1"
+    "@skylivellc/lienzo-core": "0.11.0"
   },
   "devDependencies": {
     "@playwright/test": "1.63.0",