@morphemecms/cms 0.5.0 → 0.7.0

package/theme/ui/modalSheetSize.ts

@@ -0,0 +1,214 @@
+// How high a modal bottom sheet is on a phone and how it is pulled (bottomSheet() in bottomSheetControl.ts uses it):
+// modalSheetSize(dialog, panel, close) opens it at its start height (BottomSheet's `startAt`, data-start on the container,
+// 'half' without it: modalStartHeight in lib/sheet-stops.mjs), lets it be pulled by its handle, its header or its content,
+// and gives it up to close() when it is let go low enough (modalRestAfterDrag). While it is managed the container has
+// data-sized, data-full at full height and data-moving while it is pulled or moves (ui.css): the content scrolls, and a
+// frame in it takes touches, only at full height; below that a touch on the content pulls the sheet. At full height the
+// content pulls the sheet only when it is scrolled to the top and moves down. Touch only for the content (a mouse has no
+// scrolling to tell apart); pointer events for the handle and the header. The editor's sheets (bottom-sheet-fit and
+// bottom-sheet-full on the dialog) and the medium breakpoint upwards are left alone. The height follows the site's
+// motion scheme (motionSpring); with reduced motion it changes at once. Its window and media query listeners remove
+// themselves once the dialog is no longer in the page.
+import { animate } from 'motion';
+import { atLeast } from '@morphemecms/cms/lib/breakpoints.mjs';
+import { motionSpring } from '@morphemecms/cms/lib/motion';
+import { modalRestAfterDrag, modalStartHeight } from '@morphemecms/cms/lib/sheet-stops.mjs';
+
+export type ModalSheetSize = {
+  /** Whether it manages the sheet now: not the editor's sheets, and not from the medium breakpoint. */
+  managed: () => boolean;
+  /** Called when the dialog has been opened: measures and gives it its start height. */
+  open: () => void;
+  /** Called when it is closed: back to what ui.css says. */
+  reset: () => void;
+};
+
+export function modalSheetSize(dialog: HTMLDialogElement, panel: HTMLElement, close: () => void): ModalSheetSize {
+  const content = panel.querySelector<HTMLElement>('.bottom-sheet-content');
+  const handle = panel.querySelector<HTMLElement>('[data-bottom-sheet-handle]');
+  const header = panel.querySelector<HTMLElement>('.bottom-sheet-header');
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const wide = matchMedia(atLeast('medium'));
+  // The editor's sheets keep the heights their classes give them.
+  const own = dialog.classList.contains('bottom-sheet-fit') || dialog.classList.contains('bottom-sheet-full');
+  const managed = () => !own && !wide.matches;
+
+  let sizes: { start: number; full: number } | undefined;
+  let anim: { stop: () => void } | undefined;
+  // Bumped whenever something takes over, so a finished animation does not settle over it.
+  let run = 0;
+
+  // The start and the full height: what is in it (a frame fills the sheet, so it counts as unlimited), the screen's
+  // height and --bottom-sheet-top-gap.
+  function measure() {
+    const was = { height: dialog.style.height, maxHeight: dialog.style.maxHeight };
+    dialog.style.height = 'auto';
+    dialog.style.maxHeight = 'none';
+    const natural = content?.querySelector('iframe') ? Infinity : panel.offsetHeight;
+    dialog.style.height = was.height;
+    dialog.style.maxHeight = was.maxHeight;
+    const probe = document.createElement('div');
+    probe.style.cssText = 'position:absolute;visibility:hidden;height:var(--bottom-sheet-top-gap, 4.5rem)';
+    dialog.append(probe);
+    const topGap = probe.offsetHeight;
+    probe.remove();
+    const startAt = panel.dataset.start === 'full' ? 'full' : 'half';
+    const full = modalStartHeight(natural, innerHeight, 'full', topGap);
+    return { start: Math.min(full, modalStartHeight(natural, innerHeight, startAt, topGap)), full };
+  }
+
+  // The sheet is this high now (and data-full says whether that is full height).
+  function settle(px: number) {
+    dialog.style.height = `${px}px`;
+    panel.toggleAttribute('data-full', !!sizes && px >= sizes.full - 1);
+    delete panel.dataset.moving;
+  }
+
+  async function go(px: number) {
+    const id = ++run;
+    anim?.stop();
+    const from = dialog.offsetHeight;
+    if (reduce || from === px) return settle(px);
+    panel.dataset.moving = '';
+    const animation = animate(dialog, { height: [from, px] }, motionSpring('spatial'));
+    anim = animation;
+    try {
+      await animation;
+    } catch {
+      return;
+    }
+    if (id === run) settle(px);
+  }
+
+  function open() {
+    if (!managed()) return;
+    sizes = measure();
+    panel.setAttribute('data-sized', '');
+    run++;
+    settle(sizes.start);
+  }
+
+  function reset() {
+    run++;
+    anim?.stop();
+    drag = pending = undefined;
+    sizes = undefined;
+    for (const name of ['data-sized', 'data-full', 'data-moving']) panel.removeAttribute(name);
+    dialog.style.height = '';
+    panel.style.transform = '';
+  }
+
+  // Pulling: from `h`, the height it had when the pull began, `raw` is where the finger would take it; between the start
+  // and the full height the height follows, below the start the sheet slides down instead (so the content keeps its
+  // layout), and above full it stays.
+  let pending: { y: number } | undefined;
+  let drag: { y: number; h: number; raw: number; last: { y: number; t: number }; v: number } | undefined;
+
+  function begin(y: number, t: number) {
+    run++;
+    anim?.stop();
+    drag = { y, h: dialog.offsetHeight, raw: dialog.offsetHeight, last: { y, t }, v: 0 };
+    pending = undefined;
+    panel.removeAttribute('data-full');
+    panel.dataset.moving = '';
+  }
+
+  function move(y: number, t: number) {
+    if (!drag || !sizes) return;
+    drag.raw = Math.min(sizes.full, drag.h - (y - drag.y));
+    const low = Math.min(sizes.start, drag.h);
+    dialog.style.height = `${Math.max(low, drag.raw)}px`;
+    panel.style.transform = drag.raw < low ? `translateY(${low - drag.raw}px)` : '';
+    const dt = t - drag.last.t;
+    if (dt > 0) drag.v = (drag.last.y - y) / dt;
+    drag.last = { y, t };
+  }
+
+  function end() {
+    pending = undefined;
+    if (!drag || !sizes) return;
+    const { raw, v } = drag;
+    drag = undefined;
+    const rest = modalRestAfterDrag(sizes.start, sizes.full, raw, v);
+    if (rest === 'close') {
+      delete panel.dataset.moving;
+      close();
+      return;
+    }
+    if (reduce) panel.style.transform = '';
+    else animate(panel, { y: 0 }, motionSpring('spatial'));
+    go(rest === 'full' ? sizes.full : sizes.start);
+  }
+
+  // The handle and the header: a pull after 4px (not by a button in the header).
+  for (const el of [handle, header]) {
+    el?.addEventListener('pointerdown', (e) => {
+      const target = e.target as Element;
+      if (!managed() || !sizes || e.button !== 0 || target.closest('button, a')) return;
+      pending = { y: e.clientY };
+      el.setPointerCapture(e.pointerId);
+    });
+    el?.addEventListener('pointermove', (e) => {
+      if (!pending && !drag) return;
+      if (!drag) {
+        if (Math.abs(e.clientY - pending!.y) < 4) return;
+        begin(e.clientY, e.timeStamp);
+      }
+      move(e.clientY, e.timeStamp);
+    });
+    el?.addEventListener('pointerup', end);
+    el?.addEventListener('pointercancel', end);
+  }
+
+  // The content: below full height every touch pulls the sheet (ui.css has stopped it scrolling); at full height a touch
+  // pulls it only when it moves down while the content is at the top, else the content scrolls.
+  content?.addEventListener('touchstart', (e) => {
+    if (managed() && sizes && e.touches.length === 1) pending = { y: e.touches[0].clientY };
+  });
+  content?.addEventListener(
+    'touchmove',
+    (e) => {
+      if (!pending && !drag) return;
+      const y = e.touches[0].clientY;
+      if (!drag) {
+        const dy = y - pending!.y;
+        if (panel.hasAttribute('data-full')) {
+          if (Math.abs(dy) < 4) return;
+          if (dy < 0 || content.scrollTop > 0) {
+            pending = undefined;
+            return;
+          }
+        } else if (Math.abs(dy) < 4) return;
+        begin(y, e.timeStamp);
+      }
+      if (e.cancelable) e.preventDefault();
+      move(y, e.timeStamp);
+    },
+    { passive: false },
+  );
+  content?.addEventListener('touchend', end);
+  content?.addEventListener('touchcancel', end);
+
+  // Becoming a dialog (from the medium breakpoint) or a phone again, and a phone turned: measured again. Both listeners
+  // remove themselves once the dialog is no longer in the page (the gallery's sample mounts and unmounts it).
+  const onWide = () => {
+    if (!dialog.isConnected) return gone();
+    if (wide.matches) reset();
+    else if (dialog.open) open();
+  };
+  const onResize = () => {
+    if (!dialog.isConnected) return gone();
+    if (!dialog.open || !managed() || !sizes || drag) return;
+    const full = panel.hasAttribute('data-full');
+    sizes = measure();
+    settle(full ? sizes.full : sizes.start);
+  };
+  function gone() {
+    wide.removeEventListener('change', onWide);
+    removeEventListener('resize', onResize);
+  }
+  wide.addEventListener('change', onWide);
+  addEventListener('resize', onResize);
+
+  return { managed, open, reset };
+}

