@palmyit/elements 0.0.0-stage → 0.1.7

package/dist/templates.js

@@ -0,0 +1,269 @@
+// src/render/renderHtml.ts
+var e = /* @__PURE__ */ new Set([
+	"img",
+	"input",
+	"hr",
+	"br",
+	"meta",
+	"link"
+]);
+function t(e) {
+	return String(e).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
+}
+function n(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 r(n) {
+	if (typeof n == "string") return t(n);
+	let i = Object.entries(n.attrs).flatMap(([e, n]) => n === void 0 || n === !1 ? [] : n === !0 ? [e] : [`${e}="${t(n)}"`]), a = Object.entries(n.styleVars).flatMap(([e, t]) => t === void 0 ? [] : [`${e}:${t}`]).join(";");
+	a && i.push(`style="${t(a)}"`);
+	let o = `<${n.tag}${i.length ? ` ${i.join(" ")}` : ""}>`;
+	return e.has(n.tag) ? `${o.slice(0, -1)}>` : `${o}${Array.isArray(n.children) ? n.children.map(r).join("") : n.children?.html ?? ""}</${n.tag}>`;
+}
+// src/render/toDom.ts
+function i(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(i(n));
+	else e.children?.html && (t.innerHTML = e.children.html);
+	return t;
+}
+// src/render/styleToVars.ts
+var a = /^#[0-9A-Fa-f]{6}$/;
+function o(e) {
+	if (!a.test(e.hex) || !Number.isFinite(e.opacity)) return;
+	if (e.opacity === 100) return e.hex.toUpperCase();
+	let t = Math.min(100, Math.max(0, e.opacity)) / 100;
+	return `rgba(${Number.parseInt(e.hex.slice(1, 3), 16)}, ${Number.parseInt(e.hex.slice(3, 5), 16)}, ${Number.parseInt(e.hex.slice(5, 7), 16)}, ${t})`;
+}
+var s = {
+	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"
+}, c = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+function l(e, t) {
+	return t && typeof t == "object" && "hex" in t && "opacity" in t ? o(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 : [
+		"string",
+		"number",
+		"boolean"
+	].includes(typeof t) ? String(t) : void 0;
+}
+function u(e, t) {
+	return e ? Object.fromEntries(Object.entries(e).flatMap(([e, n]) => {
+		let r = l(e, n);
+		return r === void 0 ? [] : [[`--palmyit-${t}-${s[e] ?? c(e)}`, r]];
+	})) : {};
+}
+// src/render/tags.ts
+var d = {
+	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 f(e, t = {}, n, r = {}) {
+	return n === void 0 ? {
+		tag: e,
+		attrs: t,
+		styleVars: r
+	} : {
+		tag: e,
+		attrs: t,
+		styleVars: r,
+		children: n
+	};
+}
+function p(e, t) {
+	let n = String(e.href ?? "");
+	if (!n) return t;
+	let r = String(e.target ?? "_self");
+	return [f("a", {
+		href: n,
+		target: r,
+		rel: r === "_blank" ? "noopener noreferrer" : void 0,
+		"aria-description": String(e.description ?? "") || void 0
+	}, t)];
+}
+function m(e) {
+	return e.slice(1).replaceAll(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function h(e) {
+	return String(e.id ?? e.pageId ?? "");
+}
+function g(e, t) {
+	let n = e.style ?? {}, r = {
+		class: t,
+		"data-plmt-id": h(e)
+	};
+	return typeof n.layout == "string" && (r["data-layout"] = n.layout), typeof n.backgroundType == "string" && (r["data-background"] = n.backgroundType), r;
+}
+// src/templates/elementSpec.ts
+var _ = /* @__PURE__ */ new Set([
+	"PPage",
+	"PSection",
+	"PContainer"
+]);
+function v(e, t = "") {
+	let n = {
+		class: d.PIcon,
+		"data-name": e || void 0
+	};
+	return t.trim() ? (n.role = "img", n["aria-label"] = t) : n["aria-hidden"] = "true", f("span", n);
+}
+function y(e, t) {
+	return {
+		attrs: g(t, d[e]),
+		vars: u(t.style, m(e))
+	};
+}
+function b(e, t) {
+	let r = e.props, i = y(e.type, r);
+	if (e.type === "PVideo" && !String(r.src ?? "")) return null;
+	if (e.type === "PPage") return f("main", {
+		class: d.PPage,
+		"data-plmt-id": String(r.pageId),
+		title: String(r.title ?? ""),
+		"data-url": String(r.url ?? "")
+	}, t?.children ?? [], u({
+		backgroundColor: r.backgroundColor,
+		textColor: r.textColor,
+		textSize: r.textSize
+	}, "page"));
+	if (e.type === "PSection") return f("section", i.attrs, t?.children ?? [], i.vars);
+	if (e.type === "PContainer") return f("div", i.attrs, t?.children ?? [], i.vars);
+	if (e.type === "PButton") {
+		let e = [];
+		r.startIcon && e.push(v(String(r.startIcon))), e.push(String(r.name ?? "")), r.endIcon && e.push(v(String(r.endIcon)));
+		let t = String(r.href ?? "");
+		if (t) {
+			let n = String(r.target ?? "_self");
+			return f("a", {
+				...i.attrs,
+				href: t,
+				target: n,
+				rel: n === "_blank" ? "noopener noreferrer" : void 0,
+				"aria-description": String(r.description ?? "") || void 0
+			}, e, i.vars);
+		}
+		return f("button", {
+			...i.attrs,
+			type: "button"
+		}, e, i.vars);
+	}
+	if (e.type === "PText") return f("p", i.attrs, p(r, [String(r.text ?? "")]), i.vars);
+	if (e.type === "PRichText") return f("div", i.attrs, { html: n(String(r.text ?? "")) }, i.vars);
+	if (e.type === "PIcon") {
+		let e = String(r.label ?? ""), t = String(r.icon ?? ""), n = e.trim() ? {
+			role: "img",
+			"aria-label": e
+		} : { "aria-hidden": "true" }, a = p(r, []);
+		return f("span", {
+			...i.attrs,
+			"data-name": t || void 0,
+			...n
+		}, a.length ? a : void 0, i.vars);
+	}
+	if (e.type === "PImage") {
+		let e = f("img", {
+			class: String(r.href ?? "") ? void 0 : d.PImage,
+			src: String(r.src),
+			alt: String(r.alt ?? ""),
+			...String(r.href ?? "") ? {} : {
+				"data-plmt-id": i.attrs["data-plmt-id"],
+				"data-background": i.attrs["data-background"]
+			}
+		}, void 0, String(r.href ?? "") ? {} : i.vars), t = String(r.href ?? "");
+		if (!t) return e;
+		let n = String(r.target ?? "_self");
+		return f("a", {
+			class: d.PImage,
+			"data-plmt-id": i.attrs["data-plmt-id"],
+			"data-background": i.attrs["data-background"],
+			href: t,
+			target: n,
+			rel: n === "_blank" ? "noopener noreferrer" : void 0,
+			"aria-description": String(r.description ?? "") || void 0
+		}, [f("img", {
+			src: String(r.src),
+			alt: String(r.alt ?? "")
+		})], i.vars);
+	}
+	if (e.type === "PVideo") return f("video", {
+		...i.attrs,
+		src: String(r.src),
+		title: String(r.title ?? ""),
+		controls: !0
+	}, void 0, i.vars);
+	if (e.type === "PList") {
+		let e = r.items.map((e) => f("li", {}, [e.text]));
+		return f("ul", i.attrs, e, i.vars);
+	}
+	if (e.type === "PDivider") return f("hr", {
+		...i.attrs,
+		"data-size": String(r.size ?? "4")
+	}, void 0, i.vars);
+	if (e.type === "PTable") {
+		let e = r.headers.map((e) => f("th", {}, [e.text])), t = r.rows.map((e) => f("tr", {}, e.cells.map((e) => f("td", {}, [e]))));
+		return f("div", i.attrs, [f("table", {}, [f("thead", {}, [f("tr", {}, e)]), f("tbody", {}, t)])], i.vars);
+	}
+	let a = h(r);
+	if (e.type === "PTextField") return f("div", i.attrs, [f("label", { for: a }, [String(r.label)]), f("input", {
+		id: a,
+		name: a,
+		placeholder: String(r.placeholder ?? "")
+	})], i.vars);
+	if (e.type === "PTextArea") return f("div", i.attrs, [f("label", { for: a }, [String(r.label)]), f("textarea", {
+		id: a,
+		name: a,
+		placeholder: String(r.placeholder ?? "")
+	})], i.vars);
+	if (e.type === "PCheckbox") return f("div", i.attrs, [f("label", {}, [f("input", {
+		type: "checkbox",
+		name: a,
+		checked: r.checked === !0 || void 0
+	}), String(r.label)])], i.vars);
+	if (e.type === "PRadio") {
+		let e = r.options.map((e) => f("label", {}, [f("input", {
+			type: "radio",
+			name: a,
+			value: e.text
+		}), e.text]));
+		return f("fieldset", i.attrs, [f("legend", {}, [String(r.legend)]), ...e], i.vars);
+	}
+	if (e.type === "PSelect") {
+		let e = r.options.map((e) => f("option", { value: e.text }, [e.text]));
+		return f("div", i.attrs, [f("label", { for: a }, [String(r.label)]), f("select", {
+			id: a,
+			name: a
+		}, e)], i.vars);
+	}
+	return f("div", i.attrs, void 0, i.vars);
+}
+function x(e) {
+	return _.has(e.type) ? b(e, { children: (e.children ?? []).map(x).filter(Boolean) }) : b(e);
+}
+export { m as cssPrefix, b as elementSpec, t as escapeHtml, g as hostAttrs, p as linked, h as nodeId, r as renderHtml, n as sanitizeRichTextHtml, f as spec, u as styleToCssVariables, d as tags, i as toDom, x as toElementTree };

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@palmyit/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.7",
+  "description": "Palmyit element definitions, semantic HTML templates, and CSS for builder and published sites",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chimejet/palmyit-elements"
+  },
+  "license": "ISC",
+  "author": "Stephen <sndegwa.n@outlook.com> (https://stevndegwa.github.io/)",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b && vite build && node scripts/write-manifest.mjs",
+    "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.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",
+    "happy-dom": "^20.0.10",
+    "storybook": "^10.6.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=22.14.0"
+  }
+}