@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/ui/Chip.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ChipSize } from './tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The short code shown in the chip. */
+    label: string;
+    /** The expansion, rendered as the `<abbr>` title. */
+    title?: string | undefined;
+    /** When set, the chip is a link to the subject's page. */
+    href?: string | undefined;
+    /** A CSS custom-property name the app's theme declares (`--party-alp`). */
+    colourToken?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: ChipSize | undefined;
+}
+/** A colour swatch beside a short code, for legends, result rows and filter lists. */
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/ui/ConfirmButton.svelte

@@ -0,0 +1,75 @@
+<!-- @component
+A destructive action behind a two-step inline confirmation.
+-->
+<!--
+  ConfirmButton — a destructive action behind a two-step inline confirm.
+
+  Inline rather than a dialog, deliberately: the confirmation replaces the
+  button in place, so nothing is torn out of the reading order, focus is not
+  trapped, and the page behind it does not need an overlay. Use
+  `ConfirmDialog` instead when the confirmation itself needs to carry content
+  (a form, a list of what will be destroyed).
+
+  ARIA contract: the failure surface is an `Alert` with `live="assertive"` —
+  the reader pressed a button and nothing visible happened, so the reason has
+  to interrupt. Both buttons are `disabled` while the action is in flight, and
+  the confirm button swaps its text to `pendingLabel` rather than emptying
+  itself, so its accessible name never disappears mid-press.
+
+  `action` is a plain promise-returning prop — no Effect in this library. A
+  rejection with an `Error` shows that error's message (the caller's own
+  wording, usually from the server); anything else shows `failureMessage`.
+  On success, `redirectTo` navigates through the components context, so an
+  app gets client-side routing and this component stays ignorant of it.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import Alert from "./Alert.svelte";
+import Button from "./Button.svelte";
+let { action, idleLabel = "Delete", confirmLabel = "Confirm", cancelLabel = "Cancel", pendingLabel = "Working…", confirmMessage = "Are you sure? This cannot be undone.", failureMessage = "That didn’t work. Try again.", tone = "error", redirectTo, class: className } = $props();
+const context = getComponentsContext();
+let confirming = $state(false);
+let pending = $state(false);
+let errorMessage = $state(undefined);
+const beginConfirmation = () => {
+	errorMessage = undefined;
+	confirming = true;
+};
+const cancelConfirmation = () => {
+	if (pending) return;
+	errorMessage = undefined;
+	confirming = false;
+};
+const confirmAction = async () => {
+	pending = true;
+	errorMessage = undefined;
+	try {
+		await action();
+		confirming = false;
+		if (redirectTo !== undefined) await context.navigate(context.href(redirectTo));
+	} catch (error) {
+		errorMessage = error instanceof Error ? error.message : failureMessage;
+	} finally {
+		pending = false;
+	}
+};
+</script>
+
+<div class={['space-y-2', className]}>
+  {#if confirming}
+    <div class="flex flex-wrap items-center gap-2">
+      <p class="text-sm">{confirmMessage}</p>
+      <Button {tone} disabled={pending} loading={pending} onclick={confirmAction}>
+        {pending ? pendingLabel : confirmLabel}
+      </Button>
+      <Button variant="ghost" disabled={pending} onclick={cancelConfirmation}>
+        {cancelLabel}
+      </Button>
+    </div>
+  {:else}
+    <Button {tone} onclick={beginConfirmation}>{idleLabel}</Button>
+  {/if}
+
+  {#if errorMessage !== undefined}
+    <Alert tone="error" live="assertive">{errorMessage}</Alert>
+  {/if}
+</div>

package/dist/ui/ConfirmButton.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Tone } from './tones.ts';
+interface Props {
+    /** The destructive action itself. */
+    action: () => Promise<unknown>;
+    /**
+     * The resting button's text.
+     * @defaultValue `'Delete'`
+     */
+    idleLabel?: string | undefined;
+    /**
+     * The confirm button's text.
+     * @defaultValue `'Confirm'`
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * The cancel button's text.
+     * @defaultValue `'Cancel'`
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * The confirm button's text while the action is in flight.
+     * @defaultValue `'Working…'`
+     */
+    pendingLabel?: string | undefined;
+    /**
+     * The question shown beside the confirm and cancel buttons.
+     * @defaultValue `'Are you sure? This cannot be undone.'`
+     */
+    confirmMessage?: string | undefined;
+    /**
+     * Shown when the action rejects with something that is not an `Error`.
+     * @defaultValue `'That didn’t work. Try again.'`
+     */
+    failureMessage?: string | undefined;
+    /**
+     * Tone of the idle and confirm buttons.
+     * @defaultValue `'error'`
+     */
+    tone?: Tone | undefined;
+    /** Navigated to through the components context once `action` resolves. */
+    redirectTo?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A destructive action behind a two-step inline confirmation. */
+declare const ConfirmButton: import("svelte").Component<Props, {}, "">;
+type ConfirmButton = ReturnType<typeof ConfirmButton>;
+export default ConfirmButton;

package/dist/ui/ContextMenu.svelte

@@ -0,0 +1,75 @@
+<!-- @component
+A menu that opens at the pointer on a right-click (or long-press) of a region, on bits-ui's `ContextMenu`.
+-->
+<!--
+  ContextMenu — the actions for one thing (a row in a list, a node on a
+  canvas, an image), opened where the reader right-clicks it, long-presses it
+  on touch, or presses Shift+F10 / the Menu key while it has focus. Built on
+  bits-ui's `ContextMenu`, which owns the menu at the pointer, roving focus,
+  typeahead, → / ← for submenus, Escape and outside click to close, and focus
+  return. Its children are the same `MenuItem`, `MenuSeparator`,
+  `MenuCheckboxItem`, `MenuRadioGroup` / `MenuRadioItem` and `MenuSub` that a
+  `DropdownMenu` takes; this component lends them the bits-ui parts through
+  context (`menu-parts/`).
+
+  Never the only route to an action. A context menu is invisible until it is
+  summoned, and touch screen-reader users (and many keyboard users) never
+  discover it. Put every action somewhere visible too: a row's "More"
+  `DropdownMenu`, a toolbar.
+
+  The region is the caller's own element: the `trigger` snippet receives
+  `props` to spread onto it. Those props make it focusable (`tabindex="0"`,
+  which a natively focusable element does not mind; pass a `tabindex` of your
+  own after the spread to override it), because browsers fire `contextmenu`
+  for the keyboard only on the focused element. Shift+F10 and the Menu key
+  are handled here rather than left to the browser, so they open the menu at
+  the region's corner the same way everywhere.
+
+  ARIA contract: the content is `role="menu"` named by `label`; the daisyUI
+  `menu` `<ul>` and its `<li>`s are `role="none"`, exactly as in
+  `DropdownMenu`, so `role="menu"` owns its items. `disabled` lets the
+  browser's own context menu show instead.
+
+  Not part of the root barrel: it is its own entry,
+  `@thomasfosterau/components/context-menu`, so the menu runtime loads only on
+  the pages that use it.
+-->
+<script lang="ts">import { ContextMenu } from "bits-ui";
+import { menuParts } from "./menu-parts/parts.js";
+import { setMenuParts } from "./menu-parts/menu-parts.js";
+let { label, open = $bindable(false), disabled = false, class: className, trigger, children } = $props();
+setMenuParts(menuParts("context"));
+// Shift+F10 and the Menu key: open at the region's bottom-left corner by
+// dispatching the `contextmenu` event bits-ui's trigger listens for.
+// `preventDefault` stops the browser from generating its own as well.
+const openFromKeyboard = (event) => {
+	if (disabled) return;
+	const isMenuKey = event.key === "ContextMenu" || event.shiftKey && event.key === "F10";
+	if (!isMenuKey) return;
+	event.preventDefault();
+	const region = event.currentTarget;
+	if (!(region instanceof HTMLElement)) return;
+	const rect = region.getBoundingClientRect();
+	region.dispatchEvent(new MouseEvent("contextmenu", {
+		bubbles: true,
+		cancelable: true,
+		clientX: rect.left,
+		clientY: rect.bottom
+	}));
+};
+</script>
+
+<ContextMenu.Root bind:open>
+  <ContextMenu.Trigger {disabled} tabindex={0} onkeydown={openFromKeyboard}>
+    {#snippet child({ props })}
+      {@render trigger({ props })}
+    {/snippet}
+  </ContextMenu.Trigger>
+  <ContextMenu.Portal>
+    <ContextMenu.Content aria-label={label} class="z-50">
+      <ul role="none" class={['menu bg-base-100 rounded-box w-56 p-2 shadow-md', className]}>
+        {@render children()}
+      </ul>
+    </ContextMenu.Content>
+  </ContextMenu.Portal>
+</ContextMenu.Root>

package/dist/ui/ContextMenu.svelte.d.ts

@@ -0,0 +1,25 @@
+import { ContextMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Accessible name of the open menu ("Actions for Rosa canina"). */
+    label: string;
+    /** Whether the menu is open. Bindable. */
+    open?: boolean | undefined;
+    /**
+     * Turn the menu off; the browser's own context menu shows instead.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<ul class="menu">`. */
+    class?: string | undefined;
+    /** The region the menu belongs to — the caller's own element, spreading `props`. */
+    trigger: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /** The menu's items. */
+    children: Snippet<[]>;
+}
+/** A menu that opens at the pointer on a right-click (or long-press) of a region, on bits-ui's `ContextMenu`. */
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/ui/Disclosure.svelte

@@ -0,0 +1,46 @@
+<!-- @component
+A native `<details>` wearing daisyUI’s `collapse`.
+-->
+<!--
+  Disclosure — a native `<details>` wearing daisyUI's `collapse`.
+
+  Hand-rolled disclosure is one of the most commonly broken widgets on the
+  web, and it does not need to be built: `<details>`/`<summary>` already give
+  a focusable trigger, the expanded/collapsed state, keyboard activation and
+  — on a modern browser — find-in-page inside the collapsed content, which no
+  JavaScript implementation matches. So this is NOT on bits-ui: there is
+  nothing for a primitive to add.
+
+  ARIA contract: the platform's. `<summary>` is the button, `open` is the
+  state, and no `aria-expanded` is written by hand (the browser maps it, and
+  a second copy can only be wrong). `open` is bindable, so a caller can drive
+  the state, and the four apps' "open this section because its form failed"
+  case is a one-line binding.
+
+  Exclusive groups are native too: give several `Disclosure`s the same
+  `name` (spread onto `<details>`) and the browser keeps at most one open.
+  What a `Disclosure` cannot carry is a heading, because `<summary>`'s
+  children are presentational, so a heading inside it drops out of the
+  heading tree. For a stack of headed sections, or a bindable "which one is
+  open", use `Accordion`.
+-->
+<script lang="ts">import { collapseVariant } from "./tones.js";
+let { open = $bindable(false), title, variant = "arrow", contentClass, children, class: className, ...rest } = $props();
+</script>
+
+<details
+  {...rest}
+  bind:open
+  class={['collapse border-base-300 bg-base-100 border', collapseVariant[variant], className]}
+>
+  <summary class="collapse-title font-medium">
+    {#if typeof title === 'string'}
+      {title}
+    {:else}
+      {@render title()}
+    {/if}
+  </summary>
+  <div class={['collapse-content', contentClass]}>
+    {@render children()}
+  </div>
+</details>

package/dist/ui/Disclosure.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDetailsAttributes } from 'svelte/elements';
+import { type DisclosureVariant } from './tones.ts';
+interface Props extends Omit<HTMLDetailsAttributes, 'title' | 'open'> {
+    /** Whether the section is expanded. Bindable. */
+    open?: boolean | undefined;
+    /** The summary — its own text, or a snippet for richer markup. */
+    title: string | Snippet<[]>;
+    /**
+     * The expand indicator: an arrow, a plus, or none.
+     * @defaultValue `'arrow'`
+     */
+    variant?: DisclosureVariant | undefined;
+    /** Extra classes on the `collapse-content` wrapper. */
+    contentClass?: string | undefined;
+    /** The content revealed when open. */
+    children: Snippet<[]>;
+}
+/** A native `<details>` wearing daisyUI’s `collapse`. */
+declare const Disclosure: import("svelte").Component<Props, {}, "open">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/dist/ui/Divider.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+A horizontal or vertical rule between content, optionally labelled ("or"), in daisyUI's `divider` styles.
+-->
+<!--
+  Divider — a rule between sections or side-by-side items, optionally with a
+  short label on it ("or" between two sign-in methods).
+
+  Hand-rolled, not on bits-ui's `Separator` (AGENTS.md asks for the reason):
+  that primitive's whole contribution is `role="separator"` +
+  `aria-orientation`, or `role="none"` when decorative — two attributes,
+  written here directly, with no bits-ui on the always-loaded path.
+
+  ARIA contract:
+  - Unlabelled: `role="separator"`; vertical adds
+    `aria-orientation="vertical"` (horizontal is the implicit default). It
+    is a `<div>`, not a native `<hr>`, because daisyUI draws the rule with
+    `::before` / `::after`, which a void `<hr>` cannot render.
+  - Labelled: NOT a separator. A non-focusable separator's children are
+    presentational, so the label would be lost to assistive technology. The
+    wrapper is `role="none"` and the text reads in flow — "Sign in with a
+    passkey / or / Continue with email" (WAI-ARIA 1.2, separator).
+  - `decorative`: `aria-hidden="true"`, nothing announced.
+
+  Not `MenuSeparator`, which must be an `<li>` inside a menu and defers to
+  bits-ui's menu separator for roving focus; use that one inside `Menu`.
+-->
+<script lang="ts">import { dividerAlign, dividerOrientation, dividerTone } from "./tones.js";
+let { orientation = "horizontal", decorative = false, align = "center", tone, children, class: className, ...rest } = $props();
+const classes = $derived([
+	"divider",
+	dividerOrientation[orientation],
+	dividerAlign[align],
+	tone !== undefined && dividerTone[tone],
+	className
+]);
+const role = $derived(decorative || children !== undefined ? "none" : "separator");
+</script>
+
+<div
+  {...rest}
+  {role}
+  aria-orientation={role === 'separator' && orientation === 'vertical' ? 'vertical' : undefined}
+  aria-hidden={decorative ? 'true' : undefined}
+  class={classes}
+>
+  {#if children}<span>{@render children()}</span>{/if}
+</div>

package/dist/ui/Divider.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type DividerAlign, type Tone } from './tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Which way the rule runs: `vertical` sits between side-by-side items.
+     * @defaultValue `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * The rule marks no real boundary: hide it from assistive technology.
+     * @defaultValue `false`
+     */
+    decorative?: boolean | undefined;
+    /**
+     * Where a label sits along the rule.
+     * @defaultValue `'center'`
+     */
+    align?: DividerAlign | undefined;
+    /** Semantic colour of the rule. */
+    tone?: Tone | undefined;
+    /** Short text on the rule ("or"). */
+    children?: Snippet<[]> | undefined;
+}
+/** A horizontal or vertical rule between content, optionally labelled ("or"), in daisyUI's `divider` styles. */
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/ui/DropdownMenu.svelte

@@ -0,0 +1,44 @@
+<!-- @component
+An application menu behind a trigger — a bits-ui dropdown of `MenuItem`s styled as a daisyUI `menu`.
+-->
+<!--
+  DropdownMenu — an application menu: bits-ui's `DropdownMenu`, which owns
+  `aria-haspopup`/`aria-expanded` on the trigger, arrow-key roving focus,
+  typeahead, Escape to close and focus return. The daisyUI `menu` styling is
+  applied to a `<ul>` INSIDE the content; that list and its items' `<li>`
+  wrappers carry `role="none"` so the presentation layer does not come
+  between `role="menu"` and its `role="menuitem"` children in the
+  accessibility tree.
+
+  It is a separate component from `Menu` (site navigation) so that bits-ui's
+  dropdown runtime is reached only by an app that actually renders a
+  dropdown: `Menu`, `MenuItem`, `MenuSeparator` and `Sidebar` import nothing
+  from bits-ui (#129). The children are the same `MenuItem` /
+  `MenuSeparator` a `Menu` takes; this component lends them its bits-ui item
+  and separator parts through context (`menu-parts/menu-parts.ts`), and
+  the same for `MenuCheckboxItem`, `MenuRadioGroup`, `MenuRadioItem` and
+  `MenuSub`.
+-->
+<script lang="ts">import { DropdownMenu } from "bits-ui";
+import { menuParts } from "./menu-parts/parts.js";
+import { setMenuParts } from "./menu-parts/menu-parts.js";
+let { label, open = $bindable(false), side = "bottom", align = "end", class: className, trigger, children } = $props();
+setMenuParts(menuParts("dropdown"));
+</script>
+
+<DropdownMenu.Root bind:open>
+  {#if trigger}
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        {@render trigger({ props })}
+      {/snippet}
+    </DropdownMenu.Trigger>
+  {/if}
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content {side} {align} sideOffset={8} aria-label={label} class="z-50">
+      <ul role="none" class={['menu bg-base-100 rounded-box w-56 p-2 shadow-md', className]}>
+        {@render children()}
+      </ul>
+    </DropdownMenu.Content>
+  </DropdownMenu.Portal>
+</DropdownMenu.Root>

package/dist/ui/DropdownMenu.svelte.d.ts

@@ -0,0 +1,30 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Accessible name of the open menu. */
+    label: string;
+    /** Whether the menu is open. Bindable. */
+    open?: boolean | undefined;
+    /**
+     * Which side of the trigger the menu opens on.
+     * @defaultValue `'bottom'`
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Alignment against the trigger.
+     * @defaultValue `'end'`
+     */
+    align?: 'start' | 'center' | 'end' | undefined;
+    /** Extra classes on the `<ul class="menu">`. */
+    class?: string | undefined;
+    /** The trigger — the caller's own element, spreading `props`. */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    /** The `MenuItem`s. */
+    children: Snippet<[]>;
+}
+/** An application menu behind a trigger — a bits-ui dropdown of `MenuItem`s styled as a daisyUI `menu`. */
+declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/ui/EmptyState.svelte

@@ -0,0 +1,37 @@
+<!-- @component
+The quiet card an index or result list shows instead of a bare empty list: a heading, optional copy, icon and call to action.
+-->
+<!--
+  EmptyState — the quiet card an index or a result list shows instead of a
+  bare empty `<ul>`: a heading, optional supporting copy, an optional icon
+  above and an optional call to action below.
+
+  Content-first, not a hero. "Nothing here" is a normal state of a healthy
+  page, and the surface it is drawn on is the same `Card` every other block
+  on the page uses, so an empty list does not look like a failure.
+
+  ARIA contract: `title` is a real heading at `headingLevel` (`h2` by
+  default), so a reader navigating by headings finds out the section is empty
+  instead of finding nothing at all. The icon is decorative and hidden.
+-->
+<script lang="ts">import Card from "./Card.svelte";
+let { title, description, headingLevel = 2, icon, action, class: className, ...rest } = $props();
+</script>
+
+<Card
+  {...rest}
+  as="div"
+  class={className}
+  bodyClass="items-center gap-2 p-8 text-center sm:p-10"
+>
+  {#if icon}
+    <div class="text-base-content/50 mb-2" aria-hidden="true">{@render icon()}</div>
+  {/if}
+  <svelte:element this={`h${headingLevel}`} class="text-2xl font-semibold">{title}</svelte:element>
+  {#if description !== undefined}
+    <p class="text-base-content/70 max-w-prose leading-7">{description}</p>
+  {/if}
+  {#if action}
+    <div class="mt-2">{@render action()}</div>
+  {/if}
+</Card>

package/dist/ui/EmptyState.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from './tones.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Short, direct heading for the empty surface ("No results yet"). */
+    title: string;
+    /** Supporting copy explaining the state or the next step. */
+    description?: string | undefined;
+    /**
+     * The heading level, so the page outline stays intact.
+     * @defaultValue `2`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /** Decorative icon rendered above the heading. */
+    icon?: Snippet<[]> | undefined;
+    /** Call to action — a button or a link — rendered under the copy. */
+    action?: Snippet<[]> | undefined;
+}
+/** The quiet card an index or result list shows instead of a bare empty list: a heading, optional copy, icon and call to action. */
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/ui/ExternalLink.svelte

@@ -0,0 +1,38 @@
+<!-- @component
+A link off the site that opens in a new tab with the right `rel`, and says so to assistive technology.
+-->
+<!--
+  ExternalLink — a link off the site, with the `rel` decision made for the
+  call site.
+
+  The `rel` is the reason this is a component and not four lines of markup.
+  An address a member typed into their own profile is untrusted outbound
+  linkage and carries `nofollow`; a resolver URL the site itself composed
+  from a recorded identifier (an ORCID, a DOI) is not, and carries only
+  `noreferrer`. The distinction is invisible when it is wrong, which is
+  exactly the kind of thing that should not be retyped per page. Hence
+  `untrusted` defaults to `true`: the safe answer is the one you get by not
+  thinking about it.
+
+  ARIA contract: `target="_blank"` always pairs with `noreferrer`, and the
+  new tab is ANNOUNCED — a visually hidden "(opens in a new tab)" after the
+  text, so a screen-reader user learns what a sighted user learns from the
+  icon. The icon itself is `aria-hidden`; it says nothing the text does not.
+-->
+<script lang="ts">import { ExternalLink as ExternalLinkIcon } from "@lucide/svelte";
+import { linkVariant } from "./tones.js";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { href, variant = "muted", untrusted = true, showIcon = true, newTabLabel = "(opens in a new tab)", children, class: className, ...rest } = $props();
+</script>
+
+<a
+  {...rest}
+  {href}
+  target="_blank"
+  rel={untrusted ? 'noreferrer nofollow' : 'noreferrer'}
+  class={['inline-flex items-center gap-1', linkVariant[variant], className]}
+>
+  {@render children()}
+  <VisuallyHidden>{newTabLabel}</VisuallyHidden>
+  {#if showIcon}<ExternalLinkIcon class="size-3.5 shrink-0" aria-hidden="true" />{/if}
+</a>

package/dist/ui/ExternalLink.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type LinkVariant } from './tones.ts';
+interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    /** The absolute URL. */
+    href: string;
+    /**
+     * The link weight.
+     * @defaultValue `'muted'`
+     */
+    variant?: LinkVariant | undefined;
+    /**
+     * Whether the destination is user-supplied. `true` (the default) adds
+     * `nofollow`; pass `false` only for an address this site composed itself.
+     * @defaultValue `true`
+     */
+    untrusted?: boolean | undefined;
+    /**
+     * Show the trailing new-tab icon.
+     * @defaultValue `true`
+     */
+    showIcon?: boolean | undefined;
+    /**
+     * The announcement appended to the link text, for assistive technology.
+     * @defaultValue `'(opens in a new tab)'`
+     */
+    newTabLabel?: string | undefined;
+    /** The link text; the new-tab notice is appended for assistive technology. */
+    children: Snippet<[]>;
+}
+/** A link off the site that opens in a new tab with the right `rel`, and says so to assistive technology. */
+declare const ExternalLink: import("svelte").Component<Props, {}, "">;
+type ExternalLink = ReturnType<typeof ExternalLink>;
+export default ExternalLink;

package/dist/ui/Heading.svelte

@@ -0,0 +1,58 @@
+<!-- @component
+A heading at any level with a stable `id`, optionally with a copyable anchor link.
+-->
+<!--
+  Heading — a section heading at any level, with a stable `id` so the section
+  is addressable: a table of contents, a "copy link to this section" anchor,
+  a URL fragment someone pasted into a message.
+
+  ARIA contract: a real `<h1>`–`<h6>` at the level the caller names. The level
+  is a PROP and not a consequence of the styling, because the outline is a
+  document structure and the type scale is a visual one; `class` overrides the
+  latter without touching the former. `scroll-mt` keeps a hash target clear of
+  a sticky header. The anchor link, when shown, has a real accessible name
+  (`anchorLabel`); the `#` glyph beside it is decorative.
+
+  The id is derived from `children` AT RENDER when `children` is a string —
+  not measured from the mounted element in an `$effect`, which is how the
+  original did it and which means the server renders a heading with
+  no id at all and every in-page link is dead until hydration. A snippet's
+  text is not knowable before render, so a snippet heading that wants an
+  anchor must be given an explicit `id`; without one the anchor is omitted
+  rather than pointing at nothing.
+-->
+<script lang="ts">import { slugify } from "./slug.js";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { level, id, anchor = false, anchorLabel = "Link to this section", children, class: className, ...rest } = $props();
+const headingId = $derived(id ?? (typeof children === "string" ? slugify(children) : undefined));
+const levelClasses = {
+	1: "mt-8 mb-6 text-3xl sm:text-4xl",
+	2: "mt-6 mb-4 text-2xl sm:text-3xl",
+	3: "mt-5 mb-3 text-xl sm:text-2xl",
+	4: "mt-4 mb-3 text-lg sm:text-xl",
+	5: "mt-4 mb-2 text-base sm:text-lg",
+	6: "mt-3 mb-2 text-sm sm:text-base"
+};
+</script>
+
+<svelte:element
+  this={`h${level}`}
+  {...rest}
+  id={headingId}
+  class={['group scroll-mt-16 font-bold', levelClasses[level], className]}
+>
+  {#if typeof children === 'string'}
+    {children}
+  {:else}
+    {@render children()}
+  {/if}
+  {#if anchor && headingId !== undefined}
+    <a
+      href={`#${headingId}`}
+      class="link link-hover text-base-content/40 ml-2 opacity-0 transition-opacity focus:opacity-100 group-hover:opacity-100"
+    >
+      <span aria-hidden="true">#</span>
+      <VisuallyHidden>{anchorLabel}</VisuallyHidden>
+    </a>
+  {/if}
+</svelte:element>