@threadlabs/looma 0.1.4 → 0.1.6

package/editor/extensions/index.d.ts

@@ -1,5 +1,6 @@
-import { AnyExtension, Editor, Range } from '@tiptap/core';
-import { a as TableOverlayActionEventDetail } from '../table-overlay-DTr3KC9e.js';
+import { AnyExtension, Editor, Range, Extension } from '@tiptap/core';
+import { d as TableContextMenuActionEventDetail, f as TableOverlayActionEventDetail } from '../table-overlay-Bq0F5xPg.js';
+export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-Bq0F5xPg.js';
 
 /**
  * Default Tiptap extension preset for Looma editor.
@@ -11,12 +12,26 @@ interface DefaultEditorExtensionsOptions {
     linkOpenOnClick?: boolean;
     imageInline?: boolean;
 }
+/** Complete Looma table support as one Tiptap extension. */
+declare const LoomaTableKit: AnyExtension;
+/** Individual table extensions for consumers that prefer an explicit extension list. */
+declare function getLoomaTableExtensions(): AnyExtension[];
 /**
  * Returns the default Looma editor extensions (Vanilla Tiptap).
  * Use with new Editor({ extensions: getDefaultEditorExtensions(), ... }) or framework useEditor().
  */
 declare function getDefaultEditorExtensions(options?: DefaultEditorExtensionsOptions): AnyExtension[];
 
+type TableCellAlignment = "left" | "center" | "right";
+type TableCellBackground = string | null;
+declare const LoomaTable: AnyExtension;
+declare const LoomaTableHeader: AnyExtension;
+declare const LoomaTableCell: AnyExtension;
+declare function getActiveTableCellAlignment(editor: Editor): TableCellAlignment;
+declare function getActiveTableCellBackground(editor: Editor): TableCellBackground;
+declare function setActiveTableCellAlignment(editor: Editor, alignment: TableCellAlignment): boolean;
+declare function setActiveTableCellBackground(editor: Editor, backgroundColor: TableCellBackground): boolean;
+
 /**
  * Table overlay action handler — maps boundaryIndex to Tiptap table commands.
  * Use with looma-editor-table-overlay-action: call this from the adapter's handler.
@@ -27,6 +42,30 @@ interface InsertTableAtRangeOptions {
     cols?: number;
     withHeaderRow?: boolean;
 }
+interface TableActionCapabilities {
+    canAddRowBefore: boolean;
+    canAddRowAfter: boolean;
+    canAddColumnBefore: boolean;
+    canAddColumnAfter: boolean;
+    canDeleteRow: boolean;
+    canDeleteColumn: boolean;
+    canDeleteTable: boolean;
+    canMergeCells: boolean;
+    canSplitCell: boolean;
+}
+interface ActiveTableUiState {
+    active: boolean;
+    showToolbar: boolean;
+    cellAlignment: TableCellAlignment;
+    cellBackground: TableCellBackground;
+    capabilities: TableActionCapabilities;
+}
+/** Text formatting belongs to actual text selections, not table CellSelections. */
+declare function shouldShowTextFormattingToolbar(editor: Editor, from?: number, to?: number): boolean;
+/** Returns Looma's complete interaction state for the table containing the selection. */
+declare function getActiveTableUiState(editor: Editor): ActiveTableUiState;
+/** Executes a toolbar/context-menu action using Looma's table behavior policy. */
+declare function handleTableAction(editor: Editor, detail: TableContextMenuActionEventDetail): boolean;
 /**
  * Deletes a slash-command range (or other inline trigger text) and inserts a table.
  * Use this when apps want a stable default `/table` behavior without owning table policy.
@@ -53,22 +92,37 @@ declare function normalizeActiveTableColumnWidths(editor: Editor, tableElement:
  */
 declare function handleTableOverlayAction(editor: Editor, detail: TableOverlayActionEventDetail): boolean;
 
