@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/display/SpriteDisplay.js

@@ -0,0 +1,7 @@
+import e from "./SpriteDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/SpriteDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=SpriteDisplay.js.map

package/dist/components/compositions/elements/display/SpriteDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/SpriteDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * STUB props-driven sprite display.\n *\n * Pending decisions on sprite sheet format (CSS background, SVG\n * symbol, animation timeline).\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface SpriteDisplayProps {\n  label?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<SpriteDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <Card\n    :class=\"rootClass\"\n    data-testid=\"sprite-display\"\n  >\n    <CardHeader class=\"flex flex-row items-center gap-3 p-4\">\n      <Construction class=\"size-5 text-muted-foreground\" />\n      <div class=\"flex-1\">\n        <CardTitle class=\"text-base\">\n          {{ label ?? \"Sprite\" }}\n        </CardTitle>\n        <CardDescription>\n          Coming soon — sprite playback is not yet implemented.\n        </CardDescription>\n      </div>\n      <Badge variant=\"secondary\">\n        sprite\n      </Badge>\n    </CardHeader>\n    <CardContent class=\"p-4 pt-0 text-sm text-muted-foreground\">\n      Sprite sheet format TBD.\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/SpriteDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import e from "../../../ui/badge/Badge.js";
+import "../../../ui/badge/index.js";
+import t from "../../../ui/card/Card.js";
+import n from "../../../ui/card/CardContent.js";
+import r from "../../../ui/card/CardDescription.js";
+import i from "../../../ui/card/CardHeader.js";
+import a from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import { computed as o, createBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { Construction as _ } from "@lucide/vue";
+//#region src/components/compositions/elements/display/SpriteDisplay.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "flex-1" }, y = /* @__PURE__ */ d({
+	__name: "SpriteDisplay",
+	props: {
+		label: {},
+		classList: {}
+	},
+	setup(d) {
+		let y = d, b = o(() => {
+			let e = y.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (o, y) => (p(), s(h(t), {
+			class: f(b.value),
+			"data-testid": "sprite-display"
+		}, {
+			default: g(() => [u(h(i), { class: "flex flex-row items-center gap-3 p-4" }, {
+				default: g(() => [
+					u(h(_), { class: "size-5 text-muted-foreground" }),
+					c("div", v, [u(h(a), { class: "text-base" }, {
+						default: g(() => [l(m(d.label ?? "Sprite"), 1)]),
+						_: 1
+					}), u(h(r), null, {
+						default: g(() => [...y[0] ||= [l(" Coming soon — sprite playback is not yet implemented. ", -1)]]),
+						_: 1
+					})]),
+					u(h(e), { variant: "secondary" }, {
+						default: g(() => [...y[1] ||= [l(" sprite ", -1)]]),
+						_: 1
+					})
+				]),
+				_: 1
+			}), u(h(n), { class: "p-4 pt-0 text-sm text-muted-foreground" }, {
+				default: g(() => [...y[2] ||= [l(" Sprite sheet format TBD. ", -1)]]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=SpriteDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/SpriteDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/SpriteDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * STUB props-driven sprite display.\n *\n * Pending decisions on sprite sheet format (CSS background, SVG\n * symbol, animation timeline).\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface SpriteDisplayProps {\n  label?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<SpriteDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <Card\n    :class=\"rootClass\"\n    data-testid=\"sprite-display\"\n  >\n    <CardHeader class=\"flex flex-row items-center gap-3 p-4\">\n      <Construction class=\"size-5 text-muted-foreground\" />\n      <div class=\"flex-1\">\n        <CardTitle class=\"text-base\">\n          {{ label ?? \"Sprite\" }}\n        </CardTitle>\n        <CardDescription>\n          Coming soon — sprite playback is not yet implemented.\n        </CardDescription>\n      </div>\n      <Badge variant=\"secondary\">\n        sprite\n      </Badge>\n    </CardHeader>\n    <CardContent class=\"p-4 pt-0 text-sm text-muted-foreground\">\n      Sprite sheet format TBD.\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAER,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAqBO,EAAA,CAAA,GAAA;GApBJ,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;;oBAeC,CAbb,EAaa,EAAA,CAAA,GAAA,EAbD,OAAM,uCAAsC,GAAA;qBACD;KAArD,EAAqD,EAAA,CAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;KAClD,EAOM,OAPN,GAOM,CANJ,EAEY,EAAA,CAAA,GAAA,EAFD,OAAM,YAAW,GAAA;uBACH,CAAA,EAAA,EAApB,EAAA,SAAK,QAAA,GAAA,CAAA,CAAA,CAAA;;SAEV,EAEkB,EAAA,CAAA,GAAA,MAAA;uBAAlB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFiB,2DAEjB,EAAA,CAAA,CAAA,CAAA;;;KAEF,EAEQ,EAAA,CAAA,GAAA,EAFD,SAAQ,YAAW,GAAA;uBAE1B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF2B,YAE3B,EAAA,CAAA,CAAA,CAAA;;;;;OAEF,EAEc,EAAA,CAAA,GAAA,EAFD,OAAM,yCAAwC,GAAA;qBAE3D,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF4D,8BAE5D,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/display/TypeDisplay.js

@@ -0,0 +1,7 @@
+import e from "./TypeDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/TypeDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TypeDisplay.js.map

package/dist/components/compositions/elements/display/TypeDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/TypeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven typography display.\n *\n * The `contentType` sub-style selects the semantic tag and Tailwind\n * classes (heading-1 .. heading-6, paragraph, lead, small, caption,\n * code, quote).\n *\n *   <TypeDisplay value=\"Hello, world\" content-type=\"heading-1\" />\n */\nimport { computed, h, type Component } from \"vue\"\nimport type { DisplayContentType } from \"@/definitions/elements/DisplayElement\"\n\nexport interface TypeDisplayProps {\n  value?: string | number | null\n  contentType?: DisplayContentType\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<TypeDisplayProps>(), {\n  contentType: \"paragraph\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\ninterface VariantSpec {\n  tag: string\n  classes: string\n}\n\nconst VARIANTS: Record<DisplayContentType, VariantSpec> = {\n  \"heading-1\": { tag: \"h1\", classes: \"text-4xl font-bold tracking-tight\" },\n  \"heading-2\": { tag: \"h2\", classes: \"text-3xl font-semibold tracking-tight\" },\n  \"heading-3\": { tag: \"h3\", classes: \"text-2xl font-semibold\" },\n  \"heading-4\": { tag: \"h4\", classes: \"text-xl font-semibold\" },\n  \"heading-5\": { tag: \"h5\", classes: \"text-lg font-semibold\" },\n  \"heading-6\": { tag: \"h6\", classes: \"text-base font-semibold\" },\n  paragraph: { tag: \"p\", classes: \"leading-7\" },\n  lead: { tag: \"p\", classes: \"text-lg text-muted-foreground\" },\n  small: { tag: \"small\", classes: \"text-xs\" },\n  caption: { tag: \"span\", classes: \"text-xs text-muted-foreground\" },\n  code: { tag: \"code\", classes: \"font-mono bg-muted px-1 rounded text-sm\" },\n  quote: { tag: \"blockquote\", classes: \"border-l-4 pl-4 italic text-muted-foreground\" },\n}\n\nconst variant = computed<VariantSpec>(() => {\n  return VARIANTS[props.contentType] ?? VARIANTS.paragraph\n})\n\nconst Rendered: Component = {\n  render() {\n    return h(\n      variant.value.tag,\n      {\n        class: [variant.value.classes, rootClass.value].filter(Boolean).join(\" \"),\n        \"data-testid\": \"type-display\",\n        \"data-content-type\": props.contentType,\n      },\n      content.value,\n    )\n  },\n}\n</script>\n\n<template>\n  <Rendered />\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/TypeDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,76 @@
+import { computed as e, createBlock as t, defineComponent as n, h as r, openBlock as i } from "vue";
+//#region src/components/compositions/elements/display/TypeDisplay.vue?vue&type=script&setup=true&lang.ts
+var a = /* @__PURE__ */ n({
+	__name: "TypeDisplay",
+	props: {
+		value: {},
+		contentType: { default: "paragraph" },
+		classList: {}
+	},
+	setup(n) {
+		let a = n, o = e(() => a.value === void 0 || a.value === null ? "" : String(a.value)), s = e(() => {
+			let e = a.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), c = {
+			"heading-1": {
+				tag: "h1",
+				classes: "text-4xl font-bold tracking-tight"
+			},
+			"heading-2": {
+				tag: "h2",
+				classes: "text-3xl font-semibold tracking-tight"
+			},
+			"heading-3": {
+				tag: "h3",
+				classes: "text-2xl font-semibold"
+			},
+			"heading-4": {
+				tag: "h4",
+				classes: "text-xl font-semibold"
+			},
+			"heading-5": {
+				tag: "h5",
+				classes: "text-lg font-semibold"
+			},
+			"heading-6": {
+				tag: "h6",
+				classes: "text-base font-semibold"
+			},
+			paragraph: {
+				tag: "p",
+				classes: "leading-7"
+			},
+			lead: {
+				tag: "p",
+				classes: "text-lg text-muted-foreground"
+			},
+			small: {
+				tag: "small",
+				classes: "text-xs"
+			},
+			caption: {
+				tag: "span",
+				classes: "text-xs text-muted-foreground"
+			},
+			code: {
+				tag: "code",
+				classes: "font-mono bg-muted px-1 rounded text-sm"
+			},
+			quote: {
+				tag: "blockquote",
+				classes: "border-l-4 pl-4 italic text-muted-foreground"
+			}
+		}, l = e(() => c[a.contentType] ?? c.paragraph), u = { render() {
+			return r(l.value.tag, {
+				class: [l.value.classes, s.value].filter(Boolean).join(" "),
+				"data-testid": "type-display",
+				"data-content-type": a.contentType
+			}, o.value);
+		} };
+		return (e, n) => (i(), t(u));
+	}
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=TypeDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/TypeDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/TypeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven typography display.\n *\n * The `contentType` sub-style selects the semantic tag and Tailwind\n * classes (heading-1 .. heading-6, paragraph, lead, small, caption,\n * code, quote).\n *\n *   <TypeDisplay value=\"Hello, world\" content-type=\"heading-1\" />\n */\nimport { computed, h, type Component } from \"vue\"\nimport type { DisplayContentType } from \"@/definitions/elements/DisplayElement\"\n\nexport interface TypeDisplayProps {\n  value?: string | number | null\n  contentType?: DisplayContentType\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<TypeDisplayProps>(), {\n  contentType: \"paragraph\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\ninterface VariantSpec {\n  tag: string\n  classes: string\n}\n\nconst VARIANTS: Record<DisplayContentType, VariantSpec> = {\n  \"heading-1\": { tag: \"h1\", classes: \"text-4xl font-bold tracking-tight\" },\n  \"heading-2\": { tag: \"h2\", classes: \"text-3xl font-semibold tracking-tight\" },\n  \"heading-3\": { tag: \"h3\", classes: \"text-2xl font-semibold\" },\n  \"heading-4\": { tag: \"h4\", classes: \"text-xl font-semibold\" },\n  \"heading-5\": { tag: \"h5\", classes: \"text-lg font-semibold\" },\n  \"heading-6\": { tag: \"h6\", classes: \"text-base font-semibold\" },\n  paragraph: { tag: \"p\", classes: \"leading-7\" },\n  lead: { tag: \"p\", classes: \"text-lg text-muted-foreground\" },\n  small: { tag: \"small\", classes: \"text-xs\" },\n  caption: { tag: \"span\", classes: \"text-xs text-muted-foreground\" },\n  code: { tag: \"code\", classes: \"font-mono bg-muted px-1 rounded text-sm\" },\n  quote: { tag: \"blockquote\", classes: \"border-l-4 pl-4 italic text-muted-foreground\" },\n}\n\nconst variant = computed<VariantSpec>(() => {\n  return VARIANTS[props.contentType] ?? VARIANTS.paragraph\n})\n\nconst Rendered: Component = {\n  render() {\n    return h(\n      variant.value.tag,\n      {\n        class: [variant.value.classes, rootClass.value].filter(Boolean).join(\" \"),\n        \"data-testid\": \"type-display\",\n        \"data-content-type\": props.contentType,\n      },\n      content.value,\n    )\n  },\n}\n</script>\n\n<template>\n  <Rendered />\n</template>\n"],"mappings":";;;;;;;;;;EAmBA,IAAM,IAAQ,GAIR,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAOK,IAAoD;GACxD,aAAa;IAAE,KAAK;IAAM,SAAS;GAAoC;GACvE,aAAa;IAAE,KAAK;IAAM,SAAS;GAAwC;GAC3E,aAAa;IAAE,KAAK;IAAM,SAAS;GAAyB;GAC5D,aAAa;IAAE,KAAK;IAAM,SAAS;GAAwB;GAC3D,aAAa;IAAE,KAAK;IAAM,SAAS;GAAwB;GAC3D,aAAa;IAAE,KAAK;IAAM,SAAS;GAA0B;GAC7D,WAAW;IAAE,KAAK;IAAK,SAAS;GAAY;GAC5C,MAAM;IAAE,KAAK;IAAK,SAAS;GAAgC;GAC3D,OAAO;IAAE,KAAK;IAAS,SAAS;GAAU;GAC1C,SAAS;IAAE,KAAK;IAAQ,SAAS;GAAgC;GACjE,MAAM;IAAE,KAAK;IAAQ,SAAS;GAA0C;GACxE,OAAO;IAAE,KAAK;IAAc,SAAS;GAA+C;EACtF,GAEM,IAAU,QACP,EAAS,EAAM,gBAAgB,EAAS,SAChD,GAEK,IAAsB,EAC1B,SAAS;GACP,OAAO,EACL,EAAQ,MAAM,KACd;IACE,OAAO,CAAC,EAAQ,MAAM,SAAS,EAAU,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;IACxE,eAAe;IACf,qBAAqB,EAAM;GAC7B,GACA,EAAQ,KACV;EACF,EACF;yBAIE,EAAY,CAAA"}

package/dist/components/compositions/elements/display/VideoPlayerDisplay.js

@@ -0,0 +1,7 @@
+import e from "./VideoPlayerDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/VideoPlayerDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VideoPlayerDisplay.js.map

package/dist/components/compositions/elements/display/VideoPlayerDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/VideoPlayerDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven video display.\n *\n * Renders a native HTML5 `<video controls>` player. Pass `autoplay`,\n * `loop`, and `muted` to enable the corresponding behaviours.\n */\nimport { computed } from \"vue\"\n\nexport interface VideoPlayerDisplayProps {\n  src?: string\n  autoplay?: boolean\n  loop?: boolean\n  muted?: boolean\n  classList?: string[] | string\n}\n\nconst props = defineProps<VideoPlayerDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <div\n    class=\"w-full\"\n    :class=\"rootClass\"\n    data-testid=\"video-display\"\n  >\n    <video\n      v-if=\"src\"\n      controls\n      :src=\"src\"\n      :autoplay=\"autoplay || undefined\"\n      :loop=\"loop || undefined\"\n      :muted=\"muted || undefined\"\n      class=\"h-auto w-full rounded border\"\n      preload=\"metadata\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/VideoPlayerDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
+//#region src/components/compositions/elements/display/VideoPlayerDisplay.vue?vue&type=script&setup=true&lang.ts
+var o = [
+	"src",
+	"autoplay",
+	"loop",
+	"muted"
+], s = /* @__PURE__ */ r({
+	__name: "VideoPlayerDisplay",
+	props: {
+		src: {},
+		autoplay: { type: Boolean },
+		loop: { type: Boolean },
+		muted: { type: Boolean },
+		classList: {}
+	},
+	setup(r) {
+		let s = r, c = e(() => {
+			let e = s.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (e, s) => (a(), n("div", {
+			class: i(["w-full", c.value]),
+			"data-testid": "video-display"
+		}, [r.src ? (a(), n("video", {
+			key: 0,
+			controls: "",
+			src: r.src,
+			autoplay: r.autoplay || void 0,
+			loop: r.loop || void 0,
+			muted: r.muted || void 0,
+			class: "h-auto w-full rounded border",
+			preload: "metadata"
+		}, null, 8, o)) : t("", !0)], 2));
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=VideoPlayerDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/VideoPlayerDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/VideoPlayerDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven video display.\n *\n * Renders a native HTML5 `<video controls>` player. Pass `autoplay`,\n * `loop`, and `muted` to enable the corresponding behaviours.\n */\nimport { computed } from \"vue\"\n\nexport interface VideoPlayerDisplayProps {\n  src?: string\n  autoplay?: boolean\n  loop?: boolean\n  muted?: boolean\n  classList?: string[] | string\n}\n\nconst props = defineProps<VideoPlayerDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <div\n    class=\"w-full\"\n    :class=\"rootClass\"\n    data-testid=\"video-display\"\n  >\n    <video\n      v-if=\"src\"\n      controls\n      :src=\"src\"\n      :autoplay=\"autoplay || undefined\"\n      :loop=\"loop || undefined\"\n      :muted=\"muted || undefined\"\n      class=\"h-auto w-full rounded border\"\n      preload=\"metadata\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAER,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAeM,OAAA;GAdJ,OAAK,EAAA,CAAC,UACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAGJ,EAAA,OAAA,EAAA,GADR,EASE,SAAA;;GAPA,UAAA;GACC,KAAK,EAAA;GACL,UAAU,EAAA,YAAY,KAAA;GACtB,MAAM,EAAA,QAAQ,KAAA;GACd,OAAO,EAAA,SAAS,KAAA;GACjB,OAAM;GACN,SAAQ"}

package/dist/components/compositions/elements/editor/CodeEditor.js

@@ -0,0 +1,9 @@
+import e from "./CodeEditor.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+import t from "../../../../_virtual/_plugin-vue_export-helper.js";
+//#region src/components/compositions/elements/editor/CodeEditor.vue
+var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-fe7f3ecb"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/components/compositions/elements/editor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","names":[],"sources":["../../../../../src/components/compositions/elements/editor/CodeEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { useDark } from \"@vueuse/core\"\nimport { basicSetup, EditorView } from \"codemirror\"\nimport { Compartment, EditorState } from \"@codemirror/state\"\nimport { oneDark } from \"@codemirror/theme-one-dark\"\nimport { javascript } from \"@codemirror/lang-javascript\"\nimport { html } from \"@codemirror/lang-html\"\nimport { css } from \"@codemirror/lang-css\"\nimport { json } from \"@codemirror/lang-json\"\nimport { python } from \"@codemirror/lang-python\"\nimport { sql } from \"@codemirror/lang-sql\"\nimport { php } from \"@codemirror/lang-php\"\nimport {\n  AlignLeft,\n  ChevronDown,\n  FileCode2,\n} from \"@lucide/vue\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface CodeEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Language for syntax highlighting. Defaults to \"javascript\". */\n  language?: string\n  /** Fixed height for the editor area. If unset, min/max-height applies. */\n  height?: string\n  minHeight?: string\n  maxHeight?: string\n}\n\nconst props = withDefaults(defineProps<CodeEditorProps>(), {\n  errors: () => [],\n  language: \"javascript\",\n  minHeight: \"12rem\",\n  maxHeight: \"40rem\",\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\n// ---------------------------------------------------------------------------\n// Language registry\n// ---------------------------------------------------------------------------\n\ninterface LangOption {\n  label: string\n  value: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ext: () => any\n}\n\nconst LANGUAGES: LangOption[] = [\n  { label: \"JavaScript\", value: \"javascript\", ext: () => javascript() },\n  { label: \"TypeScript\", value: \"typescript\", ext: () => javascript({ typescript: true }) },\n  { label: \"JSX\", value: \"jsx\", ext: () => javascript({ jsx: true }) },\n  { label: \"TSX\", value: \"tsx\", ext: () => javascript({ jsx: true, typescript: true }) },\n  { label: \"HTML\", value: \"html\", ext: () => html() },\n  { label: \"CSS\", value: \"css\", ext: () => css() },\n  { label: \"JSON\", value: \"json\", ext: () => json() },\n  { label: \"Python\", value: \"python\", ext: () => python() },\n  { label: \"SQL\", value: \"sql\", ext: () => sql() },\n  { label: \"PHP\", value: \"php\", ext: () => php() },\n]\n\nfunction getLangExtension(lang: string) {\n  return LANGUAGES.find((l) => l.value === lang)?.ext() ?? javascript()\n}\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\nconst editorEl = ref<HTMLElement | null>(null)\nlet view: EditorView | null = null\n\nconst isDark = useDark()\nconst isInert = computed(() => Boolean(props.disabled || props.readonly))\nconst hasErrors = computed(() => props.errors.length > 0)\n\nconst activeLanguage = ref(props.language ?? \"javascript\")\n\n// CodeMirror Compartments allow hot-swapping extensions\nconst langCompartment = new Compartment()\nconst themeCompartment = new Compartment()\nconst editableCompartment = new Compartment()\nconst readonlyCompartment = new Compartment()\n\n// Prevent re-emitting when we programmatically set content\nlet suppressEmit = false\n\nfunction buildTheme() {\n  return isDark.value ? oneDark : []\n}\n\n// ---------------------------------------------------------------------------\n// Mount / unmount\n// ---------------------------------------------------------------------------\n\nonMounted(() => {\n  if (!editorEl.value) return\n\n  const startDoc = props.modelValue ?? \"\"\n\n  const state = EditorState.create({\n    doc: startDoc,\n    extensions: [\n      basicSetup,\n      langCompartment.of(getLangExtension(activeLanguage.value)),\n      themeCompartment.of(buildTheme()),\n      editableCompartment.of(EditorView.editable.of(!isInert.value)),\n      readonlyCompartment.of(EditorState.readOnly.of(isInert.value)),\n      EditorView.updateListener.of((update) => {\n        if (update.docChanged && !suppressEmit) {\n          emit(\"update:modelValue\", update.state.doc.toString())\n        }\n      }),\n      EditorView.theme({\n        \"&\": { fontSize: \"0.8125rem\" },\n        \".cm-scroller\": {\n          fontFamily: \"'ui-monospace', 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace\",\n          overflow: \"auto\",\n          ...(props.height\n            ? { height: props.height }\n            : { minHeight: props.minHeight ?? \"12rem\", maxHeight: props.maxHeight ?? \"40rem\" }),\n        } as unknown as Record<string, string>,\n        \".cm-focused\": { outline: \"none\" },\n      }),\n    ],\n  })\n\n  view = new EditorView({ state, parent: editorEl.value })\n})\n\nonBeforeUnmount(() => {\n  view?.destroy()\n  view = null\n})\n\n// ---------------------------------------------------------------------------\n// Reactivity\n// ---------------------------------------------------------------------------\n\n// External modelValue → editor\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!view) return\n    const current = view.state.doc.toString()\n    const next = value ?? \"\"\n    if (current === next) return\n    suppressEmit = true\n    view.dispatch({\n      changes: { from: 0, to: view.state.doc.length, insert: next },\n    })\n    suppressEmit = false\n  },\n)\n\n// Dark mode toggle\nwatch(isDark, () => {\n  view?.dispatch({ effects: themeCompartment.reconfigure(buildTheme()) })\n})\n\n// disabled/readonly\nwatch(isInert, (v) => {\n  view?.dispatch({\n    effects: [\n      editableCompartment.reconfigure(EditorView.editable.of(!v)),\n      readonlyCompartment.reconfigure(EditorState.readOnly.of(v)),\n    ],\n  })\n})\n\n// Language change (programmatic)\nwatch(activeLanguage, (lang) => {\n  view?.dispatch({ effects: langCompartment.reconfigure(getLangExtension(lang)) })\n})\n\n// language prop → activeLanguage (consumer controls)\nwatch(\n  () => props.language,\n  (lang) => {\n    if (lang && lang !== activeLanguage.value) {\n      activeLanguage.value = lang\n    }\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Actions\n// ---------------------------------------------------------------------------\n\nconst activeLangLabel = computed(\n  () => LANGUAGES.find((l) => l.value === activeLanguage.value)?.label ?? activeLanguage.value,\n)\n\nconst canFormatJson = computed(() => activeLanguage.value === \"json\")\n\nfunction setLanguage(lang: string): void {\n  activeLanguage.value = lang\n}\n\nfunction formatJson(): void {\n  if (!view) return\n  try {\n    const raw = view.state.doc.toString()\n    const formatted = JSON.stringify(JSON.parse(raw), null, 2)\n    if (formatted === raw) return\n    suppressEmit = true\n    view.dispatch({\n      changes: { from: 0, to: view.state.doc.length, insert: formatted },\n    })\n    suppressEmit = false\n    emit(\"update:modelValue\", formatted)\n  } catch {\n    // Invalid JSON — ignore\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"code-editor\"\n  >\n    <div\n      :class=\"cn(\n        'overflow-hidden rounded-md border border-input shadow-sm',\n        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n        isInert ? 'opacity-60' : '',\n      )\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <!-- Toolbar -->\n      <div\n        class=\"flex items-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none' : ''\"\n      >\n        <FileCode2 class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\" />\n\n        <!-- Language selector -->\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"h-6 gap-1 px-2 text-xs font-medium text-muted-foreground hover:text-foreground\"\n              data-testid=\"code-editor-lang-trigger\"\n            >\n              {{ activeLangLabel }}\n              <ChevronDown class=\"h-3 w-3\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\" class=\"w-40\">\n            <DropdownMenuItem\n              v-for=\"lang in LANGUAGES\"\n              :key=\"lang.value\"\n              :class=\"activeLanguage === lang.value ? 'bg-muted font-medium' : ''\"\n              @click=\"setLanguage(lang.value)\"\n            >\n              {{ lang.label }}\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <!-- Format JSON button -->\n        <Button\n          v-if=\"canFormatJson\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground\"\n          title=\"Format JSON\"\n          data-testid=\"code-editor-format\"\n          @click=\"formatJson\"\n        >\n          <AlignLeft class=\"h-3 w-3\" />\n          Format\n        </Button>\n      </div>\n\n      <!-- CodeMirror mount point -->\n      <div\n        ref=\"editorEl\"\n        class=\"code-editor-cm\"\n        :data-testid=\"'code-editor-content'\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n\n<style scoped>\n/* Scoped overrides — keep CodeMirror inside our border/radius container */\n:deep(.cm-editor) {\n  height: 100%;\n}\n\n:deep(.cm-editor.cm-focused) {\n  outline: none;\n}\n\n:deep(.cm-gutters) {\n  border-right-color: var(--border);\n  background-color: var(--muted);\n}\n\n:deep(.cm-activeLineGutter) {\n  background-color: color-mix(in oklch, var(--muted) 80%, var(--background));\n}\n\n:deep(.cm-selectionBackground),\n:deep(.cm-focused .cm-selectionBackground) {\n  background-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;\n}\n\n:deep(.cm-cursor) {\n  border-left-color: var(--foreground);\n}\n</style>\n"],"mappings":""}

package/dist/components/compositions/elements/editor/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,249 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import n from "../../../ui/dropdown-menu/DropdownMenu.js";
+import r from "../../../ui/dropdown-menu/DropdownMenuContent.js";
+import i from "../../../ui/dropdown-menu/DropdownMenuItem.js";
+import ee from "../../../ui/dropdown-menu/DropdownMenuTrigger.js";
+import "../../../ui/dropdown-menu/index.js";
+import a from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as te, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, onBeforeUnmount as h, onMounted as ne, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
+import { useDark as C } from "@vueuse/core";
+import { AlignLeft as w, ChevronDown as T, FileCode2 as E } from "@lucide/vue";
+import { EditorView as D, basicSetup as O } from "codemirror";
+import { Compartment as k, EditorState as A } from "@codemirror/state";
+import { oneDark as re } from "@codemirror/theme-one-dark";
+import { javascript as j } from "@codemirror/lang-javascript";
+import { html as ie } from "@codemirror/lang-html";
+import { css as ae } from "@codemirror/lang-css";
+import { json as M } from "@codemirror/lang-json";
+import { python as N } from "@codemirror/lang-python";
+import { sql as P } from "@codemirror/lang-sql";
+import { php as F } from "@codemirror/lang-php";
+//#region src/components/compositions/elements/editor/CodeEditor.vue?vue&type=script&setup=true&lang.ts
+var I = ["data-element-name"], L = /* @__PURE__ */ p({
+	__name: "CodeEditor",
+	props: {
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		language: { default: "javascript" },
+		height: {},
+		minHeight: { default: "12rem" },
+		maxHeight: { default: "40rem" }
+	},
+	emits: ["update:modelValue"],
+	setup(p, { emit: L }) {
+		let R = p, z = L, B = [
+			{
+				label: "JavaScript",
+				value: "javascript",
+				ext: () => j()
+			},
+			{
+				label: "TypeScript",
+				value: "typescript",
+				ext: () => j({ typescript: !0 })
+			},
+			{
+				label: "JSX",
+				value: "jsx",
+				ext: () => j({ jsx: !0 })
+			},
+			{
+				label: "TSX",
+				value: "tsx",
+				ext: () => j({
+					jsx: !0,
+					typescript: !0
+				})
+			},
+			{
+				label: "HTML",
+				value: "html",
+				ext: () => ie()
+			},
+			{
+				label: "CSS",
+				value: "css",
+				ext: () => ae()
+			},
+			{
+				label: "JSON",
+				value: "json",
+				ext: () => M()
+			},
+			{
+				label: "Python",
+				value: "python",
+				ext: () => N()
+			},
+			{
+				label: "SQL",
+				value: "sql",
+				ext: () => P()
+			},
+			{
+				label: "PHP",
+				value: "php",
+				ext: () => F()
+			}
+		];
+		function V(e) {
+			return B.find((t) => t.value === e)?.ext() ?? j();
+		}
+		let H = _(null), U = null, W = C(), G = s(() => !!(R.disabled || R.readonly)), K = s(() => R.errors.length > 0), q = _(R.language ?? "javascript"), J = new k(), Y = new k(), X = new k(), Z = new k(), Q = !1;
+		function $() {
+			return W.value ? re : [];
+		}
+		ne(() => {
+			if (!H.value) return;
+			let e = R.modelValue ?? "";
+			U = new D({
+				state: A.create({
+					doc: e,
+					extensions: [
+						O,
+						J.of(V(q.value)),
+						Y.of($()),
+						X.of(D.editable.of(!G.value)),
+						Z.of(A.readOnly.of(G.value)),
+						D.updateListener.of((e) => {
+							e.docChanged && !Q && z("update:modelValue", e.state.doc.toString());
+						}),
+						D.theme({
+							"&": { fontSize: "0.8125rem" },
+							".cm-scroller": {
+								fontFamily: "'ui-monospace', 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace",
+								overflow: "auto",
+								...R.height ? { height: R.height } : {
+									minHeight: R.minHeight ?? "12rem",
+									maxHeight: R.maxHeight ?? "40rem"
+								}
+							},
+							".cm-focused": { outline: "none" }
+						})
+					]
+				}),
+				parent: H.value
+			});
+		}), h(() => {
+			U?.destroy(), U = null;
+		}), x(() => R.modelValue, (e) => {
+			if (!U) return;
+			let t = U.state.doc.toString(), n = e ?? "";
+			t !== n && (Q = !0, U.dispatch({ changes: {
+				from: 0,
+				to: U.state.doc.length,
+				insert: n
+			} }), Q = !1);
+		}), x(W, () => {
+			U?.dispatch({ effects: Y.reconfigure($()) });
+		}), x(G, (e) => {
+			U?.dispatch({ effects: [X.reconfigure(D.editable.of(!e)), Z.reconfigure(A.readOnly.of(e))] });
+		}), x(q, (e) => {
+			U?.dispatch({ effects: J.reconfigure(V(e)) });
+		}), x(() => R.language, (e) => {
+			e && e !== q.value && (q.value = e);
+		});
+		let oe = s(() => B.find((e) => e.value === q.value)?.label ?? q.value), se = s(() => q.value === "json");
+		function ce(e) {
+			q.value = e;
+		}
+		function le() {
+			if (U) try {
+				let e = U.state.doc.toString(), t = JSON.stringify(JSON.parse(e), null, 2);
+				if (t === e) return;
+				Q = !0, U.dispatch({ changes: {
+					from: 0,
+					to: U.state.doc.length,
+					insert: t
+				} }), Q = !1, z("update:modelValue", t);
+			} catch {}
+		}
+		return (s, h) => (g(), c(b(a), {
+			label: p.label,
+			required: p.required,
+			"hide-label": p.hideLabel,
+			for: p.id,
+			"help-text": p.helpText,
+			errors: p.errors,
+			"data-testid": "code-editor"
+		}, {
+			default: S(() => [u("div", {
+				class: m(b(e)("overflow-hidden rounded-md border border-input shadow-sm", K.value ? "border-destructive ring-1 ring-destructive" : "", G.value ? "opacity-60" : "")),
+				"data-element-name": p.name ?? void 0
+			}, [u("div", { class: m(["flex items-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1", G.value ? "pointer-events-none" : ""]) }, [
+				f(b(E), { class: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+				f(b(n), null, {
+					default: S(() => [f(b(ee), { "as-child": "" }, {
+						default: S(() => [f(b(t), {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							class: "h-6 gap-1 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
+							"data-testid": "code-editor-lang-trigger"
+						}, {
+							default: S(() => [d(y(oe.value) + " ", 1), f(b(T), { class: "h-3 w-3" })]),
+							_: 1
+						})]),
+						_: 1
+					}), f(b(r), {
+						align: "start",
+						class: "w-40"
+					}, {
+						default: S(() => [(g(), te(o, null, v(B, (e) => f(b(i), {
+							key: e.value,
+							class: m(q.value === e.value ? "bg-muted font-medium" : ""),
+							onClick: (t) => ce(e.value)
+						}, {
+							default: S(() => [d(y(e.label), 1)]),
+							_: 2
+						}, 1032, ["class", "onClick"])), 64))]),
+						_: 1
+					})]),
+					_: 1
+				}),
+				se.value ? (g(), c(b(t), {
+					key: 0,
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					class: "h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground",
+					title: "Format JSON",
+					"data-testid": "code-editor-format",
+					onClick: le
+				}, {
+					default: S(() => [f(b(w), { class: "h-3 w-3" }), h[0] ||= d(" Format ", -1)]),
+					_: 1
+				})) : l("", !0)
+			], 2), u("div", {
+				ref_key: "editorEl",
+				ref: H,
+				class: "code-editor-cm",
+				"data-testid": "code-editor-content"
+			}, null, 512)], 10, I)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { L as default };
+
+//# sourceMappingURL=CodeEditor.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/editor/CodeEditor.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/editor/CodeEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { useDark } from \"@vueuse/core\"\nimport { basicSetup, EditorView } from \"codemirror\"\nimport { Compartment, EditorState } from \"@codemirror/state\"\nimport { oneDark } from \"@codemirror/theme-one-dark\"\nimport { javascript } from \"@codemirror/lang-javascript\"\nimport { html } from \"@codemirror/lang-html\"\nimport { css } from \"@codemirror/lang-css\"\nimport { json } from \"@codemirror/lang-json\"\nimport { python } from \"@codemirror/lang-python\"\nimport { sql } from \"@codemirror/lang-sql\"\nimport { php } from \"@codemirror/lang-php\"\nimport {\n  AlignLeft,\n  ChevronDown,\n  FileCode2,\n} from \"@lucide/vue\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface CodeEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Language for syntax highlighting. Defaults to \"javascript\". */\n  language?: string\n  /** Fixed height for the editor area. If unset, min/max-height applies. */\n  height?: string\n  minHeight?: string\n  maxHeight?: string\n}\n\nconst props = withDefaults(defineProps<CodeEditorProps>(), {\n  errors: () => [],\n  language: \"javascript\",\n  minHeight: \"12rem\",\n  maxHeight: \"40rem\",\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\n// ---------------------------------------------------------------------------\n// Language registry\n// ---------------------------------------------------------------------------\n\ninterface LangOption {\n  label: string\n  value: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ext: () => any\n}\n\nconst LANGUAGES: LangOption[] = [\n  { label: \"JavaScript\", value: \"javascript\", ext: () => javascript() },\n  { label: \"TypeScript\", value: \"typescript\", ext: () => javascript({ typescript: true }) },\n  { label: \"JSX\", value: \"jsx\", ext: () => javascript({ jsx: true }) },\n  { label: \"TSX\", value: \"tsx\", ext: () => javascript({ jsx: true, typescript: true }) },\n  { label: \"HTML\", value: \"html\", ext: () => html() },\n  { label: \"CSS\", value: \"css\", ext: () => css() },\n  { label: \"JSON\", value: \"json\", ext: () => json() },\n  { label: \"Python\", value: \"python\", ext: () => python() },\n  { label: \"SQL\", value: \"sql\", ext: () => sql() },\n  { label: \"PHP\", value: \"php\", ext: () => php() },\n]\n\nfunction getLangExtension(lang: string) {\n  return LANGUAGES.find((l) => l.value === lang)?.ext() ?? javascript()\n}\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\nconst editorEl = ref<HTMLElement | null>(null)\nlet view: EditorView | null = null\n\nconst isDark = useDark()\nconst isInert = computed(() => Boolean(props.disabled || props.readonly))\nconst hasErrors = computed(() => props.errors.length > 0)\n\nconst activeLanguage = ref(props.language ?? \"javascript\")\n\n// CodeMirror Compartments allow hot-swapping extensions\nconst langCompartment = new Compartment()\nconst themeCompartment = new Compartment()\nconst editableCompartment = new Compartment()\nconst readonlyCompartment = new Compartment()\n\n// Prevent re-emitting when we programmatically set content\nlet suppressEmit = false\n\nfunction buildTheme() {\n  return isDark.value ? oneDark : []\n}\n\n// ---------------------------------------------------------------------------\n// Mount / unmount\n// ---------------------------------------------------------------------------\n\nonMounted(() => {\n  if (!editorEl.value) return\n\n  const startDoc = props.modelValue ?? \"\"\n\n  const state = EditorState.create({\n    doc: startDoc,\n    extensions: [\n      basicSetup,\n      langCompartment.of(getLangExtension(activeLanguage.value)),\n      themeCompartment.of(buildTheme()),\n      editableCompartment.of(EditorView.editable.of(!isInert.value)),\n      readonlyCompartment.of(EditorState.readOnly.of(isInert.value)),\n      EditorView.updateListener.of((update) => {\n        if (update.docChanged && !suppressEmit) {\n          emit(\"update:modelValue\", update.state.doc.toString())\n        }\n      }),\n      EditorView.theme({\n        \"&\": { fontSize: \"0.8125rem\" },\n        \".cm-scroller\": {\n          fontFamily: \"'ui-monospace', 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace\",\n          overflow: \"auto\",\n          ...(props.height\n            ? { height: props.height }\n            : { minHeight: props.minHeight ?? \"12rem\", maxHeight: props.maxHeight ?? \"40rem\" }),\n        } as unknown as Record<string, string>,\n        \".cm-focused\": { outline: \"none\" },\n      }),\n    ],\n  })\n\n  view = new EditorView({ state, parent: editorEl.value })\n})\n\nonBeforeUnmount(() => {\n  view?.destroy()\n  view = null\n})\n\n// ---------------------------------------------------------------------------\n// Reactivity\n// ---------------------------------------------------------------------------\n\n// External modelValue → editor\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!view) return\n    const current = view.state.doc.toString()\n    const next = value ?? \"\"\n    if (current === next) return\n    suppressEmit = true\n    view.dispatch({\n      changes: { from: 0, to: view.state.doc.length, insert: next },\n    })\n    suppressEmit = false\n  },\n)\n\n// Dark mode toggle\nwatch(isDark, () => {\n  view?.dispatch({ effects: themeCompartment.reconfigure(buildTheme()) })\n})\n\n// disabled/readonly\nwatch(isInert, (v) => {\n  view?.dispatch({\n    effects: [\n      editableCompartment.reconfigure(EditorView.editable.of(!v)),\n      readonlyCompartment.reconfigure(EditorState.readOnly.of(v)),\n    ],\n  })\n})\n\n// Language change (programmatic)\nwatch(activeLanguage, (lang) => {\n  view?.dispatch({ effects: langCompartment.reconfigure(getLangExtension(lang)) })\n})\n\n// language prop → activeLanguage (consumer controls)\nwatch(\n  () => props.language,\n  (lang) => {\n    if (lang && lang !== activeLanguage.value) {\n      activeLanguage.value = lang\n    }\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Actions\n// ---------------------------------------------------------------------------\n\nconst activeLangLabel = computed(\n  () => LANGUAGES.find((l) => l.value === activeLanguage.value)?.label ?? activeLanguage.value,\n)\n\nconst canFormatJson = computed(() => activeLanguage.value === \"json\")\n\nfunction setLanguage(lang: string): void {\n  activeLanguage.value = lang\n}\n\nfunction formatJson(): void {\n  if (!view) return\n  try {\n    const raw = view.state.doc.toString()\n    const formatted = JSON.stringify(JSON.parse(raw), null, 2)\n    if (formatted === raw) return\n    suppressEmit = true\n    view.dispatch({\n      changes: { from: 0, to: view.state.doc.length, insert: formatted },\n    })\n    suppressEmit = false\n    emit(\"update:modelValue\", formatted)\n  } catch {\n    // Invalid JSON — ignore\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"code-editor\"\n  >\n    <div\n      :class=\"cn(\n        'overflow-hidden rounded-md border border-input shadow-sm',\n        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n        isInert ? 'opacity-60' : '',\n      )\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <!-- Toolbar -->\n      <div\n        class=\"flex items-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none' : ''\"\n      >\n        <FileCode2 class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\" />\n\n        <!-- Language selector -->\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"h-6 gap-1 px-2 text-xs font-medium text-muted-foreground hover:text-foreground\"\n              data-testid=\"code-editor-lang-trigger\"\n            >\n              {{ activeLangLabel }}\n              <ChevronDown class=\"h-3 w-3\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\" class=\"w-40\">\n            <DropdownMenuItem\n              v-for=\"lang in LANGUAGES\"\n              :key=\"lang.value\"\n              :class=\"activeLanguage === lang.value ? 'bg-muted font-medium' : ''\"\n              @click=\"setLanguage(lang.value)\"\n            >\n              {{ lang.label }}\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <!-- Format JSON button -->\n        <Button\n          v-if=\"canFormatJson\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground\"\n          title=\"Format JSON\"\n          data-testid=\"code-editor-format\"\n          @click=\"formatJson\"\n        >\n          <AlignLeft class=\"h-3 w-3\" />\n          Format\n        </Button>\n      </div>\n\n      <!-- CodeMirror mount point -->\n      <div\n        ref=\"editorEl\"\n        class=\"code-editor-cm\"\n        :data-testid=\"'code-editor-content'\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n\n<style scoped>\n/* Scoped overrides — keep CodeMirror inside our border/radius container */\n:deep(.cm-editor) {\n  height: 100%;\n}\n\n:deep(.cm-editor.cm-focused) {\n  outline: none;\n}\n\n:deep(.cm-gutters) {\n  border-right-color: var(--border);\n  background-color: var(--muted);\n}\n\n:deep(.cm-activeLineGutter) {\n  background-color: color-mix(in oklch, var(--muted) 80%, var(--background));\n}\n\n:deep(.cm-selectionBackground),\n:deep(.cm-focused .cm-selectionBackground) {\n  background-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;\n}\n\n:deep(.cm-cursor) {\n  border-left-color: var(--foreground);\n}\n</style>\n"],"mappings":"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"}

package/dist/components/compositions/elements/editor/HtmlEditor.js

@@ -0,0 +1,9 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./HtmlEditor.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/components/compositions/elements/editor/HtmlEditor.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-e03f074e"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=HtmlEditor.js.map