@palmyit/elements 0.1.3 → 0.1.8

package/dist/templates.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Element markup templates and HTML render helpers.
+ * Import from `@palmyit/elements/templates`.
+ */
+export type { ElementAttribute, CssVariables, ElementSpec, ElementSpecOptions, } from './render/types';
+export { escapeHtml, sanitizeRichTextHtml, renderHtml } from './render/renderHtml';
+export { toDom } from './render/toDom';
+export { styleToCssVariables } from './render/styleToVars';
+export { styleToClasses, styleObjectToClasses, unresolvedStyleForVars, pageTokensToVarValues, type DeviceStyleProps, } from './render/styleToClasses';
+export { SPACING_TOKENS, TEXT_SIZE_TOKENS, COLOR_NAMES, OPACITY_STEPS, toSpacingToken, toTextSizeToken, toPaletteColor, isPaletteColor, type SpacingToken, type TextSizeToken, type ColorName, type PaletteColor, type StyleColor, } from './render/styleTokens';
+export { tags, type ShortcodeTag } from './render/tags';
+export { elementSpec, toElementTree, type ShortcodeNode, } from './templates/elementSpec';
+export { spec, linked, hostAttrs, withStyle, pageStyleVars, nodeId, cssPrefix } from './templates/helpers';

package/dist/templates.js

