@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/pasteText.ts

@@ -0,0 +1,131 @@
+// Pasting WRITING into a page of BLOCKS. A content manager writes in a document, then pastes:
+// the text arrives as plain text or markdown, and it becomes a run of blocks — Heading, Text,
+// List with Items, Quote with a Text inside. Writing stays writing at the door; the page holds
+// composition only. Inline marks (**bold**, [link](url)) stay inside the strings — that is
+// the block's own grammar, not this splitter's business.
+import type { IBlueprintNodeDoc } from '@mosetta/content';
+
+/** the references the splitter builds with — one distribution's text blocks at one version */
+export interface IBlockVocabulary {
+  readonly heading: string;
+  readonly text: string;
+  readonly list: string;
+  readonly item: string;
+  readonly quote: string;
+}
+
+type TLine
+  = | { kind: 'heading'; level: 1 | 2 | 3 | 4; text: string }
+  | { kind: 'item'; ordered: boolean; text: string }
+  | { kind: 'quote'; text: string }
+  | { kind: 'text'; text: string }
+  | { kind: 'blank' };
+
+const HEADING_RE = /^(#{1,4})\s+(.+?)\s*#*\s*$/;
+const BULLET_RE = /^\s*[-*•]\s+(.+)$/;
+const NUMBERED_RE = /^\s*\d+[.)]\s+(.+)$/;
+const QUOTE_RE = /^\s*>\s?(.*)$/;
+// a lone image line — a picture is a block of its own kind, not text; it is dropped, not pasted
+const IMAGE_RE = /^\s*!\[[^\]]*]\([^)]*\)\s*$/;
+
+function classify(raw: string): TLine {
+  const line = raw.replace(/\s+$/, '');
+  if (!line.trim() || IMAGE_RE.test(line)) return { kind: 'blank' };
+  const heading = HEADING_RE.exec(line);
+  if (heading) return { kind: 'heading', level: heading[1].length as 1 | 2 | 3 | 4, text: heading[2] };
+  const bullet = BULLET_RE.exec(line);
+  if (bullet) return { kind: 'item', ordered: false, text: bullet[1] };
+  const numbered = NUMBERED_RE.exec(line);
+  if (numbered) return { kind: 'item', ordered: true, text: numbered[1] };
+  const quote = QUOTE_RE.exec(line);
+  if (quote) return { kind: 'quote', text: quote[1] };
+  return { kind: 'text', text: line.trim() };
+}
+
+/** the paste has real words in it, not just whitespace */
+export const hasText = (text: string): boolean => text.trim().length > 0;
+
+/**
+ * Plain text or markdown → blocks. Consecutive text lines are ONE paragraph (a hard wrap inside
+ * a paragraph is not a paragraph break; a blank line is), consecutive items one list,
+ * consecutive quote lines one quote. Ids are placeholders — the session renumbers on paste.
+ */
+export function blocksFromText(text: string, vocab: IBlockVocabulary): IBlueprintNodeDoc[] {
+  const blocks: IBlueprintNodeDoc[] = [];
+  let seq = 0;
+  const id = () => `pasted-${++seq}`;
+  const textNode = (value: string): IBlueprintNodeDoc => ({
+    id: id(), reference: vocab.text, settings: { text: value, tone: 'default', size: 'default' }, children: [],
+  });
+
+  let paragraph: string[] = [];
+  let list: { ordered: boolean; items: string[] } | null = null;
+  let quote: string[] = [];
+  const flushParagraph = () => {
+    if (paragraph.length) blocks.push(textNode(paragraph.join(' ')));
+    paragraph = [];
+  };
+  const flushList = () => {
+    if (list) {
+      blocks.push({
+        id: id(),
+        reference: vocab.list,
+        settings: { ordered: list.ordered },
+        children: list.items.map((item) => ({ id: id(), reference: vocab.item, settings: { text: item }, children: [] })),
+      });
+    }
+    list = null;
+  };
+  const flushQuote = () => {
+    if (quote.length) {
+      // blank quote lines split it into paragraphs inside the one quotation
+      const paragraphs = quote.join('\n').split(/\n\s*\n/).map((p) => p.replace(/\s*\n\s*/g, ' ').trim()).filter(Boolean);
+      blocks.push({ id: id(), reference: vocab.quote, settings: { cite: '' }, children: paragraphs.map(textNode) });
+    }
+    quote = [];
+  };
+  const flushAll = () => {
+    flushParagraph();
+    flushList();
+    flushQuote();
+  };
+
+  for (const raw of text.replace(/\r\n?/g, '\n').split('\n')) {
+    const line = classify(raw);
+    switch (line.kind) {
+      case 'blank':
+        flushParagraph();
+        flushList();
+        if (quote.length) quote.push('');
+        break;
+      case 'heading':
+        flushAll();
+        blocks.push({ id: id(), reference: vocab.heading, settings: { text: line.text, level: line.level }, children: [] });
+        break;
+      case 'item':
+        flushParagraph();
+        flushQuote();
+        if (list && list.ordered !== line.ordered) flushList();
+        list ??= { ordered: line.ordered, items: [] };
+        list.items.push(line.text);
+        break;
+      case 'quote':
+        flushParagraph();
+        flushList();
+        quote.push(line.text);
+        break;
+      case 'text':
+        flushList();
+        if (quote.length && quote[quote.length - 1] !== '') {
+          quote.push(line.text); // a lazy continuation line belongs to the quote above it
+        } else {
+          flushQuote();
+          paragraph.push(line.text);
+        }
+        break;
+      default:
+    }
+  }
+  flushAll();
+  return blocks;
+}

