@zuilib/text-editor 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog — @zuilib/text-editor
 
+## 0.6.0
+
+**Text measure and `text` block width.** Additive: markdown, JSON, class
+names and props keep their meaning; with no configuration the layout is
+unchanged.
+
+- **Measure** (opt in): `measure="48rem"` on `MarkdownEditor` /
+  `MarkdownEditor.Root`, or `--zui-text-editor-measure: 48rem` in a
+  stylesheet — the CSS custom property is the contract, the prop is sugar.
+  Text blocks (paragraphs, headings, lists, quotes, code, frontmatter) are
+  capped at the measure and centred in the content pane; the placeholder
+  and fold chevrons follow the column. The pane itself is never capped and
+  full-width blocks stop short of the outline sidebar
+- **`BlockWidth` gains `'text'`**: `'full' | 'text' | 'content'`. `text`
+  aligns a table or drawing with the text column; without a measure it is
+  visually identical to `full` (resolved in CSS through the variable's
+  fallback). `full` (default, omitted) and `content` (shrink to fit) are
+  unchanged
+- **Persistence**: tables `<!-- width: text -->` (combinable with
+  `density`); drawings and ` ```diagram ` skeletons `"width":"text"`.
+  `DRAWING_DATA_JSON_SCHEMA`, `DRAWING_SKELETON_JSON_SCHEMA` and
+  `DRAWING_FORMAT.md` updated. Unknown width values are ignored (treated as
+  `full`) instead of being rejected, so documents from newer versions still
+  open — `parseTableSettingsMarker` now returns `{}` (rather than `null`)
+  for a marker whose only known key carries an unknown value, and the
+  transformer consumes that line
+- **Insertion defaults**: `defaultBlockWidth={{ table?, drawing? }}` on
+  Root applies when the toolbar / `useMarkdownEditor()` inserts a new table
+  or drawing. The chosen width is written to the markdown explicitly, even
+  `full`, so the document reads the same in an app with other defaults; a
+  width named in the source (`<!-- width: full -->`, `"width":"full"`) is
+  preserved on round trip
+- **UI / headless**: the floating table toolbar and the drawing toolbar
+  offer all three widths with distinct icons (`BLOCK_WIDTH_OPTIONS`).
+  `useMarkdownEditor()` gains `blockWidth` / `setBlockWidth` for the block
+  containing the selection — the focused drawing or the table the caret is
+  in; `insertTable` / `insertDrawing` accept a `width` option. `tableWidth`
+  / `setTableWidth` keep working and are deprecated
+- **CSS**: the new layout lives in zero-specificity `:where()` rules. The
+  content pane exposes `--zui-text-editor-gutter` and
+  `--zui-text-editor-bleed`; every top-level block reads
+  `--zui-text-editor-block-bleed`, so one class rule overrides any block
+  kind. New block classes (added next to the existing utility classes):
+  `.zui-paragraph`, `.zui-heading` / `.zui-heading-1`…`6`, `.zui-list` /
+  `.zui-list-ordered` / `.zui-list-unordered`, `.zui-quote`, `.zui-code`;
+  `.zui-drawing-canvas` gains `.is-text-width`. Nothing is renamed
+- New exports: `BLOCK_WIDTHS`, `isBlockWidth`, `BlockWidthDefaults`,
+  `TableSettingsOptions`, `$isTableWidthExplicit`; `$setTableSettings` and
+  `formatTableSettingsMarker` take an optional `{ explicitWidth }`
+- **Adopting**: set `measure` (or the CSS variable) and delete any external
+  `max-width` / `margin-inline` overrides on `.zui-text-editor-content > *`
+
 ## 0.5.0
 
 **Diagram builder rewrite.** The drawing canvas, its payload format and the

package/DRAWING_FORMAT.md

@@ -41,9 +41,13 @@ skeleton, which is a separate block type.
   narrower layouts (SVG viewBox), so coordinates can assume that width.
   When omitted the canvas is fluid and as wide as the editor; keep shapes
   within roughly x in [0, 700] to be safe on typical layouts.
-- `"width":"content"` sizes the block to fit the rightmost shape (plus a
-  margin), left-aligned with the text. Use it for small diagrams that
-  should not stretch across the page. Default `"full"`, omit it.
+- `width` is the block's horizontal sizing in the page, independent of the
+  coordinates: `"full"` (default, omit it) spans the editor pane;
+  `"text"` aligns the block with the text column (the same as `"full"`
+  unless the app sets a text measure); `"content"` sizes the block to fit
+  the rightmost shape (plus a margin), left-aligned with the text. Use
+  `"content"` for small diagrams that should not stretch across the page.
+  Unknown values are ignored (treated as `"full"`).
 
 ## Top-level object
 
@@ -52,7 +56,7 @@ skeleton, which is a separate block type.
 | `version`      | `2`       | Literal `2`                                                  |
 | `canvasHeight` | `number`  | Canvas height in px (min 80)                                 |
 | `canvasWidth`  | `number`  | Optional logical width in px (min 120); scales to fit when set |
-| `width`        | `"full"` \| `"content"` | Optional; default `"full"`. `"content"` fits the shapes' extent |
+| `width`        | `"full"` \| `"text"` \| `"content"` | Optional; default `"full"`. `"text"` aligns with the text column, `"content"` fits the shapes' extent |
 | `shapes`       | `Shape[]` | Render order: later shapes draw on top                       |
 
 ## Shape object
@@ -197,7 +201,7 @@ one-way: once opened, the document stores the concrete ```drawing block.
 ```
 {
   "direction"?: "right" | "down",          // auto-layout flow, default right
-  "canvasWidth"?: n, "canvasHeight"?: n, "width"?: "content",
+  "canvasWidth"?: n, "canvasHeight"?: n, "width"?: "full" | "text" | "content",
   "boxes": [ { "id", "type"?: <box type, default rect>, "label"?, "text"?, "footer"?,
                "x"?, "y"?,            // omitted: auto layout by connector rank
                "w"?, "h"?,            // omitted: sized to fit the text
@@ -224,6 +228,8 @@ Rules:
   them. Boxes without `w`/`h` are sized to fit their text. `canvasHeight`
   is computed when omitted.
 - `texts` are free annotations and need explicit coordinates.
+- `width` is copied to the expanded drawing (see [Coordinate
+  system](#coordinate-system)); omit it for `"full"`.
 
 A three-box flow:
 

package/README.md

@@ -13,8 +13,9 @@ document outline, and collapsible sections.
   blockquotes, links, fenced code (with syntax highlighting), tables
 - **Tables**: GFM pipe tables, edited in place (tab between cells, ranges,
   inline formatting), styled like Claude artifacts
-- **Table settings**: full/content width and row density per table;
-  diagrams switch between full and content width too — Slab-style
+- **Text measure and block width**: an opt-in readable text column
+  (`measure="48rem"`); each table and diagram picks *full* / *text* /
+  *content* width, Slab-style; row density per table
 - **Diagrams**: a drawing canvas embedded in the document. Eight box
   shapes (rectangle, ellipse, diamond, note, database, cloud, queue, actor)
   with attached text slots, bound arrows that follow their boxes and attach
@@ -73,6 +74,8 @@ emits. The emitted string is always plain markdown.
 | `toolbar` | `boolean \| (items) => ReactNode` | `true` | Formatting/insert toolbar (`edit-md`); function form customises it |
 | `outline` | `boolean` | `false` | Table-of-contents sidebar |
 | `foldable` | `boolean` | `true` | Collapse sections under headings |
+| `measure` | `string` | — | Max width of the text column, a CSS length (`'48rem'` recommended). Sugar for `--zui-text-editor-measure` |
+| `defaultBlockWidth` | `{ table?, drawing? }` | — | `BlockWidth` written when the toolbar inserts a table / drawing |
 
 ### Modes
 
@@ -101,16 +104,12 @@ Editing is in place: Tab/arrows between cells, cell range selection, inline
 formatting inside cells. Cell content is single-line in markdown; newlines
 are escaped as `\n`.
 
-### Table settings: width and density
+### Table density
 
 Place the caret in a table and a small toolbar floats at its top-right
-corner:
-
-- **Width** — *full* (default: columns share the editor width) or
-  *content* (the table shrinks to fit its columns, left-aligned with the
-  text, never wider than the editor).
-- **Density** — *compact*, *comfortable* (default), or *spacious* cell
-  padding and font size.
+corner with the table's width (see [Block width and text
+measure](#block-width-and-text-measure)) and its **density** — *compact*,
+*comfortable* (default), or *spacious* cell padding and font size.
 
 Non-default settings are persisted as one HTML comment on the line directly
 above the table — other markdown renderers hide it:
@@ -122,12 +121,70 @@ above the table — other markdown renderers hide it:
 | Region | eu-west-1 |
 ```
 
