<Badge text="paid" color="green" />
<Badge text="draft" color="gray" type="outline" />

<StatusMark status="ready" />
<StatusMark status="known-issue" label="Flaky on Safari" />

<CiStatusPill status="passing" />
<CiStatusPill status="queued" />  {/* unrecognised → neutral pill, its own text */}

<Button variant="primary" size="md" onClick={save}>Save</Button>
<Button variant="danger" disabled>Delete</Button>

<CopyButton textToCopy={invoice.id} />
<CopyButton textToCopy={invoice.id} title="Copy id" copy={app.clipboard.copy} />

<GeoButton
  onLocation={(position) => map.center.set(position)}
  onError={(message) => app.toast.error({ body: message })}
/>

<ExportButton
  columns={[{ key: "id", header: "ID" }, { key: "name", header: "Name" }]}
  getRows={() => api.attendees.list()}
  fileName="attendees.csv"
/>

<PageTitle>Transactions</PageTitle>
<PageTitle class="mb-2 text-xl">Nested detail</PageTitle>

<ConfidenceMeter value={88} label="match" />

<MoneyDisplay amount={12345} currency="EUR" />
<MoneyDisplay amount={-4599} currency="EUR" colorNegative />

<Table
  headerSlot={<th scope="col">Merchant</th>}
  bodySlots={rows.map((row) => <td>{row.merchant}</td>)}
  footerSlot={<tr>…</tr>}
/>

<DataTable
  caption="Invoices"
  columns={[
    { key: "date", header: "Date", sortable: true },
    { key: "merchant", header: "Merchant", sortable: true },
    { key: "amount", header: "Amount", sortable: true, align: "right" },
  ]}
  rows={invoices}
  rowKey={(row) => row.id}
  sort={sort.value}
  onSortChange={(next) => sort.value = next}
  paging={{ page: page.value, pageSize: 3, onChange: (next) => page.value = next }}
/>

<Card>
  <CardHeader title="Invoices" action={<Button size="sm">New</Button>} />
  <CardBody>…</CardBody>
  <CardFooter><Button variant="outline" size="sm">Dismiss</Button></CardFooter>
</Card>

<CardHeader title="Invoices" action={<Button size="sm">New</Button>} />

<CardHeader>
  <h4>Raw header markup</h4>
  <span>children win over title/action</span>
</CardHeader>

<CardBody>
  <p>Header, body and footer are each optional.</p>
</CardBody>

<CardFooter>
  <div class="flex justify-end gap-2">
    <Button variant="outline" size="sm">Dismiss</Button>
    <Button size="sm">Open</Button>
  </div>
</CardFooter>

<FactCard
  title="Antonshubin.com"
  facts={[
    { key: "Stack", value: "Deno + Hono + Fresh" },
    { key: "Status", value: <StatusMark status="ready" /> },
  ]}
/>

<div class="@container flow-root">
  <MarginNote sourceHref={benchmarkUrl} sourceLabel="Benchmark" checkedOn="2026-09-01">
    Cold start under 50ms on a shared vCPU.
  </MarginNote>
  <p>The paragraph the note sits beside.</p>
</div>

<InstallBox command="deno add jsr:@spy4x/preact-ui" />

<Progress id="upload" label="Upload" value={42} tone="success" />

// No reading yet: the honest indeterminate DOM, not a bar at zero.
<Progress value={undefined} />

<Tabs
  tabs={[
    { id: "overview", label: "Overview", content: <Overview /> },
    { id: "detail", label: "Detail", content: <Detail />, disabled: true },
  ]}
  active={view.value}
  onChange={(id) => view.value = id}
  orientation="vertical"
  label="Report views"
/>

<Pagination page={page.value} pageCount={24} onChange={(page) => page.value = page} />

// An empty result set needs no special case at the call site.
<Pagination page={1} pageCount={0} onChange={() => {}} />

<Avatar name="Ada Lovelace" size="lg" />
<Avatar name="Ada Lovelace" src={user.avatarUrl} />
<Avatar name="😀" />                        {/* no usable initial → the icon face */}
<Avatar src={user.avatarUrl} alt="" />       {/* named elsewhere in the row */}

<AvatarGroup items={members} label="Project members" max={4} size="sm" />

<CopyableText text={invoice.id} />
<CopyableText
  text={reference}
  truncate
  copyLabel="Copy reference"
  copiedLabel="Reference copied"
  copy={app.clipboard.copy}
/>

<CopyableTextBody
  text={seriesKey}
  copied={copied.value}
  onCopy={() => copied.value = true}
  copyLabel="Copy series key"
/>

<Tooltip content="Supplements the trigger" label="Total revenue" placement="right">
  <span>Revenue</span>
</Tooltip>

// Interactive children own the tab stop already:
<Tooltip content="Archive the invoice" label="Archive" focusable={false}>
  <button type="button">Archive</button>
</Tooltip>

<ImageGallery
  images={[
    { src: hero, alt: "A hero shot" },
    { src: team, alt: "The team", thumbSrc: teamThumb },
  ]}
/>

<Lightbox
  images={images}
  index={index}
  open={open}
  onClose={() => setOpen(false)}
  onIndexChange={setIndex}
/>

<ErrorState message={error.value} />

<EmptyState
  icon={<IconFolder class="size-5" />}
  title="No invoices yet"
  description="Invoices appear here once a customer is billed."
  action={<Button size="sm">New invoice</Button>}
/>

<LoadingSpinner size="lg" label="Loading transactions…" />

<LoadingSkeleton rows={2} />

<SkeletonText lines={3} widths={[100, 85, 60]} />

// The ragged right edge belongs to the copy, so a paragraph with no width list is all-full:
<SkeletonText lines={2} />

<SkeletonTable rows={4} columns={3} />

<SkeletonTable widths={[3, 1, 2]} rows={2} />

// An empty result set: the real table dropped its height reservation too.
<SkeletonTable rows={0} columns={0} reserveHeight={false} />

<SkeletonCards columns={3} rows={2} lines={2} />

// A two-up grid overrides the shipped three-column default through class:
<SkeletonCards columns={2} lines={3} class="lg:grid-cols-2" />

<SkeletonStatus label="Loading the invoice list…" />
<SkeletonTable rows={4} columns={3} />

<LoadingScreen message="Syncing" description="This can take a minute." />

<Modal
  open={open.value}
  onClose={() => open.value = false}
  title="Rename the list"
  cancelLabel="Close"
  tone="danger"
  footer={<Button onClick={save}>Save</Button>}
>
  <p>Modal body.</p>
</Modal>

<ConfirmDialog
  title="Delete invoice INV-0007?"
  message="This cannot be undone."
  confirmLabel="Delete"
  cancelLabel="Keep it"
  tone="danger"
  onConfirm={() => deleteInvoice()}
  onCancel={() => confirming.value = false}
/>

<Toastr
  toasts={app.toast.list.value}
  onDismiss={(id) => app.toast.remove(String(id))}
  label="Benachrichtigungen"
  dismissLabel="Ausblenden"
/>

// One toast naming its own control, which is worth doing when several are on screen at once:
{ id: "upload", type: "error", body: "Upload failed", dismissLabel: "Dismiss the upload error" }

<ToggleSwitch
  value={archived.value}
  onToggle={(next) => archived.value = next}
  label="Show archived"
