@skylivellc/lienzo-editor 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,512 @@
+/**
+ * Every string the editor shows, in English (the fallback). Other packs are
+ * typed `Messages`, so a missing or misspelled key does not compile.
+ * `{name}` placeholders are filled by `t(key, { name })`.
+ */
+export declare const en: {
+    'load.loading': string;
+    'load.failed': string;
+    'load.retry': string;
+    'load.invalidDraft': string;
+    'load.offline': string;
+    'toolbar.pageSelect': string;
+    'toolbar.newPage': string;
+    'toolbar.newPageHint': string;
+    'toolbar.desktop': string;
+    'toolbar.mobile': string;
+    'toolbar.device': string;
+    'toolbar.undo': string;
+    'toolbar.redo': string;
+    'toolbar.preview': string;
+    'toolbar.previewHint': string;
+    'toolbar.edit': string;
+    'toolbar.editHint': string;
+    'toolbar.versions': string;
+    'toolbar.versionsHint': string;
+    'toolbar.theme': string;
+    'toolbar.site': string;
+    'toolbar.siteHint': string;
+    'toolbar.viewSite': string;
+    'toolbar.publish': string;
+    'toolbar.publishing': string;
+    'status.published': string;
+    'status.unpublished': string;
+    'save.idle': string;
+    'save.pending': string;
+    'save.saving': string;
+    'save.saved': string;
+    'save.offline': string;
+    'save.failed': string;
+    'save.retry': string;
+    'save.invalid': string;
+    'save.conflict': string;
+    'conflict.title': string;
+    'conflict.body': string;
+    'conflict.reload': string;
+    'common.duplicate': string;
+    'common.delete': string;
+    'common.cancel': string;
+    'common.close': string;
+    'common.remove': string;
+    'common.choose': string;
+    'common.add': string;
+    'common.new': string;
+    'tabs.elements': string;
+    'tabs.layers': string;
+    'tabs.modals': string;
+    'tabs.media': string;
+    'elements.addHint': string;
+    'elements.app': string;
+    'elements.appHint': string;
+    'elements.sections': string;
+    'elements.form': string;
+    'elements.formHint': string;
+    'layers.count': string;
+    'layers.modal': string;
+    'layers.section': string;
+    'layers.expand': string;
+    'layers.collapse': string;
+    'layers.up': string;
+    'layers.down': string;
+    'layers.lock': string;
+    'layers.unlock': string;
+    'layers.empty': string;
+    'modals.hint': string;
+    'modals.defaultTitle': string;
+    'modals.titleLabel': string;
+    'modals.delete': string;
+    'modals.elements': string;
+    'modals.edit': string;
+    'modals.empty': string;
+    'media.hint': string;
+    'media.upload': string;
+    'media.empty': string;
+    'type.heading': string;
+    'type.text': string;
+    'type.image': string;
+    'type.button': string;
+    'type.divider': string;
+    'type.video': string;
+    'type.shape': string;
+    'type.icon': string;
+    'type.navbar': string;
+    'type.input': string;
+    'type.textarea': string;
+    'type.select': string;
+    'type.checkbox': string;
+    'type.unknown': string;
+    'canvas.title': string;
+    'canvas.editingModal': string;
+    'canvas.backToPage': string;
+    'canvas.emptyPage': string;
+    'canvas.emptyModal': string;
+    'canvas.toolbar': string;
+    'canvas.front': string;
+    'canvas.back': string;
+    'canvas.radius': string;
+    'canvas.rotate': string;
+    'canvas.resize': string;
+    'canvas.corners': string;
+    'canvas.sticky': string;
+    'canvas.emptyImage': string;
+    'canvas.emptyVideo': string;
+    'canvas.stacked': string;
+    'canvas.loadingPreview': string;
+    'canvas.previewFailed': string;
+    'canvas.invalid': string;
+    'canvas.locked': string;
+    'panel.design': string;
+    'panel.page': string;
+    'panel.nothing': string;
+    'multi.count': string;
+    'multi.align': string;
+    'multi.distribute': string;
+    'multi.distributeX': string;
+    'multi.distributeY': string;
+    'multi.distributeHint': string;
+    'multi.group': string;
+    'multi.ungroup': string;
+    'multi.lock': string;
+    'multi.hint': string;
+    'align.left': string;
+    'align.hcenter': string;
+    'align.right': string;
+    'align.top': string;
+    'align.vmiddle': string;
+    'align.bottom': string;
+    'modal.heading': string;
+    'modal.title': string;
+    'modal.showTitle': string;
+    'modal.showTitleHint': string;
+    'modal.size': string;
+    'modal.size.sm': string;
+    'modal.size.md': string;
+    'modal.size.lg': string;
+    'modal.size.xl': string;
+    'modal.size.full': string;
+    'modal.width': string;
+    'modal.fullHint': string;
+    'modal.background': string;
+    'section.heading': string;
+    'section.delete': string;
+    'section.shownAs': string;
+    'section.alone': string;
+    'section.tab': string;
+    'section.step': string;
+    'section.groupLabel': string;
+    'section.groupHint': string;
+    'section.stepLabel': string;
+    'section.anchor': string;
+    'section.anchorHint': string;
+    'section.fitHeight': string;
+    'section.generateMobile': string;
+    'section.heightDesktop': string;
+    'section.heightMobile': string;
+    'section.background': string;
+    'section.color': string;
+    'section.image': string;
+    'section.chooseImage': string;
+    'section.parallax': string;
+    'section.overlay': string;
+    'fill.color': string;
+    'fill.gradient': string;
+    'fill.image': string;
+    'gradient.from': string;
+    'gradient.to': string;
+    'gradient.shape': string;
+    'gradient.linear': string;
+    'gradient.radial': string;
+    'gradient.angle': string;
+    'gradient.preset.primary': string;
+    'gradient.preset.soft': string;
+    'gradient.preset.halo': string;
+    'gradient.preset.night': string;
+    'page.title': string;
+    'page.address': string;
+    'page.home': string;
+    'page.saveAddress': string;
+    'page.addressSaved': string;
+    'page.delete': string;
+    'page.deleteConfirm': string;
+    'page.deleted': string;
+    'page.templates': string;
+    'page.seoTitle': string;
+    'page.seoTitleHint': string;
+    'page.description': string;
+    'page.shortcuts': string;
+    'page.shortcutUndo': string;
+    'page.shortcutSave': string;
+    'page.shortcutCopy': string;
+    'page.shortcutNudge': string;
+    'newPage.title': string;
+    'newPage.description': string;
+    'newPage.titleLabel': string;
+    'newPage.slug': string;
+    'newPage.slugPlaceholder': string;
+    'newPage.at': string;
+    'newPage.create': string;
+    'toolbar.submissions': string;
+    'toolbar.submissionsHint': string;
+    'submissions.title': string;
+    'submissions.description': string;
+    'submissions.empty': string;
+    'submissions.more': string;
+    'submissions.from': string;
+    'submissions.failed': string;
+    'submissions.checked': string;
+    'submissions.unchecked': string;
+    'versions.title': string;
+    'versions.description': string;
+    'versions.by': string;
+    'versions.restore': string;
+    'versions.restored': string;
+    'versions.empty': string;
+    'publish.done': string;
+    'publish.failed': string;
+    'theme.title': string;
+    'theme.description': string;
+    'theme.palettes': string;
+    'theme.colors': string;
+    'theme.link': string;
+    'theme.linkHint': string;
+    'theme.headingFont': string;
+    'theme.bodyFont': string;
+    'theme.radius': string;
+    'theme.maxWidth': string;
+    'theme.width.1080': string;
+    'theme.width.1200': string;
+    'theme.width.1320': string;
+    'theme.width.1440': string;
+    'theme.previewLabel': string;
+    'theme.previewHeading': string;
+    'theme.previewText': string;
+    'theme.previewButton': string;
+    'theme.save': string;
+    'theme.saved': string;
+    'palette.blue': string;
+    'palette.mint': string;
+    'palette.sand': string;
+    'palette.indigo': string;
+    'palette.graphite': string;
+    'token.primary': string;
+    'token.secondary': string;
+    'token.background': string;
+    'token.surface': string;
+    'token.text': string;
+    'token.muted': string;
+    'font.Inter': string;
+    'font.Poppins': string;
+    'font.Montserrat': string;
+    'font.DM Sans': string;
+    'font.Work Sans': string;
+    'font.Nunito': string;
+    'font.Lora': string;
+    'font.Playfair Display': string;
+    'font.Merriweather': string;
+    'font.Source Sans 3': string;
+    'site.title': string;
+    'site.description': string;
+    'site.seoTitle': string;
+    'site.seoDescription': string;
+    'site.shareImage': string;
+    'site.shareImageHint': string;
+    'site.favicon': string;
+    'site.locale': string;
+    'site.details': string;
+    'site.save': string;
+    'site.saved': string;
+    'library.title': string;
+    'library.description': string;
+    'library.upload': string;
+    'library.uploading': string;
+    'library.formats': string;
+    'library.use': string;
+    'library.delete': string;
+    'library.uploadFailed': string;
+    'library.deleteFailed': string;
+    'library.quota': string;
+    'el.text': string;
+    'el.accent': string;
+    'el.accentPlaceholder': string;
+    'el.accentColor': string;
+    'el.level': string;
+    'el.level.1': string;
+    'el.level.2': string;
+    'el.level.3': string;
+    'el.level.4': string;
+    'el.image': string;
+    'el.chooseFromLibrary': string;
+    'el.imageUrl': string;
+    'el.alt': string;
+    'el.altPlaceholder': string;
+    'el.fit': string;
+    'el.fit.cover': string;
+    'el.fit.contain': string;
+    'el.crop': string;
+    'el.shape': string;
+    'el.opacity': string;
+    'shape.rectangle': string;
+    'shape.ellipse': string;
+    'shape.triangle': string;
+    'shape.blob': string;
+    'shape.arch': string;
+    'shape.diagonal': string;
+    'shape.dots': string;
+    'shape.grid': string;
+    'el.videoUrl': string;
+    'el.videoHint': string;
+    'el.buttonLabel': string;
+    'el.action': string;
+    'action.none': string;
+    'action.whatsapp': string;
+    'action.phone': string;
+    'action.email': string;
+    'action.url': string;
+    'action.anchor': string;
+    'action.modal': string;
+    'action.submit': string;
+    'action.page': string;
+    'action.top': string;
+    'action.back': string;
+    'action.step_next': string;
+    'action.step_prev': string;
+    'action.chooseModal': string;
+    'action.choosePage': string;
+    'action.placeholder.whatsapp': string;
+    'action.placeholder.phone': string;
+    'action.placeholder.email': string;
+    'action.placeholder.anchor': string;
+    'action.placeholder.url': string;
+    'action.submitHint': string;
+    'el.presets': string;
+    'navbar.preset.split': string;
+    'navbar.preset.center': string;
+    'navbar.preset.dark': string;
+    'el.brand': string;
+    'el.brandPlaceholder': string;
+    'el.sticky': string;
+    'el.scrollStyle': string;
+    'el.scroll.same': string;
+    'el.scroll.shadow': string;
+    'el.scroll.solid': string;
+    'el.scroll.compact': string;
+    'el.notSticky': string;
+    'el.layout': string;
+    'el.layout.split': string;
+    'el.layout.left': string;
+    'el.layout.center': string;
+    'el.links': string;
+    'el.linkLabel': string;
+    'el.removeLink': string;
+    'el.linksHint': string;
+    'el.icon': string;
+    'el.iconSearch': string;
+    'el.noResults': string;
+    'el.stroke': string;
+    'el.fieldLabel': string;
+    'el.inputType': string;
+    'el.inputType.text': string;
+    'el.inputType.email': string;
+    'el.inputType.tel': string;
+    'el.inputType.number': string;
+    'el.inputType.date': string;
+    'el.options': string;
+    'el.optionsHint': string;
+    'el.placeholder': string;
+    'el.required': string;
+    'el.unknown': string;
+    'style.fill': string;
+    'style.color': string;
+    'style.background': string;
+    'style.backgroundType': string;
+    'style.backgroundColor': string;
+    'style.transparency': string;
+    'style.glass': string;
+    'style.glassHint': string;
+    'style.text': string;
+    'style.fontHeading': string;
+    'style.fontBody': string;
+    'style.size': string;
+    'style.weight': string;
+    'style.weight.300': string;
+    'style.weight.400': string;
+    'style.weight.500': string;
+    'style.weight.600': string;
+    'style.weight.700': string;
+    'style.weight.800': string;
+    'style.align.left': string;
+    'style.align.center': string;
+    'style.align.right': string;
+    'style.lineHeight': string;
+    'style.frame': string;
+    'style.radius': string;
+    'style.padding': string;
+    'style.border': string;
+    'style.layer': string;
+    'style.borderColor': string;
+    'style.shadow': string;
+    'style.shadow.none': string;
+    'style.shadow.sm': string;
+    'style.shadow.md': string;
+    'style.shadow.lg': string;
+    'style.shadow.custom': string;
+    'style.customShadow': string;
+    'style.shadowBlur': string;
+    'style.shadowSpread': string;
+    'style.shadowColor': string;
+    'style.shadowOpacity': string;
+    'style.transform': string;
+    'style.rotate': string;
+    'style.straighten': string;
+    'style.flipX': string;
+    'style.flipY': string;
+    'style.overflow': string;
+    'style.overflow.visible': string;
+    'style.overflow.hidden': string;
+    'style.overflow.scroll-x': string;
+    'style.overflow.scroll-y': string;
+    'style.visibleOn': string;
+    'style.visible.all': string;
+    'style.visible.desktop': string;
+    'style.visible.mobile': string;
+    'style.transformHint': string;
+    'style.motion': string;
+    'style.entrance': string;
+    'style.anim.none': string;
+    'style.anim.fade': string;
+    'style.anim.up': string;
+    'style.anim.down': string;
+    'style.anim.left': string;
+    'style.anim.right': string;
+    'style.anim.zoom': string;
+    'style.delay': string;
+    'style.duration': string;
+    'style.hover': string;
+    'style.hover.none': string;
+    'style.hover.lift': string;
+    'style.hover.grow': string;
+    'style.hover.fade': string;
+    'style.motionHint': string;
+    'position.title': string;
+    'position.desktop': string;
+    'position.mobile': string;
+    'position.width': string;
+    'position.height': string;
+    'position.own': string;
+    'position.inherit': string;
+    'position.inherited': string;
+    'color.custom': string;
+    'color.customLabel': string;
+    'toast.copied': string;
+    'toast.copiedMany': string;
+    'toast.copyFailed': string;
+    'toast.pasted': string;
+    'toast.mobileGenerated': string;
+    'toast.pageCreated': string;
+    'toast.failed': string;
+    'toast.dismiss': string;
+    'default.heading': string;
+    'default.text': string;
+    'default.button': string;
+    'default.video': string;
+    'default.field': string;
+    'default.fieldPlaceholder': string;
+    'default.checkbox': string;
+    'default.option': string;
+    'default.brand': string;
+    'default.link': string;
+    'default.link.home': string;
+    'default.link.features': string;
+    'default.link.about': string;
+    'default.link.contact': string;
+    'default.link.start': string;
+    'template.hero': string;
+    'template.features': string;
+    'template.about': string;
+    'template.cta': string;
+    'template.contact': string;
+    'template.footer': string;
+    'pageTemplate.full': string;
+    'pageTemplate.full.note': string;
+    'pageTemplate.simple': string;
+    'pageTemplate.simple.note': string;
+    'pageTemplate.landing': string;
+    'pageTemplate.landing.note': string;
+    'position.x': string;
+    'position.y': string;
+    'style.font': string;
+    'style.align': string;
+    'gradient.presets': string;
+    'action.target': string;
+    'action.unknown': string;
+    'el.linkN': string;
+    'el.videoPlaceholder': string;
+    'el.iconOptions': string;
+    'page.homeHint': string;
+    'section.anchorInvalid': string;
+    'newPage.slugFallback': string;
+    'theme.hex': string;
+    'site.localeHint': string;
+};
+export type MessageKey = keyof typeof en;
+export type Messages = Record<MessageKey, string>;

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

