@skylivellc/lienzo-editor 0.0.0-stage → 0.2.0

package/dist/types/LienzoEditor.vue.d.ts

@@ -0,0 +1,21 @@
+import { type MessageOverrides } from './i18n/index.ts';
+/**
+ * The Lienzo editor. Give it the protocol `endpoint` of a backend (see
+ * `@skylivellc/lienzo-core/protocol`); everything else is optional. Props are
+ * read once, when the editor mounts.
+ */
+type __VLS_Props = {
+    /** Base URL of the protocol, for example `/admin/site/lienzo`. */
+    endpoint: string;
+    /** Language of the editor itself. Defaults to English. */
+    locale?: string;
+    /** Extra or overriding strings by locale; partial packs fall back to English per key. */
+    messages?: MessageOverrides;
+    /** Extra request headers, such as a bearer token. Session cookies and Laravel's XSRF token work without any. */
+    headers?: Record<string, string>;
+    /** A fetch implementation to use instead of the global one. */
+    fetch?: typeof fetch;
+};
+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/canvas/Canvas.vue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Where a drop from the palette lands: the canvas under the pointer and the
+ * position inside it, in design units. Null outside every canvas.
+ */
+declare function dropPoint(clientX: number, clientY: number): {
+    canvas: string;
+    x: number;
+    y: number;
+} | null;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    dropPoint: typeof dropPoint;
+}, {}, {}, {}, 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/canvas/ContextMenu.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The menu a right click opens on the canvas. It carries the actions that
+ * apply to what is selected, so the right panel keeps only the settings of
+ * the element.
+ */
+type __VLS_Props = {
+    at: {
+        x: number;
+        y: number;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/canvas/Overlay.vue.d.ts

@@ -0,0 +1,38 @@
+import { type Guides, type Handle } from '../model/geometry.ts';
+import type { Layout, Rect } from './frame.ts';
+/**
+ * Editing adornments drawn over the canvas iframe in the same design pixels:
+ * selection boxes, handles, guides, the element toolbar. They are scaled
+ * back up (`--inv`) so they keep their screen size at any zoom.
+ */
+type __VLS_Props = {
+    layout: Layout;
+    scale: number;
+    hovered: string | null;
+    guides: {
+        canvas: string;
+        lines: Guides;
+    } | null;
+    /** Elements whose box a gesture is changing, drawn from the live box. */
+    live: ReadonlyMap<string, Rect>;
+    /** Canvases where elements cannot be dragged (stacked on phones). */
+    frozen: ReadonlySet<string>;
+    /** An angle being dragged, shown before the document has it. */
+    rotation: {
+        id: string;
+        value: number;
+    } | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    radius: (event: PointerEvent) => any;
+    rotate: (event: PointerEvent) => any;
+    resize: (event: PointerEvent, handle: Handle) => any;
+    generateMobile: (canvas: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRadius?: ((event: PointerEvent) => any) | undefined;
+    onRotate?: ((event: PointerEvent) => any) | undefined;
+    onResize?: ((event: PointerEvent, handle: Handle) => any) | undefined;
+    onGenerateMobile?: ((canvas: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/canvas/Preview.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/canvas/frame.d.ts

@@ -0,0 +1,52 @@
+import type { Box, Document as Draft } from '@skylivellc/lienzo-core';
+import { type Device } from '../model/document.ts';
+/** A rectangle in the iframe document, in CSS pixels of the design frame. */
+export type Rect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** Where a canvas sits on screen and how its design units map to pixels. */
+export type CanvasMetrics = {
+    /** The canvas's `.lz-frame`: the box element positions are relative to. */
+    frame: Rect;
+    /** Pixels per design pixel vertically (`--u`). */
+    unit: number;
+    /** The section or the modal dialog, for outlines. */
+    outer: Rect;
+};
+export type Layout = {
+    canvases: ReadonlyMap<string, CanvasMetrics>;
+    elements: ReadonlyMap<string, Rect>;
+};
+export type FrameView = {
+    /** The modal shown instead of the page, or null for the page. */
+    modal: string | null;
+    /** Visible panel per tab or step group. */
+    panels: Readonly<Record<string, number>>;
+    fontsHref: string;
+    emptyImage: string;
+    emptyVideo: string;
+};
+/**
+ * The canvas iframe: a blank same-origin document holding `lienzo.css`, the
+ * editor overrides and the page body core rendered. `update` patches only
+ * the top-level blocks whose markup changed, so untouched sections keep
+ * their DOM (no video reloads, no image flashes) while one is edited.
+ */
+export declare function mountFrame(iframe: HTMLIFrameElement): {
+    doc: Document;
+    update: (html: string, css: string, document: Draft, view: FrameView) => void;
+    measure: (document: Draft, device: Device) => Layout;
+    hit: (target: EventTarget | null) => {
+        canvas: string;
+        element: string | null;
+        node: HTMLElement;
+    } | null;
+    preview: (id: string, device: Device, box: Box) => void;
+    /** Sets one custom property on an element during a gesture (rotation, corners). */
+    previewVar: (id: string, name: string, value: number) => void | undefined;
+    contentHeight: () => number;
+};
+export type CanvasFrame = ReturnType<typeof mountFrame>;

package/dist/types/canvas/frameCss.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Editor-only rules layered over `lienzo.css` inside the canvas iframe. They
+ * change behavior, never looks: links and embeds go inert, sticky navbars
+ * and parallax images stay in place, and empty media show what to do.
+ */
+export declare const frameCss = "\nhtml,body{margin:0}\nbody{overflow:hidden}\n.lz-el{cursor:default;user-select:none;-webkit-user-select:none}\n.lz-el[contenteditable]{cursor:text;user-select:text;-webkit-user-select:text;outline:none}\n.lz-el iframe,.lz-el input,.lz-el select,.lz-el textarea,.lz-el summary,.lz-el a,.lz-el button{pointer-events:none}\n.lz-navbar[data-sticky]{position:absolute;translate:none;left:calc(var(--x) * 1%);top:calc(var(--y) * var(--u));width:calc(var(--w) * 1%)}\n@container lz (max-width:640px){\n.lz-frame:not([data-stack]) .lz-navbar[data-sticky]{left:calc(var(--mx) * 1%);top:calc(var(--my) * var(--u));width:calc(var(--mw) * 1%)}\n.lz-frame[data-stack] .lz-navbar[data-sticky]{position:static;width:auto}\n}\n.lz-parallax>.lz-bg{position:absolute}\n.lz-stack-nav button{cursor:pointer}\nimg.lz-el[src=\"\"]::before,.lz-video:empty::before{position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;border:1px dashed #94a3b8;border-radius:inherit;background:#f8fafc;color:#64748b;font:12px/1.3 system-ui,sans-serif}\nimg.lz-el[src=\"\"]::before{content:var(--lze-empty-image)}\n.lz-frame[data-stack] img.lz-el[src=\"\"]{position:relative;min-height:120px}\n.lz-video:empty::before{content:var(--lze-empty-video)}\n.lze-app-placeholder{display:grid;place-items:center;height:100%;padding:8px;text-align:center;border:1px dashed #94a3b8;border-radius:inherit;background:#f8fafc;color:#64748b;font:12px/1.3 system-ui,sans-serif}\n.lze-app-placeholder[data-status=loading]{animation:lze-pulse 1.2s ease-in-out infinite}\n@keyframes lze-pulse{50%{opacity:.55}}\nbody[data-lze-modal] .lz-section,body[data-lze-modal] .lz-stack,body[data-lze-modal] .lz-notice{display:none}\nbody[data-lze-modal] dialog.lz-modal[data-lze-open]{display:block;position:static;margin:16px auto;max-height:none;overflow:visible;box-shadow:0 12px 40px rgba(15,23,42,.18)}\nbody[data-lze-modal] dialog.lz-modal[data-lze-open][data-size=full]{margin:0}\n";

package/dist/types/canvas/render.d.ts

@@ -0,0 +1,37 @@
+import { type AppElement, type Catalog, type Document, type Issue, type Parsed, type RenderedPage, type SiteSettings } from '@skylivellc/lienzo-core';
+import type { Asset } from '@skylivellc/lienzo-core/protocol';
+import type { Editor } from '../state/editor.ts';
+import type { Preview } from '../state/previews.ts';
+export type RenderContext = {
+    catalog: Catalog;
+    site: Parsed<SiteSettings>;
+    assets: readonly Asset[];
+    slug: string;
+    publicUrl: string | null;
+    preview(element: AppElement): Preview;
+    /** Placeholder texts for app elements whose preview is not there yet. */
+    labels: {
+        loading: string;
+        failed: string;
+    };
+};
+/** What rendering needs from the editor: the canvas and the preview read the same. */
+export declare function renderContext(editor: Editor): RenderContext;
+export type Rendered = {
+    ok: true;
+    page: RenderedPage;
+} | {
+    ok: false;
+    issues: Issue[];
+};
+/**
+ * The page through core, exactly as the public page renders it: `edit` for
+ * the canvas (no runtime, no entrance animations, placeholders for missing
+ * plugins), `public` for the preview. App elements show the HTML the backend
+ * rendered for the same props, or a placeholder while it loads. A draft that
+ * does not parse reports its issues instead of rendering.
+ */
+export declare function renderDraft(draft: Document, context: RenderContext, mode: 'edit' | 'public'): Promise<Rendered>;
+export declare const escapeHtml: (value: string) => string;
+/** Core's rule for ids in HTML and CSS, so the canvas finds what it rendered. */
+export declare const domId: (id: string) => string;

package/dist/types/client.d.ts

@@ -0,0 +1,48 @@
+import type { Issue } from '@skylivellc/lienzo-core';
+import type { Protocol, Route } from '@skylivellc/lienzo-core/protocol';
+/** Why a request did not succeed. Every caller handles each kind, so none is ever silent. */
+export type Failure = {
+    kind: 'offline';
+} | {
+    kind: 'conflict';
+    message: string;
+    revision: number;
+} | {
+    kind: 'invalid';
+    message: string;
+    issues: Issue[];
+} | {
+    kind: 'http';
+    status: number;
+    message: string;
+};
+export type Result<T> = {
+    ok: true;
+    value: T;
+} | {
+    ok: false;
+    failure: Failure;
+};
+/** `'PUT /pages/:id/versions/:version'` → `'id' | 'version'`. */
+type ParamNames<P extends string> = P extends `${string}:${infer Name}/${infer Rest}` ? Name | ParamNames<`/${Rest}`> : P extends `${string}:${infer Name}` ? Name : never;
+export type Params<R extends Route> = {
+    [K in ParamNames<R>]: string | number;
+};
+export type Body<R extends Route> = 'req' extends keyof Protocol[R] ? Protocol[R]['req' & keyof Protocol[R]] : undefined;
+export type Response<R extends Route> = Protocol[R]['res'];
+type BodyArgs<R extends Route> = undefined extends Body<R> ? [body?: Body<R>] : [body: Body<R>];
+/** A route call: params only when the path has some, a body only when the route takes one. */
+export type Client = <R extends Route>(route: R, ...args: [ParamNames<R>] extends [never] ? BodyArgs<R> : [params: Params<R>, ...BodyArgs<R>]) => Promise<Result<Response<R>>>;
+export type ClientOptions = {
+    endpoint: string;
+    headers?: Record<string, string>;
+    fetch?: typeof fetch;
+};
+/**
+ * Typed fetch over the protocol. Never retries writes and never throws:
+ * a 409 becomes `conflict`, a 422 `invalid`, a network error `offline`.
+ * Laravel's `XSRF-TOKEN` cookie is echoed as `X-XSRF-TOKEN`, like axios does,
+ * so session-authenticated backends need no extra setup.
+ */
+export declare function createClient({ endpoint, headers, fetch: fetcher }: ClientOptions): Client;
+export {};

package/dist/types/dialogs/ConflictDialog.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/dialogs/MediaLibrary.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/dialogs/NewPageDialog.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/dialogs/SiteDialog.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/dialogs/SubmissionsDialog.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/dialogs/ThemeDialog.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/dialogs/VersionsDialog.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/element.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `<lienzo-editor endpoint="/admin/lienzo" locale="es">`. Attributes:
+ * `endpoint`, `locale`. Properties: `messages`, `headers`, `fetch`. The
+ * editor renders in a shadow root, so host page CSS does not reach it.
+ * Set the properties before the element is attached; like the component's
+ * props, they are read once.
+ */
+export declare const LienzoEditorElement: import("vue").VueElementConstructor<{
+    endpoint: string;
+    locale?: string;
+    messages?: import("./index.ts").MessageOverrides;
+    headers?: Record<string, string>;
+    fetch?: typeof fetch;
+}>;
+/** Registers the element under `tag`, once. The side-effect import registers `lienzo-editor`. */
+export declare function defineLienzoEditor(tag?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'lienzo-editor': InstanceType<typeof LienzoEditorElement>;
+    }
+}