documint 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# 🌿 Documint
+
+A canvas-based, batteries-included markdown editor for React.
+
+> Try it out: [Documint playground](https://lostintangent.github.io/documint).
+
+## Features
+
+- **Markdown in, markdown out** — Documents are parsed from markdown and serialized back to markdown. Full support for CommonMark, GFM tables, task lists, strikethrough, and fenced code blocks with language hints.
+
+- **Subtle, delightful animations** — A typing trail highlights newly inserted text. Deleted text fades out before disappearing. List markers pop into place. Punctuation pulses with a soft ring on keystroke. Small details that make editing feel fun.
+
+- **Mobile-native editing** — Responsive layout with full support for iOS and Android gestures: auto-capitalization, auto-correct, auto-scroll on keyboard appearance, shake-to-undo, and selection handles all work as expected.
+
+- **Rich semantic editing** — Context-sensitive behavior that adapts to what you're editing. Enter splits a paragraph but adds a new row in a table. Backspace at the start of a list item dedents it. Tab indents a list but inserts a column in a table. The editor understands the structure of your document, so every gesture does the right thing.
+
+- **Context-aware toolbars ("leaves")** — Floating toolbars that appear based on what you're interacting with: text formatting options on selection, link editing on links, column/row controls on tables, and block insertion (headings, lists, quotes, tables) on empty lines.
+
+- **Configurable themes and keybindings** — Ships with built-in light and dark themes, follows the system theme by default, and lets you customize every theme value or start from presets like mint, midnight, and sunrise. Keybindings are configurable too — remap formatting shortcuts, navigation, and list operations to match your users' expectations.
+
+- **Comments and presence for review workflows** — Anchor comments to any range of text, with full threading (replies, resolution, deletion) and self-repairing quote-based matching after edits. External user and AI agent presence can be projected into the document as live cursors and viewport indicators without becoming document content.
+
+- **Fast and lightweight** — Canvas-based rendering optimized for hot-path performance even on large documents. A custom markdown parser, editor engine, and layout/rendering system all ship in a bundle <70 KB gzipped.
+
+## Getting Started
+
+1. Install the package: `npm install documint` (or `bun add documint`)
+2. Import the `Documint` component from the package
+3. Pass your markdown content to it and listen for changes
+
+```tsx
+import { useState } from "react";
+import { Documint } from "documint";
+
+const initialMarkdown = `# Hello Documint
+
+This editor takes markdown in and gives markdown back out.
+`;
+
+export function App() {
+  const [content, setContent] = useState(initialMarkdown);
+
+  return <Documint content={content} onContentChange={setContent} />;
+}
+```
+
+You can also start from one of the built-in themes and tweak just the values you care about.
+
+```tsx
+import { useState } from "react";
+import { Documint, lightTheme } from "documint";
+
+const customTheme = {
+  ...lightTheme,
+  background: "#fff7ed",
+  headingText: "#7c2d12",
+  linkText: "#c2410c",
+};
+
+export function App() {
+  const [content, setContent] = useState("# Themed Documint");
+
+  return <Documint content={content} onContentChange={setContent} theme={customTheme} />;
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,222 @@
+export type CommentThread = {
+	quote: string;
+	comments: Comment$1[];
+	anchor: Anchor;
+	resolvedAt?: string;
+};
+type Comment$1 = {
+	body: string;
+	updatedAt: string;
+};
+type Document$1 = {
+	blocks: Block[];
+	comments: CommentThread[];
+};
+export type Block = ParagraphBlock | HeadingBlock | ListBlock | ListItemBlock | BlockquoteBlock | TableBlock | DividerBlock | CodeBlock | DirectiveBlock | RawBlock;
+export type Inline = Text$1 | Link | Image$1 | Code | LineBreak | Raw;
+type DocumentNode<K extends string, P = {}> = {
+	id: string;
+	type: K;
+} & P;
+type BlockNode<K extends string, P = {}> = DocumentNode<K, {
+	plainText: string;
+} & P>;
+type ParagraphBlock = BlockNode<"paragraph", {
+	children: Inline[];
+}>;
+type HeadingBlock = BlockNode<"heading", {
+	children: Inline[];
+	depth: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+type ListBlock = BlockNode<"list", {
+	items: ListItemBlock[];
+	ordered: boolean;
+	spread: boolean;
+	start: number | null;
+}>;
+type ListItemBlock = BlockNode<"listItem", {
+	checked: boolean | null;
+	children: Block[];
+	spread: boolean;
+}>;
+type BlockquoteBlock = BlockNode<"blockquote", {
+	children: Block[];
+}>;
+type TableBlock = BlockNode<"table", {
+	align: Array<"center" | "left" | "right" | null>;
+	rows: TableRow[];
+}>;
+type TableRow = {
+	cells: TableCell[];
+	id: string;
+};
+type TableCell = {
+	children: Inline[];
+	id: string;
+	plainText: string;
+};
+type DividerBlock = BlockNode<"thematicBreak">;
+type CodeBlock = BlockNode<"code", {
+	language: string | null;
+	meta: string | null;
+	source: string;
+}>;
+export type DirectiveBlock = BlockNode<"directive", {
+	attributes: string;
+	body: string;
+	name: string;
+}>;
+export type RawBlock = BlockNode<"unsupported", {
+	originalType: string;
+	source: string;
+}>;
+export type Mark = "bold" | "italic" | "strikethrough" | "underline";
+type Text$1 = DocumentNode<"text", {
+	marks: Mark[];
+	text: string;
+}>;
+export type Link = DocumentNode<"link", {
+	children: Inline[];
+	title: string | null;
+	url: string;
+}>;
+type Image$1 = DocumentNode<"image", {
+	alt: string | null;
+	title: string | null;
+	url: string;
+	width: number | null;
+}>;
+type LineBreak = DocumentNode<"break">;
+type Code = DocumentNode<"inlineCode", {
+	code: string;
+}>;
+export type Raw = DocumentNode<"unsupported", {
+	originalType: string;
+	source: string;
+}>;
+declare const ANCHOR_KINDS: readonly [
+	"text",
+	"code",
+	"tableCell"
+];
+type AnchorKind = (typeof ANCHOR_KINDS)[number];
+export type Anchor = {
+	kind?: AnchorKind;
+	prefix?: string;
+	suffix?: string;
+};
+export type Presence = {
+	color?: string;
+	cursor?: Anchor;
+	imageUrl?: string;
+	name: string;
+};
+/**
+ * Canvas render themes for the editor surface. These tokens are intentionally
+ * semantic so paint code can stay focused on structure rather than color
+ * decisions.
+ */
+export type EditorTheme = {
+	activeBlockBackground: string;
+	activeBlockFlash: string;
+	background: string;
+	blockquoteRule: string;
+	blockquoteRuleActive: string;
+	blockquoteText: string;
+	caret: string;
+	checkboxCheckmark: string;
+	checkboxCheckedFill: string;
+	checkboxCheckedStroke: string;
+	checkboxUncheckedFill: string;
+	checkboxUncheckedStroke: string;
+	codeBackground: string;
+	codeText: string;
+	commentHighlight: string;
+	commentHighlightActive: string;
+	commentHighlightResolved: string;
+	commentHighlightResolvedActive: string;
+	headingRule: string;
+	headingText: string;
+	imageLoadingOverlay: string;
+	imagePlaceholderIcon: string;
+	imagePlaceholderText: string;
+	imageSurfaceBackground: string;
+	imageSurfaceBorder: string;
+	inlineCodeBackground: string;
+	inlineCodeText: string;
+	insertHighlightText: string;
+	leafAccent: string;
+	leafBackground: string;
+	leafBorder: string;
+	leafButtonBackground: string;
+	leafButtonBorder: string;
+	leafButtonText: string;
+	leafResolvedBackground: string;
+	leafResolvedBorder: string;
+	leafSecondaryText: string;
+	leafShadow?: string;
+	leafText: string;
+	linkText: string;
+	listMarkerText: string;
+	paddingX: number;
+	paddingY: number;
+	paragraphText: string;
+	selectionBackground: string;
+	selectionHandleBackground: string;
+	selectionHandleBorder: string;
+	tableBodyBackground: string;
+	tableBorder: string;
+	tableHeaderBackground: string;
+};
+type EditorCommand = "dedent" | "deleteBackward" | "indent" | "insertLineBreak" | "moveListItemDown" | "moveListItemUp" | "moveToLineEnd" | "moveToLineStart" | "redo" | "toggleBold" | "toggleInlineCode" | "toggleItalic" | "toggleStrikethrough" | "toggleUnderline" | "undo";
+export type EditorKeybinding = {
+	altKey?: boolean;
+	command: EditorCommand;
+	key: string;
+	modKey?: boolean;
+	shiftKey?: boolean | "any";
+};
+export declare const defaultKeybindings: EditorKeybinding[];
+export type DocumintState = {
+	activeBlockType: string | null;
+	activeCommentThreadIndex: number | null;
+	activeSpanKind: string | null;
+	canonicalContent: string;
+	characterCount: number;
+	commentThreadCount: number;
+	docChangeCount: number;
+	lastTransactionMs: number;
+	layoutWidth: number;
+	lineCount: number;
+	resolvedCommentCount: number;
+	selectionFrom: number;
+	selectionTo: number;
+	transactionCount: number;
+};
+export type DocumintTheme = EditorTheme | {
+	dark: EditorTheme;
+	light: EditorTheme;
+};
+export type DocumintProps = {
+	className?: string;
+	content: string;
+	keybindings?: EditorKeybinding[];
+	onContentChange?: (content: string, document: Document$1) => void;
+	onStateChange?: (state: DocumintState) => void;
+	presence?: Presence[];
+	theme?: DocumintTheme;
+};
+export declare function Documint({ className, content, keybindings, onContentChange, onStateChange, presence, theme, }: DocumintProps): import("react/jsx-runtime").JSX.Element;
+export declare const lightTheme: EditorTheme;
+export declare const darkTheme: EditorTheme;
+export declare const mintTheme: EditorTheme;
+export declare const midnightTheme: EditorTheme;
+
+export {
+	Comment$1 as Comment,
+	Document$1 as Document,
+	Image$1 as Image,
+	Text$1 as Text,
+};
+
+export {};