@@ -0,0 +1,2 @@
+import type { Messages } from './en.ts';
+export declare const es: Messages;

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

@@ -0,0 +1,18 @@
+import type { Localized } from '@skylivellc/lienzo-core';
+import { en, type MessageKey, type Messages } from './en.ts';
+import { es } from './es.ts';
+export { en, es };
+export type { MessageKey, Messages };
+/** Packs shipped with the editor. Apps add or override locales through the `messages` prop. */
+export declare const packs: Readonly<Record<string, Messages>>;
+/** Extra or overriding strings, by locale. A partial pack falls back to English per key. */
+export type MessageOverrides = Readonly<Record<string, Partial<Messages>>>;
+export type Translator = {
+    locale: string;
+    t(key: MessageKey, params?: Readonly<Record<string, string | number>>): string;
+    /** Text the app declared in its catalog, in the editor's locale. */
+    localized(text: Localized): string;
+};
+/** `es-MX` reads `es-MX`, then `es`, then English, for each key. */
+export declare function createTranslator(locale: string, overrides?: MessageOverrides): Translator;
+export declare function format(template: string, params?: Readonly<Record<string, string | number>>): string;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `@skylivellc/lienzo-editor`: the Lienzo visual editor as a Vue 3 component.
+ * For any other stack, `@skylivellc/lienzo-editor/element` registers the
+ * `<lienzo-editor>` custom element.
+ */
+export { default as LienzoEditor } from './LienzoEditor.vue';
+export { en, es, type MessageKey, type MessageOverrides, type Messages } from './i18n/index.ts';

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

