@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/pagesPanel/pagesSearch.ts

@@ -0,0 +1,194 @@
+// The pages panel's client-side path search: pure functions, no react. The whole listing is on
+// the client anyway (the panel fetches it in one action), so filtering is local and instant.
+//
+// Matching runs in TIERS — the first tier that matches wins, and results sort by tier first:
+//   0  PREFIX     — the term is the path's beginning: `/app` finds /apple/green/small
+//   1  INITIALS   — the term walks the path's word starts: `ags` finds /apple/green/small
+//                   (word starts = segment starts + camelCase/dash/underscore/digit boundaries)
+//   2  SUBSTRING  — the term sits somewhere inside: `een/sm` finds /apple/green/small
+//   3  SCATTER    — the term is an in-order scatter of characters (fzf-style), tie-broken by how
+//                   tightly the matched characters cluster: `apsm` finds /apple/green/small
+// Every match reports the matched character indices so the UI can highlight them.
+
+export interface IPathMatch {
+  /** the tier that matched (lower is better) */
+  readonly tier: number;
+  /** tie-breaker inside a tier (lower is better) */
+  readonly score: number;
+  /** indices into the PATH string to highlight */
+  readonly indices: readonly number[];
+}
+
+/** where words start in a path: after separators, at camelCase humps, at letter→digit turns */
+export function wordStarts(path: string): number[] {
+  const starts: number[] = [];
+  for (let i = 0; i < path.length; i += 1) {
+    const ch = path[i];
+    if (!/[a-zA-Z0-9]/.test(ch)) continue;
+    const prev = i > 0 ? path[i - 1] : '';
+    const isBoundary = i === 0
+      || !/[a-zA-Z0-9]/.test(prev) // after a separator (/ - _ . {)
+      || (/[a-z]/.test(prev) && /[A-Z]/.test(ch)) // camelCase hump
+      || (/[a-zA-Z]/.test(prev) && /[0-9]/.test(ch)); // letter → digit
+    if (isBoundary) starts.push(i);
+  }
+  return starts;
+}
+
+function prefixMatch(path: string, term: string): IPathMatch | null {
+  // typing without the leading slash is natural — `app` prefixes /apple the same as `/app` does
+  const lower = path.toLowerCase();
+  const wanted = term.toLowerCase();
+  if (lower.startsWith(wanted)) {
+    return { tier: 0, score: path.length, indices: Array.from({ length: term.length }, (_, i) => i) };
+  }
+  if (!wanted.startsWith('/') && lower.startsWith(`/${wanted}`)) {
+    return { tier: 0, score: path.length, indices: Array.from({ length: term.length }, (_, i) => i + 1) };
+  }
+  return null;
+}
+
+function initialsMatch(path: string, term: string): IPathMatch | null {
+  // the term (separators dropped: typing /a/g/s or a-g-s should still work) walks the word
+  // starts IN ORDER — a scatter over initials, so `acd` finds /a/b/c/d too
+  const wanted = term.toLowerCase().replace(/[^a-z0-9]/g, '');
+  if (!wanted) return null;
+  const starts = wordStarts(path);
+  const indices: number[] = [];
+  let cursor = 0;
+  for (const start of starts) {
+    if (cursor >= wanted.length) break;
+    if (path[start].toLowerCase() === wanted[cursor]) {
+      indices.push(start);
+      cursor += 1;
+    }
+  }
+  if (cursor < wanted.length) return null;
+  // tighter runs first: fewer skipped word starts between the first and the last hit
+  const span = indices.length ? indices[indices.length - 1] - indices[0] : 0;
+  return { tier: 1, score: span * 100 + path.length, indices };
+}
+
+function substringMatch(path: string, term: string): IPathMatch | null {
+  const at = path.toLowerCase().indexOf(term.toLowerCase());
+  if (at < 0) return null;
+  return { tier: 2, score: at * 100 + path.length, indices: Array.from({ length: term.length }, (_, i) => at + i) };
+}
+
+function scatterMatch(path: string, term: string): IPathMatch | null {
+  const wanted = term.toLowerCase().replace(/\s+/g, '');
+  if (!wanted) return null;
+  const lower = path.toLowerCase();
+  const indices: number[] = [];
+  let from = 0;
+  for (const ch of wanted) {
+    const at = lower.indexOf(ch, from);
+    if (at < 0) return null;
+    indices.push(at);
+    from = at + 1;
+  }
+  const span = indices[indices.length - 1] - indices[0];
+  return { tier: 3, score: span * 100 + indices[0], indices };
+}
+
+/** null = no match; otherwise the best (lowest) tier that accepted the term */
+export function matchPath(path: string, term: string): IPathMatch | null {
+  const trimmed = term.trim();
+  if (!trimmed) return { tier: 0, score: 0, indices: [] };
+  return prefixMatch(path, trimmed)
+    ?? initialsMatch(path, trimmed)
+    ?? substringMatch(path, trimmed)
+    ?? scatterMatch(path, trimmed);
+}
+
+/** matches sorted best-first; ties inside a tier break by score, then alphabetically */
+export function rankPaths<T>(items: readonly T[], term: string, pathOf: (item: T) => string): Array<{ item: T; match: IPathMatch }> {
+  return items
+    .flatMap((item) => {
+      const match = matchPath(pathOf(item), term);
+      return match ? [{ item, match }] : [];
+    })
+    .sort((a, b) => a.match.tier - b.match.tier
+      || a.match.score - b.match.score
+      || pathOf(a.item).localeCompare(pathOf(b.item)));
+}
+
+/** the path's first segment — the grouping unit ('/' for the root itself) */
+export function groupKeyOf(path: string): string {
+  const segment = path.split('/').filter(Boolean)[0];
+  return segment ? `/${segment}` : '/';
+}
+
+// ---- entity names ------------------------------------------------------------------------------
+
+/** Cyrillic to Latin, letter by letter (a plain, readable transliteration) */
+const CYRILLIC: Record<string, string> = {
+  а: 'a', б: 'b', в: 'v', г: 'g', д: 'd', е: 'e', ё: 'e', ж: 'zh', з: 'z', и: 'i', й: 'y', к: 'k', л: 'l', м: 'm', н: 'n',
+  о: 'o', п: 'p', р: 'r', с: 's', т: 't', у: 'u', ф: 'f', х: 'kh', ц: 'ts', ч: 'ch', ш: 'sh', щ: 'shch', ъ: '', ы: 'y',
+  ь: '', э: 'e', ю: 'yu', я: 'ya', і: 'i', ї: 'yi', є: 'ye', ґ: 'g',
+};
+
+/** the path's letters as Latin: diacritics dropped (é → e), Cyrillic transliterated; the rest stays */
+export function latinize(text: string): string {
+  return text
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[а-яёіїєґ]/gi, (letter) => {
+      const lower = letter.toLowerCase();
+      const out = CYRILLIC[lower] ?? '';
+      return letter === lower ? out : out.charAt(0).toUpperCase() + out.slice(1);
+    });
+}
+
+/**
+ * The entity name is a STORAGE KEY, not a UX concept: the panel speaks in paths, and the key is
+ * derived once at creation (lowerCamel per ENTITY_NAME_RE — `/apple/green/small` → appleGreenSmall)
+ * and never shown. It stays stable afterwards even if drafts move the pattern: patterns are
+ * versioned with the docs, keys are not. A path in another alphabet is latinized first
+ * (`/о-нас` → oNas); one with no letters the name can carry (CJK, Arabic) is just a `page`.
+ */
+export function nameFromPattern(pattern: string, taken: ReadonlySet<string>): string {
+  const path = pattern.replace(/\?.*$/, '');
+  const words = latinize(path).split(/[^a-zA-Z0-9]+/).filter(Boolean);
+  let base = words
+    .map((word, i) => {
+      const clean = word.toLowerCase();
+      return i === 0 ? clean : clean.charAt(0).toUpperCase() + clean.slice(1);
+    })
+    .join('');
+  // the root path '/' has no words — it is the home; a path with words in letters the name
+  // cannot carry is a page, not a second home
+  if (!base) base = path.split('/').some(Boolean) ? 'page' : 'home';
+  if (!/^[a-z]/.test(base)) base = `p${base}`; // names must start with a letter
+  if (!taken.has(base)) return base;
+  for (let n = 2; ; n += 1) {
+    const candidate = `${base}${n}`;
+    if (!taken.has(candidate)) return candidate;
+  }
+}
+
+/**
+ * How many draft tags a folded route row shows: the live tag always stands (its width is taken
+ * first), then drafts in order while they fit; when not all of them do, a "…" tag must fit too.
+ * Widths in pixels, `gap` between neighbouring tags.
+ */
+export function fittingTags({ room, gap, live, drafts, more }: {
+  readonly room: number;
+  readonly gap: number;
+  /** the live tag's width, 0 when nothing is published */
+  readonly live: number;
+  readonly drafts: readonly number[];
+  readonly more: number;
+}): number {
+  const left = room - (live ? live + gap : 0);
+  const all = drafts.reduce((sum, w) => sum + w, 0) + gap * Math.max(0, drafts.length - 1);
+  if (all <= left) return drafts.length;
+  let used = more;
+  let fit = 0;
+  for (const w of drafts) {
+    if (used + gap + w > left) break;
+    used += gap + w;
+    fit += 1;
+  }
+  return fit;
+}