/>

<OnOffButtons
  value={showActive.value}
  amount={{ on: 128, off: 14 }}
  onSwitch={(on) => showActive.value = on}
/>

<Dropdown
  trigger={<IconEllipsisVertical />}
  triggerLabel="Row actions"
  menuLabel="Row actions"
  vertical="up"
>
  <DropdownItem href={editHref}>Edit</DropdownItem>
  <DropdownItem onClick={archive}>Archive</DropdownItem>
</Dropdown>

<DropdownItem href="/regions/1/edit">Edit</DropdownItem>
<DropdownItem class="text-red-600" onClick={archive}>Archive</DropdownItem>
<DropdownItem disabled onClick={archive}>Archive</DropdownItem>

<ToggleField
  id="show-archived"
  label="Show archived"
  value={archived.value}
  onToggle={(next) => archived.value = next}
  description="Hides the row from the list"
  required
/>

<FileInput
  id="attachments"
  label="Attachments"
  hint="PNG or JPEG, up to 2 MB each"
  accept="image/png,image/jpeg"
  maxSize={2 * 1024 * 1024}
  multiple
  onFiles={(files) => chosen.value = files}
  onReject={(reasons) => refused.value = reasons}
/>

<Combobox
  items={cities}
  value={city.value}
  onChange={(next) => city.value = next}
  getLabel={(city) => `${city.name} — ${city.country}`}
  isItemDisabled={(city) => city.retired === true}
  placeholder="Search a city…"
  emptyMessage={(query) => `No city matches “${query}”`}
/>

<DateRangePicker
  range={range.value}
  onChange={(next) => range.value = next}
  timeZone="Europe/Paris"
  presets={[
    { preset: "last-7-days", label: "Last 7 days" },
    { preset: "custom", label: "Custom…" },
  ]}
  selectedPreset="last-7-days"
/>

// Every label is English by default; override only the ones you need to.
<DateRangePicker {...props} labels={{ placeholder: "All time" }} />

// withTime: datetime-local fields, a DateTimeRange, and two sub-day presets — no presets prop.
<DateRangePicker
  withTime
  range={timedRange.value}
  onChange={(next) => timedRange.value = next}
  timeZone="Europe/Paris"
/>

<Field id="email" label="Email" required error={emailError} hint="Work address only">
  <Input value={email.value} onInput={(event) => email.value = event.currentTarget.value} />
</Field>

// The label under the control, and a control that is its own label — the opt-out keeps the label
// from pointing a for at something that cannot carry one:
<Field id="archived" label="Archived" suffix labelFor={false}>
  <Checkbox checked={archived.value} />
</Field>

<Input
  type="email"
  name="email"
  value={email.value}
  placeholder="you@example.com"
  required
  onInput={(event) => email.value = event.currentTarget.value}
/>

<Textarea rows={4} value={notes.value} onInput={(event) => notes.value = event.currentTarget.value} />

<Select
  value={role.value}
  onChange={(event) => role.value = event.currentTarget.value}
  options={[
    { value: "admin", label: "Administrator" },
    { value: "editor", label: "Editor" },
  ]}
  placeholder="Choose a role"
/>

<Checkbox
  checked={archived.value}
  onChange={(event) => archived.value = event.currentTarget.checked}
>
  Show archived
</Checkbox>

<Radio name="channel" value="email" checked={channel.value === "email"}>Email</Radio>

<RadioGroup
  legend="Notification method"
  name="channel"
  value={channel.value}
  onChange={(value) => channel.value = value}
  options={[
    { value: "email", label: "Email" },
    { value: "sms", label: "Phone (SMS)" },
    { value: "push", label: "Push notification", disabled: true },
  ]}
/>

<InputButton
  type="search"
  icon={<IconSearch class="size-4" />}
  iconLabel="Search"
  placeholder="Search users"
  value={query.value}
  onInput={(event) => query.value = event.currentTarget.value}
  onClick={() => query.value = ""}
/>

<Field id="price" label="Price">
  <MoneyInput
    value={amount.value}
    currency="EUR"
    locale="de"
    name="price"
    onChange={(value) => amount.value = value}
  />
</Field>

<EnhancedForm
  action="/api/subscribe"
  onSubmit={async (data) => api.subscribe(data.get("email"))}
  done={<p>Thanks.</p>}
>
  <Field id="email" label="Email">
    <Input type="email" name="email" required />
  </Field>
  <Button type="submit">Subscribe</Button>
</EnhancedForm>

<NewsletterForm
  action="/api/subscribe"
  onSubmit={(email) => api.subscribe(email)}
  honeypot
/>

<ContactForm
  action="/api/lead"
  onSubmit={({ name, email, message }) => api.sendLead({ name, email, message })}
  honeypot
/>

import { formatBytes } from "@spy4x/preact-ui"

[formatBytes(512), formatBytes(1536), formatBytes(5 * 1024 ** 2)]

import { buttonClasses } from "@spy4x/preact-ui/button"

buttonClasses("outline", "sm", "w-full")

import { addDays, formatIsoDate, isSameDay, parseIsoDate, shiftMonth } from "@spy4x/preact-ui"

const ms = parseIsoDate("2026-03-31")
;({
  roundTrip: formatIsoDate(ms),
  weekLater: addDays("2026-03-31", 7),
  monthBefore: shiftMonth("2026-03-31", -1),
  same: isSameDay("2026-03-31", formatIsoDate(ms)),
})

import {
  endOfMonth, endOfQuarter, endOfYear, startOfMonth, startOfQuarter, startOfYear,
} from "@spy4x/preact-ui"

const day = "2028-02-10"
;({
  month: [startOfMonth(day), endOfMonth(day)],
  quarter: [startOfQuarter(day), endOfQuarter(day)],
  year: [startOfYear(day), endOfYear(day)],
})

import {
  calendarDateInZone, dateRangePresets, isValidDateRange, presetForRange, rangeForPreset,
} from "@spy4x/preact-ui"

const now = new Date("2026-03-18T10:30:00Z")
const timeZone = "Europe/Paris"
const week = rangeForPreset("last-7-days", { now, timeZone })
;({
  presets: dateRangePresets.length,
  today: calendarDateInZone(now, timeZone),
  week,
  matches: presetForRange(week, { now, timeZone }),
  reversedIsValid: isValidDateRange({ from: week.to, to: week.from }),
})

import {
  isValidDateTimeRange, presetForTimeRange, rangeForTimePreset, timeRangePresets,
} from "@spy4x/preact-ui"

const now = new Date("2026-03-18T10:30:00Z")
const timeZone = "Europe/Paris"
const hour = rangeForTimePreset("last-hour", { now, timeZone })
;({
  presets: timeRangePresets,
  hour,
  matches: presetForTimeRange(hour, { now, timeZone }),
  valid: isValidDateTimeRange({ from: "2026-02-31T10:00", to: "2026-03-01T10:00" }),
})

import { defaultGetLabel, filterItems, fold, matchesQuery } from "@spy4x/preact-ui"

const cities = ["São Paulo", "Sapporo", "Zürich"]
;({
  folded: fold("São Paulo"),
  label: defaultGetLabel(42),
  one: matchesQuery("Zürich", "zur"),
  many: filterItems(cities, "sa"),
})

