@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/lib/snackbar.ts

@@ -1,149 +1,149 @@
-// The messages at the bottom of the screen (snackbars), the same in the editor (notify in App.tsx) and on
-// the site (a new version of a page, PageLayout.astro): in the middle, the newest lowest and the ones before
-// it moved up. Their look and place are the theme's Snackbar (.snackbar-stack and .snackbar in
-// packages/editor/theme/styles/ui.css). The editor's are drawn here, a text and links; the site's are drawn by
-// the theme's part (packages/editor/theme/ui/Snackbar.tsx, with its action and close button) and shown with
-// `element` (ui/snackbar.script.ts).
-//
-// A message goes away by itself after a few seconds (an error after a little longer; not while the
-// mouse or a finger is on it or a link in it has focus), when it is tapped, or when it is swiped left
-// or right: it follows the finger (or the mouse) sideways and fades; let go far enough (a third of its
-// width) or fast enough, and it slides out to that side, else it slides back. Up and down still
-// scroll the page. A swipe that started on a link does not also follow it.
-// One about something going on ("Gemmer…") stays until the next message replaces it; snackbar(null) only
-// takes that one away.
-import arrow from '@phosphor-icons/core/assets/regular/arrow-right.svg?raw';
-
-export type SnackbarLink = { text: string; href: string; onClick?: (e: MouseEvent) => void };
-export type SnackbarMessage = {
-  text: string;
-  error?: boolean;
-  /** Links after the text, each with an arrow. */
-  links?: SnackbarLink[];
-  /** How long it stays, when longer than usual (e.g. with links to read). */
-  ms?: number;
-  /** The message as the site's theme draws it (its Snackbar part), shown in place of the text and links. */
-  element?: HTMLElement;
-};
-
-const SNACKBAR_MS = 5000;
-const SNACKBAR_ERROR_MS = 8000;
-
-let stack: HTMLDivElement | undefined;
-const reduce = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
-const working = (text: string) => text.endsWith('…');
-
-/** Shows a message at the bottom (or with null takes away the one about something going on). */
-export function snackbar(next: SnackbarMessage | null) {
-  stack ??= Object.assign(document.createElement('div'), { className: 'snackbar-stack' });
-  // A popover, so it is in front of an open sheet or dialog too (they are in the top layer).
-  stack.popover = 'manual';
-  if (!stack.isConnected) document.body.append(stack);
-  for (const el of stack.querySelectorAll<HTMLElement>('.snackbar')) {
-    if (working(el.dataset.text!) || el.dataset.text === next?.text) el.remove();
-  }
-  if (next) show(stack, next);
-  if (!stack.childElementCount) return stack.remove();
-  // Shown again for each message, so it comes in front of a sheet opened after the last one.
-  if (stack.showPopover) {
-    if (stack.matches(':popover-open')) stack.hidePopover();
-    stack.showPopover();
-  }
-}
-
-function show(stack: HTMLDivElement, { text, error, links = [], ms, element }: SnackbarMessage) {
-  const el = element ?? document.createElement('p');
-  el.dataset.text = text;
-  if (!element) {
-    el.className = 'snackbar';
-    el.setAttribute('role', error ? 'alert' : 'status');
-    el.append(text);
-  }
-  for (const link of element ? [] : links) {
-    const a = document.createElement('a');
-    a.className = 'snackbar-link';
-    a.href = link.href;
-    a.innerHTML = arrow.replace('<svg', '<svg width="14" height="14" fill="currentColor" aria-hidden="true"');
-    a.prepend(link.text);
-    if (link.onClick) a.addEventListener('click', link.onClick);
-    el.append(' ', a);
-  }
-  stack.append(el);
-
-  const remove = () => {
-    clearTimeout(timer);
-    el.remove();
-    if (!stack.childElementCount) stack.remove();
-  };
-  // Goes by itself, but not while it is being read or swiped.
-  const wait = working(text) ? 0 : (ms ?? (error ? SNACKBAR_ERROR_MS : SNACKBAR_MS));
-  let timer = wait ? setTimeout(remove, wait) : undefined;
-  const hold = () => clearTimeout(timer);
-  const resume = () => {
-    clearTimeout(timer);
-    if (wait && el.isConnected && !el.matches(':hover, :focus-within')) timer = setTimeout(remove, wait / 2);
-  };
-  el.addEventListener('pointerenter', hold);
-  el.addEventListener('pointerleave', resume);
-  el.addEventListener('focusin', hold);
-  el.addEventListener('focusout', resume);
-  // The theme's (with a close button): Escape closes it too, while it has focus.
-  if (element) el.addEventListener('keydown', (e) => e.key === 'Escape' && remove());
-
-  // Swipe.
-  let start: { x: number; y: number; t: number; id: number } | null = null;
-  let dx = 0;
-  let dragging = false;
-  el.addEventListener('pointerdown', (e) => {
-    if (e.button !== 0) return;
-    start = { x: e.clientX, y: e.clientY, t: e.timeStamp, id: e.pointerId };
-    dx = 0;
-    dragging = false;
-    hold();
-  });
-  el.addEventListener('pointermove', (e) => {
-    if (!start || e.pointerId !== start.id) return;
-    dx = e.clientX - start.x;
-    if (!dragging) {
-      if (Math.abs(dx) < 8 || Math.abs(dx) < Math.abs(e.clientY - start.y)) return;
-      dragging = true;
-      el.setPointerCapture(e.pointerId);
-      el.getAnimations().forEach((a) => a.finish());
-    }
-    el.style.transform = `translateX(${dx}px)`;
-    el.style.opacity = String(Math.max(0.2, 1 - Math.abs(dx) / el.offsetWidth));
-  });
-  const up = (e: PointerEvent) => {
-    if (!start || e.pointerId !== start.id) return;
-    const speed = Math.abs(dx) / Math.max(1, e.timeStamp - start.t);
-    start = null;
-    resume();
-    if (!dragging) return;
-    const from = { transform: el.style.transform, opacity: el.style.opacity };
-    const duration = reduce() ? 0 : 200;
-    if (e.type === 'pointerup' && (Math.abs(dx) > el.offsetWidth / 3 || speed > 0.6)) {
-      const to = { transform: `translateX(${Math.sign(dx) * (el.offsetWidth + 32)}px)`, opacity: 0 };
-      el.animate([from, to], { duration, easing: 'ease-out', fill: 'forwards' }).finished.then(remove);
-      return;
-    }
-    el.animate([from, { transform: 'none', opacity: 1 }], { duration, easing: 'ease-out' });
-    el.style.transform = '';
-    el.style.opacity = '';
-  };
-  el.addEventListener('pointerup', up);
-  el.addEventListener('pointercancel', up);
-  // With the mouse, a link would otherwise be dragged instead of the message.
-  el.addEventListener('dragstart', (e) => e.preventDefault());
-  // A tap takes it away (a tap on a link or an action also follows it, and on the close button only takes it
-  // away); the click at the end of a swipe does nothing.
-  el.addEventListener(
-    'click',
-    (e) => {
-      if (!dragging) return remove();
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      dragging = false;
-    },
-    true,
-  );
-}
+// The messages at the bottom of the screen (snackbars), the same in the editor (notify in App.tsx) and on
+// the site (a new version of a page, PageLayout.astro): in the middle, the newest lowest and the ones before
+// it moved up. Their look and place are the theme's Snackbar (.snackbar-stack and .snackbar in
+// packages/editor/theme/styles/ui.css). The editor's are drawn here, a text and links; the site's are drawn by
+// the theme's part (packages/editor/theme/ui/Snackbar.tsx, with its action and close button) and shown with
+// `element` (ui/snackbar.script.ts).
+//
+// A message goes away by itself after a few seconds (an error after a little longer; not while the
+// mouse or a finger is on it or a link in it has focus), when it is tapped, or when it is swiped left
+// or right: it follows the finger (or the mouse) sideways and fades; let go far enough (a third of its
+// width) or fast enough, and it slides out to that side, else it slides back. Up and down still
+// scroll the page. A swipe that started on a link does not also follow it.
+// One about something going on ("Gemmer…") stays until the next message replaces it; snackbar(null) only
+// takes that one away.
+import arrow from '@phosphor-icons/core/assets/regular/arrow-right.svg?raw';
+
+export type SnackbarLink = { text: string; href: string; onClick?: (e: MouseEvent) => void };
+export type SnackbarMessage = {
+  text: string;
+  error?: boolean;
+  /** Links after the text, each with an arrow. */
+  links?: SnackbarLink[];
+  /** How long it stays, when longer than usual (e.g. with links to read). */
+  ms?: number;
+  /** The message as the site's theme draws it (its Snackbar part), shown in place of the text and links. */
+  element?: HTMLElement;
+};
+
+const SNACKBAR_MS = 5000;
+const SNACKBAR_ERROR_MS = 8000;
+
+let stack: HTMLDivElement | undefined;
+const reduce = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+const working = (text: string) => text.endsWith('…');
+
+/** Shows a message at the bottom (or with null takes away the one about something going on). */
+export function snackbar(next: SnackbarMessage | null) {
+  stack ??= Object.assign(document.createElement('div'), { className: 'snackbar-stack' });
+  // A popover, so it is in front of an open sheet or dialog too (they are in the top layer).
+  stack.popover = 'manual';
+  if (!stack.isConnected) document.body.append(stack);
+  for (const el of stack.querySelectorAll<HTMLElement>('.snackbar')) {
+    if (working(el.dataset.text!) || el.dataset.text === next?.text) el.remove();
+  }
+  if (next) show(stack, next);
+  if (!stack.childElementCount) return stack.remove();
+  // Shown again for each message, so it comes in front of a sheet opened after the last one.
+  if (stack.showPopover) {
+    if (stack.matches(':popover-open')) stack.hidePopover();
+    stack.showPopover();
+  }
+}
+
+function show(stack: HTMLDivElement, { text, error, links = [], ms, element }: SnackbarMessage) {
+  const el = element ?? document.createElement('p');
+  el.dataset.text = text;
+  if (!element) {
+    el.className = 'snackbar';
+    el.setAttribute('role', error ? 'alert' : 'status');
+    el.append(text);
+  }
+  for (const link of element ? [] : links) {
+    const a = document.createElement('a');
+    a.className = 'snackbar-link';
+    a.href = link.href;
+    a.innerHTML = arrow.replace('<svg', '<svg width="14" height="14" fill="currentColor" aria-hidden="true"');
+    a.prepend(link.text);
+    if (link.onClick) a.addEventListener('click', link.onClick);
+    el.append(' ', a);
+  }
+  stack.append(el);
+
+  const remove = () => {
+    clearTimeout(timer);
+    el.remove();
+    if (!stack.childElementCount) stack.remove();
+  };
+  // Goes by itself, but not while it is being read or swiped.
+  const wait = working(text) ? 0 : (ms ?? (error ? SNACKBAR_ERROR_MS : SNACKBAR_MS));
+  let timer = wait ? setTimeout(remove, wait) : undefined;
+  const hold = () => clearTimeout(timer);
+  const resume = () => {
+    clearTimeout(timer);
+    if (wait && el.isConnected && !el.matches(':hover, :focus-within')) timer = setTimeout(remove, wait / 2);
+  };
+  el.addEventListener('pointerenter', hold);
+  el.addEventListener('pointerleave', resume);
+  el.addEventListener('focusin', hold);
+  el.addEventListener('focusout', resume);
+  // The theme's (with a close button): Escape closes it too, while it has focus.
+  if (element) el.addEventListener('keydown', (e) => e.key === 'Escape' && remove());
+
+  // Swipe.
+  let start: { x: number; y: number; t: number; id: number } | null = null;
+  let dx = 0;
+  let dragging = false;
+  el.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0) return;
+    start = { x: e.clientX, y: e.clientY, t: e.timeStamp, id: e.pointerId };
+    dx = 0;
+    dragging = false;
+    hold();
+  });
+  el.addEventListener('pointermove', (e) => {
+    if (!start || e.pointerId !== start.id) return;
+    dx = e.clientX - start.x;
+    if (!dragging) {
+      if (Math.abs(dx) < 8 || Math.abs(dx) < Math.abs(e.clientY - start.y)) return;
+      dragging = true;
+      el.setPointerCapture(e.pointerId);
+      el.getAnimations().forEach((a) => a.finish());
+    }
+    el.style.transform = `translateX(${dx}px)`;
+    el.style.opacity = String(Math.max(0.2, 1 - Math.abs(dx) / el.offsetWidth));
+  });
+  const up = (e: PointerEvent) => {
+    if (!start || e.pointerId !== start.id) return;
+    const speed = Math.abs(dx) / Math.max(1, e.timeStamp - start.t);
+    start = null;
+    resume();
+    if (!dragging) return;
+    const from = { transform: el.style.transform, opacity: el.style.opacity };
+    const duration = reduce() ? 0 : 200;
+    if (e.type === 'pointerup' && (Math.abs(dx) > el.offsetWidth / 3 || speed > 0.6)) {
+      const to = { transform: `translateX(${Math.sign(dx) * (el.offsetWidth + 32)}px)`, opacity: 0 };
+      el.animate([from, to], { duration, easing: 'ease-out', fill: 'forwards' }).finished.then(remove);
+      return;
+    }
+    el.animate([from, { transform: 'none', opacity: 1 }], { duration, easing: 'ease-out' });
+    el.style.transform = '';
+    el.style.opacity = '';
+  };
+  el.addEventListener('pointerup', up);
+  el.addEventListener('pointercancel', up);
+  // With the mouse, a link would otherwise be dragged instead of the message.
+  el.addEventListener('dragstart', (e) => e.preventDefault());
+  // A tap takes it away (a tap on a link or an action also follows it, and on the close button only takes it
+  // away); the click at the end of a swipe does nothing.
+  el.addEventListener(
+    'click',
+    (e) => {
+      if (!dragging) return remove();
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      dragging = false;
+    },
+    true,
+  );
+}

