@lickle/docs 0.0.0-dev.1

package/src/ui/components/LivePreview/Example.tsx

@@ -0,0 +1,104 @@
+import { createEffect, createSignal, onCleanup, Show } from 'solid-js'
+
+import type { Types } from '../../context/index.ts'
+
+import { Sandbox, type SandboxIsolate } from './Sandbox.tsx'
+
+import { firstCodeBlock, langOf } from '../../context/index.ts'
+import { CodeEditor } from '../Code/index.tsx'
+import { TagSection } from '../Comment.tsx'
+
+type ExampleTag = Types.CommentTagMap['@example']
+
+/** Executes already-compiled JS into the host; return a disposer to tear down. */
+export type ExampleRun = (src: string, host: HTMLElement) => void | (() => void)
+
+export type LiveExampleProps = {
+  tag: ExampleTag
+  run: ExampleRun
+  language?: string
+  isolate?: SandboxIsolate
+  readonly?: boolean
+  onError?: (err: unknown) => void
+}
+
+export const LiveExample = (props: LiveExampleProps) => {
+  const preview = useWithPreview(props)
+  return (
+    <TagSection tag={props.tag} description={props.tag.caption}>
+      <div class="rounded-lg border border-line">
+        <div class="p-4 bg-code-bg">
+          <CodeEditor
+            lang={props.language ?? langOf(preview.lang)}
+            readonly={props.readonly}
+            value={preview.value}
+            onChange={preview.onChange}
+          />
+        </div>
+        <div class="relative min-h-12">
+          <Sandbox class="border-t border-line p-4" isolate={props.isolate} ref={preview.onBind} />
+          <Show when={preview.error()}>
+            {(msg) => (
+              <div class="absolute inset-0 w-full h-full flex items-center justify-start p-4 text-xs text-red-500 border-t border-red-500/30 ">
+                <div class="flex gap-2">
+                  <span aria-hidden="true" class="select-none leading-5">
+                    ⚠
+                  </span>
+                  <pre class="overflow-x-auto whitespace-pre-wrap wrap-break-word font-mono leading-5">{msg()}</pre>
+                </div>
+              </div>
+            )}
+          </Show>
+        </div>
+      </div>
+    </TagSection>
+  )
+}
+
+const useWithPreview = (props: LiveExampleProps) => {
+  const block = firstCodeBlock(props.tag.code)
+
+  const [host, setHost] = createSignal<HTMLElement | null>(null)
+  const [code, setCode] = createSignal(block.code)
+  const [error, setError] = createSignal<string>()
+
+  let dispose: void | (() => void)
+  const teardown = () => {
+    try {
+      if (typeof dispose === 'function') dispose()
+      host()?.replaceChildren()
+    } catch (err) {
+      console.error('[LiveExample] teardown failed', err)
+    }
+    dispose = undefined
+  }
+
+  createEffect(() => {
+    const src = code()
+    const target = host()
+    if (!target) return
+    teardown()
+    try {
+      dispose = props.run(src, target)
+      setError(undefined)
+    } catch (err) {
+      target.replaceChildren()
+      setError(messageOf(err))
+      if (props.onError) props.onError(err)
+      else console.error('[LiveExample] failed to run', err)
+    }
+  })
+  onCleanup(teardown)
+
+  const onChange = (code: string) => setCode(code)
+
+  const value = () => code()
+  const onBind = (h: HTMLElement | null) => setHost(h)
+
+  return { onBind, onChange, value, error, lang: block.lang }
+}
+
+const messageOf = (err: unknown): string => {
+  if (err instanceof Error) return err.message || err.name
+  return String(err)
+}

package/src/ui/components/LivePreview/Sandbox.tsx

