@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/canvas/settingsPopover.tsx

@@ -0,0 +1,257 @@
+// The selected block's settings, over the canvas: beside the block where there is room
+// (popoverPlacement.ts). A grip in the popover's free corner resizes it; the size the author
+// settles on is their wish for every popover after (popoverSize.ts), fitted to the room each
+// one gets. The same NodeSettings a settings panel would show — the canvas only decides where
+// it goes and how big it may be.
+//
+// The wish is a LEAST size: a form with more in it grows taller, up to the room there is, and a
+// form with a wide field (a paragraph's text, `data-wide-field`) widens the card for it — the
+// popover tells the canvas what its content asks for (`onContent`), the canvas places it. The
+// rest of the form keeps the wished width (canvas.css), so a wide text does not stretch a select.
+//
+// ONE PIECE WITH THE SELECTION: laid against the block (popoverPlacement.ts), the popover wears the
+// selection's square blue frame and laps over the block's own by its 2px — where the two meet (the
+// seam) they share one line, the way a tab and its panel do.
+//
+// LOADING: the block's form is its module's, loaded when the settings open. Until it has arrived
+// (the host marks it `data-form-loading`) the popover is laid out and measured but unseen, and the
+// canvas turns the settings button meanwhile (`onLoading`): the card appears once, whole, where it
+// stays — not a header in one place first and the full form in another a moment later.
+//
+// TABS: the settings come in sections that name their tab (settingsTabs.ts) — Main, Styles, Other.
+// The popover shows one tab at a time, and the tab bar only when there is more than one; the
+// author's last pick is the tab every popover after opens on, where the block has it.
+//
+// VERSION: the head names where the block comes from — its distribution and the version the page
+// names — whatever tab is shown; a newer one deployed is marked beside it (the Main tab says how to
+// move to it). A prefab is live and a tool's block runs at its latest: neither shows one.
+import { useLayoutEffect, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';
+import type { EditingSession, IEditingState } from '@mosetta/content';
+import type { IPlacedVersion } from '../content/catalogVersions';
+import { NodeSettings } from '../content/nodeSettings';
+import type { IPopoverPlacement, ISeam } from './popoverPlacement';
+import { DEFAULT_POPOVER_SIZE, gripCornerOf, resizeBox, type IPopoverSize, type IResizedBox } from './popoverSize';
+import { readSettingsTab, SETTINGS_TABS, shownTab, tabOf, tabsIn, writeSettingsTab, type TSettingsTab } from './settingsTabs';
+
+/**
+ * The localStorage of the WINDOW this renders in — not the bare global, which in a host running the
+ * tree in another realm (a test's jsdom window) is someone else's — or null where reading it throws
+ * (blocked site data, sandboxing).
+ */
+function storageOrNull(): Storage | null {
+  try {
+    return typeof window === 'undefined' ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+const nameOf = (reference: string) => /_n_(.+?)_v_/.exec(reference)?.[1] ?? reference;
+
+interface IDrag {
+  /** the placement at the grab: the edges opposite the grip stay where they were */
+  readonly placement: IPopoverPlacement;
+  readonly start: { readonly width: number; readonly height: number };
+  readonly from: { readonly x: number; readonly y: number };
+  /** client pixels per stage pixel (an emulated viewport scales the stage) */
+  readonly scale: number;
+  readonly box: IResizedBox;
+}
+
+/** what the form inside asks for: its height with room enough, and whether it holds a wide field */
+export interface IPopoverContent {
+  readonly height: number;
+  readonly wide: boolean;
+}
+
+export function SettingsPopover({ session, state, hidden, placement, size, onResize, onContent, onLoading, onClose, seam, seamGhost, stage, reference, placed }: {
+  session: EditingSession;
+  state: IEditingState;
+  /** out of the way for a moment (the page scrolls, the block is out of sight) — kept, not closed */
+  hidden: boolean;
+  placement: IPopoverPlacement;
+  /** the author's wished size; the placement already fitted its width */
+  size: IPopoverSize;
+  onResize(size: IPopoverSize): void;
+  onContent(content: IPopoverContent): void;
+  /** whether the block's form is still on its way — the popover is unseen meanwhile */
+  onLoading?(loading: boolean): void;
+  /** the settings put away — the block stays selected */
+  onClose(): void;
+  /** where the popover joins the block's frame — one line shared with it there */
+  seam?: ISeam | null;
+  /** the place under the block, when the popover lies there: it rides on the seam, in the head */
+  seamGhost?: ReactNode;
+  stage: { width: number; height: number };
+  reference: string;
+  /** the distribution and version the block comes from, when it names one */
+  placed?: IPlacedVersion | null;
+}) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const [drag, setDrag] = useState<IDrag | null>(null);
+  // the form on its way: unseen until it arrives (a block without a form arrives at once — the
+  // first layout effect says so before anything is painted)
+  const [loading, setLoading] = useState(true);
+  // told in the same commit — the button stops turning as the card appears, not a tick later
+  useLayoutEffect(() => onLoading?.(loading), [loading, onLoading]);
+  useLayoutEffect(() => () => onLoading?.(false), [onLoading]);
+  // the tabs the sections fill, and the one the author picked last
+  const [tabs, setTabs] = useState<readonly TSettingsTab[]>([]);
+  const [wishedTab, setWishedTab] = useState<TSettingsTab>(() => readSettingsTab(storageOrNull()));
+  const tab = shownTab(tabs, wishedTab);
+  const pickTab = (next: TSettingsTab) => {
+    setWishedTab(next);
+    writeSettingsTab(storageOrNull(), next);
+  };
+  const place = drag?.placement ?? placement;
+  const corner = gripCornerOf(place);
+  // the wished height is the least one; more content grows the card, up to the room there is
+  const least = size.height !== null ? Math.min(size.height, placement.maxHeight) : undefined;
+  const style: CSSProperties & Record<'--settings-wish-width', string> = {
+    left: `${drag ? drag.box.x : placement.x}px`,
+    width: `${drag ? drag.box.width : placement.width}px`,
+    maxHeight: `${place.maxHeight}px`,
+    ...(drag ? { height: `${drag.box.height}px` } : least !== undefined ? { minHeight: `${least}px` } : {}),
+    top: `${place.y}px`,
+    ...(place.fromBottom ? { transform: 'translateY(-100%)' } : {}),
+    // the width the author wished for: what the form's ordinary controls keep (canvas.css)
+    '--settings-wish-width': `${size.width}px`,
+  };
+
+  // what the content asks for, told whenever it changes: the height it would take with room (the
+  // card's own chrome plus the whole scrolled body) and whether a wide field is on the tab shown —
+  // and which tabs its sections fill, as the mounted form comes and changes
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const body = bodyRef.current;
+    if (!root || !body) return undefined;
+    let told: IPopoverContent | null = null;
+    const tell = () => {
+      setLoading(body.querySelector('[data-form-loading]') !== null);
+      const found = tabsIn(body);
+      setTabs((prev) => (prev.join('|') === found.join('|') ? prev : found));
+      const showing = body.getAttribute('data-settings-tab');
+      const wide = [...body.querySelectorAll('[data-wide-field]')].some((field) => !showing || tabOf(field) === showing);
+      const next = { height: root.offsetHeight - body.clientHeight + body.scrollHeight, wide };
+      if (told && told.wide === next.wide && Math.abs(told.height - next.height) < 2) return;
+      told = next;
+      onContent(next);
+    };
+    tell();
+    const view = root.ownerDocument.defaultView;
+    const resize = view?.ResizeObserver ? new view.ResizeObserver(tell) : null;
+    if (body.firstElementChild) resize?.observe(body.firstElementChild);
+    const mutations = view?.MutationObserver ? new view.MutationObserver(tell) : null;
+    // the tab shown is an attribute of the body: switching it is a change of content too
+    // …and so is the form's arrival
+    mutations?.observe(body, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-settings-tab', 'data-form-loading'] });
+    return () => {
+      resize?.disconnect();
+      mutations?.disconnect();
+    };
+  }, [onContent]);
+
+  const grab = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const root = rootRef.current;
+    if (!root || e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    const rect = root.getBoundingClientRect();
+    const scale = placement.width > 0 && rect.width > 0 ? rect.width / placement.width : 1;
+    const start = { width: placement.width, height: rect.height / scale };
+    setDrag({ placement, start, from: { x: e.clientX, y: e.clientY }, scale, box: { x: placement.x, ...start } });
+  };
+  const follow = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!drag) return;
+    const delta = { dx: (e.clientX - drag.from.x) / drag.scale, dy: (e.clientY - drag.from.y) / drag.scale };
+    setDrag({ ...drag, box: resizeBox(drag.placement, drag.start, delta, stage) });
+  };
+  const release = () => {
+    if (!drag) return;
+    onResize({ width: Math.round(drag.box.width), height: Math.round(drag.box.height) });
+    setDrag(null);
+  };
+
+  return (
+    <div ref={rootRef}
+         className={`canvas-view__settings${drag ? ' canvas-view__settings--resizing' : ''}${corner.vertical === 'top' ? ' canvas-view__settings--grip-top' : ''}${hidden || loading ? ' canvas-view__settings--hidden' : ''}${seam ? ' canvas-view__settings--joined' : ''}`}
+         style={style}
+         data-test-id="canvas-settings"
+         data-settings-hidden={hidden || undefined}
+         data-settings-loading={loading || undefined}
+         aria-busy={loading || undefined}
+         data-settings-side={placement.side}
+         data-settings-seam={seam?.edge}
+         // the canvas's own pointer and key handling is for the page, not for the form
+         onMouseDown={(e) => e.stopPropagation()}>
+      <div className="canvas-view__settings-head">
+        <span className="canvas-view__settings-name">{nameOf(reference)}</span>
+        <span className="canvas-view__settings-id">{state.selectedNodeId}</span>
+        {placed ? (
+          <span className="canvas-view__settings-version"
+                data-test-id="canvas-settings-version"
+                data-newer={placed.newer ?? undefined}
+                data-tooltip={placed.newer
+                  ? `This page uses ${placed.namespace} ${placed.version}; ${placed.newer} is out — the Main tab updates the block`
+                  : 'The tile palette and version this block comes from'}>
+            {`${placed.namespace}@${placed.version}`}
+            {placed.newer ? <span className="canvas-view__settings-newer">{`↑ ${placed.newer}`}</span> : null}
+          </span>
+        ) : null}
+        {seamGhost ? <span className="canvas-view__settings-seam-ghost">{seamGhost}</span> : null}
+        <button type="button"
+                className="canvas-view__settings-action"
+                data-test-id="canvas-settings-close"
+                data-tooltip="Put the settings away — the block stays selected"
+                aria-label="Close settings"
+                onClick={onClose}>
+          ×
+        </button>
+      </div>
+      {tabs.length > 1 ? (
+        <div className="canvas-view__settings-tabs"
+             role="tablist"
+             aria-label="Settings">
+          {SETTINGS_TABS.filter((entry) => tabs.includes(entry.id)).map((entry) => (
+            <button key={entry.id}
+                    type="button"
+                    role="tab"
+                    className={`canvas-view__settings-tab${entry.id === tab ? ' canvas-view__settings-tab--on' : ''}`}
+                    data-test-id="canvas-settings-tab"
+                    data-tab={entry.id}
+                    data-tooltip={entry.hint}
+                    aria-selected={entry.id === tab}
+                    onClick={() => pickTab(entry.id)}>
+              {entry.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      <div ref={bodyRef}
+           className="canvas-view__settings-body"
+           data-settings-tab={tab}>
+        <NodeSettings session={session}
+                      state={state} />
+      </div>
+      <div className={`canvas-view__settings-grip canvas-view__settings-grip--${corner.vertical}-${corner.horizontal}`}
+           data-test-id="canvas-settings-grip"
+           data-tooltip="Drag to resize the settings — the size is remembered · double-click for the default"
+           aria-hidden="true"
+           onPointerDown={grab}
+           onPointerMove={follow}
+           onPointerUp={release}
+           onPointerCancel={release}
+           onDoubleClick={() => onResize(DEFAULT_POPOVER_SIZE)}>
+        <svg viewBox="0 0 10 10">
+          <path d="M9 3L3 9M9 6.5L6.5 9"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round" />
+        </svg>
+      </div>
+    </div>
+  );
+}

package/tiles/canvas/settingsTabs.ts

@@ -0,0 +1,78 @@
+// The settings popover's TABS. The catalog is the editor's own — what the tabs are, in what order,
+// what they are called; a section of the settings only says which tab it belongs to. A block's
+// form says it by wrapping a section (`<BlockInspector tab="styles">` writes the attribute below,
+// the kit's styler wears it), the editor's own sections say it the same way. Anything a form leaves
+// unnamed is the block's main settings; a name the catalog does not know goes under Other.
+//
+// Read off the DOM, like the reference circles' `data-field`: the form is a mounted application of
+// its own, and the attribute is the whole contract between it and the popover around it.
+
+export const INSPECTOR_TAB_ATTRIBUTE = 'data-inspector-tab';
+
+/** the class of the element a block's form is mounted into — where unnamed content means "main" */
+export const FORM_HOST_CLASS = 'settings__form-host';
+
+export const SETTINGS_TABS = [
+  { id: 'main', label: 'Main', hint: 'What the block is: its content and its options' },
+  { id: 'styles', label: 'Styles', hint: 'How the block looks: the styles of its parts' },
+  { id: 'other', label: 'Other', hint: 'Everything else: server rendering, the fields a prefab opens…' },
+] as const;
+
+export type TSettingsTab = (typeof SETTINGS_TABS)[number]['id'];
+
+/** a section's own name, as the catalog knows it */
+export const catalogTabOf = (name: string | null): TSettingsTab => (name === 'main' || name === 'styles' ? name : name ? 'other' : 'main');
+
+/** the tab an element of the settings shows under: its nearest named section's, or main */
+export function tabOf(element: Element): TSettingsTab {
+  return catalogTabOf(element.closest(`[${INSPECTOR_TAB_ATTRIBUTE}]`)?.getAttribute(INSPECTOR_TAB_ATTRIBUTE) ?? null);
+}
+
+/** elements that carry no content of their own */
+const SILENT = new Set(['STYLE', 'LINK', 'SCRIPT', 'TEMPLATE']);
+
+/** whether a form host holds anything outside every named section — its main settings */
+function hasUnnamed(element: Element): boolean {
+  for (const child of element.children) {
+    if (SILENT.has(child.tagName) || child.hasAttribute(INSPECTOR_TAB_ATTRIBUTE)) continue;
+    if (!child.querySelector(`[${INSPECTOR_TAB_ATTRIBUTE}]`)) return true;
+    if (hasUnnamed(child)) return true;
+  }
+  return false;
+}
+
+/** the tabs the sections of a settings body fill, in the catalog's order */
+export function tabsIn(body: Element): TSettingsTab[] {
+  const found = new Set<TSettingsTab>();
+  for (const section of body.querySelectorAll(`[${INSPECTOR_TAB_ATTRIBUTE}]`)) {
+    found.add(catalogTabOf(section.getAttribute(INSPECTOR_TAB_ATTRIBUTE)));
+  }
+  for (const host of body.querySelectorAll(`.${FORM_HOST_CLASS}`)) {
+    if (hasUnnamed(host)) found.add('main');
+  }
+  return SETTINGS_TABS.map((tab) => tab.id).filter((id) => found.has(id));
+}
+
+/** the tab a body shows when the author's last pick is not among its tabs: the first one */
+export function shownTab(tabs: readonly TSettingsTab[], wished: TSettingsTab): TSettingsTab {
+  return tabs.includes(wished) ? wished : tabs[0] ?? 'main';
+}
+
+const TAB_STORAGE_KEY = 'mosetta:settings-tab';
+
+/** the author's last pick, remembered across popovers and reloads (any storage failure: main) */
+export function readSettingsTab(storage: Storage | null): TSettingsTab {
+  try {
+    return catalogTabOf(storage?.getItem(TAB_STORAGE_KEY) ?? null);
+  } catch {
+    return 'main';
+  }
+}
+
+export function writeSettingsTab(storage: Storage | null, tab: TSettingsTab): void {
+  try {
+    storage?.setItem(TAB_STORAGE_KEY, tab);
+  } catch {
+    // a blocked storage forgets the pick — the tab still switches
+  }
+}

package/tiles/canvas/toolPanel.tsx

@@ -0,0 +1,86 @@
+// An EDITOR TOOL over the canvas (ADR-0062, canvasTools.ts): the tool's node mounted over the stage
+// — the tree beside the canvas stays in sight — in a DI scope of its own that holds what the tool
+// works on. Each canvas mounts its own copy under an id of its own: two tabs with the tool open
+// are two tools, not one node twice.
+import { BlueprintNodeRenderer, ProvideDiScope, useDi, useDiScope } from '@mosetta/react';
+import { BlockScope, DI_CONTAINER_TOKEN } from '@mosetta/di';
+import type { EditingSession } from '@mosetta/content';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+import { CANVAS_TOOL_TOKEN } from './canvasTools';
+import type { IToolNode } from './canvasTools';
+
+/** how long a tool waits for the preview's fonts before it reads none — a cold workbench brings its preview in seconds */
+const FONTS_PATIENCE_MS = 30_000;
+
+export function ToolPanel({ node, instance, session, previewHref, frame, state, onClose }: {
+  node: IToolNode;
+  /** the canvas's own name — the mounted node's id is the tool's and this */
+  instance: string;
+  session: EditingSession;
+  previewHref: string;
+  /** the canvas's preview frame */
+  frame: RefObject<HTMLIFrameElement | null>;
+  /** where the tool's own state is kept — the canvas hands it to the workbench's address */
+  state: { read(): string | null; write(state: string | null): void };
+  onClose: () => void;
+}) {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const parentScope = useDiScope();
+  // read through, so the scope made once keeps answering the current ones
+  const href = useRef(previewHref);
+  href.current = previewHref;
+  const close = useRef(onClose);
+  close.current = onClose;
+  const kept = useRef(state);
+  kept.current = state;
+  const [scope] = useState(() => {
+    const toolScope = new BlockScope(parentScope);
+    di.registerScope(toolScope);
+    di.registerValueOfToken(CANVAS_TOOL_TOKEN, {
+      session,
+      previewHref: () => href.current,
+      loadedFonts: async () => {
+        const deadline = Date.now() + FONTS_PATIENCE_MS;
+        for (;;) {
+          let document: Document | null | undefined;
+          try {
+            document = frame.current?.contentWindow?.document;
+          } catch {
+            return []; // a frame of another origin keeps its document to itself
+          }
+          // the preview's own document, not the blank one a frame starts with
+          if (document && document.readyState === 'complete' && document.location.href !== 'about:blank') {
+            const fonts = (document as Document & { fonts?: FontFaceSet }).fonts;
+            if (!fonts) return [];
+            await fonts.ready;
+            return [...fonts].filter((face) => face.status === 'loaded').map(({ family, weight, style, unicodeRange }) => ({ family, weight, style, unicodeRange }));
+          }
+          if (Date.now() > deadline) return [];
+          await new Promise((resolve) => setTimeout(resolve, 200));
+        }
+      },
+      readState: () => kept.current.read(),
+      writeState: (next: string | null) => kept.current.write(next),
+      close: () => close.current(),
+    }, toolScope);
+    return toolScope;
+  });
+  useEffect(() => () => di.disposeScope(scope), [di, scope]);
+  const mounted = useMemo(() => ({
+    id: `${node.id}-${instance}`,
+    reference: node.reference,
+    children: [],
+    ...(node.settings ? { settings: node.settings } : {}),
+  }), [node.id, node.reference, node.settings, instance]);
+  return (
+    <div className="canvas-view__tool"
+         data-test-id="canvas-tool"
+         data-tool={node.id}>
+      <ProvideDiScope scope={scope}>
+        <BlueprintNodeRenderer moduleTreeNode={mounted}
+                               inheritedSsr={false} />
+      </ProvideDiScope>
+    </div>
+  );
+}

package/tiles/content/autoBind.ts

@@ -0,0 +1,61 @@
+// AUTO-BINDING: a provider that takes new blocks under its wing (a node's `autoBind`, switched
+// in its settings) links the bindable fields of ITS TYPE of every block that arrives in its reach
+// — inserted, pasted — in the very step of the arrival: EditingSession.amendStep folds the links
+// into it, and one Ctrl+Z takes the block and its links back together. A text placed on a page
+// with i18n set so is in i18n from its first moment, counted among the untranslated at once.
+//
+// Watched from the session, not wired into each way a block can arrive: whatever step put new
+// nodes on the page is the step that gets their links. Each step is looked at once — an undo
+// that brings an older insert back to the top of the history is no arrival.
+import type { EditingSession, IBlueprintNodeDoc, IPageAction, IPageDoc } from '@mosetta/content';
+import type { RefsEditing } from './refsEditing';
+
+const ARRIVALS = new Set<IPageAction['type']>(['insert', 'paste']);
+
+function idsOf(node: IBlueprintNodeDoc | IPageDoc, into: Set<string> = new Set()): Set<string> {
+  into.add(node.id);
+  for (const child of node.children ?? []) idsOf(child, into);
+  return into;
+}
+
+/** whether some node of the page takes new blocks under its wing — nothing to do on most pages */
+function anyKeeper(node: IBlueprintNodeDoc | IPageDoc): boolean {
+  if ((node as { autoBind?: boolean }).autoBind) return true;
+  return (node.children ?? []).some(anyKeeper);
+}
+
+/** the nodes the last step put on the page: in the page now, not in the page it was before */
+function arrivedIn(doc: IPageDoc): string[] {
+  const before = doc.history?.[doc.history.length - 1]?.before;
+  if (!before) return [];
+  const had = idsOf(before);
+  return [...idsOf(doc)].filter((id) => !had.has(id));
+}
+
+/** starts watching `session`; the returned function stops */
+export function watchArrivals(session: EditingSession, refs: RefsEditing): () => void {
+  const seen = new WeakSet<IPageAction>();
+  const look = (): void => {
+    const { doc } = session.snapshot();
+    const step = doc?.history?.[doc.history.length - 1]?.action;
+    if (!doc || !step || seen.has(step)) return;
+    seen.add(step);
+    if (!ARRIVALS.has(step.type) || !anyKeeper(doc)) return;
+    const arrived = arrivedIn(doc);
+    if (!arrived.length) return;
+    void (async () => {
+      // the providers' adapters and the blocks' declarations are module code: load what the page names
+      await refs.loadAll(doc);
+      const now = session.snapshot();
+      if (!now.doc) return;
+      // computed on the page as it is NOW — the author may have typed meanwhile
+      const patches = refs.autoBindPatches(now.doc, arrived, now.views);
+      session.amendStep(step, patches);
+    })();
+  };
+  // whatever the page already holds is no arrival
+  const start = session.snapshot().doc?.history;
+  const last = start?.[start.length - 1]?.action;
+  if (last) seen.add(last);
+  return session.subscribe(look);
+}