@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/updatesModal.css

@@ -0,0 +1,124 @@
+/* the updates window: a fixed overlay over the canvas, the publish dialog's sibling */
+.updates-modal__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 10vh;
+  background: rgb(24 24 27 / 35%);
+}
+
+.updates-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(520px, calc(100vw - 32px));
+  max-height: 76vh;
+  overflow-y: auto;
+  padding: 14px 16px 16px;
+  border-radius: 8px;
+  font: var(--mosetta-wb-font, 14px)/1.45 ui-sans-serif, system-ui, sans-serif;
+  color: #27272a;
+  background: #fff;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
+}
+
+.updates-modal__title {
+  font-size: calc(var(--mosetta-wb-font, 14px) + 2px);
+  font-weight: 600;
+  color: #18181b;
+}
+
+.updates-modal__text {
+  color: #52525b;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+}
+
+.updates-modal__group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+}
+
+.updates-modal__group-title {
+  font-weight: 600;
+}
+
+.updates-modal__changes {
+  color: #52525b;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+}
+
+.updates-modal__changes summary {
+  cursor: pointer;
+}
+
+.updates-modal__version {
+  margin-top: 6px;
+}
+
+.updates-modal__version-name {
+  font-weight: 600;
+}
+
+.updates-modal__version pre {
+  margin: 2px 0 0;
+  font: inherit;
+  white-space: pre-wrap;
+}
+
+.updates-modal__blocks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+}
+
+.updates-modal__block {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.updates-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.updates-modal__button {
+  height: calc(var(--mosetta-wb-icon-box, 24px) + 4px);
+  padding: 0 12px;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  font: inherit;
+  color: #27272a;
+  background: #fff;
+  cursor: pointer;
+}
+
+.updates-modal__button:hover {
+  background: #f4f4f5;
+}
+
+.updates-modal__button--main {
+  border-color: #2563eb;
+  color: #fff;
+  background: #2563eb;
+}
+
+.updates-modal__button--main:hover {
+  border-color: #1d4ed8;
+  background: #1d4ed8;
+}
+
+.updates-modal__button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}

package/tiles/content/updatesModal.tsx