@@ -0,0 +1,36 @@
+import { onMount, onCleanup } from 'solid-js'
+
+/** Isolation level for the render container. Only `inline` ships today. */
+export type SandboxIsolate = 'inline'
+
+/** The element examples render into, plus its teardown. */
+export type Container = { target: HTMLElement; dispose: () => void; reset: () => void }
+
+/** Builds a {@link Container} inside `root`. Add new strategies to {@link strategies}. */
+export type ContainerStrategy = (root: HTMLElement) => Container
+
+/** Plain child `div` — no isolation. */
+const inline: ContainerStrategy = (root) => {
+  const target = document.createElement('div')
+  root.appendChild(target)
+  return { target, dispose: () => target.remove(), reset: () => target.replaceChildren() }
+}
+
+// Shadow DOM / iframe strategies can be added here later (iframe will need an
+// async/ready variant since its document isn't available synchronously).
+const strategies: Record<SandboxIsolate, ContainerStrategy> = { inline }
+
+/**
+ * A contained render location. Resolves a target element via the chosen
+ * isolation strategy and hands it back through `ref` once mounted.
+ */
+export const Sandbox = (props: { isolate?: SandboxIsolate; class?: string; ref?: (target: HTMLElement) => void }) => {
+  let root!: HTMLDivElement
+  onMount(() => {
+    const strategy = strategies[props.isolate ?? 'inline'] ?? inline
+    const { target, dispose } = strategy(root)
+    props.ref?.(target)
+    onCleanup(dispose)
+  })
+  return <div ref={root} class={props.class} />
+}

package/src/ui/components/LivePreview/index.ts

@@ -0,0 +1,3 @@
+export * from './transform.ts'
+export * from './Sandbox.tsx'
+export * from './Example.tsx'

package/src/ui/components/LivePreview/transform.ts

@@ -0,0 +1,28 @@
+import { transform as sucraseTransform, type Transform } from 'sucrase'
+
+/** Options forwarded to `sucrase.transform`, plus import handling. */
+export type CompileOptions = {
+  /** Sucrase transforms to apply. Default `['typescript', 'jsx']`. */
+  transforms?: Transform[]
+  /** JSX factory, e.g. `'h'`. Left to sucrase's default when unset. */
+  jsxPragma?: string
+  /** JSX fragment factory, e.g. `'Fragment'`. */
+  jsxFragmentPragma?: string
+  /** Production JSX output (no `__source`/`__self`). Default `true`. */
+  production?: boolean
+}
+
+/**
+ * Transform a TS/JSX snippet into runnable JS. Framework-agnostic: point
+ * `jsxPragma` / `jsxFragmentPragma` at whatever runtime you inject when
+ * executing the result.
+ */
+export const transform = (src: string, options: CompileOptions = {}): string => {
+  const code = sucraseTransform(src, {
+    transforms: options.transforms ?? ['typescript', 'jsx'],
+    jsxPragma: options.jsxPragma,
+    jsxFragmentPragma: options.jsxFragmentPragma,
+    production: options.production ?? true,
+  }).code
+  return code
+}

package/src/ui/components/Markdown.tsx

@@ -0,0 +1,16 @@
+import { createMemo, Show } from 'solid-js'
+import cn from '@lickle/cn'
+
+import { useMarkup } from '../context/index.ts'
+
+export const Markdown = (props: { source: string; class?: string }) => {
+  const markup = useMarkup()
+  const html = createMemo(() => markup.marked()?.parse(props.source, { async: false }))
+  return <Show when={html()}>{(h) => <div class={cn('markdown', props.class)} innerHTML={h()} />}</Show>
+}
+
+Markdown.Inline = (props: { source?: string; class?: string }) => {
+  const markup = useMarkup()
+  const html = createMemo(() => markup.marked()?.parse(props.source ?? '', { async: false }))
+  return <Show when={html()}>{(h) => <div class={cn('markdown-tight', props.class)} innerHTML={h()} />}</Show>
+}

package/src/ui/components/Page.tsx

