@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/blockVariants.ts

@@ -0,0 +1,185 @@
+// A block's VARIANTS as the block's page shows them (ADR-0060), and the PLAYGROUND's settings —
+// plain logic, no react: what the page lists, and the store its form writes into.
+//
+// The list always starts with "Default" — the block as it is placed: its default settings, or, when
+// its `preview` is a tree holding the block, the settings and contents shown there. The variants its
+// editor facet declares follow, each over the defaults; one that names no contents holds Default's.
+// Where the preview shows the block INSIDE something (an item in a list, a theme switch in a theme),
+// every variant is shown in that very frame.
+//
+// The store is the contract a block's form already speaks (SETTINGS_DRAFT_TOKEN: a snapshot, a
+// subscription, a shallow update) — over nothing but itself. No references, no uploads, no
+// document: what is turned in the playground stays there.
+import type { IBlueprintNode } from '@mosetta/core';
+import type { IBlockVariant, ISettingsDraftContract, TPreviewSpec } from '@mosetta/react';
+import { namespaceOfReference } from '@mosetta/content/units';
+import { versionOfReference, withVersion } from '@mosetta/content';
+
+export interface ISpecimen {
+  readonly name: string;
+  readonly description?: string;
+  /** the block's whole settings: its defaults with the variant's over them */
+  readonly settings: Record<string, unknown>;
+  /** what the block holds */
+  readonly children: readonly IBlueprintNode[];
+}
+
+/** what the page needs of a block's editor facet */
+export interface IVariantSource {
+  readonly preview?: TPreviewSpec;
+  readonly variants?: readonly IBlockVariant[];
+}
+
+export const DEFAULT_VARIANT = 'Default';
+
+/**
+ * A facet's own trees AT ITS OWN VERSION: a distribution's preview and variants name its blocks
+ * with the version they were written at (`…_n_text_v_0_0_1`), and the facet of a later version
+ * still says so. Every block of the facet's own distribution is read at the facet's version; a
+ * block of another distribution keeps the version written.
+ */
+export function atOwnVersion<T extends IVariantSource>(facet: T, reference: string): T {
+  const namespace = namespaceOfReference(reference);
+  const version = versionOfReference(reference);
+  if (!namespace || !version) return facet;
+  const own = (nodes: readonly IBlueprintNode[]): IBlueprintNode[] => nodes.map((node) => ({
+    ...node,
+    reference: namespaceOfReference(node.reference) === namespace ? withVersion(node.reference, version) : node.reference,
+    children: own(node.children ?? []),
+  }));
+  return {
+    ...facet,
+    ...(typeof facet.preview === 'object' ? { preview: { ...facet.preview, children: own(facet.preview.children) } } : {}),
+    ...(facet.variants ? { variants: facet.variants.map((variant) => (variant.children ? { ...variant, children: own(variant.children) } : variant)) } : {}),
+  };
+}
+
+/** the block's node in a tree the page mounts, when no preview frame names one */
+export const SPECIMEN_ID = '__specimen';
+
+/** the block's node in a preview tree: the first one of its module, anywhere in it */
+function blockIn(nodes: readonly IBlueprintNode[], reference: string): IBlueprintNode | undefined {
+  for (const node of nodes) {
+    if (node.reference === reference) return node;
+    const inner = blockIn(node.children ?? [], reference);
+    if (inner) return inner;
+  }
+  return undefined;
+}
+
+/** what the preview shows around the block — its tree, and which node of it is the block */
+export interface IVariantFrame {
+  readonly children: readonly IBlueprintNode[];
+  readonly nodeId: string;
+}
+
+/** the frame the facet's preview puts the block in, or null — the block stands alone */
+export function frameOf(reference: string, facet: IVariantSource | undefined): IVariantFrame | null {
+  if (typeof facet?.preview !== 'object') return null;
+  const node = blockIn(facet.preview.children, reference);
+  return node ? { children: facet.preview.children, nodeId: node.id } : null;
+}
+
+/** the tree to mount: the specimen in its frame — or alone */
+export function framed(frame: IVariantFrame | null, reference: string, specimen: Pick<ISpecimen, 'settings' | 'children'>): IBlueprintNode[] {
+  const own = (id: string): IBlueprintNode => ({ id, reference, settings: specimen.settings, children: [...specimen.children] });
+  if (!frame) return [own(SPECIMEN_ID)];
+  const place = (nodes: readonly IBlueprintNode[]): IBlueprintNode[] => nodes.map((node) => (node.id === frame.nodeId
+    ? { ...own(node.id), ...(node.slot !== undefined ? { slot: node.slot } : {}) }
+    : { ...node, children: place(node.children ?? []) }));
+  return place(frame.children);
+}
+
+/** the variants of the block `reference`, Default first */
+export function specimensOf(reference: string, facet: IVariantSource | undefined, defaults: Record<string, unknown>): ISpecimen[] {
+  const shown = typeof facet?.preview === 'object' ? blockIn(facet.preview.children, reference) : undefined;
+  const base: ISpecimen = {
+    name: DEFAULT_VARIANT,
+    settings: { ...defaults, ...(shown?.settings ?? {}) },
+    children: shown?.children ?? [],
+  };
+  const declared = (facet?.variants ?? [])
+    .filter((variant) => typeof variant?.name === 'string' && variant.name.trim() !== '' && variant.name !== DEFAULT_VARIANT)
+    .map((variant): ISpecimen => ({
+      name: variant.name,
+      ...(variant.description ? { description: variant.description } : {}),
+      settings: { ...defaults, ...(variant.settings ?? {}) },
+      children: variant.children ?? base.children,
+    }));
+  return [base, ...declared];
+}
+
+/**
+ * What the playground's settings differ in from the defaults — the `settings` of a variant that
+ * would show them. A setting the defaults do not have is kept; one equal to its default is not.
+ */
+export function settingsOver(settings: Record<string, unknown>, defaults: Record<string, unknown>): Record<string, unknown> {
+  const over: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(settings)) {
+    if (JSON.stringify(value) !== JSON.stringify(defaults[key])) over[key] = value;
+  }
+  return over;
+}
+
+/**
+ * The playground's settings as an entry of `variants`, in JSON — which is also an object literal,
+ * so it pastes into an editor facet as it is
+ */
+export function variantSource(name: string, settings: Record<string, unknown>, defaults: Record<string, unknown>): string {
+  return JSON.stringify({ name, settings: settingsOver(settings, defaults) }, null, 2);
+}
+
+/**
+ * Whether a text is a VARIANT (variantSource): an object with a name and settings — which a page
+ * would take for written words and paste as a paragraph of braces. The editor's paste refuses it
+ * and points to "Copy block".
+ */
+export function isVariantSource(text: string): boolean {
+  const trimmed = text.trim().replace(/,$/, '');
+  if (!trimmed.startsWith('{')) return false;
+  try {
+    const value = JSON.parse(trimmed) as unknown;
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return false;
+    const { name, settings } = value as { name?: unknown; settings?: unknown };
+    return typeof name === 'string' && typeof settings === 'object' && settings !== null && !Array.isArray(settings);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * The playground's settings: a store over itself, in the shape a block's form reads
+ * (`useSettingsDraft`). `reset` puts a variant in — the form and the stage follow.
+ */
+export class PlaygroundDraft implements ISettingsDraftContract {
+  private settings: Record<string, unknown>;
+
+  private readonly listeners = new Set<() => void>();
+
+  constructor(settings: Record<string, unknown>) {
+    this.settings = settings;
+  }
+
+  snapshot = (): Record<string, unknown> => this.settings;
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  update = (patch: Record<string, unknown>): void => {
+    this.settings = { ...this.settings, ...patch };
+    this.notify();
+  };
+
+  reset(settings: Record<string, unknown>): void {
+    this.settings = settings;
+    this.notify();
+  }
+
+  private notify(): void {
+    for (const listener of [...this.listeners]) listener();
+  }
+}

package/tiles/content/blockVocabulary.ts

@@ -0,0 +1,77 @@
+// WHICH blocks a text paste becomes: the splitter needs full references (namespace, name,
+// version), and it must not guess them. Two sources, in order: the catalog the palette has in
+// hand (registered here when it arrives), and the page itself — a document that already shows a
+// mosetta-ui block names the version to use. Neither → the paste is declined with a hint.
+import { DiContainer, SingleDiToken } from '@mosetta/di';
+import { compareVersions } from '@mosetta/content';
+import type { ICatalogEntry, IBlueprintNodeDoc } from '@mosetta/content';
+import type { IBlockVocabulary } from './pasteText';
+
+const UI_NAMESPACE = 'mosetta-ui';
+const NAMES: (keyof IBlockVocabulary)[] = ['heading', 'text', 'list', 'item', 'quote'];
+
+const reference = (version: string, name: string) => `_ns_${UI_NAMESPACE}_t_component_n_${name}_v_${version}`;
+
+const vocabularyAt = (version: string): IBlockVocabulary => Object.fromEntries(NAMES.map((name) => [name, reference(version, name)])) as unknown as IBlockVocabulary;
+
+/**
+ * The ui-kit version the catalog ships, when every text block is there at that version — the
+ * highest such version wins. Taken from the entries' own ids (the canonical encoding of the
+ * version lives there; the reference's `version` is the dotted form).
+ */
+export function vocabularyFromCatalog(entries: readonly ICatalogEntry[]): IBlockVocabulary | null {
+  const byVersion = new Map<string, Partial<Record<keyof IBlockVocabulary, string>>>();
+  for (const e of entries) {
+    if (e.reference.namespace !== UI_NAMESPACE || e.reference.type !== 'component') continue;
+    if (!(NAMES as string[]).includes(e.reference.name)) continue;
+    const names = byVersion.get(e.reference.version) ?? {};
+    names[e.reference.name as keyof IBlockVocabulary] = e.id;
+    byVersion.set(e.reference.version, names);
+  }
+  // the latest first — as versions, not as strings (0.0.10 is after 0.0.9)
+  for (const version of [...byVersion.keys()].sort((a, b) => compareVersions(b, a))) {
+    const names = byVersion.get(version)!;
+    if (NAMES.every((name) => names[name])) return names as IBlockVocabulary;
+  }
+  return null;
+}
+
+const NODE_RE = new RegExp(`^_ns_${UI_NAMESPACE}_t_component_n_[A-Za-z0-9]+_v_(.+)$`);
+
+/** the ui-kit version the PAGE already uses — the first mosetta-ui block met in document order */
+export function vocabularyFromDoc(doc: IBlueprintNodeDoc): IBlockVocabulary | null {
+  const walk = (node: IBlueprintNodeDoc): string | null => {
+    const m = NODE_RE.exec(node.reference);
+    if (m) return m[1];
+    for (const child of node.children ?? []) {
+      const found = walk(child);
+      if (found) return found;
+    }
+    return null;
+  };
+  const version = walk(doc);
+  return version ? vocabularyAt(version) : null;
+}
+
+/**
+ * Held in ONE mutable holder per workbench: every palette that mounts publishes the catalog it
+ * got — closing the palette and opening it again (or a second palette) publishes again, and a
+ * container takes a token once. The latest catalog wins.
+ */
+interface IVocabularyHolder {
+  current: IBlockVocabulary | null;
+}
+
+export const BLOCK_VOCABULARY_TOKEN = new SingleDiToken<IVocabularyHolder>('BLOCK_VOCABULARY_TOKEN');
+
+/** a palette calls this whenever its catalog is in: from then on a text paste knows its blocks */
+export function publishVocabulary(di: DiContainer, entries: readonly ICatalogEntry[]): void {
+  const vocab = vocabularyFromCatalog(entries);
+  if (!vocab) return;
+  if (!di.hasByToken(BLOCK_VOCABULARY_TOKEN)) di.registerValueOfToken(BLOCK_VOCABULARY_TOKEN, { current: null });
+  di.getByToken(BLOCK_VOCABULARY_TOKEN).current = vocab;
+}
+
+export function vocabularyOf(di: DiContainer): IBlockVocabulary | null {
+  return di.hasByToken(BLOCK_VOCABULARY_TOKEN) ? di.getByToken(BLOCK_VOCABULARY_TOKEN).current : null;
+}

package/tiles/content/catalogVersions.ts

@@ -0,0 +1,106 @@
+// THE VERSIONS the catalog holds (ADR-0061): every version of a distribution deployed stays in it,
+// a page names its blocks exactly, and the editor offers the latest by default. Plain logic over
+// the catalog's entries — the picker, the Distributions tab, the tree's marks and the updates
+// window all read it.
+import { compareVersions, versionOfReference, withVersion } from '@mosetta/content';
+import type { ICatalogEntry, IDistributionEntry } from '@mosetta/content';
+import { namespaceOfReference } from '@mosetta/content/units';
+
+/** a block that has a newer version: where it is, and where it would go */
+export interface IUpgrade {
+  /** the reference as the page names it */
+  readonly from: string;
+  /** the same block at the latest version that has it */
+  readonly to: string;
+  readonly namespace: string;
+  readonly name: string;
+  readonly fromVersion: string;
+  readonly toVersion: string;
+}
+
+/** where a placed block comes from: its distribution and the version the page names */
+export interface IPlacedVersion {
+  readonly namespace: string;
+  readonly version: string;
+  /** the latest version that has the block, when it is newer than the placed one */
+  readonly newer: string | null;
+}
+
+/** what a version of a distribution says changed */
+export interface IVersionChanges {
+  readonly version: string;
+  readonly changes: string;
+}
+
+export interface ICatalogVersions {
+  /** the versions of a namespace's distribution, the latest first */
+  versions(namespace: string): readonly string[];
+  /** the latest version of a namespace, or undefined for one the catalog does not know */
+  latest(namespace: string): string | undefined;
+  /** the distribution's own entry at a version (its title, icon, what changed) */
+  distribution(namespace: string, version: string): IDistributionEntry | undefined;
+  /** the newer version of the block a reference names, or null — the latest, or a prefab */
+  upgradeOf(reference: string): IUpgrade | null;
+  /** what each version after `from` up to `to` says it changed, oldest first */
+  changesBetween(namespace: string, from: string, to: string): readonly IVersionChanges[];
+  /**
+   * the distribution and version a placed block names, or null — a prefab is live (no version),
+   * and a tool's block (the editor's page root) always runs at its latest, whatever the page names
+   */
+  placedAt(reference: string): IPlacedVersion | null;
+  /**
+   * a TOOL's block (of an internal distribution — the editor's page root, its fallback) at the
+   * latest version the catalog has, the way the server renders it; any other reference as it is
+   */
+  leadTool(reference: string): string;
+}
+
+const NAME_RE = /_t_component_n_(.+)_v_[A-Za-z0-9_]+$/;
+
+export function catalogVersions(components: readonly ICatalogEntry[], distributions: readonly IDistributionEntry[]): ICatalogVersions {
+  const byNamespace = new Map<string, Set<string>>();
+  // a block's versions, by namespace and name: a block may come into a distribution later, or leave it
+  const byBlock = new Map<string, Set<string>>();
+  for (const entry of components) {
+    const { namespace, name, version } = entry.reference;
+    byNamespace.set(namespace, (byNamespace.get(namespace) ?? new Set()).add(version));
+    byBlock.set(`${namespace}/${name}`, (byBlock.get(`${namespace}/${name}`) ?? new Set()).add(version));
+  }
+  for (const d of distributions) byNamespace.set(d.namespace, (byNamespace.get(d.namespace) ?? new Set()).add(d.version));
+  const sorted = (versions: Set<string> | undefined) => [...(versions ?? [])].sort((a, b) => compareVersions(b, a));
+  const same = (a: string, b: string) => compareVersions(a, b) === 0;
+  const upgradeOf = (reference: string): IUpgrade | null => {
+    const namespace = namespaceOfReference(reference);
+    const name = NAME_RE.exec(reference)?.[1];
+    const fromVersion = versionOfReference(reference);
+    if (!namespace || !name || !fromVersion) return null;
+    const toVersion = sorted(byBlock.get(`${namespace}/${name}`))[0];
+    if (!toVersion || compareVersions(toVersion, fromVersion) <= 0) return null;
+    return { from: reference, to: withVersion(reference, toVersion), namespace, name, fromVersion, toVersion };
+  };
+
+  return {
+    versions: (namespace) => sorted(byNamespace.get(namespace)),
+    latest: (namespace) => sorted(byNamespace.get(namespace))[0],
+    distribution: (namespace, version) => distributions.find((d) => d.namespace === namespace && same(d.version, version)),
+    upgradeOf,
+    changesBetween(namespace, from, to) {
+      return distributions
+        .filter((d) => d.namespace === namespace && compareVersions(d.version, from) > 0 && compareVersions(d.version, to) <= 0)
+        .sort((a, b) => compareVersions(a.version, b.version))
+        .flatMap((d) => (d.changes ? [{ version: d.version, changes: d.changes }] : []));
+    },
+    leadTool(reference) {
+      const namespace = namespaceOfReference(reference);
+      if (!namespace || !distributions.some((d) => d.namespace === namespace && d.internal === true)) return reference;
+      return upgradeOf(reference)?.to ?? reference;
+    },
+    placedAt(reference) {
+      const namespace = namespaceOfReference(reference);
+      const version = versionOfReference(reference);
+      if (!namespace || !version) return null;
+      if (distributions.some((d) => d.namespace === namespace && d.internal === true)) return null;
+      return { namespace, version, newer: upgradeOf(reference)?.toVersion ?? null };
+    },
+  };
+}

package/tiles/content/componentPreview.css

@@ -0,0 +1,82 @@
+/* The block preview bubble (componentPreview.tsx) — shown beside a block row of the palette and
+   of the canvas's insert popover. */
+
+/* THE PREVIEW BUBBLE. In a portal on the document body — the panel scrolls and clips, and this
+   has to leave the dock entirely — so it is positioned in WINDOW coordinates and given a z-index
+   above the dock but below a full-screen preview (which owns the screen outright).
+   Pointer-transparent: it is to be looked at, never reached, and so can never steal the hover
+   that opened it. */
+.palette-preview {
+  position: fixed;
+  z-index: 2147482000;
+
+  /* NO overflow here: clipping lives on the viewport inside — this box must not cut the half of
+     the beak that stands outside it. The width/height styles are the CONTENT's; the padding and
+     the border ride on top of them (content-box), so the frame never eats into what was measured. */
+  box-sizing: content-box;
+  border: 1px solid #e4e4e7;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+  pointer-events: none;
+
+  /* the panel's own font and size are the EDITOR's; a block previewed inside them would inherit
+     a look it will never have on a page. This is as close to "no inherited styles" as the
+     bubble can honestly get. */
+  color: #18181b;
+  font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;
+}
+
+/* the beak, on the row's own line: a square turned 45°, showing the two sides that face out */
+.palette-preview__beak {
+  position: absolute;
+  left: -5px;
+  width: 8px;
+  height: 8px;
+  border-bottom: 1px solid #e4e4e7;
+  border-left: 1px solid #e4e4e7;
+  background: #ffffff;
+  transform: rotate(45deg);
+}
+
+.palette-preview--flipped .palette-preview__beak {
+  right: -5px;
+  left: auto;
+  border-top: 1px solid #e4e4e7;
+  border-right: 1px solid #e4e4e7;
+  border-bottom: 0;
+  border-left: 0;
+}
+
+/* clipping and centering both live here: past the ceiling the specimen is cut, under it the
+   specimen floats in the middle instead of hugging the corner of the box */
+.palette-preview__viewport {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+/* measured at its NATURAL size — the box grows to what it shows, never the other way around;
+   `flex: none` keeps the measurement honest when the specimen is wider than the box.
+   `margin: auto` rather than the container centering: a specimen that FITS floats in the middle,
+   a specimen past the ceiling is cut from its TOP-LEFT — the corner where widgets keep their
+   headers — instead of showing a headless middle slice */
+.palette-preview__content {
+  flex: none;
+  width: max-content;
+  margin: auto;
+}
+
+/* an overlay, not a row: the stage stays mounted underneath, whatever state it is in */
+.palette-preview__failed {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font);
+}