@@ -0,0 +1,349 @@
+import { _ as e, c as t, d as n, g as r, h as i, i as a, m as o, n as s, o as ee, p as c, r as l, t as u, u as d } from "./styleToClasses-CZSWp6Ez.js";
+// src/render/renderHtml.ts
+var f = /* @__PURE__ */ new Set([
+	"img",
+	"input",
+	"hr",
+	"br",
+	"meta",
+	"link"
+]);
+function p(e) {
+	return String(e).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
+}
+function m(e) {
+	return e.replaceAll(/<(script|style|iframe|object|embed)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "").replaceAll(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replaceAll(/\s+(href|src)\s*=\s*(["'])\s*javascript:[\s\S]*?\2/gi, "");
+}
+function h(e) {
+	if (typeof e == "string") return p(e);
+	let t = Object.entries(e.attrs).flatMap(([e, t]) => t === void 0 || t === !1 ? [] : t === !0 ? [e] : [`${e}="${p(t)}"`]), n = Object.entries(e.styleVars).flatMap(([e, t]) => t === void 0 ? [] : [`${e}:${t}`]).join(";");
+	n && t.push(`style="${p(n)}"`);
+	let r = `<${e.tag}${t.length ? ` ${t.join(" ")}` : ""}>`;
+	return f.has(e.tag) ? `${r.slice(0, -1)}>` : `${r}${Array.isArray(e.children) ? e.children.map(h).join("") : e.children?.html ?? ""}</${e.tag}>`;
+}
+// src/render/toDom.ts
+function g(e) {
+	if (typeof e == "string") return document.createTextNode(e);
+	let t = document.createElement(e.tag);
+	for (let [n, r] of Object.entries(e.attrs)) r !== void 0 && r !== !1 && (r === !0 ? t.setAttribute(n, "") : t.setAttribute(n, String(r)));
+	let n = Object.entries(e.styleVars).flatMap(([e, t]) => t === void 0 ? [] : [`${e}:${t}`]).join(";");
+	if (n && t.setAttribute("style", n), Array.isArray(e.children)) for (let n of e.children) t.append(g(n));
+	else e.children?.html && (t.innerHTML = e.children.html);
+	return t;
+}
+// src/render/styleToVars.ts
+var _ = /^#[0-9A-Fa-f]{6}$/;
+function v(e) {
+	if (c(e)) return o(e);
+	if (!e || typeof e != "object" || !("hex" in e) || !("opacity" in e)) return;
+	let { hex: t, opacity: n } = e;
+	if (!_.test(t) || !Number.isFinite(n)) return;
+	if (n === 100) return t.toUpperCase();
+	let r = Math.min(100, Math.max(0, n)) / 100;
+	return `rgba(${Number.parseInt(t.slice(1, 3), 16)}, ${Number.parseInt(t.slice(3, 5), 16)}, ${Number.parseInt(t.slice(5, 7), 16)}, ${r})`;
+}
+var y = {
+	textFont: "font-family",
+	textColor: "color",
+	textSize: "font-size",
+	fontStyle: "font-style",
+	backgroundColor: "background-color",
+	backgroundGradient: "background-image",
+	borderRadiusTopLeft: "border-top-left-radius",
+	borderRadiusTopRight: "border-top-right-radius",
+	borderRadiusBottomLeft: "border-bottom-left-radius",
+	borderRadiusBottomRight: "border-bottom-right-radius",
+	gridColumns: "grid-template-columns"
+}, b = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+function x(e, t) {
+	return t && typeof t == "object" && ("hex" in t || "name" in t) && "opacity" in t ? v(t) : e === "backgroundGradient" && t && typeof t == "object" && "kind" in t && "value" in t ? `${String(t.kind)}-gradient(${String(t.value)})` : e === "gridColumns" && typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : e === "textSize" && typeof t == "number" ? Number.isFinite(t) && t > 0 ? `${t}px` : void 0 : e === "textSize" && typeof t == "string" && t.endsWith("rem") ? t : [
+		"string",
+		"number",
+		"boolean"
+	].includes(typeof t) ? String(t) : void 0;
+}
+function S(e, t) {
+	return e ? Object.fromEntries(Object.entries(e).flatMap(([e, n]) => {
+		let r = x(e, n);
+		return r === void 0 ? [] : [[`--palmyit-${t}-${y[e] ?? b(e)}`, r]];
+	})) : {};
+}
+// src/render/tags.ts
+var C = {
+	PPage: "plmt-page",
+	PSection: "plmt-section",
+	PContainer: "plmt-container",
+	PButton: "plmt-button",
+	PText: "plmt-text",
+	PRichText: "plmt-rich-text",
+	PImage: "plmt-image",
+	PVideo: "plmt-video",
+	PList: "plmt-list",
+	PIcon: "plmt-icon",
+	PDivider: "plmt-divider",
+	PTable: "plmt-table",
+	PTextField: "plmt-text-field",
+	PTextArea: "plmt-text-area",
+	PCheckbox: "plmt-checkbox",
+	PRadio: "plmt-radio",
+	PSelect: "plmt-select"
+};
+// src/templates/helpers.ts
+function w(e, t = {}, n, r = {}) {
+	return n === void 0 ? {
+		tag: e,
+		attrs: t,
+		styleVars: r
+	} : {
+		tag: e,
+		attrs: t,
+		styleVars: r,
+		children: n
+	};
+}
+function T(e, t) {
+	let n = String(e.href ?? "");
+	if (!n) return t;
+	let r = String(e.target ?? "_self");
+	return [w("a", {
+		href: n,
+		target: r,
+		rel: r === "_blank" ? "noopener noreferrer" : void 0,
+		"aria-description": String(e.description ?? "") || void 0
+	}, t)];
+}
+function E(e) {
+	return e.slice(1).replaceAll(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function D(e) {
+	return String(e.id ?? e.pageId ?? "");
+}
+function O(e) {
+	return {
+		style: e.style,
+		tabletStyle: e.tabletStyle,
+		mobileStyle: e.mobileStyle,
+		tabletLandscapeStyle: e.tabletLandscapeStyle,
+		mobileLandscapeStyle: e.mobileLandscapeStyle
+	};
+}
+function k(e, t, n) {
+	let r = e.style ?? {}, i = {
+		class: [t, ...n ? l(n, O(e)) : []].filter(Boolean).join(" "),
+		"data-plmt-id": D(e)
+	};
+	return typeof r.layout == "string" && (i["data-layout"] = r.layout), typeof r.backgroundType == "string" && (i["data-background"] = r.backgroundType), i;
+}
+function A(e, t) {
+	return {
+		attrs: k(t, C[e], e),
+		vars: S(a(e, t.style), E(e))
+	};
+}
+function j(e) {
+	return S(u({
+		backgroundColor: e.backgroundColor,
+		textColor: e.textColor,
+		textSize: e.textSize
+	}), "page");
+}
+// src/elements/page/template.ts
+function M(e, t) {
+	let n = e.props;
+	return w("main", {
+		class: C.PPage,
+		"data-plmt-id": String(n.pageId),
+		title: String(n.title ?? ""),
+		"data-url": String(n.url ?? "")
+	}, t?.children ?? [], j(n));
+}
+// src/elements/section/template.ts
+function N(e, t) {
+	let n = A(e.type, e.props);
+	return w("section", n.attrs, t?.children ?? [], n.vars);
+}
+// src/elements/container/template.ts
+function P(e, t) {
+	let n = A(e.type, e.props);
+	return w("div", n.attrs, t?.children ?? [], n.vars);
+}
+// src/elements/button/template.ts
+function F(e, t = "") {
+	let n = {
+		class: C.PIcon,
+		"data-name": e || void 0
+	};
+	return t.trim() ? (n.role = "img", n["aria-label"] = t) : n["aria-hidden"] = "true", w("span", n);
+}
+function I(e, t) {
+	let n = e.props, r = A(e.type, n), i = [];
+	n.startIcon && i.push(F(String(n.startIcon))), i.push(String(n.name ?? "")), n.endIcon && i.push(F(String(n.endIcon)));
+	let a = String(n.href ?? "");
+	if (a) {
+		let e = String(n.target ?? "_self");
+		return w("a", {
+			...r.attrs,
+			href: a,
+			target: e,
+			rel: e === "_blank" ? "noopener noreferrer" : void 0,
+			"aria-description": String(n.description ?? "") || void 0
+		}, i, r.vars);
+	}
+	return w("button", {
+		...r.attrs,
+		type: "button"
+	}, i, r.vars);
+}
+// src/elements/text/template.ts
+function L(e, t) {
+	let n = e.props, r = A(e.type, n);
+	return w("p", r.attrs, T(n, [String(n.text ?? "")]), r.vars);
+}
+// src/elements/rich-text/template.ts
+function R(e, t) {
+	let n = e.props, r = A(e.type, n);
+	return w("div", r.attrs, { html: m(String(n.text ?? "")) }, r.vars);
+}
+// src/elements/icon/template.ts
+function z(e, t) {
+	let n = e.props, r = A(e.type, n), i = String(n.label ?? ""), a = String(n.icon ?? ""), o = i.trim() ? {
+		role: "img",
+		"aria-label": i
+	} : { "aria-hidden": "true" }, s = T(n, []);
+	return w("span", {
+		...r.attrs,
+		"data-name": a || void 0,
+		...o
+	}, s.length ? s : void 0, r.vars);
+}
+// src/elements/image/template.ts
+function B(e, t) {
+	let n = e.props, r = A(e.type, n), i = w("img", {
+		class: String(n.href ?? "") ? void 0 : C.PImage,
+		src: String(n.src),
+		alt: String(n.alt ?? ""),
+		...String(n.href ?? "") ? {} : {
+			"data-plmt-id": r.attrs["data-plmt-id"],
+			"data-background": r.attrs["data-background"]
+		}
+	}, void 0, String(n.href ?? "") ? {} : r.vars), a = String(n.href ?? "");
+	if (!a) return i;
+	let o = String(n.target ?? "_self");
+	return w("a", {
+		class: C.PImage,
+		"data-plmt-id": r.attrs["data-plmt-id"],
+		"data-background": r.attrs["data-background"],
+		href: a,
+		target: o,
+		rel: o === "_blank" ? "noopener noreferrer" : void 0,
+		"aria-description": String(n.description ?? "") || void 0
+	}, [w("img", {
+		src: String(n.src),
+		alt: String(n.alt ?? "")
+	})], r.vars);
+}
+// src/elements/video/template.ts
+function V(e, t) {
+	let n = e.props;
+	if (!String(n.src ?? "")) return null;
+	let r = A(e.type, n);
+	return w("video", {
+		...r.attrs,
+		src: String(n.src),
+		title: String(n.title ?? ""),
+		controls: !0
+	}, void 0, r.vars);
+}
+// src/elements/list/template.ts
+function H(e, t) {
+	let n = e.props, r = A(e.type, n), i = n.items.map((e) => w("li", {}, [e.text]));
+	return w("ul", r.attrs, i, r.vars);
+}
+// src/elements/divider/template.ts
+function U(e, t) {
+	let n = e.props, r = A(e.type, n);
+	return w("hr", {
+		...r.attrs,
+		"data-size": String(n.size ?? "4")
+	}, void 0, r.vars);
+}
+// src/elements/table/template.ts
+function W(e, t) {
+	let n = e.props, r = A(e.type, n), i = n.headers.map((e) => w("th", {}, [e.text])), a = n.rows.map((e) => w("tr", {}, e.cells.map((e) => w("td", {}, [e]))));
+	return w("div", r.attrs, [w("table", {}, [w("thead", {}, [w("tr", {}, i)]), w("tbody", {}, a)])], r.vars);
+}
+// src/elements/text-field/template.ts
+function G(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n);
+	return w("div", r.attrs, [w("label", { for: i }, [String(n.label)]), w("input", {
+		id: i,
+		name: i,
+		placeholder: String(n.placeholder ?? "")
+	})], r.vars);
+}
+// src/elements/text-area/template.ts
+function K(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n);
+	return w("div", r.attrs, [w("label", { for: i }, [String(n.label)]), w("textarea", {
+		id: i,
+		name: i,
+		placeholder: String(n.placeholder ?? "")
+	})], r.vars);
+}
+// src/elements/checkbox/template.ts
+function q(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n);
+	return w("div", r.attrs, [w("label", {}, [w("input", {
+		type: "checkbox",
+		name: i,
+		checked: n.checked === !0 || void 0
+	}), String(n.label)])], r.vars);
+}
+// src/elements/radio/template.ts
+function J(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n), a = n.options.map((e) => w("label", {}, [w("input", {
+		type: "radio",
+		name: i,
+		value: e.text
+	}), e.text]));
+	return w("fieldset", r.attrs, [w("legend", {}, [String(n.legend)]), ...a], r.vars);
+}
+// src/elements/select/template.ts
+function Y(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n), a = n.options.map((e) => w("option", { value: e.text }, [e.text]));
+	return w("div", r.attrs, [w("label", { for: i }, [String(n.label)]), w("select", {
+		id: i,
+		name: i
+	}, a)], r.vars);
+}
+// src/templates/elementSpec.ts
+var X = /* @__PURE__ */ new Set([
+	"PPage",
+	"PSection",
+	"PContainer"
+]), Z = {
+	PPage: M,
+	PSection: N,
+	PContainer: P,
+	PButton: I,
+	PText: L,
+	PRichText: R,
+	PImage: B,
+	PVideo: V,
+	PList: H,
+	PIcon: z,
+	PDivider: U,
+	PTable: W,
+	PTextField: G,
+	PTextArea: K,
+	PCheckbox: q,
+	PRadio: J,
+	PSelect: Y
+};
+function Q(e, t) {
+	return Z[e.type](e, t);
+}
+function $(e) {
+	return X.has(e.type) ? Q(e, { children: (e.children ?? []).map($).filter(Boolean) }) : Q(e);
+}
+export { ee as COLOR_NAMES, t as OPACITY_STEPS, d as SPACING_TOKENS, n as TEXT_SIZE_TOKENS, E as cssPrefix, Q as elementSpec, p as escapeHtml, k as hostAttrs, c as isPaletteColor, T as linked, D as nodeId, j as pageStyleVars, u as pageTokensToVarValues, h as renderHtml, m as sanitizeRichTextHtml, w as spec, s as styleObjectToClasses, l as styleToClasses, S as styleToCssVariables, C as tags, g as toDom, $ as toElementTree, i as toPaletteColor, r as toSpacingToken, e as toTextSizeToken, a as unresolvedStyleForVars, A as withStyle };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@palmyit/elements",
-  "version": "0.1.3",
-  "description": "Palmyit plmt-* light-DOM web components for builder and published sites",
+  "version": "0.1.8",
+  "description": "Palmyit element definitions, semantic HTML templates, and CSS for builder and published sites",
   "private": false,
   "repository": {
     "type": "git",
@@ -18,25 +18,51 @@
     "test": "vitest run --exclude src/manifest.test.ts",
     "test:watch": "vitest",
     "test:manifest": "vitest run src/manifest.test.ts",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build",
     "prepublishOnly": "yarn build"
   },
   "exports": {
     ".": "./dist/plmt-elements.js",
+    "./definitions": {
+      "types": "./dist/definitions.d.ts",
+      "import": "./dist/definitions.js",
+      "default": "./dist/definitions.js"
+    },
+    "./templates": {
+      "types": "./dist/templates.d.ts",
+      "import": "./dist/templates.js",
+      "default": "./dist/templates.js"
+    },
     "./plmt-elements.css": "./dist/plmt-elements.css",
     "./tags.json": "./dist/tags.json",
     "./manifest.json": "./dist/manifest.json"
   },
-  "jsdelivr": "dist/plmt-elements.js",
-  "unpkg": "dist/plmt-elements.js",
-  "sideEffects": true,
+  "jsdelivr": "dist/plmt-elements.css",
+  "unpkg": "dist/plmt-elements.css",
+  "sideEffects": [
+    "./dist/plmt-elements.js",
+    "./dist/plmt-elements.css",
+    "**/*.css"
+  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "zod": "^4.6.5"
+  },
   "devDependencies": {
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/html-vite": "^10.6.0",
+    "@tailwindcss/vite": "^4.3.3",
     "happy-dom": "^20.0.10",
+    "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "~6.0.2",
     "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.0.2",
     "vitest": "^5.0.0"
   },
   "engines": {