import { comboboxKey, comboboxKeyAction, nextComboboxState } from "@spy4x/preact-ui"

const key = comboboxKey({ key: "ArrowDown", altKey: false })
const open = { activeIndex: 1, isOpen: true }
;({
  key,
  down: key && nextComboboxState(open, key, 3),
  unknown: comboboxKey({ key: "a", altKey: false }),
  enter: comboboxKeyAction("Enter", open, 3),
})

import {
  activeDescendant, comboboxListboxId, comboboxOptionId, naming,
} from "@spy4x/preact-ui"

;({
  listbox: comboboxListboxId("city"),
  option: comboboxOptionId("city", 2),
  active: activeDescendant("city", { activeIndex: 2, isOpen: true }),
  closed: activeDescendant("city", { activeIndex: 2, isOpen: false }),
  named: naming({ ariaLabel: "City" }),
  unnamed: naming({}),
})

import {
  leavesCombobox, listboxContent, openingState, selectableIndex, typingState,
} from "@spy4x/preact-ui"

const sizes = ["Small", "Medium", "Large"]
const soldOut = (size: string) => size === "Small"
const input = { isSameNode: (node: unknown) => node === input }
;({
  opening: openingState(sizes, 2, sizes, soldOut),
  typing: typingState(sizes, soldOut),
  firstUsable: selectableIndex(sizes, 0, soldOut),
  empty: listboxContent([], "xl"),
  leaves: {
    toAnotherElement: leavesCombobox(input, {} as Node),
    toNowhere: leavesCombobox(input, null),
  },
})

import { nextMenuIndex } from "@spy4x/preact-ui"

[nextMenuIndex("ArrowDown", 2, 3), nextMenuIndex("ArrowUp", 0, 3), nextMenuIndex("End", 0, 3), nextMenuIndex("x", 0, 3)]

import { nextTabIndex } from "@spy4x/preact-ui"

const disabled = [false, true, false]
;({
  right: nextTabIndex("ArrowRight", 0, 3, "horizontal", disabled),
  down: nextTabIndex("ArrowDown", 0, 3, "vertical", disabled),
  wrongAxis: nextTabIndex("ArrowDown", 0, 3, "horizontal", disabled),
})

import { backdropClickDismisses, isBackdropClick } from "@spy4x/preact-ui"
import { backdropDismissesByDefault } from "@spy4x/preact-ui/modal"

const dialog = {}
const rect = { left: 100, top: 100, right: 500, bottom: 400 }
const click = { target: dialog, clientX: 20, clientY: 20 } as MouseEvent
;({
  outside: isBackdropClick({ target: dialog, dialog }, rect, 20, 20),
  inside: isBackdropClick({ target: dialog, dialog }, rect, 300, 250),
  byDefault: backdropDismissesByDefault,
  refused: backdropClickDismisses(click, rect, dialog, false),
})

import {
  applyScrollLock, clientWidthWithoutScrollbar, scrollLockPadding,
} from "@spy4x/preact-ui"

const html = {
  style: { overflow: "" },
  get clientWidth() { return this.style.overflow === "hidden" ? 1000 : 985 },
}
const body = { style: { overflow: "", paddingRight: "" } }
const padding = scrollLockPadding(html.clientWidth, clientWidthWithoutScrollbar(html))
const lock = applyScrollLock({ scrollingElement: html, body }, padding)
const locked = { html: html.style.overflow, body: { ...body.style } }
lock.release()
;({ padding, locked, released: body.style })

import { DISMISS_KEY, isDismissKey } from "@spy4x/preact-ui"

;({
  key: DISMISS_KEY,
  open: isDismissKey({ key: "Escape" }, true),
  closed: isDismissKey({ key: "Escape" }, false),
  other: isDismissKey({ key: "Enter" }, true),
})

import {
  bindEscapeClose, escapeCloseStrategy, platformCloseHandler, supportsClosedBy,
} from "@spy4x/preact-ui/modal"

// A browser's dialog prototype: one that knows `closedby` has a `closedBy` property.
function plan(dialogPrototype: object) {
  const log: string[] = []
  const dialog = {
    addEventListener: (type: string) => log.push("add " + type),
    removeEventListener: (type: string) => log.push("remove " + type),
  }
  const strategy = escapeCloseStrategy(supportsClosedBy(dialogPrototype))
  const unbind = bindEscapeClose(dialog, strategy, { keydown: () => {}, cancel: () => {} })
  unbind()
  platformCloseHandler({
    refusalHolds: strategy.refusalHolds,
    onClose: () => false,
    settleOpen: (open) => log.push("open " + open),
  })()
  return { strategy, log }
}
;({ withClosedBy: plan({ closedBy: "none" }), withoutClosedBy: plan({}) })

import { dialogHeldFocus, restoreFocus, shouldRetargetFocus } from "@spy4x/preact-ui"

const log: string[] = []
const trigger = { focus: () => log.push("trigger focused") }
const field = {}
const dialog = { contains: (element: unknown) => element === field }
;({
  held: dialogHeldFocus(dialog, field),
  retarget: shouldRetargetFocus(trigger),
  noTrigger: shouldRetargetFocus(null),
  moved: restoreFocus(trigger),
  log,
})

import { dialogTitleId } from "@spy4x/preact-ui"

dialogTitleId("P0-1")

import { CANCEL_LABEL, CONFIRM_LABEL, labelOr } from "@spy4x/preact-ui"

[labelOr("Delete", CONFIRM_LABEL), labelOr("   ", CONFIRM_LABEL), labelOr(undefined, CANCEL_LABEL)]

import { confirmVariant, hasQuestion } from "@spy4x/preact-ui"

;({
  blank: hasQuestion(["", "  "]),
  asked: hasQuestion("Delete this file?"),
  danger: confirmVariant("danger"),
  plain: confirmVariant("default"),
})

import { avatarFace, initials } from "@spy4x/preact-ui"
import { failedAfterSrcChange } from "@spy4x/preact-ui/avatar"

;({
  initials: [initials("Ada Lovelace"), initials("John Paul Smith"), initials("王小明")],
  image: avatarFace({ src: "/a.png", name: "Ada" }),
  broken: avatarFace({ src: "/a.png", failed: true, name: "Ada" }),
  nameless: avatarFace({}),
  sameSrc: failedAfterSrcChange("/a.png", "/a.png", true),
  newSrc: failedAfterSrcChange("/a.png", "/b.png", true),
})

import { groupLabel, groupSplit } from "@spy4x/preact-ui"

;({ split: groupSplit(7, 3), label: groupLabel("Reviewers", 7), fallback: groupLabel(null, 7) })

import { clampProgress, formatProgressPercent, progressWidthPercent } from "@spy4x/preact-ui"

const { fraction } = clampProgress(59.96, 60)
;({
  over: clampProgress(130),
  fraction,
  width: progressWidthPercent(fraction),
  label: formatProgressPercent(fraction ?? 0),
})

import { clampConfidence } from "@spy4x/preact-ui"

[clampConfidence(42), clampConfidence(80), clampConfidence(140), clampConfidence(null)]

import { normalizeCiStatus } from "@spy4x/preact-ui"

[normalizeCiStatus(" Passing "), normalizeCiStatus("RUNNING"), normalizeCiStatus("cancelled")]