-type TableCellAlignment = "left" | "center" | "right";
-type TableCellBackground = string | null;
-declare const TABLE_CELL_BACKGROUND_PRESETS: {
-    readonly none: null;
-    readonly gray: "#f3f4f6";
-    readonly yellow: "#fef3c7";
-    readonly blue: "#dbeafe";
-    readonly green: "#dcfce7";
-    readonly red: "#fee2e2";
-};
-declare const LoomaTable: AnyExtension;
-declare const LoomaTableHeader: AnyExtension;
-declare const LoomaTableCell: AnyExtension;
-declare function getActiveTableCellAlignment(editor: Editor): TableCellAlignment;
-declare function getActiveTableCellBackground(editor: Editor): TableCellBackground;
-declare function setActiveTableCellAlignment(editor: Editor, alignment: TableCellAlignment): boolean;
-declare function setActiveTableCellBackground(editor: Editor, backgroundColor: TableCellBackground): boolean;
+interface LoomaSlashCommandContext {
+    editor: Editor;
+    range: Range;
+}
+interface LoomaSlashMenuSnapshot {
+    active: boolean;
+    items: LoomaSlashCommand[];
+    selectedIndex: number;
+    query: string;
+    rect: DOMRect | null;
+    select: ((index: number) => void) | null;
+}
+interface LoomaSlashCommandOptions {
+    commands: LoomaSlashCommand[];
+    onStateChange?: (state: LoomaSlashMenuSnapshot) => void;
+    onOpenImagePicker?: () => void;
+}
+declare function getDefaultSlashCommands(onOpenImagePicker?: () => void): LoomaSlashCommand[];
+interface LoomaSlashCommand {
+    title: string;
+    description: string;
+    icon: string;
+    keywords: string[];
+    command: (context: LoomaSlashCommandContext) => void;
+}
+/**
+ * Framework-neutral slash-command extension used by the turnkey editor.
+ * Consumers embedding Looma into their own Tiptap instance can configure the
+ * same behavior and render any menu they choose from `onStateChange`.
+ */
+declare const LoomaSlashCommand: Extension<LoomaSlashCommandOptions, any>;
+declare function createLoomaSlashCommandExtension(options?: Partial<LoomaSlashCommandOptions>): Extension<LoomaSlashCommandOptions, any>;
 
-export { type DefaultEditorExtensionsOptions, type InsertTableAtRangeOptions, LoomaTable, LoomaTableCell, LoomaTableHeader, TABLE_CELL_BACKGROUND_PRESETS, type TableCellAlignment, type TableCellBackground, getActiveTableCellAlignment, getActiveTableCellBackground, getDefaultEditorExtensions, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground };
+export { type ActiveTableUiState, type DefaultEditorExtensionsOptions, type InsertTableAtRangeOptions, LoomaSlashCommand, type LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, type TableActionCapabilities, type TableCellAlignment, type TableCellBackground, createLoomaSlashCommandExtension, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/editor/extensions/index.js

@@ -1,28 +1,46 @@
 import {
+  LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
-  TABLE_CELL_BACKGROUND_PRESETS,
+  LoomaTableKit,
+  createLoomaSlashCommandExtension,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
+  getActiveTableUiState,
   getDefaultEditorExtensions,
+  getDefaultSlashCommands,
+  getLoomaTableExtensions,
+  handleTableAction,
   handleTableOverlayAction,
   insertTableAtRange,
   normalizeActiveTableColumnWidths,
   setActiveTableCellAlignment,
-  setActiveTableCellBackground
-} from "../chunk-YGJLGDQC.js";
+  setActiveTableCellBackground,
+  shouldShowTextFormattingToolbar
+} from "../chunk-NJ2KAMS2.js";
+import {
+  TABLE_CELL_BACKGROUND_PRESETS
+} from "../chunk-CX4QDKSV.js";
 export {
+  LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
+  LoomaTableKit,
   TABLE_CELL_BACKGROUND_PRESETS,
+  createLoomaSlashCommandExtension,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
+  getActiveTableUiState,
   getDefaultEditorExtensions,
+  getDefaultSlashCommands,
+  getLoomaTableExtensions,
+  handleTableAction,
   handleTableOverlayAction,
   insertTableAtRange,
   normalizeActiveTableColumnWidths,
   setActiveTableCellAlignment,
-  setActiveTableCellBackground
+  setActiveTableCellBackground,
+  shouldShowTextFormattingToolbar
 };

