@palmyit/elements 0.1.3 → 0.1.8

package/dist/plmt-elements.js

@@ -1,115 +0,0 @@
-// src/PlmtElement.ts
-var e = class extends HTMLElement {
-	static observedAttributes = [];
-	attributeChangedCallback(e, t, n) {
-		this.syncFromAttributes();
-	}
-	connectedCallback() {
-		this.syncFromAttributes();
-	}
-	syncFromAttributes() {}
-};
-function t(e, t) {
-	customElements.get(e) || customElements.define(e, t);
-}
-// src/elements/page/PlmtPage.ts
-var n = "a[href], button, input, textarea, select", r = class extends e {
-	static observedAttributes = ["editing"];
-	#e = (e) => {
-		if (!this.hasAttribute("editing")) return;
-		let t = e.target;
-		t instanceof Element && t.closest("a[href], button[type=\"submit\"]") && (e.preventDefault(), e.stopPropagation());
-	};
-	connectedCallback() {
-		super.connectedCallback(), this.addEventListener("click", this.#e, !0);
-	}
-	disconnectedCallback() {
-		this.removeEventListener("click", this.#e, !0);
-	}
-	syncFromAttributes() {
-		let e = this.hasAttribute("editing");
-		for (let t of this.querySelectorAll(n)) e ? this.#t(t) : this.#n(t);
-	}
-	#t(e) {
-		e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement ? (e.readOnly = !0, e.tabIndex = -1) : e instanceof HTMLSelectElement ? (e.setAttribute("aria-disabled", "true"), e.tabIndex = -1) : (e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement) && (e.tabIndex = -1);
-	}
-	#n(e) {
-		e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement ? (e.readOnly = !1, e.removeAttribute("tabindex")) : e instanceof HTMLSelectElement ? (e.removeAttribute("aria-disabled"), e.removeAttribute("tabindex")) : (e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement) && e.removeAttribute("tabindex");
-	}
-};
-t("plmt-page", r);
-// src/elements/section/PlmtSection.ts
-var i = class extends e {};
-t("plmt-section", i);
-// src/elements/container/PlmtContainer.ts
-var a = class extends e {};
-t("plmt-container", a);
-// src/elements/button/PlmtButton.ts
-var o = class extends e {};
-t("plmt-button", o);
-// src/elements/text/PlmtText.ts
-var s = class extends e {};
-t("plmt-text", s);
-// src/elements/rich-text/PlmtRichText.ts
-var c = class extends e {};
-t("plmt-rich-text", c);
-// src/elements/image/PlmtImage.ts
-var l = class extends e {};
-t("plmt-image", l);
-// src/elements/video/PlmtVideo.ts
-var u = class extends e {};
-t("plmt-video", u);
-// src/elements/list/PlmtList.ts
-var d = class extends e {};
-t("plmt-list", d);
-// src/elements/icon/PlmtIcon.ts
-var f = class extends e {
-	static observedAttributes = ["name", "label"];
-	syncFromAttributes() {
-		let e = this.getAttribute("label")?.trim() ?? "";
-		e ? (this.setAttribute("role", "img"), this.setAttribute("aria-label", e), this.removeAttribute("aria-hidden")) : (this.removeAttribute("role"), this.removeAttribute("aria-label"), this.setAttribute("aria-hidden", "true"));
-	}
-};
-t("plmt-icon", f);
-// src/elements/divider/PlmtDivider.ts
-var p = class extends e {};
-t("plmt-divider", p);
-// src/elements/table/PlmtTable.ts
-var m = class extends e {};
-t("plmt-table", m);
-// src/elements/text-field/PlmtTextField.ts
-var h = class extends e {};
-t("plmt-text-field", h);
-// src/elements/text-area/PlmtTextArea.ts
-var g = class extends e {};
-t("plmt-text-area", g);
-// src/elements/checkbox/PlmtCheckbox.ts
-var _ = class extends e {};
-t("plmt-checkbox", _);
-// src/elements/radio/PlmtRadio.ts
-var v = class extends e {};
-t("plmt-radio", v);
-// src/elements/select/PlmtSelect.ts
-var y = class extends e {};
-t("plmt-select", y);
-// src/tags.ts
-var b = [
-	"plmt-page",
-	"plmt-section",
-	"plmt-container",
-	"plmt-button",
-	"plmt-text",
-	"plmt-rich-text",
-	"plmt-image",
-	"plmt-video",
-	"plmt-list",
-	"plmt-icon",
-	"plmt-divider",
-	"plmt-table",
-	"plmt-text-field",
-	"plmt-text-area",
-	"plmt-checkbox",
-	"plmt-radio",
-	"plmt-select"
-];
-export { b as PLMT_TAGS, o as PlmtButton, _ as PlmtCheckbox, a as PlmtContainer, p as PlmtDivider, e as PlmtElement, f as PlmtIcon, l as PlmtImage, d as PlmtList, r as PlmtPage, v as PlmtRadio, c as PlmtRichText, i as PlmtSection, y as PlmtSelect, m as PlmtTable, s as PlmtText, g as PlmtTextArea, h as PlmtTextField, u as PlmtVideo, t as define };