package/theme/ui/navigationDrawerControl.ts

@@ -0,0 +1,35 @@
+// What a navigation drawer (NavigationDrawer.tsx) does in a browser: the arrow keys, Home and End move the focus between
+// its items and sub-items (not its toggles, which stay on Tab), and a modal one puts the focus on its first item when it
+// opens. Exposes handleDrawerKey, navigationDrawerKeys and focusNavigationDrawerItem; where the focus goes is
+// lib/drawerKeys.mjs (tested).
+import { drawerKeyTarget } from '@morphemecms/cms/lib/drawerKeys.mjs';
+
+const itemSelector = '.navigation-drawer-item, .navigation-drawer-subitem';
+
+/** The items in the drawer that can be focused now, in the order they stand. */
+const itemsOf = (root: HTMLElement) =>
+  [...root.querySelectorAll<HTMLElement>(itemSelector)].filter(
+    (item) => !item.hidden && !item.hasAttribute('disabled') && item.getClientRects().length > 0,
+  );
+
+/** Moves the focus for the arrow keys, Home and End when it is on an item of `root`. */
+export function handleDrawerKey(event: KeyboardEvent, root: HTMLElement) {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+  const items = itemsOf(root);
+  const target = drawerKeyTarget(event.key, items.indexOf(document.activeElement as HTMLElement), items.length);
+  if (target === null) return;
+  event.preventDefault();
+  items[target]?.focus();
+}
+
+/** Listens for the keys on `root` (a drawer drawn as a class on an element of its own: the site's menu); returns what removes it. */
+export function navigationDrawerKeys(root: HTMLElement): () => void {
+  const onKeyDown = (event: KeyboardEvent) => handleDrawerKey(event, root);
+  root.addEventListener('keydown', onKeyDown);
+  return () => root.removeEventListener('keydown', onKeyDown);
+}
+
+/** The focus on the drawer's first item (a modal one, when it opens). */
+export function focusNavigationDrawerItem(root: HTMLElement) {
+  itemsOf(root)[0]?.focus();
+}