@@ -0,0 +1,110 @@
+// "Updates on this page" (ADR-0061): the blocks of the page that have newer versions, by
+// distribution — from which versions to which, what each version on the way says it changed, a
+// checkbox for every block of it the page holds. "Update selected" moves them in ONE undoable step
+// of the draft; the preview and the publication are the author's check, as for any edit.
+// Portalled like the publish dialog, inside the hosting module's scope class.
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { tileScopeClass, useComponent } from '@mosetta/react';
+import type { IUpgradeGroup } from './blockUpgrades';
+import './updatesModal.css';
+
+/** a block of a distribution, as the window selects it */
+export const upgradeKey = (namespace: string, name: string): string => `${namespace}/${name}`;
+
+export function UpdatesModal({ host, groups, busy, onCancel, onConfirm }: {
+  /** the document the dialog goes into — the host module's own */
+  host: Document;
+  groups: readonly IUpgradeGroup[];
+  busy: boolean;
+  onCancel: () => void;
+  /** the blocks to update, by upgradeKey */
+  onConfirm: (selected: ReadonlySet<string>) => void;
+}) {
+  const self = useComponent().reference;
+  const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set(groups.flatMap((g) => g.blocks.map((b) => upgradeKey(g.namespace, b.name)))));
+  const count = groups.reduce((sum, g) => sum + g.blocks.filter((b) => selected.has(upgradeKey(g.namespace, b.name))).reduce((n, b) => n + b.count, 0), 0);
+  const toggle = (key: string) => {
+    const next = new Set(selected);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    setSelected(next);
+  };
+  return createPortal(
+    <div className={tileScopeClass(self)}
+         style={{ display: 'contents' }}>
+      <div className="updates-modal__overlay"
+           data-test-id="updates-modal"
+           onClick={() => {
+             if (!busy) onCancel();
+           }}
+           onKeyDown={(e) => {
+             if (e.key === 'Escape' && !busy) onCancel();
+           }}>
+        <div className="updates-modal"
+             role="dialog"
+             aria-label="Updates on this page"
+             onClick={(e) => e.stopPropagation()}>
+          <div className="updates-modal__title">Updates on this page</div>
+          <div className="updates-modal__text">
+            The page keeps each block at the version it was placed with. Updated here, in the draft —
+            the preview shows the result, publishing makes it the page.
+          </div>
+          {groups.map((group) => (
+            <section key={group.namespace}
+                     className="updates-modal__group"
+                     data-test-id="updates-group"
+                     data-namespace={group.namespace}>
+              <div className="updates-modal__group-title">
+                {`${group.title} ${group.fromVersions.join(', ')} → ${group.toVersion}`}
+              </div>
+              {group.changes.length ? (
+                <details className="updates-modal__changes">
+                  <summary>What changed</summary>
+                  {group.changes.map((entry) => (
+                    <div key={entry.version}
+                         className="updates-modal__version">
+                      <div className="updates-modal__version-name">{entry.version}</div>
+                      <pre>{entry.changes}</pre>
+                    </div>
+                  ))}
+                </details>
+              ) : null}
+              <div className="updates-modal__blocks">
+                {group.blocks.map((block) => {
+                  const key = upgradeKey(group.namespace, block.name);
+                  return (
+                    <label key={key}
+                           className="updates-modal__block">
+                      <input type="checkbox"
+                             data-test-id="updates-block"
+                             data-block={key}
+                             checked={selected.has(key)}
+                             disabled={busy}
+                             onChange={() => toggle(key)} />
+                      {block.count > 1 ? `${block.name} ×${block.count}` : block.name}
+                    </label>
+                  );
+                })}
+              </div>
+            </section>
+          ))}
+          <div className="updates-modal__actions">
+            <button type="button"
+                    className="updates-modal__button"
+                    disabled={busy}
+                    onClick={onCancel}>Cancel</button>
+            <button type="button"
+                    className="updates-modal__button updates-modal__button--main"
+                    data-test-id="updates-confirm"
+                    disabled={busy || count === 0}
+                    onClick={() => onConfirm(selected)}>
+              {busy ? 'Updating…' : `Update selected (${count})`}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    host.body,
+  );
+}

package/tiles/content/useCtrlHeld.ts

@@ -0,0 +1,24 @@
+// Whether Ctrl (or its Mac kin, Cmd) is held RIGHT NOW — the switch between the ordinary blue
+// selection and the yellow multi-selection, shared by every widget that colours by it. Window
+// blur clears the state: the key may well be released over another window, and a modifier that
+// sticks is worse than one that drops.
+import { useEffect, useState } from 'react';
+
+export function useCtrlHeld(): boolean {
+  const [held, setHeld] = useState(false);
+
+  useEffect(() => {
+    const sync = (event: KeyboardEvent): void => setHeld(event.ctrlKey || event.metaKey);
+    const drop = (): void => setHeld(false);
+    window.addEventListener('keydown', sync);
+    window.addEventListener('keyup', sync);
+    window.addEventListener('blur', drop);
+    return () => {
+      window.removeEventListener('keydown', sync);
+      window.removeEventListener('keyup', sync);
+      window.removeEventListener('blur', drop);
+    };
+  }, []);
+
+  return held;
+}

package/tiles/content/useEditingSession.ts

