@skylivellc/lienzo-editor 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,26 @@
+import type { AppElement } from '@skylivellc/lienzo-core';
+import { type ShallowRef } from 'vue';
+import type { Client } from '../client.ts';
+export type Preview = {
+    status: 'loading';
+} | {
+    status: 'ready';
+    html: string;
+} | {
+    status: 'failed';
+};
+export type Previews = {
+    /** The preview for this element's type and props, fetching it on a miss. */
+    get(element: AppElement): Preview;
+    /** Bumps whenever a preview arrives, so the canvas knows to render again. */
+    readonly version: ShallowRef<number>;
+};
+/**
+ * HTML of app elements, rendered by the backend. Cached by type and props:
+ * moving, resizing or restyling an element never refetches, since box and
+ * style live on the wrapper core renders around it. Misses are batched into
+ * one `POST /preview` per `wait` ms.
+ */
+export declare function createPreviews(client: Client, wait?: number): Previews;
+/** Type plus props with sorted keys, so equal props share one preview whatever their key order. */
+export declare function previewKey(element: Pick<AppElement, 'type' | 'props'>): string;

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

@@ -0,0 +1,7 @@
+import type { Editor } from './editor.ts';
+/**
+ * Editor shortcuts: Escape, Delete, arrows, and Ctrl/Cmd with C, V, D, Z,
+ * Shift+Z and S. Keys typed into a field are left alone. The canvas iframe and the host
+ * page both send their key events here.
+ */
+export declare function handleShortcut(editor: Editor, event: KeyboardEvent): void;

package/dist/types/styles/index.d.ts

@@ -0,0 +1,8 @@
+/** All chrome CSS as one string, adopted by the document or shadow root the editor renders in. */
+export declare const editorCss: string;
+/**
+ * Adds the editor's stylesheet to the root `node` renders in, once. A
+ * constructed stylesheet works the same in a document and in a shadow root
+ * (the custom element), and needs no `<style>` tag a strict CSP would block.
+ */
+export declare function adoptEditorStyles(node: Node): void;

package/dist/types/ui/Button.vue.d.ts