package/lib/status.mjs

@@ -1,18 +1,18 @@
-// The status of a page or blog post: `status` in its front matter, "Status" at the top of it in the
-// editor (packages/editor/defaults/collections.ts).
-//   (none)     Udgivet: on the site.
-//   draft      Kladde: not on the site (in dev, and on the editor's preview, it opens on its address).
-//   unlisted   Skjult: opens on its address, but is not on the blog, in the sitemap or in Google.
-//   scheduled  Planlagt: a draft until `publishAt` (Danish time, "2026-11-01T08:00"), then published.
-//              A build after that time has it; each hour the site's Worker makes it Udgivet in the file
-//              (packages/editor/worker/publish.js, packages/editor/lib/scheduled.mjs), which builds the site.
-// No dependencies, so the Worker can use it.
-import { isOver } from './notice.mjs';
-
-/** What a page or post is on a site built at `now`: 'published', 'draft' or 'unlisted'.
- * @param {{ status?: unknown; publishAt?: unknown }} data
- * @returns {'published' | 'draft' | 'unlisted'} */
-export function stateOf(data, now = Date.now()) {
-  if (data.status === 'scheduled') return isOver(String(data.publishAt ?? ''), now) ? 'published' : 'draft';
-  return data.status === 'draft' || data.status === 'unlisted' ? data.status : 'published';
-}
+// The status of a page or blog post: `status` in its front matter, "Status" at the top of it in the
+// editor (packages/editor/defaults/collections.ts).
+//   (none)     Udgivet: on the site.
+//   draft      Kladde: not on the site (in dev, and on the editor's preview, it opens on its address).
+//   unlisted   Skjult: opens on its address, but is not on the blog, in the sitemap or in Google.
+//   scheduled  Planlagt: a draft until `publishAt` (Danish time, "2026-11-01T08:00"), then published.
+//              A build after that time has it; each hour the site's Worker makes it Udgivet in the file
+//              (packages/editor/worker/publish.js, packages/editor/lib/scheduled.mjs), which builds the site.
+// No dependencies, so the Worker can use it.
+import { isOver } from './notice.mjs';
+
+/** What a page or post is on a site built at `now`: 'published', 'draft' or 'unlisted'.
+ * @param {{ status?: unknown; publishAt?: unknown }} data
+ * @returns {'published' | 'draft' | 'unlisted'} */
+export function stateOf(data, now = Date.now()) {
+  if (data.status === 'scheduled') return isOver(String(data.publishAt ?? ''), now) ? 'published' : 'draft';
+  return data.status === 'draft' || data.status === 'unlisted' ? data.status : 'published';
+}