@@ -0,0 +1,115 @@
+// Shared by the workbench's smart widgets (bundled per module — the SESSION instance is shared via
+// DI, and the EditingSession class itself lives in the shared @mosetta/content dependency artifact).
+//
+// Touching the session also brings its AUTOSAVE, CONFLICT interceptor, HOTKEYS and CLIPBOARD into
+// being. All are properties of the workbench rather than of any panel: whichever widget renders
+// first creates them, the rest just poke at them, and closing a panel takes nothing with it. (The
+// open tabs and the address are the WORKSPACE's — the shell creates it before any canvas.)
+import { useDi, useDiOptional } from '@mosetta/react';
+import { useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useComponent } from '@mosetta/react';
+import { DI_CONTAINER_TOKEN } from '@mosetta/di';
+import { DOCK_TAB_TOKEN } from '@mosetta/ui';
+import { EditingSession, editingSessionHubOf, ensureEditingSession, IEditingState } from '@mosetta/content';
+import { ensureEditingAutosave } from './editingAutosave';
+import { ensureEditingHotkeys } from './editingHotkeys';
+import { ensureEditingClipboard } from './editingClipboard';
+import { ensureEditingConflicts } from './editingConflicts';
+
+export function useEditingSession(): { session: EditingSession; state: IEditingState } {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const session = ensureEditingSession(di);
+  // the caller's own name carries the namespace and version the content server module lives under —
+  // the one thing about a server action a container cannot work out for itself
+  const reference = useComponent().reference;
+  ensureEditingAutosave(di, session, reference);
+  ensureEditingConflicts(di, session, reference);
+  ensureEditingHotkeys(di, session);
+  ensureEditingClipboard(di, session);
+  const state = useSyncExternalStore(session.subscribe, session.snapshot, session.snapshot);
+  return { session, state };
+}
+
+/**
+ * The view of editing anchored to the last SELECTION rather than to the active canvas: what the
+ * settings panel (and the palette — an insert lands at the picked place) holds. Hover ACTIVATES
+ * sessions, so the active facade changes under a pointer merely passing over another canvas —
+ * this one switches only when a selection actually changes somewhere. Outside a hub-aware realm
+ * it falls back to the plain shared session, like everything else.
+ */
+export function useSelectionEditingSession(): { session: EditingSession; state: IEditingState } {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const globalSession = ensureEditingSession(di);
+  const reference = useComponent().reference;
+  ensureEditingAutosave(di, globalSession, reference);
+  ensureEditingConflicts(di, globalSession, reference);
+  ensureEditingHotkeys(di, globalSession);
+  ensureEditingClipboard(di, globalSession);
+  const hub = editingSessionHubOf(di);
+  const session = hub ? hub.selection : globalSession;
+  const state = useSyncExternalStore(session.subscribe, session.snapshot, session.snapshot);
+  return { session, state };
+}
+
+/**
+ * The CANVAS's view of editing: its OWN session, scoped to its tab (hub key = tab id) — every
+ * other consumer holds the hub's `active` facade and follows whichever canvas the user last
+ * touched. Binding ADOPTS the default session (work opened before any canvas existed rides
+ * along); mount (of the tab in front), tab activation and `markInteractive` (a pointer inside
+ * the canvas) make this canvas the active one. Outside a hub-aware realm (preview environments, no dock) everything
+ * falls back to the plain shared session.
+ */
+export function useCanvasEditingSession(): {
+  session: EditingSession;
+  state: IEditingState;
+  markInteractive: () => void;
+  markHovered: () => void;
+  markLeft: () => void;
+} {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const reference = useComponent().reference;
+  const globalSession = ensureEditingSession(di);
+  // the services stay bound to the ACTIVE facade: hotkeys and clipboard belong to focus, and the
+  // autosave/conflict pair capture their settle target per request (see editingAutosave)
+  ensureEditingAutosave(di, globalSession, reference);
+  ensureEditingConflicts(di, globalSession, reference);
+  ensureEditingHotkeys(di, globalSession);
+  ensureEditingClipboard(di, globalSession);
+  const hub = editingSessionHubOf(di);
+  const tab = useDiOptional(DOCK_TAB_TOKEN);
+  const session = hub && tab ? hub.sessionFor(tab.id) : globalSession;
+  useEffect(() => {
+    if (!hub || !tab) return;
+    // mounting activates — unless the host says the tab is behind another: a shell keeps every
+    // tab's canvas mounted, and the last one to mount (modules load in their own time) must
+    // not take the tree from the one in front
+    if (tab.front?.() ?? true) hub.activate(tab.id);
+    return tab.onDidActivate(() => hub.activate(tab.id));
+  }, [hub, tab]);
+  // ONE blue block per workspace: this canvas watches the selection anchor, and the moment the
+  // anchor lives elsewhere (a pick happened in another canvas) it SURRENDERS its own blue
+  // selection — quietly (retireSelection carries no act stamp), or the anchor would be stolen
+  // right back by the surrender itself
+  useEffect(() => {
+    if (!hub || !tab) return;
+    const surrender = (): void => {
+      if (hub.anchorKey() !== tab.id) hub.peek(tab.id)?.retireSelection();
+    };
+    surrender();
+    return hub.selection.subscribe(surrender);
+  }, [hub, tab]);
+  const markInteractive = useCallback(() => {
+    if (hub && tab) hub.activate(tab.id);
+  }, [hub, tab]);
+  // the hover pair: pointing at this canvas BORROWS the focus (tree follows while it lasts),
+  // leaving returns a still-borrowed focus to the selection anchor — at rest the tree shows
+  // the canvas of the selected node, not the last one the pointer happened to cross
+  const markHovered = useCallback(() => {
+    if (hub && tab) hub.borrow(tab.id);
+  }, [hub, tab]);
+  const markLeft = useCallback(() => {
+    if (hub && tab) hub.release(tab.id);
+  }, [hub, tab]);
+  const state = useSyncExternalStore(session.subscribe, session.snapshot, session.snapshot);
+  return { session, state, markInteractive, markHovered, markLeft };
+}

