@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/HtmlEditor-DmR-g-YR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlEditor-DmR-g-YR.js","names":[],"sources":["../../src/components/compositions/elements/editor/HtmlEditor.vue","../../src/components/compositions/elements/editor/HtmlEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { EditorContent, Extension, Node, useEditor } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport TextAlign from \"@tiptap/extension-text-align\"\nimport { BackgroundColor, Color, FontFamily, TextStyle } from \"@tiptap/extension-text-style\"\nimport Link from \"@tiptap/extension-link\"\nimport Image from \"@tiptap/extension-image\"\nimport { Table, TableRow, TableCell, TableHeader } from \"@tiptap/extension-table\"\nimport {\n  AlignCenter,\n  AlignLeft,\n  AlignRight,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Bold,\n  Code,\n  Combine,\n  Heading,\n  Heading1,\n  Heading2,\n  Heading3,\n  Heading4,\n  Heading5,\n  Heading6,\n  Highlighter,\n  ImageIcon,\n  Italic,\n  Link2,\n  List,\n  ListOrdered,\n  Minus,\n  Palette,\n  Quote,\n  Redo,\n  Scissors,\n  Strikethrough,\n  Table2,\n  Trash2,\n  Type,\n  Underline as UnderlineIcon,\n  Undo,\n  X,\n} from \"@lucide/vue\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\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  minHeight?: string\n}\n\nconst props = withDefaults(defineProps<HtmlEditorProps>(), {\n  errors: () => [],\n  minHeight: \"14rem\",\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\n// ---------------------------------------------------------------------------\n// Custom node: preserve <video> tags\n// ---------------------------------------------------------------------------\n\nconst VideoNode = Node.create({\n  name: \"video\",\n  group: \"block\",\n  content: \"block*\",\n  addAttributes() {\n    return {\n      src: { default: null },\n      width: { default: \"320\" },\n      height: { default: \"240\" },\n      controls: {\n        default: true,\n        parseHTML: (el: HTMLElement) => el.hasAttribute(\"controls\"),\n        renderHTML: (a: Record<string, unknown>) => (a.controls ? { controls: \"\" } : {}),\n      },\n    }\n  },\n  parseHTML() {\n    return [{ tag: \"video\" }]\n  },\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {\n    return [\"video\", HTMLAttributes, 0]\n  },\n})\n\n// Extended Image to pass through style attribute\nconst ExtendedImage = Image.extend({\n  addAttributes() {\n    return {\n      src: { default: \"\" },\n      alt: { default: undefined },\n      title: { default: undefined },\n      style: { default: undefined },\n    }\n  },\n})\n\n// ---------------------------------------------------------------------------\n// Font families\n// ---------------------------------------------------------------------------\n\nconst FONTS: { label: string; value: string }[] = [\n  { label: \"Arial\", value: \"Arial, sans-serif\" },\n  { label: \"Verdana\", value: \"Verdana, sans-serif\" },\n  { label: \"Tahoma\", value: \"Tahoma, sans-serif\" },\n  { label: \"Times New Roman\", value: \"'Times New Roman', serif\" },\n  { label: \"Georgia\", value: \"Georgia, serif\" },\n  { label: \"Courier New\", value: \"'Courier New', monospace\" },\n]\n\n// ---------------------------------------------------------------------------\n// Editor\n// ---------------------------------------------------------------------------\n\nconst isInert = computed(() => Boolean(props.disabled || props.readonly))\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !isInert.value,\n  extensions: [\n    // StarterKit (tiptap v3+) bundles Underline and Link. We disable its\n    // built-in Link so we can re-add it with `openOnClick: false`. We\n    // keep StarterKit's Underline — it needs no custom config.\n    StarterKit.configure({ link: false }),\n    TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n    TextStyle,\n    Color,\n    BackgroundColor,\n    FontFamily.configure({ types: [\"textStyle\"] }),\n    Link.configure({ openOnClick: false }),\n    ExtendedImage.configure({ inline: false, allowBase64: true }),\n    Table.configure({ resizable: true }),\n    TableRow,\n    TableHeader,\n    TableCell,\n    VideoNode,\n    // Suppress unused Extension import warning — it's used by BackgroundColor above\n    Extension.create({ name: \"_noop\" }),\n  ].filter((e) => e.name !== \"_noop\"),\n  editorProps: {\n    attributes: { class: \"focus:outline-none\" },\n  },\n  onUpdate: () => {\n    if (editor.value) emit(\"update:modelValue\", editor.value.getHTML())\n  },\n  onSelectionUpdate: () => {\n    syncFormattingState()\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const e = editor.value\n    if (!e) return\n    const next = value ?? \"\"\n    if (next === e.getHTML()) return\n    e.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(isInert, (v) => {\n  editor.value?.setEditable(!v)\n})\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nonMounted(() => {\n  nextTick(() => {\n    const e = editor.value\n    if (e && props.modelValue && e.isEmpty) {\n      e.commands.setContent(props.modelValue, { emitUpdate: false })\n    }\n  })\n})\n\n// ---------------------------------------------------------------------------\n// Formatting state tracking\n// ---------------------------------------------------------------------------\n\nconst currentHeading = ref<number | null>(null)\nconst currentAlign = ref<\"left\" | \"center\" | \"right\">(\"left\")\nconst currentFont = ref<string | null>(null)\nconst currentTextColor = ref<string>(\"\")\nconst currentBgColor = ref<string>(\"\")\n\nfunction syncFormattingState(): void {\n  const e = editor.value\n  if (!e) return\n\n  currentHeading.value = null\n  for (let i = 1; i <= 6; i++) {\n    if (e.isActive(\"heading\", { level: i })) {\n      currentHeading.value = i\n      break\n    }\n  }\n\n  if (e.isActive({ textAlign: \"center\" })) currentAlign.value = \"center\"\n  else if (e.isActive({ textAlign: \"right\" })) currentAlign.value = \"right\"\n  else currentAlign.value = \"left\"\n\n  currentFont.value = FONTS.find((f) => e.isActive(\"textStyle\", { fontFamily: f.value }))?.value ?? null\n\n  const attrs = e.getAttributes(\"textStyle\") as Record<string, unknown>\n  currentTextColor.value = typeof attrs.color === \"string\" ? attrs.color : \"\"\n  currentBgColor.value = typeof attrs.backgroundColor === \"string\" ? attrs.backgroundColor : \"\"\n}\n\n// ---------------------------------------------------------------------------\n// Toolbar helpers\n// ---------------------------------------------------------------------------\n\nfunction isActive(name: string, attrs?: Record<string, unknown>): boolean {\n  const e = editor.value\n  if (!e) return false\n  return attrs ? e.isActive(name, attrs) : e.isActive(name)\n}\n\nfunction setHeading(level: 1 | 2 | 3 | 4 | 5 | 6): void {\n  editor.value?.chain().focus().setHeading({ level }).run()\n  currentHeading.value = level\n}\n\nfunction clearHeading(): void {\n  editor.value?.chain().focus().setParagraph().run()\n  currentHeading.value = null\n}\n\nconst headingIcon = computed(() => {\n  switch (currentHeading.value) {\n    case 1: return Heading1\n    case 2: return Heading2\n    case 3: return Heading3\n    case 4: return Heading4\n    case 5: return Heading5\n    case 6: return Heading6\n    default: return Heading\n  }\n})\n\nconst alignIcon = computed(() => {\n  if (currentAlign.value === \"center\") return AlignCenter\n  if (currentAlign.value === \"right\") return AlignRight\n  return AlignLeft\n})\n\nfunction setAlign(align: \"left\" | \"center\" | \"right\"): void {\n  editor.value?.chain().focus().setTextAlign(align).run()\n  currentAlign.value = align\n}\n\nfunction setFont(value: string): void {\n  editor.value?.chain().focus().unsetFontFamily().setFontFamily(value).run()\n  currentFont.value = value\n}\n\nfunction clearFont(): void {\n  editor.value?.chain().focus().unsetFontFamily().run()\n  currentFont.value = null\n}\n\n// Color commands are added by BackgroundColor/Color extensions — cast via unknown\nfunction applyTextColor(color: string): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetColor()?.setColor(color)?.run()\n  currentTextColor.value = color\n}\n\nfunction clearTextColor(): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetColor()?.run()\n  currentTextColor.value = \"\"\n}\n\nfunction applyBgColor(color: string): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetBackgroundColor()?.setBackgroundColor(color)?.run()\n  currentBgColor.value = color\n}\n\nfunction clearBgColor(): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetBackgroundColor()?.run()\n  currentBgColor.value = \"\"\n}\n\nfunction toggleList(type: \"bullet\" | \"ordered\"): void {\n  if (type === \"bullet\") editor.value?.chain().focus().toggleBulletList().run()\n  else editor.value?.chain().focus().toggleOrderedList().run()\n}\n\n// ---------------------------------------------------------------------------\n// Table\n// ---------------------------------------------------------------------------\n\nconst tableHoverRows = ref(2)\nconst tableHoverCols = ref(2)\n\n/** Flat list for the 4×6 table creation grid */\nconst tableGridCells = computed(() => {\n  const cells: { r: number; c: number }[] = []\n  for (let r = 1; r <= 4; r++) {\n    for (let c = 1; c <= 6; c++) {\n      cells.push({ r, c })\n    }\n  }\n  return cells\n})\n\nfunction insertTable(): void {\n  editor.value\n    ?.chain()\n    .focus()\n    .insertTable({ rows: tableHoverRows.value, cols: tableHoverCols.value, withHeaderRow: true })\n    .run()\n}\n\n// ---------------------------------------------------------------------------\n// Link dialog\n// ---------------------------------------------------------------------------\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref(\"\")\nconst linkText = ref(\"\")\nconst linkTargetBlank = ref(true)\nconst isEditingLink = ref(false)\n\nfunction openLinkDialog(): void {\n  const e = editor.value\n  if (!e) return\n  isEditingLink.value = e.isActive(\"link\")\n  if (isEditingLink.value) {\n    e.chain().focus().extendMarkRange(\"link\").run()\n    const attrs = e.getAttributes(\"link\") as Record<string, unknown>\n    linkUrl.value = typeof attrs.href === \"string\" ? attrs.href : \"\"\n    linkTargetBlank.value = attrs.target === \"_blank\"\n    const { from, to } = e.state.selection\n    linkText.value = e.state.doc.textBetween(from, to, \" \")\n  } else {\n    const { from, to } = e.state.selection\n    linkText.value = e.state.doc.textBetween(from, to, \" \")\n    linkUrl.value = \"https://\"\n    linkTargetBlank.value = true\n  }\n  if (!linkText.value) linkText.value = \"Link\"\n  linkDialogOpen.value = true\n}\n\nfunction applyLink(): void {\n  const e = editor.value\n  if (!e || !linkUrl.value) return\n  if (e.isActive(\"link\")) e.chain().focus().unsetLink().run()\n  const target = linkTargetBlank.value ? \"_blank\" : \"_self\"\n  const { from, to } = e.state.selection\n  if (from === to) {\n    e.chain().focus().insertContent(`<a href=\"${linkUrl.value}\" target=\"${target}\">${linkText.value}</a>`).run()\n  } else {\n    e.chain().focus().extendMarkRange(\"link\").setLink({ href: linkUrl.value, target }).run()\n  }\n  linkDialogOpen.value = false\n}\n\nfunction removeLink(): void {\n  editor.value?.chain().focus().extendMarkRange(\"link\").unsetLink().run()\n  linkDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// Image dialog\n// ---------------------------------------------------------------------------\n\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref(\"\")\nconst imageAlt = ref(\"\")\nconst imageStyle = ref(\"\")\nconst isEditingImage = ref(false)\n\nfunction openImageDialog(): void {\n  const e = editor.value\n  if (!e) return\n  isEditingImage.value = e.isActive(\"image\")\n  if (isEditingImage.value) {\n    const attrs = e.getAttributes(\"image\") as Record<string, unknown>\n    imageUrl.value = typeof attrs.src === \"string\" ? attrs.src : \"\"\n    imageAlt.value = typeof attrs.alt === \"string\" ? attrs.alt : \"\"\n    imageStyle.value = typeof attrs.style === \"string\" ? attrs.style : \"\"\n  } else {\n    imageUrl.value = \"\"\n    imageAlt.value = \"\"\n    imageStyle.value = \"width: auto; height: auto; max-width: 100%;\"\n  }\n  imageDialogOpen.value = true\n}\n\nfunction applyImage(): void {\n  const e = editor.value\n  if (!e || !imageUrl.value) return\n  const attrs = {\n    src: imageUrl.value,\n    alt: imageAlt.value || undefined,\n    style: imageStyle.value || undefined,\n  }\n  if (isEditingImage.value) {\n    e.chain().focus().updateAttributes(\"image\", attrs).run()\n  } else {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ;(e.chain().focus() as any).setImage(attrs).run()\n  }\n  imageDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// HTML source dialog\n// ---------------------------------------------------------------------------\n\nconst sourceDialogOpen = ref(false)\nconst sourceHtml = ref(\"\")\n\nfunction openSourceDialog(): void {\n  if (!editor.value) return\n  sourceHtml.value = editor.value.getHTML()\n  sourceDialogOpen.value = true\n}\n\nfunction applySource(): void {\n  if (!editor.value) return\n  editor.value.commands.setContent(sourceHtml.value)\n  emit(\"update:modelValue\", sourceHtml.value)\n  sourceDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// Misc\n// ---------------------------------------------------------------------------\n\nconst hasErrors = computed(() => props.errors.length > 0)\nconst contentStyle = computed(() => ({ minHeight: props.minHeight }))\n\nfunction btnClass(active: boolean): string {\n  return cn(\"h-7 w-7 p-0 shrink-0\", active ? \"bg-muted text-foreground\" : \"text-muted-foreground\")\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\n      :class=\"cn(\n        'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n        isInert ? 'opacity-60' : '',\n      )\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <!-- ----------------------------------------------------------------- -->\n      <!-- Toolbar                                                            -->\n      <!-- ----------------------------------------------------------------- -->\n      <div\n        class=\"flex flex-col border-b bg-muted/30\"\n        :class=\"isInert ? 'pointer-events-none' : ''\"\n        role=\"toolbar\"\n        aria-label=\"HTML formatting\"\n        data-testid=\"html-editor-toolbar\"\n      >\n        <!-- Row 1: headings · inline formatting · blockquote/hr · undo/redo · source -->\n        <div class=\"flex flex-wrap items-center gap-0.5 border-b border-border/40 px-1.5 py-1\">\n          <!-- Heading -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentHeading !== null)\" title=\"Heading\">\n                <component :is=\"headingIcon\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-44\">\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Heading</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem :class=\"currentHeading === 1 ? 'bg-muted' : ''\" @click=\"setHeading(1)\">\n                <Heading1 class=\"mr-2 h-4 w-4\" />Heading 1\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 2 ? 'bg-muted' : ''\" @click=\"setHeading(2)\">\n                <Heading2 class=\"mr-2 h-4 w-4\" />Heading 2\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 3 ? 'bg-muted' : ''\" @click=\"setHeading(3)\">\n                <Heading3 class=\"mr-2 h-4 w-4\" />Heading 3\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 4 ? 'bg-muted' : ''\" @click=\"setHeading(4)\">\n                <Heading4 class=\"mr-2 h-4 w-4\" />Heading 4\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 5 ? 'bg-muted' : ''\" @click=\"setHeading(5)\">\n                <Heading5 class=\"mr-2 h-4 w-4\" />Heading 5\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 6 ? 'bg-muted' : ''\" @click=\"setHeading(6)\">\n                <Heading6 class=\"mr-2 h-4 w-4\" />Heading 6\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem @click=\"clearHeading\">\n                <X class=\"mr-2 h-4 w-4\" />Clear heading\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('bold'))\" title=\"Bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"><Bold class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('italic'))\" title=\"Italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"><Italic class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('underline'))\" title=\"Underline\"\n            @click=\"editor?.chain().focus().toggleUnderline().run()\"><UnderlineIcon class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('strike'))\" title=\"Strikethrough\"\n            @click=\"editor?.chain().focus().toggleStrike().run()\"><Strikethrough class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('blockquote'))\" title=\"Blockquote\"\n            @click=\"editor?.chain().focus().toggleBlockquote().run()\"><Quote class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Horizontal rule\"\n            @click=\"editor?.chain().focus().setHorizontalRule().run()\"><Minus class=\"h-4 w-4\" /></Button>\n\n          <div class=\"flex-1\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Undo\"\n            :disabled=\"!editor?.can().chain().focus().undo().run()\"\n            @click=\"editor?.chain().focus().undo().run()\"><Undo class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Redo\"\n            :disabled=\"!editor?.can().chain().focus().redo().run()\"\n            @click=\"editor?.chain().focus().redo().run()\"><Redo class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Edit HTML source\"\n            @click=\"openSourceDialog\"><Code class=\"h-4 w-4\" /></Button>\n        </div>\n\n        <!-- Row 2: align · font · colors · link/image · lists · table -->\n        <div class=\"flex flex-wrap items-center gap-0.5 px-1.5 py-1\">\n          <!-- Align -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentAlign !== 'left')\" title=\"Text alignment\">\n                <component :is=\"alignIcon\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-36\">\n              <DropdownMenuItem :class=\"currentAlign === 'left' ? 'bg-muted' : ''\" @click=\"setAlign('left')\">\n                <AlignLeft class=\"mr-2 h-4 w-4\" />Left\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentAlign === 'center' ? 'bg-muted' : ''\" @click=\"setAlign('center')\">\n                <AlignCenter class=\"mr-2 h-4 w-4\" />Center\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentAlign === 'right' ? 'bg-muted' : ''\" @click=\"setAlign('right')\">\n                <AlignRight class=\"mr-2 h-4 w-4\" />Right\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Font family -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentFont !== null)\" title=\"Font family\">\n                <Type class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-52\">\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Font family</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                v-for=\"font in FONTS\"\n                :key=\"font.value\"\n                :class=\"currentFont === font.value ? 'bg-muted' : ''\"\n                :style=\"`font-family: ${font.value}`\"\n                @click=\"setFont(font.value)\"\n              >\n                {{ font.label }}\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem @click=\"clearFont\">\n                <X class=\"mr-2 h-4 w-4\" />Use default\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <!-- Text color -->\n          <Popover>\n            <PopoverTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(!!currentTextColor)\" title=\"Text color\">\n                <Palette class=\"h-4 w-4\" :style=\"currentTextColor ? { color: currentTextColor } : {}\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent class=\"w-52 p-3\" align=\"start\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Text color</p>\n              <div class=\"flex items-center gap-2\">\n                <input\n                  type=\"color\"\n                  :value=\"currentTextColor || '#000000'\"\n                  class=\"h-8 w-8 cursor-pointer rounded border border-input p-0.5\"\n                  @input=\"applyTextColor(($event.target as HTMLInputElement).value)\"\n                />\n                <Input\n                  :model-value=\"currentTextColor\"\n                  placeholder=\"#000000\"\n                  class=\"h-7 font-mono text-xs\"\n                  maxlength=\"7\"\n                  @blur=\"applyTextColor(($event.target as HTMLInputElement).value)\"\n                />\n              </div>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"mt-2 w-full text-xs\" @click=\"clearTextColor\">\n                <X class=\"mr-1 h-3 w-3\" />Clear color\n              </Button>\n            </PopoverContent>\n          </Popover>\n\n          <!-- Highlight / background color -->\n          <Popover>\n            <PopoverTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(!!currentBgColor)\" title=\"Highlight color\">\n                <Highlighter class=\"h-4 w-4\" :style=\"currentBgColor ? { color: currentBgColor } : {}\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent class=\"w-52 p-3\" align=\"start\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Highlight color</p>\n              <div class=\"flex items-center gap-2\">\n                <input\n                  type=\"color\"\n                  :value=\"currentBgColor || '#ffff00'\"\n                  class=\"h-8 w-8 cursor-pointer rounded border border-input p-0.5\"\n                  @input=\"applyBgColor(($event.target as HTMLInputElement).value)\"\n                />\n                <Input\n                  :model-value=\"currentBgColor\"\n                  placeholder=\"#ffff00\"\n                  class=\"h-7 font-mono text-xs\"\n                  maxlength=\"7\"\n                  @blur=\"applyBgColor(($event.target as HTMLInputElement).value)\"\n                />\n              </div>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"mt-2 w-full text-xs\" @click=\"clearBgColor\">\n                <X class=\"mr-1 h-3 w-3\" />Clear highlight\n              </Button>\n            </PopoverContent>\n          </Popover>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Link -->\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('link'))\" title=\"Insert / edit link\"\n            @click=\"openLinkDialog\"><Link2 class=\"h-4 w-4\" /></Button>\n\n          <!-- Image -->\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('image'))\" title=\"Insert / edit image\"\n            @click=\"openImageDialog\"><ImageIcon class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Lists -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('bulletList') || isActive('orderedList'))\" title=\"Lists\">\n                <component :is=\"isActive('orderedList') ? ListOrdered : List\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-40\">\n              <DropdownMenuItem :class=\"isActive('bulletList') ? 'bg-muted' : ''\" @click=\"toggleList('bullet')\">\n                <List class=\"mr-2 h-4 w-4\" />Bullet list\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"isActive('orderedList') ? 'bg-muted' : ''\" @click=\"toggleList('ordered')\">\n                <ListOrdered class=\"mr-2 h-4 w-4\" />Ordered list\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Table -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('table'))\" title=\"Table\">\n                <Table2 class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-52\">\n              <!-- Create-table grid (only when not inside a table) -->\n              <template v-if=\"!isActive('table')\">\n                <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">\n                  Insert {{ tableHoverRows }}×{{ tableHoverCols }} table\n                </DropdownMenuLabel>\n                <div class=\"px-2 pb-2\">\n                  <div class=\"grid gap-0.5\" style=\"grid-template-columns: repeat(6, 1.25rem)\">\n                    <button\n                      v-for=\"cell in tableGridCells\"\n                      :key=\"`${cell.r}-${cell.c}`\"\n                      type=\"button\"\n                      class=\"h-5 w-5 rounded-sm border transition-colors\"\n                      :class=\"cell.r <= tableHoverRows && cell.c <= tableHoverCols\n                        ? 'bg-primary border-primary'\n                        : 'bg-muted/50 border-border hover:bg-muted'\"\n                      @mouseover=\"tableHoverRows = cell.r; tableHoverCols = cell.c\"\n                      @click=\"insertTable\"\n                    />\n                  </div>\n                </div>\n                <DropdownMenuSeparator />\n              </template>\n\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Column</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addColumnBefore().run()\">\n                <ArrowLeft class=\"mr-2 h-4 w-4\" />Add before\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addColumnAfter().run()\">\n                <ArrowRight class=\"mr-2 h-4 w-4\" />Add after\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().deleteColumn().run()\">\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete column\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Row</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addRowBefore().run()\">\n                <ArrowUp class=\"mr-2 h-4 w-4\" />Add before\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addRowAfter().run()\">\n                <ArrowDown class=\"mr-2 h-4 w-4\" />Add after\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().deleteRow().run()\">\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete row\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Cell</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().mergeCells().run()\">\n                <Combine class=\"mr-2 h-4 w-4\" />Merge cells\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().splitCell().run()\">\n                <Scissors class=\"mr-2 h-4 w-4\" />Split cell\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                :disabled=\"!isActive('table')\"\n                class=\"text-destructive focus:text-destructive\"\n                @click=\"editor?.chain().focus().deleteTable().run()\"\n              >\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete table\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <!-- ----------------------------------------------------------------- -->\n      <!-- Editor content area                                                -->\n      <!-- ----------------------------------------------------------------- -->\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"html-editor-content prose prose-sm max-w-none px-3 py-2 dark:prose-invert\n               [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"html-editor-content\"\n        @click=\"editor?.chain().focus().run()\"\n      />\n    </div>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- Link dialog                                                          -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"linkDialogOpen\">\n      <DialogContent class=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>{{ isEditingLink ? 'Edit link' : 'Insert link' }}</DialogTitle>\n        </DialogHeader>\n        <div class=\"grid gap-4 py-2\">\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-link-url\">URL</Label>\n            <Input id=\"html-editor-link-url\" v-model=\"linkUrl\" placeholder=\"https://example.com\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-link-text\">Link text</Label>\n            <Input id=\"html-editor-link-text\" v-model=\"linkText\" placeholder=\"Link text\" />\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Checkbox\n              id=\"html-editor-link-target\"\n              :checked=\"linkTargetBlank\"\n              @update:checked=\"linkTargetBlank = !!$event\"\n            />\n            <Label for=\"html-editor-link-target\" class=\"cursor-pointer font-normal\">Open in new tab</Label>\n          </div>\n        </div>\n        <DialogFooter class=\"flex-row items-center justify-between gap-2\">\n          <Button v-if=\"isEditingLink\" type=\"button\" variant=\"destructive\" size=\"sm\" @click=\"removeLink\">\n            <Trash2 class=\"mr-1.5 h-3.5 w-3.5\" />Remove link\n          </Button>\n          <div class=\"flex gap-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"linkDialogOpen = false\">Cancel</Button>\n            <Button type=\"button\" size=\"sm\" @click=\"applyLink\">Apply</Button>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- Image dialog                                                         -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"imageDialogOpen\">\n      <DialogContent class=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>{{ isEditingImage ? 'Edit image' : 'Insert image' }}</DialogTitle>\n        </DialogHeader>\n        <div class=\"grid gap-4 py-2\">\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-url\">Image URL</Label>\n            <Input id=\"html-editor-img-url\" v-model=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-alt\">Alt text</Label>\n            <Input id=\"html-editor-img-alt\" v-model=\"imageAlt\" placeholder=\"Describe the image\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-style\">\n              Style <span class=\"ml-1 text-xs font-normal text-muted-foreground\">(optional)</span>\n            </Label>\n            <Input id=\"html-editor-img-style\" v-model=\"imageStyle\" placeholder=\"width: 100%; height: auto;\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"imageDialogOpen = false\">Cancel</Button>\n          <Button type=\"button\" size=\"sm\" @click=\"applyImage\">\n            {{ isEditingImage ? 'Update' : 'Insert' }}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- HTML source dialog                                                   -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"sourceDialogOpen\">\n      <DialogContent class=\"max-w-3xl\">\n        <DialogHeader>\n          <DialogTitle>Edit HTML source</DialogTitle>\n        </DialogHeader>\n        <textarea\n          v-model=\"sourceHtml\"\n          class=\"h-96 w-full resize-y rounded-md border border-input bg-background p-3 font-mono text-xs\n                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          spellcheck=\"false\"\n          data-testid=\"html-editor-source\"\n        />\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"sourceDialogOpen = false\">Cancel</Button>\n          <Button type=\"button\" size=\"sm\" @click=\"applySource\">Apply changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </FieldFrame>\n</template>\n\n<style scoped>\n/* Table chrome */\n:deep(.html-editor-content table) {\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  table-layout: fixed;\n  width: 100%;\n}\n\n:deep(.html-editor-content table td),\n:deep(.html-editor-content table th) {\n  border: 2px solid var(--border);\n  box-sizing: border-box;\n  min-width: 1em;\n  padding: 0.375rem 0.5rem;\n  position: relative;\n  vertical-align: top;\n}\n\n:deep(.html-editor-content table th) {\n  background-color: var(--muted);\n  font-weight: 600;\n  text-align: left;\n}\n\n:deep(.html-editor-content table .selectedCell::after) {\n  background: color-mix(in oklch, var(--primary) 15%, transparent);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n}\n\n:deep(.html-editor-content .tableWrapper) {\n  overflow-x: auto;\n}\n\n:deep(.html-editor-content .column-resize-handle) {\n  background-color: var(--primary);\n  bottom: -2px;\n  pointer-events: none;\n  position: absolute;\n  right: -2px;\n  top: 0;\n  width: 4px;\n}\n\n:deep(.html-editor-content .resize-cursor) {\n  cursor: col-resize;\n}\n\n/* Content styling */\n:deep(.html-editor-content a) {\n  color: var(--primary);\n  text-decoration: underline;\n}\n\n:deep(.html-editor-content img) {\n  display: block;\n  margin: 0.75rem 0;\n}\n\n:deep(.html-editor-content img.ProseMirror-selectednode) {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n:deep(.html-editor-content blockquote) {\n  border-left: 3px solid var(--border);\n  color: var(--muted-foreground);\n  font-style: italic;\n  margin-left: 0;\n  padding-left: 1rem;\n}\n\n:deep(.html-editor-content .ProseMirror-focused) {\n  outline: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { EditorContent, Extension, Node, useEditor } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport TextAlign from \"@tiptap/extension-text-align\"\nimport { BackgroundColor, Color, FontFamily, TextStyle } from \"@tiptap/extension-text-style\"\nimport Link from \"@tiptap/extension-link\"\nimport Image from \"@tiptap/extension-image\"\nimport { Table, TableRow, TableCell, TableHeader } from \"@tiptap/extension-table\"\nimport {\n  AlignCenter,\n  AlignLeft,\n  AlignRight,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Bold,\n  Code,\n  Combine,\n  Heading,\n  Heading1,\n  Heading2,\n  Heading3,\n  Heading4,\n  Heading5,\n  Heading6,\n  Highlighter,\n  ImageIcon,\n  Italic,\n  Link2,\n  List,\n  ListOrdered,\n  Minus,\n  Palette,\n  Quote,\n  Redo,\n  Scissors,\n  Strikethrough,\n  Table2,\n  Trash2,\n  Type,\n  Underline as UnderlineIcon,\n  Undo,\n  X,\n} from \"@lucide/vue\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\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  minHeight?: string\n}\n\nconst props = withDefaults(defineProps<HtmlEditorProps>(), {\n  errors: () => [],\n  minHeight: \"14rem\",\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\n// ---------------------------------------------------------------------------\n// Custom node: preserve <video> tags\n// ---------------------------------------------------------------------------\n\nconst VideoNode = Node.create({\n  name: \"video\",\n  group: \"block\",\n  content: \"block*\",\n  addAttributes() {\n    return {\n      src: { default: null },\n      width: { default: \"320\" },\n      height: { default: \"240\" },\n      controls: {\n        default: true,\n        parseHTML: (el: HTMLElement) => el.hasAttribute(\"controls\"),\n        renderHTML: (a: Record<string, unknown>) => (a.controls ? { controls: \"\" } : {}),\n      },\n    }\n  },\n  parseHTML() {\n    return [{ tag: \"video\" }]\n  },\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {\n    return [\"video\", HTMLAttributes, 0]\n  },\n})\n\n// Extended Image to pass through style attribute\nconst ExtendedImage = Image.extend({\n  addAttributes() {\n    return {\n      src: { default: \"\" },\n      alt: { default: undefined },\n      title: { default: undefined },\n      style: { default: undefined },\n    }\n  },\n})\n\n// ---------------------------------------------------------------------------\n// Font families\n// ---------------------------------------------------------------------------\n\nconst FONTS: { label: string; value: string }[] = [\n  { label: \"Arial\", value: \"Arial, sans-serif\" },\n  { label: \"Verdana\", value: \"Verdana, sans-serif\" },\n  { label: \"Tahoma\", value: \"Tahoma, sans-serif\" },\n  { label: \"Times New Roman\", value: \"'Times New Roman', serif\" },\n  { label: \"Georgia\", value: \"Georgia, serif\" },\n  { label: \"Courier New\", value: \"'Courier New', monospace\" },\n]\n\n// ---------------------------------------------------------------------------\n// Editor\n// ---------------------------------------------------------------------------\n\nconst isInert = computed(() => Boolean(props.disabled || props.readonly))\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !isInert.value,\n  extensions: [\n    // StarterKit (tiptap v3+) bundles Underline and Link. We disable its\n    // built-in Link so we can re-add it with `openOnClick: false`. We\n    // keep StarterKit's Underline — it needs no custom config.\n    StarterKit.configure({ link: false }),\n    TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n    TextStyle,\n    Color,\n    BackgroundColor,\n    FontFamily.configure({ types: [\"textStyle\"] }),\n    Link.configure({ openOnClick: false }),\n    ExtendedImage.configure({ inline: false, allowBase64: true }),\n    Table.configure({ resizable: true }),\n    TableRow,\n    TableHeader,\n    TableCell,\n    VideoNode,\n    // Suppress unused Extension import warning — it's used by BackgroundColor above\n    Extension.create({ name: \"_noop\" }),\n  ].filter((e) => e.name !== \"_noop\"),\n  editorProps: {\n    attributes: { class: \"focus:outline-none\" },\n  },\n  onUpdate: () => {\n    if (editor.value) emit(\"update:modelValue\", editor.value.getHTML())\n  },\n  onSelectionUpdate: () => {\n    syncFormattingState()\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const e = editor.value\n    if (!e) return\n    const next = value ?? \"\"\n    if (next === e.getHTML()) return\n    e.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(isInert, (v) => {\n  editor.value?.setEditable(!v)\n})\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nonMounted(() => {\n  nextTick(() => {\n    const e = editor.value\n    if (e && props.modelValue && e.isEmpty) {\n      e.commands.setContent(props.modelValue, { emitUpdate: false })\n    }\n  })\n})\n\n// ---------------------------------------------------------------------------\n// Formatting state tracking\n// ---------------------------------------------------------------------------\n\nconst currentHeading = ref<number | null>(null)\nconst currentAlign = ref<\"left\" | \"center\" | \"right\">(\"left\")\nconst currentFont = ref<string | null>(null)\nconst currentTextColor = ref<string>(\"\")\nconst currentBgColor = ref<string>(\"\")\n\nfunction syncFormattingState(): void {\n  const e = editor.value\n  if (!e) return\n\n  currentHeading.value = null\n  for (let i = 1; i <= 6; i++) {\n    if (e.isActive(\"heading\", { level: i })) {\n      currentHeading.value = i\n      break\n    }\n  }\n\n  if (e.isActive({ textAlign: \"center\" })) currentAlign.value = \"center\"\n  else if (e.isActive({ textAlign: \"right\" })) currentAlign.value = \"right\"\n  else currentAlign.value = \"left\"\n\n  currentFont.value = FONTS.find((f) => e.isActive(\"textStyle\", { fontFamily: f.value }))?.value ?? null\n\n  const attrs = e.getAttributes(\"textStyle\") as Record<string, unknown>\n  currentTextColor.value = typeof attrs.color === \"string\" ? attrs.color : \"\"\n  currentBgColor.value = typeof attrs.backgroundColor === \"string\" ? attrs.backgroundColor : \"\"\n}\n\n// ---------------------------------------------------------------------------\n// Toolbar helpers\n// ---------------------------------------------------------------------------\n\nfunction isActive(name: string, attrs?: Record<string, unknown>): boolean {\n  const e = editor.value\n  if (!e) return false\n  return attrs ? e.isActive(name, attrs) : e.isActive(name)\n}\n\nfunction setHeading(level: 1 | 2 | 3 | 4 | 5 | 6): void {\n  editor.value?.chain().focus().setHeading({ level }).run()\n  currentHeading.value = level\n}\n\nfunction clearHeading(): void {\n  editor.value?.chain().focus().setParagraph().run()\n  currentHeading.value = null\n}\n\nconst headingIcon = computed(() => {\n  switch (currentHeading.value) {\n    case 1: return Heading1\n    case 2: return Heading2\n    case 3: return Heading3\n    case 4: return Heading4\n    case 5: return Heading5\n    case 6: return Heading6\n    default: return Heading\n  }\n})\n\nconst alignIcon = computed(() => {\n  if (currentAlign.value === \"center\") return AlignCenter\n  if (currentAlign.value === \"right\") return AlignRight\n  return AlignLeft\n})\n\nfunction setAlign(align: \"left\" | \"center\" | \"right\"): void {\n  editor.value?.chain().focus().setTextAlign(align).run()\n  currentAlign.value = align\n}\n\nfunction setFont(value: string): void {\n  editor.value?.chain().focus().unsetFontFamily().setFontFamily(value).run()\n  currentFont.value = value\n}\n\nfunction clearFont(): void {\n  editor.value?.chain().focus().unsetFontFamily().run()\n  currentFont.value = null\n}\n\n// Color commands are added by BackgroundColor/Color extensions — cast via unknown\nfunction applyTextColor(color: string): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetColor()?.setColor(color)?.run()\n  currentTextColor.value = color\n}\n\nfunction clearTextColor(): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetColor()?.run()\n  currentTextColor.value = \"\"\n}\n\nfunction applyBgColor(color: string): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetBackgroundColor()?.setBackgroundColor(color)?.run()\n  currentBgColor.value = color\n}\n\nfunction clearBgColor(): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetBackgroundColor()?.run()\n  currentBgColor.value = \"\"\n}\n\nfunction toggleList(type: \"bullet\" | \"ordered\"): void {\n  if (type === \"bullet\") editor.value?.chain().focus().toggleBulletList().run()\n  else editor.value?.chain().focus().toggleOrderedList().run()\n}\n\n// ---------------------------------------------------------------------------\n// Table\n// ---------------------------------------------------------------------------\n\nconst tableHoverRows = ref(2)\nconst tableHoverCols = ref(2)\n\n/** Flat list for the 4×6 table creation grid */\nconst tableGridCells = computed(() => {\n  const cells: { r: number; c: number }[] = []\n  for (let r = 1; r <= 4; r++) {\n    for (let c = 1; c <= 6; c++) {\n      cells.push({ r, c })\n    }\n  }\n  return cells\n})\n\nfunction insertTable(): void {\n  editor.value\n    ?.chain()\n    .focus()\n    .insertTable({ rows: tableHoverRows.value, cols: tableHoverCols.value, withHeaderRow: true })\n    .run()\n}\n\n// ---------------------------------------------------------------------------\n// Link dialog\n// ---------------------------------------------------------------------------\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref(\"\")\nconst linkText = ref(\"\")\nconst linkTargetBlank = ref(true)\nconst isEditingLink = ref(false)\n\nfunction openLinkDialog(): void {\n  const e = editor.value\n  if (!e) return\n  isEditingLink.value = e.isActive(\"link\")\n  if (isEditingLink.value) {\n    e.chain().focus().extendMarkRange(\"link\").run()\n    const attrs = e.getAttributes(\"link\") as Record<string, unknown>\n    linkUrl.value = typeof attrs.href === \"string\" ? attrs.href : \"\"\n    linkTargetBlank.value = attrs.target === \"_blank\"\n    const { from, to } = e.state.selection\n    linkText.value = e.state.doc.textBetween(from, to, \" \")\n  } else {\n    const { from, to } = e.state.selection\n    linkText.value = e.state.doc.textBetween(from, to, \" \")\n    linkUrl.value = \"https://\"\n    linkTargetBlank.value = true\n  }\n  if (!linkText.value) linkText.value = \"Link\"\n  linkDialogOpen.value = true\n}\n\nfunction applyLink(): void {\n  const e = editor.value\n  if (!e || !linkUrl.value) return\n  if (e.isActive(\"link\")) e.chain().focus().unsetLink().run()\n  const target = linkTargetBlank.value ? \"_blank\" : \"_self\"\n  const { from, to } = e.state.selection\n  if (from === to) {\n    e.chain().focus().insertContent(`<a href=\"${linkUrl.value}\" target=\"${target}\">${linkText.value}</a>`).run()\n  } else {\n    e.chain().focus().extendMarkRange(\"link\").setLink({ href: linkUrl.value, target }).run()\n  }\n  linkDialogOpen.value = false\n}\n\nfunction removeLink(): void {\n  editor.value?.chain().focus().extendMarkRange(\"link\").unsetLink().run()\n  linkDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// Image dialog\n// ---------------------------------------------------------------------------\n\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref(\"\")\nconst imageAlt = ref(\"\")\nconst imageStyle = ref(\"\")\nconst isEditingImage = ref(false)\n\nfunction openImageDialog(): void {\n  const e = editor.value\n  if (!e) return\n  isEditingImage.value = e.isActive(\"image\")\n  if (isEditingImage.value) {\n    const attrs = e.getAttributes(\"image\") as Record<string, unknown>\n    imageUrl.value = typeof attrs.src === \"string\" ? attrs.src : \"\"\n    imageAlt.value = typeof attrs.alt === \"string\" ? attrs.alt : \"\"\n    imageStyle.value = typeof attrs.style === \"string\" ? attrs.style : \"\"\n  } else {\n    imageUrl.value = \"\"\n    imageAlt.value = \"\"\n    imageStyle.value = \"width: auto; height: auto; max-width: 100%;\"\n  }\n  imageDialogOpen.value = true\n}\n\nfunction applyImage(): void {\n  const e = editor.value\n  if (!e || !imageUrl.value) return\n  const attrs = {\n    src: imageUrl.value,\n    alt: imageAlt.value || undefined,\n    style: imageStyle.value || undefined,\n  }\n  if (isEditingImage.value) {\n    e.chain().focus().updateAttributes(\"image\", attrs).run()\n  } else {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ;(e.chain().focus() as any).setImage(attrs).run()\n  }\n  imageDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// HTML source dialog\n// ---------------------------------------------------------------------------\n\nconst sourceDialogOpen = ref(false)\nconst sourceHtml = ref(\"\")\n\nfunction openSourceDialog(): void {\n  if (!editor.value) return\n  sourceHtml.value = editor.value.getHTML()\n  sourceDialogOpen.value = true\n}\n\nfunction applySource(): void {\n  if (!editor.value) return\n  editor.value.commands.setContent(sourceHtml.value)\n  emit(\"update:modelValue\", sourceHtml.value)\n  sourceDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// Misc\n// ---------------------------------------------------------------------------\n\nconst hasErrors = computed(() => props.errors.length > 0)\nconst contentStyle = computed(() => ({ minHeight: props.minHeight }))\n\nfunction btnClass(active: boolean): string {\n  return cn(\"h-7 w-7 p-0 shrink-0\", active ? \"bg-muted text-foreground\" : \"text-muted-foreground\")\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\n      :class=\"cn(\n        'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n        isInert ? 'opacity-60' : '',\n      )\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <!-- ----------------------------------------------------------------- -->\n      <!-- Toolbar                                                            -->\n      <!-- ----------------------------------------------------------------- -->\n      <div\n        class=\"flex flex-col border-b bg-muted/30\"\n        :class=\"isInert ? 'pointer-events-none' : ''\"\n        role=\"toolbar\"\n        aria-label=\"HTML formatting\"\n        data-testid=\"html-editor-toolbar\"\n      >\n        <!-- Row 1: headings · inline formatting · blockquote/hr · undo/redo · source -->\n        <div class=\"flex flex-wrap items-center gap-0.5 border-b border-border/40 px-1.5 py-1\">\n          <!-- Heading -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentHeading !== null)\" title=\"Heading\">\n                <component :is=\"headingIcon\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-44\">\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Heading</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem :class=\"currentHeading === 1 ? 'bg-muted' : ''\" @click=\"setHeading(1)\">\n                <Heading1 class=\"mr-2 h-4 w-4\" />Heading 1\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 2 ? 'bg-muted' : ''\" @click=\"setHeading(2)\">\n                <Heading2 class=\"mr-2 h-4 w-4\" />Heading 2\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 3 ? 'bg-muted' : ''\" @click=\"setHeading(3)\">\n                <Heading3 class=\"mr-2 h-4 w-4\" />Heading 3\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 4 ? 'bg-muted' : ''\" @click=\"setHeading(4)\">\n                <Heading4 class=\"mr-2 h-4 w-4\" />Heading 4\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 5 ? 'bg-muted' : ''\" @click=\"setHeading(5)\">\n                <Heading5 class=\"mr-2 h-4 w-4\" />Heading 5\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 6 ? 'bg-muted' : ''\" @click=\"setHeading(6)\">\n                <Heading6 class=\"mr-2 h-4 w-4\" />Heading 6\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem @click=\"clearHeading\">\n                <X class=\"mr-2 h-4 w-4\" />Clear heading\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('bold'))\" title=\"Bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"><Bold class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('italic'))\" title=\"Italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"><Italic class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('underline'))\" title=\"Underline\"\n            @click=\"editor?.chain().focus().toggleUnderline().run()\"><UnderlineIcon class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('strike'))\" title=\"Strikethrough\"\n            @click=\"editor?.chain().focus().toggleStrike().run()\"><Strikethrough class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('blockquote'))\" title=\"Blockquote\"\n            @click=\"editor?.chain().focus().toggleBlockquote().run()\"><Quote class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Horizontal rule\"\n            @click=\"editor?.chain().focus().setHorizontalRule().run()\"><Minus class=\"h-4 w-4\" /></Button>\n\n          <div class=\"flex-1\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Undo\"\n            :disabled=\"!editor?.can().chain().focus().undo().run()\"\n            @click=\"editor?.chain().focus().undo().run()\"><Undo class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Redo\"\n            :disabled=\"!editor?.can().chain().focus().redo().run()\"\n            @click=\"editor?.chain().focus().redo().run()\"><Redo class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Edit HTML source\"\n            @click=\"openSourceDialog\"><Code class=\"h-4 w-4\" /></Button>\n        </div>\n\n        <!-- Row 2: align · font · colors · link/image · lists · table -->\n        <div class=\"flex flex-wrap items-center gap-0.5 px-1.5 py-1\">\n          <!-- Align -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentAlign !== 'left')\" title=\"Text alignment\">\n                <component :is=\"alignIcon\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-36\">\n              <DropdownMenuItem :class=\"currentAlign === 'left' ? 'bg-muted' : ''\" @click=\"setAlign('left')\">\n                <AlignLeft class=\"mr-2 h-4 w-4\" />Left\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentAlign === 'center' ? 'bg-muted' : ''\" @click=\"setAlign('center')\">\n                <AlignCenter class=\"mr-2 h-4 w-4\" />Center\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentAlign === 'right' ? 'bg-muted' : ''\" @click=\"setAlign('right')\">\n                <AlignRight class=\"mr-2 h-4 w-4\" />Right\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Font family -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentFont !== null)\" title=\"Font family\">\n                <Type class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-52\">\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Font family</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                v-for=\"font in FONTS\"\n                :key=\"font.value\"\n                :class=\"currentFont === font.value ? 'bg-muted' : ''\"\n                :style=\"`font-family: ${font.value}`\"\n                @click=\"setFont(font.value)\"\n              >\n                {{ font.label }}\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem @click=\"clearFont\">\n                <X class=\"mr-2 h-4 w-4\" />Use default\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <!-- Text color -->\n          <Popover>\n            <PopoverTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(!!currentTextColor)\" title=\"Text color\">\n                <Palette class=\"h-4 w-4\" :style=\"currentTextColor ? { color: currentTextColor } : {}\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent class=\"w-52 p-3\" align=\"start\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Text color</p>\n              <div class=\"flex items-center gap-2\">\n                <input\n                  type=\"color\"\n                  :value=\"currentTextColor || '#000000'\"\n                  class=\"h-8 w-8 cursor-pointer rounded border border-input p-0.5\"\n                  @input=\"applyTextColor(($event.target as HTMLInputElement).value)\"\n                />\n                <Input\n                  :model-value=\"currentTextColor\"\n                  placeholder=\"#000000\"\n                  class=\"h-7 font-mono text-xs\"\n                  maxlength=\"7\"\n                  @blur=\"applyTextColor(($event.target as HTMLInputElement).value)\"\n                />\n              </div>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"mt-2 w-full text-xs\" @click=\"clearTextColor\">\n                <X class=\"mr-1 h-3 w-3\" />Clear color\n              </Button>\n            </PopoverContent>\n          </Popover>\n\n          <!-- Highlight / background color -->\n          <Popover>\n            <PopoverTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(!!currentBgColor)\" title=\"Highlight color\">\n                <Highlighter class=\"h-4 w-4\" :style=\"currentBgColor ? { color: currentBgColor } : {}\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent class=\"w-52 p-3\" align=\"start\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Highlight color</p>\n              <div class=\"flex items-center gap-2\">\n                <input\n                  type=\"color\"\n                  :value=\"currentBgColor || '#ffff00'\"\n                  class=\"h-8 w-8 cursor-pointer rounded border border-input p-0.5\"\n                  @input=\"applyBgColor(($event.target as HTMLInputElement).value)\"\n                />\n                <Input\n                  :model-value=\"currentBgColor\"\n                  placeholder=\"#ffff00\"\n                  class=\"h-7 font-mono text-xs\"\n                  maxlength=\"7\"\n                  @blur=\"applyBgColor(($event.target as HTMLInputElement).value)\"\n                />\n              </div>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"mt-2 w-full text-xs\" @click=\"clearBgColor\">\n                <X class=\"mr-1 h-3 w-3\" />Clear highlight\n              </Button>\n            </PopoverContent>\n          </Popover>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Link -->\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('link'))\" title=\"Insert / edit link\"\n            @click=\"openLinkDialog\"><Link2 class=\"h-4 w-4\" /></Button>\n\n          <!-- Image -->\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('image'))\" title=\"Insert / edit image\"\n            @click=\"openImageDialog\"><ImageIcon class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Lists -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('bulletList') || isActive('orderedList'))\" title=\"Lists\">\n                <component :is=\"isActive('orderedList') ? ListOrdered : List\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-40\">\n              <DropdownMenuItem :class=\"isActive('bulletList') ? 'bg-muted' : ''\" @click=\"toggleList('bullet')\">\n                <List class=\"mr-2 h-4 w-4\" />Bullet list\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"isActive('orderedList') ? 'bg-muted' : ''\" @click=\"toggleList('ordered')\">\n                <ListOrdered class=\"mr-2 h-4 w-4\" />Ordered list\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Table -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('table'))\" title=\"Table\">\n                <Table2 class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-52\">\n              <!-- Create-table grid (only when not inside a table) -->\n              <template v-if=\"!isActive('table')\">\n                <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">\n                  Insert {{ tableHoverRows }}×{{ tableHoverCols }} table\n                </DropdownMenuLabel>\n                <div class=\"px-2 pb-2\">\n                  <div class=\"grid gap-0.5\" style=\"grid-template-columns: repeat(6, 1.25rem)\">\n                    <button\n                      v-for=\"cell in tableGridCells\"\n                      :key=\"`${cell.r}-${cell.c}`\"\n                      type=\"button\"\n                      class=\"h-5 w-5 rounded-sm border transition-colors\"\n                      :class=\"cell.r <= tableHoverRows && cell.c <= tableHoverCols\n                        ? 'bg-primary border-primary'\n                        : 'bg-muted/50 border-border hover:bg-muted'\"\n                      @mouseover=\"tableHoverRows = cell.r; tableHoverCols = cell.c\"\n                      @click=\"insertTable\"\n                    />\n                  </div>\n                </div>\n                <DropdownMenuSeparator />\n              </template>\n\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Column</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addColumnBefore().run()\">\n                <ArrowLeft class=\"mr-2 h-4 w-4\" />Add before\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addColumnAfter().run()\">\n                <ArrowRight class=\"mr-2 h-4 w-4\" />Add after\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().deleteColumn().run()\">\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete column\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Row</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addRowBefore().run()\">\n                <ArrowUp class=\"mr-2 h-4 w-4\" />Add before\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addRowAfter().run()\">\n                <ArrowDown class=\"mr-2 h-4 w-4\" />Add after\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().deleteRow().run()\">\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete row\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Cell</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().mergeCells().run()\">\n                <Combine class=\"mr-2 h-4 w-4\" />Merge cells\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().splitCell().run()\">\n                <Scissors class=\"mr-2 h-4 w-4\" />Split cell\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                :disabled=\"!isActive('table')\"\n                class=\"text-destructive focus:text-destructive\"\n                @click=\"editor?.chain().focus().deleteTable().run()\"\n              >\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete table\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <!-- ----------------------------------------------------------------- -->\n      <!-- Editor content area                                                -->\n      <!-- ----------------------------------------------------------------- -->\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"html-editor-content prose prose-sm max-w-none px-3 py-2 dark:prose-invert\n               [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"html-editor-content\"\n        @click=\"editor?.chain().focus().run()\"\n      />\n    </div>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- Link dialog                                                          -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"linkDialogOpen\">\n      <DialogContent class=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>{{ isEditingLink ? 'Edit link' : 'Insert link' }}</DialogTitle>\n        </DialogHeader>\n        <div class=\"grid gap-4 py-2\">\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-link-url\">URL</Label>\n            <Input id=\"html-editor-link-url\" v-model=\"linkUrl\" placeholder=\"https://example.com\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-link-text\">Link text</Label>\n            <Input id=\"html-editor-link-text\" v-model=\"linkText\" placeholder=\"Link text\" />\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Checkbox\n              id=\"html-editor-link-target\"\n              :checked=\"linkTargetBlank\"\n              @update:checked=\"linkTargetBlank = !!$event\"\n            />\n            <Label for=\"html-editor-link-target\" class=\"cursor-pointer font-normal\">Open in new tab</Label>\n          </div>\n        </div>\n        <DialogFooter class=\"flex-row items-center justify-between gap-2\">\n          <Button v-if=\"isEditingLink\" type=\"button\" variant=\"destructive\" size=\"sm\" @click=\"removeLink\">\n            <Trash2 class=\"mr-1.5 h-3.5 w-3.5\" />Remove link\n          </Button>\n          <div class=\"flex gap-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"linkDialogOpen = false\">Cancel</Button>\n            <Button type=\"button\" size=\"sm\" @click=\"applyLink\">Apply</Button>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- Image dialog                                                         -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"imageDialogOpen\">\n      <DialogContent class=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>{{ isEditingImage ? 'Edit image' : 'Insert image' }}</DialogTitle>\n        </DialogHeader>\n        <div class=\"grid gap-4 py-2\">\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-url\">Image URL</Label>\n            <Input id=\"html-editor-img-url\" v-model=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-alt\">Alt text</Label>\n            <Input id=\"html-editor-img-alt\" v-model=\"imageAlt\" placeholder=\"Describe the image\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-style\">\n              Style <span class=\"ml-1 text-xs font-normal text-muted-foreground\">(optional)</span>\n            </Label>\n            <Input id=\"html-editor-img-style\" v-model=\"imageStyle\" placeholder=\"width: 100%; height: auto;\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"imageDialogOpen = false\">Cancel</Button>\n          <Button type=\"button\" size=\"sm\" @click=\"applyImage\">\n            {{ isEditingImage ? 'Update' : 'Insert' }}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- HTML source dialog                                                   -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"sourceDialogOpen\">\n      <DialogContent class=\"max-w-3xl\">\n        <DialogHeader>\n          <DialogTitle>Edit HTML source</DialogTitle>\n        </DialogHeader>\n        <textarea\n          v-model=\"sourceHtml\"\n          class=\"h-96 w-full resize-y rounded-md border border-input bg-background p-3 font-mono text-xs\n                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          spellcheck=\"false\"\n          data-testid=\"html-editor-source\"\n        />\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"sourceDialogOpen = false\">Cancel</Button>\n          <Button type=\"button\" size=\"sm\" @click=\"applySource\">Apply changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </FieldFrame>\n</template>\n\n<style scoped>\n/* Table chrome */\n:deep(.html-editor-content table) {\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  table-layout: fixed;\n  width: 100%;\n}\n\n:deep(.html-editor-content table td),\n:deep(.html-editor-content table th) {\n  border: 2px solid var(--border);\n  box-sizing: border-box;\n  min-width: 1em;\n  padding: 0.375rem 0.5rem;\n  position: relative;\n  vertical-align: top;\n}\n\n:deep(.html-editor-content table th) {\n  background-color: var(--muted);\n  font-weight: 600;\n  text-align: left;\n}\n\n:deep(.html-editor-content table .selectedCell::after) {\n  background: color-mix(in oklch, var(--primary) 15%, transparent);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n}\n\n:deep(.html-editor-content .tableWrapper) {\n  overflow-x: auto;\n}\n\n:deep(.html-editor-content .column-resize-handle) {\n  background-color: var(--primary);\n  bottom: -2px;\n  pointer-events: none;\n  position: absolute;\n  right: -2px;\n  top: 0;\n  width: 4px;\n}\n\n:deep(.html-editor-content .resize-cursor) {\n  cursor: col-resize;\n}\n\n/* Content styling */\n:deep(.html-editor-content a) {\n  color: var(--primary);\n  text-decoration: underline;\n}\n\n:deep(.html-editor-content img) {\n  display: block;\n  margin: 0.75rem 0;\n}\n\n:deep(.html-editor-content img.ProseMirror-selectednode) {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n:deep(.html-editor-content blockquote) {\n  border-left: 3px solid var(--border);\n  color: var(--muted-foreground);\n  font-style: italic;\n  margin-left: 0;\n  padding-left: 1rem;\n}\n\n:deep(.html-editor-content .ProseMirror-focused) {\n  outline: none;\n}\n</style>\n"],"mappings":"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"}