package/editor/index.d.ts

@@ -1,4 +1,4 @@
-export { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail, TableContextMenuAction, TableContextMenuActionEventDetail, TableContextMenuActionEventDetail as TableToolbarActionEventDetail } from './ui.js';
-export { T as TableOverlayAction, a as TableOverlayActionEventDetail } from './table-overlay-DTr3KC9e.js';
-export { DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaTable, LoomaTableCell, LoomaTableHeader, TABLE_CELL_BACKGROUND_PRESETS, TableCellAlignment, TableCellBackground, getActiveTableCellAlignment, getActiveTableCellBackground, getDefaultEditorExtensions, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground } from './extensions/index.js';
+export { T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableOverlayAction, f as TableOverlayActionEventDetail, d as TableToolbarActionEventDetail } from './table-overlay-Bq0F5xPg.js';
+export { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail } from './ui.js';
+export { ActiveTableUiState, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaSlashCommandExtension, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
 import '@tiptap/core';

package/editor/index.js

@@ -1,29 +1,49 @@
-import "./chunk-CWCXYQMT.js";
+import "./chunk-KQQTYVRW.js";
 import {
+  LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
-  TABLE_CELL_BACKGROUND_PRESETS,
+  LoomaTableKit,
+  createLoomaSlashCommandExtension,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
+  getActiveTableUiState,
   getDefaultEditorExtensions,
+  getDefaultSlashCommands,
+  getLoomaTableExtensions,
+  handleTableAction,
   handleTableOverlayAction,
   insertTableAtRange,
   normalizeActiveTableColumnWidths,
   setActiveTableCellAlignment,
-  setActiveTableCellBackground
-} from "./chunk-YGJLGDQC.js";
+  setActiveTableCellBackground,
+  shouldShowTextFormattingToolbar
+} from "./chunk-NJ2KAMS2.js";
+import {
+  TABLE_CELL_BACKGROUND_OPTIONS,
+  TABLE_CELL_BACKGROUND_PRESETS
+} from "./chunk-CX4QDKSV.js";
 export {
+  LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
+  LoomaTableKit,
+  TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS,
+  createLoomaSlashCommandExtension,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
+  getActiveTableUiState,
   getDefaultEditorExtensions,
+  getDefaultSlashCommands,
+  getLoomaTableExtensions,
+  handleTableAction,
   handleTableOverlayAction,
   insertTableAtRange,
   normalizeActiveTableColumnWidths,
   setActiveTableCellAlignment,
-  setActiveTableCellBackground
+  setActiveTableCellBackground,
+  shouldShowTextFormattingToolbar
 };

package/editor/table-overlay-Bq0F5xPg.d.ts

