@aswin.dev/editor 0.7.0 → 0.7.2

package/dist/cdn/chunks/ModulePreviewCanvas-Drt8Evai.js

@@ -0,0 +1,109 @@
+import { C as e, D as t, I as n, P as r, R as i, ct as a, dt as o, f as s, g as c, h as l, m as u, v as d, z as f } from "./draggable-C-1_gch3.js";
+import { A as p, B as m, G as h, H as g, K as _, L as v, M as y, N as b, Pt as x, U as S, Ut as C, V as w, W as T, j as E, q as D, z as O } from "./features-DIBEo4xl.js";
+//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "tpl:w-full" }, A = { class: "tpl:flex tpl:gap-0" }, j = /* @__PURE__ */ e({
+	name: "PreviewSectionBlock",
+	__name: "PreviewSectionBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(e) {
+		let j = {
+			title: v,
+			paragraph: w,
+			image: T,
+			video: p,
+			button: x,
+			input: S,
+			divider: _,
+			social: b,
+			menu: g,
+			table: E,
+			spacer: y,
+			html: h,
+			custom: D
+		}, M = e, N = t(C, null), P = u(() => {
+			switch (M.block.columns) {
+				case "2": return ["50%", "50%"];
+				case "3": return [
+					"33.33%",
+					"33.33%",
+					"33.33%"
+				];
+				case "1-2": return ["33.33%", "66.67%"];
+				case "2-1": return ["66.67%", "33.33%"];
+				default: return ["100%"];
+			}
+		}), F = u(() => {
+			let e = P.value.length, t = [...M.block.children];
+			for (; t.length < e;) t.push([]);
+			return t.slice(0, e);
+		});
+		function I(e) {
+			return F.value[e] || [];
+		}
+		function L(e) {
+			return m(e, N, j);
+		}
+		return (e, t) => {
+			let u = i("PreviewSectionBlock", !0);
+			return r(), d("div", k, [l("div", A, [(r(!0), d(s, null, n(F.value, (e, t) => (r(), d("div", {
+				key: t,
+				style: o({ width: P.value[t] })
+			}, [(r(!0), d(s, null, n(I(t), (e) => (r(), d("div", {
+				key: e.id,
+				style: o(a(O)(e))
+			}, [e.type === "section" ? (r(), c(u, {
+				key: 0,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"])) : (r(), c(f(L(e)), {
+				key: 1,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
+		};
+	}
+}), M = {
+	class: "tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg",
+	style: {
+		"background-color": "var(--tpl-canvas-bg)",
+		"box-shadow": "var(--tpl-shadow-sm)"
+	}
+}, N = /* @__PURE__ */ e({
+	__name: "ModulePreviewCanvas",
+	props: { blocks: {} },
+	setup(e) {
+		let i = t(C), l = {
+			section: j,
+			title: v,
+			paragraph: w,
+			image: T,
+			video: p,
+			button: x,
+			input: S,
+			divider: _,
+			social: b,
+			menu: g,
+			table: E,
+			spacer: y,
+			html: h,
+			custom: D
+		};
+		function u(e) {
+			return m(e, i, l);
+		}
+		return (t, i) => (r(), d("div", M, [(r(!0), d(s, null, n(e.blocks, (e) => (r(), d("div", {
+			key: e.id,
+			style: o(a(O)(e))
+		}, [(r(), c(f(u(e)), {
+			block: e,
+			viewport: "desktop"
+		}, null, 8, ["block"]))], 4))), 128))]));
+	}
+});
+//#endregion
+export { N as default };
+
+//# sourceMappingURL=ModulePreviewCanvas-Drt8Evai.js.map

package/dist/cdn/chunks/ModulePreviewCanvas-Drt8Evai.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModulePreviewCanvas-Drt8Evai.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/cloud/components/ModulePreviewCanvas.vue","../../../src/cloud/components/ModulePreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport InputBlock from \"./InputBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block, SectionBlock as SectionBlockType } from \"@aswin.dev/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  input: InputBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport InputBlock from \"./InputBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block, SectionBlock as SectionBlockType } from \"@aswin.dev/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  input: InputBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport InputBlock from \"../../components/blocks/InputBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  input: InputBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    style=\"\n      background-color: var(--tpl-canvas-bg);\n      box-shadow: var(--tpl-shadow-sm);\n    \"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport InputBlock from \"../../components/blocks/InputBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  input: InputBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    style=\"\n      background-color: var(--tpl-canvas-bg);\n      box-shadow: var(--tpl-shadow-sm);\n    \"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAsBA,IAAM,IAAsD;GAC1D,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACT,EAEK,IAAQ,GAOR,IAAgB,EAAO,GAAoB,KAAK,EAEhD,IAAe,QAAe;AAClC,WAAQ,EAAM,MAAM,SAApB;IACE,KAAK,IACH,QAAO,CAAC,OAAO,MAAM;IACvB,KAAK,IACH,QAAO;KAAC;KAAU;KAAU;KAAS;IACvC,KAAK,MACH,QAAO,CAAC,UAAU,SAAS;IAC7B,KAAK,MACH,QAAO,CAAC,UAAU,SAAS;IAC7B,QACE,QAAO,CAAC,OAAO;;IAEnB,EAEI,IAAU,QAAe;GAC7B,IAAM,IAAQ,EAAa,MAAM,QAC3B,IAAW,CAAC,GAAG,EAAM,MAAM,SAAS;AAC1C,UAAO,EAAS,SAAS,GACvB,GAAS,KAAK,EAAE,CAAC;AAEnB,UAAO,EAAS,MAAM,GAAG,EAAM;IAC/B;EAEF,SAAS,EAAgB,GAA2B;AAClD,UAAO,EAAQ,MAAM,MAAa,EAAE;;EAGtC,SAAS,EAAkB,GAAgC;AACzD,UAAO,EAAsB,GAAO,GAAe,EAAyB;;;;eAK5E,EA2BM,OA3BN,GA2BM,CA1BJ,EAyBM,OAzBN,GAyBM,EAAA,EAAA,GAAA,EAxBJ,EAuBM,GAAA,MAAA,EAtBoB,EAAA,QAAhB,GAAG,YADb,EAuBM,OAAA;IArBH,KAAK;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,MAAa,IAAQ,CAAA;eAEtC,EAiBM,GAAA,MAAA,EAhBiB,EAAgB,EAAQ,GAAtC,YADT,EAiBM,OAAA;IAfH,KAAK,EAAW;IAChB,OAAK,EAAE,EAAA,EAAoB,CAAC,EAAU,CAAA;OAI/B,EAAW,SAAI,aAAA,GAAA,EADvB,EAIE,GAAA;;IAFC,OAAO;IACR,UAAS;mCAEX,EAKE,EAJK,EAAkB,EAAU,CAAA,EAAA;;IAEhC,OAAO;IACR,UAAS;;;;;;;;;;;;;;EE5ErB,IAAM,IAAgB,EAAO,EAAmB,EAE1C,IAAuD;GAC3D,SAAS;GACT,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACT;EAED,SAAS,EAAkB,GAAgC;AACzD,UAAO,EAAsB,GAAO,GAAe,EAA0B;;yBAK7E,EAkBM,OAlBN,GAkBM,EAAA,EAAA,GAAA,EAXJ,EAUM,GAAA,MAAA,EATY,EAAA,SAAT,YADT,EAUM,OAAA;GARH,KAAK,EAAM;GACX,OAAK,EAAE,EAAA,EAAoB,CAAC,EAAK,CAAA;YAElC,EAIE,EAHK,EAAkB,EAAK,CAAA,EAAA;GACpB;GACR,UAAS"}

package/dist/cdn/chunks/{NumberWithSuffix-CE3NrZhH.js → NumberWithSuffix-Ty1bp9vB.js}

@@ -1,10 +1,10 @@
-import { $ as e, F as t, H as n, I as r, N as i, R as a, S as o, _ as s, at as c, b as l, ct as u, d, g as f, h as p, l as m, lt as h, m as g, n as ee, p as _, st as v } from "./draggable-Bcb86AsV.js";
-import { Nt as y, tn as te } from "./features-DEMb13KS.js";
-import { h as b, i as x, m as S, p as C, u as ne } from "./styleConstants-DP1VOca8.js";
+import { C as e, I as t, L as n, P as r, W as i, _ as a, ct as o, dt as s, f as c, ft as l, g as u, h as d, m as f, n as p, tt as m, u as h, ut as g, v as _, x as ee, z as v } from "./draggable-C-1_gch3.js";
+import { Lt as y, ln as te } from "./features-DIBEo4xl.js";
+import { h as b, i as x, m as S, p as C, u as ne } from "./styleConstants-PgmvNBzQ.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
 var w = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, T = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
 360 / (Math.PI * 2);
-var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+var re = (e) => A(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
 	r: parseInt(e[0] + e[0], 16),
 	g: parseInt(e[1] + e[1], 16),
 	b: parseInt(e[2] + e[2], 16),
@@ -14,7 +14,7 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 	g: parseInt(e.substring(2, 4), 16),
 	b: parseInt(e.substring(4, 6), 16),
 	a: e.length === 8 ? T(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
-}), D = (e) => ae(k(e)), ie = ({ h: e, s: t, v: n, a: r }) => {
+}), D = (e) => oe(ae(e)), ie = ({ h: e, s: t, v: n, a: r }) => {
 	let i = (200 - t) * n / 100;
 	return {
 		h: T(e),
@@ -25,7 +25,7 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 }, O = (e) => {
 	let { h: t, s: n, l: r } = ie(e);
 	return `hsl(${t}, ${n}%, ${r}%)`;
-}, k = ({ h: e, s: t, v: n, a: r }) => {
+}, ae = ({ h: e, s: t, v: n, a: r }) => {
 	e = e / 360 * 6, t /= 100, n /= 100;
 	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
 	return {
@@ -55,13 +55,13 @@ var re = (e) => oe(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.le
 		][c] * 255),
 		a: T(r, 2)
 	};
-}, A = (e) => {
+}, k = (e) => {
 	let t = e.toString(16);
 	return t.length < 2 ? "0" + t : t;
-}, ae = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? A(T(r * 255)) : "";
-	return "#" + A(e) + A(t) + A(n) + i;
 }, oe = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? k(T(r * 255)) : "";
+	return "#" + k(e) + k(t) + k(n) + i;
+}, A = ({ r: e, g: t, b: n, a: r }) => {
 	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
 	return {
 		h: T(60 * (o < 0 ? o + 6 : o)),
@@ -250,7 +250,7 @@ var ue = [
 	"placeholder",
 	"disabled",
 	"aria-label"
-], fe = ["color", "aria-label"], pe = /* @__PURE__ */ o({
+], fe = ["color", "aria-label"], pe = /* @__PURE__ */ e({
 	__name: "ColorPicker",
 	props: {
 		modelValue: {},
@@ -266,14 +266,14 @@ var ue = [
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(t, { emit: r }) {
-		let a = t, o = r, { t: d } = y(), p = e(!1), h = e(), b = e();
-		te(h, () => {
-			p.value = !1;
+	setup(e, { emit: t }) {
+		let n = e, c = t, { t: l } = y(), u = m(!1), v = m(), b = m();
+		te(v, () => {
+			u.value = !1;
 		}, { ignore: [b] });
-		let x = _({
-			get: () => a.modelValue || "#000000",
-			set: (e) => o("update:modelValue", e)
+		let x = f({
+			get: () => n.modelValue || "#000000",
+			set: (e) => c("update:modelValue", e)
 		});
 		function S(e) {
 			x.value = e.detail.value;
@@ -281,36 +281,36 @@ var ue = [
 		function C(e) {
 			x.value = e.target.value;
 		}
-		return (e, r) => (i(), s("div", { class: v(["tpl:flex tpl:gap-2 tpl:relative", t.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
-			g("button", {
+		return (t, n) => (r(), _("div", { class: g(["tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0", e.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
+			d("button", {
 				ref_key: "swatchRef",
 				ref: b,
 				type: "button",
-				disabled: t.disabled,
-				"aria-label": c(d).colorPicker.pickColor,
-				"aria-expanded": p.value,
-				class: v([
+				disabled: e.disabled,
+				"aria-label": o(l).colorPicker.pickColor,
+				"aria-expanded": u.value,
+				class: g([
 					"tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
-					t.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					p.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !t.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
-					t.size === "large" ? "tpl:size-12" : "tpl:size-10"
+					e.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
+					u.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !e.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
+					e.size === "large" ? "tpl:size-12" : "tpl:size-10"
 				]),
-				onClick: r[0] ||= (e) => !t.disabled && (p.value = !p.value)
-			}, [g("span", {
+				onClick: n[0] ||= (t) => !e.disabled && (u.value = !u.value)
+			}, [d("span", {
 				class: "tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]",
-				style: u({ backgroundColor: x.value })
+				style: s({ backgroundColor: x.value })
 			}, null, 4)], 10, ue),
-			t.swatchOnly ? f("", !0) : (i(), s("input", {
+			e.swatchOnly ? a("", !0) : (r(), _("input", {
 				key: 0,
 				type: "text",
-				class: v(c(ne)),
-				value: t.modelValue,
-				placeholder: t.placeholder,
-				disabled: t.disabled,
-				"aria-label": c(d).colorPicker.hexValue,
+				class: g(o(ne)),
+				value: e.modelValue,
+				placeholder: e.placeholder,
+				disabled: e.disabled,
+				"aria-label": o(l).colorPicker.hexValue,
 				onInput: C
 			}, null, 42, de)),
-			l(ee, {
+			ee(p, {
 				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
 				"enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
@@ -318,17 +318,17 @@ var ue = [
 				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
 				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
 			}, {
-				default: n(() => [p.value ? (i(), s("div", {
+				default: i(() => [u.value ? (r(), _("div", {
 					key: 0,
 					ref_key: "popoverRef",
-					ref: h,
+					ref: v,
 					class: "tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg"
-				}, [g("hex-color-picker", {
+				}, [d("hex-color-picker", {
 					color: x.value,
-					"aria-label": c(d).colorPicker.pickColor,
+					"aria-label": o(l).colorPicker.pickColor,
 					onColorChanged: S,
-					onKeydown: r[1] ||= m((e) => p.value = !1, ["escape"])
-				}, null, 40, fe)], 512)) : f("", !0)]),
+					onKeydown: n[1] ||= h((e) => u.value = !1, ["escape"])
+				}, null, 40, fe)], 512)) : a("", !0)]),
 				_: 1
 			})
 		], 2));
@@ -338,7 +338,7 @@ var ue = [
 	"aria-label",
 	"title",
 	"onClick"
-], he = { key: 1 }, ge = /* @__PURE__ */ o({
+], he = { key: 1 }, ge = /* @__PURE__ */ e({
 	__name: "SlidingPillSelect",
 	props: {
 		options: {},
@@ -346,57 +346,57 @@ var ue = [
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: n }) {
-		let r = e, o = n, c = _(() => r.options.findIndex((e) => e.value === r.modelValue)), l = _(() => `translateX(${Math.max(c.value, 0) * 100}%)`);
-		return (n, r) => (i(), s("div", {
+		let i = e, o = n, d = f(() => i.options.findIndex((e) => e.value === i.modelValue)), p = f(() => `translateX(${Math.max(d.value, 0) * 100}%)`);
+		return (n, i) => (r(), _("div", {
 			role: "radiogroup",
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: u({
+			style: s({
 				gridTemplateColumns: `repeat(${e.options.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
-		}, [c.value >= 0 ? (i(), s("div", {
+		}, [d.value >= 0 ? (r(), _("div", {
 			key: 0,
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: u({
+			style: s({
 				left: "4px",
 				width: `calc((100% - 8px) / ${e.options.length})`,
-				transform: l.value,
+				transform: p.value,
 				backgroundColor: "var(--tpl-bg)",
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4)) : f("", !0), (i(!0), s(d, null, t(e.options, (t) => (i(), s("button", {
+		}, null, 4)) : a("", !0), (r(!0), _(c, null, t(e.options, (t) => (r(), _("button", {
 			key: t.value,
 			role: "radio",
 			"aria-checked": e.modelValue === t.value,
 			"aria-label": t.label,
 			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium",
-			style: u({
+			style: s({
 				color: e.modelValue === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
 			title: t.label,
 			onClick: (e) => o("update:modelValue", t.value)
-		}, [t.icon ? (i(), p(a(t.icon), {
+		}, [t.icon ? (r(), u(v(t.icon), {
 			key: 0,
 			size: 14,
 			"stroke-width": 2
-		})) : (i(), s("span", he, h(t.label), 1))], 12, me))), 128))], 4));
+		})) : (r(), _("span", he, l(t.label), 1))], 12, me))), 128))], 4));
 	}
-}), _e = { class: "tpl:mb-3.5" }, ve = /* @__PURE__ */ o({
+}), _e = { class: "tpl:mb-3.5" }, ve = /* @__PURE__ */ e({
 	__name: "FieldRow",
 	props: { label: {} },
 	setup(e) {
-		return (t, n) => (i(), s("div", _e, [e.label ? (i(), s("label", {
+		return (t, i) => (r(), _("div", _e, [e.label ? (r(), _("label", {
 			key: 0,
-			class: v(c(b))
-		}, h(e.label), 3)) : f("", !0), r(t.$slots, "default")]));
+			class: g(o(b))
+		}, l(e.label), 3)) : a("", !0), n(t.$slots, "default")]));
 	}
 }), ye = { class: "tpl:flex tpl:items-stretch" }, be = [
 	"value",
 	"min",
 	"max"
-], xe = /* @__PURE__ */ o({
+], xe = /* @__PURE__ */ e({
 	__name: "NumberWithSuffix",
 	props: {
 		modelValue: {},
@@ -407,17 +407,17 @@ var ue = [
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
 		let n = t;
-		return (t, r) => (i(), s("div", ye, [g("input", {
+		return (t, i) => (r(), _("div", ye, [d("input", {
 			type: "number",
-			class: v(c(C)),
+			class: g(o(C)),
 			value: e.modelValue,
 			min: e.min,
 			max: e.max,
-			onInput: r[0] ||= (e) => n("update:modelValue", Number(e.target.value))
-		}, null, 42, be), g("span", { class: v(c(S)) }, h(e.suffix), 3)]));
+			onInput: i[0] ||= (e) => n("update:modelValue", Number(e.target.value))
+		}, null, 42, be), d("span", { class: g(o(S)) }, l(e.suffix), 3)]));
 	}
 });
 //#endregion
 export { pe as i, ve as n, ge as r, xe as t };
 
-//# sourceMappingURL=NumberWithSuffix-CE3NrZhH.js.map
+//# sourceMappingURL=NumberWithSuffix-Ty1bp9vB.js.map