@@ -0,0 +1,162 @@
+import { For, Show, createMemo } from 'solid-js'
+import { A } from '@solidjs/router'
+
+import { createSlot, useProject, type Types } from '../context/index.ts'
+import { type ReferenceRow, useReferences } from '../hooks/index.ts'
+import { labelOf, pluralLabel, groupOrder } from '../util/kind.ts'
+import { commentSummaryText } from '../util/comment.ts'
+
+import { Declaration } from './Declaration.tsx'
+import { Breadcrumb } from './Breadcrumb.tsx'
+import { Markdown } from './Markdown.tsx'
+import { Type } from './Type.tsx'
+
+type PageProps = { decl: Types.Declaration; route: Types.RouteNode<'declaration' | 'module'> }
+
+export const Page = createSlot('page', (props) => (
+  <article>
+    <PageHeader {...props} />
+    <Declaration decl={props.decl} />
+    <Children route={props.route} />
+    <References id={props.decl.id} />
+  </article>
+))
+
+/** Renders a markdown page — its `content` parsed inline. */
+export const MarkdownPage = createSlot('page.markdown', (props) => (
+  <article>
+    <Markdown source={props.route.page.content} />
+  </article>
+))
+
+export const PageHeader = createSlot('page.header', (props: PageProps) => (
+  <header class="mb-5">
+    <Breadcrumb id={props.decl.id} />
+    <div class="flex items-baseline gap-3 flex-wrap">
+      <h1 class="text-2xl font-semibold tracking-tight font-mono">{props.route.label}</h1>
+      <Type.KindLabel kind={props.decl.kind} />
+      <Show when={props.decl.comment?.tags?.some((t: { tag: string }) => t.tag === '@deprecated')}>
+        <span class="text-xs uppercase tracking-wider text-mute">· deprecated</span>
+      </Show>
+    </div>
+    <Source sources={props.decl.sources} />
+  </header>
+))
+
+/** Stock source-location renderer. Replaceable via `slots.source`. */
+export const Source = createSlot('page.source', (props: { sources?: Types.Source[] }) => {
+  const project = useProject()
+  return (
+    <Show when={props.sources?.[0]}>
+      {(s) => {
+        const link = project().sourceLink(s())
+        const text = `${s().file}:${s().line}`
+        if (link) {
+          return (
+            <a href={link} class="text-xs text-mute mt-2 font-mono">
+              {text}
+            </a>
+          )
+        }
+        return <div class="text-xs text-mute mt-2 font-mono">{text}</div>
+      }}
+    </Show>
+  )
+})
+
+type ChildRoute = Types.RouteNode<'declaration' | 'module'>
+type ChildRow = { route: ChildRoute; decl?: Types.Declaration; kind: string; summary: string }
+
+/** Child pages of a module / namespace, grouped by kind and linked from the route tree. */
+const Children = (props: { route: ChildRoute }) => {
+  const project = useProject()
+  const groups = createMemo(() => groupChildren(project(), props.route.children))
+  return (
+    <For each={groups()}>
+      {(group) => (
+        <section class="mt-8">
+          <h2 class="text-sm font-semibold mb-3 pb-1.5 border-b border-line capitalize">{group.title}</h2>
+          <ul class="space-y-3">
+            <For each={group.items}>{(row) => <ChildRowView row={row} />}</For>
+          </ul>
+        </section>
+      )}
+    </For>
+  )
+}
+
+const ChildRowView = (props: { row: ChildRow }) => (
+  <li>
+    <div class="flex items-baseline gap-2.5 min-w-0">
+      <Type.KindBadge kind={props.row.kind} class="w-3.5 shrink-0" />
+      <A href={`/${props.row.route.slug}`} class="font-mono font-semibold text-sm hover:opacity-70">
+        {props.row.route.label}
+      </A>
+      <Show when={props.row.decl}>{(d) => <Signature decl={d()} />}</Show>
+    </div>
+    <Show when={props.row.summary}>
+      <p class="text-sm text-mute mt-1 pl-6 line-clamp-2">{props.row.summary}</p>
+    </Show>
+  </li>
+)
+
+/** A terse inline type cue next to a member name (function params / variable type). */
+const Signature = (props: { decl: Types.Declaration }) => {
+  const d = props.decl
+  if (d.kind === 'function' && d.signatures[0])
+    return (
+      <span class="font-mono text-sm text-mute min-w-0 truncate">
+        <Type.SignatureExpr sig={d.signatures[0]} />
+      </span>
+    )
+  if (d.kind === 'variable')
+    return (
+      <span class="font-mono text-sm text-mute min-w-0 truncate">
+        : <Type type={d.type} />
+      </span>
+    )
+  return null
+}
+
+/** Bucket child routes by declaration kind, ordered by the canonical group order. */
+const groupChildren = (project: Types.Project, children: ChildRoute[]): { title: string; items: ChildRow[] }[] => {
+  const buckets = new Map<string, ChildRow[]>()
+  for (const route of children) {
+    const decl = project.byId(route.page.id)
+    const kind = decl?.kind ?? 'module'
+    const title = pluralLabel(kind)
+    const arr = buckets.get(title) ?? []
+    arr.push({ route, decl, kind, summary: commentSummaryText(decl?.comment) })
+    buckets.set(title, arr)
+  }
+  return [...buckets.entries()]
+    .sort(([a], [b]) => groupOrder(a) - groupOrder(b) || a.localeCompare(b))
+    .map(([title, items]) => ({ title, items: items.sort((a, b) => a.route.label.localeCompare(b.route.label)) }))
+}
+
+export const References = createSlot('page.references', (props: { id: number }) => {
+  const rows = useReferences(() => props.id)
+
+  return (
+    <Show when={rows().length}>
+      <section class="mt-10 lk-references">
+        <h2 class="font-semibold text-xl mb-4 pb-2 border-b border-line">Used in</h2>
+        <ul class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 items-baseline">
+          <For each={rows()}>{(r) => <ReferenceRowView row={r} />}</For>
+        </ul>
+      </section>
+    </Show>
+  )
+})
+
+const ReferenceRowView = (props: { row: ReferenceRow }) => (
+  <li class="contents">
+    <span class="text-xs uppercase tracking-wider text-mute">{labelOf(props.row.decl.kind)}</span>
+    <A href={`/${props.row.slug}`} class="font-mono hover:opacity-70 min-w-0 wrap-break-word">
+      <Show when={props.row.module}>
+        <span class="text-mute">{props.row.module}.</span>
+      </Show>
+      <span class="font-medium">{props.row.name}</span>
+    </A>
+  </li>
+)