package/lib/storeEntries.d.mts

@@ -0,0 +1,18 @@
+/**
+ * @param {any} x
+ * @param {number} api
+ * @returns {boolean}
+ */
+export function validApp(x: any, api: number): boolean;
+/**
+ * @param {any} x
+ * @param {number} api
+ * @returns {boolean}
+ */
+export function validTheme(x: any, api: number): boolean;
+export function isText(v: unknown): v is string;
+export function isPath(v: unknown): boolean;
+export const ITEM_ID: RegExp;
+export const REFUSED_APPS: string[];
+export const STANDARD: "saturn";
+export const RECORD: "store.json";

package/lib/storeEntries.mjs

@@ -0,0 +1,64 @@
+/**
+ * Pure validation logic for store apps and themes.
+ * Exposes isText, isPath, ITEM_ID, REFUSED_APPS, STANDARD, RECORD, validApp, validTheme.
+ * No external dependencies.
+ */
+
+/**
+ * @param {unknown} v
+ * @returns {v is string}
+ */
+export const isText = (v) => typeof v === 'string' && v.trim() !== '';
+
+/**
+ * @param {unknown} v
+ * @returns {boolean}
+ */
+export const isPath = (v) => isText(v) && v.split('/').every((part) => part !== '' && part !== '.' && part !== '..');
+
+export const ITEM_ID = /^[a-z0-9][a-z0-9-]*$/;
+// The store's address before and a developer's page (STORE_BEFORE and DEVELOPER_ROUTE in src/store.ts)
+export const REFUSED_APPS = ['butik', 'udvikler'];
+// The standard theme, which every site has
+export const STANDARD = 'saturn';
+// The note in an installed folder of where it came from
+export const RECORD = 'store.json';
+
+const isAdd = (v) => isText(v?.label) && isText(v?.icon);
+const isGoodFile = (f) => isText(f?.oid) && isPath(f?.path) && f.path !== RECORD;
+
+/**
+ * @param {any} x
+ * @param {number} api
+ * @returns {boolean}
+ */
+export function validApp(x, api) {
+  return (
+    ITEM_ID.test(x?.id ?? '') &&
+    !REFUSED_APPS.includes(x.id) &&
+    isText(x.version) &&
+    x.api === api &&
+    [x.label, x.publisher, x.icon, x.hint].every(isText) &&
+    Array.isArray(x.files) &&
+    x.files.length > 0 &&
+    x.files.every(isGoodFile) &&
+    ['blocks', 'lists', 'kinds'].every((k) => Array.isArray(x.adds?.[k]) && x.adds[k].every(isAdd))
+  );
+}
+
+/**
+ * @param {any} x
+ * @param {number} api
+ * @returns {boolean}
+ */
+export function validTheme(x, api) {
+  return (
+    ITEM_ID.test(x?.id ?? '') &&
+    x.id !== STANDARD &&
+    x.api === api &&
+    [x.version, x.name, x.author, x.icon].every(isText) &&
+    Array.isArray(x.files) &&
+    x.files.length > 0 &&
+    x.files.every(isGoodFile)
+  );
+}