package/dist/registry.d.ts

@@ -0,0 +1,9 @@
+import { ElementType, RegisteredElementConfiguration } from './schema/elementConfiguration';
+import { elementSpec, toElementTree, ShortcodeNode } from './templates/elementSpec';
+import { ElementSpec, ElementSpecOptions } from './render/types';
+export type ElementEntry = {
+    definition: RegisteredElementConfiguration;
+    template: (node: ShortcodeNode, options?: ElementSpecOptions) => ElementSpec | null;
+};
+export declare const registry: Record<ElementType, ElementEntry>;
+export { elementSpec, toElementTree };

package/dist/render/renderHtml.d.ts

@@ -0,0 +1,5 @@
+import { ElementSpec } from './types';
+export declare function escapeHtml(value: unknown): string;
+/** Drop script/style blocks, event handlers, and javascript: URLs from rich text. */
+export declare function sanitizeRichTextHtml(html: string): string;
+export declare function renderHtml(node: ElementSpec | string): string;

package/dist/render/styleToClasses.d.ts

@@ -0,0 +1,35 @@
+import { ElementType } from '../schema/elementConfiguration';
+export type DeviceStyleProps = {
+    style?: Record<string, unknown>;
+    tabletStyle?: Record<string, unknown>;
+    mobileStyle?: Record<string, unknown>;
+    tabletLandscapeStyle?: Record<string, unknown>;
+    mobileLandscapeStyle?: Record<string, unknown>;
+};
+type VariantPrefix = '' | 'tablet:' | 'mobile:' | 'tablet-landscape:' | 'mobile-landscape:';
+/**
+ * Turn one style object into utility classes. Values that cannot map onto a
+ * Tailwind token are collected in `unresolved` for CSS variables.
+ */
+export declare function styleObjectToClasses(type: ElementType, style: Record<string, unknown> | undefined, variant?: VariantPrefix): {
+    classes: string[];
+    unresolved: Record<string, unknown>;
+};
+/**
+ * Classes for an element: type defaults, then desktop style, then device variants.
+ * Later entries win in the cascade when variants apply; within one breakpoint the
+ * last class for a conflicting property should not be duplicated by the caller.
+ */
+export declare function styleToClasses(type: ElementType, props: DeviceStyleProps): string[];
+/**
+ * Style keys that still need `--palmyit-*` variables (font family, gradients,
+ * off-scale lengths, hex colors outside the palette).
+ */
+export declare function unresolvedStyleForVars(type: ElementType, style: Record<string, unknown> | undefined): Record<string, unknown>;
+/** Convert page style tokens into values styleToCssVariables can write. */
+export declare function pageTokensToVarValues(props: {
+    backgroundColor?: unknown;
+    textColor?: unknown;
+    textSize?: unknown;
+}): Record<string, unknown>;
+export {};

package/dist/render/styleToVars.d.ts

@@ -0,0 +1,2 @@
+import { CssVariables } from './types';
+export declare function styleToCssVariables(style: Record<string, unknown> | undefined, prefix: string): CssVariables;

package/dist/render/styleTokens.d.ts

