@mocanvas/compat 1.0.0 → 4.0.1

package/README.md

@@ -1,7 +1,6 @@
 # @mocanvas/compat
 
-`TL`-prefixed type and value aliases over the
-[mocanvas](https://github.com/SYMBIO/mocanvas) API, for projects moving an
+`TL`-prefixed type and value aliases over the mocanvas API, for projects moving an
 existing tldraw app over. Every alias is a pure re-export — there is no runtime
 code of its own — so you can switch imports first and rename at your own pace.
 
@@ -21,13 +20,39 @@ import { Tldraw } from "@mocanvas/compat" // alias of <Mocanvas />
 The package also re-exports everything from `@mocanvas/mocanvas`, so a single import
 source works during a migration.
 
-What does and does not carry over is listed in
-[docs/COMPAT.md](https://github.com/SYMBIO/mocanvas/blob/main/docs/COMPAT.md);
-the step-by-step move is in
-[docs/MIGRATION.md](https://github.com/SYMBIO/mocanvas/blob/main/docs/MIGRATION.md).
+What does and does not carry over is listed in `COMPAT.md`; the step-by-step
+move is in `MIGRATION.md`. Both are shipped inside this package.
+
+## Clean room
+
+mocanvas has never been built by reading tldraw's source. It is written from
+first principles against the public API reference on tldraw.dev, and the
+compatibility these aliases provide is measured against that same reference.
+Names are not copyrightable expression (*Google v. Oracle*, 2021); the
+implementation behind them is our own original work. `CLEAN_ROOM.md`, shipped
+in this package, is the full policy.
+
+mocanvas is not affiliated with or endorsed by tldraw.
 
 ESM only.
 
 ## License
 
-MIT
+**Source-available, not open source.** Free to use for:
+
+- personal, non-commercial projects;
+- non-profit organisations;
+- development, evaluation, testing and staging — including inside a for-profit
+  company, so you can try it and build against it before committing;
+- teaching and academic research.
+
+**Shipping it in a commercial product, service or website needs a written
+agreement with us.** That includes anything sold, anything that earns revenue
+directly or through advertising, and internal tools running a for-profit
+business.
+
+To arrange one, or if you are unsure which side of the line you are on, write to
+**mocanvas@symbio.agency** — we would rather answer the question than have you
+guess.
+
+The full terms are in `LICENSE`, shipped in this package.

package/UI.md

@@ -0,0 +1,256 @@
+# The default UI
+
+`<Mocanvas />` ships a small, opinionated interface: a toolbar, a zoom bar, a
+style panel, an optional statistics chip, and the chrome the editor draws on the
+canvas itself. All of it is optional and all of it is themeable from CSS.
+
+Source lives in `packages/mocanvas/src/ui/`:
+
+| File | What it holds |
+| --- | --- |
+| `DefaultUi.tsx` | The toolbar, the zoom bar, the stats chip, and the `DefaultUi` wrapper |
+| `StylePanel.tsx` | The style panel and `getStylePanelSections`, the rule for which rows appear |
+| `icons.tsx` | The whole icon set, plus the geo icons generated from canvas geometry |
+| `overlays.tsx` | The shared tooltip and popover layers, and `placeNear` |
+| `ui.css` | Every design token and every rule |
+| `useKeyboardShortcuts.ts` | The default key bindings |
+
+## Design tokens
+
+Tokens are declared on `.mocanvas` (the editor container), on `.mocanvas-panel`,
+and on `.mocanvas-layer` (the floating tooltip and popover, which sit outside the
+panels in the DOM). Override any of them on `.mocanvas`, on a wrapper, or on a
+single panel.
+
+### Surfaces and colour
+
+| Token | Light | Dark | Used for |
+| --- | --- | --- | --- |
+| `--mocanvas-ui-panel` | `#ffffff` | `#1b1d22` | Panel, popover and picker background |
+| `--mocanvas-ui-panel-border` | `#d6d9e0` | `#3c404a` | Panel hairline, dividers, group separators |
+| `--mocanvas-ui-control` | `rgba(16,24,40,.06)` | `rgba(255,255,255,.08)` | Recessed background of a segmented button |
+| `--mocanvas-ui-text` | `#16181d` | `#eceef3` | Icon and label colour |
+| `--mocanvas-ui-muted` | `#5c6070` | `#a4a9b4` | Row labels, stats text |
+| `--mocanvas-ui-accent` | `#2563eb` | `#6ea8fe` | Selected control, focus ring |
+| `--mocanvas-ui-accent-fg` | `#ffffff` | `#0e1116` | Icon on an accent fill |
+| `--mocanvas-ui-accent-soft` | 12% accent | 18% accent | Hover on a segmented button, open disclosure |
+| `--mocanvas-ui-hover` | 6% ink | 9% white | Hover on a bare button |
+| `--mocanvas-ui-active` | 13% ink | 18% white | Pointer-down on a bare button |
+| `--mocanvas-ui-shadow` | — | — | Panel elevation |
+| `--mocanvas-ui-tip-bg` / `-fg` / `-muted` | — | — | Tooltip pill, its label, its shortcut |
+
+Every text-on-background pair is at or above 4.5:1 in both palettes. Measured on
+the shipped values, the tightest are `accent` on a segmented control (4.58 light,
+5.54 dark) and `muted` on the panel (6.25 light, 7.16 dark). Disabled controls
+render at 35% opacity, which WCAG exempts.
+
+### Metrics
+
+| Token | Value | Meaning |
+| --- | --- | --- |
+| `--mocanvas-ui-btn` | `40px` | Every hit target — buttons, swatches, popover cells |
+| `--mocanvas-ui-icon` | `20px` | Icon size inside a button |
+| `--mocanvas-ui-gap` | `2px` | Gap between adjacent controls |
+| `--mocanvas-ui-pad` | `4px` | Padding of a bar |
+| `--mocanvas-ui-pad-lg` | `10px` | Padding of the style panel, gap between its groups |
+| `--mocanvas-ui-inset` | `12px` | Distance from a panel to the viewport edge |
+| `--mocanvas-ui-radius` / `-sm` | `12px` / `8px` | Panel radius / control radius |
+| `--mocanvas-ui-dock` | `300px` | Width the bottom-left and bottom-right docks reserve beside the centred toolbar |
+| `--mocanvas-ui-bottom-dock` | `62px` (`124px` under 1290px) | Height the bottom edge occupies; the style panel stops above it |
+| `--mocanvas-ui-font` / `-mono` | system stacks | Panel type / stats chip |
+
+`--mocanvas-ui-dock` is the mechanism that keeps the three bottom panels apart:
+the toolbar is centred on the viewport but may not grow into the reservation, so
+it wraps rather than collide. Shrink it if your zoom bar is narrower than the
+default one.
+
+### Canvas chrome
+
+These are read by the editor's indicator layer (`Canvas.tsx`), not by the panels,
+so they apply even with `hideUi`. They are deliberately **not** redefined for the
+dark UI: the canvas keeps its own background, which does not follow
+`prefers-color-scheme`.
+
+| Token | Value | Used for |
+| --- | --- | --- |
+| `--mocanvas-selection` | `#2f6fe4` | Selection and hover outlines, handle strokes, brush border |
+| `--mocanvas-selection-fg` | `#ffffff` | Fill behind a solid handle |
+| `--mocanvas-brush-fill` | 12% selection | Brush rectangle interior |
+| `--mocanvas-snap` | `#cf3fe0` | Snap lines and their end markers |
+
+The two stroke colours clear 3:1 against a light canvas (`#f9fafb`: 4.45 and
+3.69) and against a dark one (`#1b1d22`: 3.63 and 4.37). If you render a dark
+canvas, swap `--mocanvas-selection-fg` for a dark value so handles stay filled
+with the canvas colour rather than white.
+
+Handles are drawn at 9px (corners), 6px (shape handles) and 5.5px (rotate) in
+screen space, with a 1.5px stroke. Their hit radius is a separate editor
+constant, `HANDLE_HIT_RADIUS` in `packages/editor/src/editor/selectionHandles.ts`.
+
+## Icon grid rules
+
+Icons are original artwork on a 24×24 viewBox, painted with `currentColor`.
+
+- **Grid.** 24×24. Ink, stroke included, stays inside it.
+- **Weight.** Stroke 1.75, round caps and joins. Only texture marks deviate and
+  say so at the call site: the fill hatching (1.25), the dotted rule (2.6 with a
+  zero-length dash, so the caps draw the dots), the mono rails (1.4).
+- **Centring.** Ink is optically centred on (12, 12), within half a grid unit.
+  The only exceptions are semantic: `valign-top` and `valign-bottom` sit high and
+  low on purpose.
+- **Extent.** The longest ink dimension lands between 16 and 18.25 units — about
+  17.75 for a full-bleed form — so no icon reads heavier than its neighbour. The
+  `size-*` ramp is exempt: its whole job is to differ in size.
+- **Distinctness.** No two icons may draw the same artwork; `icons.test.tsx`
+  enforces this. It is why the handwriting font is a script `a` rather than a
+  fourth capital A, and why `oval` gets a wider box than `ellipse`.
+- **Geo icons** are generated from `getGeoGeometry`, the same code the canvas
+  draws with, so a toolbar button always matches the shape it creates. Each kind
+  is fitted into the box `getGeoIconBox(kind)` returns: square at `GEO_BOX` (16)
+  by default, and flatter or narrower for kinds whose name implies a proportion
+  (`rectangle`, `oval`, the four arrows). The longest side is always `GEO_BOX`.
+
+Render one with `<Icon name="select" size={20} />`. `size` sets the SVG's
+attributes; buttons additionally take their icon size from `--mocanvas-ui-icon`,
+so inline marks like the "mixed" badge keep the size they ask for.
+
+## Overriding the UI
+
+### Turn it off
+
+```tsx
+<Mocanvas hideUi />
+```
+
+This drops the toolbar, zoom bar, style panel and stats chip. `ui.css` still
+loads, so the canvas chrome tokens above keep working. Default keyboard
+shortcuts are wired by `<Mocanvas />` itself and are unaffected; call
+`useKeyboardShortcuts(editor)` yourself if you build on `<Canvas />` directly.
+
+### Replace the canvas chrome
+
+```tsx
+<Mocanvas components={{ Indicators: MyIndicators, Brush: MyBrush, Background: MyGrid }} />
+```
+
+`components` is forwarded to `<Canvas />`. `Indicators` draws selection and hover
+outlines and handles, `Brush` the marquee, `Background` a layer behind the canvas.
+Each receives `{ editor }` and renders into the SVG overlay (`Background` into a
+plain DOM layer). Omit one to keep the default.
+
+### Rebuild the panels
+
+Compose your own from the exported parts:
+
+```tsx
+import { Mocanvas, Toolbar, ZoomBar, StylePanel, UiTooltip, Icon } from "mocanvas"
+
+<Mocanvas hideUi>
+  <Toolbar />
+  <MyOwnInspector />
+  <UiTooltip />
+</Mocanvas>
+```
+
+`Toolbar`, `ZoomBar`, `StylePanel`, `DebugStats`, `Popover`, `UiTooltip`, `Icon`
+and `TOOLBAR_GROUPS` are all exported. Children of `<Mocanvas>` render above the
+canvas inside the editor container, so the tokens apply to them too.
+
+### Restyle it
+
+```css
+.mocanvas {
+  --mocanvas-ui-accent: #12b886;
+  --mocanvas-ui-radius: 6px;
+  --mocanvas-ui-btn: 44px;
+  --mocanvas-selection: #12b886;
+}
+```
+
+## The panels
+
+### Toolbar — bottom centre
+
+Tools in four groups separated by dividers: select and hand; draw and eraser; the
+five common geo kinds plus a disclosure for the other fifteen; text, note, and
+whichever of arrow, line and frame the app registered. Entries whose tool is not
+registered disappear, so a cut-down `tools` prop yields a cut-down bar. The
+active tool is `aria-pressed`; a geo button is pressed only when its own kind is
+active. The disclosure opens a 5-column popover of the remaining kinds and is
+itself marked pressed when one of them is active. The bar is centred on the
+viewport, wraps to more rows rather than growing into the docks, and moves to a
+row of its own below 1290px.
+
+### Zoom bar — bottom left
+
+Zoom out, the current percentage (a button that resets to 100%), zoom in, zoom to
+fit, then a divider and undo/redo. Undo and redo are `disabled` when there is
+nothing to undo or redo, at 35% opacity and without a tooltip.
+
+### Style panel — top right
+
+Appears when the selection carries at least one style, or when a drawing tool is
+active with nothing selected. Rows are grouped, and separated by a hairline:
+
+1. **Shape** — the geo kind, as one button showing the current shape that opens a
+   20-cell popover.
+2. **Colour** — the stroke colour, and the label colour when the selection can
+   carry one; twelve swatches each, six to a row.
+3. **Stroke and fill** — Fill, Dash and Size, four choices each.
+4. **Text** — Font, then horizontal and vertical alignment sharing one row.
+5. **Opacity** — a slider; only with a selection, since it edits shapes rather
+   than a style.
+
+Which rows appear is decided by `getStylePanelSections(editor)`, which reads
+`editor.getSharedStyles()` for a selection and
+`editor.getStylePropsForType(toolId)` otherwise. A selection of two lines
+therefore shows Colour, Dash and Size and nothing else. A row whose selected
+shapes disagree shows a dashed "mixed" badge beside its label. The panel scrolls
+when it is taller than the space above the bottom dock, with a fade and a shadow
+at whichever edge has more content behind it. Below 560px it spans the width and
+is capped at 42% of the height.
+
+### Statistics chip — bottom right
+
+Shape counts, drawn versus culled, and milliseconds per frame. Toggled with
+`⌥D`, or with the `showStats` prop. It moves above the zoom bar below 560px.
+
+### Tooltip and popover
+
+Both are single, `position: fixed`, viewport-clamped layers (`overlays.tsx`).
+A tooltip labels any element with `data-tooltip`, adding `data-shortcut` in a
+muted weight; it appears after a 500ms rest, immediately on keyboard focus, sits
+above its control so it never covers it, and flips below when there is no room.
+`placeNear` does the arithmetic and is unit-tested. Popovers dismiss on outside
+pointer-down and on Escape, which also returns focus to the button.
+
+## States
+
+| State | Bare button | Segmented button | Swatch |
+| --- | --- | --- | --- |
+| Rest | transparent | `--mocanvas-ui-control` | transparent |
+| Hover | `--mocanvas-ui-hover` | `--mocanvas-ui-accent-soft` | `--mocanvas-ui-hover` |
+| Pointer down | `--mocanvas-ui-active`, scaled 0.94 | as hover, scaled 0.94 | scaled 0.92 |
+| Selected | accent fill, accent-fg icon | accent fill, accent-fg icon | double ring in accent |
+| Selected + hover | accent fill plus an inset ring | same | same |
+| Focus (keyboard) | 2px accent outline, 2px offset | same | same |
+| Disabled | 35% opacity, no tooltip, default cursor | — | — |
+
+The focus ring is offset by 2px so a ring of panel colour separates it from an
+accent-filled button; without that gap, focus would be invisible on the active
+tool. `prefers-reduced-motion` removes every transition.
+
+## Pointer targets
+
+Selection handles use a 24x24 px pointer target (`HANDLE_HIT_RADIUS = 12` in
+`packages/editor/src/editor/selectionHandles.ts`), which is the WCAG 2.2
+minimum. Two rules keep that from swallowing small shapes:
+
+- Edge handles (top, right, bottom, left) only appear once that edge is at
+  least `4 * HANDLE_HIT_RADIUS` long on screen; below that the two corners
+  already cover the whole edge.
+- On a selection smaller than six handles across, `getHandleHitRadius` scales
+  the target down (never below 4 px) so the shape's interior stays draggable.
+
+Both measure the *screen-space* edge lengths of the transformed corners, so a
+rotated selection behaves the same as an upright one.

package/dist/index.d.ts

@@ -1,17 +1,12 @@
-import { ShapeUtilConstructor, ArrowBinding, ArrowShape, UnknownBinding, BindingId, BindingUtilConstructor, Camera, CameraId, ClickEventInfo, DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultFontStyle, DefaultHorizontalAlignStyle, DefaultSizeStyle, DefaultVerticalAlignStyle, Document, DrawShape, Editor, EventInfo, FrameShape, GeoShape, GeoShapeKind, GroupShape, ShapeHandle, Instance, InstancePageState, KeyboardEventInfo, LineShape, NoteShape, Page, PageId, ParentId, PointerEventInfo, EditorRecord, UnknownShape, ResizeInfo, SelectionHandle, Shape, ShapeCreate, ShapeId, ShapePartial, StateNodeConstructor, EditorStore, EditorStoreSnapshot, TextShape, WheelEventInfo, Mocanvas, Canvas, createSchema, createStore } from '@mocanvas/mocanvas';
+import * as _mocanvas_editor from '@mocanvas/editor';
+import { BindingUtilConstructor, ShapeUtilConstructor, ArrowBinding, ArrowBindingProps, ArrowBindings, ArrowShape, ArrowShapeProps, Asset, AssetContext, AssetId, AssetPartial, AssetStore, BaseAsset, BaseBinding, BaseEventInfo, BaseShape, Binding, UnknownBinding, BindingCreate, BindingId, BookmarkAsset, BookmarkShape, BookmarkShapeProps, Camera, CameraId, CancelEventInfo, ClickEventInfo, CompleteEventInfo, CurrentUser, DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultFontStyle, DefaultHorizontalAlignStyle, DefaultSizeStyle, DefaultVerticalAlignStyle, Document, DrawShape, DrawShapeProps, Editor, EditorOptions, EmbedDefinition, EmbedShape, EmbedShapeProps, EventHandlers, EventInfo, ExternalContent, FrameShape, FrameShapeProps, GeoShape, GeoShapeKind, GeoShapeProps, GroupShape, ShapeHandle, InstanceId, ImageAsset, ImageShape, ImageShapeProps, Instance, InstancePageState, InstancePageStateId, InstancePresence, InstancePresenceId, InterruptEventInfo, KeyboardEventInfo, KeyboardEventName, LineShape, LineShapeProps, NoteShape, NoteShapeProps, Page, PageId, ParentId, PinchEventInfo, PointerEventInfo, PointerEventName, PropsMigration, PropsMigrations, EditorRecord, UnknownShape, ResizeInfo, ResizeShapeOptions, RichText, Scribble, SelectionHandle, Shape, ShapeCreate, ShapeId, ShapePartial, StateNodeConstructor, EditorStore, TLSchema, EditorStoreSnapshot, SvgExportOptions, TextShape, TextShapeProps, TickEventInfo, User, UserId, UserPreferencesState, UserStore, VideoAsset, VideoShape, VideoShapeProps, WheelEventInfo, Mocanvas, Canvas, EditorStoreProps, MocanvasProps, createSchema, createStore, useCurrentUser } from '@mocanvas/mocanvas';
 export * from '@mocanvas/mocanvas';
-
-/**
- * Migration aliases. Projects moving from a `TL`-prefixed API can switch their
- * imports to `@mocanvas/compat` first and rename at their own pace.
- *
- * Every alias here is a pure re-export; there is no runtime code.
- */
+import { SerializedStore } from '@mocanvas/store';
 
 type TLRecord = EditorRecord;
 type TLStore = EditorStore;
 type TLStoreSnapshot = EditorStoreSnapshot;
-type TLShape = Shape;
+type TLShape<Type extends string = never> = [Type] extends [never] ? Shape : Shape<Type>;
 type TLUnknownShape = UnknownShape;
 type TLShapeId = ShapeId;
 type TLParentId = ParentId;
@@ -24,7 +19,7 @@ type TLCamera = Camera;
 type TLCameraId = CameraId;
 type TLInstance = Instance;
 type TLInstancePageState = InstancePageState;
-type TLBinding = UnknownBinding;
+type TLBinding<Type extends string = never> = [Type] extends [never] ? Binding : Binding<Type>;
 type TLBindingId = BindingId;
 type TLArrowBinding = ArrowBinding;
 type TLGeoShape = GeoShape;
@@ -55,6 +50,7 @@ type TLShapeUtilConstructor<T extends UnknownShape = UnknownShape> = ShapeUtilCo
 type TLStateNodeConstructor = StateNodeConstructor;
 type TLBindingUtilConstructor = BindingUtilConstructor;
 type TLAnyShapeUtilConstructor = ShapeUtilConstructor;
+type TLAnyBindingUtilConstructor = BindingUtilConstructor;
 /** The batteries-included component. */
 declare const Tldraw: typeof Mocanvas;
 /** The bare canvas (bring your own shapes, tools and UI). */
@@ -62,5 +58,70 @@ declare const TldrawEditor: typeof Canvas;
 declare const createTLStore: typeof createStore;
 declare const createTLSchema: typeof createSchema;
 type TLEditor = Editor;
+type TLBaseShape<Type extends string, Props extends object> = BaseShape<Type, Props>;
+type TLBaseBinding<Type extends string, Props extends object> = BaseBinding<Type, Props>;
+type TLAsset = Asset;
+type TLAssetId = AssetId;
+type TLAssetStore = AssetStore;
+type TLUser = User;
+type TLUserStore = UserStore;
+type TLCurrentUser = CurrentUser;
+type TLUserPreferences = UserPreferencesState;
+type TLInstancePresence = InstancePresence;
+type TLInstancePresenceID = InstancePresenceId;
+/** The `Tldraw`-spelled identity hook. */
+declare const useTldrawCurrentUser: typeof useCurrentUser;
+type TLEmbedDefinition = EmbedDefinition;
+type TLBaseEventInfo = BaseEventInfo;
+type TLCancelEventInfo = CancelEventInfo;
+type TLCompleteEventInfo = CompleteEventInfo;
+type TLEventHandlers = EventHandlers;
+type TLInterruptEventInfo = InterruptEventInfo;
+type TLKeyboardEventName = KeyboardEventName;
+type TLPinchEventInfo = PinchEventInfo;
+type TLPointerEventName = PointerEventName;
+type TLTickEventInfo = TickEventInfo;
+type TLArrowShapeProps = ArrowShapeProps;
+type TLBookmarkShapeProps = BookmarkShapeProps;
+type TLDrawShapeProps = DrawShapeProps;
+type TLEmbedShapeProps = EmbedShapeProps;
+type TLFrameShapeProps = FrameShapeProps;
+type TLGeoShapeProps = GeoShapeProps;
+type TLImageShapeProps = ImageShapeProps;
+type TLLineShapeProps = LineShapeProps;
+type TLNoteShapeProps = NoteShapeProps;
+type TLTextShapeProps = TextShapeProps;
+type TLVideoShapeProps = VideoShapeProps;
+type TLBookmarkShape = BookmarkShape;
+type TLEmbedShape = EmbedShape;
+type TLImageShape = ImageShape;
+type TLVideoShape = VideoShape;
+type TLAssetContext = AssetContext;
+type TLAssetPartial<A extends Asset = Asset> = AssetPartial<A>;
+type TLBaseAsset<Type extends string, Props extends object> = BaseAsset<Type, Props>;
+type TLBookmarkAsset = BookmarkAsset;
+type TLImageAsset = ImageAsset;
+type TLVideoAsset = VideoAsset;
+type TLBindingCreate<B extends UnknownBinding = UnknownBinding> = BindingCreate<B>;
+declare const TLDOCUMENT_ID: _mocanvas_editor.DocumentId;
+declare const TLINSTANCE_ID: InstanceId;
+type TLInstanceId = InstanceId;
+type TLInstancePageStateId = InstancePageStateId;
+type TLPropsMigration = PropsMigration;
+type TLPropsMigrations = PropsMigrations;
+type TLRichText = RichText;
+type TLScribble = Scribble;
+type TLSerializedStore = SerializedStore<EditorRecord>;
+type TLStoreSchema = TLSchema;
+type TLUnknownBinding = UnknownBinding;
+type TLUserId = UserId;
+type TLArrowBindingProps = ArrowBindingProps;
+type TLArrowBindings = ArrowBindings;
+type TldrawEditorStoreProps = EditorStoreProps;
+type TldrawProps = MocanvasProps;
+type TLEditorOptions = EditorOptions;
+type TLExternalContent = ExternalContent;
+type TLResizeShapeOptions = ResizeShapeOptions;
+type TLSvgExportOptions = SvgExportOptions;
 
-export { type TLAnyShapeUtilConstructor, type TLArrowBinding, type TLArrowShape, type TLBinding, type TLBindingId, type TLBindingUtilConstructor, type TLCamera, type TLCameraId, type TLClickEventInfo, type TLDefaultColorStyle, type TLDefaultDashStyle, type TLDefaultFillStyle, type TLDefaultFontStyle, type TLDefaultHorizontalAlignStyle, type TLDefaultSizeStyle, type TLDefaultVerticalAlignStyle, type TLDocument, type TLDrawShape, type TLEditor, type TLEventInfo, type TLFrameShape, type TLGeoShape, type TLGeoShapeGeoStyle, type TLGroupShape, type TLHandle, type TLInstance, type TLInstancePageState, type TLKeyboardEventInfo, type TLLineShape, type TLNoteShape, type TLPage, type TLPageId, type TLParentId, type TLPointerEventInfo, type TLRecord, type TLResizeInfo, type TLSelectionHandle, type TLShape, type TLShapeCreate, type TLShapeId, type TLShapePartial, type TLShapeUtilConstructor, type TLStateNodeConstructor, type TLStore, type TLStoreSnapshot, type TLTextShape, type TLUnknownShape, type TLWheelEventInfo, Tldraw, TldrawEditor, createTLSchema, createTLStore };
+export { type TLAnyBindingUtilConstructor, type TLAnyShapeUtilConstructor, type TLArrowBinding, type TLArrowBindingProps, type TLArrowBindings, type TLArrowShape, type TLArrowShapeProps, type TLAsset, type TLAssetContext, type TLAssetId, type TLAssetPartial, type TLAssetStore, type TLBaseAsset, type TLBaseBinding, type TLBaseEventInfo, type TLBaseShape, type TLBinding, type TLBindingCreate, type TLBindingId, type TLBindingUtilConstructor, type TLBookmarkAsset, type TLBookmarkShape, type TLBookmarkShapeProps, type TLCamera, type TLCameraId, type TLCancelEventInfo, type TLClickEventInfo, type TLCompleteEventInfo, type TLCurrentUser, TLDOCUMENT_ID, type TLDefaultColorStyle, type TLDefaultDashStyle, type TLDefaultFillStyle, type TLDefaultFontStyle, type TLDefaultHorizontalAlignStyle, type TLDefaultSizeStyle, type TLDefaultVerticalAlignStyle, type TLDocument, type TLDrawShape, type TLDrawShapeProps, type TLEditor, type TLEditorOptions, type TLEmbedDefinition, type TLEmbedShape, type TLEmbedShapeProps, type TLEventHandlers, type TLEventInfo, type TLExternalContent, type TLFrameShape, type TLFrameShapeProps, type TLGeoShape, type TLGeoShapeGeoStyle, type TLGeoShapeProps, type TLGroupShape, type TLHandle, TLINSTANCE_ID, type TLImageAsset, type TLImageShape, type TLImageShapeProps, type TLInstance, type TLInstanceId, type TLInstancePageState, type TLInstancePageStateId, type TLInstancePresence, type TLInstancePresenceID, type TLInterruptEventInfo, type TLKeyboardEventInfo, type TLKeyboardEventName, type TLLineShape, type TLLineShapeProps, type TLNoteShape, type TLNoteShapeProps, type TLPage, type TLPageId, type TLParentId, type TLPinchEventInfo, type TLPointerEventInfo, type TLPointerEventName, type TLPropsMigration, type TLPropsMigrations, type TLRecord, type TLResizeInfo, type TLResizeShapeOptions, type TLRichText, type TLScribble, type TLSelectionHandle, type TLSerializedStore, type TLShape, type TLShapeCreate, type TLShapeId, type TLShapePartial, type TLShapeUtilConstructor, type TLStateNodeConstructor, type TLStore, type TLStoreSchema, type TLStoreSnapshot, type TLSvgExportOptions, type TLTextShape, type TLTextShapeProps, type TLTickEventInfo, type TLUnknownBinding, type TLUnknownShape, type TLUser, type TLUserId, type TLUserPreferences, type TLUserStore, type TLVideoAsset, type TLVideoShape, type TLVideoShapeProps, type TLWheelEventInfo, Tldraw, TldrawEditor, type TldrawEditorStoreProps, type TldrawProps, createTLSchema, createTLStore, useTldrawCurrentUser };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Mocanvas, Canvas, createSchema, createStore } from '@mocanvas/mocanvas';
+import { DOCUMENT_ID, INSTANCE_ID, Mocanvas, Canvas, createSchema, createStore, useCurrentUser } from '@mocanvas/mocanvas';
 export * from '@mocanvas/mocanvas';
 
 // src/index.ts
@@ -6,7 +6,10 @@ var Tldraw = Mocanvas;
 var TldrawEditor = Canvas;
 var createTLStore = createStore;
 var createTLSchema = createSchema;
+var useTldrawCurrentUser = useCurrentUser;
+var TLDOCUMENT_ID = DOCUMENT_ID;
+var TLINSTANCE_ID = INSTANCE_ID;
 
-export { Tldraw, TldrawEditor, createTLSchema, createTLStore };
+export { TLDOCUMENT_ID, TLINSTANCE_ID, Tldraw, TldrawEditor, createTLSchema, createTLStore, useTldrawCurrentUser };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;AAmHO,IAAM,MAAA,GAAS;AAEf,IAAM,YAAA,GAAe;AACrB,IAAM,aAAA,GAAgB;AACtB,IAAM,cAAA,GAAiB","file":"index.js","sourcesContent":["/**\n * Migration aliases. Projects moving from a `TL`-prefixed API can switch their\n * imports to `@mocanvas/compat` first and rename at their own pace.\n *\n * Every alias here is a pure re-export; there is no runtime code.\n */\nexport * from \"@mocanvas/mocanvas\"\n\nimport type {\n  ArrowBinding,\n  ArrowShape,\n  Camera,\n  CameraId,\n  ClickEventInfo,\n  Document,\n  DrawShape,\n  EditorRecord,\n  EditorStore,\n  EditorStoreSnapshot,\n  EventInfo,\n  FrameShape,\n  GeoShape,\n  GroupShape,\n  Instance,\n  InstancePageState,\n  KeyboardEventInfo,\n  LineShape,\n  NoteShape,\n  Page,\n  PageId,\n  ParentId,\n  PointerEventInfo,\n  Shape,\n  ShapeCreate,\n  ShapeHandle,\n  ShapeId,\n  ShapePartial,\n  ShapeUtilConstructor,\n  StateNodeConstructor,\n  TextShape,\n  UnknownBinding,\n  UnknownShape,\n  WheelEventInfo,\n  BindingId,\n  BindingUtilConstructor,\n  SelectionHandle,\n  ResizeInfo,\n  DefaultColorStyle as DefaultColorStyleValue,\n  DefaultDashStyle as DefaultDashStyleValue,\n  DefaultFillStyle as DefaultFillStyleValue,\n  DefaultFontStyle as DefaultFontStyleValue,\n  DefaultSizeStyle as DefaultSizeStyleValue,\n  DefaultHorizontalAlignStyle as DefaultHorizontalAlignStyleValue,\n  DefaultVerticalAlignStyle as DefaultVerticalAlignStyleValue,\n  GeoShapeKind,\n} from \"@mocanvas/mocanvas\"\nimport { Mocanvas, createSchema, createStore, Canvas, Editor } from \"@mocanvas/mocanvas\"\n\n// ---- records ----------------------------------------------------------------\nexport type TLRecord = EditorRecord\nexport type TLStore = EditorStore\nexport type TLStoreSnapshot = EditorStoreSnapshot\nexport type TLShape = Shape\nexport type TLUnknownShape = UnknownShape\nexport type TLShapeId = ShapeId\nexport type TLParentId = ParentId\nexport type TLShapePartial<T extends UnknownShape = UnknownShape> = ShapePartial<T>\nexport type TLShapeCreate<T extends UnknownShape = UnknownShape> = ShapeCreate<T>\nexport type TLPage = Page\nexport type TLPageId = PageId\nexport type TLDocument = Document\nexport type TLCamera = Camera\nexport type TLCameraId = CameraId\nexport type TLInstance = Instance\nexport type TLInstancePageState = InstancePageState\nexport type TLBinding = UnknownBinding\nexport type TLBindingId = BindingId\nexport type TLArrowBinding = ArrowBinding\n\n// ---- default shapes ---------------------------------------------------------\nexport type TLGeoShape = GeoShape\nexport type TLDrawShape = DrawShape\nexport type TLLineShape = LineShape\nexport type TLArrowShape = ArrowShape\nexport type TLTextShape = TextShape\nexport type TLNoteShape = NoteShape\nexport type TLFrameShape = FrameShape\nexport type TLGroupShape = GroupShape\nexport type TLGeoShapeGeoStyle = GeoShapeKind\n\n// ---- styles (value types) ---------------------------------------------------\nexport type TLDefaultColorStyle = DefaultColorStyleValue\nexport type TLDefaultDashStyle = DefaultDashStyleValue\nexport type TLDefaultFillStyle = DefaultFillStyleValue\nexport type TLDefaultFontStyle = DefaultFontStyleValue\nexport type TLDefaultSizeStyle = DefaultSizeStyleValue\nexport type TLDefaultHorizontalAlignStyle = DefaultHorizontalAlignStyleValue\nexport type TLDefaultVerticalAlignStyle = DefaultVerticalAlignStyleValue\n\n// ---- events / tools ---------------------------------------------------------\nexport type TLEventInfo = EventInfo\nexport type TLPointerEventInfo = PointerEventInfo\nexport type TLClickEventInfo = ClickEventInfo\nexport type TLKeyboardEventInfo = KeyboardEventInfo\nexport type TLWheelEventInfo = WheelEventInfo\nexport type TLHandle = ShapeHandle\nexport type TLSelectionHandle = SelectionHandle\nexport type TLResizeInfo<T extends UnknownShape> = ResizeInfo<T>\nexport type TLShapeUtilConstructor<T extends UnknownShape = UnknownShape> = ShapeUtilConstructor<T>\nexport type TLStateNodeConstructor = StateNodeConstructor\nexport type TLBindingUtilConstructor = BindingUtilConstructor\nexport type TLAnyShapeUtilConstructor = ShapeUtilConstructor\n\n// ---- values -----------------------------------------------------------------\n/** The batteries-included component. */\nexport const Tldraw = Mocanvas\n/** The bare canvas (bring your own shapes, tools and UI). */\nexport const TldrawEditor = Canvas\nexport const createTLStore = createStore\nexport const createTLSchema = createSchema\nexport type TLEditor = Editor\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;AAsLO,IAAM,MAAA,GAAS;AAEf,IAAM,YAAA,GAAe;AACrB,IAAM,aAAA,GAAgB;AACtB,IAAM,cAAA,GAAiB;AAsBvB,IAAM,oBAAA,GAAuB;AAqD7B,IAAM,aAAA,GAAgB;AACtB,IAAM,aAAA,GAAgB","file":"index.js","sourcesContent":["/**\n * Migration aliases. Projects moving from a `TL`-prefixed API can switch their\n * imports to `@mocanvas/compat` first and rename at their own pace.\n *\n * Every alias here is a pure re-export; there is no runtime code.\n */\nexport * from \"@mocanvas/mocanvas\"\n\nimport type {\n  ArrowBinding,\n  ArrowShape,\n  Camera,\n  CameraId,\n  ClickEventInfo,\n  Document,\n  DrawShape,\n  EditorRecord,\n  EditorStore,\n  EditorStoreSnapshot,\n  EventInfo,\n  FrameShape,\n  GeoShape,\n  GroupShape,\n  Instance,\n  InstancePageState,\n  KeyboardEventInfo,\n  LineShape,\n  NoteShape,\n  Page,\n  PageId,\n  ParentId,\n  PointerEventInfo,\n  Shape,\n  ShapeCreate,\n  ShapeHandle,\n  ShapeId,\n  ShapePartial,\n  ShapeUtilConstructor,\n  StateNodeConstructor,\n  TextShape,\n  UnknownBinding,\n  UnknownShape,\n  WheelEventInfo,\n  BindingId,\n  BindingUtilConstructor,\n  SelectionHandle,\n  ResizeInfo,\n  DefaultColorStyle as DefaultColorStyleValue,\n  DefaultDashStyle as DefaultDashStyleValue,\n  DefaultFillStyle as DefaultFillStyleValue,\n  DefaultFontStyle as DefaultFontStyleValue,\n  DefaultSizeStyle as DefaultSizeStyleValue,\n  DefaultHorizontalAlignStyle as DefaultHorizontalAlignStyleValue,\n  DefaultVerticalAlignStyle as DefaultVerticalAlignStyleValue,\n  GeoShapeKind,\n} from \"@mocanvas/mocanvas\"\nimport type {\n  Asset,\n  AssetId,\n  AssetStore,\n  BaseBinding,\n  BaseShape,\n  Binding,\n  CurrentUser,\n  EmbedDefinition,\n  InstancePresence,\n  InstancePresenceId,\n  User,\n  UserPreferencesState,\n  UserStore,\n  ArrowBindingProps,\n  ArrowBindings,\n  ArrowShapeProps,\n  AssetContext,\n  AssetPartial,\n  BaseAsset,\n  BaseEventInfo,\n  BindingCreate,\n  BookmarkAsset,\n  BookmarkShape,\n  BookmarkShapeProps,\n  CancelEventInfo,\n  CompleteEventInfo,\n  DrawShapeProps,\n  EditorOptions,\n  EditorStoreProps,\n  EmbedShape,\n  EmbedShapeProps,\n  EventHandlers,\n  ExternalContent,\n  FrameShapeProps,\n  GeoShapeProps,\n  ImageAsset,\n  ImageShape,\n  ImageShapeProps,\n  InstanceId,\n  InstancePageStateId,\n  InterruptEventInfo,\n  KeyboardEventName,\n  LineShapeProps,\n  MocanvasProps,\n  NoteShapeProps,\n  PinchEventInfo,\n  PointerEventName,\n  PropsMigration,\n  PropsMigrations,\n  ResizeShapeOptions,\n  RichText,\n  Scribble,\n  SvgExportOptions,\n  TLSchema,\n  TextShapeProps,\n  TickEventInfo,\n  UserId,\n  VideoAsset,\n  VideoShape,\n  VideoShapeProps,\n} from \"@mocanvas/mocanvas\"\nimport { Mocanvas, createSchema, createStore, Canvas, Editor, useCurrentUser, DOCUMENT_ID, INSTANCE_ID } from \"@mocanvas/mocanvas\"\nimport type { SerializedStore } from \"@mocanvas/store\"\n\n// ---- records ----------------------------------------------------------------\nexport type TLRecord = EditorRecord\nexport type TLStore = EditorStore\nexport type TLStoreSnapshot = EditorStoreSnapshot\n// `never` as the default so a bare `TLShape` is `Shape` itself — the union of\n// registered types. Spelling the default `string` collapsed it to one\n// non-union type and `shape.type === \"note\"` narrowed nothing.\nexport type TLShape<Type extends string = never> = [Type] extends [never] ? Shape : Shape<Type>\nexport type TLUnknownShape = UnknownShape\nexport type TLShapeId = ShapeId\nexport type TLParentId = ParentId\nexport type TLShapePartial<T extends UnknownShape = UnknownShape> = ShapePartial<T>\nexport type TLShapeCreate<T extends UnknownShape = UnknownShape> = ShapeCreate<T>\nexport type TLPage = Page\nexport type TLPageId = PageId\nexport type TLDocument = Document\nexport type TLCamera = Camera\nexport type TLCameraId = CameraId\nexport type TLInstance = Instance\nexport type TLInstancePageState = InstancePageState\nexport type TLBinding<Type extends string = never> = [Type] extends [never] ? Binding : Binding<Type>\nexport type TLBindingId = BindingId\nexport type TLArrowBinding = ArrowBinding\n\n// ---- default shapes ---------------------------------------------------------\nexport type TLGeoShape = GeoShape\nexport type TLDrawShape = DrawShape\nexport type TLLineShape = LineShape\nexport type TLArrowShape = ArrowShape\nexport type TLTextShape = TextShape\nexport type TLNoteShape = NoteShape\nexport type TLFrameShape = FrameShape\nexport type TLGroupShape = GroupShape\nexport type TLGeoShapeGeoStyle = GeoShapeKind\n\n// ---- styles (value types) ---------------------------------------------------\nexport type TLDefaultColorStyle = DefaultColorStyleValue\nexport type TLDefaultDashStyle = DefaultDashStyleValue\nexport type TLDefaultFillStyle = DefaultFillStyleValue\nexport type TLDefaultFontStyle = DefaultFontStyleValue\nexport type TLDefaultSizeStyle = DefaultSizeStyleValue\nexport type TLDefaultHorizontalAlignStyle = DefaultHorizontalAlignStyleValue\nexport type TLDefaultVerticalAlignStyle = DefaultVerticalAlignStyleValue\n\n// ---- events / tools ---------------------------------------------------------\nexport type TLEventInfo = EventInfo\nexport type TLPointerEventInfo = PointerEventInfo\nexport type TLClickEventInfo = ClickEventInfo\nexport type TLKeyboardEventInfo = KeyboardEventInfo\nexport type TLWheelEventInfo = WheelEventInfo\nexport type TLHandle = ShapeHandle\nexport type TLSelectionHandle = SelectionHandle\nexport type TLResizeInfo<T extends UnknownShape> = ResizeInfo<T>\nexport type TLShapeUtilConstructor<T extends UnknownShape = UnknownShape> = ShapeUtilConstructor<T>\nexport type TLStateNodeConstructor = StateNodeConstructor\nexport type TLBindingUtilConstructor = BindingUtilConstructor\nexport type TLAnyShapeUtilConstructor = ShapeUtilConstructor\nexport type TLAnyBindingUtilConstructor = BindingUtilConstructor\n\n// ---- values -----------------------------------------------------------------\n/** The batteries-included component. */\nexport const Tldraw = Mocanvas\n/** The bare canvas (bring your own shapes, tools and UI). */\nexport const TldrawEditor = Canvas\nexport const createTLStore = createStore\nexport const createTLSchema = createSchema\nexport type TLEditor = Editor\n\n// ---- custom shape and binding authoring -------------------------------------\n// The two base types a custom shape/binding is declared with. `Props` is the\n// object registered in `TLGlobalShapePropsMap` / `TLGlobalBindingPropsMap`.\nexport type TLBaseShape<Type extends string, Props extends object> = BaseShape<Type, Props>\nexport type TLBaseBinding<Type extends string, Props extends object> = BaseBinding<Type, Props>\n\n// ---- assets -----------------------------------------------------------------\nexport type TLAsset = Asset\nexport type TLAssetId = AssetId\nexport type TLAssetStore = AssetStore\n\n// ---- users and presence -----------------------------------------------------\nexport type TLUser = User\nexport type TLUserStore = UserStore\nexport type TLCurrentUser = CurrentUser\nexport type TLUserPreferences = UserPreferencesState\nexport type TLInstancePresence = InstancePresence\nexport type TLInstancePresenceID = InstancePresenceId\n/** The `Tldraw`-spelled identity hook. */\nexport const useTldrawCurrentUser = useCurrentUser\n\n// ---- embeds -----------------------------------------------------------------\nexport type TLEmbedDefinition = EmbedDefinition\n\n\n// ---- the documented `TL*` spellings ------------------------------------------\n//\n// Everything below is a name tldraw's reference documents and this package did\n// not carry. Each is a pure alias of a type mocanvas already exports unprefixed:\n// the capability was never missing, only the spelling a migrating codebase\n// imports it by. Kept in step by `pnpm --filter bench api-coverage`.\n\n// ---- events the tools and the editor emit ------------------------------------\nexport type TLBaseEventInfo = BaseEventInfo\nexport type TLCancelEventInfo = CancelEventInfo\nexport type TLCompleteEventInfo = CompleteEventInfo\nexport type TLEventHandlers = EventHandlers\nexport type TLInterruptEventInfo = InterruptEventInfo\nexport type TLKeyboardEventName = KeyboardEventName\nexport type TLPinchEventInfo = PinchEventInfo\nexport type TLPointerEventName = PointerEventName\nexport type TLTickEventInfo = TickEventInfo\n\n// ---- per-shape props ---------------------------------------------------------\nexport type TLArrowShapeProps = ArrowShapeProps\nexport type TLBookmarkShapeProps = BookmarkShapeProps\nexport type TLDrawShapeProps = DrawShapeProps\nexport type TLEmbedShapeProps = EmbedShapeProps\nexport type TLFrameShapeProps = FrameShapeProps\nexport type TLGeoShapeProps = GeoShapeProps\nexport type TLImageShapeProps = ImageShapeProps\nexport type TLLineShapeProps = LineShapeProps\nexport type TLNoteShapeProps = NoteShapeProps\nexport type TLTextShapeProps = TextShapeProps\nexport type TLVideoShapeProps = VideoShapeProps\n\n// ---- shapes ------------------------------------------------------------------\nexport type TLBookmarkShape = BookmarkShape\nexport type TLEmbedShape = EmbedShape\nexport type TLImageShape = ImageShape\nexport type TLVideoShape = VideoShape\n\n// ---- assets ------------------------------------------------------------------\nexport type TLAssetContext = AssetContext\nexport type TLAssetPartial<A extends Asset = Asset> = AssetPartial<A>\nexport type TLBaseAsset<Type extends string, Props extends object> = BaseAsset<Type, Props>\nexport type TLBookmarkAsset = BookmarkAsset\nexport type TLImageAsset = ImageAsset\nexport type TLVideoAsset = VideoAsset\n\n// ---- records and their ids ---------------------------------------------------\nexport type TLBindingCreate<B extends UnknownBinding = UnknownBinding> = BindingCreate<B>\nexport const TLDOCUMENT_ID = DOCUMENT_ID\nexport const TLINSTANCE_ID = INSTANCE_ID\nexport type TLInstanceId = InstanceId\nexport type TLInstancePageStateId = InstancePageStateId\nexport type TLPropsMigration = PropsMigration\nexport type TLPropsMigrations = PropsMigrations\nexport type TLRichText = RichText\nexport type TLScribble = Scribble\nexport type TLSerializedStore = SerializedStore<EditorRecord>\nexport type TLStoreSchema = TLSchema\nexport type TLUnknownBinding = UnknownBinding\nexport type TLUserId = UserId\n\n// ---- options, props and the rest ----------------------------------------\nexport type TLArrowBindingProps = ArrowBindingProps\nexport type TLArrowBindings = ArrowBindings\nexport type TldrawEditorStoreProps = EditorStoreProps\nexport type TldrawProps = MocanvasProps\nexport type TLEditorOptions = EditorOptions\nexport type TLExternalContent = ExternalContent\nexport type TLResizeShapeOptions = ResizeShapeOptions\nexport type TLSvgExportOptions = SvgExportOptions\n\n// `TldrawUiMenuItem` used to be aliased here, back when the flagship only had\n// `MocanvasUiMenuItem`. The UI layer now exports the documented name itself, and\n// an alias here would shadow it — so there is nothing to add.\n"]}

package/package.json

@@ -1,18 +1,9 @@
 {
   "name": "@mocanvas/compat",
-  "version": "1.0.0",
+  "version": "4.0.1",
   "description": "TL-prefixed aliases over the mocanvas API, for projects migrating an existing tldraw app.",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "author": "Symbio Digital",
-  "homepage": "https://github.com/SYMBIO/mocanvas/tree/main/packages/compat#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/SYMBIO/mocanvas.git",
-    "directory": "packages/compat"
-  },
-  "bugs": {
-    "url": "https://github.com/SYMBIO/mocanvas/issues"
-  },
   "keywords": [
     "tldraw",
     "compat",
@@ -22,12 +13,19 @@
   ],
   "type": "module",
   "engines": {
-    "node": ">=20"
+    "node": ">=22.12.0"
   },
   "files": [
     "dist",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "ARCHITECTURE.md",
+    "BENCHMARK.md",
+    "CLEAN_ROOM.md",
+    "COMPAT.md",
+    "CUSTOM_SHAPES.md",
+    "MIGRATION.md",
+    "UI.md"
   ],
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -43,10 +41,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@mocanvas/editor": "1.0.0",
-    "@mocanvas/mocanvas": "1.0.0",
-    "@mocanvas/state": "1.0.0",
-    "@mocanvas/store": "1.0.0"
+    "@mocanvas/editor": "4.0.1",
+    "@mocanvas/state": "4.0.1",
+    "@mocanvas/mocanvas": "4.0.1",
+    "@mocanvas/store": "4.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",