initial

2026-01-06 02:24:12 +00:00
commit edea37a856
64 changed files with 18007 additions and 0 deletions
--- a/test/test.chromium.ts
+++ b/test/test.chromium.ts
@@ -0,0 +1,12 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import * as deesCatalog from '../ts_web/index.js';
+
+tap.test('should create a working button', async () => {
+  const button: deesCatalog.DeesButton = await webhelpers.fixture(
+    webhelpers.html`<dees-button></dees-button>`
+  );
+  expect(button).toBeInstanceOf(deesCatalog.DeesButton);
+});
+
+export default tap.start();
--- a/test/test.contextmenu-demo.chromium.ts
+++ b/test/test.contextmenu-demo.chromium.ts
@@ -0,0 +1,35 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.demo.js';
+
+tap.test('should render context menu demo', async () => {
+  // Create demo container
+  const demoContainer = document.createElement('div');
+  document.body.appendChild(demoContainer);
+  
+  // Render the demo
+  const demoContent = demoFunc();
+  
+  // Create a temporary element to hold the rendered template
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = demoContent.strings.join('');
+  
+  // Check that panels are rendered
+  const panels = tempDiv.querySelectorAll('dees-panel');
+  expect(panels.length).toEqual(4);
+  
+  // Check panel headings
+  expect(panels[0].getAttribute('heading')).toEqual('Basic Context Menu with Nested Submenus');
+  expect(panels[1].getAttribute('heading')).toEqual('Component-Specific Context Menu');
+  expect(panels[2].getAttribute('heading')).toEqual('Advanced Context Menu Example');
+  expect(panels[3].getAttribute('heading')).toEqual('Static Context Menu (Always Visible)');
+  
+  // Check that static context menu exists
+  const staticMenu = tempDiv.querySelector('dees-contextmenu');
+  expect(staticMenu).toBeTruthy();
+  
+  // Clean up
+  demoContainer.remove();
+});
+
+export default tap.start();
--- a/test/test.contextmenu-nested-close.chromium.ts
+++ b/test/test.contextmenu-nested-close.chromium.ts
@@ -0,0 +1,93 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should close all parent menus when clicking action in nested submenu', async () => {
+  let actionCalled = false;
+  
+  // Create a test element
+  const testDiv = document.createElement('div');
+  testDiv.style.width = '300px';
+  testDiv.style.height = '300px';
+  testDiv.style.background = '#f0f0f0';
+  testDiv.innerHTML = 'Right-click for nested menu test';
+  document.body.appendChild(testDiv);
+  
+  // Simulate right-click to open context menu
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 150,
+    clientY: 150,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  // Open context menu with nested structure
+  DeesContextmenu.openContextMenuWithOptions(contextMenuEvent, [
+    {
+      name: 'Parent Item',
+      iconName: 'folder',
+      action: async () => {}, // Parent items with submenus need an action
+      submenu: [
+        {
+          name: 'Child Item',
+          iconName: 'file',
+          action: async () => {
+            actionCalled = true;
+            console.log('Child action called');
+          }
+        },
+        {
+          name: 'Another Child',
+          iconName: 'fileText',
+          action: async () => console.log('Another child')
+        }
+      ]
+    },
+    {
+      name: 'Regular Item',
+      iconName: 'box',
+      action: async () => console.log('Regular item')
+    }
+  ]);
+  
+  // Wait for main menu to appear
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // Check main menu exists
+  const mainMenu = document.querySelector('dees-contextmenu');
+  expect(mainMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Hover over "Parent Item" to trigger submenu
+  const parentItem = mainMenu!.shadowRoot!.querySelector('.menuitem');
+  expect(parentItem).toBeTruthy();
+  parentItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check submenu exists
+  const allMenus = document.querySelectorAll('dees-contextmenu');
+  expect(allMenus.length).toEqual(2); // Main menu and submenu
+  
+  const submenu = allMenus[1];
+  expect(submenu).toBeTruthy();
+  
+  // Click on "Child Item" in submenu
+  const childItem = submenu.shadowRoot!.querySelector('.menuitem');
+  expect(childItem).toBeTruthy();
+  childItem!.click();
+  
+  // Wait for menus to close (windowLayer destruction takes 300ms + context menu 100ms)
+  await new Promise(resolve => setTimeout(resolve, 600));
+  
+  // Verify action was called
+  expect(actionCalled).toEqual(true);
+  
+  // Verify all menus are closed
+  const remainingMenus = document.querySelectorAll('dees-contextmenu');
+  expect(remainingMenus.length).toEqual(0);
+  
+  // Clean up
+  testDiv.remove();
+});
+
+export default tap.start();
--- a/test/test.contextmenu-shadowdom.chromium.ts
+++ b/test/test.contextmenu-shadowdom.chromium.ts
@@ -0,0 +1,71 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesElement, customElement, html } from '@design.estate/dees-element';
+
+// Create a test element with shadow DOM
+@customElement('test-shadow-element')
+class TestShadowElement extends DeesElement {
+  public getContextMenuItems() {
+    return [
+      { name: 'Shadow Item 1', iconName: 'box', action: async () => console.log('Shadow 1') },
+      { name: 'Shadow Item 2', iconName: 'package', action: async () => console.log('Shadow 2') }
+    ];
+  }
+  
+  render() {
+    return html`
+      <div style="padding: 40px; background: #eee; border-radius: 8px;">
+        <h3>Shadow DOM Content</h3>
+        <p>Right-click anywhere inside this shadow DOM</p>
+      </div>
+    `;
+  }
+}
+
+tap.test('should show context menu when right-clicking inside shadow DOM', async () => {
+  // Create the shadow DOM element
+  const shadowElement = document.createElement('test-shadow-element');
+  document.body.appendChild(shadowElement);
+  
+  // Wait for element to be ready
+  await shadowElement.updateComplete;
+  
+  // Get the content inside shadow DOM
+  const shadowContent = shadowElement.shadowRoot!.querySelector('div');
+  expect(shadowContent).toBeTruthy();
+  
+  // Simulate right-click on content inside shadow DOM
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 100,
+    clientY: 100,
+    bubbles: true,
+    cancelable: true,
+    composed: true // Important for shadow DOM
+  });
+  
+  shadowContent!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items from shadow element are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  expect(menuItems.length).toBeGreaterThanOrEqual(2);
+  
+  // Check menu item text
+  const menuTexts = Array.from(menuItems).map(item => 
+    item.querySelector('.menuitem-text')?.textContent
+  );
+  expect(menuTexts).toContain('Shadow Item 1');
+  expect(menuTexts).toContain('Shadow Item 2');
+  
+  // Clean up
+  contextMenu!.remove();
+  shadowElement.remove();
+});
+
+export default tap.start();
--- a/test/test.contextmenu.chromium.ts
+++ b/test/test.contextmenu.chromium.ts
@@ -0,0 +1,77 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should show context menu with nested submenu', async () => {
+  // Create a test element with context menu items
+  const testDiv = document.createElement('div');
+  testDiv.style.width = '200px';
+  testDiv.style.height = '200px';
+  testDiv.style.background = '#eee';
+  testDiv.innerHTML = 'Right-click me';
+  
+  // Add getContextMenuItems method
+  (testDiv as any).getContextMenuItems = () => {
+    return [
+      {
+        name: 'Change Type',
+        iconName: 'type',
+        submenu: [
+          { name: 'Paragraph', iconName: 'text', action: () => console.log('Paragraph') },
+          { name: 'Heading 1', iconName: 'heading1', action: () => console.log('Heading 1') },
+          { name: 'Heading 2', iconName: 'heading2', action: () => console.log('Heading 2') },
+          { divider: true },
+          { name: 'Code Block', iconName: 'fileCode', action: () => console.log('Code') },
+          { name: 'Quote', iconName: 'quote', action: () => console.log('Quote') }
+        ]
+      },
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'trash2',
+        action: () => console.log('Delete')
+      }
+    ];
+  };
+  
+  document.body.appendChild(testDiv);
+  
+  // Simulate right-click
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 100,
+    clientY: 100,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  testDiv.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  expect(menuItems.length).toEqual(2); // "Change Type" and "Delete"
+  
+  // Hover over "Change Type" to trigger submenu
+  const changeTypeItem = menuItems[0] as HTMLElement;
+  changeTypeItem.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check if submenu is created
+  const submenus = document.querySelectorAll('dees-contextmenu');
+  expect(submenus.length).toEqual(2); // Main menu and submenu
+  
+  // Clean up
+  contextMenu!.remove();
+  const submenu = submenus[1];
+  if (submenu) submenu.remove();
+  testDiv.remove();
+});
+
+export default tap.start();
--- a/test/test.dashboardgrid-layout.node.ts
+++ b/test/test.dashboardgrid-layout.node.ts
@@ -0,0 +1,28 @@
+import { tap, expect } from '@git.zone/tstest/tapbundle';
+
+import {
+  resolveWidgetPlacement,
+  collectCollisions,
+} from '../ts_web/elements/dees-dashboardgrid/layout.ts';
+import type { DashboardWidget } from '../ts_web/elements/dees-dashboardgrid/types.ts';
+
+tap.test('dashboardgrid does not overlap widgets after swap attempt', async () => {
+  const widgets: DashboardWidget[] = [
+    { id: 'w0', x: 6, y: 5, w: 1, h: 3 },
+    { id: 'w1', x: 6, y: 1, w: 1, h: 3 },
+    { id: 'w2', x: 3, y: 0, w: 2, h: 2 },
+    { id: 'w3', x: 9, y: 0, w: 1, h: 2 },
+    { id: 'w4', x: 4, y: 3, w: 1, h: 2 },
+  ];
+
+  const placement = resolveWidgetPlacement(widgets, 'w0', { x: 6, y: 3 }, 12);
+  expect(placement).toBeTruthy();
+
+  const layout = placement!.widgets;
+  for (const widget of layout) {
+    const collisions = collectCollisions(layout, widget, widget.x, widget.y, widget.w, widget.h);
+    expect(collisions).toBeEmptyArray();
+  }
+});
+
+export default tap.start();
--- a/test/test.shadow-dom-containment.chromium.ts
+++ b/test/test.shadow-dom-containment.chromium.ts
@@ -0,0 +1,183 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+import { WysiwygSelection } from '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.selection.js';
+
+tap.test('Shadow DOM containment should work correctly', async () => {
+  console.log('=== Testing Shadow DOM Containment ===');
+
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create a WYSIWYG block component - set properties BEFORE attaching to DOM
+  const block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set the block data before attaching to DOM so firstUpdated() sees them
+  block.block = {
+    id: 'test-1',
+    type: 'paragraph',
+    content: 'Hello world test content'
+  };
+
+  block.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {}
+  };
+
+  // Now attach to DOM and wait for render
+  document.body.appendChild(block);
+  await block.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  // Get the paragraph element inside Shadow DOM
+  const container = block.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const paragraphBlock = container?.querySelector('.block.paragraph') as HTMLElement;
+  
+  expect(paragraphBlock).toBeTruthy();
+  console.log('Found paragraph block:', paragraphBlock);
+  console.log('Paragraph text content:', paragraphBlock.textContent);
+  
+  // Focus the paragraph
+  paragraphBlock.focus();
+  
+  // Manually set cursor position
+  const textNode = paragraphBlock.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    
+    // Set cursor at position 11 (after "Hello world")
+    range.setStart(textNode, 11);
+    range.setEnd(textNode, 11);
+    
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    
+    console.log('Set cursor at position 11');
+    
+    // Test the containment check
+    console.log('\n--- Testing containment ---');
+    const currentSelection = window.getSelection();
+    if (currentSelection && currentSelection.rangeCount > 0) {
+      const selRange = currentSelection.getRangeAt(0);
+      console.log('Selection range:', {
+        startContainer: selRange.startContainer,
+        startOffset: selRange.startOffset,
+        containerText: selRange.startContainer.textContent
+      });
+      
+      // Test regular contains (should fail across Shadow DOM)
+      const regularContains = paragraphBlock.contains(selRange.startContainer);
+      console.log('Regular contains:', regularContains);
+      
+      // Test Shadow DOM-aware contains
+      const shadowDOMContains = WysiwygSelection.containsAcrossShadowDOM(paragraphBlock, selRange.startContainer);
+      console.log('Shadow DOM contains:', shadowDOMContains);
+      
+      // Since we're setting selection within the same shadow DOM, both should be true
+      expect(regularContains).toBeTrue();
+      expect(shadowDOMContains).toBeTrue();
+    }
+    
+    // Test getSplitContent
+    console.log('\n--- Testing getSplitContent ---');
+    const splitResult = block.getSplitContent();
+    console.log('Split result:', splitResult);
+    
+    expect(splitResult).toBeTruthy();
+    if (splitResult) {
+      console.log('Before:', JSON.stringify(splitResult.before));
+      console.log('After:', JSON.stringify(splitResult.after));
+      
+      // Expected split at position 11
+      expect(splitResult.before).toEqual('Hello world');
+      expect(splitResult.after).toEqual(' test content');
+    }
+  }
+
+  // Clean up
+  document.body.removeChild(block);
+});
+
+tap.test('Shadow DOM containment across different shadow roots', async () => {
+  console.log('=== Testing Cross Shadow Root Containment ===');
+  
+  // Create parent component with WYSIWYG editor
+  const parentDiv = document.createElement('div');
+  parentDiv.innerHTML = `
+    <dees-input-wysiwyg>
+      <dees-wysiwyg-block></dees-wysiwyg-block>
+    </dees-input-wysiwyg>
+  `;
+  document.body.appendChild(parentDiv);
+  
+  // Wait for components to be ready
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  const wysiwygInput = parentDiv.querySelector('dees-input-wysiwyg') as any;
+  const blockElement = wysiwygInput?.shadowRoot?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  
+  if (blockElement) {
+    // Set block data
+    blockElement.block = {
+      id: 'test-2',
+      type: 'paragraph',
+      content: 'Cross shadow DOM test'
+    };
+    
+    blockElement.handlers = {
+      onInput: () => {},
+      onKeyDown: () => {},
+      onFocus: () => {},
+      onBlur: () => {},
+      onCompositionStart: () => {},
+      onCompositionEnd: () => {}
+    };
+    
+    await blockElement.updateComplete;
+    
+    // Get the paragraph inside the nested shadow DOM
+    const container = blockElement.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+    const paragraphBlock = container?.querySelector('.block.paragraph') as HTMLElement;
+    
+    if (paragraphBlock) {
+      console.log('Found nested paragraph block');
+      
+      // Focus and set selection
+      paragraphBlock.focus();
+      const textNode = paragraphBlock.firstChild;
+      if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+        const range = document.createRange();
+        range.setStart(textNode, 5);
+        range.setEnd(textNode, 5);
+        
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        
+        // Test containment from parent's perspective
+        const selRange = selection?.getRangeAt(0);
+        if (selRange) {
+          // This should fail because it crosses shadow DOM boundary
+          const regularContains = wysiwygInput.contains(selRange.startContainer);
+          console.log('Parent regular contains:', regularContains);
+          expect(regularContains).toBeFalse();
+          
+          // This should work with our Shadow DOM-aware method
+          const shadowDOMContains = WysiwygSelection.containsAcrossShadowDOM(wysiwygInput, selRange.startContainer);
+          console.log('Parent shadow DOM contains:', shadowDOMContains);
+          expect(shadowDOMContains).toBeTrue();
+        }
+      }
+    }
+  }
+  
+  // Clean up
+  document.body.removeChild(parentDiv);
+});
+
+export default tap.start();
--- a/test/test.tabs-indicator.chromium.ts
+++ b/test/test.tabs-indicator.chromium.ts
@@ -0,0 +1,146 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import * as deesCatalog from '../ts_web/index.js';
+
+tap.test('tabs indicator positioning - detailed measurements', async () => {
+  // Create tabs element with different length labels
+  const tabsElement = new deesCatalog.DeesAppuiTabs();
+  tabsElement.tabs = [
+    { key: 'Home', iconName: 'lucide:home', action: () => {} },
+    { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => {} },
+    { key: 'User Settings', iconName: 'lucide:settings', action: () => {} },
+  ];
+  
+  document.body.appendChild(tabsElement);
+  await tabsElement.updateComplete;
+  
+  // Wait for fonts and indicator initialization
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Get all elements
+  const shadowRoot = tabsElement.shadowRoot;
+  const wrapper = shadowRoot.querySelector('.tabs-wrapper') as HTMLElement;
+  const container = shadowRoot.querySelector('.tabsContainer') as HTMLElement;
+  const tabs = shadowRoot.querySelectorAll('.tab');
+  const firstTab = tabs[0] as HTMLElement;
+  const firstContent = firstTab.querySelector('.tab-content') as HTMLElement;
+  const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
+  
+  // Verify all elements exist
+  expect(wrapper).toBeInstanceOf(HTMLElement);
+  expect(container).toBeInstanceOf(HTMLElement);
+  expect(firstTab).toBeInstanceOf(HTMLElement);
+  expect(firstContent).toBeInstanceOf(HTMLElement);
+  expect(indicator).toBeInstanceOf(HTMLElement);
+  
+  // Get all measurements
+  const wrapperRect = wrapper.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const tabRect = firstTab.getBoundingClientRect();
+  const contentRect = firstContent.getBoundingClientRect();
+  const indicatorRect = indicator.getBoundingClientRect();
+  
+  console.log('\n=== DETAILED MEASUREMENTS ===');
+  console.log('Document body left:', document.body.getBoundingClientRect().left);
+  console.log('Wrapper left:', wrapperRect.left);
+  console.log('Container left:', containerRect.left);
+  console.log('Tab left:', tabRect.left);
+  console.log('Content left:', contentRect.left);
+  console.log('Indicator left (actual):', indicatorRect.left);
+  
+  console.log('\n=== RELATIVE POSITIONS ===');
+  console.log('Container padding (container - wrapper):', containerRect.left - wrapperRect.left);
+  console.log('Tab position in container:', tabRect.left - containerRect.left);
+  console.log('Content position in tab:', contentRect.left - tabRect.left);
+  console.log('Content relative to wrapper:', contentRect.left - wrapperRect.left);
+  console.log('Indicator relative to wrapper (actual):', indicatorRect.left - wrapperRect.left);
+  
+  console.log('\n=== WIDTHS ===');
+  console.log('Tab width:', tabRect.width);
+  console.log('Content width:', contentRect.width);
+  console.log('Indicator width:', indicatorRect.width);
+  
+  console.log('\n=== STYLES (what we set) ===');
+  console.log('Indicator style.left:', indicator.style.left);
+  console.log('Indicator style.width:', indicator.style.width);
+  
+  console.log('\n=== CALCULATIONS ===');
+  const expectedIndicatorLeft = contentRect.left - wrapperRect.left - 4; // We subtract 4 to center
+  const expectedIndicatorWidth = contentRect.width + 8; // We add 8 in the code
+  console.log('Expected indicator left:', expectedIndicatorLeft);
+  console.log('Expected indicator width:', expectedIndicatorWidth);
+  console.log('Actual indicator left (from style):', parseFloat(indicator.style.left));
+  console.log('Actual indicator width (from style):', parseFloat(indicator.style.width));
+  
+  console.log('\n=== VISUAL ALIGNMENT CHECK ===');
+  const tabCenter = tabRect.left + (tabRect.width / 2);
+  const contentCenter = contentRect.left + (contentRect.width / 2);
+  const indicatorCenter = indicatorRect.left + (indicatorRect.width / 2);
+  
+  console.log('Tab center:', tabCenter);
+  console.log('Content center:', contentCenter);
+  console.log('Indicator center:', indicatorCenter);
+  console.log('Content offset from tab center:', contentCenter - tabCenter);
+  console.log('Indicator offset from content center:', indicatorCenter - contentCenter);
+  console.log('Indicator offset from tab center:', indicatorCenter - tabCenter);
+  console.log('---');
+  console.log('Indicator extends left of content by:', contentRect.left - indicatorRect.left);
+  console.log('Indicator extends right of content by:', (indicatorRect.left + indicatorRect.width) - (contentRect.left + contentRect.width));
+  
+  // Check if icons are rendering
+  const icon = firstContent.querySelector('dees-icon');
+  console.log('\n=== ICON CHECK ===');
+  console.log('Icon element found:', icon ? 'YES' : 'NO');
+  if (icon) {
+    const iconRect = icon.getBoundingClientRect();
+    console.log('Icon width:', iconRect.width);
+    console.log('Icon height:', iconRect.height);
+    console.log('Icon visible:', iconRect.width > 0 && iconRect.height > 0 ? 'YES' : 'NO');
+  }
+  
+  // Verify indicator is visible
+  expect(indicator.style.opacity).toEqual('1');
+  
+  // Verify positioning calculations
+  expect(parseFloat(indicator.style.left)).toBeCloseTo(expectedIndicatorLeft, 1);
+  expect(parseFloat(indicator.style.width)).toBeCloseTo(expectedIndicatorWidth, 1);
+  
+  // Verify visual centering on content (should be perfectly centered)
+  expect(Math.abs(indicatorCenter - contentCenter)).toBeLessThan(1);
+  
+  document.body.removeChild(tabsElement);
+});
+
+tap.test('tabs indicator should move when tab is clicked', async () => {
+  // Create tabs element
+  const tabsElement = new deesCatalog.DeesAppuiTabs();
+  tabsElement.tabs = [
+    { key: 'Home', iconName: 'lucide:home', action: () => {} },
+    { key: 'Analytics', iconName: 'lucide:barChart', action: () => {} },
+    { key: 'Settings', iconName: 'lucide:settings', action: () => {} },
+  ];
+  
+  document.body.appendChild(tabsElement);
+  await tabsElement.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  const shadowRoot = tabsElement.shadowRoot;
+  const tabs = shadowRoot.querySelectorAll('.tab');
+  const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
+  
+  // Get initial position
+  const initialLeft = parseFloat(indicator.style.left);
+  
+  // Click second tab
+  (tabs[1] as HTMLElement).click();
+  await tabsElement.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Position should have changed
+  const newLeft = parseFloat(indicator.style.left);
+  expect(newLeft).not.toEqual(initialLeft);
+  expect(newLeft).toBeGreaterThan(initialLeft);
+  
+  document.body.removeChild(tabsElement);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-basic.chromium.ts
+++ b/test/test.wysiwyg-basic.chromium.ts
@@ -0,0 +1,9 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+tap.test('should create wysiwyg editor', async () => {
+  const editor = new DeesInputWysiwyg();
+  expect(editor).toBeInstanceOf(DeesInputWysiwyg);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-blockmovement.chromium.ts
+++ b/test/test.wysiwyg-blockmovement.chromium.ts
@@ -0,0 +1,85 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg block movement during drag', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Start dragging block 1
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: () => {},
+      setDragImage: () => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Verify drag state
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Check that drag height was calculated
+  console.log('Checking drag height...');
+  const dragHandler = element.dragDropHandler as any;
+  console.log('draggedBlockHeight:', dragHandler.draggedBlockHeight);
+  console.log('draggedBlockContentHeight:', dragHandler.draggedBlockContentHeight);
+  
+  // Manually call updateBlockPositions to simulate drag movement
+  console.log('Simulating drag movement...');
+  const updateBlockPositions = dragHandler.updateBlockPositions.bind(dragHandler);
+  
+  // Simulate dragging down past block 2
+  const block2 = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
+  const block2Rect = block2.getBoundingClientRect();
+  const dragToY = block2Rect.bottom + 10;
+  
+  console.log('Dragging to Y position:', dragToY);
+  updateBlockPositions(dragToY);
+  
+  // Check if blocks have moved
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block states after drag:');
+  blocks.forEach((block, i) => {
+    const classes = block.className;
+    const offset = (block as HTMLElement).style.getPropertyValue('--drag-offset');
+    console.log(`Block ${i}: classes="${classes}", offset="${offset}"`);
+  });
+  
+  // Check that at least one block has move class
+  const movedUpBlocks = editorContent.querySelectorAll('.block-wrapper.move-up');
+  const movedDownBlocks = editorContent.querySelectorAll('.block-wrapper.move-down');
+  console.log('Moved up blocks:', movedUpBlocks.length);
+  console.log('Moved down blocks:', movedDownBlocks.length);
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-blocks-debug.chromium.ts
+++ b/test/test.wysiwyg-blocks-debug.chromium.ts
@@ -0,0 +1,69 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import * as deesCatalog from '../ts_web/index.js';
+import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+// Import block registration to ensure handlers are registered
+import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
+
+tap.test('Debug: should create empty wysiwyg block component', async () => {
+  try {
+    console.log('Creating DeesWysiwygBlock...');
+    const block: DeesWysiwygBlock = await webhelpers.fixture(
+      webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
+    );
+    console.log('Block created:', block);
+    expect(block).toBeDefined();
+    expect(block).toBeInstanceOf(DeesWysiwygBlock);
+    console.log('Initial block property:', block.block);
+    console.log('Initial handlers property:', block.handlers);
+  } catch (error) {
+    console.error('Error creating block:', error);
+    throw error;
+  }
+});
+
+tap.test('Debug: should set properties step by step', async () => {
+  try {
+    console.log('Step 1: Creating component...');
+    const block: DeesWysiwygBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+    expect(block).toBeDefined();
+    
+    console.log('Step 2: Setting handlers...');
+    block.handlers = {
+      onInput: () => console.log('onInput'),
+      onKeyDown: () => console.log('onKeyDown'),
+      onFocus: () => console.log('onFocus'),
+      onBlur: () => console.log('onBlur'),
+      onCompositionStart: () => console.log('onCompositionStart'),
+      onCompositionEnd: () => console.log('onCompositionEnd')
+    };
+    console.log('Handlers set:', block.handlers);
+    
+    console.log('Step 3: Setting block data...');
+    block.block = {
+      id: 'test-block',
+      type: 'divider',
+      content: ' '
+    };
+    console.log('Block set:', block.block);
+    
+    console.log('Step 4: Appending to body...');
+    document.body.appendChild(block);
+    
+    console.log('Step 5: Waiting for update...');
+    await block.updateComplete;
+    console.log('Update complete');
+    
+    console.log('Step 6: Checking shadowRoot...');
+    expect(block.shadowRoot).toBeDefined();
+    console.log('ShadowRoot exists');
+    
+  } catch (error) {
+    console.error('Error in step-by-step test:', error);
+    throw error;
+  }
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-blocks.chromium.ts
+++ b/test/test.wysiwyg-blocks.chromium.ts
@@ -0,0 +1,240 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import * as deesCatalog from '../ts_web/index.js';
+import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+// Import block registration to ensure handlers are registered
+import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
+
+tap.test('BlockRegistry should have registered handlers', async () => {
+  // Test divider handler
+  const dividerHandler = BlockRegistry.getHandler('divider');
+  expect(dividerHandler).toBeDefined();
+  expect(dividerHandler?.type).toEqual('divider');
+
+  // Test paragraph handler
+  const paragraphHandler = BlockRegistry.getHandler('paragraph');
+  expect(paragraphHandler).toBeDefined();
+  expect(paragraphHandler?.type).toEqual('paragraph');
+
+  // Test heading handlers
+  const heading1Handler = BlockRegistry.getHandler('heading-1');
+  expect(heading1Handler).toBeDefined();
+  expect(heading1Handler?.type).toEqual('heading-1');
+
+  const heading2Handler = BlockRegistry.getHandler('heading-2');
+  expect(heading2Handler).toBeDefined();
+  expect(heading2Handler?.type).toEqual('heading-2');
+
+  const heading3Handler = BlockRegistry.getHandler('heading-3');
+  expect(heading3Handler).toBeDefined();
+  expect(heading3Handler?.type).toEqual('heading-3');
+
+  // Test that getAllTypes returns all registered types
+  const allTypes = BlockRegistry.getAllTypes();
+  expect(allTypes).toContain('divider');
+  expect(allTypes).toContain('paragraph');
+  expect(allTypes).toContain('heading-1');
+  expect(allTypes).toContain('heading-2');
+  expect(allTypes).toContain('heading-3');
+});
+
+tap.test('should render divider block using handler', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create element and set properties BEFORE attaching to DOM
+  const dividerBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set required handlers
+  dividerBlock.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {}
+  };
+
+  // Set a divider block
+  dividerBlock.block = {
+    id: 'test-divider',
+    type: 'divider',
+    content: ' '
+  };
+
+  // Attach to DOM and wait for render
+  document.body.appendChild(dividerBlock);
+  await dividerBlock.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Check that the divider is rendered
+  const dividerElement = dividerBlock.shadowRoot?.querySelector('.block.divider');
+  expect(dividerElement).toBeTruthy();
+  expect(dividerElement?.getAttribute('tabindex')).toEqual('0');
+
+  // Check for the hr element (divider uses <hr> not .divider-icon)
+  const hr = dividerBlock.shadowRoot?.querySelector('hr');
+  expect(hr).toBeTruthy();
+
+  // Clean up
+  document.body.removeChild(dividerBlock);
+});
+
+tap.test('should render paragraph block using handler', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create element and set properties BEFORE attaching to DOM
+  const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set required handlers
+  paragraphBlock.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  // Set a paragraph block
+  paragraphBlock.block = {
+    id: 'test-paragraph',
+    type: 'paragraph',
+    content: 'Test paragraph content'
+  };
+
+  // Attach to DOM and wait for render
+  document.body.appendChild(paragraphBlock);
+  await paragraphBlock.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Check that the paragraph is rendered
+  const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
+  expect(paragraphElement).toBeTruthy();
+  expect(paragraphElement?.getAttribute('contenteditable')).toEqual('true');
+  expect(paragraphElement?.textContent).toEqual('Test paragraph content');
+
+  // Clean up
+  document.body.removeChild(paragraphBlock);
+});
+
+tap.test('should render heading blocks using handler', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Test heading-1 - set properties BEFORE attaching to DOM
+  const heading1Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  heading1Block.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  heading1Block.block = {
+    id: 'test-h1',
+    type: 'heading-1',
+    content: 'Heading 1 Test'
+  };
+
+  document.body.appendChild(heading1Block);
+  await heading1Block.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  const h1Element = heading1Block.shadowRoot?.querySelector('.block.heading-1');
+  expect(h1Element).toBeTruthy();
+  expect(h1Element?.textContent).toEqual('Heading 1 Test');
+
+  // Clean up heading-1
+  document.body.removeChild(heading1Block);
+
+  // Test heading-2 - set properties BEFORE attaching to DOM
+  const heading2Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  heading2Block.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  heading2Block.block = {
+    id: 'test-h2',
+    type: 'heading-2',
+    content: 'Heading 2 Test'
+  };
+
+  document.body.appendChild(heading2Block);
+  await heading2Block.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  const h2Element = heading2Block.shadowRoot?.querySelector('.block.heading-2');
+  expect(h2Element).toBeTruthy();
+  expect(h2Element?.textContent).toEqual('Heading 2 Test');
+
+  // Clean up heading-2
+  document.body.removeChild(heading2Block);
+});
+
+tap.test('paragraph block handler methods should work', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create element and set properties BEFORE attaching to DOM
+  const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set required handlers
+  paragraphBlock.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  paragraphBlock.block = {
+    id: 'test-methods',
+    type: 'paragraph',
+    content: 'Initial content'
+  };
+
+  document.body.appendChild(paragraphBlock);
+  await paragraphBlock.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Test getContent
+  const content = paragraphBlock.getContent();
+  expect(content).toEqual('Initial content');
+
+  // Test setContent
+  paragraphBlock.setContent('Updated content');
+  await paragraphBlock.updateComplete;
+  expect(paragraphBlock.getContent()).toEqual('Updated content');
+
+  // Test that the DOM is updated
+  const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
+  expect(paragraphElement?.textContent).toEqual('Updated content');
+
+  // Clean up
+  document.body.removeChild(paragraphBlock);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-blocktype-change.chromium.ts
+++ b/test/test.wysiwyg-blocktype-change.chromium.ts
@@ -0,0 +1,98 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should change block type via context menu', async () => {
+  // Create WYSIWYG editor with a paragraph
+  const wysiwygEditor = new DeesInputWysiwyg();
+  wysiwygEditor.value = '<p>This is a test paragraph</p>';
+  document.body.appendChild(wysiwygEditor);
+  
+  // Wait for editor to be ready
+  await wysiwygEditor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the first block
+  const firstBlock = wysiwygEditor.blocks[0];
+  expect(firstBlock.type).toEqual('paragraph');
+  
+  // Get the block element
+  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
+  expect(firstBlockWrapper).toBeTruthy();
+  
+  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
+  expect(blockComponent).toBeTruthy();
+  await blockComponent.updateComplete;
+  
+  // Get the editable content inside the block's shadow DOM
+  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
+  expect(editableBlock).toBeTruthy();
+  
+  // Simulate right-click on the editable block
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 200,
+    clientY: 200,
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  editableBlock!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Find "Change Type" menu item
+  const menuItems = Array.from(contextMenu!.shadowRoot!.querySelectorAll('.menuitem'));
+  const changeTypeItem = menuItems.find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
+  );
+  expect(changeTypeItem).toBeTruthy();
+  
+  // Hover over "Change Type" to trigger submenu
+  changeTypeItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check if submenu is created
+  const allMenus = document.querySelectorAll('dees-contextmenu');
+  expect(allMenus.length).toEqual(2);
+  
+  const submenu = allMenus[1];
+  const submenuItems = Array.from(submenu.shadowRoot!.querySelectorAll('.menuitem'));
+  
+  // Find "Heading 1" option
+  const heading1Item = submenuItems.find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Heading 1'
+  );
+  expect(heading1Item).toBeTruthy();
+  
+  // Click on "Heading 1"
+  (heading1Item as HTMLElement).click();
+  
+  // Wait for menu to close and block to update
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Verify block type has changed
+  expect(wysiwygEditor.blocks[0].type).toEqual('heading-1');
+  
+  // Verify DOM has been updated
+  const updatedBlockComponent = wysiwygEditor.shadowRoot!
+    .querySelector('.block-wrapper')!
+    .querySelector('dees-wysiwyg-block') as any;
+  
+  await updatedBlockComponent.updateComplete;
+  
+  const updatedBlock = updatedBlockComponent.shadowRoot!.querySelector('.block');
+  expect(updatedBlock?.classList.contains('heading-1')).toEqual(true);
+  
+  // Clean up
+  wysiwygEditor.remove();
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-contextmenu.chromium.ts
+++ b/test/test.wysiwyg-contextmenu.chromium.ts
@@ -0,0 +1,68 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should show context menu on WYSIWYG blocks', async () => {
+  // Create WYSIWYG editor
+  const wysiwygEditor = new DeesInputWysiwyg();
+  wysiwygEditor.value = '<p>Test paragraph</p><h1>Test heading</h1>';
+  document.body.appendChild(wysiwygEditor);
+  
+  // Wait for editor to be ready
+  await wysiwygEditor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the first block element
+  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
+  expect(firstBlockWrapper).toBeTruthy();
+  
+  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
+  expect(blockComponent).toBeTruthy();
+  
+  // Wait for block to be ready
+  await blockComponent.updateComplete;
+  
+  // Get the editable content inside the block's shadow DOM
+  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
+  expect(editableBlock).toBeTruthy();
+  
+  // Simulate right-click on the editable block
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 200,
+    clientY: 200,
+    bubbles: true,
+    cancelable: true,
+    composed: true // Important for shadow DOM
+  });
+  
+  editableBlock!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items from WYSIWYG block are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  const menuTexts = Array.from(menuItems).map(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim()
+  );
+  
+  // Should have "Change Type" and "Delete Block" items
+  expect(menuTexts).toContain('Change Type');
+  expect(menuTexts).toContain('Delete Block');
+  
+  // Check if "Change Type" has submenu indicator
+  const changeTypeItem = Array.from(menuItems).find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
+  );
+  expect(changeTypeItem?.classList.contains('has-submenu')).toEqual(true);
+  
+  // Clean up
+  contextMenu!.remove();
+  wysiwygEditor.remove();
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-dragdrop-simple.chromium.ts
+++ b/test/test.wysiwyg-dragdrop-simple.chromium.ts
@@ -0,0 +1,95 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag handler initialization', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  // Wait for element to be ready
+  await element.updateComplete;
+  
+  // Check that drag handler is initialized
+  expect(element.dragDropHandler).toBeTruthy();
+  
+  // Set initial content with multiple blocks
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block2', type: 'paragraph', content: 'Second paragraph' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check that editor content ref exists
+  console.log('editorContentRef:', element.editorContentRef);
+  expect(element.editorContentRef).toBeTruthy();
+  
+  // Check that blocks are rendered
+  const blockWrappers = element.shadowRoot!.querySelectorAll('.block-wrapper');
+  console.log('Number of block wrappers:', blockWrappers.length);
+  expect(blockWrappers.length).toEqual(2);
+  
+  // Check drag handles
+  const dragHandles = element.shadowRoot!.querySelectorAll('.drag-handle');
+  console.log('Number of drag handles:', dragHandles.length);
+  expect(dragHandles.length).toEqual(2);
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag start behavior', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const dragHandle = element.shadowRoot!.querySelector('.drag-handle') as HTMLElement;
+  expect(dragHandle).toBeTruthy();
+  
+  // Check that drag handle has draggable attribute
+  console.log('Drag handle draggable:', dragHandle.draggable);
+  expect(dragHandle.draggable).toBeTrue();
+  
+  // Test drag handler state before drag
+  console.log('Initial drag state:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
+  
+  // Try to manually call handleDragStart
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData called with:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage called');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Check drag state after drag start
+  console.log('Drag state after start:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-dragdrop-visual.chromium.ts
+++ b/test/test.wysiwyg-dragdrop-visual.chromium.ts
@@ -0,0 +1,133 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag visual feedback - block movement', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Manually start drag
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check dragging state
+  console.log('Block 1 classes:', block1.className);
+  console.log('Editor content classes:', editorContent.className);
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Check drop indicator exists
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  console.log('Drop indicator:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Test block movement calculation
+  console.log('Testing updateBlockPositions...');
+  
+  // Access private method for testing
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  
+  // Simulate dragging to different position
+  updateBlockPositions(150); // Move down
+  
+  // Check if blocks have move classes
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block classes after move:');
+  blocks.forEach((block, i) => {
+    console.log(`Block ${i}:`, block.className, 'transform:', (block as HTMLElement).style.getPropertyValue('--drag-offset'));
+  });
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drop indicator positioning', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Paragraph 1' },
+    { id: 'block2', type: 'heading-2', content: 'Heading 2' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Start dragging first block
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for initialization
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Get drop indicator
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check initial display state
+  console.log('Drop indicator initial display:', dropIndicator.style.display);
+  
+  // Trigger updateBlockPositions to see drop indicator
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  updateBlockPositions(100);
+  
+  // Check drop indicator position
+  console.log('Drop indicator after update:');
+  console.log('- display:', dropIndicator.style.display);
+  console.log('- top:', dropIndicator.style.top);
+  console.log('- height:', dropIndicator.style.height);
+  
+  expect(dropIndicator.style.display).toEqual('block');
+  expect(dropIndicator.style.top).toBeTruthy();
+  expect(dropIndicator.style.height).toBeTruthy();
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-dragdrop.chromium.ts
+++ b/test/test.wysiwyg-dragdrop.chromium.ts
@@ -0,0 +1,145 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag and drop should work correctly', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+
+  // Wait for element to be ready
+  await element.updateComplete;
+
+  // Set initial content with multiple blocks
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block2', type: 'heading-2', content: 'Test Heading' },
+    { id: 'block3', type: 'paragraph', content: 'Second paragraph' },
+  ];
+  element.renderBlocksProgrammatically();
+
+  await element.updateComplete;
+  // Wait for nested block components to also complete their updates
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Check that blocks are rendered
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  expect(editorContent).toBeTruthy();
+
+  const blockWrappers = editorContent.querySelectorAll('.block-wrapper');
+  expect(blockWrappers.length).toEqual(3);
+
+  // Test drag handles exist for non-divider blocks
+  const dragHandles = editorContent.querySelectorAll('.drag-handle');
+  expect(dragHandles.length).toEqual(3);
+
+  // Get references to specific blocks
+  const firstBlock = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const secondBlock = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
+  const firstDragHandle = firstBlock.querySelector('.drag-handle') as HTMLElement;
+
+  expect(firstBlock).toBeTruthy();
+  expect(secondBlock).toBeTruthy();
+  expect(firstDragHandle).toBeTruthy();
+
+  // Verify drag drop handler exists
+  expect(element.dragDropHandler).toBeTruthy();
+  expect(element.dragDropHandler.dragState).toBeTruthy();
+
+  // Test drag initialization - synthetic DragEvents may not fully work in all browsers
+  console.log('Testing drag initialization...');
+
+  // Create drag event
+  const dragStartEvent = new DragEvent('dragstart', {
+    dataTransfer: new DataTransfer(),
+    clientY: 100,
+    bubbles: true
+  });
+
+  // Simulate drag start
+  firstDragHandle.dispatchEvent(dragStartEvent);
+
+  // Wait for setTimeout in drag start
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Note: Synthetic DragEvents may not fully initialize drag state in all test environments
+  // The test verifies the structure and that events can be dispatched
+  console.log('Drag state after start:', element.dragDropHandler.dragState.draggedBlockId);
+
+  // Test drag end cleanup
+  const dragEndEvent = new DragEvent('dragend', {
+    bubbles: true
+  });
+
+  document.dispatchEvent(dragEndEvent);
+
+  // Wait for cleanup
+  await new Promise(resolve => setTimeout(resolve, 150));
+
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag and drop visual feedback', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+
+  await element.updateComplete;
+  // Wait for nested block components to also complete their updates
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const dragHandle1 = block1.querySelector('.drag-handle') as HTMLElement;
+  
+  // Start dragging block 1
+  const dragStartEvent = new DragEvent('dragstart', {
+    dataTransfer: new DataTransfer(),
+    clientY: 50,
+    bubbles: true
+  });
+  
+  dragHandle1.dispatchEvent(dragStartEvent);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Simulate dragging down
+  const dragOverEvent = new DragEvent('dragover', {
+    dataTransfer: new DataTransfer(),
+    clientY: 150, // Move down past block 2
+    bubbles: true,
+    cancelable: true
+  });
+  
+  // Trigger the global drag over handler
+  element.dragDropHandler['handleGlobalDragOver'](dragOverEvent);
+  
+  // Check that transform is applied to dragged block
+  const transform = block1.style.transform;
+  console.log('Dragged block transform:', transform);
+  expect(transform).toContain('translateY');
+  
+  // Check drop indicator position
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  if (dropIndicator) {
+    const indicatorStyle = dropIndicator.style;
+    console.log('Drop indicator position:', indicatorStyle.top, 'display:', indicatorStyle.display);
+  }
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-dragissue.chromium.ts
+++ b/test/test.wysiwyg-dragissue.chromium.ts
@@ -0,0 +1,124 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag full flow without await', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Mock drag event
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Starting drag...');
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  console.log('Drag started');
+  
+  // Check immediate state
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Instead of await with setTimeout, use a done callback
+  return new Promise<void>((resolve) => {
+    console.log('Setting up delayed check...');
+    
+    // Use regular setTimeout
+    setTimeout(() => {
+      console.log('In setTimeout callback');
+      
+      try {
+        const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+        const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+        
+        console.log('Block has dragging class:', block1?.classList.contains('dragging'));
+        console.log('Editor has dragging class:', editorContent?.classList.contains('dragging'));
+        
+        // Clean up
+        element.dragDropHandler.handleDragEnd();
+        document.body.removeChild(element);
+        
+        resolve();
+      } catch (error) {
+        console.error('Error in setTimeout:', error);
+        throw error;
+      }
+    }, 50);
+  });
+});
+
+tap.test('identify the crash point', async () => {
+  console.log('Test started');
+  
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  console.log('Element created');
+  await element.updateComplete;
+  
+  console.log('Setting blocks');
+  element.blocks = [{ id: 'block1', type: 'paragraph', content: 'Test' }];
+  element.renderBlocksProgrammatically();
+  
+  console.log('Waiting for update');
+  await element.updateComplete;
+  
+  console.log('Creating mock event');
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: () => {},
+      setDragImage: () => {}
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Calling handleDragStart');
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  console.log('handleDragStart completed');
+  
+  // Try different wait methods
+  console.log('About to wait...');
+  
+  // Method 1: Direct promise
+  await Promise.resolve();
+  console.log('Promise.resolve completed');
+  
+  // Method 2: setTimeout 0
+  await new Promise(resolve => setTimeout(resolve, 0));
+  console.log('setTimeout 0 completed');
+  
+  // Method 3: requestAnimationFrame
+  await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+  console.log('requestAnimationFrame completed');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+  console.log('Cleanup completed');
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-dropindicator.chromium.ts
+++ b/test/test.wysiwyg-dropindicator.chromium.ts
@@ -0,0 +1,108 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drop indicator creation', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check editorContentRef
+  console.log('editorContentRef exists:', !!element.editorContentRef);
+  console.log('editorContentRef tagName:', element.editorContentRef?.tagName);
+  expect(element.editorContentRef).toBeTruthy();
+  
+  // Check initial state - no drop indicator
+  let dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator before drag:', dropIndicator);
+  expect(dropIndicator).toBeFalsy();
+  
+  // Manually call createDropIndicator
+  try {
+    console.log('Calling createDropIndicator...');
+    element.dragDropHandler['createDropIndicator']();
+    console.log('createDropIndicator succeeded');
+  } catch (error) {
+    console.error('Error creating drop indicator:', error);
+    throw error;
+  }
+  
+  // Check drop indicator was created
+  dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator after creation:', dropIndicator);
+  console.log('Drop indicator parent:', dropIndicator?.parentElement?.className);
+  expect(dropIndicator).toBeTruthy();
+  expect(dropIndicator!.style.display).toEqual('none');
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag initialization with drop indicator', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Mock drag event
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Starting drag...');
+  
+  try {
+    element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+    console.log('Drag start succeeded');
+  } catch (error) {
+    console.error('Error during drag start:', error);
+    throw error;
+  }
+  
+  // Wait for async operations
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check drop indicator exists
+  const dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator after drag start:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check drag state
+  console.log('Drag state:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-eventlisteners.chromium.ts
+++ b/test/test.wysiwyg-eventlisteners.chromium.ts
@@ -0,0 +1,114 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg global event listeners', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+  console.log('Block 1 found:', !!block1);
+  
+  // Set up drag state manually without using handleDragStart
+  element.dragDropHandler['draggedBlockId'] = 'block1';
+  element.dragDropHandler['draggedBlockElement'] = block1;
+  element.dragDropHandler['initialMouseY'] = 100;
+  
+  // Create drop indicator manually
+  element.dragDropHandler['createDropIndicator']();
+  
+  // Test adding global event listeners
+  console.log('Adding event listeners...');
+  const handleGlobalDragOver = element.dragDropHandler['handleGlobalDragOver'];
+  const handleGlobalDragEnd = element.dragDropHandler['handleGlobalDragEnd'];
+  
+  try {
+    document.addEventListener('dragover', handleGlobalDragOver);
+    console.log('dragover listener added');
+    
+    document.addEventListener('dragend', handleGlobalDragEnd);
+    console.log('dragend listener added');
+  } catch (error) {
+    console.error('Error adding event listeners:', error);
+    throw error;
+  }
+  
+  // Test firing a dragover event
+  console.log('Creating dragover event...');
+  const dragOverEvent = new Event('dragover', {
+    bubbles: true,
+    cancelable: true
+  });
+  Object.defineProperty(dragOverEvent, 'clientY', { value: 150 });
+  
+  console.log('Dispatching dragover event...');
+  document.dispatchEvent(dragOverEvent);
+  console.log('dragover event dispatched');
+  
+  // Clean up
+  document.removeEventListener('dragover', handleGlobalDragOver);
+  document.removeEventListener('dragend', handleGlobalDragEnd);
+  
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg setTimeout in drag start', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Set drag state
+  element.dragDropHandler['draggedBlockId'] = 'block1';
+  element.dragDropHandler['draggedBlockElement'] = block1;
+  
+  console.log('Testing setTimeout callback...');
+  
+  // Test the setTimeout callback directly
+  try {
+    if (block1) {
+      console.log('Adding dragging class to block...');
+      block1.classList.add('dragging');
+      console.log('Block classes:', block1.className);
+    }
+    if (editorContent) {
+      console.log('Adding dragging class to editor...');
+      editorContent.classList.add('dragging');
+      console.log('Editor classes:', editorContent.className);
+    }
+  } catch (error) {
+    console.error('Error in setTimeout callback:', error);
+    throw error;
+  }
+  
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-keyboard.chromium.ts
+++ b/test/test.wysiwyg-keyboard.chromium.ts
@@ -0,0 +1,329 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+tap.test('Keyboard: Arrow navigation between blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import multiple blocks
+  editor.importBlocks([
+    { id: 'block-1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block-2', type: 'paragraph', content: 'Second paragraph' },
+    { id: 'block-3', type: 'paragraph', content: 'Third paragraph' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus first block at end
+  const firstBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="block-1"]');
+  const firstBlockComponent = firstBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const firstBlockContainer = firstBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const firstParagraph = firstBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Focus and set cursor at end of first block
+  firstParagraph.focus();
+  const textNode = firstParagraph.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, textNode.textContent?.length || 0);
+    range.setEnd(textNode, textNode.textContent?.length || 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press ArrowRight to move to second block
+  const arrowRightEvent = new KeyboardEvent('keydown', {
+    key: 'ArrowRight',
+    code: 'ArrowRight',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  firstParagraph.dispatchEvent(arrowRightEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if second block is focused
+  const secondBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="block-2"]');
+  const secondBlockComponent = secondBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const secondBlockContainer = secondBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const secondParagraph = secondBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Check if the second paragraph has focus
+  const activeElement = secondBlockComponent.shadowRoot?.activeElement;
+  expect(activeElement).toEqual(secondParagraph);
+  
+  console.log('Arrow navigation test complete');
+});
+
+tap.test('Keyboard: Backspace merges blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'merge-1', type: 'paragraph', content: 'First' },
+    { id: 'merge-2', type: 'paragraph', content: 'Second' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus second block at beginning
+  const secondBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="merge-2"]');
+  const secondBlockComponent = secondBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const secondBlockContainer = secondBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const secondParagraph = secondBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Focus and set cursor at beginning
+  secondParagraph.focus();
+  const textNode = secondParagraph.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press Backspace to merge with previous block
+  const backspaceEvent = new KeyboardEvent('keydown', {
+    key: 'Backspace',
+    code: 'Backspace',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  secondParagraph.dispatchEvent(backspaceEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if blocks were merged
+  expect(editor.blocks.length).toEqual(1);
+  expect(editor.blocks[0].content).toContain('First');
+  expect(editor.blocks[0].content).toContain('Second');
+  
+  console.log('Backspace merge test complete');
+});
+
+tap.test('Keyboard: Delete key on non-editable blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import blocks including a divider
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'Before divider' },
+    { id: 'div-1', type: 'divider', content: '' },
+    { id: 'para-2', type: 'paragraph', content: 'After divider' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus the divider block
+  const dividerBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="div-1"]');
+  const dividerBlockComponent = dividerBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const dividerBlockContainer = dividerBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const dividerElement = dividerBlockContainer?.querySelector('.block.divider') as HTMLElement;
+  
+  // Non-editable blocks need to be focused differently
+  dividerElement?.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press Delete to remove the divider
+  const deleteEvent = new KeyboardEvent('keydown', {
+    key: 'Delete',
+    code: 'Delete',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  dividerElement.dispatchEvent(deleteEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if divider was removed
+  expect(editor.blocks.length).toEqual(2);
+  expect(editor.blocks.find(b => b.type === 'divider')).toBeUndefined();
+  
+  console.log('Delete key on non-editable block test complete');
+});
+
+tap.test('Keyboard: Tab key in code block', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+
+  // Import a code block
+  editor.importBlocks([
+    { id: 'code-1', type: 'code', content: 'function test() {', metadata: { language: 'javascript' } }
+  ]);
+
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Focus code block - code blocks use .code-editor instead of .block.code
+  const codeBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
+  const codeBlockComponent = codeBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const codeBlockContainer = codeBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const codeElement = codeBlockContainer?.querySelector('.code-editor') as HTMLElement;
+
+  expect(codeElement).toBeTruthy();
+
+  // Focus and set cursor at end
+  codeElement.focus();
+  const textNode = codeElement.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, textNode.textContent?.length || 0);
+    range.setEnd(textNode, textNode.textContent?.length || 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Press Tab to insert spaces
+  const tabEvent = new KeyboardEvent('keydown', {
+    key: 'Tab',
+    code: 'Tab',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+
+  codeElement.dispatchEvent(tabEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  // Check if spaces were inserted
+  const updatedContent = codeElement.textContent || '';
+  expect(updatedContent).toContain('  '); // Tab should insert 2 spaces
+
+  console.log('Tab in code block test complete');
+});
+
+tap.test('Keyboard: ArrowUp/Down navigation', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+
+  // Import multiple blocks
+  editor.importBlocks([
+    { id: 'nav-1', type: 'paragraph', content: 'First line' },
+    { id: 'nav-2', type: 'paragraph', content: 'Second line' },
+    { id: 'nav-3', type: 'paragraph', content: 'Third line' }
+  ]);
+
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Verify blocks were created
+  expect(editor.blocks.length).toEqual(3);
+
+  // Focus second block
+  const secondBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="nav-2"]');
+  const secondBlockComponent = secondBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const secondBlockContainer = secondBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const secondParagraph = secondBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+
+  expect(secondParagraph).toBeTruthy();
+  secondParagraph.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Verify keyboard handler exists
+  expect(editor.keyboardHandler).toBeTruthy();
+
+  // Press ArrowUp - event is dispatched (focus change may not occur in synthetic events)
+  const arrowUpEvent = new KeyboardEvent('keydown', {
+    key: 'ArrowUp',
+    code: 'ArrowUp',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+
+  secondParagraph.dispatchEvent(arrowUpEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  // Get first block references
+  const firstBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="nav-1"]');
+  const firstBlockComponent = firstBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const firstBlockContainer = firstBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const firstParagraph = firstBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+
+  expect(firstParagraph).toBeTruthy();
+
+  // Note: Synthetic keyboard events don't reliably trigger native browser focus changes
+  // in automated tests. The handler is invoked but focus may not actually move.
+  // This test verifies the structure exists and events can be dispatched.
+
+  console.log('ArrowUp/Down navigation test complete');
+});
+
+tap.test('Keyboard: Formatting shortcuts', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a paragraph
+  editor.importBlocks([
+    { id: 'format-1', type: 'paragraph', content: 'Test formatting' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus and select text
+  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="format-1"]');
+  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const blockContainer = blockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const paragraph = blockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  paragraph.focus();
+  
+  // Select "formatting"
+  const textNode = paragraph.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, 5); // After "Test "
+    range.setEnd(textNode, 15); // After "formatting"
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press Cmd/Ctrl+B for bold
+  const boldEvent = new KeyboardEvent('keydown', {
+    key: 'b',
+    code: 'KeyB',
+    metaKey: true, // Use metaKey for Mac, ctrlKey for Windows/Linux
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  paragraph.dispatchEvent(boldEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if bold was applied
+  const content = paragraph.innerHTML;
+  expect(content).toContain('<strong>') || expect(content).toContain('<b>');
+  
+  console.log('Formatting shortcuts test complete');
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-phase3.chromium.ts
+++ b/test/test.wysiwyg-phase3.chromium.ts
@@ -0,0 +1,152 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+tap.test('Phase 3: Quote block should render and work correctly', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a quote block
+  editor.importBlocks([
+    { id: 'quote-1', type: 'quote', content: 'This is a famous quote' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if quote block was rendered
+  const quoteBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-1"]');
+  const quoteBlockComponent = quoteBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  expect(quoteBlockComponent).toBeTruthy();
+  
+  const quoteContainer = quoteBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
+  expect(quoteElement).toBeTruthy();
+  expect(quoteElement?.textContent).toEqual('This is a famous quote');
+  
+  // Check if styles are applied (border-left for quote)
+  const computedStyle = window.getComputedStyle(quoteElement);
+  expect(computedStyle.borderLeftStyle).toEqual('solid');
+  expect(computedStyle.fontStyle).toEqual('italic');
+});
+
+tap.test('Phase 3: Code block should render and handle tab correctly', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+
+  // Import a code block
+  editor.importBlocks([
+    { id: 'code-1', type: 'code', content: 'const x = 42;', metadata: { language: 'javascript' } }
+  ]);
+
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Check if code block was rendered - code blocks use .code-editor instead of .block.code
+  const codeBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
+  const codeBlockComponent = codeBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const codeContainer = codeBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const codeElement = codeContainer?.querySelector('.code-editor') as HTMLElement;
+
+  expect(codeElement).toBeTruthy();
+  expect(codeElement?.textContent).toEqual('const x = 42;');
+
+  // Check if language selector is shown
+  const languageSelector = codeContainer?.querySelector('.language-selector') as HTMLSelectElement;
+  expect(languageSelector).toBeTruthy();
+  expect(languageSelector?.value).toEqual('javascript');
+
+  // Check if monospace font is applied - code-editor is a <code> element
+  const computedStyle = window.getComputedStyle(codeElement);
+  // Font family may vary by platform, so just check it contains something
+  expect(computedStyle.fontFamily).toBeTruthy();
+});
+
+tap.test('Phase 3: List block should render correctly', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a list block
+  editor.importBlocks([
+    { id: 'list-1', type: 'list', content: 'First item\nSecond item\nThird item' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if list block was rendered
+  const listBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="list-1"]');
+  const listBlockComponent = listBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const listContainer = listBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const listElement = listContainer?.querySelector('.block.list') as HTMLElement;
+  
+  expect(listElement).toBeTruthy();
+  
+  // Check if list items were created
+  const listItems = listElement?.querySelectorAll('li');
+  expect(listItems?.length).toEqual(3);
+  expect(listItems?.[0].textContent).toEqual('First item');
+  expect(listItems?.[1].textContent).toEqual('Second item');
+  expect(listItems?.[2].textContent).toEqual('Third item');
+  
+  // Check if it's an unordered list by default
+  const ulElement = listElement?.querySelector('ul');
+  expect(ulElement).toBeTruthy();
+});
+
+tap.test('Phase 3: Quote block split should work', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a quote block
+  editor.importBlocks([
+    { id: 'quote-split', type: 'quote', content: 'To be or not to be' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the quote block
+  const quoteBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-split"]');
+  const quoteBlockComponent = quoteBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const quoteContainer = quoteBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
+  
+  // Focus and set cursor after "To be"
+  quoteElement.focus();
+  const textNode = quoteElement.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, 5); // After "To be"
+    range.setEnd(textNode, 5);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    // Press Enter to split
+    const enterEvent = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      code: 'Enter',
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    });
+    
+    quoteElement.dispatchEvent(enterEvent);
+    await new Promise(resolve => setTimeout(resolve, 200));
+    
+    // Check if split happened correctly
+    expect(editor.blocks.length).toEqual(2);
+    expect(editor.blocks[0].content).toEqual('To be');
+    expect(editor.blocks[1].content).toEqual(' or not to be');
+    expect(editor.blocks[1].type).toEqual('paragraph'); // New block should be paragraph
+  }
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-registry.both.ts
+++ b/test/test.wysiwyg-registry.both.ts
@@ -0,0 +1,112 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
+import { DividerBlockHandler } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/content/divider.block.js';
+import { ParagraphBlockHandler } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.js';
+import { HeadingBlockHandler } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.js';
+
+// Import block registration to ensure handlers are registered
+import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
+
+tap.test('BlockRegistry should register and retrieve handlers', async () => {
+  // Test divider handler
+  const dividerHandler = BlockRegistry.getHandler('divider');
+  expect(dividerHandler).toBeDefined();
+  expect(dividerHandler).toBeInstanceOf(DividerBlockHandler);
+  expect(dividerHandler?.type).toEqual('divider');
+
+  // Test paragraph handler
+  const paragraphHandler = BlockRegistry.getHandler('paragraph');
+  expect(paragraphHandler).toBeDefined();
+  expect(paragraphHandler).toBeInstanceOf(ParagraphBlockHandler);
+  expect(paragraphHandler?.type).toEqual('paragraph');
+
+  // Test heading handlers
+  const heading1Handler = BlockRegistry.getHandler('heading-1');
+  expect(heading1Handler).toBeDefined();
+  expect(heading1Handler).toBeInstanceOf(HeadingBlockHandler);
+  expect(heading1Handler?.type).toEqual('heading-1');
+
+  const heading2Handler = BlockRegistry.getHandler('heading-2');
+  expect(heading2Handler).toBeDefined();
+  expect(heading2Handler).toBeInstanceOf(HeadingBlockHandler);
+  expect(heading2Handler?.type).toEqual('heading-2');
+
+  const heading3Handler = BlockRegistry.getHandler('heading-3');
+  expect(heading3Handler).toBeDefined();
+  expect(heading3Handler).toBeInstanceOf(HeadingBlockHandler);
+  expect(heading3Handler?.type).toEqual('heading-3');
+});
+
+tap.test('Block handlers should render content correctly', async () => {
+  const testBlock = {
+    id: 'test-1',
+    type: 'paragraph' as const,
+    content: 'Test paragraph content'
+  };
+
+  const handler = BlockRegistry.getHandler('paragraph');
+  expect(handler).toBeDefined();
+
+  if (handler) {
+    const rendered = handler.render(testBlock, false);
+    // The render() method returns the HTML template structure
+    // Content is set later in setup()
+    expect(rendered).toContain('contenteditable="true"');
+    expect(rendered).toContain('data-block-type="paragraph"');
+    expect(rendered).toContain('data-block-id="test-1"');
+    expect(rendered).toContain('class="block paragraph"');
+  }
+});
+
+tap.test('Divider handler should render correctly', async () => {
+  const dividerBlock = {
+    id: 'test-divider',
+    type: 'divider' as const,
+    content: ' '
+  };
+
+  const handler = BlockRegistry.getHandler('divider');
+  expect(handler).toBeDefined();
+
+  if (handler) {
+    const rendered = handler.render(dividerBlock, false);
+    expect(rendered).toContain('class="block divider"');
+    expect(rendered).toContain('tabindex="0"');
+    expect(rendered).toContain('<hr>');
+    expect(rendered).toContain('data-block-id="test-divider"');
+  }
+});
+
+tap.test('Heading handlers should render with correct levels', async () => {
+  const headingBlock = {
+    id: 'test-h1',
+    type: 'heading-1' as const,
+    content: 'Test Heading'
+  };
+
+  const handler = BlockRegistry.getHandler('heading-1');
+  expect(handler).toBeDefined();
+
+  if (handler) {
+    const rendered = handler.render(headingBlock, false);
+    // The render() method returns the HTML template structure
+    // Content is set later in setup()
+    expect(rendered).toContain('class="block heading-1"');
+    expect(rendered).toContain('contenteditable="true"');
+    expect(rendered).toContain('data-block-id="test-h1"');
+    expect(rendered).toContain('data-block-type="heading-1"');
+  }
+});
+
+tap.test('getAllTypes should return all registered types', async () => {
+  const allTypes = BlockRegistry.getAllTypes();
+  expect(allTypes).toContain('divider');
+  expect(allTypes).toContain('paragraph');
+  expect(allTypes).toContain('heading-1');
+  expect(allTypes).toContain('heading-2');
+  expect(allTypes).toContain('heading-3');
+  expect(allTypes.length).toBeGreaterThanOrEqual(5);
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-selection-highlight.chromium.ts
+++ b/test/test.wysiwyg-selection-highlight.chromium.ts
@@ -0,0 +1,158 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+tap.test('Selection highlighting should work consistently for all block types', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import various block types
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'This is a paragraph' },
+    { id: 'heading-1', type: 'heading-1', content: 'This is a heading' },
+    { id: 'quote-1', type: 'quote', content: 'This is a quote' },
+    { id: 'code-1', type: 'code', content: 'const x = 42;' },
+    { id: 'list-1', type: 'list', content: 'Item 1\nItem 2' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Test paragraph highlighting
+  console.log('Testing paragraph highlighting...');
+  const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
+  const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const paraContainer = paraComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const paraElement = paraContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Focus paragraph to select it
+  paraElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if paragraph has selected class
+  const paraHasSelected = paraElement.classList.contains('selected');
+  console.log('Paragraph has selected class:', paraHasSelected);
+  
+  // Check computed styles
+  const paraStyle = window.getComputedStyle(paraElement);
+  console.log('Paragraph background:', paraStyle.background);
+  console.log('Paragraph box-shadow:', paraStyle.boxShadow);
+  
+  // Test heading highlighting
+  console.log('\nTesting heading highlighting...');
+  const headingWrapper = editor.shadowRoot?.querySelector('[data-block-id="heading-1"]');
+  const headingComponent = headingWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const headingContainer = headingComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const headingElement = headingContainer?.querySelector('.block.heading-1') as HTMLElement;
+  
+  // Focus heading to select it
+  headingElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if heading has selected class
+  const headingHasSelected = headingElement.classList.contains('selected');
+  console.log('Heading has selected class:', headingHasSelected);
+  
+  // Check computed styles
+  const headingStyle = window.getComputedStyle(headingElement);
+  console.log('Heading background:', headingStyle.background);
+  console.log('Heading box-shadow:', headingStyle.boxShadow);
+  
+  // Test quote highlighting
+  console.log('\nTesting quote highlighting...');
+  const quoteWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-1"]');
+  const quoteComponent = quoteWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const quoteContainer = quoteComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
+  
+  // Focus quote to select it
+  quoteElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if quote has selected class
+  const quoteHasSelected = quoteElement.classList.contains('selected');
+  console.log('Quote has selected class:', quoteHasSelected);
+  
+  // Test code highlighting - code blocks use .code-editor instead of .block.code
+  console.log('\nTesting code highlighting...');
+  const codeWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
+  const codeComponent = codeWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const codeContainer = codeComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const codeElement = codeContainer?.querySelector('.code-editor') as HTMLElement;
+  const codeBlockContainer = codeContainer?.querySelector('.code-block-container') as HTMLElement;
+
+  // Focus code to select it
+  codeElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // For code blocks, the selection is on the container, not the editor
+  const codeHasSelected = codeBlockContainer?.classList.contains('selected');
+  console.log('Code container has selected class:', codeHasSelected);
+
+  // Focus back on paragraph and check if others are deselected
+  console.log('\nFocusing back on paragraph...');
+  paraElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Check that only paragraph is selected
+  expect(paraElement.classList.contains('selected')).toBeTrue();
+  expect(headingElement.classList.contains('selected')).toBeFalse();
+  expect(quoteElement.classList.contains('selected')).toBeFalse();
+  // Code blocks use different selection structure
+  expect(codeBlockContainer?.classList.contains('selected') || false).toBeFalse();
+  
+  console.log('Selection highlighting test complete');
+});
+
+tap.test('Selected class should toggle correctly when clicking between blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'block-1', type: 'paragraph', content: 'First block' },
+    { id: 'block-2', type: 'paragraph', content: 'Second block' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get both blocks
+  const block1Wrapper = editor.shadowRoot?.querySelector('[data-block-id="block-1"]');
+  const block1Component = block1Wrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const block1Container = block1Component?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const block1Element = block1Container?.querySelector('.block.paragraph') as HTMLElement;
+  
+  const block2Wrapper = editor.shadowRoot?.querySelector('[data-block-id="block-2"]');
+  const block2Component = block2Wrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const block2Container = block2Component?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const block2Element = block2Container?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Initially neither should be selected
+  expect(block1Element.classList.contains('selected')).toBeFalse();
+  expect(block2Element.classList.contains('selected')).toBeFalse();
+  
+  // Click on first block
+  block1Element.click();
+  block1Element.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // First block should be selected
+  expect(block1Element.classList.contains('selected')).toBeTrue();
+  expect(block2Element.classList.contains('selected')).toBeFalse();
+  
+  // Click on second block
+  block2Element.click();
+  block2Element.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Second block should be selected, first should not
+  expect(block1Element.classList.contains('selected')).toBeFalse();
+  expect(block2Element.classList.contains('selected')).toBeTrue();
+  
+  console.log('Toggle test complete');
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-selection-simple.chromium.ts
+++ b/test/test.wysiwyg-selection-simple.chromium.ts
@@ -0,0 +1,62 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+tap.test('Selection highlighting basic test', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'head-1', type: 'heading-1', content: 'First heading' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 500));
+  
+  // Get paragraph element
+  const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
+  const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const paraBlock = paraComponent?.shadowRoot?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Get heading element
+  const headWrapper = editor.shadowRoot?.querySelector('[data-block-id="head-1"]');
+  const headComponent = headWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const headBlock = headComponent?.shadowRoot?.querySelector('.block.heading-1') as HTMLElement;
+  
+  console.log('Found elements:', {
+    paraBlock: !!paraBlock,
+    headBlock: !!headBlock
+  });
+  
+  // Focus paragraph
+  paraBlock.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check classes
+  console.log('Paragraph classes:', paraBlock.className);
+  console.log('Heading classes:', headBlock.className);
+  
+  // Check isSelected property
+  console.log('Paragraph component isSelected:', paraComponent.isSelected);
+  console.log('Heading component isSelected:', headComponent.isSelected);
+  
+  // Focus heading
+  headBlock.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check classes again
+  console.log('\nAfter focusing heading:');
+  console.log('Paragraph classes:', paraBlock.className);
+  console.log('Heading classes:', headBlock.className);
+  console.log('Paragraph component isSelected:', paraComponent.isSelected);
+  console.log('Heading component isSelected:', headComponent.isSelected);
+  
+  // Check that heading is selected
+  expect(headBlock.classList.contains('selected')).toBeTrue();
+  expect(paraBlock.classList.contains('selected')).toBeFalse();
+});
+
+export default tap.start();
--- a/test/test.wysiwyg-split.chromium.ts
+++ b/test/test.wysiwyg-split.chromium.ts
@@ -0,0 +1,98 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+
+tap.test('should split paragraph content on Enter key', async () => {
+  // Create the wysiwyg editor
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a test paragraph
+  editor.importBlocks([{
+    id: 'test-para-1',
+    type: 'paragraph',
+    content: 'Hello World'
+  }]);
+  
+  await editor.updateComplete;
+  
+  // Wait for blocks to render
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the block wrapper and component
+  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-para-1"]');
+  expect(blockWrapper).toBeDefined();
+  
+  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  expect(blockComponent).toBeDefined();
+  expect(blockComponent.block.type).toEqual('paragraph');
+  
+  // Wait for block to render
+  await blockComponent.updateComplete;
+  
+  // Test getSplitContent
+  console.log('Testing getSplitContent...');
+  const splitResult = blockComponent.getSplitContent();
+  console.log('Split result:', splitResult);
+  
+  // Since we haven't set cursor position, it might return null or split at start
+  // This is just to test if the method is callable
+  expect(typeof blockComponent.getSplitContent).toEqual('function');
+});
+
+tap.test('should handle Enter key press in paragraph', async () => {
+  // Create the wysiwyg editor
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a test paragraph
+  editor.importBlocks([{
+    id: 'test-enter-1',
+    type: 'paragraph',
+    content: 'First part|Second part' // | marks where we'll simulate cursor
+  }]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check initial state
+  expect(editor.blocks.length).toEqual(1);
+  expect(editor.blocks[0].content).toEqual('First part|Second part');
+  
+  // Get the block element
+  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-enter-1"]');
+  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const blockElement = blockComponent.shadowRoot?.querySelector('.block.paragraph') as HTMLDivElement;
+  
+  expect(blockElement).toBeDefined();
+  
+  // Set content without the | marker
+  blockElement.textContent = 'First partSecond part';
+  
+  // Focus the block
+  blockElement.focus();
+  
+  // Create and dispatch Enter key event
+  const enterEvent = new KeyboardEvent('keydown', {
+    key: 'Enter',
+    code: 'Enter',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  // Dispatch the event
+  blockElement.dispatchEvent(enterEvent);
+  
+  // Wait for processing
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if block was split (this might not work perfectly in test environment)
+  console.log('Blocks after Enter:', editor.blocks.length);
+  console.log('Block contents:', editor.blocks.map(b => b.content));
+});
+
+export default tap.start();