@mosetta/editor 0.0.0-stage → 0.0.29

package/tiles/workbench/workbench.css

@@ -0,0 +1,376 @@
+/* The shell: a sidebar column and the content beside it, both the full height of the page. */
+.workbench {
+  --wb-sidebar: 232px;
+  --wb-border: #e4e4e7;
+  --wb-frame: #e8e8ea;
+  --wb-ink: #18181b;
+  --wb-muted: #71717a;
+  --wb-blue: #2563eb;
+  --wb-tab-radius: 9px;
+
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+  font: var(--mosetta-wb-font)/1.45 ui-sans-serif, system-ui, sans-serif;
+  color: var(--wb-ink);
+  background: #ffffff;
+}
+
+.workbench--bare {
+  display: block;
+  height: auto;
+  padding: 16px;
+  color: var(--wb-muted);
+}
+
+/* a pane kept mounted but out of sight: a canvas behind another tab, the editor behind Home */
+.workbench__pane--hidden {
+  display: none !important;
+}
+
+/* ---- the sidebar ---------------------------------------------------------------------------- */
+
+.workbench__sidebar {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--wb-sidebar);
+  min-height: 0;
+  padding: 10px 10px 12px;
+  border-right: 1px solid var(--wb-border);
+  background: #fafafa;
+}
+
+.workbench__sidebar-head {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 10px;
+}
+
+/* the two small buttons beside the project: pin, fold — quiet, but always in sight */
+.workbench__sidebar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: #a1a1aa;
+  cursor: pointer;
+}
+
+.workbench__sidebar-button:hover {
+  background: #e4e4e7;
+  color: var(--wb-ink);
+}
+
+.workbench__sidebar-button--on {
+  color: var(--wb-blue);
+}
+
+.workbench__sidebar-button svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+.workbench__project {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  color: var(--wb-ink);
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbench__project:hover {
+  background: #efeff1;
+}
+
+.workbench__project-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* the way back to the platform's projects list — quiet, above the project it leaves */
+.workbench__back {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  margin-bottom: 6px;
+  padding: 4px 8px;
+  border-radius: 7px;
+  color: var(--wb-muted);
+  font-size: var(--mosetta-wb-font-sm);
+  text-decoration: none;
+}
+
+.workbench__back:hover {
+  background: #efeff1;
+  color: var(--wb-ink);
+}
+
+.workbench__back svg {
+  flex: none;
+  width: var(--mosetta-wb-icon);
+  height: var(--mosetta-wb-icon);
+}
+
+.workbench__sidebar--compact .workbench__back {
+  justify-content: center;
+  padding: 6px 0;
+}
+
+.workbench__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* ---- compact: the icons alone, every word in a tooltip ---------------------------------------- */
+
+.workbench__sidebar--compact {
+  width: 56px;
+  padding: 10px 8px 12px;
+  align-items: center;
+}
+
+.workbench__sidebar--compact .workbench__sidebar-head {
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.workbench__sidebar--compact .workbench__project {
+  justify-content: center;
+  padding: 6px;
+}
+
+.workbench__sidebar--compact .workbench__project-name,
+.workbench__sidebar--compact .workbench__nav-label,
+.workbench__sidebar--compact .workbench__account-login,
+.workbench__sidebar--compact .workbench__account-out {
+  display: none;
+}
+
+.workbench__sidebar--compact .workbench__sidebar-button--unfold {
+  margin-bottom: 8px;
+}
+
+.workbench__sidebar--compact .workbench__nav {
+  width: 100%;
+}
+
+.workbench__sidebar--compact .workbench__nav-item {
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.workbench__sidebar--compact .workbench__account {
+  justify-content: center;
+  width: 100%;
+  padding: 8px 0 0;
+}
+
+.workbench__nav-item,
+.workbench__recent-item {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 9px;
+  /* the column's width, padding included — wider, an item stuck out past the column on the right
+     and the recent list (which scrolls, so it clips) cut its words' ellipsis off */
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: none;
+  font: inherit;
+  color: #3f3f46;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbench__nav-item:hover,
+.workbench__recent-item:hover {
+  background: #efeff1;
+  color: var(--wb-ink);
+}
+
+.workbench__nav-item--active,
+.workbench__nav-item--active:hover {
+  background: #e4e4e7;
+  color: var(--wb-ink);
+  font-weight: 600;
+}
+
+.workbench__nav-icon {
+  display: flex;
+  flex: none;
+  color: var(--wb-muted);
+}
+
+.workbench__nav-item--active .workbench__nav-icon {
+  color: var(--wb-ink);
+}
+
+.workbench__nav-icon svg {
+  width: var(--mosetta-wb-icon);
+  height: var(--mosetta-wb-icon);
+}
+
+.workbench__recent {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-height: 0;
+  margin-top: 18px;
+  overflow-y: auto;
+}
+
+.workbench__recent-title {
+  padding: 0 8px 4px;
+  font-size: var(--mosetta-wb-font-2xs);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--wb-muted);
+}
+
+.workbench__recent-item {
+  padding: 4px 8px;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+.workbench__recent-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.workbench__recent-item[data-recent-kind='prefabs'] .workbench__recent-label {
+  font-family: inherit;
+}
+
+/* the account at the bottom, as every dashboard has it */
+.workbench__account {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-top: auto;
+  padding: 8px 8px 0;
+  border-top: 1px solid var(--wb-border);
+}
+
+.workbench__account-mosaic {
+  flex: none;
+  border-radius: 7px;
+}
+
+.workbench__account-login {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.workbench__account-out {
+  margin-left: auto;
+  font-size: var(--mosetta-wb-font-xs);
+  color: var(--wb-muted);
+  text-decoration: none;
+}
+
+.workbench__account-out:hover {
+  color: var(--wb-ink);
+  text-decoration: underline;
+}
+
+/* ---- the content ---------------------------------------------------------------------------- */
+
+.workbench__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.workbench__list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* An opened module sits behind the renderer's scope wrappers (`display: contents`), so the flex
+   item is the module's own root a couple of levels down: the rules below reach every level —
+   a contents-wrapper ignores flex properties, the module's root takes them. */
+.workbench__list > *,
+.workbench__list > * > *,
+.workbench__list > * > * > * {
+  flex: 1;
+  min-height: 0;
+}
+
+.workbench__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--wb-blue);
+  border-radius: 7px;
+  background: var(--wb-blue);
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  font-weight: 500;
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.workbench__button:hover {
+  background: #1d4ed8;
+  border-color: #1d4ed8;
+}
+
+.workbench__button--ghost {
+  border-color: #d4d4d8;
+  background: #ffffff;
+  color: var(--wb-ink);
+}
+
+.workbench__button--ghost:hover {
+  background: #f4f4f5;
+  border-color: #d4d4d8;
+}
+
+/* the sidebar's ways are links now (they move in place): they dress as the buttons they replaced */
+.workbench__project,
+.workbench__nav-item,
+.workbench__recent-item {
+  color: inherit;
+  text-decoration: none;
+}

package/tiles/workbench/workbenchAddress.ts

@@ -0,0 +1,202 @@
+// The workbench's ADDRESS: pure functions between a URL and what the workbench shows.
+//
+//   /workbench                      → Home
+//   /workbench/pages                → the pages, as a tree of routes
+//   /workbench/prefabs              → the prefabs
+//   /workbench/pages/<page>         → the editor, this page in front — `?draft=<id>` names the
+//                                     draft being edited, `?rev=<n>` the revision being inspected
+//   /workbench/prefabs/<name>       → the same for a prefab
+//   ?open=<page>__<draft>~<page>__r.<n>~prefab.<name>__<draft>
+//                                   → EVERY open tab, in order (the one in front included), so a
+//                                     reload — or the same link on another machine — brings the
+//                                     same tabs back. A page's STORAGE NAME is its id here: the
+//                                     route is what the screen shows, the name is what stays put.
+//   ?tree=<px>                      → how wide the tree column is for the document in front: a
+//                                     prefab wants a wide outline, a page a narrow one
+//   ?tool=<id>&tool-state=<text>    → the editor tool open over the document in front (ADR-0062)
+//                                     and what of it is open — the tool's own words
+//
+// The workbench is THREE pages (ADR-0051 §4): Home under `/workbench/{...rest}`, a list under
+// `/workbench/{kind}`, the editor under `/workbench/{kind}/{name}` — the base is a pattern without
+// its parameters, so a project that puts its editor elsewhere keeps working.
+import type { ContentKind } from '@mosetta/content';
+
+export const OPEN_PARAM = 'open';
+export const DRAFT_PARAM = 'draft';
+export const REVISION_PARAM = 'rev';
+/** the tree column's width (px) for the document in front — a preference of this document */
+export const TREE_PARAM = 'tree';
+/** the editor tool open over the document in front, and the tool's own state */
+export const TOOL_PARAM = 'tool';
+export const TOOL_STATE_PARAM = 'tool-state';
+
+/** an editor tool open over a document: which, and what the tool says of itself */
+export interface IToolAddress {
+  readonly tool: string;
+  readonly state: string | null;
+}
+
+const KIND_SEGMENT: Record<ContentKind, string> = { pages: 'pages', prefabs: 'prefabs' };
+const ENTRY_SEPARATOR = '~';
+const FIELD_SEPARATOR = '__';
+const PREFAB_ENTRY_PREFIX = 'prefab.';
+/** a revision in the draft's place: `r.3` — a draft id never holds a dot */
+const REVISION_RE = /^r\.([1-9]\d{0,8})$/;
+const REST_TAIL_RE = /\/\{\.\.\.[^}]*\}$/;
+/** the tabs of the editor, remembered by this browser tab while the author is away in a list */
+export const TABS_MEMORY_KEY = 'mosetta-workbench-tabs';
+
+/** one document a tab shows: a page's (or a prefab's) draft, or one of its revisions */
+export interface IOpenDoc {
+  readonly kind: ContentKind;
+  /** the page's (or prefab's) storage name */
+  readonly page: string;
+  readonly draftId?: string;
+  readonly revision?: number;
+}
+
+export type TWorkbenchView
+  = | { readonly view: 'home' }
+  | { readonly view: 'list'; readonly kind: ContentKind }
+  | ({ readonly view: 'editor' } & IOpenDoc)
+  // the distributions the blocks come from (ADR-0059) — the list page shows them
+  | { readonly view: 'distributions' };
+
+/** the address segment of the tile palettes view: `/workbench/palettes` */
+export const DISTRIBUTIONS_SEGMENT = 'palettes';
+
+/** what the editor's address says: the document in front, every open tab, the tree's width, the tool open */
+export interface IEditorAddress {
+  readonly doc: IOpenDoc;
+  readonly open: readonly IOpenDoc[];
+  readonly tree: number | null;
+  readonly tool: IToolAddress | null;
+}
+
+export function sameDoc(a: IOpenDoc, b: IOpenDoc): boolean {
+  return a.kind === b.kind && a.page === b.page && a.draftId === b.draftId && a.revision === b.revision;
+}
+
+/** a document named by the path alone — the version to show is still to be decided */
+export const isUnversioned = (doc: IOpenDoc): boolean => doc.draftId === undefined && doc.revision === undefined;
+
+export const kindOfSegment = (segment: string): ContentKind | null => (
+  Object.entries(KIND_SEGMENT).find(([, s]) => s === segment)?.[0] as ContentKind | undefined
+) ?? null;
+
+/** the path split the way the router reads it: decoded segments, empty ones dropped */
+function segmentsOf(pathname: string): string[] {
+  return pathname.split('/').filter(Boolean).map((segment) => {
+    try {
+      return decodeURIComponent(segment);
+    } catch {
+      return segment;
+    }
+  });
+}
+
+/**
+ * Where the workbench lives: the page's pattern minus its parameters — `/workbench` for
+ * `/workbench/{...rest}`, `/workbench/{kind}` and `/workbench/{kind}/{name}` alike. Without a
+ * pattern (a realm the server did not stamp), the first segment of the path serves —
+ * `/workbench` for `/workbench/pages/home`.
+ */
+export function basePathOf(pattern: string | null, pathname: string): string {
+  if (pattern) {
+    const literal: string[] = [];
+    for (const segment of segmentsOf(pattern.replace(REST_TAIL_RE, ''))) {
+      if (segment.startsWith('{')) break;
+      literal.push(segment);
+    }
+    return `/${literal.join('/')}`;
+  }
+  const [first] = segmentsOf(pathname);
+  return first ? `/${first}` : '/';
+}
+
+/** the path (with the version query) of a view — the `open` parameter is added by the caller */
+export function pathOfView(base: string, view: TWorkbenchView): { pathname: string; version: Record<string, string> } {
+  const root = base === '/' ? '' : base;
+  if (view.view === 'home') return { pathname: root || '/', version: {} };
+  if (view.view === 'list') return { pathname: `${root}/${KIND_SEGMENT[view.kind]}`, version: {} };
+  if (view.view === 'distributions') return { pathname: `${root}/${DISTRIBUTIONS_SEGMENT}`, version: {} };
+  const version: Record<string, string> = view.draftId !== undefined
+    ? { [DRAFT_PARAM]: view.draftId }
+    : view.revision !== undefined ? { [REVISION_PARAM]: String(view.revision) } : {};
+  return { pathname: `${root}/${KIND_SEGMENT[view.kind]}/${encodeURIComponent(view.page)}`, version };
+}
+
+/** `page__draft~…`, or null when nothing is open (the parameter leaves the address) */
+export function serializeOpenDocs(docs: readonly IOpenDoc[]): string | null {
+  const entries = docs.filter((doc) => !isUnversioned(doc));
+  if (entries.length === 0) return null;
+  return entries
+    .map((doc) => [
+      doc.kind === 'prefabs' ? `${PREFAB_ENTRY_PREFIX}${doc.page}` : doc.page,
+      doc.revision !== undefined ? `r.${doc.revision}` : doc.draftId,
+    ].join(FIELD_SEPARATOR))
+    .join(ENTRY_SEPARATOR);
+}
+
+/** tolerant of hand-mangled addresses: a malformed entry is dropped, the rest survive */
+export function parseOpenDocs(value: string | null): IOpenDoc[] {
+  if (!value) return [];
+  return value.split(ENTRY_SEPARATOR).flatMap((entry): IOpenDoc[] => {
+    const [named, held, ...rest] = entry.split(FIELD_SEPARATOR);
+    if (!named || !held || rest.length !== 0) return [];
+    const prefab = named.startsWith(PREFAB_ENTRY_PREFIX);
+    const page = prefab ? named.slice(PREFAB_ENTRY_PREFIX.length) : named;
+    if (!page) return [];
+    const revision = REVISION_RE.exec(held);
+    // a draft id never holds a dot: `r.0`, `r.x` are neither
+    if (!revision && held.includes('.')) return [];
+    return [{
+      kind: prefab ? 'prefabs' : 'pages',
+      page,
+      ...(revision ? { revision: Number(revision[1]) } : { draftId: held }),
+    }];
+  });
+}
+
+/** the view a location names; an address outside the base, or one that names nothing known, is Home */
+export function parseWorkbenchPath(pathname: string, base: string, query: URLSearchParams): TWorkbenchView {
+  const baseSegments = segmentsOf(base);
+  const segments = segmentsOf(pathname);
+  if (baseSegments.some((segment, i) => segments[i] !== segment)) return { view: 'home' };
+  const [section, page, ...rest] = segments.slice(baseSegments.length);
+  if (!section) return { view: 'home' };
+  if (section === DISTRIBUTIONS_SEGMENT && !page) return { view: 'distributions' };
+  const kind = kindOfSegment(section);
+  if (!kind || rest.length > 0) return { view: 'home' };
+  if (!page) return { view: 'list', kind };
+  const draftId = query.get(DRAFT_PARAM);
+  const rev = query.get(REVISION_PARAM);
+  const revision = rev !== null && /^[1-9]\d{0,8}$/.test(rev) ? Number(rev) : null;
+  return {
+    view: 'editor',
+    kind,
+    page,
+    ...(draftId ? { draftId } : revision !== null ? { revision } : {}),
+  };
+}
+
+/** the tree's width named by a query, or null */
+const treeOf = (query: URLSearchParams): number | null => {
+  const raw = query.get(TREE_PARAM);
+  const width = raw === null ? NaN : Number(raw);
+  return Number.isInteger(width) && width > 0 ? width : null;
+};
+
+/** the editor's address at a location — null when the location is not the editor's */
+export function parseEditorAddress(pathname: string, base: string, query: URLSearchParams): IEditorAddress | null {
+  const view = parseWorkbenchPath(pathname, base, query);
+  if (view.view !== 'editor') return null;
+  const { view: _view, ...doc } = view;
+  const tool = query.get(TOOL_PARAM);
+  return {
+    doc,
+    open: parseOpenDocs(query.get(OPEN_PARAM)),
+    tree: treeOf(query),
+    tool: tool ? { tool, state: query.get(TOOL_STATE_PARAM) || null } : null,
+  };
+}