creo-edit 0.1.0

package/dist/plugins/styles.css

@@ -0,0 +1,233 @@
+/* ---------------------------------------------------------------------------
+   Default stylesheet for first-party creo-edit plugins.
+
+   This file ships with the package but is NOT auto-loaded — consumers
+   import it explicitly:
+
+     import "creo-edit/dist/plugins/styles.css";
+
+   …or copy these rules into their own stylesheet to customize. The plugin
+   code only sets the minimum styles required for layout/positioning;
+   appearance is fully overridable here.
+
+   Class reference:
+     .creo-slash, .creo-slash-item, .creo-slash-item.is-active,
+     .creo-slash-item-title, .creo-slash-item-desc, .creo-slash-empty
+     .ce-decorations
+     .ce-deco, .ce-deco-{plugin-id}, .ce-deco-layer-{layer}
+     .ce-drag-btn, .ce-drag-btn.is-visible, .ce-drag-ghost,
+     .ce-drag-indicator
+     .ce-add-block-btn, .ce-add-block-btn.is-visible
+   --------------------------------------------------------------------------- */
+
+/* ============= Slash menu ============= */
+.creo-slash {
+  min-width: 240px;
+  max-height: 320px;
+  overflow-y: auto;
+  background: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  padding: 4px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 14px;
+  color: #1a1a1a;
+}
+.creo-slash-item {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.creo-slash-item.is-active {
+  background: #eef4ff;
+}
+.creo-slash-item-title {
+  font-weight: 500;
+}
+.creo-slash-item-desc {
+  color: #666;
+  font-size: 12px;
+}
+.creo-slash-empty {
+  padding: 8px;
+  color: #888;
+}
+
+/* ============= Decorations layer ============= */
+.ce-decorations {
+  /* Functional positioning is set by the manager; nothing else needed. */
+}
+
+/* ============= Drag handle ============= */
+.ce-drag-btn {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: #aaa;
+  font-size: 16px;
+  user-select: none;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+.ce-drag-btn.is-visible {
+  opacity: 1;
+}
+.ce-drag-btn:hover {
+  color: #555;
+}
+.ce-drag-ghost {
+  opacity: 0.85;
+  background: white;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  border-radius: 4px;
+  transform: rotate(-1deg);
+  cursor: grabbing;
+}
+.ce-drag-indicator {
+  height: 3px;
+  background: #3b82f6;
+  border-radius: 2px;
+  box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
+}
+.ce-drag-indicator.is-vertical {
+  /* When the indicator marks a side-drop (left/right) the manager sets
+     `width` empty and `height` to the block height; we just need a fixed
+     bar width to make the line visible. */
+  width: 3px;
+  height: auto;
+}
+
+/* ============= Date marker (atomic block) =============
+   Slim one-line non-editable separator block. Used by journal-style
+   layouts where the user writes editable content between days. */
+.creo-edit .ce-date-marker {
+  display: block;
+  padding: 4px 0 6px;
+  margin: 12px 0 4px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ce-date-marker-fg, #1a1a1a);
+  cursor: default;
+  user-select: none;
+}
+.creo-edit .ce-date-marker.is-today {
+  color: var(--ce-date-marker-today-fg, #b54708);
+}
+
+/* ============= Calendar (atomic block) =============
+   Renders one row per day; the row matching today's local date gets the
+   `is-today` class for accent styling. Outer block uses pointer:default
+   because contenteditable=false should not show the I-beam from the
+   editor root. */
+.creo-edit .ce-calendar {
+  display: block;
+  border: 1px solid var(--ce-cal-border, #d6d6d6);
+  border-radius: 6px;
+  padding: 8px 10px;
+  margin: 8px 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 13px;
+  cursor: default;
+  user-select: none;
+}
+.creo-edit .ce-calendar-header {
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ce-cal-header, #888);
+  margin-bottom: 4px;
+}
+.creo-edit .ce-calendar-row {
+  display: flex;
+  gap: 12px;
+  padding: 4px 6px;
+  border-radius: 4px;
+}
+.creo-edit .ce-calendar-row.is-today {
+  background: var(--ce-cal-today-bg, #fff7e6);
+  color: var(--ce-cal-today-fg, #b54708);
+  font-weight: 600;
+}
+.creo-edit .ce-calendar-dow {
+  width: 3.5em;
+  color: var(--ce-cal-dow, #666);
+}
+.creo-edit .ce-calendar-row.is-today .ce-calendar-dow {
+  color: inherit;
+}
+.creo-edit .ce-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============= Column line layout =============
+   Columns render one .ce-col-line div per visual line so an empty trailing
+   line (e.g. right after pressing Enter) still has height for the caret to
+   land on. Without `min-height`, a trailing `\n` collapses to zero pixels
+   and pressing Enter once appears to do nothing. */
+.creo-edit .ce-col-line {
+  display: block;
+  min-height: 1.4em;
+}
+
+/* ============= Table / columns controls ============= */
+.ce-cells-toolbar {
+  display: none;
+  flex-direction: row;
+  gap: 4px;
+  padding: 2px;
+  background: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 12px;
+  user-select: none;
+}
+.ce-cells-ctl {
+  border: none;
+  background: transparent;
+  color: #444;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.ce-cells-ctl:hover {
+  background: #eef4ff;
+  color: #1a1a1a;
+}
+
+/* ============= Add-block button ============= */
+.ce-add-block-btn {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: #888;
+  font-size: 20px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+.ce-add-block-btn.is-visible {
+  opacity: 1;
+}
+.ce-add-block-btn:hover {
+  color: #333;
+}

package/dist/render/DocView.d.ts

@@ -0,0 +1,7 @@
+import type { DocState } from "../model/types";
+export declare const DocView: (props: {
+    doc: DocState;
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/render/InlineRunsView.d.ts

@@ -0,0 +1,7 @@
+import type { InlineRun } from "../model/types";
+export declare const InlineRunsView: (props: {
+    runs: InlineRun[];
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/render/blocks/CodeBlockView.d.ts

@@ -0,0 +1,7 @@
+import type { CodeBlock } from "../../model/types";
+export declare const CodeBlockView: (props: {
+    block: CodeBlock;
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/render/blocks/HeadingView.d.ts

@@ -0,0 +1,7 @@
+import type { HeadingBlock } from "../../model/types";
+export declare const HeadingView: (props: {
+    block: HeadingBlock;
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/render/blocks/ImageView.d.ts

@@ -0,0 +1,8 @@
+import type { ImageBlock } from "../../model/types";
+export declare const ImageView: (props: {
+    block: ImageBlock;
+    selected?: boolean;
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/render/blocks/ListItemView.d.ts

@@ -0,0 +1,7 @@
+import type { ListItemBlock } from "../../model/types";
+export declare const ListItemView: (props: {
+    block: ListItemBlock;
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/render/blocks/ParagraphView.d.ts

@@ -0,0 +1,7 @@
+import type { ParagraphBlock } from "../../model/types";
+export declare const ParagraphView: (props: {
+    block: ParagraphBlock;
+} & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/virtual/VirtualDoc.d.ts

@@ -0,0 +1,28 @@
+import type { Store } from "creo";
+import type { DocState, Selection } from "../model/types";
+/**
+ * VirtualDoc — windowed renderer that mounts only the blocks intersecting
+ * `[scrollTop − overscan, scrollTop + viewport + overscan]`.
+ *
+ *  - Heights are measured per block via ResizeObserver and pushed into a
+ *    Fenwick tree (`HeightIndex`) for O(log n) y-position lookups.
+ *  - Top / bottom spacer divs absorb the off-screen height so the scrollbar
+ *    behaves as if the whole document is rendered.
+ *  - The block containing the caret is ALWAYS rendered, even when off-screen.
+ *    Without this guarantee the caret overlay (which queries DOM) would lose
+ *    its anchor when the user scrolls away with a selection.
+ */
+export type VirtualDocProps = {
+    docStore: Store<DocState>;
+    selStore: Store<Selection>;
+    /** Estimated default height in px for unmeasured blocks. */
+    estimatedHeight?: number;
+    /** Overscan factor — multiplied by viewport height for top/bottom slack. */
+    overscan?: number;
+    /** Optional fixed viewport height (else read from window.innerHeight). */
+    viewportHeight?: number;
+};
+export declare const VirtualDoc: (props: VirtualDocProps & {
+    key?: import("creo").Key;
+    ref?: import("creo").Ref<void> | undefined;
+}, slot?: import("creo").SlotContent) => void;

package/dist/virtual/heightIndex.d.ts

@@ -0,0 +1,36 @@
+/**
+ * HeightIndex — a Fenwick (binary indexed) tree over per-block heights so
+ * that:
+ *  - prefix(i)         — sum of heights[0..i)            in O(log n)
+ *  - setHeight(i, h)   — replace heights[i] with h       in O(log n)
+ *  - findIndexAtY(y)   — first i s.t. prefix(i+1) > y    in O(log n)
+ *
+ * Combined with an `estimatedHeight` for unmeasured blocks, this gives us
+ * an O(log n) viewport-window resolver for arbitrary scroll positions even
+ * before every block has been measured.
+ */
+export declare class HeightIndex {
+    #private;
+    constructor(count: number, estimatedHeight: number);
+    get size(): number;
+    /** Replace the height at `i` with `h`. O(log n). */
+    setHeight(i: number, h: number): void;
+    /** Prefix sum of heights for indices [0, i). */
+    prefix(i: number): number;
+    /** Total height of all blocks. */
+    total(): number;
+    /**
+     * Find the smallest index i such that prefix(i+1) > y. Returns the
+     * floor index for y in [0, total()); for y >= total() returns n - 1.
+     * For empty trees returns 0 (caller should also check size).
+     */
+    findIndexAtY(y: number): number;
+    /** Append `count` new blocks at the end, all unmeasured. */
+    grow(count: number): void;
+    /**
+     * Resize to exactly `count` blocks. Loses tail measurements when
+     * shrinking; preserves them when growing. Always rebuilds the BIT from
+     * scratch (cheap — O(n log n) and called rarely).
+     */
+    resize(count: number): void;
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "creo-edit",
+  "version": "0.1.0",
+  "description": "Row-based rich-text editor framework on a controlled contentEditable, built on Creo. Cursor state separate from document state, CRDT-friendly fractional row ordering, O(1) per-keystroke renders, optional virtualization, first-class mobile.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Nik (xnim.me)",
+  "homepage": "https://github.com/xnimorz/creo-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xnimorz/creo-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/xnimorz/creo-editor/issues"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "contenteditable",
+    "wysiwyg",
+    "creo",
+    "text-editor",
+    "virtualization"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./plugins/styles.css": "./dist/plugins/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run build.ts",
+    "test": "bun test src/",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "creo": ">=0.2.7"
+  },
+  "devDependencies": {
+    "creo": "^0.2.7",
+    "typescript": "^5",
+    "@types/bun": "latest",
+    "happy-dom": "^20.8.4"
+  }
+}