package/tiles/content/prefabFields.tsx

@@ -0,0 +1,158 @@
+// A PREFAB's OPEN FIELDS, from both sides.
+//
+// On a page, a prefab node is an INSTANCE: its blocks are the prefab's and not changed here, but
+// the settings the prefab opens — a button's text, its address — each page sets for itself. The
+// form lists them with the prefab's own value as the hint; an emptied field falls back to it.
+//
+// In the prefab, a block's settings can be OPENED: "each page sets this". The prefab's document
+// keeps the list (node, setting, label) — one undoable step per change, like any other edit.
+import { EditingSession, FIELDS_SETTING, findNodeDoc } from '@mosetta/content';
+import type { IBlueprintNodeDoc, IPrefabField } from '@mosetta/content';
+import type { IPrefabTree } from './contentCommon';
+
+type TFieldValues = Record<string, Record<string, unknown>>;
+
+/** settings that are not a block's content: the module versions it was placed with, its styles */
+const NOT_OPENABLE = new Set(['versions', 'styles', FIELDS_SETTING]);
+
+/** a scalar setting as an input shows it; anything else shows nothing */
+const shown = (value: unknown): string => (typeof value === 'string' || typeof value === 'number' ? String(value) : '');
+
+const humanize = (setting: string): string => setting.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase());
+
+function FieldInput({ value, fallback, onChange, testId }: {
+  value: unknown;
+  fallback: unknown;
+  onChange: (value: unknown) => void;
+  testId: string;
+}) {
+  if (typeof fallback === 'boolean') {
+    return (
+      <input type="checkbox"
+             data-test-id={testId}
+             checked={typeof value === 'boolean' ? value : fallback}
+             onChange={(e) => onChange(e.target.checked)} />
+    );
+  }
+  return (
+    <input className="settings__meta-input"
+           data-test-id={testId}
+           type={typeof fallback === 'number' ? 'number' : 'text'}
+           value={shown(value)}
+           placeholder={shown(fallback)}
+           onChange={(e) => {
+             const raw = e.target.value;
+             // emptied: the prefab's own value comes back
+             if (raw === '') onChange(undefined);
+             else onChange(typeof fallback === 'number' ? Number(raw) : raw);
+           }} />
+  );
+}
+
+/**
+ * An instance of a prefab on a page: the fields it opens, and nothing else. With `only` — one of
+ * the prefab's blocks, selected on the page to be seen — the fields of that block alone, or nothing.
+ */
+export function PrefabInstanceForm({ session, node, prefab, only }: {
+  session: EditingSession;
+  node: IBlueprintNodeDoc;
+  prefab: IPrefabTree | null;
+  only?: string;
+}) {
+  if (!prefab) {
+    return (
+      <div className="settings__hint"
+           data-prefab-unknown>
+        A prefab of a library: it is placed as it is, with nothing to set here.
+      </div>
+    );
+  }
+  const fields = (prefab.doc.fields ?? []).filter((field) => only === undefined || field.node === only);
+  if (!fields.length && only !== undefined) return null;
+  if (!fields.length) {
+    return (
+      <div className="settings__hint"
+           data-prefab-closed={prefab.name}>
+        The prefab {prefab.name} opens no fields — every page shows it as it is. Open some in the
+        prefab itself (the Prefabs panel) to set them page by page.
+      </div>
+    );
+  }
+  const values = (node.settings?.[FIELDS_SETTING] ?? {}) as TFieldValues;
+  const write = (field: IPrefabField, value: unknown) => {
+    const block = { ...values[field.node] };
+    if (value === undefined) delete block[field.setting];
+    else block[field.setting] = value;
+    const next = { ...values, [field.node]: block };
+    if (!Object.keys(block).length) delete next[field.node];
+    session.updateNodeSettings(node.id, { [FIELDS_SETTING]: next });
+  };
+  return (
+    <div className="settings__meta"
+         data-test-id="settings-prefab-fields"
+         data-prefab={prefab.name}>
+      <div className="settings__target">{only !== undefined ? 'This page sets' : `Prefab ${prefab.name}`}</div>
+      {fields.map((field) => {
+        const fallback = findNodeDoc(prefab.doc, field.node)?.settings?.[field.setting];
+        return (
+          <label key={`${field.node}.${field.setting}`}
+                 className="settings__meta-field">
+            <span className="settings__meta-label">{field.label}</span>
+            <FieldInput value={values[field.node]?.[field.setting]}
+                        fallback={fallback}
+                        testId={`prefab-field-${field.node}-${field.setting}`}
+                        onChange={(value) => write(field, value)} />
+          </label>
+        );
+      })}
+    </div>
+  );
+}
+
+/** in a prefab: which of this block's settings each page sets for itself */
+export function OpenFieldsForm({ session, doc, node }: {
+  session: EditingSession;
+  doc: IBlueprintNodeDoc & { fields?: readonly IPrefabField[] };
+  node: IBlueprintNodeDoc;
+}) {
+  const settings = Object.entries(node.settings ?? {})
+    .filter(([key, value]) => !NOT_OPENABLE.has(key) && (value === null || typeof value !== 'object'));
+  if (!settings.length) return null;
+  const fields = doc.fields ?? [];
+  const openOf = (setting: string) => fields.find((f) => f.node === node.id && f.setting === setting);
+  const replace = (setting: string, next: IPrefabField | null) => {
+    const others = fields.filter((f) => !(f.node === node.id && f.setting === setting));
+    session.setPrefabFields(next ? [...others, next] : others);
+  };
+  return (
+    <div className="settings__meta"
+         data-test-id="settings-open-fields">
+      <div className="settings__target"
+           data-tooltip="An open setting is set by each page that places this prefab; the rest stays the prefab's">
+        Each page sets
+      </div>
+      {settings.map(([setting]) => {
+        const open = openOf(setting);
+        return (
+          <div key={setting}
+               className="settings__meta-field">
+            <label className="settings__meta-flag">
+              <input type="checkbox"
+                     data-test-id={`open-field-${setting}`}
+                     checked={Boolean(open)}
+                     onChange={(e) => replace(setting, e.target.checked ? { node: node.id, setting, label: humanize(setting) } : null)} />
+              <span className="settings__meta-label">{humanize(setting)}</span>
+            </label>
+            {open ? (
+              <input className="settings__meta-input"
+                     data-test-id={`open-field-label-${setting}`}
+                     value={open.label}
+                     placeholder="what the page's form calls it"
+                     onChange={(e) => replace(setting, { ...open, label: e.target.value || humanize(setting) })} />
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/tiles/content/prefabParts.ts

@@ -0,0 +1,105 @@
+// A PREFAB's own blocks on a page — PARTS. A prefab node on a page places the prefab's live tree;
+// the preview expands it, each block under `<prefabNode>/<block>`. Those blocks are the prefab's,
+// not the page's: they are SEEN here — selected, framed, their settings shown read-only, with the
+// way to the prefab where they are changed — never edited. The open fields the prefab gives a page
+// are the exception, and they are the prefab node's settings anyway.
+//
+// A part's settings live in the prefab's document, and so do the providers its references read
+// (a layout's i18n): whatever reads a part reads it against the prefab's own tree, by its own id.
+import { SingleDiToken } from '@mosetta/di';
+import type { DiContainer } from '@mosetta/di';
+import { findNodeDoc } from '@mosetta/content';
+import type { EditingSession, IBlueprintNodeDoc } from '@mosetta/content';
+import { unitOwnerOf, UNIT_ID_SEPARATOR } from '@mosetta/content/units';
+import type { IPrefabTree } from './contentCommon';
+import type { Workspace } from '../workbench/workspace';
+
+export interface IPrefabPart {
+  /** the prefab node on the page */
+  readonly owner: IBlueprintNodeDoc;
+  /** the prefab's live tree — its own document */
+  readonly prefab: IPrefabTree;
+  /** the block, as the prefab's document holds it (its own id) */
+  readonly node: IBlueprintNodeDoc;
+}
+
+export type TPrefabTreeOf = (reference: string) => IPrefabTree | null;
+
+/** whether an id names a prefab's block rather than a node of the page */
+export const isPartId = (id: string | null | undefined): id is string => typeof id === 'string' && unitOwnerOf(id) !== null;
+
+/** the part an id names on the page — null for the page's own node, an unknown prefab or block */
+export function prefabPartOf(doc: IBlueprintNodeDoc, id: string, treeOf: TPrefabTreeOf): IPrefabPart | null {
+  const ownerId = unitOwnerOf(id);
+  if (ownerId === null) return null;
+  const owner = findNodeDoc(doc, ownerId);
+  const prefab = owner ? treeOf(owner.reference) : null;
+  const node = prefab ? findNodeDoc(prefab.doc, id.slice(ownerId.length + UNIT_ID_SEPARATOR.length)) : null;
+  return owner && prefab && node ? { owner, prefab, node } : null;
+}
+
+/**
+ * The prefab trees the workbench knows, for code without hooks (the settings draft reads a part's
+ * settings through it). Fed by whoever holds the project's prefabs (useProjectPrefabs); told
+ * whenever they change.
+ */
+export class PrefabTrees {
+  private treeOfNow: TPrefabTreeOf = () => null;
+
+  private readonly listeners = new Set<() => void>();
+
+  readonly treeOf: TPrefabTreeOf = (reference) => this.treeOfNow(reference);
+
+  feed(treeOf: TPrefabTreeOf): void {
+    if (treeOf === this.treeOfNow) return;
+    this.treeOfNow = treeOf;
+    for (const listener of [...this.listeners]) listener();
+  }
+
+  readonly subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+}
+
+const PREFAB_TREES_TOKEN = new SingleDiToken<PrefabTrees>('PREFAB_TREES_TOKEN');
+
+/** one per workbench, brought into being on first use */
+export function ensurePrefabTrees(di: DiContainer): PrefabTrees {
+  if (!di.hasByToken(PREFAB_TREES_TOKEN)) di.registerValueOfToken(PREFAB_TREES_TOKEN, new PrefabTrees());
+  return di.getByToken(PREFAB_TREES_TOKEN);
+}
+
+/** how long the prefab may take to open before the wish to select its block is dropped */
+const OPEN_PATIENCE_MS = 15000;
+
+/**
+ * Where a part is changed: its prefab opens in the workbench (its live revision, or its newest
+ * draft while nothing is published) — and once the prefab's document is in the canvas being
+ * worked in (`working`, the hub's active session), the block is selected there.
+ */
+export function openInPrefab(workspace: Workspace, working: EditingSession, part: IPrefabPart): void {
+  const name = part.prefab.name;
+  const nodeId = part.node.id;
+  workspace.open({ kind: 'prefabs', page: name });
+  const arrived = (): boolean => {
+    const now = working.snapshot();
+    return now.kind === 'prefabs' && now.pageName === name && now.doc !== null && findNodeDoc(now.doc, nodeId) !== null;
+  };
+  // selected outside the session's own notification — a pick inside it would nest one in another
+  const select = () => queueMicrotask(() => working.selectNode(nodeId));
+  if (arrived()) {
+    select();
+    return;
+  }
+  let off = (): void => undefined;
+  const timer = setTimeout(() => off(), OPEN_PATIENCE_MS);
+  off = working.subscribe(() => {
+    if (!arrived()) return;
+    off();
+    clearTimeout(timer);
+    select();
+  });
+}

package/tiles/content/previewEnvironment.ts

@@ -0,0 +1,46 @@
+// The SPECIMEN's environment (IEditorSide.previewServices): the real panels render against a
+// real session — seeded with a small workbench page — instead of forking their markup into mocks
+// (code-conventions §7a: a preview is the component, only its WORLD is arranged).
+import { DiService } from '@mosetta/di';
+import { EDITING_SESSION_TOKEN, EditingSession, IPageDoc } from '@mosetta/content';
+
+/**
+ * The editor's version, as this very module's address names it: a module is served under its full
+ * id (`…/modules/_ns_mosetta-editor_t_editor_n_treeView_v_0_0_2/…`), and every module of the editor
+ * shares the editor's version. Read from sources (a test) there is no such address: `0_0_1`.
+ */
+const EDITOR_VERSION = /\/modules\/_ns_mosetta-editor_t_[a-z]+_n_[A-Za-z0-9]+_v_([A-Za-z0-9_]+)\//.exec(import.meta.url)?.[1] ?? '0_0_1';
+
+const editorRef = (name: string) => `_ns_mosetta-editor_t_component_n_${name}_v_${EDITOR_VERSION}`;
+
+// References are the editor's OWN modules: present in every workbench catalog, so a settings
+// form's entry lookup resolves. A branch, a named slot and a selection — enough for every panel
+// to have something true to say.
+const DEMO_PAGE: IPageDoc = {
+  id: 'workbench',
+  reference: editorRef('page'),
+  pattern: '/',
+  children: [
+    { id: 'pages-1', reference: editorRef('pagesPanel'), children: [] },
+    { id: 'canvas-1', reference: editorRef('canvas'), children: [] },
+    { id: 'tree-1', reference: editorRef('treeView'), slot: 'side', children: [] },
+  ],
+};
+
+/**
+ * A session already looking at something: the outline has a tree to draw, the settings panel
+ * has a selected node — the canvas one, which ships no editor facet, so the panel shows its id,
+ * the ssr toggle and the no-form hint. Opened clean (not dirty): the autosave that comes along
+ * with any session use never has a reason to write.
+ */
+export class PreviewEditingSession extends EditingSession {
+  constructor() {
+    super();
+    this.openPage('workbench', 'preview-specimen', DEMO_PAGE);
+    this.selectNode('canvas-1');
+  }
+}
+
+// the decorator applied as a plain call: module sources build without the legacy-decorator
+// transform, and a facet must stay buildable by the module pipeline as-is
+DiService(EDITING_SESSION_TOKEN)(PreviewEditingSession);

package/tiles/content/projectConfig.ts

@@ -0,0 +1,46 @@
+// The project's content config as the workbench exposes it to the facets it mounts
+// (EDITOR_PROJECT_CONFIG_TOKEN): a store the panels FEED from the server action they already
+// run — a provider's form or chrome (i18n: which languages the project serves) only reads it.
+import { useEffect } from 'react';
+import { DI_CONTAINER_TOKEN, DiContainer } from '@mosetta/di';
+import { EDITOR_PROJECT_CONFIG_TOKEN, useDi } from '@mosetta/react';
+import type { IProjectConfigContract } from '@mosetta/react';
+import { useServerAction } from '@mosetta/react/server-action';
+import { projectConfigToken } from './contentCommon';
+
+class ProjectConfigStore implements IProjectConfigContract {
+  private config: Readonly<Record<string, unknown>> | null = null;
+
+  private readonly listeners = new Set<() => void>();
+
+  readonly snapshot = () => this.config;
+
+  readonly subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  set(config: Readonly<Record<string, unknown>>): void {
+    if (JSON.stringify(config) === JSON.stringify(this.config)) return;
+    this.config = config;
+    for (const listener of [...this.listeners]) listener();
+  }
+}
+
+function ensureProjectConfig(di: DiContainer): ProjectConfigStore {
+  if (!di.hasByToken(EDITOR_PROJECT_CONFIG_TOKEN)) di.registerValueOfToken(EDITOR_PROJECT_CONFIG_TOKEN, new ProjectConfigStore());
+  return di.getByToken(EDITOR_PROJECT_CONFIG_TOKEN) as ProjectConfigStore;
+}
+
+/** reads the config (one shared, cached query) and keeps the workbench's store fed with it */
+export function useFeedProjectConfig(): void {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const store = ensureProjectConfig(di);
+  const config = useServerAction({ token: projectConfigToken, input: {} });
+  const data = config.isSuccess() && config.serverData.ok ? config.serverData.config : null;
+  useEffect(() => {
+    if (data) store.set(data);
+  }, [store, data]);
+}

package/tiles/content/projectPrefabs.ts

@@ -0,0 +1,57 @@
+// The project's OWN prefabs as the editor offers and shows them: the project's namespace (a prefab
+// of the project is referenced under it), the published prefabs and their live trees. One set of
+// shared, cached queries — the palette offers them, the tree shows their blocks read-only, an
+// instance's form reads their open fields. A library's prefab (the workbench) is not the project's:
+// nothing here knows its tree, and it is shown by its name only.
+import { useEffect, useMemo, useRef } from 'react';
+import type { DiContainer } from '@mosetta/di';
+import { useServerAction } from '@mosetta/react/server-action';
+import { EServerActionStart } from '@mosetta/server-action/client';
+import { projectNamespaceOf, unitOf } from '@mosetta/content';
+import { IPrefabTree, listPagesToken, prefabTreesToken, projectConfigToken } from './contentCommon';
+import { ensurePrefabTrees } from './prefabParts';
+
+export interface IProjectPrefabs {
+  /** the project's namespace — null until the config is in, or when it names none */
+  readonly namespace: string | null;
+  /** the published prefabs with their live trees, by name */
+  readonly prefabs: readonly IPrefabTree[];
+  /** the tree a prefab node embeds, when the prefab is the project's and published */
+  treeOf(reference: string): IPrefabTree | null;
+}
+
+const MANUAL = { start: EServerActionStart.START_MANUAL } as const;
+
+/**
+ * `enabled` must not change over the hook's life: a query's start mode is fixed at its first
+ * render (a specimen asks no server, the real workbench always does).
+ */
+export function useProjectPrefabs(enabled = true): IProjectPrefabs {
+  const start = enabled ? {} : MANUAL;
+  const config = useServerAction({ token: projectConfigToken, input: {}, ...start });
+  const listing = useServerAction({ token: listPagesToken, input: { kind: 'prefabs' }, ...start });
+  // the names hold while the listing is asked again (an edit invalidates it): the trees' query
+  // keeps its key instead of flickering through an empty one
+  const known = useRef<string[]>([]);
+  if (listing.isSuccess() && listing.serverData.ok) {
+    const names = listing.serverData.pages.filter((p) => p.meta.live != null).map((p) => p.name).sort();
+    if (names.join('|') !== known.current.join('|')) known.current = names;
+  }
+  const names = known.current;
+  const trees = useServerAction({ token: prefabTreesToken, input: { names }, ...start });
+  const namespace = config.isSuccess() && config.serverData.ok ? projectNamespaceOf(config.serverData.config) : null;
+  const prefabs = useMemo(() => (trees.isSuccess() && trees.serverData.ok ? trees.serverData.prefabs : []), [trees]);
+  return useMemo(() => ({
+    namespace,
+    prefabs,
+    treeOf(reference: string) {
+      const unit = unitOf(reference);
+      return unit && unit.namespace === namespace ? prefabs.find((p) => p.name === unit.name) ?? null : null;
+    },
+  }), [namespace, prefabs]);
+}
+
+/** the trees handed to the workbench's PrefabTrees — code without hooks reads a prefab's blocks there */
+export function useFeedPrefabTrees(di: DiContainer, project: IProjectPrefabs): void {
+  useEffect(() => ensurePrefabTrees(di).feed(project.treeOf), [di, project]);
+}

package/tiles/content/publishModal.css

@@ -0,0 +1,109 @@
+/* the publish dialog: a fixed overlay — asked from a list row or from the canvas bar alike */
+.publish-modal__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+  background: rgb(24 24 27 / 35%);
+}
+
+.publish-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(440px, calc(100vw - 32px));
+  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%);
+}
+
+.publish-modal__title {
+  font-size: calc(var(--mosetta-wb-font, 14px) + 2px);
+  font-weight: 600;
+  color: #18181b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.publish-modal__text {
+  color: #52525b;
+}
+
+.publish-modal__label {
+  margin-top: 4px;
+  font-size: var(--mosetta-wb-font-xs, 12px);
+  font-weight: 500;
+  color: #71717a;
+}
+
+.publish-modal__input {
+  height: calc(var(--mosetta-wb-icon-box, 24px) + 6px);
+  padding: 0 10px;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  font: inherit;
+  outline: none;
+}
+
+.publish-modal__input:focus {
+  border-color: #2563eb;
+}
+
+.publish-modal__hint {
+  font-size: var(--mosetta-wb-font-xs, 12px);
+  color: #a1a1aa;
+}
+
+.publish-modal__error {
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+  color: #b91c1c;
+  background: #fef2f2;
+  white-space: pre-wrap;
+}
+
+.publish-modal__buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.publish-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;
+}
+
+.publish-modal__button:hover {
+  background: #f4f4f5;
+}
+
+.publish-modal__button--primary {
+  border-color: #2563eb;
+  color: #fff;
+  background: #2563eb;
+}
+
+.publish-modal__button--primary:hover {
+  border-color: #1d4ed8;
+  background: #1d4ed8;
+}
+
+.publish-modal__button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}