@@ -0,0 +1,64 @@
+declare const TABLE_CELL_BACKGROUND_PRESETS: {
+    readonly none: null;
+    readonly gray: "#f3f4f6";
+    readonly yellow: "#fef3c7";
+    readonly blue: "#dbeafe";
+    readonly green: "#dcfce7";
+    readonly red: "#fee2e2";
+};
+declare const TABLE_CELL_BACKGROUND_OPTIONS: readonly [{
+    readonly action: "background-none";
+    readonly label: "Default";
+    readonly value: null;
+    readonly swatch: null;
+}, {
+    readonly action: "background-gray";
+    readonly label: "Gray";
+    readonly value: "#f3f4f6";
+    readonly swatch: "#f3f4f6";
+}, {
+    readonly action: "background-yellow";
+    readonly label: "Yellow";
+    readonly value: "#fef3c7";
+    readonly swatch: "#fef3c7";
+}, {
+    readonly action: "background-blue";
+    readonly label: "Blue";
+    readonly value: "#dbeafe";
+    readonly swatch: "#dbeafe";
+}, {
+    readonly action: "background-green";
+    readonly label: "Green";
+    readonly value: "#dcfce7";
+    readonly swatch: "#dcfce7";
+}, {
+    readonly action: "background-red";
+    readonly label: "Red";
+    readonly value: "#fee2e2";
+    readonly swatch: "#fee2e2";
+}];
+type TableCellBackgroundAction = typeof TABLE_CELL_BACKGROUND_OPTIONS[number]["action"];
+
+/**
+ * ui-editor-table-context-menu — web component for table cell context menu.
+ * Emits custom events for each action; the adapter (Vue/React) wires Tiptap commands.
+ * Domain-neutral: no Tiptap dependency.
+ */
+
+type TableContextMenuAction = "align-left" | "align-center" | "align-right" | TableCellBackgroundAction | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "delete-row" | "delete-column" | "delete-table" | "merge-cells" | "split-cell";
+interface TableContextMenuActionEventDetail {
+    action: TableContextMenuAction;
+}
+
+/**
+ * ui-editor-table-overlay — table edge controls for row/column insertion.
+ * Emits looma-editor-table-overlay-action with insertion intent.
+ * Domain-neutral: no Tiptap dependency.
+ */
+type TableOverlayAction = "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after";
+interface TableOverlayActionEventDetail {
+    action: TableOverlayAction;
+    boundaryIndex: number;
+}
+
+export { TABLE_CELL_BACKGROUND_OPTIONS as T, TABLE_CELL_BACKGROUND_PRESETS as a, type TableCellBackgroundAction as b, type TableContextMenuAction as c, type TableContextMenuActionEventDetail as d, type TableOverlayAction as e, type TableOverlayActionEventDetail as f };

package/editor/ui.d.ts

@@ -1,14 +1,4 @@
-export { T as TableOverlayAction, a as TableOverlayActionEventDetail } from './table-overlay-DTr3KC9e.js';
-
-/**
- * ui-editor-table-context-menu — web component for table cell context menu.
- * Emits custom events for each action; the adapter (Vue/React) wires Tiptap commands.
- * Domain-neutral: no Tiptap dependency.
- */
-type TableContextMenuAction = "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "delete-row" | "delete-column" | "delete-table" | "merge-cells" | "split-cell";
-interface TableContextMenuActionEventDetail {
-    action: TableContextMenuAction;
-}
+export { T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableOverlayAction, f as TableOverlayActionEventDetail, d as TableToolbarActionEventDetail } from './table-overlay-Bq0F5xPg.js';
 
 /**
  * ui-editor-insert-table-grid — web component for picking table dimensions.
@@ -45,4 +35,4 @@ interface SlashMenuSelectEventDetail {
  */
 type SlashMenuAnchorRect = Pick<DOMRectReadOnly, "left" | "top" | "right" | "bottom"> | Pick<DOMRectReadOnly, "x" | "y" | "width" | "height">;
 
-export type { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail, TableContextMenuAction, TableContextMenuActionEventDetail, TableContextMenuActionEventDetail as TableToolbarActionEventDetail };
+export type { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail };

package/editor/ui.js

@@ -1 +1,9 @@
-import "./chunk-CWCXYQMT.js";
+import "./chunk-KQQTYVRW.js";
+import {
+  TABLE_CELL_BACKGROUND_OPTIONS,
+  TABLE_CELL_BACKGROUND_PRESETS
+} from "./chunk-CX4QDKSV.js";
+export {
+  TABLE_CELL_BACKGROUND_OPTIONS,
+  TABLE_CELL_BACKGROUND_PRESETS
+};

package/editor.css

@@ -3,6 +3,230 @@
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.
  */
 