@@ -0,0 +1,25 @@
+/** Text button of the editor chrome. `primary` is the one main action of a place. */
+type __VLS_Props = {
+    variant?: 'primary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    title?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md";
+    title: string;
+    variant: "primary" | "danger" | "outline" | "ghost";
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/CatalogIcon.vue.d.ts

@@ -0,0 +1,12 @@
+/** An icon from Lienzo's icon catalog (the same strokes the page renders), for pickers and app elements. */
+type __VLS_Props = {
+    name: string;
+    size?: number;
+    stroke?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    stroke: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/ColorPicker.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_ModelProps = {
+    /**
+     * Picking a theme color keeps it linked: when the palette changes, the page
+     * follows. A custom hex is the way out, not the way in.
+     */
+    modelValue: string | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    commit: () => any;
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCommit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/Dialog.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    size?: 'md' | 'lg' | 'xl';
+};
+type __VLS_ModelProps = {
+    /**
+     * A modal dialog on the native `<dialog>`: focus trap, Escape and the top
+     * layer for free, and it stays inside the editor's shadow root when there is one.
+     */
+    'open': boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: "md" | "lg" | "xl";
+    description: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/Field.vue.d.ts

@@ -0,0 +1,24 @@
+/** A labelled control with an optional hint and error. Put the control in the default slot with `:id="id"`. */
+type __VLS_Props = {
+    label: string;
+    id?: string;
+    hint?: string;
+    error?: string | null;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    aside?: (props: typeof __VLS_1) => any;
+} & {
+    aside?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/IconButton.vue.d.ts

@@ -0,0 +1,24 @@
+/** Square icon button with a tooltip; `active` shows a pressed state, like design tools. */
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    tone?: 'default' | 'danger';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    tone: "default" | "danger";
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/ImageField.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    label: string;
+    url?: boolean;
+    choose?: string;
+    thumb?: 'wide' | 'icon';
+};
+type __VLS_ModelProps = {
+    /**
+     * An image reference (`media:<id>` from the library, or an https URL) with a
+     * thumbnail, a library picker and a remove button. `url` adds a field to paste an address.
+     */
+    modelValue: string | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    commit: () => any;
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCommit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    url: boolean;
+    thumb: "icon" | "wide";
+    choose: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/NumberInput.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    suffix?: string;
+    disabled?: boolean;
+};
+type __VLS_ModelProps = {
+    /** Compact number field: short label on the left, unit on the right. Empty means "not set". */
+    modelValue: number | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    commit: () => any;
+    "update:modelValue": (value: number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCommit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/PanelSection.vue.d.ts

@@ -0,0 +1,20 @@
+/** Collapsible block of the settings panel; the title stays visible when closed. */
+type __VLS_Props = {
+    title: string;
+    open?: boolean;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    open: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/RangeInput.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    label: string;
+    min: number;
+    max: number;
+    step?: number;
+    fallback?: number;
+    format?: (value: number) => string;
+};
+type __VLS_ModelProps = {
+    /** Slider with its label and current value; moves live, commits when released. */
+    modelValue: number | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    commit: () => any;
+    "update:modelValue": (value: number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCommit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null | undefined) => any) | undefined;
+}>, {
+    step: number;
+    format: (value: number) => string;
+    fallback: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/SelectInput.vue.d.ts

@@ -0,0 +1,33 @@
+declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        options: readonly {
+            value: T;
+            label: string;
+        }[];
+        id?: string;
+        label?: string;
+        placeholder?: string;
+        compact?: boolean;
+    } & {
+        /** Native select over typed options; the model keeps the option's own type. */
+        modelValue: T | null | undefined;
+    }) & {
+        onCommit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "commit") => void) & ((event: "update:modelValue", value: T | null | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/ui/TextInput.vue.d.ts

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    id?: string;
+    placeholder?: string;
+    maxlength?: number;
+    rows?: number;
+    label?: string;
+    type?: string;
+};
+type __VLS_ModelProps = {
+    /**
+     * Single or multi-line text. `commit` fires on change (blur or Enter), which
+     * is when callers record an undo step; the model updates on every keystroke.
+     */
+    modelValue: string | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    commit: () => any;
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCommit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    id: string;
+    type: string;
+    label: string;
+    placeholder: string;
+    maxlength: number;
+    rows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/Toasts.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/ui/Toggle.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_ModelProps = {
+    /** Checkbox with its label. Toggling is a discrete edit, so it commits right away. */
+    modelValue: boolean | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    commit: () => any;
+    "update:modelValue": (value: boolean | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCommit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@skylivellc/lienzo-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "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",
+    "page-builder",
+    "visual-editor",
+    "vue",
+    "custom-element",
+    "lienzo"
+  ],
+  "homepage": "https://github.com/SkyliveLLC/lienzo/tree/main/packages/editor#readme",
+  "bugs": "https://github.com/SkyliveLLC/lienzo/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SkyliveLLC/lienzo.git",
+    "directory": "packages/editor"
+  },
+  "license": "MIT",
+  "author": "Skylive LLC",
+  "type": "module",
+  "sideEffects": [
+    "./dist/element.js",
+    "./dist/standalone/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./element": {
+      "types": "./dist/types/element.d.ts",
+      "import": "./dist/element.js"
+    },
+    "./standalone": "./dist/standalone/lienzo-editor.js"
+  },
+  "files": [
+    "dist",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.52.0",
+    "@skylivellc/lienzo-core": "0.1.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.63.0",
+    "@types/node": "^24.19.1",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.12"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vite build --mode standalone && vue-tsc -p tsconfig.build.json",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "e2e": "playwright test"
+  }
 }