@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/content/contentCommon.ts

@@ -0,0 +1,133 @@
+// The editor↔server contract for the content API: tokens shared by the server facet
+// (content.server.ts) and the client facets via useServerAction. One set of editing actions for
+// both revisioned entities: a PAGE, or — with `kind: 'prefabs'` — a PREFAB, which travels in a
+// page's shape (its root as the page's root, prefabAsPage) and is stored as the prefab it is.
+// Plus the provider catalog.
+import {
+  ContentKind,
+  ICatalogEntry,
+  IDistributionEntry,
+  IContentMeta,
+  ILibraryPrefabEntry,
+  IDraftSummary,
+  ILoadedContent,
+  ILoadedDraft,
+  IPageDoc,
+} from '@mosetta/content';
+import { ServerActionToken } from '@mosetta/server-action/core';
+
+// Domain failures are structured results (not transport 5xx): the editor UI branches on `code`
+// (NOT_FOUND / ALREADY_EXISTS / NO_REVISION / NO_DRAFT / CONFLICT / PUBLISH_VALIDATION / …).
+export type ContentActionResult<T>
+  = | ({ readonly ok: true } & T)
+  | { readonly ok: false; readonly code: string; readonly message: string; readonly issues?: string[] };
+
+// ---- pages and prefabs ----
+
+/** which entity an editing action is about; a page when absent */
+export interface IKindInput {
+  readonly kind?: ContentKind;
+}
+
+/** a draft in the pages listing: the summary plus the ROUTE its working copy currently carries
+ * (patterns are versioned with the doc — a draft may be moving the page to another path) */
+export interface IPageDraftListItem extends Omit<IDraftSummary, 'pattern'> {
+  readonly pattern: string | null;
+}
+
+/**
+ * A page as the panel lists it. The entity name stays the storage key; the PATTERNS are read out
+ * of the documents (live revision + each draft) because the meta deliberately knows nothing about
+ * content — the panel presents routes, so the listing carries them.
+ */
+export interface IPageListEntry {
+  readonly name: string;
+  readonly meta: IContentMeta;
+  readonly drafts: readonly IPageDraftListItem[];
+  /** the live revision's route, or null while nothing is published */
+  readonly livePattern: string | null;
+}
+
+export const listPagesToken = new ServerActionToken<
+  IKindInput,
+  ContentActionResult<{ pages: IPageListEntry[] }>
+>({ actionName: 'listPages', serverModuleName: 'content', tags: ['pages'] });
+
+export const loadPageToken = new ServerActionToken<
+  { name: string; rev?: number } & IKindInput,
+  ContentActionResult<{ page: ILoadedContent<IPageDoc> }>
+>({ actionName: 'loadPage', serverModuleName: 'content', tags: ['pages'] });
+
+export const loadPageDraftToken = new ServerActionToken<
+  { name: string; draftId: string } & IKindInput,
+  ContentActionResult<{ draft: ILoadedDraft<IPageDoc> }>
+>({ actionName: 'loadPageDraft', serverModuleName: 'content', tags: ['pages'] });
+
+export const createPageToken = new ServerActionToken<
+  { name: string; page: IPageDoc } & IKindInput,
+  ContentActionResult<{ draftId: string }>
+>({ actionName: 'createPage', serverModuleName: 'content', invalidates: ['pages'] });
+
+export const savePageDraftToken = new ServerActionToken<
+  { name: string; draftId: string; page: IPageDoc } & IKindInput,
+  ContentActionResult<{ warnings: string[] }>
+>({ actionName: 'savePageDraft', serverModuleName: 'content', invalidates: ['pages'] });
+
+export const createPageDraftToken = new ServerActionToken<
+  { name: string; fromRev?: number } & IKindInput,
+  ContentActionResult<{ draftId: string; page: IPageDoc }>
+>({ actionName: 'createPageDraft', serverModuleName: 'content', invalidates: ['pages'] });
+
+// the conflict modal's "fork": the LOCAL working copy survives under a fresh draft identity
+export const forkPageDraftToken = new ServerActionToken<
+  { name: string; page: IPageDoc } & IKindInput,
+  ContentActionResult<{ draftId: string; page: IPageDoc }>
+>({ actionName: 'forkPageDraft', serverModuleName: 'content', invalidates: ['pages'] });
+
+export const publishPageToken = new ServerActionToken<
+  { name: string; draftId: string; title?: string } & IKindInput,
+  ContentActionResult<{ live: number }>
+>({ actionName: 'publishPage', serverModuleName: 'content', invalidates: ['pages'] });
+
+export const discardPageDraftToken = new ServerActionToken<
+  { name: string; draftId: string } & IKindInput,
+  ContentActionResult<{}>
+>({ actionName: 'discardPageDraft', serverModuleName: 'content', invalidates: ['pages'] });
+
+/** a published prefab of the project as the editor shows it: its live tree, in a page's shape */
+export interface IPrefabTree {
+  readonly name: string;
+  readonly rev: number;
+  readonly doc: IPageDoc;
+}
+
+/** the live trees of the project's prefabs named — the palette's previews, the tree's read-only rows,
+ *  an instance's open fields; a prefab not published is left out */
+export const prefabTreesToken = new ServerActionToken<
+  { names: string[] },
+  ContentActionResult<{ prefabs: IPrefabTree[] }>
+>({ actionName: 'prefabTrees', serverModuleName: 'content', tags: ['pages'] });
+
+/** the project's content config (config.json) — which languages its addresses serve, and more */
+export const projectConfigToken = new ServerActionToken<
+  {},
+  ContentActionResult<{ config: Record<string, unknown> }>
+>({ actionName: 'projectConfig', serverModuleName: 'content', tags: ['config'] });
+
+
+/** everything readers kept of the live site is read anew — for a change made to the store by hand */
+export const refreshLiveSiteToken = new ServerActionToken<
+  {},
+  ContentActionResult<{ refreshed: boolean }>
+>({ actionName: 'refreshLiveSite', serverModuleName: 'content' });
+
+export const deletePageToken = new ServerActionToken<
+  { name: string } & IKindInput,
+  ContentActionResult<{}>
+>({ actionName: 'deletePage', serverModuleName: 'content', invalidates: ['pages'] });
+
+// ---- catalog ----
+export const listComponentsToken = new ServerActionToken<
+  { types?: string[] },
+  ContentActionResult<{ components: ICatalogEntry[]; distributions?: IDistributionEntry[]; prefabs?: ILibraryPrefabEntry[] }>
+>({ actionName: 'listComponents', serverModuleName: 'content', tags: ['catalog'] });