+/* Turnkey editor */
+.looma-editor {
+  position: relative;
+  min-width: 0;
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+}
+
+.looma-editor .ProseMirror {
+  min-height: var(--ui-editor-content-min-height, 300px);
+  padding:
+    var(--ui-editor-content-padding-block, var(--ui-space-4))
+    var(--ui-editor-content-padding-inline, var(--ui-space-6));
+  outline: none;
+  color: var(--ui-editor-content-color, var(--ui-text-primary));
+  caret-color: var(--ui-editor-caret-color, var(--ui-accent-solid));
+  font-family: var(--ui-editor-font-family, var(--ui-font-family-sans));
+  font-size: var(--ui-editor-font-size, var(--ui-font-size-md));
+  line-height: var(--ui-editor-line-height, var(--ui-line-height-relaxed));
+}
+
+@media (max-width: 767px) {
+  .looma-editor .ProseMirror {
+    padding-bottom: var(--ui-editor-mobile-bottom-space, 80px);
+  }
+}
+
+.looma-editor .ProseMirror p {
+  margin: 0 0 var(--ui-editor-paragraph-gap, var(--ui-space-3));
+}
+
+.looma-editor .ProseMirror h1,
+.looma-editor .ProseMirror h2,
+.looma-editor .ProseMirror h3 {
+  color: inherit;
+  line-height: var(--ui-line-height-tight);
+}
+
+.looma-editor .ProseMirror h1 {
+  margin: var(--ui-space-6) 0 var(--ui-space-3);
+  font-size: var(--ui-font-size-2xl);
+  font-weight: var(--ui-font-bold);
+}
+
+.looma-editor .ProseMirror h2 {
+  margin: var(--ui-space-5) 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-xl);
+  font-weight: var(--ui-font-semibold);
+}
+
+.looma-editor .ProseMirror h3 {
+  margin: var(--ui-space-4) 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-semibold);
+}
+
+.looma-editor .ProseMirror ul,
+.looma-editor .ProseMirror ol {
+  margin: 0 0 var(--ui-space-3);
+  padding-left: var(--ui-space-6);
+}
+
+.looma-editor .ProseMirror li {
+  margin-bottom: var(--ui-space-1);
+}
+
+.looma-editor .ProseMirror blockquote {
+  margin: var(--ui-space-4) 0;
+  padding-left: var(--ui-space-4);
+  border-left: 3px solid var(--ui-accent-solid);
+  color: var(--ui-text-secondary);
+  font-style: italic;
+}
+
+.looma-editor .ProseMirror pre {
+  margin: var(--ui-space-4) 0;
+  padding: var(--ui-space-4);
+  overflow-x: auto;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-surface-muted);
+  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor .ProseMirror code {
+  padding: 0.1em 0.3em;
+  border-radius: var(--ui-radius-1);
+  background: var(--ui-surface-subtle);
+  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+  font-size: 0.9em;
+}
+
+.looma-editor .ProseMirror pre code {
+  padding: 0;
+  background: none;
+}
+
+.looma-editor .ProseMirror hr {
+  margin: var(--ui-space-6) 0;
+  border: 0;
+  border-top: 1px solid var(--ui-border-default);
+}
+
+.looma-editor .ProseMirror mark {
+  border-radius: var(--ui-radius-1);
+  background: var(--ui-editor-highlight-bg, var(--ui-warning-soft));
+}
+
+.looma-editor .ProseMirror a {
+  color: var(--ui-editor-link-color, var(--ui-accent-solid));
+  text-decoration: underline;
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] {
+  padding-left: var(--ui-space-2);
+  list-style: none;
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-space-2);
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] li > label {
+  margin-top: 3px;
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--ui-accent-solid);
+  cursor: pointer;
+}
+
+.looma-editor .ProseMirror .is-editor-empty:first-child::before {
+  float: left;
+  height: 0;
+  color: var(--ui-text-muted);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.looma-editor .ProseMirror img {
+  max-width: 100%;
+  margin: var(--ui-space-3) 0;
+  border-radius: var(--ui-radius-2);
+}
+
+.looma-editor__file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.looma-editor__drop-overlay {
+  position: absolute;
+  z-index: var(--ui-editor-drop-overlay-z-index, 10);
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-3);
+  border: 2px dashed var(--ui-accent-solid);
+  border-radius: var(--ui-radius-2);
+  background: color-mix(in srgb, var(--ui-accent-soft) 92%, transparent);
+  color: var(--ui-accent-active);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-semibold);
+  pointer-events: none;
+}
+
+.looma-editor__drop-glyph {
+  font-size: var(--ui-font-size-2xl);
+}
+
+.looma-editor__toolbar-button {
+  --ui-icon-button-size-sm: var(--ui-editor-toolbar-button-size, 2rem);
+  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-1));
+  --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+}
+
+.looma-editor__toolbar-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1em;
+  color: inherit;
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-editor-toolbar-glyph-size, 0.75rem);
+  font-weight: var(--ui-font-semibold);
+  line-height: 1;
+}
+
+.looma-editor__table-picker-anchor {
+  display: inline-flex;
+}
+
+.looma-editor__table-picker-popover,
+.looma-editor__table-toolbar-shell,
+.looma-editor__table-menu-shell {
+  z-index: var(--ui-editor-popover-z-index, 300);
+}
+
+.looma-editor__table-picker-popover {
+  min-width: 220px;
+}
+
+.looma-editor__table-toolbar-shell,
+.looma-editor__table-menu-shell,
+.looma-editor__table-overlay-shell {
+  position: fixed;
+}
+
+.looma-editor__table-overlay-shell {
+  z-index: var(--ui-editor-overlay-z-index, 299);
+  overflow: visible;
+  pointer-events: none;
+}
+
 /* Slash menu */
 ui-editor-slash-menu {
   user-select: none;
@@ -458,6 +682,36 @@ ui-editor-toolbar[floating] {
   text-align: left;
 }
 
+.ui-editor-table-toolbar__swatches {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2px;
+}
+
+.ui-editor-table-toolbar__swatch-button {
+  gap: var(--ui-space-1, 4px);
+  justify-content: flex-start !important;
+}
+
+.ui-editor-table-toolbar__swatch {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+  border-radius: 3px;
+  background: var(--ui-editor-table-toolbar-swatch);
+}
+
+.ui-editor-table-toolbar__swatch--default {
+  background:
+    linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
+    var(--ui-surface, #fff);
+}
+
+.ui-editor-table-toolbar__swatch-button[data-selected="true"] {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+}
+
 /* Insert table grid */
 .ui-editor-insert-table-grid {
   padding: var(--ui-space-3, 12px);
@@ -584,6 +838,7 @@ ui-editor-toolbar[floating] {
 }
 
 .ui-editor-table-overlay__control--row {
+  pointer-events: auto;
   left: 0;
   right: 0;
   top: calc(var(--ui-editor-table-overlay-boundary-index) * 100% / var(--ui-editor-table-overlay-segments));
@@ -662,6 +917,11 @@ ui-editor-toolbar[floating] {
 }
 
 /* ProseMirror table (for when Looma editor content is rendered) */
+.ProseMirror:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .ProseMirror table {
   border-collapse: collapse;
   margin: 0;
@@ -686,6 +946,10 @@ ui-editor-toolbar[floating] {
   overflow-wrap: anywhere;
 }
 
+.ProseMirror :is(th, td) > p:last-child {
+  margin-bottom: 0;
+}
+
 .ProseMirror th {
   font-weight: 600;
   background: var(--ui-surface-hover, #f3f4f6);

package/layout/index.css

@@ -8,7 +8,6 @@
 :where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
   all: revert-layer;
   box-sizing: border-box;
-  margin: 0;
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height-md);
@@ -31,6 +30,7 @@
   :where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
     min-inline-size: 0;
     max-inline-size: 100%;
+    margin: 0;
   }
   ui-stack {
     --ui-layout-gap: var(--ui-space-4, 1rem);

package/layout.css

@@ -10,7 +10,6 @@
   /* Reveal Looma's component layer instead of reverting past it. */
   all: revert-layer;
   box-sizing: border-box;
-  margin: 0;
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height-md);
@@ -35,6 +34,7 @@
   :where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
     min-inline-size: 0;
     max-inline-size: 100%;
+    margin: 0;
   }
 
   ui-stack {