@craftile/core 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craftile/core",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Framework-agnostic block editor engine for Craftile",
   "keywords": [
     "craftile",
@@ -26,8 +26,8 @@
     "src"
   ],
   "dependencies": {
-    "@craftile/event-bus": "0.2.1",
-    "@craftile/types": "0.2.1"
+    "@craftile/event-bus": "0.3.0",
+    "@craftile/types": "0.3.0"
   },
   "devDependencies": {
     "vitest": "^3.2.4",

package/src/commands/insert-block-from-preset.ts

@@ -63,6 +63,7 @@ export class InsertBlockFromPresetCommand implements Command {
     this.insertedBlock = {
       type: this.blockType,
       id: this.blockId,
+      name: preset.name,
       properties: this.properties,
       children: [],
       parentId: undefined,
@@ -176,6 +177,7 @@ export class InsertBlockFromPresetCommand implements Command {
       const childBlock: Block = {
         type: presetChild.type,
         id: childId,
+        name: childSchema.meta?.name || presetChild.type, // Use schema name for child blocks
         semanticId: presetChild.id, // Preserve semantic ID from preset
         properties: childProperties,
         children: [],

package/src/commands/insert-block.ts

@@ -20,6 +20,7 @@ export class InsertBlockCommand implements Command {
   private index?: number;
   private blockId: string;
   private properties: Record<string, any>;
+  private blockSchema?: BlockSchema;
   private insertedBlock?: Block;
   private actualIndex?: number;
   private emit: EngineEmitFn;
@@ -32,14 +33,18 @@ export class InsertBlockCommand implements Command {
     this.index = options.index;
     this.blockId = generateId();
     this.emit = options.emit;
+    this.blockSchema = options.blockSchema;
 
     this.properties = this.buildProperties(options.blockSchema);
   }
 
   apply(): void {
+    const blockName = this.blockSchema?.meta?.name || this.blockType;
+
     this.insertedBlock = {
       type: this.blockType,
       id: this.blockId,
+      name: blockName,
       properties: this.properties,
       children: [],
       parentId: undefined, // Will be set if inserting as child

package/src/commands/set-block-name.ts

@@ -0,0 +1,63 @@
+import type { Block, Page } from '@craftile/types';
+import type { Command, EngineEmitFn } from '../types';
+
+export interface SetBlockNameOptions {
+  blockId: string;
+  name: string;
+  emit: EngineEmitFn;
+}
+
+export class SetBlockNameCommand implements Command {
+  private page: Page;
+  private blockId: string;
+  private newName: string;
+  private oldName: string | undefined;
+  private block: Block | undefined;
+  private emit: EngineEmitFn;
+
+  constructor(page: Page, options: SetBlockNameOptions) {
+    this.page = page;
+    this.blockId = options.blockId;
+    this.newName = options.name;
+    this.emit = options.emit;
+    this.block = this.page.blocks[this.blockId];
+
+    if (!this.block) {
+      throw new Error(`Block not found: ${this.blockId}`);
+    }
+
+    this.oldName = this.block.name;
+  }
+
+  apply(): void {
+    if (!this.block) {
+      throw new Error(`Block not found: ${this.blockId}`);
+    }
+
+    this.block.name = this.newName;
+
+    this.emit('block:update', {
+      blockId: this.blockId,
+      block: this.block,
+      property: 'name',
+      value: this.newName,
+      oldValue: this.oldName,
+    });
+  }
+
+  revert(): void {
+    if (!this.block) {
+      return;
+    }
+
+    this.block.name = this.oldName;
+
+    this.emit('block:update', {
+      blockId: this.blockId,
+      block: this.block,
+      property: 'name',
+      value: this.oldName,
+      oldValue: this.newName,
+    });
+  }
+}

package/src/engine.ts

@@ -10,6 +10,7 @@ import { MoveBlockCommand } from './commands/move-block';
 import { ToggleBlockCommand } from './commands/toggle-block';
 import { SetBlockPropertyCommand } from './commands/set-block-property';
 import { DuplicateBlockCommand } from './commands/duplicate-block';
+import { SetBlockNameCommand } from './commands/set-block-name';
 
 export class Engine extends EventBus<EngineEvents> {
   protected page!: Page;
@@ -233,6 +234,25 @@ export class Engine extends EventBus<EngineEvents> {
     this.historyManager.addCommand(command);
   }
 
+  /**
+   * Set the display name for a block
+   *
+   * @param blockId - ID of the target block
+   * @param name - The new display name for the block
+   * @throws {Error} When block is not found
+   * @emits block:update - When the name is successfully set
+   */
+  setBlockName(blockId: string, name: string): void {
+    const command = new SetBlockNameCommand(this.page, {
+      blockId,
+      name,
+      emit: this.emit.bind(this),
+    });
+
+    command.apply();
+    this.historyManager.addCommand(command);
+  }
+
   /**
    * Duplicate a block (creates a copy placed right after the original)
    */

package/src/types.ts

@@ -19,6 +19,7 @@ export interface EngineEvents {
   'block:remove': { blockId: string; block: Block; parentId?: string };
   'block:toggle': { blockId: string; disabled: boolean; oldValue?: boolean };
   'block:property:set': { blockId: string; key: string; value: any; oldValue: any };
+  'block:update': { blockId: string; block: Block; property: string; value: any; oldValue: any };
   'block:move': {
     blockId: string;
     targetParentId?: string;

package/src/vue/useBlocksEngine.ts

@@ -51,6 +51,7 @@ export interface UseBlocksEngineReturn {
     }
   ) => void;
   setBlockProperty: (blockId: string, propertyKey: string, propertyValue: any) => void;
+  setBlockName: (blockId: string, name: string) => void;
   toggleBlock: (blockId: string, disabled?: boolean) => void;
   duplicateBlock: (blockId: string) => string;
 
@@ -168,6 +169,7 @@ export function useBlocksEngine(
       'block:toggle',
       'block:duplicate',
       'block:property:set',
+      'block:update',
       'undo',
       'redo',
     ] as const;
@@ -247,6 +249,14 @@ export function useBlocksEngine(
     }
   };
 
+  const setBlockName = (blockId: string, name: string): void => {
+    engine.setBlockName(blockId, name);
+
+    if (!autoSync) {
+      syncStateFromEngine();
+    }
+  };
+
   const toggleBlock = (blockId: string, disabled?: boolean): void => {
     engine.toggleBlock(blockId, disabled);
 
@@ -319,6 +329,7 @@ export function useBlocksEngine(
     removeBlock,
     moveBlock,
     setBlockProperty,
+    setBlockName,
     toggleBlock,
     duplicateBlock,