@jackuait/blok 0.6.0-beta.9 → 0.6.0

package/src/styles/main.css

@@ -1,61 +1,223 @@
 /* Tailwind CSS - must be first */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
 
-/**
- * Component classes for the Styles API.
- * These single-class names can be safely used with classList.add() by external plugins.
- * Each class bundles multiple Tailwind utilities using @apply.
- */
-@layer components {
-  /* Base Blok styles - applied to block tool wrappers */
-  .blok-block {
-    @apply py-[3px] px-[2px] [&::-webkit-input-placeholder]:!leading-normal;
+/*
+  Exclude non-source directories from Tailwind's automatic content detection.
+  Without this, Tailwind v4 scans all non-gitignored files (including docs/,
+  test/, .claude/) and picks up false class candidates from code examples,
+  test fixtures, and markdown — generating dead CSS in the production bundle.
+*/
+@source not "../../docs";
+@source not "../../test";
+@source not "../../.claude";
+@source not "../../scripts";
+@source not "../../.storybook";
+
+@custom-variant mobile (@media (max-width: 650px));
+@custom-variant not-mobile (@media (min-width: 651px));
+@custom-variant can-hover (@media (hover: hover));
+
+@custom-variant dark (&:where(.dark-mode, .dark-mode *));
+
+@theme {
+  /* Z-index */
+  --z-index-overlay: 999;
+
+  /* Colors */
+  --color-selection: #e1f2ff;
+  --color-selection-inline: #d4ecff;
+  --color-selection-highlight: rgba(46, 170, 220, 0.2);
+  --color-bg-light: #eff2f5;
+  --color-gray-text: #707684;
+  --color-dark: #1d202b;
+  --color-active-icon: #388ae5;
+  --color-link: #388ae5;
+  --color-line-gray: #eff0f1;
+  --color-tooltip-bg: #1d202b;
+  --color-tooltip-font: #cdd1e0;
+  --color-icon-active-bg: rgba(56, 138, 229, 0.1);
+  --color-icon-active-text: #388ae5;
+  --color-text-primary: black;
+  --color-text-secondary: #707684;
+  --color-popover-border: #eff0f1;
+  --color-popover-shadow: rgba(13, 20, 33, 0.1);
+  --color-popover-bg: #ffffff;
+  --color-popover-border-icon: rgb(201 201 204 / 48%);
+  --color-popover-border-icon-disabled: #eff0f1;
+  --color-item-focus-bg: rgba(34, 186, 255, 0.08);
+  --color-item-focus-shadow: rgba(7, 161, 227, 0.08);
+  --color-item-hover-bg: #f8f8f8;
+  --color-item-confirm-bg: #e24a4a;
+  --color-item-confirm-hover-bg: #ce4343;
+  --color-item-destructive-text: #e24a4a;
+  --color-item-destructive-hover-bg: rgba(226, 74, 74, 0.08);
+  --color-notify-success-bg: #fafffe;
+  --color-notify-success-bar: #41ffb1;
+  --color-notify-error-bg: #fffbfb;
+  --color-notify-error-bar: #fb5d5d;
+  --color-notify-btn-cancel-bg: #f2f5f7;
+  --color-notify-btn-cancel-text: #656b7c;
+  --color-notify-btn-confirm-bg: #34c992;
+
+  /* Spacing (also powers w-*, h-*, min-w-*, min-h-*, size-*) */
+  --spacing-content-width: 650px;
+  --spacing-narrow-mode-right-padding: 50px;
+  --spacing-toolbox-btn: 26px;
+  --spacing-toolbox-btn-mobile: 36px;
+  --spacing-icon: 20px;
+  --spacing-icon-mobile: 28px;
+  --spacing-block-padding-vertical: 0.4em;
+
+  /* Max-width */
+  --max-width-content: 650px;
+
+  /* Font family */
+  --font-mono: 'PT Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
+
+  /* Box shadows */
+  --shadow-overlay-pane: 0 3px 15px -3px rgba(13, 20, 33, 0.13);
+  --shadow-tool-icon: 0 0 0 1px #eff0f1;
+  --shadow-tooltip: 0 8px 12px 0 rgba(29, 32, 43, 0.17), 0 4px 5px -3px rgba(5, 6, 12, 0.49);
+  --shadow-notify: 0 11px 17px 0 rgba(23, 32, 61, 0.13);
+  --shadow-button-focused: inset 0 0 0 1px rgba(7, 161, 227, 0.08);
+  --shadow-input: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
+  --shadow-button-base: 0 2px 2px 0 rgba(18, 30, 57, 0.04);
+  --shadow-button-base-hover: 0 1px 3px 0 rgba(18, 30, 57, 0.08);
+  --shadow-demo-btn: 0 22px 18px -4px rgba(137, 207, 255, 0.77);
+  --shadow-demo-btn-hover: 0 20px 15px -4px rgba(137, 207, 255, 0.77);
+  --shadow-demo-btn-primary: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
+  --shadow-demo-dark-btn: 0 24px 18px -14px rgba(4, 154, 255, 0.24);
+
+  /* Animations */
+  --animate-fade-in: fade-in 300ms ease forwards;
+  --animate-bounce-in: bounceIn 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+  --animate-selection-bounce: selectionBounce 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+  --animate-button-clicked: buttonClicked 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+  --animate-panel-showing: panelShowing 100ms ease;
+  --animate-panel-showing-mobile: panelShowingMobile 250ms ease;
+  --animate-wobble: wobble 400ms;
+  --animate-rotation: rotation 1.2s infinite linear;
+  --animate-notify-bounce-in: notifyBounceIn 600ms 1;
+
+  /* Keyframes */
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 
-  /* Inline Tools styles */
-  .blok-inline-tool-button {
-    @apply flex justify-center items-center border-0 rounded h-full p-0 w-7 bg-transparent cursor-pointer leading-normal text-black;
+  @keyframes bounceIn {
+    0% { transform: scale3d(0.9, 0.9, 0.9); }
+    20% { transform: scale3d(1.03, 1.03, 1.03); }
+    60%, 100% { transform: scale3d(1, 1, 1); }
   }
 
-  .blok-inline-tool-button--active {
-    @apply bg-icon-active-bg text-icon-active-text;
+  @keyframes selectionBounce {
+    0%, 100% { transform: scale3d(1, 1, 1); }
+    50% { transform: scale3d(1.01, 1.01, 1.01); }
+    70% { transform: scale3d(1, 1, 1); }
   }
 
-  /* Input element styles */
-  .blok-input {
-    @apply w-full rounded-[3px] border border-line-gray px-3 py-2.5 outline-none shadow-input [&[data-blok-placeholder]]:before:!static [&[data-blok-placeholder]]:before:inline-block [&[data-blok-placeholder]]:before:w-0 [&[data-blok-placeholder]]:before:whitespace-nowrap [&[data-blok-placeholder]]:before:pointer-events-none;
+  @keyframes buttonClicked {
+    0% { transform: scale3d(0.95, 0.95, 0.95); }
+    60% { transform: scale3d(1.02, 1.02, 1.02); }
+    80%, 100% { transform: scale3d(1, 1, 1); }
   }
 
-  /* Loader styles with spinning animation */
-  .blok-loader {
-    @apply relative border border-line-gray before:absolute before:left-1/2 before:top-1/2 before:w-[18px] before:h-[18px] before:rounded-full before:content-[''] before:-ml-[11px] before:-mt-[11px] before:border-2 before:border-line-gray before:border-l-active-icon before:animate-rotation;
+  @keyframes panelShowing {
+    from { opacity: 0; transform: translateY(-8px) scale(0.9); }
+    70% { opacity: 1; transform: translateY(2px); }
+    to { transform: translateY(0); }
   }
 
-  /* Button styles */
-  .blok-button {
-    @apply p-[13px] rounded-[3px] border border-line-gray text-[14.9px] bg-white text-center cursor-pointer text-gray-text shadow-button-base hover:bg-[#fbfcfe] hover:shadow-button-base-hover [&_svg]:h-5 [&_svg]:mr-[0.2em] [&_svg]:-mt-0.5;
+  @keyframes panelShowingMobile {
+    from { opacity: 0; transform: translateY(14px) scale(0.98); }
+    70% { opacity: 1; transform: translateY(-4px); }
+    to { transform: translateY(0); }
   }
 
-  /* Settings button styles */
-  .blok-settings-button {
-    @apply inline-flex items-center justify-center rounded-[3px] cursor-pointer border-0 outline-none bg-transparent align-bottom text-inherit m-0 min-w-toolbox-btn min-h-toolbox-btn [&_svg]:w-auto [&_svg]:h-auto mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile mobile:rounded-lg mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile can-hover:hover:bg-bg-light;
+  @keyframes wobble {
+    from { transform: translate3d(0, 0, 0); }
+    15% { transform: translate3d(-9%, 0, 0); }
+    30% { transform: translate3d(9%, 0, 0); }
+    45% { transform: translate3d(-4%, 0, 0); }
+    60% { transform: translate3d(4%, 0, 0); }
+    75% { transform: translate3d(-1%, 0, 0); }
+    to { transform: translate3d(0, 0, 0); }
   }
 
-  .blok-settings-button--active {
-    @apply text-active-icon;
+  @keyframes rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
 
-  .blok-settings-button--focused {
-    @apply shadow-button-focused bg-item-focus-bg;
+  @keyframes notifyBounceIn {
+    0% { opacity: 0; transform: scale(0.3); }
+    50% { opacity: 1; transform: scale(1.05); }
+    70% { transform: scale(0.9); }
+    100% { transform: scale(1); }
   }
+}
 
-  .blok-settings-button--focused-animated {
-    @apply animate-button-clicked;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 
+/**
+ * Component classes for the Styles API.
+ * These single-class names can be safely used with classList.add() by external plugins.
+ * Each class bundles multiple Tailwind utilities using @apply.
+ */
+@utility blok-block {
+  /* Base Blok styles - applied to block tool wrappers */
+  @apply py-[3px] px-[2px] [&::-webkit-input-placeholder]:leading-normal!;
+}
+@utility blok-inline-tool-button {
+  /* Inline Tools styles */
+  @apply flex justify-center items-center border-0 rounded-sm h-full p-0 w-7 bg-transparent cursor-pointer leading-normal text-black;
+}
+@utility blok-inline-tool-button--active {
+  @apply bg-icon-active-bg text-icon-active-text;
+}
+@utility blok-input {
+  /* Input element styles */
+  @apply w-full rounded-[3px] border border-line-gray px-3 py-2.5 outline-hidden shadow-input data-blok-placeholder:before:static! data-blok-placeholder:before:inline-block data-blok-placeholder:before:w-0 data-blok-placeholder:before:whitespace-nowrap data-blok-placeholder:before:pointer-events-none;
+}
+@utility blok-loader {
+  /* Loader styles with spinning animation */
+  @apply relative border border-line-gray before:absolute before:left-1/2 before:top-1/2 before:w-[18px] before:h-[18px] before:rounded-full before:content-[''] before:-ml-[11px] before:-mt-[11px] before:border-2 before:border-line-gray before:border-l-active-icon before:animate-rotation;
+}
+@utility blok-button {
+  /* Button styles */
+  @apply p-[13px] rounded-[3px] border border-line-gray text-[14.9px] bg-white text-center cursor-pointer text-gray-text shadow-button-base hover:bg-[#fbfcfe] hover:shadow-button-base-hover [&_svg]:h-5 [&_svg]:mr-[0.2em] [&_svg]:-mt-0.5;
+}
+@utility blok-settings-button {
+  /* Settings button styles */
+  @apply inline-flex items-center justify-center rounded-[3px] cursor-pointer border-0 outline-hidden bg-transparent align-bottom text-inherit m-0 min-w-toolbox-btn min-h-toolbox-btn [&_svg]:w-auto [&_svg]:h-auto mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile mobile:rounded-lg mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile can-hover:hover:bg-bg-light;
+}
+@utility blok-settings-button--active {
+  @apply text-active-icon;
+}
+@utility blok-settings-button--focused {
+  @apply shadow-button-focused bg-item-focus-bg;
+}
+@utility blok-settings-button--focused-animated {
+  @apply animate-button-clicked;
+}
+
 /**
  * Navigation mode styles
  * Applied when user enters block navigation mode via Escape key
@@ -84,7 +246,7 @@
 }
 
 [data-drop-indicator]::before {
-  @apply content-[''] absolute w-full max-w-content h-1.5 rounded-sm bg-[#d4e3fc] pointer-events-none z-10;
+  @apply content-[''] absolute w-full max-w-content h-1.5 rounded-xs bg-[#d4e3fc] pointer-events-none z-10;
   left: 50%;
   margin-left: calc(var(--drop-indicator-depth, 0) * 12px);
   max-width: calc(650px - var(--drop-indicator-depth, 0) * 24px);
@@ -135,7 +297,7 @@
 }
 
 [data-blok-table-cell-blocks] .blok-block {
-  @apply p-0 m-0;
+  @apply p-0 m-0 min-h-[1.6em];
 }
 
 /**
@@ -146,3 +308,11 @@
 [data-blok-table-heading-col] {
   @apply font-semibold bg-gray-50;
 }
+
+/**
+ * Table scroll haze overlays
+ * Gradient indicators that show horizontal scroll availability
+ */
+[data-blok-table-haze][data-blok-table-haze-visible] {
+  @apply opacity-100;
+}

package/src/tools/header/index.ts

@@ -146,7 +146,7 @@ export class Header implements BlockTool {
   /**
    * Base styles for all header levels
    */
-  private static readonly BASE_STYLES = 'py-[3px] px-[2px] m-0 !leading-[1.3] outline-none [&_p]:!p-0 [&_p]:!m-0 [&_div]:!p-0 [&_div]:!m-0';
+  private static readonly BASE_STYLES = 'py-[3px] px-[2px] m-0 leading-[1.3]! outline-hidden [&_p]:p-0! [&_p]:m-0! [&_div]:p-0! [&_div]:m-0!';
 
   /**
    * Styles

package/src/tools/index.ts

@@ -4,7 +4,7 @@
  *
  * @example
  * // Import specific tools
- * import { Paragraph, Header, List, Bold, Italic, Link } from '@jackuait/blok/tools';
+ * import { Paragraph, Header, List, Bold, Italic, Link, Marker } from '@jackuait/blok/tools';
  *
  * // Use in Blok configuration (flat config style)
  * new Blok({
@@ -30,6 +30,7 @@ export { BoldInlineTool as Bold } from '../components/inline-tools/inline-tool-b
 export { ItalicInlineTool as Italic } from '../components/inline-tools/inline-tool-italic';
 export { LinkInlineTool as Link } from '../components/inline-tools/inline-tool-link';
 export { ConvertInlineTool as Convert } from '../components/inline-tools/inline-tool-convert';
+export { MarkerInlineTool as Marker } from '../components/inline-tools/inline-tool-marker';
 
 // Default tools configuration for convenience
 // Note: inlineToolbar defaults to true, so it doesn't need to be specified
@@ -44,4 +45,5 @@ export const defaultInlineTools = {
   bold: {},
   italic: {},
   link: {},
+  marker: {},
 } as const;

package/src/tools/list/caret-manager.ts

@@ -7,8 +7,12 @@
 import type { API } from '../../../types';
 
 /**
- * Sets caret to the content element of a block after ensuring DOM is ready.
- * Uses requestAnimationFrame to wait for the browser to process DOM updates.
+ * Sets caret to the content element of a block.
+ * Operates synchronously so subsequent keystrokes land in the correct block
+ * (deferring via requestAnimationFrame causes a race where characters typed
+ * between the block split and the next animation frame go to the wrong element).
+ * Falls back to requestAnimationFrame only when the content element is not yet
+ * available (e.g. async rendering).
  *
  * @param api - The API instance
  * @param block - BlockAPI to set caret to
@@ -19,8 +23,7 @@ export const setCaretToBlockContent = (
   block: ReturnType<API['blocks']['insert']>,
   position: 'start' | 'end' = 'end'
 ): void => {
-  // Use requestAnimationFrame to ensure DOM has been updated
-  requestAnimationFrame(() => {
+  const applyFocus = (deferred: boolean): void => {
     const holder = block.holder;
     if (!holder) return;
 
@@ -29,8 +32,10 @@ export const setCaretToBlockContent = (
     if (!(contentEl instanceof HTMLElement)) {
       // Fallback to setToBlock if no content element found
       api.caret.setToBlock(block, position);
-      // Update the caret "after" position for undo/redo since we're in requestAnimationFrame
-      api.caret.updateLastCaretAfterPosition();
+
+      if (deferred) {
+        api.caret.updateLastCaretAfterPosition();
+      }
 
       return;
     }
@@ -55,8 +60,21 @@ export const setCaretToBlockContent = (
     selection.removeAllRanges();
     selection.addRange(range);
 
-    // Update the caret "after" position for undo/redo since we moved the caret
-    // asynchronously via requestAnimationFrame after the Yjs transaction committed
-    api.caret.updateLastCaretAfterPosition();
-  });
+    if (deferred) {
+      // Update the caret "after" position for undo/redo since we moved the caret
+      // asynchronously via requestAnimationFrame after the Yjs transaction committed
+      api.caret.updateLastCaretAfterPosition();
+    }
+  };
+
+  // Try synchronous focus first — the block is already in the DOM after insert()
+  const holder = block.holder;
+  const contentEl = holder?.querySelector('[contenteditable="true"]');
+
+  if (contentEl instanceof HTMLElement) {
+    applyFocus(false);
+  } else {
+    // Content element not available yet — fall back to next frame
+    requestAnimationFrame(() => applyFocus(true));
+  }
 }

package/src/tools/list/constants.ts

@@ -12,12 +12,12 @@ export const INDENT_PER_LEVEL = 24;
  *
  * Matches paragraph spacing: py-[3px] from blok-block + mt-[2px] mb-px
  */
-export const BASE_STYLES = 'outline-none py-[3px] mt-[2px] mb-px';
+export const BASE_STYLES = 'outline-hidden py-[3px] mt-[2px] mb-px';
 
 /**
  * Styles for standard list items (unordered, ordered)
  */
-export const ITEM_STYLES = 'outline-none pl-0.5 leading-[1.6em]';
+export const ITEM_STYLES = 'outline-hidden pl-0.5 leading-[1.6em]';
 
 /**
  * Styles for checklist items

package/src/tools/list/dom-builder.ts

@@ -176,7 +176,7 @@ export const buildStandardContent = (context: DOMBuilderContext): HTMLElement =>
 
   // Create content container
   const contentContainer = document.createElement('div');
-  contentContainer.className = twMerge('flex-1 min-w-0 outline-none', ...PLACEHOLDER_CLASSES);
+  contentContainer.className = twMerge('flex-1 min-w-0 outline-hidden', ...PLACEHOLDER_CLASSES);
   contentContainer.setAttribute('data-blok-testid', LIST_TEST_IDS.contentContainer);
   contentContainer.contentEditable = context.readOnly ? 'false' : 'true';
   contentContainer.innerHTML = data.text;
@@ -224,7 +224,7 @@ export const buildChecklistContent = (context: DOMBuilderContext): HTMLElement =
 
   const content = document.createElement('div');
   content.className = twMerge(
-    'flex-1 outline-none leading-[1.6em]',
+    'flex-1 outline-hidden leading-[1.6em]',
     data.checked ? 'line-through opacity-60' : '',
     ...PLACEHOLDER_CLASSES
   );
@@ -251,7 +251,7 @@ export const buildChecklistContent = (context: DOMBuilderContext): HTMLElement =
  */
 export const createMarker = (style: ListItemStyle, depth: number): HTMLElement => {
   const marker = document.createElement('span');
-  marker.className = 'flex-shrink-0 select-none';
+  marker.className = 'shrink-0 select-none';
   marker.setAttribute('aria-hidden', 'true');
   marker.contentEditable = 'false';
 

package/src/tools/list/static-configs.ts

@@ -21,7 +21,6 @@ export const getListSanitizeConfig = (): ToolSanitizerConfig => ({
     },
     b: true,
     i: true,
-    mark: true,
   },
 });
 

package/src/tools/paragraph/index.ts

@@ -19,7 +19,7 @@ import type {
 import { DATA_ATTR } from '../../components/constants';
 import { IconText } from '../../components/icons';
 import { stripFakeBackgroundElements } from '../../components/utils';
-import { PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
+import { PLACEHOLDER_EMPTY_EDITOR_CLASSES, PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { twMerge } from '../../components/utils/tw';
 
 /**
@@ -200,7 +200,7 @@ export class Paragraph implements BlockTool {
    */
   private static readonly WRAPPER_CLASSES = [
     'leading-[1.6em]',
-    'outline-none',
+    'outline-hidden',
     'mt-[2px]',
     'mb-px',
     '[&>p:first-of-type]:mt-0',
@@ -239,7 +239,8 @@ export class Paragraph implements BlockTool {
     div.className = twMerge(
       this.api.styles.block,
       Paragraph.WRAPPER_CLASSES,
-      PLACEHOLDER_FOCUS_ONLY_CLASSES
+      PLACEHOLDER_FOCUS_ONLY_CLASSES,
+      PLACEHOLDER_EMPTY_EDITOR_CLASSES
     );
     div.setAttribute(DATA_ATTR.tool, 'paragraph');
     div.contentEditable = 'false';
@@ -255,14 +256,14 @@ export class Paragraph implements BlockTool {
 
     if (this._data.text) {
       div.innerHTML = this._data.text;
+    } else if (this.readOnly) {
+      div.innerHTML = '<br>';
     }
 
     if (!this.readOnly) {
       div.contentEditable = 'true';
       div.addEventListener('keyup', this.onKeyUp);
       setupPlaceholder(div, this.api.i18n.t(this._placeholder), 'data-blok-placeholder-active');
-    } else {
-      div.setAttribute('data-blok-placeholder-active', this.api.i18n.t(this._placeholder));
     }
 
     return div;
@@ -377,6 +378,9 @@ export class Paragraph implements BlockTool {
           src: true,
           style: true,
         },
+        p: true,
+        ul: true,
+        li: true,
       },
     };
   }

package/src/tools/table/core/table-commands.ts

@@ -0,0 +1,99 @@
+/**
+ * Typed table commands — the sole input vocabulary for table mutations.
+ * Every mutation must be expressible as one of these commands.
+ */
+import type { TableData } from '../types';
+
+export interface InsertRowCommand {
+  readonly type: 'insert-row';
+  /** Row index to insert at */
+  readonly index: number;
+}
+
+export interface DeleteRowCommand {
+  readonly type: 'delete-row';
+  readonly index: number;
+}
+
+export interface MoveRowCommand {
+  readonly type: 'move-row';
+  readonly fromIndex: number;
+  readonly toIndex: number;
+}
+
+export interface InsertColumnCommand {
+  readonly type: 'insert-column';
+  readonly index: number;
+  readonly width?: number;
+}
+
+export interface DeleteColumnCommand {
+  readonly type: 'delete-column';
+  readonly index: number;
+}
+
+export interface MoveColumnCommand {
+  readonly type: 'move-column';
+  readonly fromIndex: number;
+  readonly toIndex: number;
+}
+
+export interface ToggleHeadingCommand {
+  readonly type: 'toggle-heading';
+}
+
+export interface ToggleHeadingColumnCommand {
+  readonly type: 'toggle-heading-column';
+}
+
+export interface SetStretchedCommand {
+  readonly type: 'set-stretched';
+  readonly value: boolean;
+}
+
+export interface AddBlockToCellCommand {
+  readonly type: 'add-block-to-cell';
+  readonly row: number;
+  readonly col: number;
+  readonly blockId: string;
+}
+
+export interface RemoveBlockFromCellCommand {
+  readonly type: 'remove-block-from-cell';
+  readonly row: number;
+  readonly col: number;
+  readonly blockId: string;
+}
+
+export interface SetCellBlocksCommand {
+  readonly type: 'set-cell-blocks';
+  readonly row: number;
+  readonly col: number;
+  readonly blockIds: readonly string[];
+}
+
+export interface SetColWidthsCommand {
+  readonly type: 'set-col-widths';
+  readonly widths: readonly number[] | undefined;
+}
+
+export interface ReplaceAllCommand {
+  readonly type: 'replace-all';
+  readonly data: TableData;
+}
+
+export type TableCommand =
+  | InsertRowCommand
+  | DeleteRowCommand
+  | MoveRowCommand
+  | InsertColumnCommand
+  | DeleteColumnCommand
+  | MoveColumnCommand
+  | ToggleHeadingCommand
+  | ToggleHeadingColumnCommand
+  | SetStretchedCommand
+  | AddBlockToCellCommand
+  | RemoveBlockFromCellCommand
+  | SetCellBlocksCommand
+  | SetColWidthsCommand
+  | ReplaceAllCommand;