package/tiles/pagesPanel/routeTree.ts

@@ -0,0 +1,98 @@
+// The pages as a TREE of their routes: `/blog` and `/blog/{slug}` are a branch and its leaf, a
+// folder stands in for a prefix no page owns (`/docs/api/{name}` without `/docs`). Pure functions,
+// no react: the panel fetches the whole listing in one action anyway, so the shape is computed
+// on the client and recomputed on every keystroke of the search.
+//
+// A search ranks the full patterns (pagesSearch) and the tree is rebuilt from the matches alone;
+// the matched characters are carried along the hierarchy — every node lights the characters of
+// its own segment that any matched route under it lit, so the eye follows the match down the
+// branch instead of hunting for it in a flat path.
+import type { IPathMatch } from './pagesSearch';
+
+export interface IRouteTreeNode<T> {
+  /** this level's piece of the pattern: `blog`, `{slug}`, and `/` for the root page itself */
+  readonly segment: string;
+  /** the pattern up to and including this segment — the key of the node */
+  readonly path: string;
+  /** the page whose pattern ends here, or null for a folder no page owns */
+  readonly route: T | null;
+  readonly children: IRouteTreeNode<T>[];
+  /** matched character indices INSIDE the segment (a search), empty otherwise */
+  readonly lit: readonly number[];
+}
+
+interface IMutableNode<T> extends IRouteTreeNode<T> {
+  route: T | null;
+  children: IMutableNode<T>[];
+  lit: number[];
+}
+
+/** a pattern's segments, the query requirement (if any) kept on the last one */
+export function patternSegments(pattern: string): string[] {
+  const at = pattern.indexOf('?');
+  const path = at < 0 ? pattern : pattern.slice(0, at);
+  const query = at < 0 ? '' : pattern.slice(at);
+  const segments = path.split('/').filter(Boolean);
+  if (segments.length === 0) return [`/${query}`];
+  segments[segments.length - 1] += query;
+  return segments;
+}
+
+const isParam = (segment: string): boolean => segment.startsWith('{');
+
+/** literals before parameters, the root page first, alphabetical inside */
+function compareNodes<T>(a: IRouteTreeNode<T>, b: IRouteTreeNode<T>): number {
+  if (a.segment === '/') return -1;
+  if (b.segment === '/') return 1;
+  const paramA = isParam(a.segment);
+  const paramB = isParam(b.segment);
+  if (paramA !== paramB) return paramA ? 1 : -1;
+  return a.segment.localeCompare(b.segment);
+}
+
+function sortDeep<T>(nodes: IMutableNode<T>[]): void {
+  nodes.sort(compareNodes);
+  for (const node of nodes) sortDeep(node.children);
+}
+
+/**
+ * The tree of the given routes. With matches, each route's lit indices (into its full pattern)
+ * are split among the nodes on its way down; a node reached by several routes keeps the union.
+ */
+export function buildRouteTree<T>(
+  routes: readonly T[],
+  patternOf: (route: T) => string,
+  matchOf?: (route: T) => IPathMatch | null,
+): IRouteTreeNode<T>[] {
+  const top: IMutableNode<T>[] = [];
+  for (const route of routes) {
+    const pattern = patternOf(route);
+    const lit = matchOf?.(route)?.indices ?? [];
+    const segments = patternSegments(pattern);
+    let level = top;
+    let path = '';
+    segments.forEach((segment, i) => {
+      // the node's path is the pattern prefix the segment closes: the segment's characters start
+      // where the prefix before it ended, after the `/` that opens it (the root page excepted)
+      const start = segment === '/' ? 0 : path.length + 1;
+      path = segment === '/' ? '/' : `${path}/${segment}`;
+      let node = level.find((candidate) => candidate.segment === segment);
+      if (!node) {
+        node = { segment, path, route: null, children: [], lit: [] };
+        level.push(node);
+      }
+      if (i === segments.length - 1) node.route = route;
+      for (const index of lit) {
+        if (index >= start && index < start + segment.length && !node.lit.includes(index - start)) node.lit.push(index - start);
+      }
+      level = node.children;
+    });
+  }
+  sortDeep(top);
+  return top;
+}
+
+/** every node's path, depth-first — the keys a folded/unfolded set is kept by */
+export function pathsOf<T>(nodes: readonly IRouteTreeNode<T>[]): string[] {
+  return nodes.flatMap((node) => [node.path, ...pathsOf(node.children)]);
+}

