@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/mountedTree.ts

@@ -0,0 +1,136 @@
+// The MOUNTER's mechanism: instancing someone else's application into an element — plain logic,
+// because nothing about it is react (code-conventions §7a). The DI face lives next door in
+// treeMounter.ts, the react adapter is useMountedTree; this file depends on neither, so any
+// binding — or a unit test — can drive it directly.
+//
+// What a MountedTree keeps is ONE application: a new spec with the same root hands the running
+// application a new tree (IMountHandle.render), and only a different ROOT — a provider on another
+// binding — or a different element is worth building a new application for.
+import { Errors } from '@mosetta/core';
+import type { DiContainer } from '@mosetta/di';
+import type { ITilesHolder, IMountPreview } from '@mosetta/runtime/client';
+import type { IMountHandle, IRootComponentSide } from '@mosetta/react';
+import type { IBlueprintNode } from '@mosetta/core';
+
+/**
+ * What a HOST shows in place of anything it mounted that failed to render: the editor's own
+ * fallback, at the editor's own version (`editor` — its reference, as `useComponent` names it).
+ */
+export const hostFallbackOf = (editor: { namespace: string; version: string }): string => `_ns_${editor.namespace}_t_component_n_hostFallback_v_${editor.version}`;
+
+export interface IMountSpec {
+  /** the root module that will mount this tree — its binding is what actually renders */
+  readonly rootReference: string;
+  readonly tree: IBlueprintNode;
+  /** the specimen declaration for the mounted application's container (IMountOptions.preview) */
+  readonly preview?: IMountPreview;
+}
+
+/** the synthetic page a host mounts: its root, its fallback (hostFallbackOf), and the subject inside */
+export function hostedPage(rootReference: string, children: readonly IBlueprintNode[], fallback: string): IBlueprintNode {
+  return {
+    id: '__hosted',
+    reference: rootReference,
+    children: children as IBlueprintNode[],
+    ...{ pattern: '/', fallback },
+  };
+}
+
+/** the fallback a hosted page names, if any */
+const fallbackOf = (tree: IBlueprintNode): string | null => {
+  const named = (tree as { fallback?: unknown }).fallback;
+  return typeof named === 'string' ? named : null;
+};
+
+export async function loadModule(holder: ITilesHolder, reference: string) {
+  const loaded = holder.loadModule ? await holder.loadModule(reference) : holder.getModule(reference);
+  return loaded?.error ? undefined : loaded;
+}
+
+/**
+ * One application, kept alive across specs. The element comes as a PROVIDER, not a node: loading
+ * the root takes time, and the element that asked may be gone — or replaced — by the time the
+ * modules arrive; the mount goes into whatever the provider answers then.
+ */
+export class MountedTree {
+  private app: {
+    root: string;
+    element: HTMLElement;
+    preview?: IMountPreview;
+    handle: IMountHandle;
+  } | null = null;
+
+  /** every show takes a turn; a show that lost its turn mounts nothing */
+  private turn = 0;
+
+  constructor(
+    private readonly holder: ITilesHolder,
+    /** the HOST application's container — every mounted application gets it (the Unity door) */
+    private readonly parentDi?: DiContainer,
+  ) {}
+
+  /**
+   * Put the spec's tree into the provider's element. Resolves `true` when the tree is showing,
+   * `false` when the call was superseded (a newer show, cancel or dispose) or the element was
+   * gone; rejects only for a failure that is CURRENT — a superseded failure concerns no one.
+   */
+  async show(spec: IMountSpec, element: () => HTMLElement | null): Promise<boolean> {
+    const turn = ++this.turn;
+    const current = element();
+    if (!current) return false;
+    // An element the panel replaced looks exactly like a form that renders nothing: the old
+    // application keeps writing into a node no longer in the document. A different ROOT — a
+    // provider on another binding — is a second reason to start over, and a different PREVIEW
+    // declaration is the third: it is consumed ONCE, at mount (its services register into the
+    // newborn container), so a new one can only take effect in a new application. Hosts keep the
+    // declaration's identity stable for as long as they mean the same thing.
+    if (this.app
+      && (this.app.root !== spec.rootReference || this.app.element !== current
+        || this.app.preview !== spec.preview)) {
+      this.app.handle.unmount();
+      this.app = null;
+    }
+    if (this.app) {
+      this.app.handle.render(spec.tree);
+      return true;
+    }
+    let root;
+    try {
+      // the fallback rides along: the tree renderer reads it from the holder WITHOUT loading
+      // (it must not throw while handling an error), so it has to be there before anything fails
+      const fallback = fallbackOf(spec.tree);
+      [root] = await Promise.all([
+        loadModule(this.holder, spec.rootReference),
+        fallback ? loadModule(this.holder, fallback) : undefined,
+      ]);
+    } catch (caught) {
+      if (turn !== this.turn) return false;
+      throw Errors.toError(caught);
+    }
+    const module = root?.module as IRootComponentSide | undefined;
+    if (typeof module?.mount !== 'function') {
+      if (turn !== this.turn) return false;
+      throw new Error(`host: ${spec.rootReference} cannot mount anything`);
+    }
+    const fresh = element();
+    if (turn !== this.turn || !fresh) return false;
+    this.app = {
+      root: spec.rootReference,
+      element: fresh,
+      preview: spec.preview,
+      handle: module.mount(fresh, { tree: spec.tree, preview: spec.preview, parentDi: this.parentDi }),
+    };
+    return true;
+  }
+
+  /** forget any show still in flight — whatever supersedes it is already on its way */
+  cancel(): void {
+    this.turn++;
+  }
+
+  dispose(): void {
+    this.cancel();
+    this.app?.handle.unmount();
+    this.app = null;
+  }
+}