package/theme/ui/search.script.ts

@@ -1,14 +1,16 @@
 // What a search (Search.tsx) does on the site: its bar opens the search view (a modal <dialog>: over the whole screen
-// on a phone, docked where the bar is from 48rem, .search-view-docked with --search-view-top, -left and -width), with the
+// on a phone, docked where the bar is from the medium breakpoint, .search-view-docked with --search-view-top, -left and -width), with the
 // focus in its field; the back button, Escape and a tap outside close it, and the focus goes back to the bar. What is
 // written narrows the results to those whose text has it (the message .search-view-empty when none has), the arrow keys
 // move through them (aria-activedescendant on the field, aria-selected on the option), and Enter follows the one they
 // are on. The page under it does not scroll while it is open. Run on every page by the theme's Base.astro
 // (blockScripts, packages/editor/site/blockScripts.ts); without a search it does nothing.
+import { atLeast } from '@morphemecms/cms/lib/breakpoints.mjs';
+
 const fold = (text: string) => text.toLocaleLowerCase().normalize('NFKD').replace(/\p{M}/gu, '').trim();
 
 export default function search() {
-  const wide = matchMedia('(width >= 48rem)');
+  const wide = matchMedia(atLeast('medium'));
 
   document.querySelectorAll<HTMLElement>('[data-search]').forEach((search) => {
     const bar = search.querySelector<HTMLElement>('.search-bar');

package/worker/index.js

@@ -20,6 +20,7 @@
 // - the visitors' answers in the cookie banner, the consent log (/api/consent, packages/editor/worker/consent.js, in D1), and each hour
 //   those older than two years deleted.
 // - whether R2 caching can be turned on in the editor: whether Cloudflare has its bucket (/api/r2, packages/editor/worker/r2-status.js).
+// - whether the account has Workers Paid, for the switch "Betalt bygning" in the editor (/api/plan, packages/editor/worker/plan-status.js).
 // - the editor on its own address when EDITOR_HOST is set (packages/editor/worker/editor-host.js); noindex there too.
 // - each hour, the pages and posts that are Planlagt published once their time has come (scheduled, packages/editor/worker/publish.js).
 // - the editor's notifications on the phone, also when the editor is closed (/api/push, packages/editor/worker/push.js): each minute,
@@ -39,6 +40,7 @@ import { access, mayEdit } from './session.js';
 import { handleGitHub } from './editor-github.js';
 import { handleConnection } from './store-connection.js';
 import { handleStore } from './store.js';
+import { handlePlan } from './plan-status.js';
 import { handleR2 } from './r2-status.js';
 import { publishScheduled, SCHEDULED_LIST } from './publish.js';
 import { commitFiles, readFiles } from './github.js';
@@ -150,6 +152,7 @@ export default {
     if (url.pathname === '/api/not-found') return handleNotFound(request, env);
     if (url.pathname === '/api/consent') return handleConsent(request, env);
     if (url.pathname === '/api/r2') return handleR2(request, env);
+    if (url.pathname === '/api/plan') return handlePlan(request, env);
     if (url.pathname.startsWith('/api/github/')) return handleGitHub(request, env, ctx);
     if (url.pathname === '/api/store/connection') return handleConnection(request, env, ctx);
     if (url.pathname.startsWith('/api/store/')) return handleStore(request, env, ctx);

package/worker/plan-status.js

@@ -0,0 +1,46 @@
+// Whether the Cloudflare account has Workers Paid, for "Indstillinger" › "Avanceret" › "Bygning" in the editor
+// (packages/editor/src/Advanced.tsx): the switch "Betalt bygning" can only be turned on when Cloudflare says so.
+// Asked of Cloudflare's API with the Worker's own key, the same token as for R2 (the secret CLOUDFLARE_R2_TOKEN, and
+// CLOUDFLARE_ACCOUNT_ID); it also needs Account › Billing › Read (docs/editor.md, Opsætning).
+//   GET /api/plan  { paid }: "yes" (Workers Paid), "no" (the account does not have it), "no-key" (the Worker has no key),
+//     "refused" (Cloudflare said no to the key) or "failed".
+// Only someone who can save the site (write access to the repository on GitHub) can ask.
+import { json } from './not-found.js';
+import { mayEdit } from './session.js';
+
+// The states of a subscription that count as having the plan.
+const PAID_STATES = ['paid', 'trial', 'provisioned'];
+
+export async function handlePlan(request, env) {
+  if (!(await mayEdit(request))) return json({ error: 'forbidden' }, 403);
+  if (request.method !== 'GET') return json({ error: 'method' }, 405);
+  return json({ paid: await paidAt(env) });
+}
+
+/** Whether the account's subscriptions (as Cloudflare lists them) include Workers Paid. Cloudflare writes the plan's id both as
+ * WORKERS_PAID and workers_paid; a subscription with no state counts, one that is cancelled or the like does not. */
+export function paidFrom(subscriptions) {
+  if (!Array.isArray(subscriptions)) return false;
+  return subscriptions.some((subscription) => {
+    if (String(subscription?.rate_plan?.id ?? '').toLowerCase() !== 'workers_paid') return false;
+    const state = subscription.state;
+    return state === undefined || state === null || PAID_STATES.includes(String(state).toLowerCase());
+  });
+}
+
+async function paidAt(env) {
+  const account = env.CLOUDFLARE_ACCOUNT_ID?.trim();
+  const token = env.CLOUDFLARE_R2_TOKEN?.trim();
+  if (!account || !token) return 'no-key';
+  try {
+    const res = await fetch(`https://api.cloudflare.com/client/v4/accounts/${encodeURIComponent(account)}/subscriptions`, {
+      headers: { authorization: `Bearer ${token}` },
+    });
+    const body = await res.json().catch(() => ({}));
+    if (res.ok && body.success) return paidFrom(body.result) ? 'yes' : 'no';
+    if (res.status === 401 || res.status === 403) return 'refused';
+    return 'failed';
+  } catch {
+    return 'failed';
+  }
+}

package/worker/push.js

@@ -26,13 +26,15 @@ import { config } from '@site/config';
 import { contact } from '@site/worker';
 import { json } from './not-found.js';
 import { mayEdit } from './session.js';
+import { giveUpAfter } from '../lib/build-settings.mjs';
 
 const VAPID = 'vapid';
 const DEVICE = 'device:';
 const WAIT = 'wait:';
 const WAITING = 'waiting';
-// How long the editor waits for a save to be on the site (packages/editor/src/deploy.ts GIVE_UP).
-const GIVE_UP = 10 * 60_000;
+// How long the editor waits for a save to be on the site (packages/editor/src/deploy.ts): giveUpAfter(paidBuilds), where
+// paidBuilds is in /editor/version.json. Before a wait is checked that is not known: the longest limit is used.
+const LONGEST = giveUpAfter(false);
 // A device not seen (the editor not opened on it) for half a year drops out by itself.
 const KEEP = 180 * 24 * 60 * 60;
 // How long a push service keeps a notification for a device that is off.
@@ -198,7 +200,7 @@ export async function waitForBuilds(env, now = Date.now()) {
     const at = Date.parse(wait.at);
     // A build made before the save cannot have it.
     const online = !!built.commit && builtAt >= at && (await includes(env, built.commit, wait.commit).catch(() => false));
-    const late = now - at > GIVE_UP;
+    const late = now - at > giveUpAfter(built.paidBuilds === true);
     if (!online && !late) continue;
     await env.PUSH.delete(name);
     const device = await env.PUSH.get(DEVICE + wait.device, 'json');
@@ -239,8 +241,8 @@ export async function handlePush(request, env) {
     const metadata = { commit: body.commit, device: id, text: text(body.text), failText: text(body.failText), at };
     if (isRoute(body.to)) metadata.to = body.to;
     // The value is empty: all of it is in the metadata, which the list each minute gives with the key.
-    await env.PUSH.put(WAIT + id, '', { metadata, expirationTtl: (2 * GIVE_UP) / 1000 });
-    await env.PUSH.put(WAITING, String(Date.now() + GIVE_UP + 2 * 60_000));
+    await env.PUSH.put(WAIT + id, '', { metadata, expirationTtl: (2 * LONGEST) / 1000 });
+    await env.PUSH.put(WAITING, String(Date.now() + LONGEST + 2 * 60_000));
     return json({ ok: true });
   }
   if (wait && request.method === 'DELETE') {

package/worker/r2-status.js

@@ -2,7 +2,8 @@
 // editor (packages/editor/src/Advanced.tsx): the switch writes the bucket into the Worker's settings (wrangler.jsonc),
 // and a deploy with a bucket Cloudflare does not have fails, so it can only be turned on when Cloudflare says the bucket
 // is there (R2 turned on for the account, and the bucket made). Asked of Cloudflare's API with the Worker's own key, a
-// token that may only read R2 (the secret CLOUDFLARE_R2_TOKEN, and CLOUDFLARE_ACCOUNT_ID; docs/editor.md, Opsætning).
+// token that may only read R2 (the secret CLOUDFLARE_R2_TOKEN, and CLOUDFLARE_ACCOUNT_ID; docs/editor.md, Opsætning). The same
+// token also tells whether the account has Workers Paid (packages/editor/worker/plan-status.js), so it needs Billing: Read too.
 //   GET /api/r2?bucket=<name>[&jurisdiction=<eu|fedramp>]  { bound, bucket }: whether this Worker has FILES now (the site is built with it), and the
 //     bucket at Cloudflare: "ready" (there), "no-bucket", "no-r2" (R2 not turned on), "no-key" (the Worker has no key),
 //     "refused" (Cloudflare said no to the key) or "failed". A bucket kept within a jurisdiction is only found in it.

package/icons/lucide/desktop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2" /> <line x1="8" x2="16" y1="21" y2="21" /> <line x1="12" x2="12" y1="17" y2="21" /></g></svg>

package/icons/material-symbols/desktop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M334-120v-60h86v-100H140q-24 0-42-18t-18-42v-440q0-24 18-42t42-18h680q24 0 42 18t18 42v440q0 24-18 42t-42 18H540v100h86v60H334ZM140-340h680v-440H140v440Zm0 0v-440 440Z"/></svg>

package/icons/phosphor/desktop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24h72v16H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V200h72a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40ZM48,56H208a8,8,0,0,1,8,8v80H40V64A8,8,0,0,1,48,56ZM208,184H48a8,8,0,0,1-8-8V160H216v16A8,8,0,0,1,208,184Z"/></svg>