@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,5 @@
+import f from "./SpriteDisplay.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=SpriteDisplay.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteDisplay.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteDisplay.vue2.js","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-next\"\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"],"names":["props","__props","rootClass","computed","cl","_createBlock","_unref","Card","_createVNode","CardHeader","Construction","_createElementVNode","_hoisted_1","CardTitle","CardDescription","_cache","Badge","CardContent"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,UAAMA,IAAQC,GAERC,IAAYC,EAAiB,MAAM;AACvC,YAAMC,IAAKJ,EAAM;AACjB,aAAKI,IAGE,MAAM,QAAQA,CAAE,IAAIA,EAAG,KAAK,GAAG,IAAIA,IAFjC;AAAA,IAGX,CAAC;2BAICC,EAqBOC,EAAAC,CAAA,GAAA;AAAA,MApBJ,SAAOL,EAAA,KAAS;AAAA,MACjB,eAAY;AAAA,IAAA;iBAEZ,MAaa;AAAA,QAbbM,EAaaF,EAAAG,CAAA,GAAA,EAbD,OAAM,0CAAsC;AAAA,qBACtD,MAAqD;AAAA,YAArDD,EAAqDF,EAAAI,CAAA,GAAA,EAAvC,OAAM,gCAA8B;AAAA,YAClDC,EAOM,OAPNC,GAOM;AAAA,cANJJ,EAEYF,EAAAO,CAAA,GAAA,EAFD,OAAM,eAAW;AAAA,2BAC1B,MAAuB;AAAA,sBAApBZ,EAAA,SAAK,QAAA,GAAA,CAAA;AAAA,gBAAA;;;cAEVO,EAEkBF,EAAAQ,CAAA,GAAA,MAAA;AAAA,2BAFD,MAEjB,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,oBAFiB,2DAEjB,EAAA;AAAA,gBAAA;;;;YAEFP,EAEQF,EAAAU,CAAA,GAAA,EAFD,SAAQ,eAAW;AAAA,yBAAC,MAE3B,CAAA,GAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,kBAF2B,YAE3B,EAAA;AAAA,cAAA;;;;;;QAEFP,EAEcF,EAAAW,CAAA,GAAA,EAFD,OAAM,4CAAwC;AAAA,qBAAC,MAE5D,CAAA,GAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAF4D,8BAE5D,EAAA;AAAA,UAAA;;;;;;;;"}

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

@@ -0,0 +1,5 @@
+import f from "./TypeDisplay.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=TypeDisplay.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypeDisplay.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,45 @@
+import { defineComponent as d, computed as a, openBlock as i, createBlock as g, h as u } from "vue";
+const h = /* @__PURE__ */ d({
+  __name: "TypeDisplay",
+  props: {
+    value: {},
+    contentType: { default: "paragraph" },
+    classList: {}
+  },
+  setup(o) {
+    const t = o, l = a(() => t.value === void 0 || t.value === null ? "" : String(t.value)), r = a(() => {
+      const e = t.classList;
+      return e ? Array.isArray(e) ? e.join(" ") : e : "";
+    }), s = {
+      "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" }
+    }, n = a(() => s[t.contentType] ?? s.paragraph), c = {
+      render() {
+        return u(
+          n.value.tag,
+          {
+            class: [n.value.classes, r.value].filter(Boolean).join(" "),
+            "data-testid": "type-display",
+            "data-content-type": t.contentType
+          },
+          l.value
+        );
+      }
+    };
+    return (e, p) => (i(), g(c));
+  }
+});
+export {
+  h as default
+};
+//# sourceMappingURL=TypeDisplay.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypeDisplay.vue2.js","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"],"names":["props","__props","content","computed","rootClass","cl","VARIANTS","variant","Rendered","h","_createBlock"],"mappings":";;;;;;;;;AAmBA,UAAMA,IAAQC,GAIRC,IAAUC,EAAiB,MAC3BH,EAAM,UAAU,UAAaA,EAAM,UAAU,OACxC,KAEF,OAAOA,EAAM,KAAK,CAC1B,GAEKI,IAAYD,EAAiB,MAAM;AACvC,YAAME,IAAKL,EAAM;AACjB,aAAKK,IAGE,MAAM,QAAQA,CAAE,IAAIA,EAAG,KAAK,GAAG,IAAIA,IAFjC;AAAA,IAGX,CAAC,GAOKC,IAAoD;AAAA,MACxD,aAAa,EAAE,KAAK,MAAM,SAAS,oCAAA;AAAA,MACnC,aAAa,EAAE,KAAK,MAAM,SAAS,wCAAA;AAAA,MACnC,aAAa,EAAE,KAAK,MAAM,SAAS,yBAAA;AAAA,MACnC,aAAa,EAAE,KAAK,MAAM,SAAS,wBAAA;AAAA,MACnC,aAAa,EAAE,KAAK,MAAM,SAAS,wBAAA;AAAA,MACnC,aAAa,EAAE,KAAK,MAAM,SAAS,0BAAA;AAAA,MACnC,WAAW,EAAE,KAAK,KAAK,SAAS,YAAA;AAAA,MAChC,MAAM,EAAE,KAAK,KAAK,SAAS,gCAAA;AAAA,MAC3B,OAAO,EAAE,KAAK,SAAS,SAAS,UAAA;AAAA,MAChC,SAAS,EAAE,KAAK,QAAQ,SAAS,gCAAA;AAAA,MACjC,MAAM,EAAE,KAAK,QAAQ,SAAS,0CAAA;AAAA,MAC9B,OAAO,EAAE,KAAK,cAAc,SAAS,+CAAA;AAAA,IAA+C,GAGhFC,IAAUJ,EAAsB,MAC7BG,EAASN,EAAM,WAAW,KAAKM,EAAS,SAChD,GAEKE,IAAsB;AAAA,MAC1B,SAAS;AACP,eAAOC;AAAA,UACLF,EAAQ,MAAM;AAAA,UACd;AAAA,YACE,OAAO,CAACA,EAAQ,MAAM,SAASH,EAAU,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,YACxE,eAAe;AAAA,YACf,qBAAqBJ,EAAM;AAAA,UAAA;AAAA,UAE7BE,EAAQ;AAAA,QAAA;AAAA,MAEZ;AAAA,IAAA;2BAKAQ,EAAYF,CAAA;AAAA;;"}

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