@@ -0,0 +1,57 @@
+/** Spacing / sizing keys on Tailwind's default scale, plus auto. */
+export declare const SPACING_TOKENS: readonly ["0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "5", "6", "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32", "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96", "auto"];
+export type SpacingToken = (typeof SPACING_TOKENS)[number];
+export declare const BORDER_WIDTH_TOKENS: readonly ["0", "1", "2", "4", "8"];
+export type BorderWidthToken = (typeof BORDER_WIDTH_TOKENS)[number];
+export declare const RADIUS_TOKENS: readonly ["none", "sm", "md", "lg", "xl", "2xl", "3xl", "full", "0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "5", "6", "7", "8", "9", "10", "11", "12", "14", "16"];
+export type RadiusToken = (typeof RADIUS_TOKENS)[number];
+export declare const TEXT_SIZE_TOKENS: readonly ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export type TextSizeToken = (typeof TEXT_SIZE_TOKENS)[number];
+export declare const LEADING_TOKENS: readonly ["none", "tight", "snug", "normal", "relaxed", "loose", "3", "4", "5", "6", "7", "8", "9", "10"];
+export type LeadingToken = (typeof LEADING_TOKENS)[number];
+export declare const TRACKING_TOKENS: readonly ["tighter", "tight", "normal", "wide", "wider", "widest"];
+export type TrackingToken = (typeof TRACKING_TOKENS)[number];
+export declare const COLOR_NAMES: readonly ["accent", "transparent", "white", "black", "slate-50", "slate-100", "slate-200", "slate-300", "slate-400", "slate-500", "slate-600", "slate-700", "slate-800", "slate-900", "slate-950"];
+export type ColorName = (typeof COLOR_NAMES)[number];
+export declare const OPACITY_STEPS: readonly [0, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
+export type OpacityStep = (typeof OPACITY_STEPS)[number];
+/** Palette color stored on an element. Hex colors remain supported for legacy docs. */
+export type PaletteColor = {
+    name: ColorName;
+    opacity: OpacityStep;
+};
+export type StyleColor = PaletteColor | {
+    hex: string;
+    opacity: number;
+};
+export declare function isSpacingToken(value: string): value is SpacingToken;
+export declare function isBorderWidthToken(value: string): value is BorderWidthToken;
+export declare function isRadiusToken(value: string): value is RadiusToken;
+export declare function isTextSizeToken(value: string): value is TextSizeToken;
+export declare function isLeadingToken(value: string): value is LeadingToken;
+export declare function isTrackingToken(value: string): value is TrackingToken;
+export declare function isPaletteColor(value: unknown): value is PaletteColor;
+export declare function isHexColor(value: unknown): value is {
+    hex: string;
+    opacity: number;
+};
+/** Map a CSS length (or token) onto the spacing scale when it lands exactly. */
+export declare function toSpacingToken(value: unknown): SpacingToken | undefined;
+export declare function toBorderWidthToken(value: unknown): BorderWidthToken | undefined;
+export declare function toRadiusToken(value: unknown): RadiusToken | undefined;
+export declare function toTextSizeToken(value: unknown): TextSizeToken | undefined;
+export declare function toLeadingToken(value: unknown): LeadingToken | undefined;
+export declare function toTrackingToken(value: unknown): TrackingToken | undefined;
+export declare function toPaletteColor(value: unknown): PaletteColor | undefined;
+export declare function fontWeightClass(value: unknown): string | undefined;
+export declare function colorClass(prefix: 'bg' | 'text' | 'border', color: PaletteColor): string;
+export declare function spacingClass(prefix: string, token: SpacingToken): string;
+export declare function radiusClass(corner: string, token: RadiusToken): string;
+export declare function borderWidthClass(token: BorderWidthToken): string;
+export declare function textSizeClass(token: TextSizeToken): string;
+export declare function leadingClass(token: LeadingToken): string;
+export declare function trackingClass(token: TrackingToken): string;
+/** CSS value for a text-size token, used for page theme variables. */
+export declare function textSizeTokenToCss(token: TextSizeToken): string;
+/** CSS value for a palette color (for page theme variables). */
+export declare function paletteColorToCss(color: PaletteColor): string | undefined;

package/dist/render/tags.d.ts

@@ -0,0 +1,42 @@
+import { ElementType } from '../schema/elementConfiguration';
+/** CSS class hook for each shortcode element type. */
+export declare const tags: {
+    readonly PPage: "plmt-page";
+    readonly PSection: "plmt-section";
+    readonly PContainer: "plmt-container";
+    readonly PButton: "plmt-button";
+    readonly PText: "plmt-text";
+    readonly PRichText: "plmt-rich-text";
+    readonly PImage: "plmt-image";
+    readonly PVideo: "plmt-video";
+    readonly PList: "plmt-list";
+    readonly PIcon: "plmt-icon";
+    readonly PDivider: "plmt-divider";
+    readonly PTable: "plmt-table";
+    readonly PTextField: "plmt-text-field";
+    readonly PTextArea: "plmt-text-area";
+    readonly PCheckbox: "plmt-checkbox";
+    readonly PRadio: "plmt-radio";
+    readonly PSelect: "plmt-select";
+};
+export type ShortcodeTag = (typeof tags)[ElementType];
+/** Semantic HTML tag for each element type (Stage 3). */
+export declare const semanticTags: {
+    readonly PPage: "main";
+    readonly PSection: "section";
+    readonly PContainer: "div";
+    readonly PButton: "button";
+    readonly PText: "p";
+    readonly PRichText: "div";
+    readonly PImage: "img";
+    readonly PVideo: "video";
+    readonly PList: "ul";
+    readonly PIcon: "span";
+    readonly PDivider: "hr";
+    readonly PTable: "div";
+    readonly PTextField: "div";
+    readonly PTextArea: "div";
+    readonly PCheckbox: "div";
+    readonly PRadio: "fieldset";
+    readonly PSelect: "div";
+};

package/dist/render/toDom.d.ts

@@ -0,0 +1,3 @@
+import { ElementSpec } from './types';
+/** Turn an ElementSpec into a real DOM node (for Storybook / tests). */
+export declare function toDom(node: ElementSpec | string): Node;

package/dist/render/types.d.ts

@@ -0,0 +1,20 @@
+import { ElementType } from '../schema/elementConfiguration';
+export type ElementAttribute = string | number | boolean | undefined;
+export type CssVariables = Record<string, string | undefined>;
+export type ElementSpec = {
+    tag: string;
+    attrs: Record<string, ElementAttribute>;
+    styleVars: CssVariables;
+    children?: Array<ElementSpec | string> | {
+        html: string;
+    };
+};
+export type ElementSpecOptions = {
+    /** Layout host children (from Puck slots or recursion). Ignored for leaf elements. */
+    children?: Array<ElementSpec | string>;
+};
+export type ShortcodeNode = {
+    type: ElementType;
+    props: Record<string, unknown>;
+    children?: ShortcodeNode[];
+};

package/dist/schema/Fields/BackgroundField/backgroundValue.d.ts

@@ -0,0 +1,16 @@
+import { StyleColor } from '../../../render/styleTokens';
+export type BackgroundType = 'color' | 'gradient';
+export type GradientKind = 'linear' | 'radial';
+export type GradientValue = {
+    kind: GradientKind;
+    value: string;
+};
+export type BackgroundStyle = {
+    backgroundType: BackgroundType;
+    backgroundColor: StyleColor;
+    /** Present only when the author picks a gradient fill. */
+    backgroundGradient?: GradientValue;
+};
+export declare const MAX_GRADIENT_ARGS_LENGTH = 200;
+export declare function isSafeGradientArgs(value: string): boolean;
+export declare function gradientToCss(gradient: GradientValue): string | undefined;

package/dist/schema/Fields/ColorField/color-value.d.ts

@@ -0,0 +1,6 @@
+export type ColorValue = {
+    hex: string;
+    opacity: number;
+};
+export declare function toHexAlpha(value: ColorValue): string;
+export declare function fromHexAlpha(color: string): ColorValue | null;

package/dist/schema/Fields/ColorField/index.d.ts

@@ -0,0 +1 @@
+export * from './color-value';

package/dist/schema/Fields/FontStyleField.d.ts

@@ -0,0 +1,2 @@
+export declare const FONT_STYLES: readonly ["normal", "italic", "oblique"];
+export type FontStyle = (typeof FONT_STYLES)[number];

package/dist/schema/Fields/IconPicker/iconCatalog.d.ts

@@ -0,0 +1,3 @@
+export declare const NO_ICON = "";
+export declare function isOutlineIconName(value: string): boolean;
+export declare function labelForIcon(value: string): string;

package/dist/schema/addressSchema.d.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+/** An http(s) URL or a single-slash path on the same site. Other schemes and relative paths are rejected. */
+export declare const addressSchema: z.ZodString;

package/dist/schema/backgroundStyleDefinitions.d.ts

@@ -0,0 +1,10 @@
+import { BackgroundStyle } from './Fields/BackgroundField/backgroundValue';
+import { StyleDefinition } from './styleItems';
+export { colorValue } from './styleTokensSchema';
+type BackgroundDefinitionOptions = {
+    /** Omit to leave every background key unset until the user picks one. */
+    defaults?: BackgroundStyle;
+    /** A data attribute the element sets while it has a background type. */
+    typeAttribute?: string;
+};
+export declare function backgroundStyleDefinitions(prefix: string, { defaults, typeAttribute }?: BackgroundDefinitionOptions): StyleDefinition[];

package/dist/schema/device/deviceStyle.d.ts

@@ -0,0 +1,13 @@
+import { DeviceName, Orientation } from './devices';
+export type DeviceStyleProp = 'style' | 'tabletStyle' | 'mobileStyle' | 'tabletLandscapeStyle' | 'mobileLandscapeStyle';
+export type DeviceStyles<TStyle> = {
+    style: TStyle;
+} & Partial<Record<Exclude<DeviceStyleProp, 'style'>, Partial<TStyle>>>;
+/** The prop a style edit on this device and orientation writes to. */
+export declare function deviceStyleProp(device: DeviceName, orientation?: Orientation): DeviceStyleProp;
+/** The override stored for exactly this device and orientation; Desktop has none. */
+export declare function deviceOverride<TStyle>(styles: DeviceStyles<TStyle>, device: DeviceName, orientation?: Orientation): Partial<TStyle>;
+/** The keys of `next` set to a different value than in `previous`. */
+export declare function changedStyle<TStyle extends object>(previous: TStyle, next: Partial<TStyle>): Partial<TStyle>;
+/** Desktop, then the device's portrait override, then in landscape its landscape override. */
+export declare function resolveDeviceStyle<TStyle>(styles: DeviceStyles<TStyle>, device: DeviceName, orientation?: Orientation): TStyle;

package/dist/schema/device/devices.d.ts

@@ -0,0 +1,21 @@
+export type DeviceName = 'Desktop' | 'Tablet' | 'Mobile';
+export type Orientation = 'portrait' | 'landscape';
+export type ViewportSize = {
+    width: number;
+    height: number | 'auto';
+};
+export type BuilderDevice = {
+    name: DeviceName;
+    icon: 'Monitor' | 'Tablet' | 'Smartphone';
+    portrait: ViewportSize;
+    landscape?: ViewportSize;
+};
+export declare const builderDevices: BuilderDevice[];
+export declare const builderViewports: {
+    icon: "Tablet" | "Monitor" | "Smartphone";
+    label: DeviceName;
+    width: number;
+    height: number | "auto";
+}[];
+export declare function deviceForWidth(width: number | '100%'): BuilderDevice;
+export declare function orientationForWidth(width: number | '100%'): Orientation;

package/dist/schema/deviceSettings.d.ts

@@ -0,0 +1,13 @@
+import { DeviceStyleProp } from './device/deviceStyle';
+import { ElementConfiguration } from './elementConfiguration';
+import { DeviceVisibility } from './deviceVisibility';
+import { StyleDefinition } from './styleItems';
+type OverrideProp = Exclude<DeviceStyleProp, 'style'>;
+export type DeviceStyleOverrides<TStyle> = Partial<Record<OverrideProp, Partial<TStyle>>>;
+/**
+ * Adds the Show for devices flags to an element, and, when it has `styles`,
+ * portrait and landscape Tablet and Mobile overrides of those styles. Publish
+ * writes only flags that change visibility and overrides that are set.
+ */
+export declare function withDeviceSettings<TProps>(configuration: ElementConfiguration<TProps>, styles?: StyleDefinition[]): ElementConfiguration<TProps & Partial<DeviceVisibility> & DeviceStyleOverrides<Record<string, unknown>>>;
+export {};

package/dist/schema/deviceVisibility.d.ts

@@ -0,0 +1,19 @@
+import { DeviceName, Orientation } from './device/devices';
+export type DeviceVisibilityProp = 'showOnDesktop' | 'showOnTablet' | 'showOnMobile' | 'showOnTabletLandscape' | 'showOnMobileLandscape';
+export type DeviceVisibility = Record<DeviceVisibilityProp, boolean>;
+export declare const VISIBILITY_PROP_BY_DEVICE: Record<DeviceName, DeviceVisibilityProp>;
+export declare const LANDSCAPE_VISIBILITY_PROP_BY_DEVICE: Partial<Record<DeviceName, DeviceVisibilityProp>>;
+export declare const VISIBILITY_PROPS: DeviceVisibilityProp[];
+/** One Show for devices checkbox: a device, in one orientation when it has a landscape. */
+export type DeviceChoice = {
+    device: DeviceName;
+    orientation: Orientation;
+};
+export declare const DEVICE_CHOICES: DeviceChoice[];
+export declare function visibilityProp(device: DeviceName, orientation: Orientation): DeviceVisibilityProp;
+/**
+ * An element without the flag is shown, so pages saved before device settings stay visible.
+ * An omitted landscape flag follows the device's portrait flag.
+ */
+export declare function isShownOn(props: Partial<DeviceVisibility>, device: DeviceName, orientation?: Orientation): boolean;
+export declare function shownDeviceCount(props: Partial<DeviceVisibility>): number;

package/dist/schema/elementConfiguration.d.ts

@@ -0,0 +1,38 @@
+import { z } from 'zod';
+import { ElementTemplate } from './elementTemplates';
+export type ElementType = 'PPage' | 'PSection' | 'PContainer' | 'PButton' | 'PText' | 'PRichText' | 'PImage' | 'PVideo' | 'PList' | 'PIcon' | 'PDivider' | 'PTextField' | 'PTextArea' | 'PCheckbox' | 'PRadio' | 'PSelect' | 'PTable';
+export type DocumentAttributes = Record<string, unknown>;
+/**
+ * The words the page history uses for an element. `summary` names one
+ * instance (a button's label). `attributes` names each editable prop path,
+ * such as `name` or `style.paddingTop`.
+ */
+export type ElementHistory<TProps> = {
+    summary: (props: TProps) => string;
+    attributes: Readonly<Record<string, string>>;
+};
+/**
+ * `attributes` parses a document node's attributes (every key except `type`
+ * and `children`) into the props the canvas renders. `toDocumentAttributes`
+ * is the reverse, used on publish before the same schema runs again.
+ */
+export type ElementConfiguration<TProps = Record<string, unknown>> = {
+    type: ElementType;
+    label: string;
+    attributes: z.ZodType<TProps>;
+    allowedChildren: readonly ElementType[];
+    templates: readonly ElementTemplate[];
+    toDocumentAttributes: (props: TProps) => DocumentAttributes;
+    history: ElementHistory<TProps>;
+};
+export type RegisteredElementConfiguration = {
+    type: ElementType;
+    label: string;
+    attributes: z.ZodType;
+    allowedChildren: readonly ElementType[];
+    templates: readonly ElementTemplate[];
+    toDocumentAttributes: (props: never) => DocumentAttributes;
+    history: ElementHistory<never>;
+};
+export declare const elementIdSchema: z.ZodString;
+export declare function defineElement<TProps>(configuration: ElementConfiguration<TProps>): ElementConfiguration<TProps>;

package/dist/schema/elementRegistry.d.ts

@@ -0,0 +1,40 @@
+import { ElementType } from './elementConfiguration';
+export declare const elementRegistry: {
+    PPage: import('./elementConfiguration').ElementConfiguration<import('../definitions').PPageRootProps>;
+    PSection: import('./elementConfiguration').ElementConfiguration<import('./layoutElementConfiguration').LayoutElementProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PContainer: import('./elementConfiguration').ElementConfiguration<import('./layoutElementConfiguration').LayoutElementProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PButton: import('./elementConfiguration').ElementConfiguration<import('./linkSettings').LinkSettings & {
+        id: string;
+        name: string;
+        startIcon: string;
+        endIcon: string;
+        style: import('../definitions').ButtonStyle;
+    } & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PText: import('./elementConfiguration').ElementConfiguration<import('./linkSettings').LinkSettings & {
+        id: string;
+        text: string;
+        style: import('../definitions').TextStyle;
+    } & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PRichText: import('./elementConfiguration').ElementConfiguration<import('../elements/rich-text/definition').PRichTextDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PImage: import('./elementConfiguration').ElementConfiguration<import('./linkSettings').LinkSettings & {
+        id: string;
+        src: string;
+        alt: string;
+        style: import('../definitions').ImageStyle;
+    } & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PVideo: import('./elementConfiguration').ElementConfiguration<import('../elements/video/definition').PVideoDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PList: import('./elementConfiguration').ElementConfiguration<import('../elements/list/definition').PListDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PIcon: import('./elementConfiguration').ElementConfiguration<import('./linkSettings').LinkSettings & {
+        id: string;
+        icon: string;
+        label: string;
+    } & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PDivider: import('./elementConfiguration').ElementConfiguration<import('../elements/divider/definition').PDividerDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PTextField: import('./elementConfiguration').ElementConfiguration<import('../elements/text-field/definition').PTextFieldDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PTextArea: import('./elementConfiguration').ElementConfiguration<import('../elements/text-area/definition').PTextAreaDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PCheckbox: import('./elementConfiguration').ElementConfiguration<import('../elements/checkbox/definition').PCheckboxDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PRadio: import('./elementConfiguration').ElementConfiguration<import('../elements/radio/definition').PRadioDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PSelect: import('./elementConfiguration').ElementConfiguration<import('../elements/select/definition').PSelectDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+    PTable: import('./elementConfiguration').ElementConfiguration<import('../elements/table/definition').PTableDocumentProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+};
+export declare function isElementType(value: unknown): value is ElementType;

package/dist/schema/elementStyleDefinitions.d.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+import { ElementStyle, ElementStyleKind } from './style/elementStyle';
+import { StyleDefinition } from './styleItems';
+export { lengthValue, colorValue, borderWidthValue } from './styleTokensSchema';
+export declare const lengthKeys: readonly [readonly ["width", "width", "Width"], readonly ["height", "height", "Height"], readonly ["minWidth", "min-width", "Min width"], readonly ["minHeight", "min-height", "Min height"], readonly ["maxWidth", "max-width", "Max width"], readonly ["maxHeight", "max-height", "Max height"], readonly ["paddingTop", "padding-top", "Padding top"], readonly ["paddingBottom", "padding-bottom", "Padding bottom"], readonly ["paddingLeft", "padding-left", "Padding left"], readonly ["paddingRight", "padding-right", "Padding right"], readonly ["marginTop", "margin-top", "Margin top"], readonly ["marginBottom", "margin-bottom", "Margin bottom"], readonly ["marginLeft", "margin-left", "Margin left"], readonly ["marginRight", "margin-right", "Margin right"], readonly ["borderRadiusTopLeft", "border-top-left-radius", "Radius top left"], readonly ["borderRadiusTopRight", "border-top-right-radius", "Radius top right"], readonly ["borderRadiusBottomRight", "border-bottom-right-radius", "Radius bottom right"], readonly ["borderRadiusBottomLeft", "border-bottom-left-radius", "Radius bottom left"]];
+export type LengthKey = (typeof lengthKeys)[number][0];
+export declare function elementStyleDefinitions(kind: ElementStyleKind, defaults: ElementStyle): StyleDefinition[];
+export declare function elementStyleSchema(definitions: StyleDefinition[], defaults: ElementStyle): z.ZodPipe<z.ZodPipe<z.ZodDefault<z.ZodArray<z.ZodObject<{
+    key: z.ZodString;
+    variable: z.ZodOptional<z.ZodString>;
+    variables: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+    attribute: z.ZodOptional<z.ZodString>;
+    value: z.ZodUnknown;
+}, z.core.$strict>>>, z.ZodTransform<{
+    [x: string]: unknown;
+}, {
+    key: string;
+    value: unknown;
+    variable?: string | undefined;
+    variables?: Record<string, string> | undefined;
+    attribute?: string | undefined;
+}[]>>, z.ZodTransform<ElementStyle, {
+    [x: string]: unknown;
+}>>;

package/dist/schema/elementTemplates.d.ts

@@ -0,0 +1,26 @@
+import { RegisteredElementConfiguration } from './elementConfiguration';
+/**
+ * A preset shown on the Templates tab. `shortcode` is a JSON object in the
+ * page-document format. A style item without its address only works for a key
+ * the element already has. `children` replaces that element's content.
+ */
+export type ElementTemplate = {
+    shortcode: string;
+    name: string;
+    /** Image URL the Templates tab shows in place of the name. */
+    graphic?: string;
+};
+export type TemplateContentItem = {
+    type: string;
+    props: Record<string, unknown>;
+};
+export type ApplyTemplateResult = {
+    ok: true;
+    props: Record<string, unknown>;
+    content?: TemplateContentItem[];
+} | {
+    ok: false;
+    message: string;
+};
+/** Returns the element's props with the template merged in and validated. */
+export declare function applyElementTemplate(configuration: RegisteredElementConfiguration, props: Record<string, unknown>, template: ElementTemplate): ApplyTemplateResult;

package/dist/schema/layoutChildren.d.ts

@@ -0,0 +1,2 @@
+import { ElementType } from './elementConfiguration';
+export declare const layoutChildren: readonly ElementType[];

package/dist/schema/layoutElementConfiguration.d.ts

@@ -0,0 +1,17 @@
+import { ElementStyle, ElementStyleKind } from './style/elementStyle';
+import { ElementType } from './elementConfiguration';
+import { ElementTemplate } from './elementTemplates';
+export type LayoutElementProps = {
+    id: string;
+    style: ElementStyle;
+};
+type LayoutElementOptions = {
+    type: ElementType;
+    label: string;
+    kind: ElementStyleKind;
+    defaultStyle: ElementStyle;
+    allowedChildren: readonly ElementType[];
+    templates: readonly ElementTemplate[];
+};
+export declare function defineLayoutElement({ type, label, kind, defaultStyle, allowedChildren, templates, }: LayoutElementOptions): import('./elementConfiguration').ElementConfiguration<LayoutElementProps & Partial<import('./deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;
+export {};

package/dist/schema/linkSettings.d.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod';
+import { DocumentAttributes } from './elementConfiguration';
+export declare const LINK_TARGETS: readonly ["_self", "_blank"];
+export type LinkTarget = (typeof LINK_TARGETS)[number];
+/** An empty `href` means the element is not a link. */
+export type LinkSettings = {
+    href: string;
+    target: LinkTarget;
+    description: string;
+};
+export declare const defaultLinkSettings: LinkSettings;
+export declare const linkSettingsShape: {
+    href: z.ZodDefault<z.ZodPipe<z.ZodString, z.ZodUnion<readonly [z.ZodLiteral<"">, z.ZodString]>>>;
+    target: z.ZodDefault<z.ZodEnum<{
+        _self: "_self";
+        _blank: "_blank";
+    }>>;
+    description: z.ZodDefault<z.ZodString>;
+};
+export declare const linkHistoryLabels: {
+    href: string;
+    target: string;
+    description: string;
+};
+/** Writes only what differs from no link: the address, a new tab, and a description. */
+export declare function toLinkAttributes({ href, target, description }: LinkSettings): DocumentAttributes;

package/dist/schema/style/backgroundStyle.d.ts

@@ -0,0 +1,5 @@
+import { BackgroundStyle } from '../Fields/BackgroundField/backgroundValue';
+type CssVarMap = Record<string, string | undefined>;
+/** Writes nothing until a background type is chosen, so the element keeps its own background. */
+export declare function backgroundStyleToCssVariables(style: Partial<BackgroundStyle>, prefix: string): CssVarMap;
+export {};