package/src/ui/components/References.tsx

@@ -0,0 +1,34 @@
+// import { For, Show } from 'solid-js'
+// import { A } from '@solidjs/router'
+
+// import { useReferences, type ReferenceRow } from '../hooks/index.ts'
+// import { createSlot } from '../theme/slots/slot.tsx'
+// import { labelOf } from '../util/kind.ts'
+
+// export const References = createSlot('references', (props: { id: number }) => {
+//   const rows = useReferences(() => props.id)
+
+//   return (
+//     <Show when={rows().length}>
+//       <section class="mt-10 lk-references">
+//         <h2 class="font-semibold text-xl mb-4 pb-2 border-b border-line">Used in</h2>
+//         <ul>
+//           <For each={rows()}>{(r) => <ReferenceRowView row={r} />}</For>
+//         </ul>
+//       </section>
+//     </Show>
+//   )
+// })
+
+// const ReferenceRowView = (props: { row: ReferenceRow }) => (
+//   <li>
+//     <span class="kind">{labelOf(props.row.decl.kind)}</span>
+//     <A href={`/r/${props.row.slug}`} class="symbol font-mono hover:opacity-70">
+//       <Show when={props.row.module}>
+//         <span class="text-mute">{props.row.module}.</span>
+//       </Show>
+//       <span class="font-medium">{props.row.name}</span>
+//     </A>
+//     <span class="summary">{props.row.summary}</span>
+//   </li>
+// )

package/src/ui/components/SearchPalette.tsx