import {
  SKELETON_METRICS, tableHeaderHeightRem, tableRowHeightRem,
} from "@spy4x/preact-ui"
import { barHeightRem, lineBoxRem } from "@spy4x/preact-ui/skeletons"

;({
  lineHeight: SKELETON_METRICS.lineHeightRem,
  line: lineBoxRem(),
  bar: barHeightRem(),
  row: tableRowHeightRem(),
  header: tableHeaderHeightRem(),
})

import {
  columnWidthPercents, skeletonCount, tableGeometry, textGeometry,
} from "@spy4x/preact-ui"

;({
  count: [skeletonCount(undefined, 3), skeletonCount(2.7, 3), skeletonCount(-1, 3)],
  columns: columnWidthPercents([2, 1, 1]),
  text: textGeometry(3, ["full", 60]),
  table: tableGeometry({ rows: 2, widths: [2, 1] }),
})

import { skeletonStatusRole } from "@spy4x/preact-ui"

skeletonStatusRole()

import { matchesAccept } from "@spy4x/preact-ui"
import { classifyFiles } from "@spy4x/preact-ui/file-input"

const photo = new File(["12345"], "photo.png", { type: "image/png" })
const notes = new File(["1"], "notes.txt", { type: "text/plain" })
const poster = new File(["1234567890"], "poster.png", { type: "image/png" })
const { accepted, rejected } = classifyFiles([photo, notes, poster], {
  accept: "image/*",
  maxSize: 8,
})
;({
  pdf: matchesAccept(new File([], "report.PDF"), ".pdf"),
  accepted: accepted.map((file) => file.name),
  rejected: rejected.map(({ file, reason }) => [file.name, reason]),
})

import { resolveLabels } from "@spy4x/preact-ui/file-input"

const labels = resolveLabels({ wrongType: (name) => name + " is not an image" })
;[labels.wrongType("notes.txt"), labels.tooLarge("poster.png", 1024), labels.removeFile("photo.png")]

import { HONEYPOT_FIELD_NAME, honeypotField, honeypotFilled } from "@spy4x/preact-ui"

const field = honeypotField(HONEYPOT_FIELD_NAME, "Leave this empty")
const person = new FormData()
const bot = new FormData()
bot.set(HONEYPOT_FIELD_NAME, "https://example.com")
;({
  name: HONEYPOT_FIELD_NAME,
  hidden: field.props["aria-hidden"],
  person: honeypotFilled(person),
  bot: honeypotFilled(bot),
})

import { enhancedFormMessage } from "@spy4x/preact-ui/enhanced-form"

const labels = { sending: "Sending…", done: "Thanks, we got it.", failed: "Please try again." }
;(["idle", "sending", "done", "failed"] as const).map((status) => enhancedFormMessage(status, labels))

import { labelTarget } from "@spy4x/preact-ui/field"

[labelTarget(undefined, "email"), labelTarget("email-input", "email"), labelTarget(false, "email")]

import { resolveMoneyInputEdit } from "@spy4x/preact-ui"
import { editableText } from "@spy4x/preact-ui/money-input"

const bounds = { min: 0, max: 100000 }
;({
  shown: editableText(123456, "EUR", "de-DE"),
  typed: resolveMoneyInputEdit("12,50", "EUR", "de-DE", bounds, "Enter an amount"),
  invalid: resolveMoneyInputEdit("twelve", "EUR", "de-DE", bounds, "Enter an amount"),
  tooMuch: resolveMoneyInputEdit("5000", "EUR", "de-DE", bounds, "Enter an amount"),
})

import { copyToClipboard } from "@spy4x/preact-ui/copy-button"

const copied: string[] = []
copyToClipboard("deno add jsr:@std/path", (text) => {
  copied.push(text)
})
copied

import { requestGeolocation } from "@spy4x/preact-ui/geo-button"

const results: unknown[] = []
const stub = {
  getCurrentPosition: (found: (position: { coords: { latitude: number; longitude: number } }) => void) =>
    found({ coords: { latitude: 48.8584, longitude: 2.2945 } }),
} as unknown as Geolocation
requestGeolocation((position) => results.push(position), (message) => results.push(message), stub)
results

import { pageRange } from "@spy4x/preact-ui"

pageRange(6, 20).map((item) => "page" in item ? item.page : "…")

import { rowKeyAttribute } from "@spy4x/preact-ui"

"tr[" + rowKeyAttribute + '="42"]'

import { thumbnailKey } from "@spy4x/preact-ui/image-gallery"

const images = [{ src: "/a.jpg" }, { src: "/b.jpg" }, { src: "/a.jpg" }]
images.map((_, index) => thumbnailKey(images, index))

import { counterText, describedImages, wrapIndex } from "@spy4x/preact-ui"

const images = [
  { src: "/1.jpg", alt: "Harbour at dawn" },
  { src: "/2.jpg", alt: "" },
  { src: "/3.jpg", alt: "Market street" },
]
const shown = describedImages(images)
;({
  shown: shown.length,
  back: wrapIndex(0, shown.length, -1),
  counter: counterText(2, shown.length),
})

import { defaultToastDuration, resolveDuration } from "@spy4x/preact-ui"

;({
  defaultToastDuration,
  unset: resolveDuration({}),
  sticky: resolveDuration({ duration: 0 }),
  short: resolveDuration({ duration: 2000 }),
})

<AuthForm
  mode={mode}
  step={step}
  onModeChange={setMode}
  onSignIn={({ login, password }) => auth.signIn(login, password)}
  onSignUp={({ login, password }) => auth.signUp(login, password)}
  onOneTimeCode={(code) => auth.verify(code)}
  busy={pending}
  error={error} // string, or { message, field: "login" | "password" | "code" }
  action="/auth/sign-in"
/>

<Calendar
  monthAnchor="2026-03-01"
  minDate="2026-03-01"
  maxDate="2026-04-30"
  today="2026-03-10"
  timeZone="UTC"
  availableByDate={{ "2026-03-12": 3, "2026-03-13": 0 }}
  selectedDate="2026-03-12"
  onSelectDate={(date) => picked.value = date}
/>

<SEOHead
  title="Blue widget — Acme"
  description="Specifications, prices and reviews for the blue widget."
  canonical="https://example.com/products/widgets/12"
  ogImage="https://example.com/og/widgets.png"
  siteName="Acme"
  jsonLd={[{ "@type": "Organization", name: "Acme" }]}
  crumbs={[
    { name: "Home", href: "/" },
    { name: "Widgets", href: "/products/widgets" },
    { name: "Blue widget" },
  ]}
/>

// The same tag set as data, for an app whose head is not a component tree:
const tags = seoHeadTags(head)

<Shell
  brand={<Logo />}
  currentPath={url.pathname}
  navItems={[
    { name: "Dashboard", href: "/dashboard", Icon: IconHome },
    { name: "Docs", href: "/docs", Icon: IconBookOpen },
    { name: "Settings", children: [
      { name: "Billing", href: "/settings/billing" },
      { name: "Team", href: "/settings/team", counter: unreadInvites },
    ] },
  ]}
  user={session ? { name: session.name, email: session.email } : null}
  userMenuItems={[
    { label: "Your profile", href: "/profile" },
    { label: "Sign out", onClick: () => auth.signOut() },
  ]}
  status={<ConnectionIndicator />}