package/tiles/previewBridge/landing.ts

@@ -0,0 +1,66 @@
+// The LANDING SPACE in the preview's own copy of the page: where a block is about to go, the agent
+// makes room for it (previewBridge.component.tsx renders the emptiness), so the overlay can frame
+// the very spot. Pure tree surgery — the editor's document never holds the node.
+import { DEFAULT_SLOT } from '@mosetta/react';
+import type { IBlueprintNode, IBlueprint } from '@mosetta/core';
+import { isOutletReference, unitOwnerOf } from '@mosetta/content/units';
+import { LANDING_NODE_ID } from './previewBridgeCommon';
+import type { ILandingPlace } from './previewBridgeCommon';
+
+/** a tree without the landing space, wherever it stood */
+export function withoutLanding<TNode extends { children?: readonly IBlueprintNode[] }>(node: TNode): TNode {
+  const children = node.children;
+  if (!children?.length) return node;
+  let changed = false;
+  const next: IBlueprintNode[] = [];
+  for (const child of children) {
+    if (child.id === LANDING_NODE_ID) {
+      changed = true;
+      continue;
+    }
+    const kept = withoutLanding(child);
+    if (kept !== child) changed = true;
+    next.push(kept);
+  }
+  return changed ? { ...node, children: next } : node;
+}
+
+/**
+ * The tree with the LANDING SPACE where a block is about to go (or without it, for null): a node
+ * of the agent's own module, which renders a little emptiness there (previewBridge.component.tsx),
+ * so the editor can frame the spot. Among `parentId`'s children in `slot`, it stands at `index` —
+ * counted the way the editor counts, in the document's own order (the agent's node, last under the
+ * root, is counted too: it stands after every child the document has). A PREFAB parent is not in
+ * the realm's tree as itself — it was expanded into its blocks, and its children (the page's
+ * blocks) stand in its OUTLET: there the space goes. A parent the tree does not hold (it changed
+ * meanwhile) gets no space; only the editor's own copy of the page ever had one.
+ */
+export function withLanding(page: IBlueprint, at: ILandingPlace | null, agentReference: string): IBlueprint {
+  const clean = withoutLanding(page);
+  if (!at) return clean;
+  const space: IBlueprintNode = {
+    id: LANDING_NODE_ID,
+    reference: agentReference,
+    settings: { landing: true },
+    ...(at.slot === DEFAULT_SLOT ? {} : { slot: at.slot }),
+    children: [],
+  };
+  const isParent = (node: { id?: string; reference?: string }): boolean => node.id === at.parentId
+    || (node.id !== undefined && unitOwnerOf(node.id) === at.parentId && isOutletReference(node.reference ?? ''));
+  const place = <TNode extends { id?: string; reference?: string; children?: readonly IBlueprintNode[] }>(node: TNode): TNode | null => {
+    const children = node.children ?? [];
+    if (isParent(node)) {
+      const inSlot = children.filter((child) => (child.slot ?? DEFAULT_SLOT) === at.slot);
+      const before = inSlot[at.index];
+      const last = inSlot[inSlot.length - 1];
+      const position = before ? children.indexOf(before) : last ? children.indexOf(last) + 1 : children.length;
+      return { ...node, children: [...children.slice(0, position), space, ...children.slice(position)] };
+    }
+    for (const [i, child] of children.entries()) {
+      const placed = place(child);
+      if (placed) return { ...node, children: [...children.slice(0, i), placed, ...children.slice(i + 1)] };
+    }
+    return null;
+  };
+  return place(clean) ?? clean;
+}