@morphemecms/cms 0.0.0-stage → 0.1.0

package/lib/markdown.ts

@@ -0,0 +1,42 @@
+// Markdown as HTML in the editor, at once: as the site makes it (Astro's pipeline, inline.ts: GitHub's Markdown,
+// typographic quotes, the HTML written in it) with what runs in a browser, so a block drawn in the editor shows its
+// text as on the site (bold, italic, links, lists). The site itself uses Astro's (inline.ts), which does not run in a
+// browser.
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkSmartypants from 'remark-smartypants';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
+
+/** The pipeline, also for a whole page's text (pagePreview.tsx). */
+export const processor = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkSmartypants)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeRaw)
+  .use(rehypeStringify, { allowDangerousHtml: true });
+
+/** A short text's HTML made to stand inside a <p> of its own: its paragraphs separated by a line break, and anything
+ * that cannot stand there (a list, a picture) as its text, still escaped HTML. */
+export function inlineOf(html: string): string {
+  const paragraphs = [...html.matchAll(/<p>([\s\S]*?)<\/p>/g)];
+  if (paragraphs.map((m) => m[0]).join('\n') === html) return paragraphs.map((m) => m[1]).join('<br>');
+  return html
+    .replace(/<img\b[^>]*>/g, '')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+// A link only drawn: without its address it looks as one, but leads nowhere from the editor.
+const drawn = (html: string) => html.replace(/<a\b([^>]*?)\s+href="[^"]*"/g, '<a$1');
+
+/** A longer text (an answer, a hero's text) as HTML to draw in the editor: paragraphs, lists, bold, italic and links
+ * (only drawn). */
+export const markdownNow = (markdown: string) => drawn(String(processor.processSync(markdown)).trim());
+
+/** A short text for a component that shows it inside its own <p> (inlineHtml on the site). */
+export const inlineNow = (markdown: string) => inlineOf(markdownNow(markdown));

package/lib/motion-schemes.d.mts

@@ -0,0 +1,2 @@
+/** @type {readonly ['expressive', 'standard', 'calm']} */
+export const MOTION_SCHEMES: readonly ["expressive", "standard", "calm"];

package/lib/motion-schemes.mjs

@@ -0,0 +1,5 @@
+// The motion schemes by name (lib/motion.ts has their springs), here alone so what checks a theme's or the site's choice
+// in plain Node can read them (themeProblems and motionProblems in site/theme.mjs, check:content).
+
+/** @type {readonly ['expressive', 'standard', 'calm']} */
+export const MOTION_SCHEMES = ['expressive', 'standard', 'calm'];

package/lib/motion.ts

@@ -0,0 +1,131 @@
+// How the site moves: Material 3's motion schemes (m3.material.io/styles/motion/overview/how-it-works), springs that
+// say how something moves (spatial: a sheet that slides in, a button that changes shape) and how something changes
+// (effects: a colour, something that fades), each fast, default or slow. A scheme is the owner's choice under
+// "Udseende" › "Bevægelse" (config.motion, e.g. src/data/motion.json: `{ "scheme": "expressive" }`), else the theme's
+// ("motion" in its theme.json), else the standard theme's (schemeInUse):
+//   expressive  Material 3 Expressive's: what moves overshoots a little and settles, as on a phone
+//   standard    Material 3's standard: what moves glides into place
+//   calm        ours: what moves does so quickly without overshooting, and the sections are shown at once (no reveal)
+// The site writes the scheme's springs into the <head> of its pages as CSS variables (motionCss, with data-motion on
+// <html>), which every transition and animation of the theme takes (ui.css, blocks.css: `transition: transform
+// var(--motion-spatial-fast)`), and its scripts animate with the same springs (motionSpring, for Motion). A visitor who
+// has asked for reduced motion gets less, whatever the scheme. No React or browser here: the build uses it too.
+
+import { MOTION_SCHEMES } from './motion-schemes.mjs';
+
+export { MOTION_SCHEMES };
+export type MotionScheme = (typeof MOTION_SCHEMES)[number];
+/** The standard theme's, when neither the owner nor the theme has chosen one. */
+export const DEFAULT_SCHEME: MotionScheme = 'standard';
+
+export const MOTION_KINDS = ['spatial', 'effects'] as const;
+export type MotionKind = (typeof MOTION_KINDS)[number];
+export const MOTION_SPEEDS = ['fast', 'default', 'slow'] as const;
+export type MotionSpeed = (typeof MOTION_SPEEDS)[number];
+
+/** A spring with a mass of 1: how damped it is (1: it does not overshoot; less: it does, and settles) and how stiff. */
+export type Spring = { damping: number; stiffness: number };
+type Springs = Record<MotionKind, Record<MotionSpeed, Spring>>;
+
+// Material's effects springs, the same in both of its schemes: they never overshoot (a colour cannot).
+const EFFECTS: Record<MotionSpeed, Spring> = {
+  fast: { damping: 1, stiffness: 3800 },
+  default: { damping: 1, stiffness: 1600 },
+  slow: { damping: 1, stiffness: 800 },
+};
+
+/** Each scheme's springs: Material 3's tokens (md.sys.motion.spring.*) for expressive and standard. */
+export const SPRINGS: Record<MotionScheme, Springs> = {
+  expressive: {
+    spatial: { fast: { damping: 0.6, stiffness: 800 }, default: { damping: 0.8, stiffness: 380 }, slow: { damping: 0.8, stiffness: 200 } },
+    effects: EFFECTS,
+  },
+  standard: {
+    spatial: { fast: { damping: 0.9, stiffness: 1400 }, default: { damping: 0.9, stiffness: 700 }, slow: { damping: 0.9, stiffness: 300 } },
+    effects: EFFECTS,
+  },
+  calm: { spatial: EFFECTS, effects: EFFECTS },
+};
+
+/** Whether a value is one of the schemes. */
+export const isMotionScheme = (value: unknown): value is MotionScheme => MOTION_SCHEMES.includes(value as MotionScheme);
+
+/** The scheme the site moves by: the one chosen (config.motion's `scheme`), else the theme's ("motion" in its theme.json),
+ * else the standard theme's, else DEFAULT_SCHEME. One that is not a scheme counts as none (check:content says so). */
+export function schemeInUse(chosen: unknown, theme: unknown, standard?: unknown): MotionScheme {
+  return [chosen, theme, standard].find(isMotionScheme) ?? DEFAULT_SCHEME;
+}
+
+// How far from where it is going a spring counts as there, and how often the curve is drawn.
+const SETTLED = 0.001;
+const STEP = 1 / 60;
+
+/** Where a spring that starts still at 0 is at `t` seconds, on its way to 1. */
+function position({ damping, stiffness }: Spring, t: number): number {
+  const w = Math.sqrt(stiffness);
+  if (damping >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
+  const wd = w * Math.sqrt(1 - damping * damping);
+  return 1 - Math.exp(-damping * w * t) * (Math.cos(wd * t) + ((damping * w) / wd) * Math.sin(wd * t));
+}
+
+/** A spring as CSS: how long it takes to settle, and its curve as a linear() easing (the spring's own way there, overshoot
+ * and all), for `transition` and `animation`. */
+export function springCss(spring: Spring): { duration: number; easing: string } {
+  // The last moment it is not yet there, to the millisecond.
+  let settled = 0;
+  for (let t = 0; t < 3; t += 0.001) if (Math.abs(1 - position(spring, t)) >= SETTLED) settled = t;
+  const duration = Math.ceil(settled * 100) / 100;
+  const steps = Math.max(Math.round(duration / STEP), 8);
+  const points = Array.from({ length: steps + 1 }, (_, i) => (i === steps ? 1 : +position(spring, (i / steps) * duration).toFixed(3)));
+  return { duration: Math.round(duration * 1000), easing: `linear(${points.join(',')})` };
+}
+
+/** A spring's CSS variable: `--motion-spatial-fast`, `--motion-effects` (default), `--motion-effects-slow`. */
+export const motionVariable = (kind: MotionKind, speed: MotionSpeed) => `--motion-${kind}${speed === 'default' ? '' : `-${speed}`}`;
+
+/** A scheme as CSS for a <style> in the <head>: each spring as its duration and curve
+ * (`--motion-spatial-fast: 290ms linear(…)`), to use as `transition: transform var(--motion-spatial-fast)`, and its
+ * duration alone (`--motion-spatial-fast-duration`), for what must last as long as it (a `visibility` that waits for it,
+ * a `display … allow-discrete`); and the default spatial and effects curves alone (--motion-ease, --motion-ease-quick),
+ * for what has its own duration (--block-ease and --block-ease-quick in blocks.css, --ease in base.css). */
+export function motionCss(scheme: MotionScheme): string {
+  const springs = SPRINGS[scheme];
+  const declarations = MOTION_KINDS.flatMap((kind) =>
+    MOTION_SPEEDS.map((speed) => {
+      const { duration, easing } = springCss(springs[kind][speed]);
+      const name = motionVariable(kind, speed);
+      return `${name}:${duration}ms ${easing};${name}-duration:${duration}ms;`;
+    }),
+  );
+  const ease = springCss(springs.spatial.default).easing;
+  const quick = springCss(springs.effects.default).easing;
+  return `:root{${declarations.join('')}--motion-ease:${ease};--motion-ease-quick:${quick};}`;
+}
+
+/** A spring as Motion takes it (motion.dev: `animate(el, …, motionSpring('spatial'))`), in the scheme on the page
+ * (data-motion-scheme on <html>, set where motionCss is), else DEFAULT_SCHEME: its stiffness and its damping as a force, for a
+ * mass of 1. */
+export function motionSpring(kind: MotionKind, speed: MotionSpeed = 'default', scheme: MotionScheme = pageScheme()) {
+  const { damping, stiffness } = SPRINGS[scheme][kind][speed];
+  return { type: 'spring' as const, stiffness, damping: 2 * damping * Math.sqrt(stiffness), mass: 1 };
+}
+
+/** A spring as the browser's own animations take it (`el.animate(keyframes, motionTiming('spatial'))`), in the scheme on
+ * the page: how long it takes, and its curve. */
+export function motionTiming(kind: MotionKind, speed: MotionSpeed = 'default', scheme: MotionScheme = pageScheme()) {
+  return springCss(SPRINGS[scheme][kind][speed]);
+}
+
+/** The scheme the page moves by (data-motion-scheme on <html>), else DEFAULT_SCHEME; without a browser, DEFAULT_SCHEME. */
+export function pageScheme(): MotionScheme {
+  if (typeof document === 'undefined') return DEFAULT_SCHEME;
+  const scheme = document.documentElement.dataset.motionScheme;
+  return isMotionScheme(scheme) ? scheme : DEFAULT_SCHEME;
+}
+
+/** Whether the page's things should only appear, not move in: the calm scheme, or a visitor who has asked for reduced
+ * motion. */
+export function motionReduced(): boolean {
+  if (typeof document === 'undefined') return true;
+  return pageScheme() === 'calm' || matchMedia('(prefers-reduced-motion: reduce)').matches;
+}

package/lib/notice.d.mts

@@ -0,0 +1,3 @@
+/** A Danish date and time ("2026-03-01T12:00") as milliseconds since 1970, or null. */
+export function untilTime(local: any): number | null;
+export function isOver(local: any, now?: number): boolean;

package/lib/notice.mjs

@@ -0,0 +1,34 @@
+// "Besked", a notice in the text (the standard block in standard/notice/), can be shown until a date and time,
+// written in Danish time ("2026-03-01T12:00"). The site leaves it out when it is built after that time,
+// and a visitor's browser removes it once the time has come between two builds (its load.ts), so it
+// goes at the time without the site being built again.
+const ZONE = 'Europe/Copenhagen';
+const parts = new Intl.DateTimeFormat('en-US', {
+  timeZone: ZONE,
+  hourCycle: 'h23',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+});
+
+// How far Danish time is ahead of UTC at a moment (one or two hours), in milliseconds.
+function offset(at) {
+  const p = Object.fromEntries(parts.formatToParts(at).map((x) => [x.type, x.value]));
+  return Date.UTC(+p.year, +p.month - 1, +p.day, +p.hour, +p.minute) - at;
+}
+
+/** A Danish date and time ("2026-03-01T12:00") as milliseconds since 1970, or null. */
+export function untilTime(local) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(local ?? '');
+  if (!m) return null;
+  const wall = Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5]);
+  return wall - offset(wall - offset(wall));
+}
+
+/** Whether a notice shown until `local` is over. */
+export const isOver = (local, now = Date.now()) => {
+  const at = untilTime(local);
+  return at !== null && now >= at;
+};