-Programmatic access: `useMarkdownEditor().tableWidth` / `setTableWidth` and
-`tableDensity` / `setTableDensity` (for custom toolbars), or
-`$getTableSettings(node)` / `$setTableSettings(node, { width, density })`
-inside `editor.update`. `parseTableSettingsMarker` /
-`formatTableSettingsMarker` convert between the comment line and a
-`TableSettings` object.
+Programmatic access: `useMarkdownEditor().tableDensity` / `setTableDensity`
+(for custom toolbars), or `$getTableSettings(node)` /
+`$setTableSettings(node, { width, density })` inside `editor.update`.
+`parseTableSettingsMarker` / `formatTableSettingsMarker` convert between
+the comment line and a `TableSettings` object.
+
+## Block width and text measure
+
+By default every block spans the content pane. Set a **measure** to get a
+readable text column instead: paragraphs, headings, lists, quotes, code,
+frontmatter are capped at that width and centred in the pane, while each
+table and drawing chooses its own width.
+
+```tsx
+<MarkdownEditor value={value} onChange={setValue} measure="48rem" />
+```
+
+The prop is sugar for the CSS custom property `--zui-text-editor-measure`,
+which is the actual contract — set it in a stylesheet on `.zui-text-editor`
+(or any ancestor) and never touch the prop:
+
+```css
+.zui-text-editor { --zui-text-editor-measure: 48rem; }
+```
+
+**Adopting:** set `measure` (or the variable) and delete any external
+`max-width` / `margin-inline` overrides on `.zui-text-editor-content > *`;
+the library now owns that layout.
+
+Every table and drawing has a `BlockWidth`, picked from the floating table
+toolbar or the right end of the drawing toolbar:
+
+| `BlockWidth` | Layout | Markdown |
+|--------------|--------|----------|
+| `full` | The content pane, edge to edge (never under the outline sidebar). The default | Omitted |
+| `text` | The text column: edges align with the paragraphs. Identical to `full` until a measure is set | `<!-- width: text -->` / `"width":"text"` |
+| `content` | Shrinks to its columns / shapes, left-aligned with the text, never wider than the column | `<!-- width: content -->` / `"width":"content"` |
+
+Absence of a marker always means `full`, in every app. `defaultBlockWidth`
+only changes what the toolbar / `insertTable` / `insertDrawing` write into
+*new* blocks — and that value is written explicitly, even when it is
+`full`, so the document reads the same elsewhere:
+
+```tsx
+<MarkdownEditor measure="48rem" defaultBlockWidth={{ table: 'text', drawing: 'text' }} … />
+```
+
+Headless: `useMarkdownEditor().blockWidth` / `setBlockWidth` act on the
+block containing the selection — the focused drawing, or else the table
+the caret is in. (`tableWidth` / `setTableWidth` still work and are
+deprecated in favour of these.)
+
+Styling: the layout is driven by low-specificity `:where()` rules and two
+derived custom properties on `.zui-text-editor-main` —
+`--zui-text-editor-gutter` (the pane padding, `2rem` without a measure)
+and `--zui-text-editor-bleed` (how far a full-width block extends past the
+column, `0` without a measure). Each top-level block reads
+`--zui-text-editor-block-bleed`, so a single class rule overrides any block
+kind: `.zui-code { --zui-text-editor-block-bleed: var(--zui-text-editor-bleed) }`
+makes code blocks full width; `.zui-table { --zui-text-editor-block-bleed: 0px }`
+keeps every table inside the column. Block classes: `.zui-paragraph`,
+`.zui-heading` (+ `.zui-heading-1`…`6`), `.zui-list` (+ `-ordered` /
+`-unordered`, `.zui-checklist`), `.zui-quote`, `.zui-code`,
+`.zui-frontmatter`, `.zui-table`, `.zui-drawing`.
 
 ## Toolbar & custom toolbars
 
