@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/fields/ReplicatorField.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ReplicatorSetDefinition } from '../../../core/blueprints/definition.js'
+import { nestedFieldToDescriptor } from '../../../core/blueprints/code-to-definition.js'
+import FieldRenderer from './FieldRenderer.vue'
+
+interface ReplicatorItem {
+  set: string
+  content: Record<string, unknown>
+}
+
+const props = defineProps<{
+  label: string
+  modelValue: unknown
+  replicatorSets?: ReplicatorSetDefinition[]
+}>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: ReplicatorItem[]): void }>()
+
+const items = computed<ReplicatorItem[]>(() =>
+  Array.isArray(props.modelValue) ? (props.modelValue as ReplicatorItem[]) : [],
+)
+const setMap = computed(() => new Map((props.replicatorSets ?? []).map((set) => [set.name, set])))
+
+function humanize(value: string): string {
+  return value.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+function labelForSet(set: ReplicatorSetDefinition): string {
+  return set.label?.trim() || humanize(set.name)
+}
+
+function defaultForField(field: ReplicatorSetDefinition['fields'][number]): unknown {
+  if (field.default !== undefined) return field.default
+  switch (field.ui.kind) {
+    case 'boolean': return false
+    case 'blocks': return { type: 'doc', content: [{ type: 'paragraph' }] }
+    case 'date': return new Date().toISOString().slice(0, 16)
+    default: return ''
+  }
+}
+
+function emitItems(next: ReplicatorItem[]) {
+  emit('update:modelValue', next)
+}
+
+function addSet(set: ReplicatorSetDefinition) {
+  const content: Record<string, unknown> = {}
+  for (const field of set.fields) content[field.name] = defaultForField(field)
+  emitItems([...items.value, { set: set.name, content }])
+}
+
+function removeItem(index: number) {
+  emitItems(items.value.filter((_, current) => current !== index))
+}
+
+function moveItem(index: number, direction: -1 | 1) {
+  const target = index + direction
+  if (target < 0 || target >= items.value.length) return
+  const next = [...items.value]
+  const [moved] = next.splice(index, 1)
+  next.splice(target, 0, moved!)
+  emitItems(next)
+}
+
+function updateField(index: number, fieldName: string, value: unknown) {
+  const next = [...items.value]
+  const current = next[index]
+  if (!current) return
+  next[index] = { ...current, content: { ...current.content, [fieldName]: value } }
+  emitItems(next)
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <span class="block text-sm font-medium text-zinc-700">{{ label }}</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="set in replicatorSets ?? []"
+          :key="set.name"
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
+          @click="addSet(set)"
+        >
+          + {{ labelForSet(set) }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="items.length === 0" class="rounded border border-dashed border-zinc-300 bg-zinc-50 px-4 py-5 text-sm text-zinc-500">
+      No sets added yet.
+    </div>
+
+    <div v-for="(item, index) in items" :key="`${item.set}-${index}`" class="rounded-xl border border-zinc-200 bg-white">
+      <div class="flex items-center gap-2 border-b border-zinc-200 px-3 py-2">
+        <button type="button" class="px-2 text-zinc-400 hover:text-zinc-700" @click="moveItem(index, -1)">↑</button>
+        <button type="button" class="px-2 text-zinc-400 hover:text-zinc-700" @click="moveItem(index, 1)">↓</button>
+        <div class="flex-1">
+          <span class="rounded bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-700">
+            {{ setMap.get(item.set) ? labelForSet(setMap.get(item.set)!) : item.set }}
+          </span>
+        </div>
+        <button type="button" class="rounded px-2 py-1 text-xs text-red-600 hover:bg-red-50" @click="removeItem(index)">Remove</button>
+      </div>
+      <div v-if="setMap.get(item.set)" class="space-y-4 p-3">
+        <FieldRenderer
+          v-for="field in setMap.get(item.set)!.fields.map(nestedFieldToDescriptor)"
+          :key="`${item.set}-${field.path}`"
+          :field="field"
+          :model-value="item.content?.[field.path]"
+          @update:modelValue="(v: unknown) => updateField(index, field.path, v)"
+        />
+      </div>
+      <div v-else class="p-3 text-sm text-amber-700">
+        This set no longer exists in the schema.
+      </div>
+    </div>
+  </div>
+</template>

package/src/admin/components/fields/TextField.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ modelValue: string; label: string; required?: boolean }>()
+defineEmits<{ (e: 'update:modelValue', v: string): void }>()
+</script>
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}<span v-if="required" class="text-red-600">*</span></span>
+    <input :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      class="mt-1 w-full rounded border px-3 py-2" />
+  </label>
+</template>

package/src/admin/components/fields/TextareaField.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ modelValue: string; label: string; required?: boolean }>()
+defineEmits<{ (e: 'update:modelValue', v: string): void }>()
+</script>
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+    <textarea :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+      rows="6" class="mt-1 w-full rounded border px-3 py-2"></textarea>
+  </label>
+</template>