package/lib/scheduled.d.mts

@@ -0,0 +1,15 @@
+/** The status and time in a file's front matter. */
+export function scheduleOf(text: any): {
+    status: any;
+    publishAt: any;
+};
+/** The file Udgivet: its front matter without `status` and `publishAt`. */
+export function published(text: any): any;
+/** A file as a commit names it: `blogindlæg "x"`. */
+export function nameOf(path: any): string;
+/** The folders with pages and posts, and what one is called in a commit. */
+export const KINDS: {
+    dir: string;
+    name: string;
+}[];
+export function isDue(publishAt: any, now?: number): boolean;

package/lib/scheduled.mjs

@@ -0,0 +1,37 @@
+// The pages and blog posts that are Planlagt (`status: "scheduled"` with `publishAt`, packages/editor/lib/status.mjs), for
+// publishing them once their time has come: the build lists them (packages/editor/scripts/scheduled-list.mjs), and each hour the
+// site's Worker makes those whose time has come Udgivet in one commit on main (packages/editor/worker/publish.js), which builds the
+// site. No dependencies, so the Worker can use it.
+import { stateOf } from './status.mjs';
+
+const FENCE = /^---\r?\n([\s\S]*?)\r?\n---/;
+// The two fields as the editor writes them (packages/editor/src/frontmatter.mjs), one line each.
+const line = (name) => new RegExp(`^${name}: *"?([^"\\r\\n]*)"?\\r?\\n`, 'm');
+
+/** The folders with pages and posts, and what one is called in a commit. */
+export const KINDS = [
+  { dir: 'src/content/blog', name: 'blogindlæg' },
+  { dir: 'src/content/pages', name: 'side' },
+];
+
+/** The status and time in a file's front matter. */
+export function scheduleOf(text) {
+  const yaml = text.match(FENCE)?.[1] ?? '';
+  return { status: yaml.match(line('status'))?.[1], publishAt: yaml.match(line('publishAt'))?.[1] };
+}
+
+/** Whether a Planlagt page or post with this time is to be published at `now`. */
+export const isDue = (publishAt, now = Date.now()) => stateOf({ status: 'scheduled', publishAt }, now) === 'published';
+
+/** The file Udgivet: its front matter without `status` and `publishAt`. */
+export function published(text) {
+  const yaml = text.match(FENCE)?.[1] ?? '';
+  const rest = `${yaml}\n`.replace(line('status'), '').replace(line('publishAt'), '').replace(/\n$/, '');
+  return text.replace(FENCE, `---\n${rest}\n---`);
+}
+
+/** A file as a commit names it: `blogindlæg "x"`. */
+export function nameOf(path) {
+  const kind = KINDS.find((k) => path.startsWith(`${k.dir}/`));
+  return `${kind?.name ?? 'fil'} "${path.slice((kind?.dir.length ?? -1) + 1).replace(/(\/index)?\.md$/, '')}"`;
+}

