@commonpub/editor 0.7.6 → 0.7.8

package/dist/extensions/buildStep.d.ts

@@ -4,10 +4,9 @@ declare module '@tiptap/core' {
         buildStep: {
             setBuildStep: (attributes: {
                 stepNumber: number;
-                instructions: string;
-                image?: string;
+                title?: string;
                 time?: string;
-                partsUsed?: string[];
+                children?: Array<[string, Record<string, unknown>]>;
             }) => ReturnType;
         };
     }

package/dist/extensions/buildStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildStep.d.ts","sourceRoot":"","sources":["../../src/extensions/buildStep.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAErD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,SAAS,EAAE;YACT,YAAY,EAAE,CAAC,UAAU,EAAE;gBAAE,UAAU,EAAE,MAAM,CAAC;gBAAC,YAAY,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAC;gBAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;aAAE,KAAK,UAAU,CAAC;SAC7I,CAAC;KACH;CACF;AAED,eAAO,MAAM,kBAAkB,gBA+C7B,CAAC"}
+{"version":3,"file":"buildStep.d.ts","sourceRoot":"","sources":["../../src/extensions/buildStep.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAErD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,SAAS,EAAE;YACT,YAAY,EAAE,CAAC,UAAU,EAAE;gBAAE,UAAU,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAC;gBAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;aAAE,KAAK,UAAU,CAAC;SACtJ,CAAC;KACH;CACF;AAED,eAAO,MAAM,kBAAkB,gBAiD7B,CAAC"}

package/dist/extensions/buildStep.js

@@ -6,23 +6,25 @@ export const CommonPubBuildStep = Node.create({
     addAttributes() {
         return {
             stepNumber: { default: 1 },
-            image: { default: null },
-            instructions: { default: '' },
+            title: { default: '' },
             time: { default: null },
-            partsUsed: {
+            children: {
                 default: [],
                 parseHTML: (element) => {
                     try {
-                        return JSON.parse(element.getAttribute('data-parts-used') || '[]');
+                        return JSON.parse(element.getAttribute('data-children') || '[]');
                     }
                     catch {
                         return [];
                     }
                 },
                 renderHTML: (attributes) => ({
-                    'data-parts-used': JSON.stringify(attributes.partsUsed),
+                    'data-children': JSON.stringify(attributes.children),
                 }),
             },
+            // Legacy attributes — kept for migration from old format
+            instructions: { default: null },
+            image: { default: null },
         };
     },
     parseHTML() {
@@ -31,7 +33,7 @@ export const CommonPubBuildStep = Node.create({
     renderHTML({ node, HTMLAttributes }) {
         return ['div', mergeAttributes(HTMLAttributes, { class: 'cpub-build-step' }),
             ['span', { class: 'cpub-build-step-number' }, `Step ${node.attrs.stepNumber}`],
-            ['p', {}, node.attrs.instructions],
+            ['span', { class: 'cpub-build-step-title' }, node.attrs.title || ''],
         ];
     },
     addCommands() {

package/dist/extensions/buildStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildStep.js","sourceRoot":"","sources":["../../src/extensions/buildStep.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAUrD,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC;IAC5C,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,IAAI;IAEV,aAAa;QACX,OAAO;YACL,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;YAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;YAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACvB,SAAS,EAAE;gBACT,OAAO,EAAE,EAAE;gBACX,SAAS,EAAE,CAAC,OAAoB,EAAE,EAAE;oBAClC,IAAI,CAAC;wBACH,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,CAAC;oBACrE,CAAC;oBAAC,MAAM,CAAC;wBACP,OAAO,EAAE,CAAC;oBACZ,CAAC;gBACH,CAAC;gBACD,UAAU,EAAE,CAAC,UAAmC,EAAE,EAAE,CAAC,CAAC;oBACpD,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC;iBACxD,CAAC;aACH;SACF,CAAC;IACJ,CAAC;IAED,SAAS;QACP,OAAO,CAAC,EAAE,GAAG,EAAE,qBAAqB,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,UAAU,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE;QACjC,OAAO,CAAC,KAAK,EAAE,eAAe,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;YAC1E,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YAC9E,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;SACnC,CAAC;IACJ,CAAC;IAED,WAAW;QACT,OAAO;YACL,YAAY,EACV,CAAC,UAAU,EAAE,EAAE,CACf,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,OAAO,QAAQ,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;YACxE,CAAC;SACJ,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"buildStep.js","sourceRoot":"","sources":["../../src/extensions/buildStep.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAUrD,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC;IAC5C,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,IAAI;IAEV,aAAa;QACX,OAAO;YACL,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;YAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;YACtB,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACvB,QAAQ,EAAE;gBACR,OAAO,EAAE,EAAE;gBACX,SAAS,EAAE,CAAC,OAAoB,EAAE,EAAE;oBAClC,IAAI,CAAC;wBACH,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,CAAC;oBACnE,CAAC;oBAAC,MAAM,CAAC;wBACP,OAAO,EAAE,CAAC;oBACZ,CAAC;gBACH,CAAC;gBACD,UAAU,EAAE,CAAC,UAAmC,EAAE,EAAE,CAAC,CAAC;oBACpD,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC;iBACrD,CAAC;aACH;YACD,yDAAyD;YACzD,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SACzB,CAAC;IACJ,CAAC;IAED,SAAS;QACP,OAAO,CAAC,EAAE,GAAG,EAAE,qBAAqB,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,UAAU,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE;QACjC,OAAO,CAAC,KAAK,EAAE,eAAe,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;YAC1E,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YAC9E,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SACrE,CAAC;IACJ,CAAC;IAED,WAAW;QACT,OAAO;YACL,YAAY,EACV,CAAC,UAAU,EAAE,EAAE,CACf,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,OAAO,QAAQ,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;YACxE,CAAC;SACJ,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/editor",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "type": "module",
   "description": "TipTap block editor with 18+ maker-focused extensions for CommonPub",
   "license": "AGPL-3.0-or-later",
@@ -50,8 +50,8 @@
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@commonpub/schema": "0.9.5",
-    "@commonpub/config": "0.9.0"
+    "@commonpub/config": "0.9.0",
+    "@commonpub/schema": "0.9.5"
   },
   "peerDependencies": {
     "vue": "^3.4.0",

package/vue/components/BlockCanvas.vue

@@ -456,8 +456,9 @@ defineExpose({
         <BlockPicker :groups="blockTypes" :visible="true" @select="onPickerSelect" @close="closePicker" />
       </div>
 
-      <!-- Insert zone after each block -->
+      <!-- Insert zone after each block (always visible on last block) -->
       <BlockInsertZone
+        :always-visible="index === blockEditor.blocks.value.length - 1"
         @insert="openPicker(index + 1)"
         @drop="onDrop(index + 1, $event)"
       />
@@ -522,29 +523,23 @@ defineExpose({
 
 <style scoped>
 .cpub-block-canvas {
-  padding: 36px 0 52px;
+  padding: 16px 0 52px;
   min-height: 300px;
   position: relative;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
 }
 
 .cpub-canvas-page {
   width: 100%;
-  max-width: 680px;
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border);
-  box-shadow: var(--shadow-md);
-  padding: 44px 56px;
+  padding: 0 24px;
   position: relative;
 }
 
 @media (max-width: 768px) {
   .cpub-canvas-page {
-    border: none;
-    box-shadow: none;
-    padding: 16px;
+    padding: 0 12px;
   }
   .cpub-block-canvas {
     padding: 8px 0 48px;

package/vue/components/BlockInsertZone.vue

@@ -2,9 +2,14 @@
 /**
  * Insert zone between blocks — shows "+ Insert block" button.
  * Appears between every block and at the top/bottom of the canvas.
+ * Button shows on hover unless `alwaysVisible` is set.
  */
 import { ref } from 'vue';
 
+defineProps<{
+  alwaysVisible?: boolean;
+}>();
+
 defineEmits<{
   insert: [];
 }>();
@@ -25,7 +30,10 @@ function onDragLeave(): void {
 <template>
   <div
     class="cpub-insert-zone"
-    :class="{ 'cpub-insert-zone--dragover': isDragOver }"
+    :class="{
+      'cpub-insert-zone--dragover': isDragOver,
+      'cpub-insert-zone--hover-only': !alwaysVisible,
+    }"
     @dragover="onDragOver"
     @dragleave="onDragLeave"
     @drop="isDragOver = false"
@@ -42,31 +50,17 @@ function onDragLeave(): void {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 8px;
+  height: 28px;
   position: relative;
-  transition: height 0.15s;
-}
-
-/* Always-visible thin line */
-.cpub-insert-zone::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: 1px;
-  background: var(--border, rgba(0, 0, 0, 0.1));
-  pointer-events: none;
 }
 
-.cpub-insert-zone:hover::before,
-.cpub-insert-zone--dragover::before {
-  background: transparent;
+.cpub-insert-zone--hover-only .cpub-insert-btn {
+  opacity: 0;
+  transition: opacity 0.12s;
 }
 
-.cpub-insert-zone:hover,
-.cpub-insert-zone--dragover {
-  height: 36px;
+.cpub-insert-zone--hover-only:hover .cpub-insert-btn {
+  opacity: 1;
 }
 
 .cpub-insert-btn {
@@ -78,17 +72,10 @@ function onDragLeave(): void {
   letter-spacing: 0.04em;
   color: var(--text-faint);
   background: transparent;
-  border: 2px dashed transparent;
+  border: 2px dashed var(--border2, rgba(0, 0, 0, 0.08));
   padding: 4px 14px;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, background 0.1s, border-color 0.1s, color 0.1s;
-}
-
-.cpub-insert-zone:hover .cpub-insert-btn,
-.cpub-insert-zone--dragover .cpub-insert-btn {
-  opacity: 1;
-  border-color: var(--border2);
+  transition: background 0.1s, border-color 0.1s, color 0.1s;
 }
 
 .cpub-insert-btn:hover {

package/vue/components/blocks/BuildStepBlock.vue

@@ -1,8 +1,40 @@
 <script setup lang="ts">
 /**
- * Build step block — numbered step with title and instruction text.
+ * Build step block — numbered step with title, time, and nested child blocks.
+ * Uses its own useBlockEditor instance for children (text, image, code, callout, divider).
+ * Migrates old flat format (instructions + image) to children on load.
  */
-import { computed } from 'vue';
+import { ref, computed, watch, inject, type Component } from 'vue';
+import type { BlockTuple } from '@commonpub/editor';
+import { useBlockEditor } from '../../composables/useBlockEditor.js';
+import { UPLOAD_HANDLER_KEY } from '../../provide.js';
+
+import TextBlock from './TextBlock.vue';
+import ImageBlock from './ImageBlock.vue';
+import CodeBlock from './CodeBlock.vue';
+import CalloutBlock from './CalloutBlock.vue';
+import DividerBlock from './DividerBlock.vue';
+
+const CHILD_COMPONENTS: Record<string, Component> = {
+  paragraph: TextBlock,
+  text: TextBlock,
+  image: ImageBlock,
+  code: CodeBlock,
+  code_block: CodeBlock,
+  codeBlock: CodeBlock,
+  callout: CalloutBlock,
+  divider: DividerBlock,
+  horizontalRule: DividerBlock,
+};
+
+const INSERTABLE_TYPES = [
+  { type: 'paragraph', label: 'Text', icon: 'fa-solid fa-paragraph' },
+  { type: 'image', label: 'Image', icon: 'fa-regular fa-image' },
+  { type: 'code_block', label: 'Code', icon: 'fa-solid fa-code' },
+  { type: 'callout', label: 'Callout', icon: 'fa-solid fa-circle-info' },
+  { type: 'divider', label: 'Divider', icon: 'fa-solid fa-minus' },
+] as const;
+
 const props = defineProps<{
   content: Record<string, unknown>;
 }>();
@@ -11,13 +43,122 @@ const emit = defineEmits<{
   update: [content: Record<string, unknown>];
 }>();
 
+const uploadHandler = inject(UPLOAD_HANDLER_KEY, undefined);
+
 const stepNumber = computed(() => (props.content.stepNumber as number) ?? 1);
 const title = computed(() => (props.content.title as string) ?? '');
-const instructions = computed(() => (props.content.instructions as string) ?? '');
 const time = computed(() => (props.content.time as string) ?? '');
 
+// --- Migration: old flat format → children BlockTuple[] ---
+function migrateToChildren(content: Record<string, unknown>): BlockTuple[] {
+  if (content.children && Array.isArray(content.children) && content.children.length > 0) {
+    return content.children as BlockTuple[];
+  }
+  const children: BlockTuple[] = [];
+  const instructions = content.instructions as string | undefined;
+  if (instructions && instructions.trim()) {
+    // Wrap plain text in <p> tags if not already HTML
+    const html = instructions.startsWith('<') ? instructions : `<p>${instructions}</p>`;
+    children.push(['paragraph', { html }]);
+  }
+  const image = content.image as string | undefined;
+  if (image && image.trim()) {
+    children.push(['image', { src: image, alt: '', caption: '' }]);
+  }
+  if (children.length === 0) {
+    children.push(['paragraph', { html: '' }]);
+  }
+  return children;
+}
+
+// --- Child block editor ---
+const initialChildren = migrateToChildren(props.content);
+const childEditor = useBlockEditor(initialChildren);
+
+/** Track what we last emitted so we can distinguish our own updates from external (undo) */
+let lastEmittedJson = JSON.stringify(initialChildren);
+
+function emitFullUpdate(): void {
+  const children = childEditor.toBlockTuples();
+  lastEmittedJson = JSON.stringify(children);
+  emit('update', {
+    stepNumber: stepNumber.value,
+    title: title.value,
+    time: time.value,
+    children,
+  });
+}
+
 function updateField(field: string, value: unknown): void {
-  emit('update', { ...props.content, [field]: value });
+  const children = childEditor.toBlockTuples();
+  lastEmittedJson = JSON.stringify(children);
+  emit('update', {
+    stepNumber: stepNumber.value,
+    title: title.value,
+    time: time.value,
+    children,
+    [field]: value,
+  });
+}
+
+function onChildUpdate(blockId: string, content: Record<string, unknown>): void {
+  childEditor.updateBlock(blockId, content);
+  emitFullUpdate();
+}
+
+function addChild(type: string): void {
+  childEditor.addBlock(type);
+  emitFullUpdate();
+}
+
+function removeChild(blockId: string): void {
+  if (childEditor.blocks.value.length <= 1) return;
+  childEditor.removeBlock(blockId);
+  emitFullUpdate();
+}
+
+function moveChildUp(blockId: string): void {
+  childEditor.moveBlockUp(blockId);
+  emitFullUpdate();
+}
+
+function moveChildDown(blockId: string): void {
+  childEditor.moveBlockDown(blockId);
+  emitFullUpdate();
+}
+
+function getChildComponent(type: string): Component {
+  return CHILD_COMPONENTS[type] ?? TextBlock;
+}
+
+function needsUpload(type: string): boolean {
+  return type === 'image';
+}
+
+// --- Sync from external changes (undo/redo) ---
+watch(
+  () => props.content.children,
+  (newChildren) => {
+    if (!newChildren || !Array.isArray(newChildren)) return;
+    const newJson = JSON.stringify(newChildren);
+    if (newJson === lastEmittedJson) return;
+    // External change — re-initialize child editor
+    lastEmittedJson = newJson;
+    childEditor.fromBlockTuples(newChildren as BlockTuple[]);
+  },
+  { deep: true },
+);
+
+// --- Add menu ---
+const showAddMenu = ref(false);
+
+function toggleAddMenu(): void {
+  showAddMenu.value = !showAddMenu.value;
+}
+
+function onAddType(type: string): void {
+  showAddMenu.value = false;
+  addChild(type);
 }
 </script>
 
@@ -40,14 +181,63 @@ function updateField(field: string, value: unknown): void {
         @input="updateField('time', ($event.target as HTMLInputElement).value)"
       />
     </div>
-    <div class="cpub-step-body">
-      <textarea
-        class="cpub-step-instructions"
-        :value="instructions"
-        placeholder="Describe this step..."
-        rows="4"
-        @input="updateField('instructions', ($event.target as HTMLTextAreaElement).value)"
-      />
+
+    <div class="cpub-step-children">
+      <div
+        v-for="(block, idx) in childEditor.blocks.value"
+        :key="block.id"
+        class="cpub-step-child"
+      >
+        <component
+          :is="getChildComponent(block.type)"
+          :content="block.content"
+          v-bind="needsUpload(block.type) && uploadHandler ? { onUpload: uploadHandler } : {}"
+          @update="(c: Record<string, unknown>) => onChildUpdate(block.id, c)"
+        />
+        <div class="cpub-step-child-actions">
+          <button
+            v-if="idx > 0"
+            class="cpub-step-child-btn"
+            title="Move up"
+            @click="moveChildUp(block.id)"
+          >
+            <i class="fa-solid fa-chevron-up"></i>
+          </button>
+          <button
+            v-if="idx < childEditor.blocks.value.length - 1"
+            class="cpub-step-child-btn"
+            title="Move down"
+            @click="moveChildDown(block.id)"
+          >
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+          <button
+            v-if="childEditor.blocks.value.length > 1"
+            class="cpub-step-child-btn cpub-step-child-btn--danger"
+            title="Remove block"
+            @click="removeChild(block.id)"
+          >
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Add block button -->
+      <div class="cpub-step-add-row">
+        <button class="cpub-step-add-btn" @click="toggleAddMenu">
+          <i class="fa-solid fa-plus"></i> Add block
+        </button>
+        <div v-if="showAddMenu" class="cpub-step-add-menu">
+          <button
+            v-for="t in INSERTABLE_TYPES"
+            :key="t.type"
+            class="cpub-step-add-option"
+            @click="onAddType(t.type)"
+          >
+            <i :class="t.icon"></i> {{ t.label }}
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -91,13 +281,112 @@ function updateField(field: string, value: unknown): void {
 .cpub-step-time:focus { border-color: var(--accent); }
 .cpub-step-time::placeholder { color: var(--text-faint); }
 
-.cpub-step-body { padding: 14px 16px; }
+/* --- Children --- */
+.cpub-step-children {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-.cpub-step-instructions {
-  width: 100%; font-size: 13px; line-height: 1.65;
-  background: transparent; border: none; outline: none;
-  color: var(--text); resize: vertical;
-  font-family: var(--font-sans, system-ui);
+.cpub-step-child {
+  position: relative;
+  border: var(--border-width-default) solid transparent;
+  padding: 4px 0;
+  transition: border-color 0.1s;
+}
+
+.cpub-step-child:hover {
+  border-color: var(--border2);
+}
+
+.cpub-step-child-actions {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.cpub-step-child:hover .cpub-step-child-actions {
+  opacity: 1;
+}
+
+.cpub-step-child-btn {
+  width: 22px; height: 22px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-faint);
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px;
+  padding: 0;
+}
+
+.cpub-step-child-btn:hover {
+  background: var(--surface3);
+  color: var(--text);
+}
+
+.cpub-step-child-btn--danger:hover {
+  background: var(--red-bg);
+  color: var(--red);
+  border-color: var(--red-border);
+}
+
+/* --- Add block --- */
+.cpub-step-add-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-top: 4px;
+}
+
+.cpub-step-add-btn {
+  display: flex; align-items: center; gap: 6px;
+  padding: 4px 10px;
+  font-size: 11px; font-family: var(--font-mono);
+  background: transparent;
+  border: var(--border-width-default) dashed var(--border2);
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: all 0.1s;
+}
+
+.cpub-step-add-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-step-add-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  display: flex;
+  gap: 0;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-md);
+  z-index: 10;
+}
+
+.cpub-step-add-option {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 12px;
+  font-size: 11px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.cpub-step-add-option:hover {
+  background: var(--accent-bg);
+  color: var(--accent);
 }
-.cpub-step-instructions::placeholder { color: var(--text-faint); }
 </style>

package/vue/composables/useBlockEditor.ts

@@ -21,7 +21,7 @@ const BLOCK_DEFAULTS: Record<string, () => Record<string, unknown>> = {
   embed: () => ({ url: '', type: 'generic', html: '' }),
   horizontal_rule: () => ({}),
   partsList: () => ({ parts: [] }),
-  buildStep: () => ({ stepNumber: 1, instructions: '', image: '', time: '' }),
+  buildStep: () => ({ stepNumber: 1, title: '', time: '', children: [['paragraph', { html: '' }]] }),
   toolList: () => ({ tools: [] }),
   downloads: () => ({ files: [] }),
   quiz: () => ({ question: '', options: [], feedback: '' }),