package/src/admin/components/fields/VulseAccordionGroupNodeView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/vue-3';
+import { appendContentInside, deleteCurrentNode, insertParagraphAfter, insertParagraphBefore } from './set-node-utils.js';
+
+const props = defineProps<NodeViewProps>();
+
+function addItem() {
+  appendContentInside(props, {
+    type: 'vulseAccordion',
+    attrs: { summary: 'Accordion', open: false },
+    content: [{ type: 'paragraph' }],
+  });
+}
+
+function addTextAbove() {
+  insertParagraphBefore(props);
+}
+
+function addTextBelow() {
+  insertParagraphAfter(props);
+}
+
+function removeGroup() {
+  deleteCurrentNode(props);
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    class="my-4 overflow-hidden rounded-xl border border-zinc-300 bg-zinc-50"
+    data-testid="accordion-group-node-view"
+  >
+    <div
+      contenteditable="false"
+      class="flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 px-4 py-3"
+    >
+      <div>
+        <div class="text-xs font-medium uppercase tracking-wide text-zinc-500">
+          Accordion group
+        </div>
+        <div class="text-xs text-zinc-500">Items inside this block render together.</div>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+          data-testid="accordion-group-add-item"
+          @click="addItem"
+        >
+          Add item
+        </button>
+        <button
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+          data-testid="accordion-group-add-above"
+          @click="addTextAbove"
+        >
+          Add text at top
+        </button>
+        <button
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+          data-testid="accordion-group-add-below"
+          @click="addTextBelow"
+        >
+          Add text below
+        </button>
+        <button
+          type="button"
+          class="rounded border border-red-200 bg-white px-2 py-1 text-xs text-red-600 hover:bg-red-50"
+          data-testid="accordion-group-delete"
+          @click="removeGroup"
+        >
+          Delete group
+        </button>
+      </div>
+    </div>
+    <div class="space-y-3 px-3 py-3">
+      <NodeViewContent class="space-y-3" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/admin/components/fields/VulseAccordionNodeView.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/vue-3';
+import { computed } from 'vue';
+import {
+  deleteCurrentNode,
+  deleteCurrentNodeOrParentIfOnlyChild,
+  insertContentAfter,
+  insertParagraphAfter,
+  insertParagraphBefore,
+  parentNodeInfo,
+} from './set-node-utils.js';
+
+const props = defineProps<NodeViewProps>();
+
+const summary = computed(() => String(props.node.attrs?.summary ?? 'Accordion'));
+const open = computed(() => Boolean(props.node.attrs?.open));
+const parent = computed(() => parentNodeInfo(props));
+const isGrouped = computed(() => parent.value?.name === 'vulseAccordionGroup');
+const itemNumber = computed(() => (isGrouped.value ? (parent.value?.index ?? 0) + 1 : null));
+
+function onSummaryInput(event: Event) {
+  props.updateAttributes({ summary: (event.target as HTMLInputElement).value || 'Accordion' });
+}
+
+function onOpenChange(event: Event) {
+  props.updateAttributes({ open: (event.target as HTMLInputElement).checked });
+}
+
+function addAccordionBelow() {
+  insertContentAfter(props, {
+    type: 'vulseAccordion',
+    attrs: { summary: 'Accordion', open: false },
+    content: [{ type: 'paragraph' }],
+  });
+}
+
+function addTextAbove() {
+  insertParagraphBefore(props);
+}
+
+function addTextBelow() {
+  insertParagraphAfter(props);
+}
+
+function removeSet() {
+  if (isGrouped.value) {
+    deleteCurrentNodeOrParentIfOnlyChild(props, 'vulseAccordionGroup');
+    return;
+  }
+
+  deleteCurrentNode(props);
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    class="overflow-hidden rounded-lg border border-zinc-200 bg-white"
+    data-testid="accordion-node-view"
+  >
+    <div contenteditable="false" class="border-b border-zinc-200 px-3 py-2">
+      <div class="mb-2 flex items-center justify-between gap-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-zinc-500">
+          {{ isGrouped ? `Item ${itemNumber}` : 'Accordion' }}
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="accordion-add-item"
+            @click="addAccordionBelow"
+          >
+            {{ isGrouped ? 'Add item below' : 'Add accordion below' }}
+          </button>
+          <button
+            v-if="!isGrouped"
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="accordion-add-above"
+            @click="addTextAbove"
+          >
+            Add text at top
+          </button>
+          <button
+            v-if="!isGrouped"
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="accordion-add-below"
+            @click="addTextBelow"
+          >
+            Add text below
+          </button>
+          <button
+            type="button"
+            class="rounded border border-red-200 bg-white px-2 py-1 text-xs text-red-600 hover:bg-red-50"
+            data-testid="accordion-delete"
+            @click="removeSet"
+          >
+            {{ isGrouped ? 'Delete item' : 'Delete' }}
+          </button>
+        </div>
+      </div>
+      <div class="grid gap-2 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
+        <label class="grid gap-1 text-xs text-zinc-500">
+          <span>Title</span>
+          <input
+            class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900"
+            :value="summary"
+            data-testid="accordion-summary"
+            @input="onSummaryInput"
+          />
+        </label>
+        <label class="mt-1 flex items-center gap-2 text-xs text-zinc-500 md:mt-5">
+          <input
+            type="checkbox"
+            class="rounded border-zinc-300"
+            :checked="open"
+            data-testid="accordion-open"
+            @change="onOpenChange"
+          />
+          <span>Open by default</span>
+        </label>
+      </div>
+    </div>
+    <div class="px-3 py-3">
+      <NodeViewContent class="min-h-10 rounded border border-zinc-200 bg-white px-3 py-2" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/admin/components/fields/VulseCalloutNodeView.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/vue-3';
+import { computed } from 'vue';
+import { deleteCurrentNode, insertParagraphAfter, insertParagraphBefore } from './set-node-utils.js';
+
+const props = defineProps<NodeViewProps>();
+
+const tone = computed(() => String(props.node.attrs?.tone === 'warn' ? 'warn' : 'info'));
+
+function onToneChange(event: Event) {
+  const next = (event.target as HTMLSelectElement).value === 'warn' ? 'warn' : 'info';
+  props.updateAttributes({ tone: next });
+}
+
+function addAbove() {
+  insertParagraphBefore(props);
+}
+
+function addBelow() {
+  insertParagraphAfter(props);
+}
+
+function removeSet() {
+  deleteCurrentNode(props);
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    class="my-3 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50"
+    data-testid="callout-node-view"
+  >
+    <div
+      contenteditable="false"
+      class="flex items-center justify-between gap-3 border-b border-zinc-200 px-3 py-2"
+    >
+      <div class="text-xs font-medium uppercase tracking-wide text-zinc-500">Callout</div>
+      <div class="flex items-center gap-2">
+        <label class="flex items-center gap-2 text-xs text-zinc-500">
+          <span>Tone</span>
+          <select
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-700"
+            :value="tone"
+            data-testid="callout-tone"
+            @change="onToneChange"
+          >
+            <option value="info">Info</option>
+            <option value="warn">Warn</option>
+          </select>
+        </label>
+        <button
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+          data-testid="callout-add-above"
+          @click="addAbove"
+        >
+          Add text at top
+        </button>
+        <button
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+          data-testid="callout-add-below"
+          @click="addBelow"
+        >
+          Add text below
+        </button>
+        <button
+          type="button"
+          class="rounded border border-red-200 bg-white px-2 py-1 text-xs text-red-600 hover:bg-red-50"
+          data-testid="callout-delete"
+          @click="removeSet"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+    <div class="px-3 py-3">
+      <NodeViewContent class="min-h-10 rounded border border-zinc-200 bg-white px-3 py-2" />
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/admin/components/fields/VulseIframeNodeView.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/vue-3';
+import { ref, watch } from 'vue';
+import { deleteCurrentNode, insertParagraphAfter, insertParagraphBefore } from './set-node-utils.js';
+import { parseIframeCode } from './url-utils.js';
+
+const props = defineProps<NodeViewProps>();
+
+const codeDraft = ref(
+  String(
+    props.node.attrs?.code ??
+      (props.node.attrs?.src
+        ? `<iframe src="${String(props.node.attrs.src)}" title="${String(props.node.attrs?.title ?? 'Embedded content')}"></iframe>`
+        : ''),
+  ),
+);
+const invalidCode = ref(false);
+
+watch(
+  () => props.node.attrs?.code,
+  (value) => {
+    codeDraft.value = String(value ?? '');
+    invalidCode.value = false;
+  },
+);
+
+function commitCode() {
+  if (!codeDraft.value.trim()) {
+    props.updateAttributes({ code: null, src: null, title: 'Embedded content' });
+    invalidCode.value = false;
+    return;
+  }
+
+  const parsed = parseIframeCode(codeDraft.value);
+  if (!parsed) {
+    invalidCode.value = true;
+    return;
+  }
+  invalidCode.value = false;
+  codeDraft.value = parsed.code;
+  props.updateAttributes(parsed);
+}
+
+function addAbove() {
+  insertParagraphBefore(props);
+}
+
+function addBelow() {
+  insertParagraphAfter(props);
+}
+
+function removeSet() {
+  deleteCurrentNode(props);
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    class="my-3 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50"
+    data-testid="iframe-node-view"
+  >
+    <div class="border-b border-zinc-200 px-3 py-2" contenteditable="false">
+      <div class="flex items-center justify-between gap-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-zinc-500">Iframe</div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="iframe-add-above"
+            @click="addAbove"
+          >
+            Add text at top
+          </button>
+          <button
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="iframe-add-below"
+            @click="addBelow"
+          >
+            Add text below
+          </button>
+          <button
+            type="button"
+            class="rounded border border-red-200 bg-white px-2 py-1 text-xs text-red-600 hover:bg-red-50"
+            data-testid="iframe-delete"
+            @click="removeSet"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="grid gap-3 px-3 py-3" contenteditable="false">
+      <label class="grid gap-1 text-xs text-zinc-500">
+        <span>Iframe code</span>
+        <textarea
+          v-model="codeDraft"
+          class="min-h-32 rounded border border-zinc-300 bg-white px-3 py-2 font-mono text-sm text-zinc-900"
+          placeholder="<iframe src=&quot;https://example.com/embed&quot; title=&quot;Embedded content&quot;></iframe>"
+          data-testid="iframe-code"
+          @blur="commitCode"
+        />
+      </label>
+      <div v-if="invalidCode" class="text-xs text-red-600">
+        Enter a valid iframe snippet with an `http` or `https` `src`.
+      </div>
+      <div class="text-xs text-zinc-500">
+        Paste the full iframe snippet. Vulse stores the code and renders a sanitized iframe on the frontend.
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/admin/components/fields/VulseSetNodeView.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { NodeViewProps } from '@tiptap/vue-3'
+import { NodeViewWrapper } from '@tiptap/vue-3'
+import { computed, onMounted, ref } from 'vue'
+import { nestedFieldToDescriptor } from '../../../core/blueprints/code-to-definition.js'
+import { useSets } from '../../composables/useSets.js'
+import FieldRenderer from './FieldRenderer.vue'
+
+const props = defineProps<NodeViewProps>()
+const { get, hydrate } = useSets()
+onMounted(() => { void hydrate() })
+
+const expanded = ref(false)
+
+const setHandle = computed<string | null>(() => {
+  const s = (props.node.attrs as { set?: unknown }).set
+  return typeof s === 'string' ? s : null
+})
+
+const setDef = computed(() => (setHandle.value ? get(setHandle.value) : undefined))
+
+const data = computed<Record<string, unknown>>(() => {
+  return ((props.node.attrs as { data?: unknown }).data as Record<string, unknown> | undefined) ?? {}
+})
+
+const fieldDescriptors = computed(() => (setDef.value?.fields ?? []).map(nestedFieldToDescriptor))
+
+function updateField(name: string, value: unknown) {
+  props.updateAttributes({ data: { ...data.value, [name]: value } })
+}
+
+const summary = computed(() => {
+  const def = setDef.value
+  if (!def) return ''
+  const firstText = def.fields.find((f) => f.ui.kind === 'text' || f.ui.kind === 'textarea')
+  if (!firstText) return ''
+  const v = data.value[firstText.name]
+  return typeof v === 'string' && v ? v.slice(0, 80) : ''
+})
+</script>
+
+<template>
+  <NodeViewWrapper class="vulse-set my-2">
+    <div v-if="!setDef" class="rounded border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800">
+      <div class="font-medium">Missing set: {{ setHandle ?? '(unset)' }}</div>
+      <button type="button" class="mt-1 text-xs text-amber-900 underline" @click="props.deleteNode()">Remove</button>
+    </div>
+    <div v-else class="rounded border border-zinc-200 bg-white">
+      <div class="flex items-center justify-between gap-2 px-3 py-2">
+        <button type="button" class="flex flex-1 items-center gap-2 text-left text-sm" @click="expanded = !expanded">
+          <span class="text-zinc-400">{{ expanded ? '▾' : '▸' }}</span>
+          <span class="font-medium text-zinc-800">{{ setDef.label }}</span>
+          <span v-if="!expanded && summary" class="truncate text-zinc-500">— {{ summary }}</span>
+        </button>
+        <button type="button" class="text-xs text-zinc-500 hover:text-red-700" @click="props.deleteNode()">Remove</button>
+      </div>
+      <div v-if="expanded" class="space-y-2 border-t border-zinc-200 p-3">
+        <FieldRenderer
+          v-for="f in fieldDescriptors"
+          :key="f.path"
+          :field="f"
+          :model-value="data[f.path]"
+          @update:modelValue="(v: unknown) => updateField(f.path, v)"
+        />
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>