package/lib/snackbar.ts

@@ -0,0 +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,
+  );
+}

package/lib/status.d.mts

@@ -0,0 +1,7 @@
+/** 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: {
+    status?: unknown;
+    publishAt?: unknown;
+}, now?: number): "published" | "draft" | "unlisted";

package/lib/status.mjs

@@ -0,0 +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';
+}

package/lib/svg.d.mts

@@ -0,0 +1,22 @@
+/** An SVG file with only what draws (see above), or null when it is not one well-formed <svg>. `style`: keep
+ * <style> elements, for a file shown on its own (the logo); an icon drawn inside a page has none, as its CSS would
+ * apply to the whole page. `svg` is the cleaned file, `viewBox` and `inner` its viewBox (only four numbers) and what is
+ * inside its <svg>, and `removed` what was left out (`<script>`, `onload`, …), for check:content.
+ * @param {string | undefined} file @param {{ style?: boolean }} [options]
+ * @returns {{ svg: string, viewBox: string | undefined, inner: string, removed: string[] } | null} */
+export function cleanSvg(file: string | undefined, { style }?: {
+    style?: boolean;
+}): {
+    svg: string;
+    viewBox: string | undefined;
+    inner: string;
+    removed: string[];
+} | null;
+/** An SVG file's viewBox and what is inside its <svg>, cleaned (cleanSvg), or null when it is not one <svg>.
+ * @param {string | undefined} file @returns {{ viewBox: string | undefined, inner: string } | null} */
+export function svgParts(file: string | undefined): {
+    viewBox: string | undefined;
+    inner: string;
+} | null;
+/** The icon as HTML, as <Svg> draws it. @param {string | undefined} file @param {number} size */
+export function svgHtml(file: string | undefined, size: number): string;