@@ -0,0 +1,266 @@
+import { For, Show, createEffect, createMemo, createResource, createSignal, on, onCleanup } from 'solid-js'
+import { useNavigate } from '@solidjs/router'
+
+import { useProject, type Types } from '../context/index.ts'
+import { type SearchHit } from '../util/search.ts'
+import { useSearch } from '../hooks/index.ts'
+import { type Kind } from '../util/kind.ts'
+import { Type } from './Type.tsx'
+
+const DEBOUNCE_MS = 80
+const DEFAULT_LIMIT = 12
+
+export const SearchPalette = (props: { open: () => boolean; onClose: () => void }) => {
+  const navigate = useNavigate()
+  const search = useSearch()
+  const project = useProject()
+
+  const [engine] = createResource(props.open, async (isOpen) => (isOpen ? await search() : undefined))
+
+  const [term, setTerm] = createSignal('')
+  const [debounced, setDebounced] = createSignal('')
+  const [highlight, setHighlight] = createSignal(0)
+  let inputRef!: HTMLInputElement
+
+  createEffect(() => {
+    const t = term()
+    const timer = setTimeout(() => setDebounced(t), DEBOUNCE_MS)
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  createEffect(
+    on(props.open, (isOpen) => {
+      if (!isOpen) return
+      setTerm('')
+      setDebounced('')
+      setHighlight(0)
+      queueMicrotask(() => inputRef?.focus())
+    }),
+  )
+
+  const [hits] = createResource(
+    () => [engine(), debounced()] as const,
+    async ([e, t]) => (e ? await e.query(t) : []),
+  )
+
+  // Before the user types, suggest the first module's entries so the palette
+  // opens with something to browse instead of an empty box.
+  const firstModule = createMemo(() => project().routes.find((r) => r.sidebar && r.page.kind !== 'markdown'))
+  const suggestions = createMemo<SearchHit[]>(() => {
+    const mod = firstModule()
+    return mod ? childHits(project(), mod).slice(0, DEFAULT_LIMIT) : []
+  })
+
+  const hasTerm = () => debounced().trim().length > 0
+  const list = createMemo<SearchHit[]>(() => (hasTerm() ? (hits() ?? []) : suggestions()))
+
+  createEffect(
+    on(list, (l) => {
+      if (highlight() >= l.length) setHighlight(0)
+    }),
+  )
+
+  const choose = (hit: SearchHit) => {
+    navigate(`/${hit.slug}`)
+    props.onClose()
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const l = list()
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (l.length) setHighlight((i) => (i + 1) % l.length)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      if (l.length) setHighlight((i) => (i - 1 + l.length) % l.length)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const hit = l[highlight()]
+      if (hit) choose(hit)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      props.onClose()
+    }
+  }
+
+  return (
+    <Show when={props.open()}>
+      <div
+        class="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm flex items-start justify-center p-4"
+        onClick={() => props.onClose()}
+        role="presentation"
+      >
+        <div
+          class="w-full max-w-xl mt-[12vh] bg-bg border border-line rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[70vh]"
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-label="Search"
+        >
+          <div class="flex items-center gap-3 px-4 py-3.5 border-b border-line">
+            <SearchGlyph class="text-mute shrink-0" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={term()}
+              onInput={(e) => setTerm(e.currentTarget.value)}
+              onKeyDown={onKeyDown}
+              placeholder="Search functions, types, classes…"
+              class="flex-1 bg-transparent outline-none text-[0.95rem] placeholder:text-mute"
+              autocomplete="off"
+              spellcheck={false}
+            />
+            <Kbd>esc</Kbd>
+          </div>
+
+          <Show when={list().length} fallback={<EmptyState loading={engine.loading} term={debounced()} />}>
+            <Show when={!hasTerm() && firstModule()}>
+              {(mod) => (
+                <p class="px-5 pt-3 pb-1 text-[0.7rem] uppercase tracking-wider font-semibold text-mute">
+                  {mod().label}
+                </p>
+              )}
+            </Show>
+            <ul class="flex-1 overflow-y-auto p-2" role="listbox">
+              <For each={list()}>
+                {(hit, i) => (
+                  <li
+                    role="option"
+                    aria-selected={i() === highlight()}
+                    class="group flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer scroll-mt-2"
+                    classList={{ 'bg-hover': i() === highlight() }}
+                    onMouseEnter={() => setHighlight(i())}
+                    onClick={() => choose(hit)}
+                  >
+                    <span
+                      class="flex items-center justify-center w-6 h-6 rounded-md border border-line bg-hover/50 shrink-0"
+                      classList={{ 'border-accent/40': i() === highlight() }}
+                    >
+                      <Type.KindBadge kind={hit.kind} class="w-3.5" />
+                    </span>
+                    <span class="font-mono font-semibold text-sm shrink-0">{hit.name}</span>
+                    <Show when={hit.qualified && hit.qualified !== hit.name}>
+                      <span class="font-mono text-xs text-mute truncate">{hit.qualified}</span>
+                    </Show>
+                    <Show when={hit.file}>
+                      <span class="font-mono text-[0.7rem] text-mute truncate ml-auto pl-3 opacity-70">{hit.file}</span>
+                    </Show>
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      class="shrink-0 text-mute transition-opacity"
+                      classList={{ 'opacity-0': i() !== highlight(), 'opacity-100': i() === highlight() }}
+                      aria-hidden="true"
+                    >
+                      <path d="M5 12h14M13 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
+
+          <div class="flex items-center gap-4 px-4 py-2 border-t border-line text-[0.7rem] text-mute">
+            <span class="flex items-center gap-1.5">
+              <Kbd>↑</Kbd>
+              <Kbd>↓</Kbd>
+              <span>navigate</span>
+            </span>
+            <span class="flex items-center gap-1.5">
+              <Kbd>↵</Kbd>
+              <span>open</span>
+            </span>
+            <Show when={list().length}>
+              <span class="ml-auto tabular-nums">
+                {list().length} result{list().length === 1 ? '' : 's'}
+              </span>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+/** Map a route's direct children into search-hit rows for the default listing. */
+const childHits = (project: Types.Project, route: Types.RouteNode): SearchHit[] => {
+  const out: SearchHit[] = []
+  for (const child of route.children) {
+    if (child.page.kind === 'markdown') continue
+    const decl = project.byId(child.page.id)
+    out.push({
+      name: child.label,
+      qualified: child.page.qualified,
+      kind: (decl?.kind ?? 'module') as Kind,
+      slug: child.slug,
+      file: decl?.sources?.[0]?.file ?? '',
+    })
+  }
+  return out
+}
+
+const EmptyState = (props: { loading: boolean; term: string }) => (
+  <div class="flex-1 flex flex-col items-center justify-center text-center gap-3 px-6 py-16">
+    <Show
+      when={!props.loading}
+      fallback={
+        <>
+          <Spinner />
+          <p class="text-sm text-mute">Building search index…</p>
+        </>
+      }
+    >
+      <div class="flex items-center justify-center w-12 h-12 rounded-full bg-hover text-mute">
+        <SearchGlyph size={22} />
+      </div>
+      <Show
+        when={props.term}
+        fallback={
+          <>
+            <p class="text-sm font-medium text-fg">Search the API</p>
+            <p class="text-xs text-mute max-w-xs leading-relaxed">
+              Jump to any function, type, class or interface by name.
+            </p>
+          </>
+        }
+      >
+        <p class="text-sm font-medium text-fg">
+          No matches for <span class="font-mono">“{props.term}”</span>
+        </p>
+        <p class="text-xs text-mute">Try a shorter or different term.</p>
+      </Show>
+    </Show>
+  </div>
+)
+
+const Kbd = (props: { children: any }) => (
+  <kbd class="font-mono text-[0.65rem] text-mute bg-hover border border-line rounded px-1.5 py-0.5 leading-none">
+    {props.children}
+  </kbd>
+)
+
+const SearchGlyph = (props: { class?: string; size?: number }) => (
+  <svg
+    width={props.size ?? 16}
+    height={props.size ?? 16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    class={props.class}
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5" stroke-linecap="round" />
+  </svg>
+)
+
+const Spinner = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="animate-spin text-mute" aria-hidden="true">
+    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" class="opacity-25" />
+    <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+  </svg>
+)