package/tiles/content/nodeSettings.css

@@ -0,0 +1,483 @@
+.settings {
+  font: var(--mosetta-wb-font)/1.5 ui-sans-serif, system-ui, sans-serif;
+}
+
+.settings__hint {
+  color: #71717a;
+  padding: 12px;
+}
+
+.settings__target {
+  color: #71717a;
+  font-size: var(--mosetta-wb-font-xs);
+  padding: 4px 0;
+}
+
+.settings__ssr {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 0;
+  color: #3f3f46;
+  cursor: pointer;
+}
+
+/* the root's block: a select with its words under it — the one choice made at creation before */
+.settings__root {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 2px 0 8px;
+}
+
+.settings__root-label {
+  font-size: var(--mosetta-wb-font-xs);
+  font-weight: 500;
+  color: #71717a;
+}
+
+.settings__root-select {
+  height: var(--mosetta-wb-icon-box);
+  padding: 0 6px;
+  border: 1px solid #d4d4d8;
+  border-radius: 5px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  color: #27272a;
+  background: #fff;
+}
+
+.settings__root-hint {
+  font-size: var(--mosetta-wb-font-2xs);
+  color: #a1a1aa;
+}
+
+.settings__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px 0;
+}
+
+.settings__meta-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.settings__meta-flag {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.settings__meta-label {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #71717a;
+}
+
+.settings__meta-input {
+  font: inherit;
+  padding: 4px 8px;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+  background: transparent;
+}
+
+.settings__lang {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 0;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.settings__lang-select {
+  font: inherit;
+  padding: 2px 6px;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+  background: transparent;
+}
+
+.settings__lang-missing {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #71717a;
+}
+
+.settings__lang-translate {
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  padding: 2px 8px;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+  background: #fafafa;
+  cursor: pointer;
+}
+
+.settings__lang-translate:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.settings__lang-error {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #dc2626;
+}
+
+/* The form area with its reference gutter: the pickers sit to the right of the fields the form
+   marks with data-field — drawn by the editor, the form knows nothing of them. */
+.settings__form {
+  position: relative;
+}
+
+/* the gutter the reference circles sit in — only for a form with a field that can have one */
+.settings__form[data-bindable] {
+  padding-right: calc(var(--mosetta-wb-icon-box) + 8px);
+}
+
+.settings__ref {
+  position: absolute;
+  /* `top` is the field's middle, `left` just past its right edge — the circle centres on it */
+  transform: translateY(-50%);
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  padding: 0;
+  border: 1px solid #d4d4d8;
+  border-radius: 50%;
+  background: #ffffff;
+  color: #71717a;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.settings__ref::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.settings__ref:hover {
+  border-color: #a1a1aa;
+  color: #3f3f46;
+}
+
+.settings__ref--bound {
+  border-color: #2563eb;
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+/* What does not fit (settingsIssues.tsx): a plaque above the form on every tab, and the field it
+   is about in red — over a bound field's blue, since a wrong value matters more */
+.settings__issues {
+  margin: 8px 12px;
+  padding: 8px 10px;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  background: #fef2f2;
+  color: #991b1b;
+  font-size: var(--mosetta-wb-font-xs);
+}
+
+.settings__issues-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.settings__issues-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.settings__issue-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.settings__issue-remove {
+  flex: none;
+  padding: 0 6px;
+  border: 1px solid #fca5a5;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #991b1b;
+  font: inherit;
+  cursor: pointer;
+}
+
+.settings__issue-remove:hover {
+  border-color: #dc2626;
+}
+
+.settings__issue {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  padding: 2px 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.settings__issue:hover {
+  text-decoration: underline;
+}
+
+.settings__issue code {
+  font-weight: 600;
+}
+
+.settings__issues-note {
+  margin-top: 4px;
+  color: #b91c1c;
+  opacity: 0.8;
+}
+
+.settings__form [data-mosetta-invalid],
+.settings__form [data-mosetta-invalid][data-mosetta-bound] {
+  border-color: #dc2626 !important;
+  box-shadow: 0 0 0 1px #dc2626 !important;
+}
+
+/* a bound field wears the editor's colour on its own border — its own shape and radius, whatever
+   the form drew (FieldRefs marks it); two pixels, so it reads at a glance */
+.settings__form [data-mosetta-bound] {
+  border-color: #2563eb !important;
+  box-shadow: 0 0 0 1px #2563eb !important;
+}
+
+.settings__form [data-mosetta-bound]:focus-visible {
+  box-shadow: 0 0 0 2px #2563eb !important;
+}
+
+.settings__picker {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  max-height: 420px;
+  overflow: auto;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 8px 24px #0000001f;
+  font: var(--mosetta-wb-font-sm)/1.4 ui-sans-serif, system-ui, sans-serif;
+}
+
+/* scoped under the picker, like the block picker's: the shared field's `flex: 1` must not win a tie */
+.settings__picker .settings__picker-search-field {
+  flex: none;
+  width: 100%;
+}
+
+.settings__picker-search {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-bottom: 1px solid #e4e4e7;
+  font: inherit;
+  outline: none;
+}
+
+.settings__picker-group {
+  padding: 6px 8px 2px;
+  color: #52525b;
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+}
+
+.settings__picker-where {
+  color: #a1a1aa;
+}
+
+.settings__picker-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px 6px 20px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.settings__picker-row:hover {
+  background: #f4f4f5;
+}
+
+.settings__picker-row--current {
+  background: #eff6ff;
+  box-shadow: inset 2px 0 0 #2563eb;
+}
+
+/* what names the value — its key, and who reads it when the key does not say */
+.settings__picker-key {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #71717a;
+}
+
+.settings__picker-row--current .settings__picker-key {
+  color: #1d4ed8;
+}
+
+/* the value itself, whole: the author recognizes a text by reading it */
+.settings__picker-value {
+  color: #18181b;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.settings__picker-action {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-top: 1px solid #e4e4e7;
+  background: transparent;
+  font: inherit;
+  color: #52525b;
+  text-align: left;
+  cursor: pointer;
+}
+
+.settings__picker-action:hover {
+  background: #f4f4f5;
+}
+
+.settings__picker-empty {
+  padding: 6px 8px;
+  color: #a1a1aa;
+}
+
+/* the settings of a node, as one fieldset: disabled on a published revision (read-only) */
+.settings__fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.settings__fieldset[disabled] {
+  opacity: 0.75;
+}
+
+/* a section of the editor's own settings: a tab's mark (settingsTabs.ts), no box of its own */
+.settings__section {
+  display: contents;
+}
+
+/* A PREFAB's own block, selected on a page: a plaque over its read-only settings — whose block it
+   is, why it is not changed here, and the ways on (prefabParts.ts) */
+.settings__part {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 2px 0 8px;
+  padding: 8px 10px;
+  border: 1px solid #c7d2fe;
+  border-radius: 6px;
+  background: #eef2ff;
+}
+
+.settings__part-text {
+  margin: 0;
+  color: #3730a3;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+.settings__part-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.settings__part-action {
+  height: var(--mosetta-wb-icon-box);
+  padding: 0 10px;
+  border: 1px solid #c7d2fe;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #3730a3;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  cursor: pointer;
+}
+
+.settings__part-action:hover {
+  border-color: #818cf8;
+}
+
+.settings__part-action--main {
+  border-color: #4f46e5;
+  background: #4f46e5;
+  color: #ffffff;
+}
+
+.settings__part-action--main:hover {
+  background: #4338ca;
+}
+
+/* a block with a NEWER VERSION: the same plaque, in blue (blockUpgrades.ts) */
+.settings__part--up {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+}
+
+.settings__part--up .settings__part-text {
+  color: #1e40af;
+}
+
+/* a link among the plaque's actions reads like its buttons */
+a.settings__part-action {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
+/* A block of a DISCONNECTED distribution: the same plaque, in a warning's colours (disconnected.ts) */
+.settings__part--off {
+  border-color: #fcd34d;
+  background: #fffbeb;
+}
+
+.settings__part--off .settings__part-text {
+  color: #92400e;
+}
+
+.settings__part--off .settings__part-action {
+  border-color: #fcd34d;
+  color: #92400e;
+}
+
+.settings__part--off .settings__part-action:hover {
+  border-color: #f59e0b;
+}
+
+.settings__part--off .settings__part-action--main {
+  border-color: #b45309;
+  background: #b45309;
+  color: #ffffff;
+}
+
+.settings__part--off .settings__part-action--main:hover {
+  background: #92400e;
+}