@heyramzi/ui 2.1.0 → 2.2.0

package/src/slides/export/pdf.ts

@@ -1,7 +1,7 @@
 // Print a URL or HTML to PDF at a page size, and assemble captured PNGs into one.
 
-import { readFile } from 'node:fs/promises';
-import type { PageLike, ResponseLike, Size, WaitUntil } from './types.js';
+import { readFile } from "node:fs/promises";
+import type { PageLike, ResponseLike, Size, WaitUntil } from "./types.js";
 
 /** Chromium drops backgrounds in its print pipeline without the color-adjust line. */
 export const RESET_CSS = `*{margin:0;padding:0;box-sizing:border-box;}
@@ -15,14 +15,14 @@ export function pageRule(size: Size): string {
 /** The reset, the page size and one full-bleed `.page` box per image. */
 export function imagePagesCss(size: Size, background?: string): string {
   return `${RESET_CSS}
-${background ? `body{background:${background};}\n` : ''}${pageRule(size)}
+${background ? `body{background:${background};}\n` : ""}${pageRule(size)}
 .page{display:block;width:${size.width}px;height:${size.height}px;break-after:page;}
 .page:last-child{break-after:auto;}`;
 }
 
 /** One `<img class="page">` per data URL, laid out so each prints on its own page. */
 export function imagePagesHtml(dataUrls: string[], size: Size, background?: string): string {
-  const pages = dataUrls.map((dataUrl) => `<img class="page" src="${dataUrl}" alt="">`).join('');
+  const pages = dataUrls.map((dataUrl) => `<img class="page" src="${dataUrl}" alt="">`).join("");
   return `<!doctype html><html><head><meta charset="utf-8"><style>
 ${imagePagesCss(size, background)}
 </style></head><body>${pages}</body></html>`;
@@ -30,7 +30,11 @@ ${imagePagesCss(size, background)}
 
 /** The page count of a PDF, read off its page objects. */
 export function countPdfPages(pdf: Uint8Array): number {
-  return (Buffer.from(pdf).toString('latin1').match(/\/Type\s*\/Page[^s]/g) ?? []).length;
+  return (
+    Buffer.from(pdf)
+      .toString("latin1")
+      .match(/\/Type\s*\/Page[^s]/g) ?? []
+  ).length;
 }
 
 export interface PrintOptions {
@@ -59,13 +63,12 @@ export interface PrintResult {
 }
 
 /**
- * Waits until fonts and images have settled and the caller's own signal has
- * fired, then prints the page as it stands. Returns the PDF with its page count
- * and the images that never loaded, so a caller can refuse a half-painted sheet.
+ * Prints the page once fonts, images and the caller's signal settle, returning the images
+ * that never loaded so a caller can refuse a half-painted sheet.
  */
 export async function printPage(page: PageLike, options: PrintOptions = {}): Promise<PrintResult> {
   const { ready } = options;
-  if (typeof ready === 'string') {
+  if (typeof ready === "string") {
     await page.waitForSelector(ready, { timeout: options.readyTimeout ?? 60_000 });
   } else if (ready) {
     await ready(page);
@@ -73,7 +76,9 @@ export async function printPage(page: PageLike, options: PrintOptions = {}): Pro
   await page.evaluate(() => document.fonts.ready.then(() => undefined));
   if (options.settle) await page.waitForTimeout(options.settle);
   const brokenImages = await page.evaluate(() =>
-    [...document.images].filter((img) => !img.complete || img.naturalWidth === 0).map((img) => img.src),
+    [...document.images]
+      .filter((img) => !img.complete || img.naturalWidth === 0)
+      .map((img) => img.src),
   );
   const { size } = options;
   const pdf = await page.pdf({
@@ -100,7 +105,7 @@ export async function printUrl(
   url: string,
   options: PrintNavigation = {},
 ): Promise<PrintResult> {
-  const response = await page.goto(url, { waitUntil: options.waitUntil ?? 'load' });
+  const response = await page.goto(url, { waitUntil: options.waitUntil ?? "load" });
   options.check?.(response, page);
   return printPage(page, options);
 }
@@ -111,7 +116,7 @@ export async function printHtml(
   html: string,
   options: PrintNavigation = {},
 ): Promise<PrintResult> {
-  await page.setContent(html, { waitUntil: options.waitUntil ?? 'load' });
+  await page.setContent(html, { waitUntil: options.waitUntil ?? "load" });
   return printPage(page, options);
 }
 
@@ -123,30 +128,28 @@ export interface ImagesToPdfOptions {
 }
 
 /**
- * Lays PNGs out one per page and prints that, nothing else.
- *
- * Printing the original document would run it through Chromium's print
- * pipeline, which re-rasterises effects instead of compositing them: a blurred
- * backdrop lost 47% of its chroma that way. Handing the pipeline flat bitmaps
- * removes the whole class of drift, so the PDF shows what the PNG shows.
- *
- * Each image is a file path or the bytes themselves.
+ * Prints PNGs one per page, never the original document, because Chromium's print pipeline
+ * re-rasterises effects: a blurred backdrop lost 47% of its chroma.
  */
 export async function imagesToPdf(
   page: PageLike,
   images: Array<string | Uint8Array>,
   options: ImagesToPdfOptions,
 ): Promise<Uint8Array> {
-  if (images.length === 0) throw new Error('imagesToPdf needs at least one image.');
+  if (images.length === 0) throw new Error("imagesToPdf needs at least one image.");
   const dataUrls = await Promise.all(
     images.map(async (image) => {
-      const bytes = typeof image === 'string' ? await readFile(image) : image;
-      return `data:image/png;base64,${Buffer.from(bytes).toString('base64')}`;
+      const bytes = typeof image === "string" ? await readFile(image) : image;
+      return `data:image/png;base64,${Buffer.from(bytes).toString("base64")}`;
     }),
   );
-  const { pdf } = await printHtml(page, imagePagesHtml(dataUrls, options.size, options.background), {
-    size: options.size,
-    pageRanges: `1-${images.length}`,
-  });
+  const { pdf } = await printHtml(
+    page,
+    imagePagesHtml(dataUrls, options.size, options.background),
+    {
+      size: options.size,
+      pageRanges: `1-${images.length}`,
+    },
+  );
   return pdf;
 }

package/src/slides/export/types.ts

@@ -1,13 +1,12 @@
-// The slice of a Playwright page the export helpers touch, declared here so the
-// package takes no dependency on Playwright. Playwright's own Page, Locator and
-// Browser satisfy these as they are, whichever version the caller has installed.
+// The slice of Playwright the export helpers touch, declared here so the package
+// takes no Playwright dependency and any installed version fits.
 
 export interface Size {
   width: number;
   height: number;
 }
 
-export type WaitUntil = 'load' | 'domcontentloaded' | 'networkidle';
+export type WaitUntil = "load" | "domcontentloaded" | "networkidle";
 
 export interface ResponseLike {
   ok(): boolean;
@@ -18,19 +17,22 @@ export interface LocatorLike {
   first(): LocatorLike;
   nth(index: number): LocatorLike;
   count(): Promise<number>;
-  waitFor(options?: { state?: 'visible'; timeout?: number }): Promise<void>;
-  screenshot(options?: { path?: string; type?: 'png' }): Promise<Uint8Array>;
+  waitFor(options?: { state?: "visible"; timeout?: number }): Promise<void>;
+  screenshot(options?: { path?: string; type?: "png" }): Promise<Uint8Array>;
 }
 
 export interface PageLike {
-  goto(url: string, options?: { waitUntil?: WaitUntil; timeout?: number }): Promise<ResponseLike | null>;
+  goto(
+    url: string,
+    options?: { waitUntil?: WaitUntil; timeout?: number },
+  ): Promise<ResponseLike | null>;
   setContent(html: string, options?: { waitUntil?: WaitUntil; timeout?: number }): Promise<void>;
   addStyleTag(options: { content: string }): Promise<unknown>;
   evaluate<R>(pageFunction: () => R | Promise<R>): Promise<R>;
   waitForTimeout(ms: number): Promise<void>;
   waitForSelector(selector: string, options?: { timeout?: number }): Promise<unknown>;
   locator(selector: string): LocatorLike;
-  screenshot(options?: { type?: 'png'; fullPage?: boolean }): Promise<Uint8Array>;
+  screenshot(options?: { type?: "png"; fullPage?: boolean }): Promise<Uint8Array>;
   pdf(options: {
     path?: string;
     width?: string;

package/src/slides/index.ts

@@ -1,12 +1,12 @@
-export { default as Deck } from './Deck.svelte';
-export { default as Slide } from './Slide.svelte';
-export { default as Fragment } from './Fragment.svelte';
-export { default as Presenter } from './Presenter.svelte';
-export { DeckController } from './deck-controller.svelte.js';
-export type { SlideEntry, Source } from './deck-controller.svelte.js';
-export { defaultLabels } from './labels.js';
-export type { DeckLabels } from './labels.js';
-export type { Position } from './navigation.js';
+export { default as Deck } from "./Deck.svelte";
+export { default as Slide } from "./Slide.svelte";
+export { default as Fragment } from "./Fragment.svelte";
+export { default as Presenter } from "./Presenter.svelte";
+export { DeckController } from "./deck-controller.svelte.js";
+export type { SlideEntry, Source } from "./deck-controller.svelte.js";
+export { defaultLabels } from "./labels.js";
+export type { DeckLabels } from "./labels.js";
+export type { Position } from "./navigation.js";
 export type {
   BridgeOptions,
   Canvas,
@@ -15,5 +15,5 @@ export type {
   SlideAlign,
   SlideNotes,
   UrlSync,
-} from './types.js';
-export { DEFAULT_CANVAS } from './types.js';
+} from "./types.js";
+export { DEFAULT_CANVAS } from "./types.js";

package/src/slides/labels.ts

@@ -23,26 +23,29 @@ export type DeckLabels = {
 };
 
 export const defaultLabels: DeckLabels = {
-  deck: 'Slide deck',
-  deckRole: 'presentation',
-  slideRole: 'slide',
-  previous: 'Previous slide',
-  next: 'Next slide',
-  fullscreen: 'Toggle fullscreen',
-  overview: 'Slide overview',
-  presenter: 'Open presenter view',
-  progress: 'Deck progress',
+  deck: "Slide deck",
+  deckRole: "presentation",
+  slideRole: "slide",
+  previous: "Previous slide",
+  next: "Next slide",
+  fullscreen: "Toggle fullscreen",
+  overview: "Slide overview",
+  presenter: "Open presenter view",
+  progress: "Deck progress",
   slide: (n, of) => `Slide ${n} of ${of}`,
-  upcoming: 'Next',
-  current: 'Now',
-  notes: 'Notes',
-  noNotes: 'No notes for this slide.',
-  endOfDeck: 'End of deck.',
-  timer: 'Elapsed time',
-  startTimer: 'Start timer',
-  pauseTimer: 'Pause timer',
-  resetTimer: 'Reset timer',
+  upcoming: "Next",
+  current: "Now",
+  notes: "Notes",
+  noNotes: "No notes for this slide.",
+  endOfDeck: "End of deck.",
+  timer: "Elapsed time",
+  startTimer: "Start timer",
+  pauseTimer: "Pause timer",
+  resetTimer: "Reset timer",
   unknownType: (type) => `Unknown slide type: ${type}`,
 };
 
-export const resolveLabels = (labels?: Partial<DeckLabels>): DeckLabels => ({ ...defaultLabels, ...labels });
+export const resolveLabels = (labels?: Partial<DeckLabels>): DeckLabels => ({
+  ...defaultLabels,
+  ...labels,
+});

package/src/slides/layout.ts

@@ -1,6 +1,6 @@
 /* Where a slide sits inside the stage: centred to fit, or in the overview grid. */
 
-import type { Canvas } from './types.js';
+import type { Canvas } from "./types.js";
 
 export type Size = { w: number; h: number };
 
@@ -15,7 +15,14 @@ export function fitBox(view: Size, canvas: Canvas): Box {
 }
 
 /** The scale at which `cols` columns of `count` canvases fit the view. */
-function scaleFor(cols: number, count: number, view: Size, canvas: Canvas, pad: number, gap: number): number {
+function scaleFor(
+  cols: number,
+  count: number,
+  view: Size,
+  canvas: Canvas,
+  pad: number,
+  gap: number,
+): number {
   const rows = Math.ceil(count / cols);
   const byWidth = (view.w - 2 * pad - (cols - 1) * gap) / cols / canvas.w;
   const byHeight = (view.h - 2 * pad - (rows - 1) * gap) / rows / canvas.h;

package/src/slides/model.ts

@@ -1,7 +1,7 @@
 /* Data-driven decks: a deck is JSON, and a registry says how each slide type draws itself. */
 
-import type { Component } from 'svelte';
-import type { Canvas, DeckTheme } from './types.js';
+import type { Component } from "svelte";
+import type { Canvas, DeckTheme } from "./types.js";
 
 export type SlideInstance<Content = unknown> = {
   id: string;
@@ -33,7 +33,8 @@ export type SlideType<Content = any> = {
 export type SlideRegistry = Readonly<Record<string, SlideType>>;
 
 /** Identity function that fixes `Content` from the layout. */
-export const defineSlideType = <Content>(definition: SlideType<Content>): SlideType<Content> => definition;
+export const defineSlideType = <Content>(definition: SlideType<Content>): SlideType<Content> =>
+  definition;
 
 /** Keys the types by their `type`. Two with the same name is a mistake worth failing on. */
 export function defineRegistry(types: readonly SlideType[]): SlideRegistry {
@@ -44,4 +45,3 @@ export function defineRegistry(types: readonly SlideType[]): SlideRegistry {
   }
   return registry;
 }
-

package/src/slides/navigation.ts

@@ -6,17 +6,17 @@ export type Position = { index: number; step: number };
 export type SlideState = { steps: number; hidden: boolean };
 
 export type KeyAction =
-  | 'next'
-  | 'prev'
-  | 'up'
-  | 'down'
-  | 'first'
-  | 'last'
-  | 'select'
-  | 'overview'
-  | 'close'
-  | 'fullscreen'
-  | 'presenter';
+  | "next"
+  | "prev"
+  | "up"
+  | "down"
+  | "first"
+  | "last"
+  | "select"
+  | "overview"
+  | "close"
+  | "fullscreen"
+  | "presenter";
 
 export const visibleIndexes = (slides: readonly SlideState[]): number[] =>
   slides.flatMap((slide, index) => (slide.hidden ? [] : [index]));
@@ -32,7 +32,11 @@ export function settle(slides: readonly SlideState[], position: Position): Posit
 }
 
 /** The position after one forward press, or null at the end of a deck that doesn't loop. */
-export function nextPosition(slides: readonly SlideState[], from: Position, loop = false): Position | null {
+export function nextPosition(
+  slides: readonly SlideState[],
+  from: Position,
+  loop = false,
+): Position | null {
   const visible = visibleIndexes(slides);
   if (visible.length === 0) return null;
   if (from.step < slides[from.index].steps) return { index: from.index, step: from.step + 1 };
@@ -42,12 +46,20 @@ export function nextPosition(slides: readonly SlideState[], from: Position, loop
 }
 
 /** The position after one back press. Landing on an earlier slide shows it fully revealed. */
-export function prevPosition(slides: readonly SlideState[], from: Position, loop = false): Position | null {
+export function prevPosition(
+  slides: readonly SlideState[],
+  from: Position,
+  loop = false,
+): Position | null {
   const visible = visibleIndexes(slides);
   if (visible.length === 0) return null;
   if (from.step > 0) return { index: from.index, step: from.step - 1 };
   const before = visible.filter((i) => i < from.index);
-  const index = before.length ? before[before.length - 1] : loop ? visible[visible.length - 1] : undefined;
+  const index = before.length
+    ? before[before.length - 1]
+    : loop
+      ? visible[visible.length - 1]
+      : undefined;
   return index === undefined ? null : { index, step: slides[index].steps };
 }
 
@@ -75,26 +87,26 @@ export function parseSlideParam(raw: string | null | undefined, total: number):
 }
 
 const KEYS: Record<string, KeyAction> = {
-  ArrowRight: 'next',
-  PageDown: 'next',
-  ArrowLeft: 'prev',
-  PageUp: 'prev',
-  ArrowUp: 'up',
-  ArrowDown: 'down',
-  Home: 'first',
-  End: 'last',
-  Enter: 'select',
-  Escape: 'close',
-  o: 'overview',
-  O: 'overview',
-  f: 'fullscreen',
-  F: 'fullscreen',
-  p: 'presenter',
-  P: 'presenter',
+  ArrowRight: "next",
+  PageDown: "next",
+  ArrowLeft: "prev",
+  PageUp: "prev",
+  ArrowUp: "up",
+  ArrowDown: "down",
+  Home: "first",
+  End: "last",
+  Enter: "select",
+  Escape: "close",
+  o: "overview",
+  O: "overview",
+  f: "fullscreen",
+  F: "fullscreen",
+  p: "presenter",
+  P: "presenter",
 };
 
 /** Maps a key to what the deck does with it. Space moves forward, Shift+Space back. */
 export function keyAction(key: string, shift = false): KeyAction | null {
-  if (key === ' ') return shift ? 'prev' : 'next';
+  if (key === " ") return shift ? "prev" : "next";
   return KEYS[key] ?? null;
 }

package/src/slides/theme.css

@@ -1,8 +1,6 @@
 /*
- * Everything global to a deck: tokens, authored type, the enter keyframes and print.
- * Components keep their own box mechanics in scoped styles. Sizes are design px,
- * because the whole canvas scales, so a 28px heading is 28px on a 960px canvas at any zoom.
- * Colours are flat hex: Chromium's PDF pipeline shifts oklch.
+ * Everything global to a deck, in design px since the whole canvas scales, and in flat
+ * hex because Chromium's PDF pipeline shifts oklch.
  */
 
 .deck,
@@ -119,13 +117,13 @@
     transform: scale(var(--scale-large, 0.96));
   }
 }
-.deck[data-transition='fade'] .slide[data-active='true'] .slide__surface {
+.deck[data-transition="fade"] .slide[data-active="true"] .slide__surface {
   animation-name: deck-fade;
 }
-.deck[data-transition='slide'] .slide[data-active='true'] .slide__surface {
+.deck[data-transition="slide"] .slide[data-active="true"] .slide__surface {
   animation-name: deck-slide;
 }
-.deck[data-transition='zoom'] .slide[data-active='true'] .slide__surface {
+.deck[data-transition="zoom"] .slide[data-active="true"] .slide__surface {
   animation-name: deck-zoom;
 }
 .deck[data-morphing] .slide__surface {

package/src/slides/types.ts

@@ -1,16 +1,16 @@
-import type { Snippet } from 'svelte';
-import type { DeckController } from './deck-controller.svelte.js';
-import type { DeckLabels } from './labels.js';
-import type { SlideInstance, SlideRegistry } from './model.js';
+import type { Snippet } from "svelte";
+import type { DeckController } from "./deck-controller.svelte.js";
+import type { DeckLabels } from "./labels.js";
+import type { SlideInstance, SlideRegistry } from "./model.js";
 
-export const DECK_KEY = Symbol('heyramzi.deck');
-export const SLIDE_KEY = Symbol('heyramzi.slide');
+export const DECK_KEY = Symbol("heyramzi.deck");
+export const SLIDE_KEY = Symbol("heyramzi.slide");
 
 /** `ink` is the dark default, `paper` a light surface, `auto` follows the system. */
-export type DeckTheme = 'ink' | 'paper' | 'auto';
+export type DeckTheme = "ink" | "paper" | "auto";
 
 /** How a slide enters. `morph` uses the View Transitions API and falls back to a cut. */
-export type DeckTransition = 'fade' | 'slide' | 'zoom' | 'morph' | 'none';
+export type DeckTransition = "fade" | "slide" | "zoom" | "morph" | "none";
 
 /** The design size in px. Slides lay out inside it and the whole canvas scales to fit. */
 export type Canvas = { w: number; h: number };
@@ -21,7 +21,7 @@ export const DEFAULT_CANVAS: Canvas = { w: 960, h: 540 };
 export type SlideNotes = string | Snippet;
 
 /** How a Slide lays out its own content. `bare` leaves the whole canvas to the author. */
-export type SlideAlign = 'center' | 'start' | 'bare';
+export type SlideAlign = "center" | "start" | "bare";
 
 /** Where a deck keeps `?s=`. `write` replaces the default `history.replaceState`, so SvelteKit apps can use its own. */
 export type UrlSync = { param?: string; write?: (url: URL) => void };
@@ -83,4 +83,3 @@ export type DeckProps = {
   onchange?: (index: number, step: number) => void;
   children?: Snippet;
 };
-

package/src/status/define-statuses.ts

@@ -1,32 +1,25 @@
 import type { StatusDef, StatusId, StatusMap, Statuses } from "./status-types.js";
 
 /**
- * Build a status registry from a plain map. The registry keeps the map's keys as
- * a union, so `statuses.ids` and lookups stay typed.
- *
- * ```ts
- * const statuses = defineStatuses({
- *   draft: { label: "Draft", tone: "neutral" },
- *   sent: { label: "Sent", tone: "info" },
- * });
- * ```
+ * Builds a status registry from a map, keeping its keys as a union so lookups stay typed:
+ * `defineStatuses({ draft: { label: "Draft", tone: "neutral" } })`.
  */
 export function defineStatuses<const M extends StatusMap>(
-	map: M,
+  map: M,
 ): Statuses & { ids: StatusId<M>[] } {
-	const lookup = map as Record<string, StatusDef | undefined>;
-	const find = (id: string): StatusDef | undefined => lookup[id];
+  const lookup = map as Record<string, StatusDef | undefined>;
+  const find = (id: string): StatusDef | undefined => lookup[id];
 
-	return {
-		map,
-		ids: Object.keys(map) as StatusId<M>[],
-		has: (id) => find(id) !== undefined,
-		get: find,
-		label: (id) => find(id)?.label ?? id,
-		tone: (id) => find(id)?.tone ?? "neutral",
-		icon: (id) => find(id)?.icon,
-		variant: (id) => find(id)?.variant ?? "open",
-		progress: (id) => find(id)?.progress,
-		color: (id) => find(id)?.color,
-	};
+  return {
+    map,
+    ids: Object.keys(map) as StatusId<M>[],
+    has: (id) => find(id) !== undefined,
+    get: find,
+    label: (id) => find(id)?.label ?? id,
+    tone: (id) => find(id)?.tone ?? "neutral",
+    icon: (id) => find(id)?.icon,
+    variant: (id) => find(id)?.variant ?? "open",
+    progress: (id) => find(id)?.progress,
+    color: (id) => find(id)?.color,
+  };
 }

package/src/status/index.ts

@@ -3,9 +3,9 @@ export { default as StatusDot } from "./status-dot.svelte";
 export { default as StatusIcon } from "./status-icon.svelte";
 export { defineStatuses } from "./define-statuses.js";
 export type {
-	StatusDef,
-	StatusDotVariant,
-	StatusId,
-	StatusMap,
-	Statuses,
+  StatusDef,
+  StatusDotVariant,
+  StatusId,
+  StatusMap,
+  Statuses,
 } from "./status-types.js";

package/src/status/status-badge.svelte

@@ -41,7 +41,9 @@
 	}: Props = $props();
 
 	let resolvedTone = $derived(tone ?? (statuses && status ? statuses.tone(status) : "neutral"));
-	let resolvedLabel = $derived(label ?? (statuses && status ? statuses.label(status) : (status ?? "")));
+	let resolvedLabel = $derived(
+		label ?? (statuses && status ? statuses.label(status) : (status ?? "")),
+	);
 </script>
 
 <Badge tone={resolvedTone} class={cn(capitalize && "capitalize", className)} {...restProps}>

package/src/status/status-dot.svelte

@@ -52,9 +52,7 @@
 			: undefined,
 	);
 	let dasharray = $derived(
-		fraction != null
-			? `${INNER_CIRC * fraction} ${INNER_CIRC * (1 - fraction)}`
-			: undefined,
+		fraction != null ? `${INNER_CIRC * fraction} ${INNER_CIRC * (1 - fraction)}` : undefined,
 	);
 	let dashoffset = $derived(fraction != null ? INNER_CIRC * 0.25 : undefined);
 </script>

package/src/status/status-icon.svelte

@@ -11,7 +11,7 @@
 		size?: number;
 		animate?: boolean;
 		class?: string;
-	};
+	}
 
 	let { statuses, status, size = 14, animate = true, class: className }: Props = $props();
 

package/src/status/status-types.ts

@@ -8,16 +8,16 @@ import type { Tone } from "../lib/tone.js";
 export type StatusDotVariant = "open" | "dashed" | "progress" | "filled" | "completed" | "lost";
 
 export type StatusDef = {
-	label: string;
-	tone?: Tone;
-	/** Any Svelte component, for example a Phosphor icon. Renders inside StatusIcon. */
-	icon?: Component;
-	variant?: StatusDotVariant;
-	/** 0 to 1. Only used by the `progress` variant. */
-	progress?: number;
-	/** Optional CSS color. Overrides the tone color for the dot and icon. */
-	color?: string;
-	description?: string;
+  label: string;
+  tone?: Tone;
+  /** Any Svelte component, for example a Phosphor icon. Renders inside StatusIcon. */
+  icon?: Component;
+  variant?: StatusDotVariant;
+  /** 0 to 1. Only used by the `progress` variant. */
+  progress?: number;
+  /** Optional CSS color. Overrides the tone color for the dot and icon. */
+  color?: string;
+  description?: string;
 };
 
 export type StatusMap = Record<string, StatusDef>;
@@ -26,15 +26,15 @@ export type StatusId<M extends StatusMap> = keyof M & string;
 
 /** What the components accept. `defineStatuses` returns this plus a typed `ids`. */
 export type Statuses = {
-	/** The raw map. Kept loose so a registry with specific keys is assignable here. */
-	map: StatusMap;
-	ids: string[];
-	has(id: string): boolean;
-	get(id: string): StatusDef | undefined;
-	label(id: string): string;
-	tone(id: string): Tone;
-	icon(id: string): Component | undefined;
-	variant(id: string): StatusDotVariant;
-	progress(id: string): number | undefined;
-	color(id: string): string | undefined;
+  /** The raw map. Kept loose so a registry with specific keys is assignable here. */
+  map: StatusMap;
+  ids: string[];
+  has(id: string): boolean;
+  get(id: string): StatusDef | undefined;
+  label(id: string): string;
+  tone(id: string): Tone;
+  icon(id: string): Component | undefined;
+  variant(id: string): StatusDotVariant;
+  progress(id: string): number | undefined;
+  color(id: string): string | undefined;
 };

package/src/tasks/board-order.ts

@@ -1,7 +1,5 @@
-// Fractional indexing: an order key that always sorts between its neighbours,
-// so a move writes one row instead of renumbering a column. The algorithm is
-// the CC0 one from https://observablehq.com/@dgreensp/implementing-fractional-indexing
-// (see the README credit). Kept inline so this package carries no runtime deps.
+// Fractional indexing, so a move writes one row instead of renumbering a column; it's the
+// CC0 algorithm from https://observablehq.com/@dgreensp/implementing-fractional-indexing.
 const DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
 const INT_DIGITS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
 const ZERO = DIGITS.charAt(0);