@ai-matrx/canvas 0.4.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/README.md +61 -1
- package/dist/index.cjs +203 -21
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -3
- package/dist/index.d.ts +7 -3
- package/dist/index.js +203 -21
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +998 -293
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +94 -4
- package/dist/react.d.ts +94 -4
- package/dist/react.js +1007 -298
- package/dist/react.js.map +1 -1
- package/dist/styles.css +223 -26
- package/dist/{toggleKind-A9v45oSb.d.cts → toggleKind-BD78LnMB.d.cts} +105 -1
- package/dist/{toggleKind-A9v45oSb.d.ts → toggleKind-BD78LnMB.d.ts} +105 -1
- package/dist/tokens.css +3 -0
- package/package.json +1 -1
|
@@ -37,6 +37,20 @@ type CanvasWindowId = string & {
|
|
|
37
37
|
readonly [windowIdBrand]: true;
|
|
38
38
|
};
|
|
39
39
|
declare const CANVAS_MAIN_WINDOW: CanvasWindowId;
|
|
40
|
+
/**
|
|
41
|
+
* Where a tab was before it navigated in place (`controller.navigate`). Plain
|
|
42
|
+
* JSON, so history persists with the layout; Back reopens the last entry.
|
|
43
|
+
*/
|
|
44
|
+
interface CanvasHistoryEntry {
|
|
45
|
+
readonly kind: string;
|
|
46
|
+
readonly key: string;
|
|
47
|
+
readonly title: string | null;
|
|
48
|
+
readonly data: CanvasJson;
|
|
49
|
+
}
|
|
50
|
+
/** The built-in "New tab" item: the launcher, shown as a tab. Never registered as a kind. */
|
|
51
|
+
declare const CANVAS_LAUNCHER_KIND = "canvas.launcher";
|
|
52
|
+
/** How many steps Back can go in one tab. Older entries fall off. */
|
|
53
|
+
declare const CANVAS_HISTORY_LIMIT = 50;
|
|
40
54
|
interface CanvasItem {
|
|
41
55
|
readonly id: CanvasItemId;
|
|
42
56
|
/** Registered kind id (see `registerCanvasKind`). */
|
|
@@ -48,6 +62,14 @@ interface CanvasItem {
|
|
|
48
62
|
readonly data: CanvasJson;
|
|
49
63
|
readonly openedAt: number;
|
|
50
64
|
readonly updatedAt: number;
|
|
65
|
+
/** Earlier contents of this tab, oldest first (navigate in place). Absent = no Back. */
|
|
66
|
+
readonly history?: readonly CanvasHistoryEntry[] | undefined;
|
|
67
|
+
/**
|
|
68
|
+
* The mounted body's identity. Minted when the item is created and kept by
|
|
69
|
+
* `rekey`, so a draft that receives its durable id keeps its live body.
|
|
70
|
+
* Absent on items saved before 0.5.0 (the item id stands in).
|
|
71
|
+
*/
|
|
72
|
+
readonly instance?: string | undefined;
|
|
51
73
|
}
|
|
52
74
|
interface CanvasPane {
|
|
53
75
|
readonly id: CanvasPaneId;
|
|
@@ -122,6 +144,15 @@ interface CanvasState extends CanvasWindowFrame {
|
|
|
122
144
|
type CanvasOpenTarget = "focused" | "split-right" | "split-down" | {
|
|
123
145
|
readonly paneId: CanvasPaneId;
|
|
124
146
|
};
|
|
147
|
+
/** Where a NEW item of a kind prefers to open while the canvas already shows something. */
|
|
148
|
+
type CanvasPreferredTarget = "focused" | "split-right" | "split-down";
|
|
149
|
+
/** What a tab navigates to in place. */
|
|
150
|
+
interface CanvasNavigateInput {
|
|
151
|
+
readonly kind: string;
|
|
152
|
+
readonly key: string;
|
|
153
|
+
readonly title?: string | null | undefined;
|
|
154
|
+
readonly data?: CanvasJson | undefined;
|
|
155
|
+
}
|
|
125
156
|
interface CanvasOpenInput {
|
|
126
157
|
readonly kind: string;
|
|
127
158
|
/** Which window a NEW item opens in. Default: the controller's window (main). An existing item stays where it is. */
|
|
@@ -184,6 +215,19 @@ type CanvasAction = {
|
|
|
184
215
|
itemId: CanvasItemId;
|
|
185
216
|
key: string;
|
|
186
217
|
};
|
|
218
|
+
} | {
|
|
219
|
+
type: `${typeof P}navigate`;
|
|
220
|
+
payload: {
|
|
221
|
+
itemId: CanvasItemId;
|
|
222
|
+
to: CanvasNavigateInput;
|
|
223
|
+
now: number;
|
|
224
|
+
};
|
|
225
|
+
} | {
|
|
226
|
+
type: `${typeof P}back`;
|
|
227
|
+
payload: {
|
|
228
|
+
itemId: CanvasItemId;
|
|
229
|
+
now: number;
|
|
230
|
+
};
|
|
187
231
|
} | {
|
|
188
232
|
type: `${typeof P}closeItem`;
|
|
189
233
|
payload: {
|
|
@@ -288,6 +332,10 @@ declare const canvasActions: {
|
|
|
288
332
|
}) => CanvasAction;
|
|
289
333
|
/** Gives an item a new identity in place (e.g. a draft that was just saved and now has an id). */
|
|
290
334
|
readonly rekey: (itemId: CanvasItemId, key: string) => CanvasAction;
|
|
335
|
+
/** Replaces a tab's content with another item in place, remembering what it showed (Back returns). */
|
|
336
|
+
readonly navigate: (itemId: CanvasItemId, to: CanvasNavigateInput) => CanvasAction;
|
|
337
|
+
/** Returns a tab to what it showed before its last navigate. */
|
|
338
|
+
readonly back: (itemId: CanvasItemId) => CanvasAction;
|
|
291
339
|
readonly closeItem: (itemId: CanvasItemId) => CanvasAction;
|
|
292
340
|
readonly closeOthers: (itemId: CanvasItemId) => CanvasAction;
|
|
293
341
|
readonly activate: (itemId: CanvasItemId) => CanvasAction;
|
|
@@ -521,6 +569,11 @@ interface CanvasControllerOptions {
|
|
|
521
569
|
readonly windowPorts?: (() => CanvasWindowPorts) | undefined;
|
|
522
570
|
/** Session hooks for a kind, or undefined when the kind is not session-backed. */
|
|
523
571
|
readonly sessions?: ((kind: string) => CanvasSessionHooks | undefined) | undefined;
|
|
572
|
+
/**
|
|
573
|
+
* Where a NEW item of a kind opens while the canvas already shows something
|
|
574
|
+
* (a kind's `preferredTarget`). An explicit `target` always wins.
|
|
575
|
+
*/
|
|
576
|
+
readonly preferredTarget?: ((kind: string) => CanvasPreferredTarget | undefined) | undefined;
|
|
524
577
|
}
|
|
525
578
|
interface CanvasController {
|
|
526
579
|
readonly store: CanvasStoreBinding;
|
|
@@ -537,6 +590,17 @@ interface CanvasController {
|
|
|
537
590
|
}): boolean;
|
|
538
591
|
/** Gives an item a new identity in place (a draft that was saved and now has a durable id). */
|
|
539
592
|
rekey(itemId: CanvasItemId, key: string): CanvasItemId | null;
|
|
593
|
+
/**
|
|
594
|
+
* Replaces a tab's content with another item IN PLACE and records history,
|
|
595
|
+
* so the pane header offers Back. Identity still holds: when the target is
|
|
596
|
+
* already open, it is focused where it is (a launcher tab then closes; any
|
|
597
|
+
* other tab keeps what it shows). Returns the item now shown, or null.
|
|
598
|
+
*/
|
|
599
|
+
navigate(itemId: CanvasItemId, to: CanvasNavigateInput): CanvasItemId | null;
|
|
600
|
+
/** Returns a tab to what it showed before (see navigate). Null when it has no history. */
|
|
601
|
+
back(itemId: CanvasItemId): CanvasItemId | null;
|
|
602
|
+
/** Opens the launcher as a new tab in a pane (default: this window's focused pane), or focuses the one already there. */
|
|
603
|
+
newTab(paneId?: CanvasPaneId): CanvasItemId;
|
|
540
604
|
close(itemId: CanvasItemId): void;
|
|
541
605
|
closeOthers(itemId: CanvasItemId): void;
|
|
542
606
|
activate(itemId: CanvasItemId): void;
|
|
@@ -573,6 +637,46 @@ interface CanvasController {
|
|
|
573
637
|
}
|
|
574
638
|
declare function createCanvasController(options: CanvasControllerOptions): CanvasController;
|
|
575
639
|
|
|
640
|
+
/**
|
|
641
|
+
* Presentation — what a body knows about the space the canvas gives it.
|
|
642
|
+
*
|
|
643
|
+
* A body rendered in the canvas is told so, and told its live shape: a tall
|
|
644
|
+
* narrow pane is not a wide page. Content that lays itself out in a direction
|
|
645
|
+
* (a graph, a timeline, a row of cards) reads `orientation` and flows down a
|
|
646
|
+
* portrait pane instead of across it. Pure data and pure functions, so a
|
|
647
|
+
* desktop main process can compute the same answer for a native view.
|
|
648
|
+
*/
|
|
649
|
+
type CanvasPresentationOrientation = "portrait" | "landscape" | "square";
|
|
650
|
+
interface CanvasPresentation {
|
|
651
|
+
/** Always "canvas" — a body rendered anywhere else gets no presentation at all. */
|
|
652
|
+
readonly host: "canvas";
|
|
653
|
+
/** The body's size in CSS pixels, live. */
|
|
654
|
+
readonly width: number;
|
|
655
|
+
readonly height: number;
|
|
656
|
+
readonly orientation: CanvasPresentationOrientation;
|
|
657
|
+
/** Narrower than `CANVAS_NARROW_WIDTH`: one column of content at most. */
|
|
658
|
+
readonly isNarrow: boolean;
|
|
659
|
+
/** The canvas is expanded to fill the space its host gives it. */
|
|
660
|
+
readonly isFullscreen: boolean;
|
|
661
|
+
/** How many panes the window's canvas shows right now. */
|
|
662
|
+
readonly paneCount: number;
|
|
663
|
+
}
|
|
664
|
+
/** Under this width (px) a body is narrow. */
|
|
665
|
+
declare const CANVAS_NARROW_WIDTH = 480;
|
|
666
|
+
declare function canvasOrientation(width: number, height: number): CanvasPresentationOrientation;
|
|
667
|
+
declare function canvasPresentation(input: {
|
|
668
|
+
readonly width: number;
|
|
669
|
+
readonly height: number;
|
|
670
|
+
readonly isFullscreen: boolean;
|
|
671
|
+
readonly paneCount: number;
|
|
672
|
+
}): CanvasPresentation;
|
|
673
|
+
/**
|
|
674
|
+
* Which way content with a layout direction should flow: "vertical" (top to
|
|
675
|
+
* bottom) in a portrait or narrow body, "horizontal" (left to right) otherwise
|
|
676
|
+
* and outside the canvas.
|
|
677
|
+
*/
|
|
678
|
+
declare function preferredFlowDirection(presentation: CanvasPresentation | null | undefined): "vertical" | "horizontal";
|
|
679
|
+
|
|
576
680
|
/**
|
|
577
681
|
* "Toggle or focus this kind" — what a toolbar icon does (the desktop's
|
|
578
682
|
* Terminal/Review/Browser icons, the web's quick-tool launchers):
|
|
@@ -602,4 +706,4 @@ interface ToggleKindInput {
|
|
|
602
706
|
/** Returns what the item is after the click. */
|
|
603
707
|
declare function toggleKind(controller: CanvasController, input: ToggleKindInput): CanvasKindVisibility;
|
|
604
708
|
|
|
605
|
-
export {
|
|
709
|
+
export { canvasPresentation as $, type CanvasErrorSink as A, type CanvasKeyValueStore as B, type CanvasItemId as C, type CanvasKindVisibility as D, type CanvasLayoutRules as E, type CanvasNavigateInput as F, type CanvasOpenInput as G, type CanvasOpenTarget as H, type CanvasOrientation as I, type CanvasPersistencePort as J, type CanvasPreferredTarget as K, type CanvasPresentation as L, type CanvasPresentationOrientation as M, type CanvasRect as N, type CanvasSessionAttachReason as O, type CanvasSessionDetachReason as P, type CanvasSessionEvent as Q, type CanvasSessionHooks as R, type CanvasSplitId as S, type CanvasWindowCloseMode as T, type CanvasWindowFrame as U, type CanvasWindowPorts as V, type ReduxStoreLike as W, type ToggleKindInput as X, bindCanvasToReduxStore as Y, canvasActions as Z, canvasOrientation as _, type CanvasWindowId as a, canvasReducer as a0, canvasWindowFrame as a1, canvasWindowOfPane as a2, clampDraggedCanvasWidth as a3, consoleCanvasErrorSink as a4, createCanvasController as a5, createCanvasStore as a6, createInitialCanvasState as a7, createKeyValueCanvasPersistence as a8, createLocalStorageCanvasPersistence as a9, defaultCanvasWidth as aa, fitCanvasWidth as ab, foldCanvasWindows as ac, isCanvasAction as ad, listCanvasWindowIds as ae, preferredFlowDirection as af, resolveCanvasLayoutRules as ag, sanitizeCanvasSnapshot as ah, selectCanvasKindVisibility as ai, shouldStackSplit as aj, toPersistableSnapshot as ak, toggleKind as al, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasHistoryEntry as k, type CanvasPane as l, canvasWindowOfItem as m, CANVAS_DEFAULT_KEY as n, CANVAS_DEFAULT_WIDTH as o, CANVAS_DESKTOP_LAYOUT_RULES as p, CANVAS_HISTORY_LIMIT as q, CANVAS_LAUNCHER_KIND as r, CANVAS_MAIN_WINDOW as s, CANVAS_MIN_SPLIT_FRACTION as t, CANVAS_MIN_WIDTH as u, CANVAS_NARROW_WIDTH as v, CANVAS_STORAGE_KEY as w, CANVAS_WEB_LAYOUT_RULES as x, type CanvasControllerOptions as y, type CanvasErrorReport as z };
|
package/dist/tokens.css
CHANGED
|
@@ -32,6 +32,9 @@
|
|
|
32
32
|
--mxc-radius: 10px;
|
|
33
33
|
--mxc-gap: 6px;
|
|
34
34
|
--mxc-header-h: 2.25rem;
|
|
35
|
+
/* THE canvas motion (the shell sidebar's slide). A host reflowing beside the column uses the same pair. */
|
|
36
|
+
--mxc-motion-duration: 600ms;
|
|
37
|
+
--mxc-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
@media (prefers-color-scheme: dark) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ai-matrx/canvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "The AI Matrx canvas: a docked right-hand column with split panes, tabs, full screen, a kind registry, Redux-compatible state and persistence.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|