@zuilib/text-editor 0.11.0 → 0.12.0

package/dist/table-grid-D70tNhp2.d.ts

@@ -0,0 +1,459 @@
+import { ReactElement, ReactNode } from 'react';
+import { Klass, LexicalNode, EditorThemeClasses, LexicalEditor } from 'lexical';
+import { N as NewBlockWidths, D as DrawingStyle, T as TransformersInput, E as EditorPreset, a as BlockWidth } from './presets-BtNPH0pa.js';
+import { TableNode, TableCellNode, TableRowNode } from '@lexical/table';
+
+/**
+ * Docked, collapsible table-of-contents sidebar. Lists the document's
+ * headings (live), scrolls to a heading on click, and highlights the section
+ * the viewport is currently in. Pure UI — nothing is added to the document.
+ */
+declare function OutlinePlugin(): ReactElement;
+
+/**
+ * Every string the editor chrome shows or announces. Pass a deep partial as
+ * the `labels` prop to translate; anything left out keeps its English
+ * default. Document content is never touched.
+ */
+type EditorLabels = Readonly<{
+    /** Empty-state hint of the editable surface (the `placeholder` prop wins when given) */
+    placeholder: string;
+    toolbar: Readonly<{
+        bold: string;
+        italic: string;
+        strikethrough: string;
+        code: string;
+        link: string;
+        removeLink: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        paragraph: string;
+        bulletList: string;
+        numberedList: string;
+        checklist: string;
+        quote: string;
+        insertTable: string;
+        insertDrawing: string;
+        undo: string;
+        redo: string;
+        /** `aria-label` of the link bubble's URL input */
+        linkUrl: string;
+        /** Placeholder of the link bubble's URL input */
+        linkUrlPlaceholder: string;
+        linkApply: string;
+    }>;
+    /** Character counter: `count(12, 200)` renders "12 / 200" */
+    count: (length: number, max: number | undefined) => string;
+    /** Announced (not shown) by the counter when the document passes `maxLength` */
+    limitExceeded: (max: number) => string;
+    /** Announced by the counter when the document is back within `maxLength` */
+    limitRestored: (max: number) => string;
+    outline: Readonly<{
+        show: string;
+        hide: string;
+        /** `aria-label` of the list of headings */
+        title: string;
+        empty: string;
+        untitled: string;
+    }>;
+    collapsibleHeadings: Readonly<{
+        collapse: string;
+        expand: string;
+        collapsed: string;
+        expanded: string;
+    }>;
+    table: Readonly<{
+        settings: string;
+        rowInserted: string;
+        rowDeleted: string;
+        columnInserted: string;
+        columnDeleted: string;
+        addRow: string;
+        addColumn: string;
+        insertRowBefore: (row: number) => string;
+        insertColumnBefore: (column: number) => string;
+        deleteRow: (row: number) => string;
+        deleteColumn: (column: number) => string;
+    }>;
+    /** The three layout presets shared by tables and drawings */
+    layout: Readonly<{
+        compact: string;
+        comfortable: string;
+        full: string;
+    }>;
+    drawing: Readonly<{
+        /** `aria-label` of a canvas without a title */
+        canvas: string;
+        tools: string;
+        select: string;
+        rect: string;
+        ellipse: string;
+        diamond: string;
+        arrow: string;
+        line: string;
+        text: string;
+        note: string;
+        cylinder: string;
+        cloud: string;
+        queue: string;
+        actor: string;
+        moreShapes: string;
+        copyMermaid: string;
+        copiedMermaid: string;
+        /** `aria-label` of the swatch group */
+        colors: string;
+        color: (name: string) => string;
+        connectorRouting: string;
+        straight: string;
+        elbow: string;
+        arrowDirection: string;
+        oneWay: string;
+        twoWay: string;
+        deleteShape: string;
+        deleteShapes: (count: number) => string;
+        resize: string;
+        waypoint: string;
+        elbowHandle: string;
+        labelPlaceholder: string;
+        textPlaceholder: string;
+        footerPlaceholder: string;
+    }>;
+}>;
+/** Recursive partial that leaves functions whole */
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends (...args: never[]) => unknown ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+type EditorLabelsInput = DeepPartial<EditorLabels>;
+declare const DEFAULT_LABELS: EditorLabels;
+/** Fills a partial labels object with the English defaults, group by group. */
+declare function resolveLabels(labels?: EditorLabelsInput): EditorLabels;
+/** The resolved labels of the nearest editor; English defaults outside one. */
+declare function useLabels(): EditorLabels;
+
+type EditorMode = 'edit-raw' | 'edit-rich' | 'view';
+/** Attributes forwarded to the editable surface for form integration */
+type EditorFieldProps = Readonly<{
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+    'aria-required'?: boolean | 'true' | 'false';
+}>;
+type EditorContextValue = Readonly<{
+    mode: EditorMode;
+    readOnly: boolean;
+    autoFocus: boolean;
+    /** Current raw markdown (for the `edit-raw` textarea) */
+    rawValue: string;
+    onRawChange: (value: string) => void;
+    /** Width written when a new table / drawing is inserted */
+    newBlockWidth: NewBlockWidths;
+    /** How drawing canvases render their shapes */
+    drawingStyle: DrawingStyle;
+    /** Resolved chrome strings */
+    labels: EditorLabels;
+    /** Maximum plain-text length, when enforced */
+    maxLength?: number;
+    /** Form attributes for the editable surface */
+    field: EditorFieldProps;
+}>;
+declare function useEditorContext(): EditorContextValue;
+
+type EditorRootProps = Readonly<{
+    value?: string;
+    /** Initial markdown of an uncontrolled editor (no `value`) */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Milliseconds to wait after the last edit before `onValueChange` fires; `0`
+     * (default) fires on every edit. The editor's own state is never delayed.
+     */
+    debounceMs?: number;
+    readOnly?: boolean;
+    className?: string;
+    mode?: EditorMode;
+    autoFocus?: boolean;
+    /**
+     * 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 cap, every block spans the
+     * pane.
+     */
+    maxTextWidth?: 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`.
+     */
+    newBlockWidth?: NewBlockWidths;
+    /**
+     * `clean` (default) draws crisp geometry; `ink` draws every shape as a
+     * single pen stroke with pressure and slightly misregistered fills, and
+     * sets the casual face (Recursive, if the host loads it).
+     */
+    drawingStyle?: DrawingStyle;
+    /** Called when Lexical throws inside an update; defaults to `console.error` */
+    onError?: (error: Error) => void;
+    /** Extra Lexical node classes, appended to the built-ins. Read on mount only. */
+    nodes?: ReadonlyArray<Klass<LexicalNode>>;
+    /**
+     * Extra markdown transformers. An array goes before the built-ins so it
+     * claims its syntax first; a function receives the built-ins and returns
+     * the whole list. Read on mount only.
+     */
+    transformers?: TransformersInput;
+    /** Class names for the rendered nodes, merged over the built-ins (one level deep). Read on mount only. */
+    nodeClassNames?: EditorThemeClasses;
+    /** The Lexical editor instance, once it exists */
+    onEditorReady?: (editor: LexicalEditor) => void;
+    /** Chrome strings; a deep partial over the English defaults */
+    labels?: EditorLabelsInput;
+    /**
+     * Maximum length of the document's plain text (characters). Typing or
+     * pasting past it is rejected at the caret; a controlled `value` is never
+     * trimmed.
+     */
+    maxLength?: number;
+    /** Plain-text length after every change (and once on mount) */
+    onCharacterCountChange?: (length: number) => void;
+    /** Form attributes forwarded to the editable surface */
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: EditorFieldProps['aria-invalid'];
+    'aria-required'?: EditorFieldProps['aria-required'];
+    /** Wired by the entry point (`.` adds drawings); hosts do not set it */
+    preset?: EditorPreset;
+    children: ReactNode;
+}>;
+
+type EditorContentProps = Readonly<{
+    /** Empty-state hint; defaults to `labels.placeholder` */
+    placeholder?: string;
+    /** Allow collapsing sections under their headings (default true) */
+    collapsible?: boolean;
+    /** Show the character counter below the surface (needs `maxLength` for the "/ max" part) */
+    showCharacterCount?: boolean;
+    /** Sidebars docked next to the content, e.g. `<MarkdownEditor.Outline />` */
+    children?: ReactNode;
+}>;
+/**
+ * The editable surface. Renders a plain textarea in `edit-raw` mode and the
+ * Lexical rich-text surface otherwise. Form attributes given to the root
+ * (`id`, `name`, `aria-*`) land on whichever element is editable.
+ */
+declare function EditorContent({ placeholder, collapsible, showCharacterCount, children, }: EditorContentProps): ReactElement;
+
+/**
+ * Plain-text length of the document, with the limit when `maxLength` is
+ * set. In `edit-raw` mode it counts the markdown itself. The visible count
+ * is not a live region (it would be read on every keystroke); a hidden
+ * status announces only when the document passes the limit or comes back
+ * within it.
+ */
+declare function CharacterCount({ className }?: {
+    className?: string;
+}): ReactElement;
+
+type ToolbarProps = Readonly<{
+    children?: ReactNode;
+    className?: string;
+    /** `aria-label` of the toolbar; defaults to nothing (one toolbar per editor) */
+    label?: string;
+}>;
+/** Toolbar container. Renders the default items when given no children. */
+declare function Toolbar({ children, className, label }: ToolbarProps): ReactElement;
+declare function ToolbarDivider(): ReactElement;
+type ToolbarButtonProps = Readonly<{
+    label: string;
+    onClick: () => void;
+    /** Icon content: an SVG, emoji, or text. 16px SVGs match the built-ins. */
+    children: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+}>;
+/**
+ * Button styled like the built-in toolbar buttons. Prevents focus from
+ * leaving the editor on click so the selection is preserved, and takes part
+ * in the toolbar's arrow-key navigation.
+ */
+declare function ToolbarButton({ label, onClick, children, active, disabled, className, }: ToolbarButtonProps): ReactElement;
+/** Bold / italic / strikethrough / inline-code / link buttons */
+declare function FormatButtons(): ReactElement;
+/** Heading 1-3 / bullet, numbered and check list / quote buttons. Pressing the active one returns to a paragraph. */
+declare function BlockButtons(): ReactElement;
+/** Insert-table / insert-drawing buttons. `drawing={false}` hides the drawing button (the `./core` entry does). */
+declare function InsertButtons({ drawing }?: {
+    drawing?: boolean;
+}): ReactElement;
+/** Undo / redo buttons */
+declare function HistoryButtons(): ReactElement;
+
+/** Default toolbar groups, handed to a `toolbar` render function */
+type ToolbarItems = Readonly<{
+    format: ReactElement;
+    block: ReactElement;
+    insert: ReactElement;
+    history: ReactElement;
+}>;
+type MarkdownEditorProps = Omit<EditorRootProps, 'children' | 'preset'> & Readonly<{
+    placeholder?: string;
+    /**
+     * Toolbar in edit-rich mode (default true). Pass a function to customise
+     * it: it receives the default groups and returns the toolbar to render.
+     */
+    toolbar?: boolean | ((items: ToolbarItems) => ReactNode);
+    /** Show a table-of-contents sidebar listing the document's headings */
+    outline?: boolean;
+    /** Allow collapsing sections under their headings (default true) */
+    collapsible?: boolean;
+    /** Show the character counter under the document */
+    showCharacterCount?: boolean;
+    /** Extra plugins and UI rendered under the root, next to the content */
+    children?: ReactNode;
+}>;
+/**
+ * Toolbar that only shows while the document is editable in `edit-rich` mode.
+ * Used by `MarkdownEditor` and available as `MarkdownEditor.Toolbar` for
+ * compound layouts.
+ */
+declare function EditorToolbar({ children, className, }: Readonly<{
+    children?: ReactNode;
+    className?: string;
+}>): ReactElement | null;
+/**
+ * Builds a `MarkdownEditor` (and its compound parts) around a preset. The
+ * default entry uses the preset with drawings, `./core` the one without;
+ * both share every other part.
+ */
+declare function createMarkdownEditor(preset?: EditorPreset): {
+    ({ placeholder, toolbar, outline, collapsible, showCharacterCount, children, ...rootProps }: MarkdownEditorProps): ReactElement;
+    Root: (props: Omit<EditorRootProps, "preset">) => ReactElement;
+    Content: typeof EditorContent;
+    Toolbar: typeof EditorToolbar;
+    ToolbarButton: typeof ToolbarButton;
+    ToolbarDivider: typeof ToolbarDivider;
+    FormatButtons: typeof FormatButtons;
+    BlockButtons: typeof BlockButtons;
+    InsertButtons: typeof InsertButtons;
+    HistoryButtons: typeof HistoryButtons;
+    Outline: typeof OutlinePlugin;
+    CharacterCount: typeof CharacterCount;
+};
+
+/** Cell padding / font size preset */
+type TableDensity = 'compact' | 'comfortable' | 'spacious';
+type TableSettings = Readonly<{
+    width: BlockWidth;
+    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>, 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;
+declare function $setTableDensity(table: TableNode, density: TableDensity): void;
+/** The table containing the current selection (caret or cell range), if any */
+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.
+ * 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.
+ * With `explicitWidth` the width is listed even when it is `full`.
+ */
+declare function formatTableSettingsMarker(settings: TableSettings, options?: TableSettingsOptions): string | null;
+
+/**
+ * Row and column operations for GFM tables. Markdown tables have no merged
+ * cells, every row has the same number of cells and there is exactly one
+ * header row (the first), so these helpers work on plain indices and keep
+ * that shape: a row can't be inserted above the header, deleting the
+ * header promotes the row below it, and new cells in the header row are
+ * header cells.
+ */
+/** Where the selection sits in its table */
+type TableCellPosition = Readonly<{
+    /** Row index of the caret (or of the anchor cell of a cell range) */
+    row: number;
+    /** Column index of that cell */
+    column: number;
+    /** Number of rows in the table */
+    rows: number;
+    /** Number of columns in the table */
+    columns: number;
+    /** Whether the first row is a header row */
+    hasHeader: boolean;
+}>;
+/** The cell containing the selection (caret or the anchor of a cell range) */
+declare function $getSelectedTableCell(): TableCellNode | null;
+/** Where the selection sits in its table, or null outside tables */
+declare function $getTableCellPosition(): TableCellPosition | null;
+/**
+ * The row boundaries a new row may be inserted at: `0..rows`, minus `0`
+ * when the first row is a header (a table's header is always its first row).
+ */
+declare function insertableRowIndices(position: Pick<TableCellPosition, 'rows' | 'hasHeader'>): number[];
+/** A row can be removed as long as one row stays */
+declare function canDeleteRow(position: Pick<TableCellPosition, 'rows'>): boolean;
+/**
+ * Insert an empty row so that it becomes row `index` (`0` = first, `rows`
+ * = last). Column header state is copied from the row above; the header
+ * row itself is never displaced, so `index` is clamped to `1` when the
+ * table has a header. The caret moves into the new row, at `column`.
+ */
+declare function $insertTableRowAt(table: TableNode, index: number, column?: number): TableRowNode;
+/**
+ * Remove row `index`. No-op on a single-row table (see `canDeleteRow`).
+ * Removing the header row makes the next row the header so the markdown
+ * keeps its divider. The caret moves to the row that takes the removed
+ * row's place (or the last row), at `column`.
+ */
+declare function $deleteTableRowAt(table: TableNode, index: number, column?: number): boolean;
+/** Insert a row next to the selection's row. Returns the new row, or null outside tables. */
+declare function $insertTableRowNear(table: TableNode, position: 'above' | 'below'): TableRowNode | null;
+/** Remove the selection's row. Returns false when nothing was removed. */
+declare function $deleteTableRowNear(table: TableNode): boolean;
+/** The column boundaries a new column may be inserted at: `0..columns` */
+declare function insertableColumnIndices(position: Pick<TableCellPosition, 'columns'>): number[];
+/** A column can be removed as long as one column stays */
+declare function canDeleteColumn(position: Pick<TableCellPosition, 'columns'>): boolean;
+/**
+ * Insert an empty column so that it becomes column `index` (`0` = first,
+ * `columns` = last). Cells in the header row are header cells. The caret
+ * moves into the new column, at `row`.
+ */
+declare function $insertTableColumnAt(table: TableNode, index: number, row?: number): void;
+/**
+ * Remove column `index`. No-op on a single-column table (see
+ * `canDeleteColumn`). The caret moves to the column that takes the removed
+ * column's place (or the last column), at `row`.
+ */
+declare function $deleteTableColumnAt(table: TableNode, index: number, row?: number): boolean;
+/** Insert a column next to the selection's column; no-op outside tables. */
+declare function $insertTableColumnNear(table: TableNode, position: 'before' | 'after'): boolean;
+/** Remove the selection's column. Returns false when nothing was removed. */
+declare function $deleteTableColumnNear(table: TableNode): boolean;
+
+export { $deleteTableColumnAt as $, $deleteTableRowAt as A, BlockButtons as B, CharacterCount as C, DEFAULT_LABELS as D, type EditorRootProps as E, FormatButtons as F, $deleteTableRowNear as G, HistoryButtons as H, InsertButtons as I, $getSelectedTable as J, $getSelectedTableCell as K, $getTableCellPosition as L, type MarkdownEditorProps as M, $getTableDensity as N, OutlinePlugin as O, $getTableSettings as P, $getTableWidth as Q, $insertTableColumnAt as R, $insertTableColumnNear as S, ToolbarButton as T, $insertTableRowAt as U, $insertTableRowNear as V, $isTableWidthExplicit as W, $setTableDensity as X, $setTableSettings as Y, $setTableWidth as Z, createMarkdownEditor as _, EditorContent as a, ToolbarDivider as b, DEFAULT_TABLE_SETTINGS as c, type DeepPartial as d, type EditorContentProps as e, type EditorFieldProps as f, type EditorLabels as g, type EditorLabelsInput as h, type EditorMode as i, TABLE_WIDTH_MARKER as j, type TableCellPosition as k, type TableDensity as l, type TableSettings as m, type TableSettingsOptions as n, Toolbar as o, type ToolbarItems as p, canDeleteColumn as q, canDeleteRow as r, formatTableSettingsMarker as s, insertableColumnIndices as t, insertableRowIndices as u, parseTableSettingsMarker as v, resolveLabels as w, useEditorContext as x, useLabels as y, $deleteTableColumnNear as z };

package/package.json

@@ -1,65 +1,104 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.11.0",
-  "description": "ZUI \u2014 A markdown editor component wrapping Lexical",
+  "version": "0.12.0",
+  "description": "ZUI — Markdown editor with tables, drawings, code blocks, comments and mentions",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/suppress-global-highlighter.*"
   ],
   "files": [
     "dist",
     "DRAWING_FORMAT.md",
     "CHANGELOG.md"
   ],
-  "scripts": {
-    "build": "tsup",
-    "test": "node tests/roundtrip.mjs && node --test tests/*.test.mjs"
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "import": "./dist/markdown.js"
+    },
+    "./lexical": {
+      "types": "./dist/lexical.d.ts",
+      "import": "./dist/lexical.js"
+    },
+    "./drawing": {
+      "types": "./dist/drawing.d.ts",
+      "import": "./dist/drawing.js"
+    },
+    "./mentions": {
+      "types": "./dist/mentions.d.ts",
+      "import": "./dist/mentions.js"
+    },
+    "./comments": {
+      "types": "./dist/comments.d.ts",
+      "import": "./dist/comments.js"
+    },
+    "./images": {
+      "types": "./dist/images.d.ts",
+      "import": "./dist/images.js"
+    },
+    "./paste": {
+      "types": "./dist/paste.d.ts",
+      "import": "./dist/paste.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
+    "@lexical/clipboard": "^0.35.0",
     "@lexical/code": "^0.35.0",
+    "@lexical/html": "^0.35.0",
     "@lexical/link": "^0.35.0",
     "@lexical/list": "^0.35.0",
+    "@lexical/mark": "^0.35.0",
     "@lexical/markdown": "^0.35.0",
     "@lexical/react": "^0.35.0",
     "@lexical/rich-text": "^0.35.0",
+    "@lexical/selection": "^0.35.0",
     "@lexical/table": "^0.35.0",
     "@lexical/utils": "^0.35.0",
-    "@zuilib/tokens": "^0.0.1",
+    "@zuilib/tokens": "^0.2.0",
     "lexical": "^0.35.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4"
   },
   "peerDependenciesMeta": {
     "@zuilib/tokens": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@lexical/clipboard": "^0.35.0",
     "@lexical/code": "^0.35.0",
     "@lexical/headless": "0.35.0",
+    "@lexical/html": "^0.35.0",
     "@lexical/link": "^0.35.0",
     "@lexical/list": "^0.35.0",
+    "@lexical/mark": "^0.35.0",
     "@lexical/markdown": "^0.35.0",
     "@lexical/react": "^0.35.0",
     "@lexical/rich-text": "^0.35.0",
+    "@lexical/selection": "^0.35.0",
     "@lexical/table": "^0.35.0",
     "@lexical/utils": "^0.35.0",
     "@types/react": "^18.0.0 || ^19.0.0",
     "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.0.1",
     "lexical": "^0.35.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@zuilib/tokens": "workspace:^"
+    "@zuilib/tokens": "^0.2.0"
   },
   "keywords": [
     "lexical",
@@ -69,5 +108,11 @@
     "design-system",
     "react",
     "typescript"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsup",
+    "pretest": "npm run build",
+    "test": "node --test tests/*.test.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
+}

package/dist/index.css

@@ -1,79 +0,0 @@
-/* src/styles.css */
-.zui-text-editor {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-}
-.zui-text-editor-content {
-  min-height: 100%;
-  padding: 1.5rem 2rem;
-  outline: none;
-}
-.zui-text-editor-placeholder {
-  position: absolute;
-  top: 1.5rem;
-  left: 2rem;
-  pointer-events: none;
-  user-select: none;
-}
-.zui-checklist {
-  list-style: none;
-  margin-left: 0;
-  padding-left: 0;
-}
-.zui-checklist li[role=checkbox] {
-  position: relative;
-  padding-left: 1.75rem;
-  margin-left: 0;
-  cursor: pointer;
-  list-style: none;
-}
-.zui-checklist li[role=checkbox]::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0.25em;
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid currentColor;
-  border-radius: 0.2rem;
-  opacity: 0.5;
-  background: transparent;
-}
-.zui-checklist li[role=checkbox][aria-checked=true]::before {
-  background: currentColor;
-  opacity: 0.5;
-}
-.zui-checklist li[role=checkbox][aria-checked=true]::after {
-  content: "";
-  position: absolute;
-  left: 0.3rem;
-  top: 0.35em;
-  width: 0.4rem;
-  height: 0.7rem;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-.zui-text-editor-textarea {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  padding: 1.5rem 2rem;
-  outline: none;
-  resize: none;
-  background: transparent;
-  color: inherit;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    "SF Mono",
-    Menlo,
-    Consolas,
-    "Liberation Mono",
-    monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  border: none;
-}