@@ -0,0 +1,46 @@
+import type { Box, CoreElementType, Document, Element, Modal, Section } from '@skylivellc/lienzo-core';
+/** Lienzo designs every page twice: on a desktop frame and on a phone frame. */
+export type Device = 'desktop' | 'mobile';
+/** Reference width of each frame, in design pixels. Desktop follows the theme's max width. */
+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", "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[];
+export declare function findCanvas(document: Document, id: string): Canvas | undefined;
+/** The box edited on this device. A phone without its own box shows the desktop one. */
+export declare function boxOf(element: Element, device: Device): Box;
+export declare function writeBox(element: Element, device: Device, box: Box): void;
+export declare function canvasHeight(canvas: Canvas, device: Device): number;
+/**
+ * On a phone a canvas keeps free positions only when every element has its
+ * own mobile box; otherwise core stacks its elements in reading order.
+ */
+export declare const stacksOnMobile: (canvas: Canvas) => boolean;
+/** Ids are prefixed by kind so stored documents stay readable. */
+export declare function newId(prefix: string): string;
+/** A fresh copy of an element with a new id, nudged down so it does not hide the original. */
+export declare function copyElement(element: Element, offset?: number): Element;
+/** A deep copy as plain data, also out of a reactive proxy. Documents are JSON by definition. */
+export declare function plain<T>(value: T): T;
+export declare function emptySection(): Section;
+/** Modal sizes with a fixed width. At full screen the design is made on 1200. */
+export declare const MODAL_SIZES: readonly [{
+    readonly key: "sm";
+    readonly width: 420;
+}, {
+    readonly key: "md";
+    readonly width: 560;
+}, {
+    readonly key: "lg";
+    readonly width: 760;
+}, {
+    readonly key: "xl";
+    readonly width: 960;
+}, {
+    readonly key: "full";
+    readonly width: 1200;
+}];
+export declare function emptyModal(title: string): Modal;