package/tiles/content/useMountedTree.ts

@@ -0,0 +1,47 @@
+// The react ADAPTER over the mounter (treeMounter.ts): the mechanism of keeping one hosted
+// application lives in DI, and all this hook adds is react's own bookkeeping — a ref for the
+// element, a failed flag, effects for the panel's lifetime. Shared by the two panels that host:
+// the palette's preview bubble and the settings panel's form.
+import { useEffect, useRef, useState } from 'react';
+import { useDi } from '@mosetta/react';
+import { DI_CONTAINER_TOKEN } from '@mosetta/di';
+import type { DiContainer } from '@mosetta/di';
+import { TILES_HOLDER_TOKEN } from '@mosetta/runtime/client';
+import { ensureTreeMounter } from './treeMounter';
+import { MountedTree } from './mountedTree';
+import type { IMountSpec } from './mountedTree';
+
+/**
+ * Keeps ONE application in the element the returned ref points at. A new tree is handed over
+ * (IMountHandle.render); only a different ROOT — a provider on another binding — is worth
+ * building a new application for. A null spec leaves the application as it is.
+ *
+ * The application's PARENT is the workbench's own container — or `parentDi`, the first one given:
+ * a host that means the mounted form to see something else (the block page's playground, whose
+ * settings are its own) hands it its own door.
+ */
+export function useMountedTree(spec: IMountSpec | null, parentDi?: DiContainer): {
+  ref: React.MutableRefObject<HTMLDivElement | null>;
+  failed: boolean;
+} {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const holder = useDi(TILES_HOLDER_TOKEN);
+  const [mounted] = useState(() => (parentDi ? new MountedTree(holder, parentDi) : ensureTreeMounter(di).create()));
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!spec) return undefined;
+    void mounted.show(spec, () => ref.current).then(
+      (showing) => {
+        if (showing) setFailed(false);
+      },
+      () => setFailed(true),
+    );
+    return () => mounted.cancel();
+  }, [mounted, spec]);
+
+  useEffect(() => () => mounted.dispose(), [mounted]);
+
+  return { ref, failed };
+}

package/tiles/content/workbenchScale.css