package/lib/storeEntries.test.d.mts

@@ -0,0 +1 @@
+export {};

package/lib/storeEntries.test.mjs

@@ -0,0 +1,71 @@
+/**
+ * Tests for store entry validation logic (validApp, validTheme, isPath).
+ * Run with `node --test packages/editor/lib/*.test.mjs` (part of npm run check).
+ */
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { validApp, validTheme, isPath } from './storeEntries.mjs';
+
+const theme = () => ({
+  id: 'venus',
+  version: '1.0.0',
+  api: 4,
+  name: 'Venus',
+  author: 'Morpheme',
+  icon: 'palette',
+  files: [{ path: 'theme.json', oid: 'a'.repeat(40) }],
+});
+const app = () => ({
+  id: 'calendly',
+  version: '1.0.0',
+  api: 2,
+  label: 'Calendly',
+  publisher: 'Morpheme',
+  icon: 'event',
+  hint: 'Bookings',
+  files: [{ path: 'index.ts', oid: 'b'.repeat(40) }],
+  adds: { blocks: [{ label: 'Booking', icon: 'event' }], lists: [], kinds: [] },
+});
+
+test('valid theme', () => {
+  assert.equal(validTheme(theme(), 4), true);
+});
+
+test('valid theme wrong api', () => {
+  assert.equal(validTheme({ ...theme(), api: 3 }, 4), false);
+});
+
+test('valid theme standard id', () => {
+  assert.equal(validTheme({ ...theme(), id: 'saturn' }, 4), false);
+});
+
+test('valid theme bad path', () => {
+  assert.equal(validTheme({ ...theme(), files: [{ path: '../x', oid: 'a'.repeat(40) }] }, 4), false);
+});
+
+test('valid theme record path', () => {
+  assert.equal(validTheme({ ...theme(), files: [{ path: 'store.json', oid: 'a'.repeat(40) }] }, 4), false);
+});
+
+test('valid theme empty files', () => {
+  assert.equal(validTheme({ ...theme(), files: [] }, 4), false);
+});
+
+test('valid app', () => {
+  assert.equal(validApp(app(), 2), true);
+});
+
+test('valid app refused id', () => {
+  assert.equal(validApp({ ...app(), id: 'butik' }, 2), false);
+});
+
+test('valid app missing adds kinds', () => {
+  assert.equal(validApp({ ...app(), adds: { blocks: [], lists: [] } }, 2), false);
+});
+
+test('isPath cases', () => {
+  assert.equal(isPath('styles/global.css'), true);
+  assert.equal(isPath('a//b'), false);
+  assert.equal(isPath('./a'), false);
+  assert.equal(isPath(''), false);
+});