@@ -0,0 +1,5 @@
+import f from "./VideoPlayerDisplay.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=VideoPlayerDisplay.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerDisplay.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerDisplay.vue2.js","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"],"names":["props","__props","rootClass","computed","cl","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;AAiBA,UAAMA,IAAQC,GAERC,IAAYC,EAAiB,MAAM;AACvC,YAAMC,IAAKJ,EAAM;AACjB,aAAKI,IAGE,MAAM,QAAQA,CAAE,IAAIA,EAAG,KAAK,GAAG,IAAIA,IAFjC;AAAA,IAGX,CAAC;2BAICC,EAeM,OAAA;AAAA,MAdJ,OAAKC,EAAA,CAAC,UACEJ,EAAA,KAAS,CAAA;AAAA,MACjB,eAAY;AAAA,IAAA;MAGJD,EAAA,YADRI,EASE,SAAA;AAAA;QAPA,UAAA;AAAA,QACC,KAAKJ,EAAA;AAAA,QACL,UAAUA,EAAA,YAAY;AAAA,QACtB,MAAMA,EAAA,QAAQ;AAAA,QACd,OAAOA,EAAA,SAAS;AAAA,QACjB,OAAM;AAAA,QACN,SAAQ;AAAA,MAAA;;;;"}

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

@@ -0,0 +1,5 @@
+import f from "./CodeEditor.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=CodeEditor.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,77 @@
+import { defineComponent as u, useModel as s, openBlock as m, createBlock as c, unref as o, withCtx as r, createElementVNode as t, createVNode as i, createTextVNode as f, toDisplayString as b, normalizeClass as h, mergeModels as g } from "vue";
+import { Code2 as x } from "lucide-vue-next";
+import "../../../ui/badge/index.js";
+import v from "../../../ui/field-frame/FieldFrame.vue.js";
+import y from "../../../ui/badge/Badge.vue.js";
+const w = { class: "flex items-center gap-2 text-xs text-muted-foreground" }, q = ["id", "name", "placeholder", "readonly", "disabled", "required", "rows", "value", "data-element-name"], N = /* @__PURE__ */ u({
+  __name: "CodeEditor",
+  props: /* @__PURE__ */ g({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    language: {},
+    rows: { default: 12 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = s(e, "modelValue");
+    function n(d) {
+      const l = d.target;
+      a.value = (l == null ? void 0 : l.value) ?? "";
+    }
+    return (d, l) => (m(), c(o(v), {
+      label: e.label,
+      required: e.required,
+      "hide-label": e.hideLabel,
+      for: e.id,
+      "help-text": e.helpText,
+      errors: e.errors,
+      "data-testid": "code-editor"
+    }, {
+      default: r(() => [
+        t("div", w, [
+          i(o(x), { class: "h-3.5 w-3.5" }),
+          l[0] || (l[0] = t("span", null, "Plain code editor", -1)),
+          i(o(y), {
+            variant: "outline",
+            class: "font-mono text-[10px]"
+          }, {
+            default: r(() => [
+              f(b(e.language ?? "syntax highlighting coming soon"), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        t("textarea", {
+          id: e.id,
+          name: e.name ?? void 0,
+          placeholder: e.placeholder ?? "// type your code here",
+          readonly: e.readonly,
+          disabled: e.disabled,
+          required: e.required,
+          rows: e.rows,
+          value: a.value ?? "",
+          "data-element-name": e.name ?? void 0,
+          class: h(["font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", e.errors.length ? "border-destructive ring-destructive" : ""]),
+          onInput: n
+        }, null, 42, q)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  N as default
+};
+//# sourceMappingURL=CodeEditor.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/CodeEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven code editor composition. Monospace `<textarea>` with a\n * \"syntax highlighting coming soon\" hint. Composes `FieldFrame` chrome\n * (label + helpText + errors).\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <CodeEditor v-model=\"source\" language=\"typescript\" />\n */\nimport { Code2 } from \"lucide-vue-next\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\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?: string\n  rows?: number\n}\n\nwithDefaults(defineProps<CodeEditorProps>(), {\n  errors: () => [],\n  rows: 12,\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nfunction onInput(event: Event): void {\n  const target = event.target as HTMLTextAreaElement | null\n  model.value = target?.value ?? \"\"\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 class=\"flex items-center gap-2 text-xs text-muted-foreground\">\n      <Code2 class=\"h-3.5 w-3.5\" />\n      <span>Plain code editor</span>\n      <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n        {{ language ?? \"syntax highlighting coming soon\" }}\n      </Badge>\n    </div>\n    <textarea\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      :placeholder=\"placeholder ?? '// type your code here'\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :rows=\"rows\"\n      :value=\"model ?? ''\"\n      :data-element-name=\"name ?? undefined\"\n      class=\"font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @input=\"onInput\"\n    />\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","onInput","event","target","_createBlock","_unref","FieldFrame","_createElementVNode","_hoisted_1","_createVNode","Code2","_cache","Badge","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,UAAMA,IAAQC,EAA0BC,GAAC,YAAY;AAErD,aAASC,EAAQC,GAAoB;AACnC,YAAMC,IAASD,EAAM;AACrB,MAAAJ,EAAM,SAAQK,KAAA,gBAAAA,EAAQ,UAAS;AAAA,IACjC;2BAIEC,EA8BaC,EAAAC,CAAA,GAAA;AAAA,MA7BV,OAAON,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,MACT,eAAY;AAAA,IAAA;iBAEZ,MAMM;AAAA,QANNO,EAMM,OANNC,GAMM;AAAA,UALJC,EAA6BJ,EAAAK,CAAA,GAAA,EAAtB,OAAM,eAAa;AAAA,UAC1BC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAJ,EAA8B,cAAxB,qBAAiB,EAAA;AAAA,UACvBE,EAEQJ,EAAAO,CAAA,GAAA;AAAA,YAFD,SAAQ;AAAA,YAAU,OAAM;AAAA,UAAA;uBAC7B,MAAmD;AAAA,kBAAhDZ,EAAA,YAAQ,iCAAA,GAAA,CAAA;AAAA,YAAA;;;;QAGfO,EAaE,YAAA;AAAA,UAZC,IAAIP,EAAA;AAAA,UACJ,MAAMA,EAAA,QAAQ;AAAA,UACd,aAAaA,EAAA,eAAW;AAAA,UACxB,UAAUA,EAAA;AAAA,UACV,UAAUA,EAAA;AAAA,UACV,UAAUA,EAAA;AAAA,UACV,MAAMA,EAAA;AAAA,UACN,OAAOF,EAAA,SAAK;AAAA,UACZ,qBAAmBE,EAAA,QAAQ;AAAA,UAC5B,OAAKa,EAAA,CAAC,8MACEb,EAAA,OAAO,SAAM,wCAAA,EAAA,CAAA;AAAA,UACpB,SAAAC;AAAA,QAAA;;;;;;"}

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

@@ -0,0 +1,5 @@
+import f from "./HtmlEditor.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=HtmlEditor.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlEditor.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,72 @@
+import { defineComponent as s, useModel as u, computed as a, openBlock as c, createBlock as m, unref as b, withCtx as h, createElementVNode as l, normalizeClass as f, mergeModels as v } from "vue";
+import g from "../../../ui/field-frame/FieldFrame.vue.js";
+const y = { class: "grid grid-cols-1 gap-3 lg:grid-cols-2" }, x = ["id", "name", "placeholder", "readonly", "disabled", "required", "rows", "value", "data-element-name"], w = ["srcdoc"], M = /* @__PURE__ */ s({
+  __name: "HtmlEditor",
+  props: /* @__PURE__ */ v({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    rows: { default: 12 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const o = u(e, "modelValue"), t = a(() => o.value ?? ""), i = a(
+      () => `<!doctype html><html><body>${t.value}</body></html>`
+    );
+    function n(r) {
+      const d = r.target;
+      o.value = (d == null ? void 0 : d.value) ?? "";
+    }
+    return (r, d) => (c(), m(b(g), {
+      label: e.label,
+      required: e.required,
+      "hide-label": e.hideLabel,
+      for: e.id,
+      "help-text": e.helpText,
+      errors: e.errors,
+      "data-testid": "html-editor"
+    }, {
+      default: h(() => [
+        l("div", y, [
+          l("textarea", {
+            id: e.id,
+            name: e.name ?? void 0,
+            placeholder: e.placeholder ?? "<!-- type HTML here -->",
+            readonly: e.readonly,
+            disabled: e.disabled,
+            required: e.required,
+            rows: e.rows,
+            value: t.value,
+            "data-element-name": e.name ?? void 0,
+            "data-testid": "html-editor-source",
+            class: f(["font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", e.errors.length ? "border-destructive ring-destructive" : ""]),
+            onInput: n
+          }, null, 42, x),
+          l("iframe", {
+            srcdoc: i.value,
+            sandbox: "",
+            "data-testid": "html-editor-preview",
+            class: "min-h-[12rem] rounded-md border bg-background",
+            title: "HTML preview"
+          }, null, 8, w)
+        ])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  M as default
+};
+//# sourceMappingURL=HtmlEditor.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/HtmlEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven HTML editor composition. Split view: editable HTML source\n * on the left, sandboxed iframe preview on the right. The iframe uses an\n * empty `sandbox` to neuter scripts so the preview is safe even for\n * adversarial input.\n *\n *   <HtmlEditor v-model=\"body\" label=\"HTML body\" />\n */\nimport { computed } from \"vue\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface HtmlEditorProps {\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  rows?: number\n}\n\nwithDefaults(defineProps<HtmlEditorProps>(), {\n  errors: () => [],\n  rows: 12,\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst source = computed<string>(() => model.value ?? \"\")\n\nconst previewSrcDoc = computed<string>(\n  () => `<!doctype html><html><body>${source.value}</body></html>`,\n)\n\nfunction onInput(event: Event): void {\n  const target = event.target as HTMLTextAreaElement | null\n  model.value = target?.value ?? \"\"\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=\"html-editor\"\n  >\n    <div class=\"grid grid-cols-1 gap-3 lg:grid-cols-2\">\n      <textarea\n        :id=\"id\"\n        :name=\"name ?? undefined\"\n        :placeholder=\"placeholder ?? '<!-- type HTML here -->'\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :rows=\"rows\"\n        :value=\"source\"\n        :data-element-name=\"name ?? undefined\"\n        data-testid=\"html-editor-source\"\n        class=\"font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        @input=\"onInput\"\n      />\n      <iframe\n        :srcdoc=\"previewSrcDoc\"\n        sandbox=\"\"\n        data-testid=\"html-editor-preview\"\n        class=\"min-h-[12rem] rounded-md border bg-background\"\n        title=\"HTML preview\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","source","computed","previewSrcDoc","onInput","event","target","_createBlock","_unref","FieldFrame","_createElementVNode","_hoisted_1","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAMA,IAAQC,EAA0BC,GAAC,YAAY,GAE/CC,IAASC,EAAiB,MAAMJ,EAAM,SAAS,EAAE,GAEjDK,IAAgBD;AAAA,MACpB,MAAM,8BAA8BD,EAAO,KAAK;AAAA,IAAA;AAGlD,aAASG,EAAQC,GAAoB;AACnC,YAAMC,IAASD,EAAM;AACrB,MAAAP,EAAM,SAAQQ,KAAA,gBAAAA,EAAQ,UAAS;AAAA,IACjC;2BAIEC,EAiCaC,EAAAC,CAAA,GAAA;AAAA,MAhCV,OAAOT,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,MACT,eAAY;AAAA,IAAA;iBAEZ,MAuBM;AAAA,QAvBNU,EAuBM,OAvBNC,GAuBM;AAAA,UAtBJD,EAcE,YAAA;AAAA,YAbC,IAAIV,EAAA;AAAA,YACJ,MAAMA,EAAA,QAAQ;AAAA,YACd,aAAaA,EAAA,eAAW;AAAA,YACxB,UAAUA,EAAA;AAAA,YACV,UAAUA,EAAA;AAAA,YACV,UAAUA,EAAA;AAAA,YACV,MAAMA,EAAA;AAAA,YACN,OAAOC,EAAA;AAAA,YACP,qBAAmBD,EAAA,QAAQ;AAAA,YAC5B,eAAY;AAAA,YACZ,OAAKY,EAAA,CAAC,8MACEZ,EAAA,OAAO,SAAM,wCAAA,EAAA,CAAA;AAAA,YACpB,SAAAI;AAAA,UAAA;UAEHM,EAME,UAAA;AAAA,YALC,QAAQP,EAAA;AAAA,YACT,SAAQ;AAAA,YACR,eAAY;AAAA,YACZ,OAAM;AAAA,YACN,OAAM;AAAA,UAAA;;;;;;;"}

package/dist/components/compositions/elements/editor/ImageEditor.vue.js

@@ -0,0 +1,5 @@
+import f from "./ImageEditor.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=ImageEditor.vue.js.map

package/dist/components/compositions/elements/editor/ImageEditor.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/editor/ImageEditor.vue2.js

@@ -0,0 +1,70 @@
+import { defineComponent as l, useModel as d, openBlock as i, createBlock as m, unref as t, withCtx as a, createVNode as r, createElementVNode as n, createTextVNode as s, mergeModels as u } from "vue";
+import { Construction as f } from "lucide-vue-next";
+import "../../../ui/badge/index.js";
+import "../../../ui/card/index.js";
+import c from "../../../ui/field-frame/FieldFrame.vue.js";
+import x from "../../../ui/card/Card.vue.js";
+import p from "../../../ui/card/CardContent.vue.js";
+import b from "../../../ui/badge/Badge.vue.js";
+const N = /* @__PURE__ */ l({
+  __name: "ImageEditor",
+  props: /* @__PURE__ */ u({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    return d(e, "modelValue"), (g, o) => (i(), m(t(c), {
+      label: e.label,
+      required: e.required,
+      "hide-label": e.hideLabel,
+      for: e.id,
+      "help-text": e.helpText,
+      errors: e.errors,
+      "data-testid": "image-editor"
+    }, {
+      default: a(() => [
+        r(t(x), {
+          class: "border-dashed",
+          "data-element-name": e.name ?? void 0,
+          "data-stub": "editor/image-editor"
+        }, {
+          default: a(() => [
+            r(t(p), { class: "flex items-center gap-3 py-6 text-sm text-muted-foreground" }, {
+              default: a(() => [
+                r(t(f), { class: "h-5 w-5" }),
+                o[1] || (o[1] = n("span", null, "Image editor — coming soon", -1)),
+                r(t(b), {
+                  variant: "outline",
+                  class: "ml-auto font-mono text-[10px]"
+                }, {
+                  default: a(() => [...o[0] || (o[0] = [
+                    s(" editor/image-editor ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["data-element-name"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  N as default
+};
+//# sourceMappingURL=ImageEditor.vue2.js.map

package/dist/components/compositions/elements/editor/ImageEditor.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/ImageEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven stub for `editor/image-editor`.\n *\n * Placeholder until the canvas-based crop / annotate editor lands.\n * Reserves the `modelValue` slot so a saved value (data URL or asset\n * reference) round-trips even though there's no real UI yet.\n *\n *   <ImageEditor label=\"Banner\" />\n */\nimport { Construction } from \"lucide-vue-next\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface ImageEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<ImageEditorProps>(), {\n  errors: () => [],\n})\n\ndefineModel<string | null>(\"modelValue\")\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=\"image-editor\"\n  >\n    <Card class=\"border-dashed\" :data-element-name=\"name ?? undefined\" data-stub=\"editor/image-editor\">\n      <CardContent class=\"flex items-center gap-3 py-6 text-sm text-muted-foreground\">\n        <Construction class=\"h-5 w-5\" />\n        <span>Image editor — coming soon</span>\n        <Badge variant=\"outline\" class=\"ml-auto font-mono text-[10px]\">\n          editor/image-editor\n        </Badge>\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n"],"names":["_useModel","__props","_createBlock","_unref","FieldFrame","_createVNode","Card","CardContent","Construction","_cache","_createElementVNode","Badge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BAA,WAAAA,EAA0BC,GAAC,YAAY,mBAIrCC,EAkBaC,EAAAC,CAAA,GAAA;AAAA,MAjBV,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,MACT,eAAY;AAAA,IAAA;iBAEZ,MAQO;AAAA,QARPI,EAQOF,EAAAG,CAAA,GAAA;AAAA,UARD,OAAM;AAAA,UAAiB,qBAAmBL,EAAA,QAAQ;AAAA,UAAW,aAAU;AAAA,QAAA;qBAC3E,MAMc;AAAA,YANdI,EAMcF,EAAAI,CAAA,GAAA,EAND,OAAM,gEAA4D;AAAA,yBAC7E,MAAgC;AAAA,gBAAhCF,EAAgCF,EAAAK,CAAA,GAAA,EAAlB,OAAM,WAAS;AAAA,gBAC7BC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAuC,cAAjC,8BAA0B,EAAA;AAAA,gBAChCL,EAEQF,EAAAQ,CAAA,GAAA;AAAA,kBAFD,SAAQ;AAAA,kBAAU,OAAM;AAAA,gBAAA;6BAAgC,MAE/D,CAAA,GAAAF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,sBAF+D,yBAE/D,EAAA;AAAA,kBAAA;;;;;;;;;;;;;;"}

package/dist/components/compositions/elements/editor/MarkdownEditor.vue.js

@@ -0,0 +1,5 @@
+import f from "./MarkdownEditor.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=MarkdownEditor.vue.js.map

package/dist/components/compositions/elements/editor/MarkdownEditor.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/editor/MarkdownEditor.vue2.js

@@ -0,0 +1,85 @@
+import { defineComponent as h, useModel as g, computed as i, openBlock as p, createBlock as f, unref as b, withCtx as $, createElementVNode as o, normalizeClass as v, mergeModels as w } from "vue";
+import x from "../../../ui/field-frame/FieldFrame.vue.js";
+const y = { class: "grid grid-cols-1 gap-3 lg:grid-cols-2" }, k = ["id", "name", "placeholder", "readonly", "disabled", "required", "rows", "value", "data-element-name"], q = ["innerHTML"], V = /* @__PURE__ */ h({
+  __name: "MarkdownEditor",
+  props: /* @__PURE__ */ w({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    rows: { default: 12 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const t = g(r, "modelValue"), n = i(() => t.value ?? "");
+    function s(l) {
+      const e = l.target;
+      t.value = (e == null ? void 0 : e.value) ?? "";
+    }
+    const c = i(() => u(n.value));
+    function u(l) {
+      if (!l)
+        return "";
+      let e = m(l);
+      return e = e.replace(/^######\s+(.+)$/gm, "<h6>$1</h6>"), e = e.replace(/^#####\s+(.+)$/gm, "<h5>$1</h5>"), e = e.replace(/^####\s+(.+)$/gm, "<h4>$1</h4>"), e = e.replace(/^###\s+(.+)$/gm, "<h3>$1</h3>"), e = e.replace(/^##\s+(.+)$/gm, "<h2>$1</h2>"), e = e.replace(/^#\s+(.+)$/gm, "<h1>$1</h1>"), e = e.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), e = e.replace(/\*(.+?)\*/g, "<em>$1</em>"), e = e.replace(/`([^`]+)`/g, "<code>$1</code>"), e = e.replace(
+        /\[([^\]]+)\]\(([^)]+)\)/g,
+        '<a href="$2" rel="noopener noreferrer" class="underline">$1</a>'
+      ), e = e.replace(/(^|\n)([-*])\s+(.+)/g, "$1<li>$3</li>"), e = e.replace(/(<li>.*<\/li>)/gs, (d) => `<ul>${d}</ul>`), e = e.split(/\n{2,}/).map((d) => {
+        const a = d.trim();
+        return a ? /^<(h[1-6]|ul|ol|li|pre|code|a|strong|em)/.test(a) ? a : `<p>${a}</p>` : "";
+      }).join(`
+`), e;
+    }
+    function m(l) {
+      return l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+    return (l, e) => (p(), f(b(x), {
+      label: r.label,
+      required: r.required,
+      "hide-label": r.hideLabel,
+      for: r.id,
+      "help-text": r.helpText,
+      errors: r.errors,
+      "data-testid": "markdown-editor"
+    }, {
+      default: $(() => [
+        o("div", y, [
+          o("textarea", {
+            id: r.id,
+            name: r.name ?? void 0,
+            placeholder: r.placeholder ?? "Write markdown here...",
+            readonly: r.readonly,
+            disabled: r.disabled,
+            required: r.required,
+            rows: r.rows,
+            value: n.value,
+            "data-element-name": r.name ?? void 0,
+            "data-testid": "markdown-editor-source",
+            class: v(["font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", r.errors.length ? "border-destructive ring-destructive" : ""]),
+            onInput: s
+          }, null, 42, k),
+          o("div", {
+            class: "prose prose-sm max-w-none rounded-md border bg-muted/30 px-3 py-2 dark:prose-invert",
+            "data-testid": "markdown-editor-preview",
+            innerHTML: c.value
+          }, null, 8, q)
+        ])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  V as default
+};
+//# sourceMappingURL=MarkdownEditor.vue2.js.map

package/dist/components/compositions/elements/editor/MarkdownEditor.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/MarkdownEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven markdown editor composition. Two-pane: editable source on\n * the left, naive markdown preview on the right. The previewer supports\n * bold, italics, headings, links, inline code, and lists — enough to be\n * useful as a draft tool. Heavier syntax (tables, footnotes, code-fence\n * highlighting) is left to a follow-up.\n *\n *   <MarkdownEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed } from \"vue\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface MarkdownEditorProps {\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  rows?: number\n}\n\nwithDefaults(defineProps<MarkdownEditorProps>(), {\n  errors: () => [],\n  rows: 12,\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst source = computed<string>(() => model.value ?? \"\")\n\nfunction onInput(event: Event): void {\n  const target = event.target as HTMLTextAreaElement | null\n  model.value = target?.value ?? \"\"\n}\n\nconst previewHtml = computed<string>(() => renderMarkdown(source.value))\n\nfunction renderMarkdown(input: string): string {\n  if (!input) {\n    return \"\"\n  }\n  let html = escapeHtml(input)\n  // Headings (h1..h6) — must run before other line-level rules.\n  html = html.replace(/^######\\s+(.+)$/gm, \"<h6>$1</h6>\")\n  html = html.replace(/^#####\\s+(.+)$/gm, \"<h5>$1</h5>\")\n  html = html.replace(/^####\\s+(.+)$/gm, \"<h4>$1</h4>\")\n  html = html.replace(/^###\\s+(.+)$/gm, \"<h3>$1</h3>\")\n  html = html.replace(/^##\\s+(.+)$/gm, \"<h2>$1</h2>\")\n  html = html.replace(/^#\\s+(.+)$/gm, \"<h1>$1</h1>\")\n  // Bold + italic (greedy bold first, then italic).\n  html = html.replace(/\\*\\*(.+?)\\*\\*/g, \"<strong>$1</strong>\")\n  html = html.replace(/\\*(.+?)\\*/g, \"<em>$1</em>\")\n  // Inline code.\n  html = html.replace(/`([^`]+)`/g, \"<code>$1</code>\")\n  // Links [text](url).\n  html = html.replace(\n    /\\[([^\\]]+)\\]\\(([^)]+)\\)/g,\n    '<a href=\"$2\" rel=\"noopener noreferrer\" class=\"underline\">$1</a>',\n  )\n  // Unordered lists (consecutive lines starting with - or *).\n  html = html.replace(/(^|\\n)([-*])\\s+(.+)/g, \"$1<li>$3</li>\")\n  html = html.replace(/(<li>.*<\\/li>)/gs, (m) => `<ul>${m}</ul>`)\n  // Paragraph wrap remaining bare lines.\n  html = html\n    .split(/\\n{2,}/)\n    .map((block) => {\n      const trimmed = block.trim()\n      if (!trimmed) {\n        return \"\"\n      }\n      if (/^<(h[1-6]|ul|ol|li|pre|code|a|strong|em)/.test(trimmed)) {\n        return trimmed\n      }\n      return `<p>${trimmed}</p>`\n    })\n    .join(\"\\n\")\n  return html\n}\n\nfunction escapeHtml(input: string): string {\n  return input\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\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=\"markdown-editor\"\n  >\n    <div class=\"grid grid-cols-1 gap-3 lg:grid-cols-2\">\n      <textarea\n        :id=\"id\"\n        :name=\"name ?? undefined\"\n        :placeholder=\"placeholder ?? 'Write markdown here...'\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :rows=\"rows\"\n        :value=\"source\"\n        :data-element-name=\"name ?? undefined\"\n        data-testid=\"markdown-editor-source\"\n        class=\"font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        @input=\"onInput\"\n      />\n      <div\n        class=\"prose prose-sm max-w-none rounded-md border bg-muted/30 px-3 py-2 dark:prose-invert\"\n        data-testid=\"markdown-editor-preview\"\n        v-html=\"previewHtml\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","source","computed","onInput","event","target","previewHtml","renderMarkdown","input","html","escapeHtml","m","block","trimmed","_createBlock","_unref","FieldFrame","_createElementVNode","_hoisted_1","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,UAAMA,IAAQC,EAA0BC,GAAC,YAAY,GAE/CC,IAASC,EAAiB,MAAMJ,EAAM,SAAS,EAAE;AAEvD,aAASK,EAAQC,GAAoB;AACnC,YAAMC,IAASD,EAAM;AACrB,MAAAN,EAAM,SAAQO,KAAA,gBAAAA,EAAQ,UAAS;AAAA,IACjC;AAEA,UAAMC,IAAcJ,EAAiB,MAAMK,EAAeN,EAAO,KAAK,CAAC;AAEvE,aAASM,EAAeC,GAAuB;AAC7C,UAAI,CAACA;AACH,eAAO;AAET,UAAIC,IAAOC,EAAWF,CAAK;AAE3B,aAAAC,IAAOA,EAAK,QAAQ,qBAAqB,aAAa,GACtDA,IAAOA,EAAK,QAAQ,oBAAoB,aAAa,GACrDA,IAAOA,EAAK,QAAQ,mBAAmB,aAAa,GACpDA,IAAOA,EAAK,QAAQ,kBAAkB,aAAa,GACnDA,IAAOA,EAAK,QAAQ,iBAAiB,aAAa,GAClDA,IAAOA,EAAK,QAAQ,gBAAgB,aAAa,GAEjDA,IAAOA,EAAK,QAAQ,kBAAkB,qBAAqB,GAC3DA,IAAOA,EAAK,QAAQ,cAAc,aAAa,GAE/CA,IAAOA,EAAK,QAAQ,cAAc,iBAAiB,GAEnDA,IAAOA,EAAK;AAAA,QACV;AAAA,QACA;AAAA,MAAA,GAGFA,IAAOA,EAAK,QAAQ,wBAAwB,eAAe,GAC3DA,IAAOA,EAAK,QAAQ,oBAAoB,CAACE,MAAM,OAAOA,CAAC,OAAO,GAE9DF,IAAOA,EACJ,MAAM,QAAQ,EACd,IAAI,CAACG,MAAU;AACd,cAAMC,IAAUD,EAAM,KAAA;AACtB,eAAKC,IAGD,2CAA2C,KAAKA,CAAO,IAClDA,IAEF,MAAMA,CAAO,SALX;AAAA,MAMX,CAAC,EACA,KAAK;AAAA,CAAI,GACLJ;AAAA,IACT;AAEA,aAASC,EAAWF,GAAuB;AACzC,aAAOA,EACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM;AAAA,IACzB;2BAKEM,EA+BaC,EAAAC,CAAA,GAAA;AAAA,MA9BV,OAAOhB,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,MACT,eAAY;AAAA,IAAA;iBAEZ,MAqBM;AAAA,QArBNiB,EAqBM,OArBNC,GAqBM;AAAA,UApBJD,EAcE,YAAA;AAAA,YAbC,IAAIjB,EAAA;AAAA,YACJ,MAAMA,EAAA,QAAQ;AAAA,YACd,aAAaA,EAAA,eAAW;AAAA,YACxB,UAAUA,EAAA;AAAA,YACV,UAAUA,EAAA;AAAA,YACV,UAAUA,EAAA;AAAA,YACV,MAAMA,EAAA;AAAA,YACN,OAAOC,EAAA;AAAA,YACP,qBAAmBD,EAAA,QAAQ;AAAA,YAC5B,eAAY;AAAA,YACZ,OAAKmB,EAAA,CAAC,8MACEnB,EAAA,OAAO,SAAM,wCAAA,EAAA,CAAA;AAAA,YACpB,SAAAG;AAAA,UAAA;UAEHc,EAIE,OAAA;AAAA,YAHA,OAAM;AAAA,YACN,eAAY;AAAA,YACZ,WAAQX,EAAA;AAAA,UAAA;;;;;;;"}

package/dist/components/compositions/elements/editor/RichTextEditor.vue.js

@@ -0,0 +1,5 @@
+import f from "./RichTextEditor.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=RichTextEditor.vue.js.map

package/dist/components/compositions/elements/editor/RichTextEditor.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}