package/dist/chunks/IconDisplay-CXT7HaLS.js

@@ -0,0 +1,53 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, ref as l, resolveDynamicComponent as u, unref as d, watch as f } from "vue";
+import { X as p } from "@lucide/vue";
+//#region src/components/compositions/elements/display/IconDisplay.vue?vue&type=script&setup=true&lang.ts
+var m = ["data-icon-name"], h = /* @__PURE__ */ a({
+	__name: "IconDisplay",
+	props: {
+		iconName: {},
+		size: { default: 20 },
+		classList: {}
+	},
+	setup(e) {
+		let a = e;
+		function h(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		let g = t(() => a.iconName ? h(a.iconName) : ""), _ = t(() => {
+			let e = a.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), v = t(() => ({
+			width: `${a.size}px`,
+			height: `${a.size}px`
+		})), y = l(null);
+		async function b(e) {
+			if (!e) {
+				y.value = null;
+				return;
+			}
+			y.value = (await import("@lucide/vue"))[e] ?? null;
+		}
+		return f(g, (e) => {
+			b(e);
+		}, { immediate: !0 }), (e, t) => (c(), i("span", {
+			class: o(["inline-flex items-center", _.value]),
+			"data-icon-name": g.value,
+			"data-testid": "icon-display"
+		}, [y.value ? (c(), n(u(y.value), {
+			key: 0,
+			style: s(v.value),
+			"aria-label": g.value
+		}, null, 8, ["style", "aria-label"])) : g.value ? r("", !0) : (c(), n(d(p), {
+			key: 1,
+			style: s(v.value),
+			class: "text-muted-foreground",
+			"aria-hidden": "true",
+			"data-testid": "icon-display-fallback"
+		}, null, 8, ["style"]))], 10, m));
+	}
+}), g = /* @__PURE__ */ e({ default: () => _ }), _ = h;
+//#endregion
+export { g as n, _ as t };
+
+//# sourceMappingURL=IconDisplay-CXT7HaLS.js.map

package/dist/chunks/IconDisplay-CXT7HaLS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDisplay-CXT7HaLS.js","names":[],"sources":["../../src/components/compositions/elements/display/IconDisplay.vue","../../src/components/compositions/elements/display/IconDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon display.\n *\n * Dynamically resolves a lucide icon by its PascalCase name (kebab-case\n * is normalised). The library is lazy-imported so we only pay for it\n * when an icon actually renders.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { X } from \"@lucide/vue\"\n\nexport interface IconDisplayProps {\n  iconName?: string\n  size?: number\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<IconDisplayProps>(), {\n  size: 20,\n})\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst resolvedIconName = computed<string>(() => {\n  if (!props.iconName) {\n    return \"\"\n  }\n  return toPascalCase(props.iconName)\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\nconst sizeStyle = computed<Record<string, string>>(() => ({\n  width: `${props.size}px`,\n  height: `${props.size}px`,\n}))\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[name] ?? null\n}\n\nwatch(\n  resolvedIconName,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span\n    class=\"inline-flex items-center\"\n    :class=\"rootClass\"\n    :data-icon-name=\"resolvedIconName\"\n    data-testid=\"icon-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"ResolvedIcon\"\n      :style=\"sizeStyle\"\n      :aria-label=\"resolvedIconName\"\n    />\n    <X\n      v-else-if=\"!resolvedIconName\"\n      :style=\"sizeStyle\"\n      class=\"text-muted-foreground\"\n      aria-hidden=\"true\"\n      data-testid=\"icon-display-fallback\"\n    />\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven icon display.\n *\n * Dynamically resolves a lucide icon by its PascalCase name (kebab-case\n * is normalised). The library is lazy-imported so we only pay for it\n * when an icon actually renders.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { X } from \"@lucide/vue\"\n\nexport interface IconDisplayProps {\n  iconName?: string\n  size?: number\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<IconDisplayProps>(), {\n  size: 20,\n})\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst resolvedIconName = computed<string>(() => {\n  if (!props.iconName) {\n    return \"\"\n  }\n  return toPascalCase(props.iconName)\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\nconst sizeStyle = computed<Record<string, string>>(() => ({\n  width: `${props.size}px`,\n  height: `${props.size}px`,\n}))\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[name] ?? null\n}\n\nwatch(\n  resolvedIconName,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span\n    class=\"inline-flex items-center\"\n    :class=\"rootClass\"\n    :data-icon-name=\"resolvedIconName\"\n    data-testid=\"icon-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"ResolvedIcon\"\n      :style=\"sizeStyle\"\n      :aria-label=\"resolvedIconName\"\n    />\n    <X\n      v-else-if=\"!resolvedIconName\"\n      :style=\"sizeStyle\"\n      class=\"text-muted-foreground\"\n      aria-hidden=\"true\"\n      data-testid=\"icon-display-fallback\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;EAiBA,IAAM,IAAQ;EAId,SAAS,EAAa,GAAuB;GAC3C,OAAO,EACJ,QAAQ,iBAAiB,GAAG,MAAiB,IAAK,EAAG,YAAY,IAAI,EAAG,EACxE,QAAQ,SAAS,MAAM,EAAE,YAAY,CAAC;EAC3C;EAEA,IAAM,IAAmB,QAClB,EAAM,WAGJ,EAAa,EAAM,QAAQ,IAFzB,EAGV,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAEK,IAAY,SAAwC;GACxD,OAAO,GAAG,EAAM,KAAK;GACrB,QAAQ,GAAG,EAAM,KAAK;EACxB,EAAE,GAEI,IAAe,EAAsB,IAAI;EAE/C,eAAe,EAAS,GAA6B;GACnD,IAAI,CAAC,GAAM;IACT,EAAa,QAAQ;IACrB;GACF;GAGA,EAAa,SAAQ,MAFH,OAAO,gBAEK,MAAS;EACzC;SAEA,EACE,IACC,MAAS;GACR,EAAc,CAAI;EACpB,GACA,EAAE,WAAW,GAAK,CACpB,mBAIE,EAmBO,QAAA;GAlBL,OAAK,EAAA,CAAC,4BACE,EAAA,KAAS,CAAA;GAChB,kBAAgB,EAAA;GACjB,eAAY;MAIJ,EAAA,SAAA,EAAA,GAFR,EAKE,EAJK,EAAA,KAAY,GAAA;;GAEhB,OAAK,EAAE,EAAA,KAAS;GAChB,cAAY,EAAA;0CAGD,EAAA,qBAAA,EAAA,GADd,EAME,EAAA,CAAA,GAAA;;GAJC,OAAK,EAAE,EAAA,KAAS;GACjB,OAAM;GACN,eAAY;GACZ,eAAY"}

package/dist/chunks/IconPicker-B0sf3xsj.js

@@ -0,0 +1,109 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { c as t, i as n, l as r, n as i, o as a, r as o, s } from "./combobox-BrYBRIqW.js";
+import { t as c } from "./field-frame-n5oLDNBT.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, h as v, mergeModels as y, openBlock as b, ref as x, renderList as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useModel as E, withCtx as D } from "vue";
+import * as O from "@lucide/vue";
+//#region src/components/compositions/elements/picker/IconPicker.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "ml-2" }, A = /* @__PURE__ */ _({
+	__name: "IconPicker",
+	props: /* @__PURE__ */ y({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let _ = E(e, "modelValue"), y = x(""), A = /* @__PURE__ */ "Activity.AlertCircle.Archive.Bell.Bookmark.Briefcase.Calendar.Camera.Check.ChevronRight.Clock.Cloud.Code.Copy.Database.Download.Edit.Eye.Facebook.File.FileText.Filter.Flag.Folder.Gift.Globe.Heart.Home.Image.Inbox.Info.Layers.Link.Lock.LogIn.LogOut.Mail.MapPin.Menu.MessageSquare.Mic.Monitor.Moon.Music.Paperclip.Pause.Phone.PieChart.Play.Plus.Power.Printer.RefreshCw.Save.Search.Send.Settings.Share.ShieldCheck.ShoppingCart.Star.Sun.Tag.Trash.Twitter.Upload.User.Video.Wifi.Wrench.X.Zap".split("."), j = u(() => {
+			let e = y.value.trim().toLowerCase();
+			return e ? A.filter((t) => t.toLowerCase().includes(e)) : A;
+		});
+		function M(e) {
+			if (e) return O[e];
+		}
+		let N = u(() => M(_.value ?? ""));
+		function P(e) {
+			let t = M(e);
+			return t ? v(t, { class: "size-4" }) : null;
+		}
+		function F(e) {
+			_.value = typeof e == "string" ? e : "";
+		}
+		return (u, v) => (b(), d(T(c), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: D(() => [g(T(r), {
+				"model-value": _.value ?? "",
+				disabled: e.disabled,
+				"onUpdate:modelValue": F
+			}, {
+				default: D(() => [g(T(t), {
+					"data-element-name": e.name ?? void 0,
+					"data-readonly": e.readonly || void 0
+				}, {
+					default: D(() => [N.value ? (b(), d(C(N.value), {
+						key: 0,
+						class: "mr-2 size-4 shrink-0",
+						"data-testid": "icon-preview"
+					})) : f("", !0), g(T(n), {
+						modelValue: y.value,
+						"onUpdate:modelValue": v[0] ||= (e) => y.value = e,
+						placeholder: e.placeholder ?? "Search icons…",
+						readonly: e.readonly,
+						required: e.required
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"readonly",
+						"required"
+					])]),
+					_: 1
+				}, 8, ["data-element-name", "data-readonly"]), g(T(s), null, {
+					default: D(() => [g(T(a), null, {
+						default: D(() => [...v[1] ||= [h("No icons match.", -1)]]),
+						_: 1
+					}), (b(!0), p(l, null, S(j.value, (e) => (b(), d(T(o), {
+						key: e,
+						value: e
+					}, {
+						default: D(() => [
+							g(T(i)),
+							(b(), d(C(P(e)))),
+							m("span", k, w(e), 1)
+						]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), j = /* @__PURE__ */ e({ default: () => M }), M = A;
+//#endregion
+export { j as n, M as t };
+
+//# sourceMappingURL=IconPicker-B0sf3xsj.js.map

package/dist/chunks/IconPicker-B0sf3xsj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker-B0sf3xsj.js","names":[],"sources":["../../src/components/compositions/elements/picker/IconPicker.vue","../../src/components/compositions/elements/picker/IconPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon picker composition. Searchable combobox over a\n * curated subset of lucide icon names. The selected value is the icon's\n * PascalCase name (e.g. `\"Calendar\"`); the currently-selected icon is\n * rendered as a live preview alongside the combobox input.\n *\n *   <IconPicker v-model=\"icon\" label=\"Icon\" />\n */\nimport { computed, h, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { Component } from \"vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconPickerProps {\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}\n\nwithDefaults(defineProps<IconPickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * A small curated subset of lucide icon names. We don't enumerate the\n * whole 1.4k+ set because we render the preview component eagerly and\n * Storybook bundles every story.\n */\nconst ICON_NAMES = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Briefcase\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"ChevronRight\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Copy\",\n  \"Database\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"Facebook\",\n  \"File\",\n  \"FileText\",\n  \"Filter\",\n  \"Flag\",\n  \"Folder\",\n  \"Gift\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Inbox\",\n  \"Info\",\n  \"Layers\",\n  \"Link\",\n  \"Lock\",\n  \"LogIn\",\n  \"LogOut\",\n  \"Mail\",\n  \"MapPin\",\n  \"Menu\",\n  \"MessageSquare\",\n  \"Mic\",\n  \"Monitor\",\n  \"Moon\",\n  \"Music\",\n  \"Paperclip\",\n  \"Pause\",\n  \"Phone\",\n  \"PieChart\",\n  \"Play\",\n  \"Plus\",\n  \"Power\",\n  \"Printer\",\n  \"RefreshCw\",\n  \"Save\",\n  \"Search\",\n  \"Send\",\n  \"Settings\",\n  \"Share\",\n  \"ShieldCheck\",\n  \"ShoppingCart\",\n  \"Star\",\n  \"Sun\",\n  \"Tag\",\n  \"Trash\",\n  \"Twitter\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"Wifi\",\n  \"Wrench\",\n  \"X\",\n  \"Zap\",\n] as const\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  if (!name) {\n    return undefined\n  }\n  const registry = LucideIcons as unknown as Record<\n    string,\n    Component | undefined\n  >\n  return registry[name]\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction renderIcon(name: string) {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: \"size-4\" }) : null\n}\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? 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  >\n    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <component\n          :is=\"previewIcon\"\n          v-if=\"previewIcon\"\n          class=\"mr-2 size-4 shrink-0\"\n          data-testid=\"icon-preview\"\n        />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search icons…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No icons match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"iconName in filtered\" :key=\"iconName\" :value=\"iconName\">\n          <ComboboxItemIndicator />\n          <component :is=\"renderIcon(iconName)\" />\n          <span class=\"ml-2\">{{ iconName }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven icon picker composition. Searchable combobox over a\n * curated subset of lucide icon names. The selected value is the icon's\n * PascalCase name (e.g. `\"Calendar\"`); the currently-selected icon is\n * rendered as a live preview alongside the combobox input.\n *\n *   <IconPicker v-model=\"icon\" label=\"Icon\" />\n */\nimport { computed, h, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { Component } from \"vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconPickerProps {\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}\n\nwithDefaults(defineProps<IconPickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * A small curated subset of lucide icon names. We don't enumerate the\n * whole 1.4k+ set because we render the preview component eagerly and\n * Storybook bundles every story.\n */\nconst ICON_NAMES = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Briefcase\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"ChevronRight\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Copy\",\n  \"Database\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"Facebook\",\n  \"File\",\n  \"FileText\",\n  \"Filter\",\n  \"Flag\",\n  \"Folder\",\n  \"Gift\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Inbox\",\n  \"Info\",\n  \"Layers\",\n  \"Link\",\n  \"Lock\",\n  \"LogIn\",\n  \"LogOut\",\n  \"Mail\",\n  \"MapPin\",\n  \"Menu\",\n  \"MessageSquare\",\n  \"Mic\",\n  \"Monitor\",\n  \"Moon\",\n  \"Music\",\n  \"Paperclip\",\n  \"Pause\",\n  \"Phone\",\n  \"PieChart\",\n  \"Play\",\n  \"Plus\",\n  \"Power\",\n  \"Printer\",\n  \"RefreshCw\",\n  \"Save\",\n  \"Search\",\n  \"Send\",\n  \"Settings\",\n  \"Share\",\n  \"ShieldCheck\",\n  \"ShoppingCart\",\n  \"Star\",\n  \"Sun\",\n  \"Tag\",\n  \"Trash\",\n  \"Twitter\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"Wifi\",\n  \"Wrench\",\n  \"X\",\n  \"Zap\",\n] as const\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  if (!name) {\n    return undefined\n  }\n  const registry = LucideIcons as unknown as Record<\n    string,\n    Component | undefined\n  >\n  return registry[name]\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction renderIcon(name: string) {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: \"size-4\" }) : null\n}\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? 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  >\n    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <component\n          :is=\"previewIcon\"\n          v-if=\"previewIcon\"\n          class=\"mr-2 size-4 shrink-0\"\n          data-testid=\"icon-preview\"\n        />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search icons…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No icons match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"iconName in filtered\" :key=\"iconName\" :value=\"iconName\">\n          <ComboboxItemIndicator />\n          <component :is=\"renderIcon(iconName)\" />\n          <span class=\"ml-2\">{{ iconName }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,IAAM,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAQ,EAAY,EAAE,GAOtB,IAAa,kgBAyEnB,GAEM,IAAW,QAAkC;GACjD,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY;GAIzC,OAHK,IAGE,EAAW,QAAQ,MAAS,EAAK,YAAY,EAAE,SAAS,CAAC,CAAC,IAFxD;EAGX,CAAC;EAED,SAAS,EAAY,GAAqC;GACnD,OAOL,OAAO,EAAS;EAClB;EAEA,IAAM,IAAc,QAClB,EAAY,EAAM,SAAS,EAAE,CAC/B;EAEA,SAAS,EAAW,GAAc;GAChC,IAAM,IAAO,EAAY,CAAI;GAC7B,OAAO,IAAO,EAAE,GAAM,EAAE,OAAO,SAAS,CAAC,IAAI;EAC/C;EAEA,SAAS,EAAS,GAAsB;GACtC,EAAM,QAAQ,OAAO,KAAU,WAAW,IAAQ;EACpD;yBAIE,EAuCa,EAAA,CAAA,GAAA;GAtCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAgCE,CA9BX,EA8BW,EAAA,CAAA,GAAA;IA7BR,eAAa,EAAA,SAAK;IAClB,UAAU,EAAA;IACV,uBAAoB;;qBAkBJ,CAhBjB,EAgBiB,EAAA,CAAA,GAAA;KAfd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,iBAAe,EAAA,YAAY,KAAA;;sBAO1B,CAHM,EAAA,SAAA,EAAA,GAFR,EAKE,EAJK,EAAA,KAAW,GAAA;;MAEhB,OAAM;MACN,eAAY;sBAEd,EAKE,EAAA,CAAA,GAAA;kBAJS,EAAA;+CAAK,QAAA;MACb,aAAa,EAAA,eAAW;MACxB,UAAU,EAAA;MACV,UAAU,EAAA;;;;;;;;mDAGf,EAOkB,EAAA,CAAA,GAAA,MAAA;sBAN8B,CAA9C,EAA8C,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAf,mBAAe,EAAA,CAAA,CAAA,CAAA;;iBAC9B,EAIe,GAAA,MAAA,EAJkB,EAAA,QAAZ,YAArB,EAIe,EAAA,CAAA,GAAA;MAJ6B,KAAK;MAAW,OAAO;;uBACxC;OAAzB,EAAyB,EAAA,CAAA,CAAA;aACzB,EAAwC,EAAxB,EAAW,CAAQ,CAAA,CAAA;OACnC,EAAwC,QAAxC,GAAwC,EAAlB,CAAQ,GAAA,CAAA"}

package/dist/chunks/IconPickerInline-D8b5_XxF.js

@@ -0,0 +1,118 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { t as n } from "./input-tw5ZQGKQ.js";
+import { n as r, s as i, t as a } from "./popover-_VzKSUl8.js";
+import { t as o } from "./field-frame-n5oLDNBT.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useModel as w, withCtx as T } from "vue";
+import * as E from "@lucide/vue";
+import { Search as D } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/IconPickerInline.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "mb-2 flex items-center gap-2" }, k = {
+	class: "grid max-h-60 grid-cols-6 gap-1 overflow-auto",
+	"data-testid": "icon-picker-inline-grid"
+}, A = [
+	"aria-label",
+	"title",
+	"data-testid",
+	"onClick"
+], j = {
+	key: 0,
+	class: "p-3 text-center text-sm text-muted-foreground"
+}, M = /* @__PURE__ */ m({
+	__name: "IconPickerInline",
+	props: /* @__PURE__ */ g({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let m = w(e, "modelValue"), g = y(""), M = /* @__PURE__ */ "Activity.AlertCircle.Archive.Bell.Bookmark.Calendar.Camera.Check.Clock.Cloud.Code.Download.Edit.Eye.File.Flag.Folder.Globe.Heart.Home.Image.Info.Link.Lock.Mail.MapPin.MessageSquare.Plus.Search.Settings.Star.Tag.Trash.Upload.User.Video.X.Zap".split("."), N = c(() => {
+			let e = g.value.trim().toLowerCase();
+			return e ? M.filter((t) => t.toLowerCase().includes(e)) : M;
+		});
+		function P(e) {
+			return E[e];
+		}
+		function F(e, t = "size-4") {
+			let n = P(e);
+			return n ? h(n, { class: t }) : null;
+		}
+		let I = c(() => P(m.value ?? ""));
+		function L(e) {
+			m.value = e;
+		}
+		return (c, h) => (v(), l(C(o), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors,
+			"data-testid": "icon-picker-inline"
+		}, {
+			default: T(() => [p(C(i), null, {
+				default: T(() => [p(C(a), { "as-child": "" }, {
+					default: T(() => [p(C(t), {
+						type: "button",
+						variant: "outline",
+						class: "w-fit justify-start gap-2",
+						disabled: e.disabled,
+						"data-element-name": e.name ?? void 0,
+						"data-testid": "icon-picker-inline-trigger"
+					}, {
+						default: T(() => [I.value ? (v(), l(x(I.value), {
+							key: 0,
+							class: "size-4"
+						})) : u("", !0), f("span", null, S(m.value || "Pick an icon"), 1)]),
+						_: 1
+					}, 8, ["disabled", "data-element-name"])]),
+					_: 1
+				}), p(C(r), { class: "w-72 p-2" }, {
+					default: T(() => [
+						f("div", O, [p(C(D), { class: "size-4 text-muted-foreground" }), p(C(n), {
+							modelValue: g.value,
+							"onUpdate:modelValue": h[0] ||= (e) => g.value = e,
+							placeholder: "Search icons…",
+							"data-testid": "icon-picker-inline-search",
+							class: "h-8"
+						}, null, 8, ["modelValue"])]),
+						f("div", k, [(v(!0), d(s, null, b(N.value, (e) => (v(), d("button", {
+							key: e,
+							type: "button",
+							class: _(["flex aspect-square items-center justify-center rounded border border-transparent hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", m.value === e ? "border-primary bg-primary/10" : ""]),
+							"aria-label": e,
+							title: e,
+							"data-testid": `icon-picker-inline-item-${e}`,
+							onClick: (t) => L(e)
+						}, [(v(), l(x(F(e))))], 10, A))), 128))]),
+						N.value.length ? u("", !0) : (v(), d("p", j, " No icons match. "))
+					]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), N = /* @__PURE__ */ e({ default: () => P }), P = M;
+//#endregion
+export { N as n, P as t };
+
+//# sourceMappingURL=IconPickerInline-D8b5_XxF.js.map