@@ -0,0 +1,27 @@
+/* The workbench's TYPE AND ICON SCALE — the one place that decides how big the editor reads.
+   Every editor panel (pages, tree, palette, canvas chrome, settings) sizes its text and icons
+   from these variables, so tuning the two knobs below resizes the whole workbench at once.
+
+   Declared on every element of the panel (`*`), not on :root: a module's css is scoped under
+   the module's own class, so a panel can only style itself — each panel that imports this file
+   declares the same scale for its own subtree. The dock's tab row is not an editor panel: it has
+   its own port (--mosetta-dock-font-size, see the dock's stylesheet). */
+* {
+  /* ---- the knobs ---- */
+  /* body text: rows, the tree, the palette, the canvas toolbar */
+  --mosetta-wb-font: 14px;
+  /* an icon glyph: row actions, toolbar buttons */
+  --mosetta-wb-icon: 16px;
+
+  /* ---- derived: tune the knobs, not these ---- */
+  /* secondary text: search fields, paths, panel headers */
+  --mosetta-wb-font-sm: calc(var(--mosetta-wb-font) - 1px);
+  /* chips and tags */
+  --mosetta-wb-font-xs: calc(var(--mosetta-wb-font) - 2px);
+  /* notes beside a label, the smallest marks */
+  --mosetta-wb-font-2xs: calc(var(--mosetta-wb-font) - 3px);
+  /* a compact glyph: chevrons, marks inside a row */
+  --mosetta-wb-icon-sm: calc(var(--mosetta-wb-icon) - 4px);
+  /* the square an icon button takes */
+  --mosetta-wb-icon-box: calc(var(--mosetta-wb-icon) + 8px);
+}

package/tiles/hostFallback/hostFallback.component.tsx

@@ -0,0 +1,32 @@
+// What the editor shows in place of anything it HOSTED that failed to render — a block's preview
+// in the palette, a settings form in the settings panel.
+//
+// A fallback FACET rather than a message hard-coded into a panel: what a host mounts renders
+// through the ordinary tree renderer, so a module that throws is caught by the ordinary error
+// boundary — which renders the page's fallback. Every synthetic page the editor mounts names this
+// one, and what cannot render says so in the editor's words instead of the exception's.
+import { defineFallbackSide, markInternalTile } from '@mosetta/react';
+import { useError } from '@mosetta/react';
+import '../content/workbenchScale.css';
+import './hostFallback.css';
+import { TooltipHost } from '../content/tooltips';
+
+export default markInternalTile(defineFallbackSide({
+  Component() {
+    const error = useError();
+    return (
+      // the message is for a content manager; the exception itself is one hover away, for whoever
+      // wrote the block
+      <TooltipHost>
+        <div className="host-fallback"
+             data-host-failed
+             data-tooltip={error?.message ?? ''}>
+          Could not render this
+        </div>
+      </TooltipHost>
+    );
+  },
+  defaultSettings() {
+    return {};
+  },
+}));

package/tiles/hostFallback/hostFallback.css

@@ -0,0 +1,12 @@
+/* Fills whatever box the host gave it, so a failure looks like a deliberate state rather than a
+   stray line of text in a corner. */
+.host-fallback {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: #a1a1aa;
+  font: var(--mosetta-wb-font)/1.4 ui-sans-serif, system-ui, sans-serif;
+  text-align: center;
+}

package/tiles/hostFallback/hostFallback.editor.tsx

@@ -0,0 +1,10 @@
+import { defineEditorSide } from '@mosetta/react';
+
+export default defineEditorSide({
+  // standalone — with no error to report — it renders its message box as-is: an honest specimen
+  // of what a failed block will look like
+  preview: 'self',
+  Component() {
+    return <div data-no-settings>This block has no settings.</div>;
+  },
+});

package/tiles/page/page.component.tsx

@@ -0,0 +1,7 @@
+import { defineRootComponentSide } from '@mosetta/react';
+import { defaultReactRoot } from '@mosetta/react/start';
+
+// The editor's ROOT component module: the framework's default root covers it fully — the panels
+// get their server-action slice lazily from useServerAction, nothing editor-specific remains at
+// the root. It doubles as the root the palette mounts previews with (ADR-0034 §5).
+export default defineRootComponentSide(defaultReactRoot);

package/tiles/page/page.script.tsx

@@ -0,0 +1,5 @@
+import { startAndMount } from '@mosetta/react/start';
+// The editor root's script facet: the browser entry of an editor page — start() +
+// unconditional hydrate of this module's Component.
+
+void startAndMount();