@@ -212,10 +269,11 @@ function BoldButton() {
 ```
 
 It returns `editor` (the Lexical instance), `activeFormats`,
-`toggleFormat`, `insertTable`, `insertDrawing`, `tableWidth` /
-`setTableWidth` and `tableDensity` / `setTableDensity` (settings of the
-table containing the selection, `null` outside tables), `canUndo`,
-`canRedo`, `undo`, `redo`.
+`toggleFormat`, `insertTable`, `insertDrawing`, `blockWidth` /
+`setBlockWidth` (width of the table or drawing containing the selection,
+`null` outside both), `tableDensity` / `setTableDensity` (`null` outside
+tables), `canUndo`, `canRedo`, `undo`, `redo`. `tableWidth` /
+`setTableWidth` remain as deprecated aliases limited to tables.
 
 ## Diagrams (drawing canvas)
 
@@ -251,10 +309,12 @@ fully specified in **[DRAWING_FORMAT.md](./DRAWING_FORMAT.md)**.
 - **Canvas**: resizable height, dot grid, white surface that inverts
   Excalidraw-style in dark mode (`.dark` ancestor class). An optional
   `canvasWidth` scales the drawing to fit narrower layouts.
-- **Width**: the toggle at the right end of the canvas toolbar switches
-  between **full width** (spans the editor) and **content width** (the
-  canvas fits the rightmost shape and grows as shapes move). Stored as
-  `"width":"content"` in the payload; omitted when full.
+- **Width**: the buttons at the right end of the canvas toolbar switch
+  between **full** (spans the pane), **text** (aligns with the text column,
+  see [Block width and text measure](#block-width-and-text-measure)) and
+  **content** (the canvas fits the rightmost shape and grows as shapes
+  move). Stored as `"width":"text"` / `"width":"content"` in the payload;
+  omitted when full.
 
 A stored drawing looks like this:
 
@@ -335,8 +395,9 @@ diagrams:
 | `Toolbar`, `ToolbarButton`, `ToolbarDivider`, `FormatButtons`, `InsertButtons`, `HistoryButtons` | Toolbar primitives |
 | `@zuilib/text-editor/styles.css` | Editor chrome + theme styles (required) |
 | `TABLE` | GFM table markdown transformer |
-| `BlockWidth`, `TableDensity`, `TableSettings`, `DEFAULT_TABLE_SETTINGS` | Table setting types |
-| `$getTableSettings`, `$setTableSettings`, `$getTableWidth`, `$setTableWidth`, `$getTableDensity`, `$setTableDensity`, `$getSelectedTable` | Table setting helpers (inside `editor.update`/`read`) |
+| `BlockWidth`, `BLOCK_WIDTHS`, `isBlockWidth`, `BlockWidthDefaults` | Block width (`full` / `text` / `content`) type, values, guard, insertion defaults |
+| `TableDensity`, `TableSettings`, `TableSettingsOptions`, `DEFAULT_TABLE_SETTINGS` | Table setting types |
+| `$getTableSettings`, `$setTableSettings`, `$isTableWidthExplicit`, `$getTableWidth`, `$setTableWidth`, `$getTableDensity`, `$setTableDensity`, `$getSelectedTable` | Table setting helpers (inside `editor.update`/`read`) |
 | `parseTableSettingsMarker`, `formatTableSettingsMarker` | Marker comment ⇄ `TableSettings` |
 | `DRAWING`, `DIAGRAM`, `DrawingNode`, `$createDrawingNode`, `$isDrawingNode` | Drawing node + markdown transformers (` ```drawing ` and ` ```diagram `) |
 | `FRONTMATTER`, `FrontmatterNode`, `$createFrontmatterNode`, `$isFrontmatterNode` | Frontmatter node + transformer |

package/dist/index.d.ts

@@ -4,7 +4,33 @@ import { LexicalEditor, TextFormatType, ElementNode, NodeKey, EditorConfig, Seri
 import { TableNode } from '@lexical/table';
 import { MultilineElementTransformer, ElementTransformer } from '@lexical/markdown';
 
+/**
+ * Horizontal sizing of a block that would otherwise span the editor:
+ *
+ * - `full` — the container width (the content pane, minus its gutters).
+ *   The default; omitted when serialised.
+ * - `text` — the text column: the block's edges align with the paragraphs
+ *   around it. Only differs from `full` when a measure is set
+ *   (`--zui-text-editor-measure` / the `measure` prop); otherwise the two
+ *   are visually identical.
+ * - `content` — shrinks to fit what is inside (table columns, drawing
+ *   shapes), left-aligned with the text and never wider than the column.
+ */
+type BlockWidth = 'full' | 'text' | 'content';
+declare const BLOCK_WIDTHS: readonly BlockWidth[];
+declare function isBlockWidth(value: unknown): value is BlockWidth;
+/**
+ * Width written into the markdown when a new table / drawing is inserted
+ * (`MarkdownEditor.Root`'s `defaultBlockWidth`). Only affects insertion:
+ * existing markdown without a width marker always means `full`.
+ */
+type BlockWidthDefaults = Readonly<{
+    table?: BlockWidth;
+    drawing?: BlockWidth;
+}>;
+
 type EditorMode = 'edit-raw' | 'edit-md' | 'view';
+
 type EditorRootProps = Readonly<{
     value?: string;
     onChange?: (value: string) => void;
@@ -12,6 +38,22 @@ type EditorRootProps = Readonly<{
     className?: string;
     mode?: EditorMode;
     autoFocus?: boolean;
+    /**
+     * Text measure: the maximum width of the text column, as a CSS length
+     * (`'48rem'` recommended). Text blocks are capped at this width and
+     * centred; tables and drawings choose per block whether to align with
+     * the column (`text`), span the pane (`full`) or hug their content.
+     * Sugar for setting `--zui-text-editor-measure` on the root; the
+     * variable can equally be set from a stylesheet. Unset: no measure, every
+     * block spans the pane.
+     */
+    measure?: string;
+    /**
+     * Width written into the markdown when the toolbar or
+     * `useMarkdownEditor()` inserts a new table / drawing. Only affects
+     * insertion — markdown without a width marker always means `full`.
+     */
+    defaultBlockWidth?: BlockWidthDefaults;
     children: ReactNode;
 }>;
 /**
@@ -19,7 +61,7 @@ type EditorRootProps = Readonly<{
  * beneath it (`Content`, `Toolbar`, `Outline`, or your own components using
  * `useMarkdownEditor`) shares the same editor instance.
  */
-declare function EditorRoot({ value, onChange, readOnly, className, mode, autoFocus, children, }: EditorRootProps): ReactElement;
+declare function EditorRoot({ value, onChange, readOnly, className, mode, autoFocus, measure, defaultBlockWidth, children, }: EditorRootProps): ReactElement;
 
 type EditorContentProps = Readonly<{
     placeholder?: string;
@@ -41,13 +83,6 @@ declare function EditorContent({ placeholder, foldable, children, }: EditorConte
  */
 declare function OutlinePlugin(): ReactElement;
 
-/**
- * Horizontal sizing of a block that would otherwise span the editor:
- * `full` stretches to the content column, `content` shrinks to fit what is
- * inside (table columns, drawing shapes) and left-aligns with the text.
- */
-type BlockWidth = 'full' | 'content';
-
 /** Cell padding / font size preset */
 type TableDensity = 'compact' | 'comfortable' | 'spacious';
 type TableSettings = Readonly<{
@@ -55,8 +90,14 @@ type TableSettings = Readonly<{
     density: TableDensity;
 }>;
 declare const DEFAULT_TABLE_SETTINGS: TableSettings;
+type TableSettingsOptions = Readonly<{
+    /** Persist the width even when it is `full` */
+    explicitWidth?: boolean;
+}>;
 declare function $getTableSettings(table: TableNode): TableSettings;
-declare function $setTableSettings(table: TableNode, settings: Partial<TableSettings>): void;
+declare function $setTableSettings(table: TableNode, settings: Partial<TableSettings>, options?: TableSettingsOptions): void;
+/** Whether the table's width should be persisted even when it is `full` */
+declare function $isTableWidthExplicit(table: TableNode): boolean;
 declare function $getTableWidth(table: TableNode): BlockWidth;
 declare function $setTableWidth(table: TableNode, width: BlockWidth): void;
 declare function $getTableDensity(table: TableNode): TableDensity;
@@ -65,10 +106,17 @@ declare function $setTableDensity(table: TableNode, density: TableDensity): void
 declare function $getSelectedTable(): TableNode | null;
 /** @deprecated Use `formatTableSettingsMarker({ ...DEFAULT_TABLE_SETTINGS, width: 'content' })` */
 declare const TABLE_WIDTH_MARKER = "<!-- width: content -->";
-/** Settings encoded in a marker line, or null if the text is not a marker */
+/**
+ * Settings encoded in a marker line, or null if the text is not a marker.
+ * A marker naming a known setting with an unknown value yields that setting
+ * omitted (possibly an empty object): the line is still a settings marker.
+ */
 declare function parseTableSettingsMarker(text: string): Partial<TableSettings> | null;
-/** Marker line for the given settings, or null when everything is default */
-declare function formatTableSettingsMarker(settings: TableSettings): string | null;
+/**
+ * Marker line for the given settings, or null when everything is default.
+ * With `explicitWidth` the width is listed even when it is `full`.
+ */
+declare function formatTableSettingsMarker(settings: TableSettings, options?: TableSettingsOptions): string | null;
 
 type MarkdownEditorApi = Readonly<{
     /** The underlying Lexical editor, for dispatching your own commands */
@@ -76,14 +124,40 @@ type MarkdownEditorApi = Readonly<{
     /** Text formats active at the current selection */
     activeFormats: ReadonlySet<TextFormatType>;
     toggleFormat: (format: TextFormatType) => void;
+    /**
+     * Insert a table at the selection. `width` defaults to
+     * `defaultBlockWidth.table` (Root prop); when given it is written to the
+     * markdown explicitly, even when `full`.
+     */
     insertTable: (options?: {
         rows?: number;
         columns?: number;
+        width?: BlockWidth;
     }) => void;
-    insertDrawing: () => void;
-    /** Width of the table containing the selection; `null` outside tables */
+    /**
+     * Insert an empty drawing at the selection. `width` defaults to
+     * `defaultBlockWidth.drawing` (Root prop); when given it is written to
+     * the markdown explicitly, even when `full`.
+     */
+    insertDrawing: (options?: {
+        width?: BlockWidth;
+    }) => void;
+    /**
+     * Width of the block containing the selection — the focused drawing, or
+     * else the table the caret is in; `null` outside both.
+     */
+    blockWidth: BlockWidth | null;
+    /** Resize that block; no-op when `blockWidth` is `null` */
+    setBlockWidth: (width: BlockWidth) => void;
+    /**
+     * Width of the table containing the selection; `null` outside tables.
+     * @deprecated Use `blockWidth`, which also covers drawings.
+     */
     tableWidth: BlockWidth | null;
-    /** Resize the table containing the selection; no-op outside tables */
+    /**
+     * Resize the table containing the selection; no-op outside tables.
+     * @deprecated Use `setBlockWidth`, which also covers drawings.
+     */
     setTableWidth: (width: BlockWidth) => void;
     /** Density of the table containing the selection; `null` outside tables */
     tableDensity: TableDensity | null;
@@ -283,8 +357,10 @@ type DrawingData = Readonly<{
     canvasWidth?: number;
     canvasHeight: number;
     /**
-     * Block width: `full` (default, omitted when serialized) spans the
-     * editor; `content` fits the shapes' horizontal extent.
+     * Block width: `full` (default) spans the editor; `text` aligns with the
+     * text column; `content` fits the shapes' horizontal extent. The editor
+     * omits `full` unless it was written explicitly (an insertion default or
+     * the source payload); unknown values are dropped.
      */
     width?: BlockWidth;
     shapes: readonly DrawingShape[];
@@ -350,7 +426,7 @@ declare const DIAGRAM: MultilineElementTransformer;
  * Markdown transformer for GFM tables. Adapted from the Lexical playground.
  * Rows are matched line-by-line on import and stitched into a single
  * TableNode; the divider row promotes the row above it to a header row.
- * A `<!-- width: content; density: compact -->` settings line directly
+ * A `<!-- width: text; density: compact -->` settings line directly
  * above the table (see tableSettings.ts) is consumed on import and
  * re-emitted on export.
  */
@@ -392,8 +468,8 @@ declare const DRAWING_DATA_JSON_SCHEMA: {
             readonly description: "Optional logical canvas width in pixels. When set, the drawing is scaled down to fit narrower layouts (SVG viewBox) so coordinates can assume this width. When omitted the canvas is fluid and coordinates are CSS pixels.";
         };
         readonly width: {
-            readonly enum: readonly ["full", "content"];
-            readonly description: "Block width: \"full\" (default, omit it) spans the editor; \"content\" fits the shapes' horizontal extent and left-aligns with the text";
+            readonly enum: readonly ["full", "text", "content"];
+            readonly description: "Block width: \"full\" (default, omit it) spans the editor; \"text\" aligns the block with the text column (same as \"full\" unless the app sets a text measure); \"content\" fits the shapes' horizontal extent and left-aligns with the text";
         };
         readonly shapes: {
             readonly type: "array";
@@ -595,6 +671,13 @@ type BoxDefinition = Readonly<{
 }>;
 declare const BOX_DEFINITIONS: Record<BoxType, BoxDefinition>;
 
+/**
+ * Skeleton (intent) layer: a compact, LLM-friendly description of a diagram
+ * — boxes, connectors between them and loose texts — that expands into a
+ * full `DrawingData` document. Sizes, positions and connector geometry are
+ * derived, so a generator only needs to say *what* is on the canvas.
+ */
+
 type ColorName = 'gray' | 'red' | 'green' | 'blue' | 'orange' | 'purple';
 declare const COLOR_PRESETS: Record<ColorName, {
     stroke: string;
@@ -648,7 +731,8 @@ type DrawingSkeleton = Readonly<{
     direction?: 'right' | 'down';
     canvasWidth?: number;
     canvasHeight?: number;
-    width?: 'content';
+    /** Block width of the expanded drawing; omit for `full` */
+    width?: BlockWidth;
     boxes: readonly SkeletonBox[];
     connectors?: readonly SkeletonConnector[];
     texts?: readonly SkeletonText[];
@@ -685,8 +769,8 @@ declare const DRAWING_SKELETON_JSON_SCHEMA: {
             readonly description: "Canvas height in px. Omit to fit the content";
         };
         readonly width: {
-            readonly enum: readonly ["content"];
-            readonly description: "Block width: \"content\" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor";
+            readonly enum: readonly ["full", "text", "content"];
+            readonly description: "Block width: \"text\" aligns the drawing with the text column (same as \"full\" unless the app sets a text measure); \"content\" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor";
         };
         readonly boxes: {
             readonly type: "array";
@@ -891,4 +975,4 @@ type MermaidOptions = Readonly<{
  */
 declare function drawingToMermaid(data: DrawingData, options?: MermaidOptions): string;
 
-export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $setTableDensity, $setTableSettings, $setTableWidth, BOX_DEFINITIONS, BOX_TYPES, type Binding, type BindingSide, type BlockWidth, type BoxDefinition, type BoxType, COLOR_PRESETS, CONNECTOR_TYPES, type ColorName, type ConnectorType, DEFAULT_TABLE_SETTINGS, DIAGRAM, DRAWING, DRAWING_DATA_JSON_SCHEMA, DRAWING_SKELETON_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type DrawingSkeleton, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type MermaidDirection, type MermaidOptions, type Point, SHAPE_TYPES, SIDE_FIXED_POINTS, STROKE_COLORS, type SerializedDrawingNode, type SerializedFrontmatterNode, type SkeletonBox, type SkeletonConnector, type SkeletonEnd, type SkeletonText, TABLE, TABLE_WIDTH_MARKER, type TableDensity, type TableSettings, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, resolveBindings, routeElbow, serializeDrawingData, useMarkdownEditor };
+export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $isTableWidthExplicit, $setTableDensity, $setTableSettings, $setTableWidth, BLOCK_WIDTHS, BOX_DEFINITIONS, BOX_TYPES, type Binding, type BindingSide, type BlockWidth, type BlockWidthDefaults, type BoxDefinition, type BoxType, COLOR_PRESETS, CONNECTOR_TYPES, type ColorName, type ConnectorType, DEFAULT_TABLE_SETTINGS, DIAGRAM, DRAWING, DRAWING_DATA_JSON_SCHEMA, DRAWING_SKELETON_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type DrawingSkeleton, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type MermaidDirection, type MermaidOptions, type Point, SHAPE_TYPES, SIDE_FIXED_POINTS, STROKE_COLORS, type SerializedDrawingNode, type SerializedFrontmatterNode, type SkeletonBox, type SkeletonConnector, type SkeletonEnd, type SkeletonText, TABLE, TABLE_WIDTH_MARKER, type TableDensity, type TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, resolveBindings, routeElbow, serializeDrawingData, useMarkdownEditor };

package/dist/index.js

@@ -1,8 +1,6 @@
 // src/EditorRoot.tsx
 import {
-  createContext,
   useCallback as useCallback2,
-  useContext,
   useEffect as useEffect8,
   useMemo as useMemo2,
   useRef as useRef5,
@@ -308,6 +306,18 @@ import { $getNodeByKey as $getNodeByKey2 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 
+// src/drawing/focusCommand.ts
+import { createCommand } from "lexical";
+var DRAWING_FOCUS_COMMAND = createCommand(
+  "DRAWING_FOCUS_COMMAND"
+);
+
+// src/blockWidth.ts
+var BLOCK_WIDTHS = ["full", "text", "content"];
+function isBlockWidth(value) {
+  return typeof value === "string" && BLOCK_WIDTHS.includes(value);
+}
+
 // src/drawing/types.ts
 var BOX_TYPES = [
   "rect",
@@ -393,8 +403,9 @@ function normalizeDrawingData(parsed) {
     version: 2,
     canvasHeight: Number.isFinite(height) && height >= MIN_CANVAS_HEIGHT ? height : DEFAULT_CANVAS_HEIGHT,
     ...Number.isFinite(canvasWidth) && canvasWidth >= 120 ? { canvasWidth } : {},
-    // `full` is the default and stays implicit so payloads stay compact
-    ...parsed.width === "content" ? { width: "content" } : {},
+    // `full` stays implicit unless the payload spells it out; unknown
+    // values (newer versions) are dropped rather than rejected
+    ...isBlockWidth(parsed.width) ? { width: parsed.width } : {},
     // Bindings to ids that don't exist (or aren't boxes) are dropped
     shapes: shapes.map((shape) => {
       if (!isConnectorType(shape.type)) return shape;
@@ -2335,6 +2346,14 @@ var BLOCK_WIDTH_OPTIONS = [
       /* @__PURE__ */ jsx7("path", { d: "M6 10h8M8.5 7.5L6 10l2.5 2.5M11.5 7.5L14 10l-2.5 2.5" })
     ] })
   },
+  {
+    width: "text",
+    label: "Text width",
+    icon: /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx7("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx7("path", { d: "M6.5 7h7M6.5 10h7M6.5 13h4.5" })
+    ] })
+  },
   {
     width: "content",
     label: "Content width",
@@ -2482,6 +2501,11 @@ function DrawingToolbar({
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var MIN_HEIGHT = 120;
 var MAX_HEIGHT = 1200;
+var WIDTH_CLASS = {
+  full: "",
+  text: "is-text-width",
+  content: "is-content-width"
+};
 var MIN_CONTENT_WIDTH = 240;
 var CONTENT_WIDTH_PADDING = 40;
 var EMPTY_SET = /* @__PURE__ */ new Set();
@@ -2564,11 +2588,12 @@ function DrawingCanvas({ nodeKey, data }) {
   const commit = useCallback(
     (nextShapes, options) => {
       const nextWidth = options?.width ?? widthRef.current;
+      const explicitFull = options?.width === void 0 && data.width !== void 0;
       const payload = {
         version: 2,
         ...canvasWidth ? { canvasWidth } : {},
         canvasHeight: options?.height ?? heightRef.current,
-        ...nextWidth === "content" ? { width: "content" } : {},
+        ...nextWidth !== "full" || explicitFull ? { width: nextWidth } : {},
         shapes: nextShapes
       };
       const json = serializeDrawingData(payload);
@@ -2579,7 +2604,7 @@ function DrawingCanvas({ nodeKey, data }) {
         if ($isDrawingNode(node)) node.setData(payload);
       });
     },
-    [editor, nodeKey, canvasWidth]
+    [editor, nodeKey, canvasWidth, data.width]
   );
   const updateShapes = useCallback(
     (updater, options) => {
@@ -2965,8 +2990,13 @@ function DrawingCanvas({ nodeKey, data }) {
     "div",
     {
       ref: rootRef,
-      className: `zui-drawing-canvas ${width === "content" ? "is-content-width" : ""} ${isEditable ? "is-editable" : ""}`,
+      className: `zui-drawing-canvas ${WIDTH_CLASS[width]} ${isEditable ? "is-editable" : ""}`,
       tabIndex: isEditable ? 0 : void 0,
+      onFocus: () => editor.dispatchCommand(DRAWING_FOCUS_COMMAND, nodeKey),
+      onBlur: (e) => {
+        if (rootRef.current?.contains(e.relatedTarget)) return;
+        editor.dispatchCommand(DRAWING_FOCUS_COMMAND, null);
+      },
       children: [
         isEditable && /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ jsx9(
@@ -3214,7 +3244,7 @@ function expandSkeleton(skeleton) {
     version: 2,
     ...skeleton.canvasWidth !== void 0 ? { canvasWidth: skeleton.canvasWidth } : {},
     canvasHeight: skeleton.canvasHeight ?? Math.max(MIN_AUTO_CANVAS_HEIGHT, Math.ceil(bottom + CANVAS_MARGIN)),
-    ...skeleton.width === "content" ? { width: "content" } : {},
+    ...skeleton.width !== void 0 ? { width: skeleton.width } : {},
     shapes
   });
 }
@@ -3418,7 +3448,7 @@ function normalizeSkeleton(raw) {
     direction: value.direction === "down" ? "down" : "right",
     ...canvasWidth !== void 0 ? { canvasWidth } : {},
     ...canvasHeight !== void 0 ? { canvasHeight } : {},
-    ...value.width === "content" ? { width: "content" } : {},
+    ...isBlockWidth(value.width) ? { width: value.width } : {},
     boxes,
     connectors,
     texts
@@ -3551,8 +3581,8 @@ var DRAWING_SKELETON_JSON_SCHEMA = {
       description: "Canvas height in px. Omit to fit the content"
     },
     width: {
-      enum: ["content"],
-      description: 'Block width: "content" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor'
+      enum: ["full", "text", "content"],
+      description: 'Block width: "text" aligns the drawing with the text column (same as "full" unless the app sets a text measure); "content" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor'
     },
     boxes: {
       type: "array",
@@ -3788,10 +3818,12 @@ var DEFAULT_TABLE_SETTINGS = {
   width: "full",
   density: "comfortable"
 };
+var BLOCK_BLEED_PROPERTY = "--zui-text-editor-block-bleed";
 var OPTION_DECLARATIONS = {
   width: {
     full: {},
-    content: { width: "auto", "table-layout": "auto" }
+    content: { width: "auto", "table-layout": "auto", [BLOCK_BLEED_PROPERTY]: "0px" },
+    text: { [BLOCK_BLEED_PROPERTY]: "0px" }
   },
   density: {
     comfortable: {},
@@ -3806,6 +3838,7 @@ var OPTION_DECLARATIONS = {
   }
 };
 var SETTING_KEYS = Object.keys(OPTION_DECLARATIONS);
+var EXPLICIT_WIDTH_PROPERTY = "--zui-table-width";
 function parseStyle(style) {
   const declarations = /* @__PURE__ */ new Map();
   for (const part of style.split(";")) {
@@ -3848,14 +3881,22 @@ function $getTableSettings(table) {
     density: readSetting(declarations, "density")
   };
 }
-function $setTableSettings(table, settings) {
+function $setTableSettings(table, settings, options = {}) {
   const declarations = parseStyle(table.getStyle());
   for (const key of SETTING_KEYS) {
     const option = settings[key];
     if (option !== void 0) writeSetting(declarations, key, option);
   }
+  if (settings.width !== void 0) {
+    if (options.explicitWidth) declarations.set(EXPLICIT_WIDTH_PROPERTY, settings.width);
+    else declarations.delete(EXPLICIT_WIDTH_PROPERTY);
+  }
   table.setStyle(serializeStyle(declarations));
 }
+function $isTableWidthExplicit(table) {
+  const declarations = parseStyle(table.getStyle());
+  return declarations.get(EXPLICIT_WIDTH_PROPERTY) === readSetting(declarations, "width");
+}
 function $getTableWidth(table) {
   return $getTableSettings(table).width;
 }
@@ -3890,16 +3931,19 @@ function parseTableSettingsMarker(text) {
   const match = MARKER_REG_EXP.exec(text);
   if (!match) return null;
   const settings = {};
+  let recognised = false;
   for (const pair of match[1].split(";")) {
     const [key, value] = pair.split(":").map((s) => s.trim());
+    if (key !== "width" && key !== "density") continue;
+    recognised = true;
     if (key === "width" && isOption("width", value)) settings.width = value;
     if (key === "density" && isOption("density", value)) settings.density = value;
   }
-  return Object.keys(settings).length > 0 ? settings : null;
+  return recognised ? settings : null;
 }
-function formatTableSettingsMarker(settings) {
+function formatTableSettingsMarker(settings, options = {}) {
   const pairs = SETTING_KEYS.filter(
-    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key]
+    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key] || key === "width" && options.explicitWidth
   ).map((key) => `${key}: ${settings[key]}`);
   return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
 }
@@ -3932,7 +3976,9 @@ var TABLE = {
   export: (node) => {
     if (!$isTableNode2(node)) return null;
     const output = [];
-    const marker = formatTableSettingsMarker($getTableSettings(node));
+    const marker = formatTableSettingsMarker($getTableSettings(node), {
+      explicitWidth: $isTableWidthExplicit(node)
+    });
     if (marker) output.push(marker);
     for (const row of node.getChildren()) {
       if (!$isTableRowNode(row)) continue;
@@ -4001,7 +4047,7 @@ var TABLE = {
     } else {
       const markerSettings = $getMarkerSettings(previousSibling);
       if (markerSettings) {
-        $setTableSettings(table, markerSettings);
+        $setTableSettings(table, markerSettings, { explicitWidth: true });
         previousSibling?.remove();
       }
       parentNode.replace(table);
@@ -4016,14 +4062,14 @@ var editorTheme = {
   ltr: "text-left",
   rtl: "text-right",
   placeholder: "text-muted-foreground opacity-50",
-  paragraph: "mb-2",
+  paragraph: "zui-paragraph mb-2",
   heading: {
-    h1: "text-4xl font-bold mb-4",
-    h2: "text-3xl font-bold mb-3",
-    h3: "text-2xl font-bold mb-2",
-    h4: "text-xl font-bold mb-2",
-    h5: "text-lg font-bold mb-1",
-    h6: "text-base font-bold mb-1"
+    h1: "zui-heading zui-heading-1 text-4xl font-bold mb-4",
+    h2: "zui-heading zui-heading-2 text-3xl font-bold mb-3",
+    h3: "zui-heading zui-heading-3 text-2xl font-bold mb-2",
+    h4: "zui-heading zui-heading-4 text-xl font-bold mb-2",
+    h5: "zui-heading zui-heading-5 text-lg font-bold mb-1",
+    h6: "zui-heading zui-heading-6 text-base font-bold mb-1"
   },
   list: {
     listitem: "ml-8",
@@ -4033,8 +4079,8 @@ var editorTheme = {
       listitem: "ml-8"
     },
     checklist: "zui-checklist",
-    ol: "list-decimal ml-4",
-    ul: "list-disc ml-4"
+    ol: "zui-list zui-list-ordered list-decimal ml-4",
+    ul: "zui-list zui-list-unordered list-disc ml-4"
   },
   link: "text-primary underline hover:opacity-80 cursor-pointer",
   text: {
@@ -4047,7 +4093,7 @@ var editorTheme = {
     underline: "underline",
     underlineStrikethrough: "underline line-through"
   },
-  code: "bg-muted rounded-md p-4 font-mono text-sm block my-2 overflow-x-auto",
+  code: "zui-code bg-muted rounded-md p-4 font-mono text-sm block my-2 overflow-x-auto",
   codeHighlight: {
     atrule: "text-blue-500",
     attr: "text-yellow-500",
@@ -4080,7 +4126,7 @@ var editorTheme = {
     url: "text-blue-500",
     variable: "text-blue-500"
   },
-  quote: "border-l-4 border-border pl-4 italic",
+  quote: "zui-quote border-l-4 border-border pl-4 italic",
   frontmatter: "zui-frontmatter",
   table: "zui-table",
   tableCell: "zui-table-cell",
@@ -4090,10 +4136,8 @@ var editorTheme = {
   drawing: "zui-drawing"
 };
 
-// src/EditorRoot.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, DIAGRAM, CHECK_LIST, TABLE, ...TRANSFORMERS2];
-var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
+// src/editorContext.ts
+import { createContext, useContext } from "react";
 var EditorContext = createContext(null);
 function useEditorContext() {
   const ctx = useContext(EditorContext);
@@ -4104,6 +4148,12 @@ function useEditorContext() {
   }
   return ctx;
 }
+
+// src/EditorRoot.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, DIAGRAM, CHECK_LIST, TABLE, ...TRANSFORMERS2];
+var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
+var NO_DEFAULT_BLOCK_WIDTH = {};
 function onError(error) {
   console.error(error);
 }
@@ -4136,6 +4186,8 @@ function EditorRoot({
   className,
   mode = "edit-md",
   autoFocus = false,
+  measure,
+  defaultBlockWidth = NO_DEFAULT_BLOCK_WIDTH,
   children
 }) {
   const latestValueRef = useRef5(value ?? "");
@@ -4176,12 +4228,17 @@ function EditorRoot({
       readOnly,
       autoFocus,
       rawValue: value ?? "",
-      onRawChange: handleChange
+      onRawChange: handleChange,
+      defaultBlockWidth
     }),
-    [mode, readOnly, autoFocus, value, handleChange]
+    [mode, readOnly, autoFocus, value, handleChange, defaultBlockWidth]
   );
   const isRaw = mode === "edit-raw";
-  return /* @__PURE__ */ jsx11(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx11(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs9("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+  const rootStyle = useMemo2(
+    () => measure !== void 0 ? { "--zui-text-editor-measure": measure } : void 0,
+    [measure]
+  );
+  return /* @__PURE__ */ jsx11(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx11(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs9("div", { className: `zui-text-editor ${className ?? ""}`, style: rootStyle, children: [
     children,
     !isRaw && /* @__PURE__ */ jsxs9(Fragment3, { children: [
       /* @__PURE__ */ jsx11(
@@ -4355,8 +4412,9 @@ import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexica
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
 
 // src/useMarkdownEditor.ts
-import { useCallback as useCallback4, useEffect as useEffect10, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
 import {
+  $getNodeByKey as $getNodeByKey4,
   $getSelection as $getSelection4,
   $isRangeSelection as $isRangeSelection4,
   CAN_REDO_COMMAND,
@@ -4376,20 +4434,29 @@ var TRACKED_FORMATS = [
   "strikethrough",
   "code"
 ];
+function $readDrawingWidth(key) {
+  if (key === null) return null;
+  const node = $getNodeByKey4(key);
+  return $isDrawingNode(node) ? node.getData().width ?? "full" : null;
+}
 function useMarkdownEditor() {
   const [editor] = useLexicalComposerContext8();
+  const { defaultBlockWidth } = useEditorContext();
   const [activeFormats, setActiveFormats] = useState6(
     /* @__PURE__ */ new Set()
   );
   const [canUndo, setCanUndo] = useState6(false);
   const [canRedo, setCanRedo] = useState6(false);
   const [tableSettings, setTableSettingsState] = useState6(null);
+  const activeDrawingRef = useRef7(null);
+  const [drawingWidth, setDrawingWidth] = useState6(null);
   useEffect10(
     () => mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           const table = $getSelectedTable();
           setTableSettingsState(table ? $getTableSettings(table) : null);
+          setDrawingWidth($readDrawingWidth(activeDrawingRef.current));
           const selection = $getSelection4();
           if (!$isRangeSelection4(selection)) {
             setActiveFormats(/* @__PURE__ */ new Set());
@@ -4402,6 +4469,15 @@ function useMarkdownEditor() {
           setActiveFormats(next);
         });
       }),
+      editor.registerCommand(
+        DRAWING_FOCUS_COMMAND,
+        (key) => {
+          activeDrawingRef.current = key;
+          setDrawingWidth(editor.getEditorState().read(() => $readDrawingWidth(key)));
+          return false;
+        },
+        COMMAND_PRIORITY_LOW2
+      ),
       editor.registerCommand(
         CAN_UNDO_COMMAND,
         (payload) => {
@@ -4428,20 +4504,36 @@ function useMarkdownEditor() {
     [editor]
   );
   const insertTable = useCallback4(
-    ({ rows = 3, columns = 3 } = {}) => {
+    ({
+      rows = 3,
+      columns = 3,
+      width = defaultBlockWidth.table
+    } = {}) => {
+      const before = editor.getEditorState().read(() => $getSelectedTable()?.getKey());
       editor.dispatchCommand(INSERT_TABLE_COMMAND, {
         columns: String(columns),
         rows: String(rows),
         includeHeaders: { rows: true, columns: false }
       });
+      if (width === void 0) return;
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table && table.getKey() !== before) {
+          $setTableSettings(table, { width }, { explicitWidth: true });
+        }
+      });
     },
-    [editor]
+    [editor, defaultBlockWidth.table]
+  );
+  const insertDrawing = useCallback4(
+    ({ width = defaultBlockWidth.drawing } = {}) => {
+      editor.update(() => {
+        const data = width === void 0 ? EMPTY_DRAWING : { version: 2, canvasHeight: EMPTY_DRAWING.canvasHeight, width, shapes: [] };
+        $insertNodeToNearestRoot($createDrawingNode(serializeDrawingData(data)));
+      });
+    },
+    [editor, defaultBlockWidth.drawing]
   );
-  const insertDrawing = useCallback4(() => {
-    editor.update(() => {
-      $insertNodeToNearestRoot($createDrawingNode());
-    });
-  }, [editor]);
   const updateTableSettings = useCallback4(
     (settings) => {
       editor.update(() => {
@@ -4459,6 +4551,22 @@ function useMarkdownEditor() {
     (density) => updateTableSettings({ density }),
     [updateTableSettings]
   );
+  const setBlockWidth = useCallback4(
+    (width) => {
+      const key = activeDrawingRef.current;
+      if (key === null) {
+        updateTableSettings({ width });
+        return;
+      }
+      editor.update(() => {
+        const node = $getNodeByKey4(key);
+        if (!$isDrawingNode(node)) return;
+        const { width: _previous, ...data } = node.getData();
+        node.setData(width === "full" ? data : { ...data, width });
+      });
+    },
+    [editor, updateTableSettings]
+  );
   const undo = useCallback4(() => {
     editor.dispatchCommand(UNDO_COMMAND, void 0);
   }, [editor]);
@@ -4471,6 +4579,8 @@ function useMarkdownEditor() {
     toggleFormat,
     insertTable,
     insertDrawing,
+    blockWidth: drawingWidth ?? tableSettings?.width ?? null,
+    setBlockWidth,
     tableWidth: tableSettings?.width ?? null,
     setTableWidth,
     tableDensity: tableSettings?.density ?? null,
@@ -4641,14 +4751,18 @@ function Icon3({ children }) {
 function TableSettingsPlugin() {
   const [editor] = useLexicalComposerContext9();
   const isEditable = useLexicalEditable2();
-  const { tableWidth, setTableWidth, tableDensity, setTableDensity } = useMarkdownEditor();
   const [anchor, setAnchor] = useState7(null);
+  const [settings, setSettings] = useState7(null);
   const sync = useCallback5(() => {
-    const tableKey = editor.getEditorState().read(() => $getSelectedTable()?.getKey());
-    const element = tableKey ? editor.getElementByKey(tableKey) : null;
+    const table = editor.getEditorState().read(() => {
+      const node = $getSelectedTable();
+      return node ? { key: node.getKey(), settings: $getTableSettings(node) } : null;
+    });
+    const element = table ? editor.getElementByKey(table.key) : null;
     const main = editor.getRootElement()?.parentElement;
-    if (!element || !main) {
+    if (!table || !element || !main) {
       setAnchor(null);
+      setSettings(null);
       return;
     }
     const rect = element.getBoundingClientRect();
@@ -4657,6 +4771,7 @@ function TableSettingsPlugin() {
       top: rect.top - mainRect.top,
       right: mainRect.right - rect.right + 8
     });
+    setSettings(table.settings);
   }, [editor]);
   useEffect11(() => {
     sync();
@@ -4669,7 +4784,16 @@ function TableSettingsPlugin() {
       observer?.disconnect();
     };
   }, [editor, sync]);
-  if (!isEditable || !anchor || !tableWidth || !tableDensity) return null;
+  const update = useCallback5(
+    (next) => {
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table) $setTableSettings(table, next);
+      });
+    },
+    [editor]
+  );
+  if (!isEditable || !anchor || !settings) return null;
   return /* @__PURE__ */ jsxs11(
     "div",
     {
@@ -4682,8 +4806,8 @@ function TableSettingsPlugin() {
           ToolbarButton,
           {
             label,
-            active: tableWidth === width,
-            onClick: () => setTableWidth(width),
+            active: settings.width === width,
+            onClick: () => update({ width }),
             children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
           },
           width
@@ -4693,8 +4817,8 @@ function TableSettingsPlugin() {
           ToolbarButton,
           {
             label,
-            active: tableDensity === density,
-            onClick: () => setTableDensity(density),
+            active: settings.density === density,
+            onClick: () => update({ density }),
             children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
           },
           density
@@ -4923,8 +5047,8 @@ var DRAWING_DATA_JSON_SCHEMA = {
       description: "Optional logical canvas width in pixels. When set, the drawing is scaled down to fit narrower layouts (SVG viewBox) so coordinates can assume this width. When omitted the canvas is fluid and coordinates are CSS pixels."
     },
     width: {
-      enum: ["full", "content"],
-      description: `Block width: "full" (default, omit it) spans the editor; "content" fits the shapes' horizontal extent and left-aligns with the text`
+      enum: ["full", "text", "content"],
+      description: `Block width: "full" (default, omit it) spans the editor; "text" aligns the block with the text column (same as "full" unless the app sets a text measure); "content" fits the shapes' horizontal extent and left-aligns with the text`
     },
     shapes: {
       type: "array",
@@ -5067,9 +5191,11 @@ export {
   $getTableWidth,
   $isDrawingNode,
   $isFrontmatterNode,
+  $isTableWidthExplicit,
   $setTableDensity,
   $setTableSettings,
   $setTableWidth,
+  BLOCK_WIDTHS,
   BOX_DEFINITIONS,
   BOX_TYPES,
   COLOR_PRESETS,
@@ -5105,6 +5231,7 @@ export {
   findBoxAt,
   fixedPointFor,
   formatTableSettingsMarker,
+  isBlockWidth,
   isDrawingSkeleton,
   makeBinding,
   normalizeDrawingData,

package/dist/styles.css

@@ -11,21 +11,62 @@
   min-height: 100%;
 }
 
+/*
+ * Text measure (opt in). `--zui-text-editor-measure` — a CSS length, unset
+ * by default — caps the text column. The pane's gutter grows from the base
+ * 2rem to centre that column, and `--zui-text-editor-bleed` is how far a
+ * full-width block extends past the column on each side. With the measure
+ * unset both resolve to the previous layout (2rem gutter, no bleed).
+ *
+ * The pane is a container so `cqw` measures *its* width in every
+ * descendant, whatever the descendant's own width; the outline sidebar is
+ * a sibling, so full-width blocks stop short of it.
+ */
 .zui-text-editor-main {
   position: relative;
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
+  container-type: inline-size;
+  --zui-text-editor-gutter: max(
+    2rem,
+    calc((100cqw - var(--zui-text-editor-measure, 100cqw)) / 2)
+  );
+  --zui-text-editor-bleed: calc(var(--zui-text-editor-gutter) - 2rem);
 }
 
 .zui-text-editor-content {
   flex: 1;
   min-height: 100%;
-  padding: 1.5rem 2rem;
+  padding: 1.5rem var(--zui-text-editor-gutter, 2rem);
   outline: none;
 }
 
+/*
+ * Block width. Every top-level block sits in the text column and may bleed
+ * past it by `--zui-text-editor-block-bleed` (0 unless set). Tables and
+ * drawings default it to the pane's bleed (`full`); their `text` and
+ * `content` settings pin it to 0 — as an inline style on the table (see
+ * tableSettings.ts) and a class on the drawing canvas. Zero-specificity
+ * selectors, so one class rule overrides any block kind, e.g.
+ * `.zui-code { --zui-text-editor-block-bleed: var(--zui-text-editor-bleed) }`.
+ */
+:where(.zui-text-editor-content > *) {
+  margin-inline: calc(-1 * var(--zui-text-editor-block-bleed, 0px));
+}
+
+:where(.zui-table, .zui-drawing) {
+  --zui-text-editor-block-bleed: var(--zui-text-editor-bleed, 0px);
+}
+
+:where(
+  .zui-drawing:has(> .is-text-width),
+  .zui-drawing:has(> .is-content-width)
+) {
+  --zui-text-editor-block-bleed: 0px;
+}
+
 /* Outline (table of contents) sidebar */
 .zui-text-editor-outline {
   position: sticky;
@@ -115,7 +156,8 @@
 
 .zui-text-editor-fold {
   position: absolute;
-  left: 0.45rem;
+  /* Just left of the text column; 0.45rem with the default gutter */
+  left: calc(var(--zui-text-editor-gutter, 2rem) - 1.55rem);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -155,7 +197,7 @@
 .zui-text-editor-placeholder {
   position: absolute;
   top: 1.5rem;
-  left: 2rem;
+  left: var(--zui-text-editor-gutter, 2rem);
   pointer-events: none;
   user-select: none;
 }
@@ -209,7 +251,7 @@
 .zui-frontmatter {
   display: block;
   white-space: pre-wrap;
-  margin: 0 0 1rem;
+  margin-block: 0 1rem;
   padding: 0.75rem 1rem;
   border: 1px solid currentColor;
   border-radius: 0.375rem;
@@ -272,11 +314,15 @@
   background: color-mix(in srgb, currentColor 15%, transparent);
 }
 
-/* Tables — artifact-style: rounded outer border, subtle header, tight rules */
+/*
+ * Tables — artifact-style: rounded outer border, subtle header, tight rules.
+ * Width follows the block bleed above (inline margins come from the shared
+ * block rule); a `content` table sets `width: auto` inline instead.
+ */
 .zui-table {
-  width: 100%;
-  max-width: 100%;
-  margin: 1rem 0;
+  width: calc(100% + 2 * var(--zui-text-editor-block-bleed, 0px));
+  max-width: calc(100% + 2 * var(--zui-text-editor-block-bleed, 0px));
+  margin-block: 1rem;
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
@@ -347,7 +393,7 @@
 
 /* Drawing canvas */
 .zui-drawing {
-  margin: 1rem 0;
+  margin-block: 1rem;
 }
 
 .zui-drawing-canvas {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",