package/tiles/content/disconnected.ts

@@ -0,0 +1,56 @@
+// The distributions the project DISCONNECTED (ADR-0059): the editor offers their blocks no more,
+// and the blocks a page already holds stay in it — the site leaves them out, the editor marks them
+// (the tree, the settings) and its preview shows a placeholder where each stands.
+import { useEffect, useState } from 'react';
+import { namespaceOfReference } from '@mosetta/content/units';
+import { PROJECT_INFO_PATH } from '../workbench/projectInfo';
+
+interface IDisconnection {
+  /** the disconnected distributions, by namespace */
+  readonly disabled: readonly string[];
+  /** where the project's settings are — the platform's own site; null on a dev server */
+  readonly platformOrigin: string | null;
+}
+
+const NOTHING_OFF: IDisconnection = { disabled: [], platformOrigin: null };
+
+/** the project's description, asked once per page — a change in the cabinet shows on reload */
+let asked: Promise<IDisconnection> | null = null;
+
+/**
+ * What the project disconnected, and where that is changed. The project's description says
+ * (`/__mosetta__/project`); a host without one disconnects nothing.
+ */
+export function useDisconnection(): IDisconnection {
+  const [known, setKnown] = useState<IDisconnection>(NOTHING_OFF);
+  useEffect(() => {
+    asked ??= fetch(PROJECT_INFO_PATH, { headers: { accept: 'application/json' } })
+      .then(async (res) => (res.ok ? (await res.json()) as { disabledDistributions?: unknown; platformOrigin?: unknown } : null))
+      .then((body) => ({
+        disabled: Array.isArray(body?.disabledDistributions) ? body.disabledDistributions.filter((n): n is string => typeof n === 'string') : [],
+        platformOrigin: typeof body?.platformOrigin === 'string' ? body.platformOrigin : null,
+      }))
+      .catch(() => NOTHING_OFF);
+    let alive = true;
+    void asked.then((value) => {
+      if (alive && value.disabled.length) setKnown(value);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return known;
+}
+
+/** the project's disconnected distributions, by namespace */
+export function useDisabledDistributions(): readonly string[] {
+  return useDisconnection().disabled;
+}
+
+
+/** the disconnected distribution a block (or prefab) comes from, or null */
+export function disconnectedOf(reference: string, disabled: readonly string[]): string | null {
+  if (!disabled.length) return null;
+  const namespace = namespaceOfReference(reference);
+  return namespace !== null && disabled.includes(namespace) ? namespace : null;
+}

package/tiles/content/distributions.css

@@ -0,0 +1,256 @@
+/* THE DISTRIBUTIONS (distributions.tsx): a grid of cards — cover, icon, title, what it brings —
+   and, one opened, a wall of its blocks' live previews, Pinterest-like (columns, each card as tall
+   as its block). */
+.distributions {
+  /* the workbench's main area is a frame of the window's height: the view scrolls inside it */
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 24px 28px 40px;
+  color: #18181b;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--mosetta-wb-font);
+}
+
+.distributions--note {
+  color: #71717a;
+}
+
+.distributions__header {
+  margin-bottom: 20px;
+}
+
+.distributions__heading {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.distributions__lead {
+  max-width: 640px;
+  margin: 6px 0 0;
+  color: #52525b;
+  line-height: 1.5;
+}
+
+.distributions__cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+}
+
+.distributions__card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid #e4e4e7;
+  border-radius: 12px;
+  background: #ffffff;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.distributions__card:hover {
+  border-color: #d4d4d8;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
+}
+
+/* the cover keeps its own proportions: a landscape picture, 16:9 */
+.distributions__cover {
+  display: block;
+  aspect-ratio: 16 / 9;
+  background: linear-gradient(135deg, #e4e4e7, #f4f4f5);
+}
+
+.distributions__cover img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.distributions__card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px 14px;
+}
+
+.distributions__card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.distributions__icon {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+}
+
+.distributions__icon--large {
+  width: 44px;
+  height: 44px;
+  border-radius: 11px;
+}
+
+.distributions__title {
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.distributions__description {
+  color: #52525b;
+  line-height: 1.45;
+}
+
+.distributions__meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 4px 0 0;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+}
+
+.distributions__source {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.distributions__source:hover {
+  text-decoration: underline;
+}
+
+.distributions__back {
+  margin: 0 0 14px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #52525b;
+  font: inherit;
+  cursor: pointer;
+}
+
+.distributions__back:hover {
+  color: #18181b;
+}
+
+.distributions__header-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+/* the wall: columns, each card as tall as its block — the eye runs down a column of shapes */
+.distributions__wall {
+  column-width: 260px;
+  column-gap: 16px;
+}
+
+.distributions__specimen {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 0 16px;
+  overflow: hidden;
+  border: 1px solid #e4e4e7;
+  border-radius: 12px;
+  background: #ffffff;
+  break-inside: avoid;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* a block's card opens its page (blockPage.tsx) */
+.distributions__specimen:hover,
+.distributions__specimen:focus-visible {
+  border-color: #d4d4d8;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
+}
+
+.distributions__specimen-open {
+  margin-left: auto;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.distributions__specimen:hover .distributions__specimen-open,
+.distributions__specimen:focus-visible .distributions__specimen-open {
+  opacity: 1;
+}
+
+.distributions__specimen-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.distributions__block-icon {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+}
+
+.distributions__block-name {
+  font-weight: 600;
+}
+
+/* the block itself: laid out at the stage's width, scaled to the card's */
+.distributions__specimen-view {
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+}
+
+.distributions__stage {
+  padding: 16px;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+}
+
+.distributions__no-preview {
+  padding: 18px 12px;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+}
+
+/* the version shown, once several are deployed (ADR-0061) */
+.distributions__version {
+  padding: 0 2px;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #52525b;
+  font: inherit;
+}
+
+/* what the version says it changed — its CHANGELOG section, folded */
+.distributions__changes {
+  max-width: 640px;
+  margin-top: 8px;
+  color: #52525b;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+.distributions__changes summary {
+  cursor: pointer;
+}
+
+.distributions__changes pre {
+  margin: 6px 0 0;
+  font: inherit;
+  white-space: pre-wrap;
+}