>
  <PageContent />
</Shell>

<SiteHeader
  brand={<Logo />}
  currentPath={url.pathname}
  links={[
    { label: "Product", href: "/product" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs", Icon: IconBookOpen },
  ]}
  actions={<Button size="sm" onClick={() => navigate("/get-started")}>Get started</Button>}
/>

// Wherever the server renders the page:
<StateInit data={{ userId: user.id, features: enabledFeatures }} />

// Anywhere on the client:
const state = readStateInit<{ userId: string; features: string[] }>()

<SWUpdater
  scriptUrl="/sw.js"
  reload={() => globalThis.location.reload()}
  onUpdate={() => app.toast.info({ body: "Updating…" })}
  onError={(error) => app.report(error)}
/>

// Only when the worker speaks another dialect — the default is { action: "skipWaiting" }:
<SWUpdater scriptUrl="/sw.js" updateMessage={{ type: "SKIP_WAITING" }} />

<ImageLightbox
  containerSelector="[data-lightbox]"
  fallbackAlt="Figure"
  zoomLabel="Zoom"
  onOpen={(image) => analytics.track("lightbox", image.src)}
/>

<RailShell
  items={[
    { key: "home", label: "Home", href: "/", Icon: IconHome },
    { key: "projects", label: "Projects", href: "/projects", Icon: IconFolder },
    // … more than five entries in all, and the phone bar grows a "More" slot
  ]}
  currentPath={location.pathname}
  primary={{ key: "compose", label: "Write", href: "/new", Icon: IconPencilSquare }}
>
  <Page />
</RailShell>

import { normalizeCanonical } from "@spy4x/preact-system"

normalizeCanonical("https://example.com/docs/../guide?page=2")

import {
  breadcrumbItems,
  breadcrumbListJsonLd,
  canonicalUrl,
} from "@spy4x/preact-system"

const page = "https://example.com/docs/setup#install"
const crumbs = [{ name: "Docs", href: "/docs" }, { name: "Setup" }]

canonicalUrl(page).href
breadcrumbItems(page, crumbs)
breadcrumbListJsonLd(page, crumbs)["@id"]

import { createHeadStore } from "@spy4x/preact-system"

const { head, setHead, resetHead } = createHeadStore({
  title: "Acme",
  description: "Tools for small teams.",
  canonical: "https://example.com/",
})
setHead({ title: "Pricing — Acme", canonical: "https://example.com/pricing" })
const onPricing = head.value.title
resetHead()
const afterReset = head.value.title

import { jsonLdText, seoHeadJsonLd, seoHeadTags } from "@spy4x/preact-system"

const head = {
  title: "Pricing — Acme",
  description: "Plans for teams of every size.",
  canonical: "https://example.com/pricing",
  jsonLd: [{ "@type": "Offer", name: "Starter", description: "For <5 people." }],
  crumbs: [{ name: "Home", href: "/" }, { name: "Pricing" }],
}

seoHeadTags(head).map(({ tag, attrs }) => attrs.name ?? attrs.property ?? attrs.rel ?? tag)
jsonLdText(seoHeadJsonLd(head))

import { readStateInit, stateInitText } from "@spy4x/preact-system"

const text = stateInitText({ user: "Ada", note: "</script> is safe" })
const page = {
  getElementById: () => ({
    tagName: "SCRIPT",
    getAttribute: () => "application/json",
    textContent: text,
  }),
}
readStateInit("state-init", page)

import { describeCalendarDay } from "@spy4x/preact-system"

const day = {
  date: "2026-03-11",
  label: "11 March 2026",
  inMonth: true,
  disabled: false,
  reason: null,
  availableCount: 3,
  selected: false,
  today: false,
}
describeCalendarDay(day)
describeCalendarDay({ ...day, disabled: true, reason: "past", availableCount: undefined })

import { isCurrentLink } from "@spy4x/preact-system"

isCurrentLink("/pricing", "/pricing")
isCurrentLink("/docs", "/docs/intro")
isCurrentLink("/docs", undefined)

import { TAB_BAR_SLOTS, tabBarSlots } from "@spy4x/preact-system"

const items = ["home", "inbox", "files", "reports", "people", "settings"]
  .map((key) => ({ key, label: key }))
const { tabs, more } = tabBarSlots(items, { key: "new", label: "New" })

TAB_BAR_SLOTS
tabs.map((item) => item.key)
more.map((item) => item.key)

import { resolveImage } from "@spy4x/preact-system"
import { collectSequence, zoomableAlt } from "@spy4x/preact-system/image-lightbox"

const image = (src, alt) => ({ matches: (s) => s === "img", src, alt })
const images = [image("/a.jpg", "Harbour at dawn"), image("/b.jpg", null), image("/c.jpg", " ")]

zoomableAlt("  Harbour at dawn ", "Image")
resolveImage(images[1])
collectSequence(images, images[2])

import { serviceWorkerContainer, startUpdates } from "@spy4x/preact-system"

const registered = []
const container = Object.assign(new EventTarget(), {
  controller: null,
  register: (url, options) => {
    registered.push(`${url} (scope ${options?.scope ?? "default"})`)
    return new Promise(() => {})
  },
})

serviceWorkerContainer({})
const stop = startUpdates(container, { scope: "/app/" })
stop()

import {
  DEFAULT_UPDATE_MESSAGE,
  skipWaiting,
  watchForUpdate,
} from "@spy4x/preact-system"

const log = []
const waiting = Object.assign(new EventTarget(), {
  state: "installed",
  postMessage: (message) => log.push(message),
})
const registration = Object.assign(new EventTarget(), { installing: null, waiting })

const stop = watchForUpdate(registration, {
  hasController: () => true,
  onUpdate: () => log.push("update waiting"),
})
skipWaiting(registration, DEFAULT_UPDATE_MESSAGE)
stop()

import { reloadOnControllerChange } from "@spy4x/preact-system"

let reloads = 0
const container = Object.assign(new EventTarget(), {
  controller: null,
  register: () => new Promise(() => {}),
})

const stop = reloadOnControllerChange(container, () => reloads++)
container.dispatchEvent(new Event("controllerchange"))
stop()
container.dispatchEvent(new Event("controllerchange"))

<CrudList
  title="Teams"
  store={teamStore}
  match={(row, word) => search(row.name, word)}
  query={query}
  header={<th scope="col">Name</th>}
  row={(row) => <td>{row.name}</td>}
  actions={(row) => (
    <RowActions>
      <RowAction href={`/teams/${row.id}/edit`}>Edit</RowAction>
      <RowAction danger onClick={() => archive(row.id)}>Archive</RowAction>
    </RowActions>
  )}
/>

<RowAction href={`/teams/${row.id}/edit`}>Edit</RowAction>
<RowAction danger onClick={() => archive(row.id)}>Archive</RowAction>

<RowActions label="Team actions">
  <RowAction href="/teams/1/edit">Edit</RowAction>
  <RowAction onClick={archive}>Archive</RowAction>
</RowActions>

<CrudEditor
  store={teamStore}
  blank={blankTeam}
  schema={teamBaseSchema}
  entity="Team"
  cancelHref="/teams"
  archive={{}}
  onCreated={(row) => navigate(`/teams/${row.id}/edit`)}
>
  {({ vm, vl }) => <TextField vm={vm} vl={vl} name="name" label="Name" />}
</CrudEditor>

<AssociationEditor
  store={associationStore}
  mode="add"
  blank={blankAssociation}
  entity="Supplier association"
  cancelHref="/suppliers"
  conflictField="supplierId"
  conflict={(row, all) => all.find((entry) => entry.supplierId === row.supplierId)}
  conflictMessage="That supplier is already attached."
  conflictRemovedMessage="It was attached before and removed — restore it instead."
>
  {({ vm, vl }) => <SelectField vm={vm} vl={vl} name="supplierId" label="Supplier" options={…} />}
</AssociationEditor>

<DeletionValidation
  dependencies={[
    { kind: "Projects", values: [{ title: "Launch plan", url: "/projects/1/edit" }] },
  ]}
  model="Team"
/>

<TextField vm={vm} vl={vl} name="name" label="Name" placeholder="Design" span="sm:col-span-2" />

<NumberField vm={vm} vl={vl} name="members" label="Members" hint="Commits 0 for an empty box" />

<SelectField
  vm={vm}
  vl={vl}
  name="parentId"
  label="Parent team"
  options={[{ value: 1, label: "Design" }, { value: 2, label: "Support" }]}
  placeholder="— none —"
/>

<CheckboxField vm={vm} vl={vl} name="archived" label="Is archived?" />

<TextareaField vm={vm} vl={vl} name="notes" label="Notes" rows={3} />

<FieldIssues vl={vl} name="name" />

// Or with the caller's own rendering, and the payload the issue carries:
<FieldIssues
  vl={vl}
  name="name"
  renderIssue={(issue, type) => <p>{type}: {issue.message}</p>}
/>

import { timeAgo } from "@spy4x/preact-crud"

timeAgo(Date.now() - 150 * 60_000)

import { formatTimestamp } from "@spy4x/preact-crud"

formatTimestamp("2026-01-15T09:05:00Z", { full: true, timeZone: "UTC" })
formatTimestamp("2026-01-15T09:05:00Z", { timeOnly: true, timeZone: "UTC" })
formatTimestamp(null)

import { listRows, rowsForStatus } from "@spy4x/preact-crud"

const match = (row, word) => row.name.toLowerCase().includes(word.toLowerCase())

rowsForStatus(store, "archived").map((row) => row.name)
listRows(store, "active", "launch", match).map((row) => row.name)

import { editorState } from "@spy4x/preact-crud"

const ready = { initialized: true, validation: {}, canChange: true, inProgress: false, blocked: 0 }

editorState(ready)
editorState({ ...ready, initialized: false })
editorState({ ...ready, blocked: 2 })

import { submitEditor } from "@spy4x/preact-crud"

const calls = []
const store = {
  create: (row) => (calls.push("create"), Promise.resolve({ error: null, result: row })),
  update: (id, row) => (calls.push(`update ${id}`), Promise.resolve({ error: null, result: row })),
}
const row = { id: 1, name: "Launch plan", deletedAt: null }

submitEditor({ mode: "add", store, value: row })
submitEditor({ mode: "edit", id: 1, store, value: row })
submitEditor({ mode: "edit", id: 1, store, value: row, blocked: 2 })

import { toggleArchiveState } from "@spy4x/preact-crud"

const dependents = () => [{ kind: "Tasks", values: [{ title: "Write copy", url: "/tasks/7" }] }]

const archiving = toggleArchiveState({ id: 1, deletedAt: null }, dependents)
archiving.deletedAt instanceof Date
archiving.blocked
toggleArchiveState({ id: 3, deletedAt: "2026-01-15T09:00:00Z" }, dependents)

import { commitNumber, fieldText, setField } from "@spy4x/preact-crud"
import { signal } from "@preact/signals"

const vm = signal({ name: "Launch plan", budget: null })
setField(vm, "budget", commitNumber(" 1200 "))

vm.value
fieldText(null)
commitNumber("12e")

import { CONFLICT, conflictIssue, isRestorable } from "@spy4x/preact-crud"

const rows = [
  { id: 1, name: "Paper supplier", deletedAt: null },
  { id: 2, name: "Ink supplier", deletedAt: "2026-02-01T00:00:00Z" },
]
const input = {
  rows,
  conflict: (row, all) => all.find((entry) => entry.name === row.name),
  field: "name",
  message: "Already attached.",
  removedMessage: "Removed earlier — restore it instead.",
}

conflictIssue({ id: 0, name: "Ink supplier", deletedAt: null }, {}, input).name[CONFLICT]
isRestorable(rows[1])

import { associationActions } from "@spy4x/preact-crud"

const calls = []
// The store's other members are left out; these two are all the actions call.
const store = {
  delete: (id) => (calls.push(`delete ${id}`), Promise.resolve({ error: null, result: null })),
  undelete: (id) => (calls.push(`undelete ${id}`), Promise.resolve({ error: null, result: null })),
}

const { remove, restore } = associationActions(store)
remove(4)
restore(4)

<Bars data={[{ label: "Starter", value: 41 }]} title="Orders by plan" />

<LineChart
  title="Orders per month"
  series={[{ name: "Orders", points: months.map((m) => ({ x: m.label, y: m.orders })) }]}
  yFormat={(value) => value.toFixed(0)}
  xStride={2}
/>

<DonutChart
  data={[{ label: "Organic", value: 52 }, { label: "Referral", value: 24, href: "/referral" }]}
  centerValue="12.4k"
  centerLabel="sessions"
  title="Traffic sources"
/>

<Kpi label="Uptime" value="99.95%" sub="last 30 days" tone="positive" />

<KpiGrid minWidth="12rem">
  <Kpi label="Uptime" value="99.95%" tone="positive" />
  <Kpi label="Errors" value={3} tone="negative" />
</KpiGrid>

<MetricPanel
  title="Revenue"
  unit="k€"
  error={error}
  actions={<ExportButtons />}
>
  <D3LineChart data={revenue.data} timeFrame={revenue.timeFrame} ariaLabel="Revenue, k€" />
</MetricPanel>

<D3LineChart
  data={revenue.data}
  timeFrame="hours"
  referenceValue={12}
  ignoreZeroes
  tickFormat={(value) => value.toFixed(1)}
  ariaLabel="Revenue, k€"
/>

<CompareChart
  range={range}
  data={revenue.data}
  timeFrame="hours"
  loadStats={(window) => api.stats({ ...window, kind: "revenue" })}
  onError={(message) => app.toast.error({ body: message })}
/>

import { extent } from "@spy4x/preact-charts"

[extent([3, 9, 1, Number.NaN]), extent([])]

import { niceScale, paddedDomain } from "@spy4x/preact-charts"

[paddedDomain(12, 87), niceScale(12, 87)]

import { niceStep, ticks } from "@spy4x/preact-charts"

({ step: niceStep(75), ticks: ticks(0, 100, 5) })

import { linearScale } from "@spy4x/preact-charts"

const y = linearScale([0, 100], [200, 0])
console.log([y(0), y(25), y(100)])

import { xLabelStride } from "@spy4x/preact-charts"

[xLabelStride(5), xLabelStride(30), xLabelStride(30, 6)]

import { barPercent } from "@spy4x/preact-charts"

[barPercent(30, 120), barPercent(150, 120), barPercent(5, 0)]

import { donutGeometry } from "@spy4x/preact-charts"

const ring = donutGeometry(
  [
    { label: "Desktop", value: 620 },
    { label: "Mobile", value: 310 },
    { label: "Tablet", value: 70 },
  ],
  { colors: ["#4f46e5", "#16a34a", "#f59e0b"] },
)
console.log({
  total: ring.total,
  slices: ring.segments.map((slice) => `${slice.label} ${slice.percent}`),
  gradient: ring.gradient,
})

import { DEFAULT_CHART_PALETTE, seriesColor } from "@spy4x/preact-charts"

({
  paletteSize: DEFAULT_CHART_PALETTE.length,
  first: seriesColor(0),
  third: seriesColor(2, ["#2563eb", "#dc2626"]),
})

import {
  DEFAULT_AXIS_COLOR,
  DEFAULT_D3_LINE_CHART_COLORS,
  DEFAULT_GRID_COLOR,
  DEFAULT_SURFACE_COLOR,
  DEFAULT_TEXT_COLOR,
  DEFAULT_TRACK_COLOR,
} from "@spy4x/preact-charts"

({
  axis: DEFAULT_AXIS_COLOR,
  grid: DEFAULT_GRID_COLOR,
  text: DEFAULT_TEXT_COLOR,
  surface: DEFAULT_SURFACE_COLOR,
  track: DEFAULT_TRACK_COLOR,
  d3Line: DEFAULT_D3_LINE_CHART_COLORS.line,
})

import { defaultTooltipFormat, formatTimeTick, TIME_FRAMES } from "@spy4x/preact-charts"

const at = new Date(2026, 2, 14, 9, 30)
console.log({
  ticks: TIME_FRAMES.map((frame) => `${frame}: ${formatTimeTick(at, frame)}`),
  tooltip: defaultTooltipFormat({ timeGroup: at, value: 42 }),
})

import { yDomainFor } from "@spy4x/preact-charts"

const points = [0, 8, 20, 14].map((value, hour) => ({ timeGroup: hour * 3_600_000, value }))
console.log([
  yDomainFor(points),
  yDomainFor(points, { ignoreZeroes: true }),
  yDomainFor(points, { referenceValue: 50 }),
])

import { assertD3Available, MISSING_D3_LINE_ERROR } from "@spy4x/preact-charts/d3-line-chart"

assertD3Available({ line: () => {} }) // a d3 with a line generator passes
let message = ""
try {
  assertD3Available({})
} catch (error) {
  message = (error as Error).message
}
console.log({ isTheExportedMessage: message === MISSING_D3_LINE_ERROR, message })

import { previousPeriod } from "@spy4x/preact-charts"

const week = { from: new Date("2026-03-08T00:00:00Z"), to: new Date("2026-03-15T00:00:00Z") }
console.log([previousPeriod(week), previousPeriod(week, 2)])

import { chartPayloadSchema, loadChartPayload, loadMetricSeries, timeSeriesPointSchema } from "@spy4x/preact-charts"
import { type } from "arktype"

const range = { from: new Date("2026-03-01T00:00:00Z"), to: new Date("2026-03-02T00:00:00Z") }
const asked: string[] = []
const loadStats = (period: typeof range) => {
  asked.push(`${period.from.toISOString()} → ${period.to.toISOString()}`)
  return Promise.resolve({ data: [{ timeGroup: "2026-03-01T00:00:00Z", value: 1200 }], timeFrame: "hours" })
}
void loadChartPayload(loadStats, range) // resolves to { payload, error }
void loadMetricSeries({ loadStats, range, scale: 0.001 }) // resolves to { data, timeFrame, error }
const rejected = chartPayloadSchema({ data: [], timeFrame: "weeks" })
console.log({
  asked,
  point: timeSeriesPointSchema({ timeGroup: "2026-03-01T00:00:00Z", value: 1200 }),
  rejected: rejected instanceof type.errors ? rejected.summary : rejected,
})

import { useMetricSeries } from "@spy4x/preact-charts"

// Outside the component: a new function on every render would reload on every render.
const loadStats = () => Promise.resolve({ data: [], timeFrame: "hours" })

// Inside a component:
const { data, timeFrame, error, isLoading } = useMetricSeries({
  loadStats,
  range: { from: new Date("2026-03-01T00:00:00Z"), to: new Date("2026-03-02T00:00:00Z") },
  enabled: false,
})
console.log({ data, timeFrame, error, isLoading })

import { useInView } from "@spy4x/preact-charts"

// Inside a component, before <div ref={ref}> has mounted:
const { ref, inView } = useInView<HTMLDivElement>()
console.log({ element: ref.current, inView })

import { createInViewObserver } from "@spy4x/preact-charts"

const log: unknown[] = []
const scope = globalThis as Record<string, unknown>
const original = scope.IntersectionObserver
scope.IntersectionObserver = class {
  constructor(private report: (entries: { isIntersecting: boolean }[]) => void, options: object) {
    log.push({ options })
  }
  observe(target: { id: string }) {
    log.push({ observe: target.id })
    this.report([{ isIntersecting: true }]) // the browser reports once the element is observed
  }
  disconnect() { log.push("disconnect") }
}
try {
  const chart = { id: "revenue-chart" } as unknown as Element
  const handle = createInViewObserver(chart, (visible) => log.push({ visible }), { rootMargin: "100px" })
  handle?.disconnect()
} finally {
  if (original === undefined) delete scope.IntersectionObserver
  else scope.IntersectionObserver = original
}
console.log(log)

<Map
  center={{ lat: 50, lng: 5 }}
  zoom={4}
  markers={[{ id: "depot", lat: 51.5, lng: -0.13, label: "London depot", status: "on" }]}
  onMarkerClick={(id) => select(id)}
  tileUrl="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
  attribution="© OpenStreetMap contributors"
/>

import { parseSort, serializeSort, toggleSort } from "@spy4x/preact-signals"

const rules = parseSort("name:asc", ["name", "size"], [])
const next = toggleSort(toggleSort(rules, "name"), "size")
serializeSort(next)

import { removeSortRule, type SortRule, sortRows } from "@spy4x/preact-signals"

const files = [
  { name: "notes.txt", size: 12 },
  { name: "photo.jpg", size: 2048 },
  { name: "draft.txt", size: null },
  { name: "archive.zip", size: 2048 },
]
const rules: SortRule<"name" | "size">[] = [
  { key: "size", direction: "desc" },
  { key: "name", direction: "asc" },
]
console.log({
  sorted: sortRows(files, rules).map((file) => file.name),
  withoutSize: removeSortRule(rules, "size"),
})

import { signal } from "@preact/signals"
import { resolveFilterValue, shouldPersistFilter } from "@spy4x/preact-signals"
import { filterWrite } from "@spy4x/preact-signals/use-url-filters"

const page = { signal: signal(1), urlParam: "page", initialValue: 1 }
console.log({
  read: [resolveFilterValue(page, "3"), resolveFilterValue(page, "abc"), resolveFilterValue(page, null)],
  persist: [shouldPersistFilter(page, 3), shouldPersistFilter(page, 1)],
  write: [filterWrite(page, 3), filterWrite(page, 1)],
})

import { filterSearch, restoredAddress } from "@spy4x/preact-signals/use-url-filters"

const search = filterSearch("?tab=files&page=3", [
  { urlParam: "page" },
  { urlParam: "status", value: "open" },
])
const after = { pathname: "/list", search: `?${search}`, hash: "" }
console.log({
  search,
  lostFragment: restoredAddress("#results", { ...after, href: `https://example.com/list?${search}` }),
  nothingLost: restoredAddress("", { ...after, href: `https://example.com/list?${search}` }),
})

import { signal } from "@preact/signals"
import { clearFilterFields } from "@spy4x/preact-signals/use-url-filters"

const status = signal("open")
const page = signal(4)
const before = { status: status.value, page: page.value }
clearFilterFields({
  status: { signal: status, urlParam: "status", initialValue: "" },
  page: { signal: page, urlParam: "page", initialValue: 1 },
})
console.log({ before, after: { status: status.value, page: page.value } })

import { signal } from "@preact/signals"
import { patchSignal } from "@spy4x/preact-signals"

const settings = signal({ pageSize: 20, density: "comfortable", showArchived: false })
patchSignal(settings, { density: "compact" })
settings.value

import { deleteMapEntry, setMapEntry } from "@spy4x/preact-signals"

const cart: ReadonlyMap<string, number> = new Map([["apples", 3]])
const added = setMapEntry(cart, "pears", 2)
const removed = deleteMapEntry(added, "apples")
console.log({ cart, added, removed })

import { createToastStore } from "@spy4x/preact-signals"

let count = 0
const toasts = createToastStore({ nextId: () => `toast-${++count}` })
toasts.success({ body: "Settings saved" })
const failed = toasts.error({ title: "Upload failed", body: "The file is over 10 MB", duration: 0 })
toasts.info({ body: "Two new comments" })
toasts.remove(failed)
toasts.list.value

import { createThemeStore, ThemeValue } from "@spy4x/preact-signals"

const saved = new Map([["theme", ThemeValue.DARK as string]])
const theme = createThemeStore({
  storage: { getItem: (key) => saved.get(key) ?? null, setItem: (key, value) => void saved.set(key, value) },
  media: () => ({ matches: false }), // the system asks for light
  apply: () => {}, // an app leaves this out, and the store toggles the page's `dark` class
})
const actual = [theme.actual.value]
theme.attach() // reads the stored preference: dark
actual.push(theme.actual.value)
theme.toggle()
actual.push(theme.actual.value)
theme.set(ThemeValue.SYSTEM)
actual.push(theme.actual.value)
theme.dispose()
console.log({ actual, preference: theme.preference.value, stored: saved.get("theme") })

import { CLIPBOARD_UNAVAILABLE, createClipboard } from "@spy4x/preact-signals"

const reported: string[] = []
const clipboard = createClipboard({ clipboard: null })
void clipboard.copy("https://example.com/report", {
  onError: (error) => reported.push((error as Error).message),
})
console.log({ reported, isTheExportedMessage: reported[0] === CLIPBOARD_UNAVAILABLE })

import { buildModelStore, RemoteEvent } from "@spy4x/preact-signals"
import { type } from "arktype"

const notes = buildModelStore({
  model: "note",
  endpoint: "/api/notes",
  schemas: {
    full: type({ id: "number", title: "string", deletedAt: "string | null" }),
    create: type({ title: "string > 0" }),
    update: type({ "title?": "string > 0" }),
  },
  fetch: () => Promise.reject(new Error("this example sends no requests")),
})
void notes.onWs([
  { id: 1, title: "Meeting agenda", deletedAt: null },
  { id: 2, title: "Old draft", deletedAt: "2026-01-05" },
], RemoteEvent.LIST)
void notes.create({ title: "" })
console.log({
  active: notes.list.nonDeleted.value.map((note) => note.title),
  archived: notes.list.deleted.value.map((note) => note.title),
  createError: notes.op.create.value.error?.message,
})

<input
  class="input"
  type="email"
  placeholder="you@example.com"
  value={email.value}
  onInput={(event) => email.value = event.currentTarget.value}
/>

<select class="select" value={role.value} onChange={(event) => role.value = event.currentTarget.value}>
  <option value="admin">Administrator</option>
  <option value="editor">Editor</option>
</select>

<textarea
  class="textarea"
  rows={3}
  placeholder="Anything the next person should know"
  value={notes.value}
  onInput={(event) => notes.value = event.currentTarget.value}
/>

<div class="grid gap-1.5">
  <label class="label" for="name">Name <span class="text-danger">*</span></label>
  <input id="name" class="input" aria-describedby="name-hint" value={name.value} />
  <p id="name-hint" class="text-xs text-muted">As it appears on the contract.</p>
</div>

<!-- the suffix placement: the label follows the control -->
<input id="ref" class="input" value="Ref 2024-0917" />
<label class="label" for="ref">Reference</label>

<label class="label" for="archived">
  <input
    id="archived"
    class="checkbox"
    type="checkbox"
    checked={archived.value}
    onChange={(event) => archived.value = event.currentTarget.checked}
  />
  Show archived rows
</label>

<fieldset>
  <legend class="label">Notification method</legend>
  <label class="label" for="sms">
    <input id="sms" class="radio" type="radio" name="channel" value="sms"
      checked={channel.value === "sms"}
      onChange={() => channel.value = "sms"} />
    Phone (SMS)
  </label>
</fieldset>

<div class="relative">
  <input class="input pr-12" type="search" placeholder="Search users" />
  <button class="btn-input-icon absolute inset-y-0 right-1.5 my-auto" type="button" aria-label="Search">
    <IconSearch class="size-4" />
  </button>
</div>

<div class="card">
  <div class="card-header">
    <p class="font-medium">Meter 4417</p>
    <span class="text-xs text-muted">online</span>
  </div>
  <div class="card-body">…</div>
  <div class="card-footer">
    <a class="link" href={meterHref}>Open the meter</a>
  </div>
</div>

<div class="scrollbar flex gap-3">
  {months.map((month) => (
    <span class="rounded-primary border border-subtle px-3 py-1 text-sm">{month}</span>
  ))}
</div>

<div class="page-layout">
  <p class="h2">Section</p>
  <ul class="list-ul">
    <li>Disc markers, inside, one step down in size.</li>
    <li><a class="link" href={reportHref}>A link that underlines itself</a></li>
  </ul>
</div>

<div class="kpi">
  <span class="kpi-label">Consumed</span>
  <span class="kpi-value">1 284</span>
  <span class="bar" style="width: 72%" />
</div>

<td class="num">1 284</td>

<span class="text-danger">text-danger</span>
<span class="bg-success rounded-primary px-2 py-1 text-xs text-white">bg-success</span>
<span class="border-control border px-2 py-1 text-xs">border-control</span>
<span class="bg-canvas border-subtle border px-2 py-1 text-xs">bg-canvas</span>

<html class="dark" data-theme="ink">
  <body class="theme-base">
    <nav style="background: var(--color-surface-rail)">…</nav>
  </body>
</html>

import { INK_CSS, PRESET_CSS, TOKENS_CSS } from "@spy4x/preact-theme"

[TOKENS_CSS, PRESET_CSS, INK_CSS].map((css) => css.length > 0)

import { cn } from "@spy4x/preact-cn"

cn("px-2 py-1 text-sm", false, "px-4")