@nexub/mcp 0.0.0-stage → 1.8.0

package/dist/skill/references/components/bento-grid.md

@@ -0,0 +1,42 @@
+# Bento Grid
+
+A grid of card tiles in mixed sizes. Responds to its own width: 1 column, 2 at 480px, 4 at 768px.
+
+- Package: `@nexub/patterns` · Category: Layout · Status: beta
+- Import: `import { BentoGrid } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/bento-grid
+
+## When to use
+
+- Overview pages where a few items deserve more room than the rest.
+
+## When not to use
+
+- Lists the user scans in order: dense packing can move tiles out of reading order.
+- Equal-weight items: use Grid.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `BentoGrid children` (required) | `ReactNode` |  | `BentoTile`s. Dense packing back-fills gaps left by large tiles, so visual order can differ from source order. |
+| `size` | `'1x1' \| '2x1' \| '1x2' \| '2x2'` | `'1x1'` | Tile span, columns × rows. Two-wide spans apply from 2 columns up. |
+| `...Card props` | `CardProps` |  | A tile is a surface Card (`variant` is fixed); `tone`, `surface` and `effect` pass through. |
+
+## Example: Dashboard
+
+```tsx
+<BentoGrid>
+  <BentoTile size="2x2">
+    <h3 className="text-title-sm">Revenue, last 7 days</h3>
+    <RevenueChart />
+  </BentoTile>
+  <BentoTile><StatTile label="Active users" value="12,480" /></BentoTile>
+  <BentoTile><StatTile label="Conversion" value="3.2%" /></BentoTile>
+  <BentoTile size="2x1">3 invoices awaiting approval.</BentoTile>
+  <BentoTile><StatTile label="Churn" value="0.8%" /></BentoTile>
+  <BentoTile><StatTile label="NPS" value="61" /></BentoTile>
+</BentoGrid>
+```
+
+Related: [card](card.md), [stat-card](stat-card.md)

package/dist/skill/references/components/box.md

@@ -0,0 +1,35 @@
+# Box
+
+Generic container primitive with style token props.
+
+- Package: `@nexub/react` · Category: Layout · Status: stable
+- Import: `import { Box } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/box
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `padding` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` |  | Padding applied to all sides using design tokens. |
+| `background` | `string` |  | Background color CSS value or token. |
+| `radius` | `string` |  | Border radius CSS value or token. |
+| `asChild` | `boolean` |  | Merges props onto the immediate child element (Radix Slot). |
+
+## Example: Default
+
+```tsx
+<Box padding="md" style={{ background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-md)' }}>
+  Content inside a Box
+</Box>
+```
+
+## Example: Nested
+
+```tsx
+<Box padding="lg" style={{ background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-lg)' }}>
+  <Heading size="h4">Section title</Heading>
+  <Box padding="sm" style={{ background: 'var(--color-bg-default)', borderRadius: 'var(--radius-md)', marginTop: '8px' }}>
+    <Text>Nested box content</Text>
+  </Box>
+</Box>
+```

package/dist/skill/references/components/breadcrumb.md

@@ -0,0 +1,61 @@
+# Breadcrumb
+
+Hierarchical navigation trail showing page location.
+
+- Package: `@nexub/react` · Category: Navigation · Status: stable
+- Import: `import { Breadcrumb } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/breadcrumb
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `Breadcrumb.Root aria-label` | `string` | `'breadcrumb'` | Accessible label for the nav landmark. |
+| `Breadcrumb.Link href` | `string` |  | URL the breadcrumb link navigates to. |
+| `Breadcrumb.Link asChild` | `boolean` | `false` | Merges props onto the immediate child element, useful for router Link components. |
+| `Breadcrumb.Separator children` | `React.ReactNode` |  | Custom separator element. Defaults to a chevron icon. |
+| `Breadcrumb.Ellipsis aria-label` | `string` | `'More'` | Accessible label for the ellipsis element used to collapse long trails. |
+
+## Example: Default
+
+```tsx
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Page>Button</Breadcrumb.Page>
+    </Breadcrumb.Item>
+  </Breadcrumb.List>
+</Breadcrumb.Root>
+```
+
+## Example: With ellipsis
+
+```tsx
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Ellipsis />
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/components/navigation">Navigation</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+    </Breadcrumb.Item>
+  </Breadcrumb.List>
+</Breadcrumb.Root>
+```

package/dist/skill/references/components/button-group.md

@@ -0,0 +1,43 @@
+# Button Group
+
+Groups related buttons together with optional attachment and orientation.
+
+- Package: `@nexub/react` · Category: Actions · Status: stable
+- Import: `import { ButtonGroup } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/button-group
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Lays out child buttons horizontally or vertically. |
+| `attached` | `boolean` | `false` | Removes gap and merges borders between adjacent buttons. |
+
+## Example: Default
+
+```tsx
+<ButtonGroup>
+  <Button variant="primary">Save</Button>
+  <Button variant="outline">Cancel</Button>
+</ButtonGroup>
+```
+
+## Example: Attached
+
+```tsx
+<ButtonGroup attached>
+  <Button variant="outline">Left</Button>
+  <Button variant="outline">Center</Button>
+  <Button variant="outline">Right</Button>
+</ButtonGroup>
+```
+
+## Example: Vertical
+
+```tsx
+<ButtonGroup orientation="vertical">
+  <Button variant="outline">Option A</Button>
+  <Button variant="outline">Option B</Button>
+  <Button variant="outline">Option C</Button>
+</ButtonGroup>
+```

package/dist/skill/references/components/button.md

@@ -0,0 +1,118 @@
+# Button
+
+Triggers an action or event. Supports multiple variants, sizes, and semantic tones.
+
+- Package: `@nexub/react` · Category: Actions · Status: stable
+- Import: `import { Button } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/button
+
+## When to use
+
+- Triggering a primary or secondary action (submit, save, confirm)
+- Navigating users to another page or step in a flow
+- Opening a dialog, drawer, or modal overlay
+- Destructive actions that need a visible, labelled control
+
+## When not to use
+
+- Inline text navigation — use a Link instead
+- Icon-only controls — use IconButton for touch target compliance
+- Selecting among multiple options — use ToggleGroup or SegmentedControl
+- Passive information display with no action
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `'filled' \| 'tonal' \| 'outlined' \| 'text' \| 'glass' \| 'subtle' \| 'link' \| 'destructive' \| 'accent'` | `'primary'` | Visual style of the button. Legacy aliases still work: primary = filled, secondary = tonal, outline = outlined, ghost = text. |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Control height and padding. |
+| `status` | `'idle' \| 'loading' \| 'success' \| 'error'` | `'idle'` | Async feedback (beta, 1.7.0). `loading` shows a spinner and blocks clicks but keeps focus; `success` draws a check; `error` shakes once. The label stays in flow, so the width holds. |
+| `loading` | `boolean` | `false` | Alias for `status="loading"`. |
+| `loadingLabel` | `string` | `'Loading'` | Announced when `status` becomes `loading`. |
+| `successLabel` | `string` | `'Done'` | Announced on `success`. When set, it also replaces the visible label (with a check) instead of showing the check alone. |
+| `errorLabel` | `string` | `'Something went wrong'` | Announced on `error`. |
+| `disabled` | `boolean` | `false` | Disables the button. |
+| `fullWidth` | `boolean` | `false` | Stretches the button to fill its container. |
+| `leadingIcon` | `React.ReactNode` |  | Icon rendered before the label. |
+| `trailingIcon` | `React.ReactNode` |  | Icon rendered after the label. |
+| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  | Semantic colour tone — overrides the variant colour with a semantic palette. |
+| `asChild` | `boolean` | `false` | Merges props onto the immediate child element (Radix Slot). `status` and `loading` have no effect with `asChild`. |
+
+## Example: Default
+
+```tsx
+<Button variant="primary">Click me</Button>
+```
+
+## Example: Variants
+
+```tsx
+<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+  <Button variant="primary">Primary</Button>
+  <Button variant="outline">Outline</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button variant="subtle">Subtle</Button>
+  <Button variant="link">Link</Button>
+</div>
+```
+
+## Example: Sizes
+
+```tsx
+<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+  <Button size="xs" variant="primary">XSmall</Button>
+  <Button size="sm" variant="primary">Small</Button>
+  <Button size="md" variant="primary">Medium</Button>
+  <Button size="lg" variant="primary">Large</Button>
+</div>
+```
+
+## Example: States
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <Button variant="primary" loading>Loading</Button>
+  <Button variant="outline" disabled>Disabled</Button>
+</div>
+```
+
+## Example: Async
+
+Drive `status` from the request. Each click here moves to the next status.
+
+```tsx
+function SaveButton() {
+  const [status, setStatus] = React.useState<ButtonStatus>('idle');
+
+  async function save() {
+    setStatus('loading');
+    try {
+      await saveProfile();
+      setStatus('success');
+    } catch {
+      setStatus('error');
+    }
+  }
+
+  return (
+    <Button status={status} loadingLabel="Saving" successLabel="Saved" errorLabel="Couldn't save" onClick={save}>
+      Save
+    </Button>
+  );
+}
+```
+
+## Accessibility
+
+- Roles: button
+- `Space`: Activates the focused button.
+- `Enter`: Activates the focused button.
+- `Tab`: Moves focus to the button in document order.
+- Receives focus in document order; `disabled` removes it from the tab sequence.
+- Visible focus ring uses `--color-border-focus` and meets WCAG 2.4.7 contrast.
+- Announces the visible label plus the implicit "button" role.
+- While loading the button sets `aria-busy` and `aria-disabled` (not `disabled`), so focus stays on it and clicks are ignored.
+- A button with `status` or `loading` renders a polite `role="status"` region next to it that announces `loadingLabel`, `successLabel` or `errorLabel` as the status changes.
+- Pair icon-only triggers with `IconButton` for a 44×44 touch target.
+
+Related: [icon-button](icon-button.md), [button-group](button-group.md), [link](link.md)

package/dist/skill/references/components/callout.md

@@ -0,0 +1,27 @@
+# Callout
+
+> **Deprecated.** Do not use in new code. Deprecated — use Alert. Highlighted content block for tips, warnings, or notes.
+
+- Package: `@nexub/react` · Category: Feedback · Status: deprecated
+- Import: `import { Callout } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/callout
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  | Semantic colour tone of the callout. |
+| `title` | `string` |  | Bold title rendered at the top of the callout. |
+| `icon` | `ReactNode` |  | Custom icon rendered beside the title. |
+
+## Example: Default
+
+```tsx
+<Callout tone="warning" title="Before you continue">Deleting this record is permanent and cannot be undone.</Callout>
+```
+
+## Example: Info
+
+```tsx
+<Callout tone="info">Use token names instead of raw hex values for consistent theming.</Callout>
+```

package/dist/skill/references/components/card.md

@@ -0,0 +1,74 @@
+# Card
+
+Surface container for grouping related content. Supports flat, surface, and interactive variants.
+
+- Package: `@nexub/react` · Category: Layout · Status: stable
+- Import: `import { Card } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/card
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `'flat' \| 'surface' \| 'interactive'` | `'flat'` | `interactive` lifts 2px on hover (spatial spring, elevation 1 → 2), sinks to 0.99 on press and adds a state layer. Use it for cards that are links or buttons. |
+| `effect` | `'none' \| 'sheen'` | `'none'` | Opt-in. `sheen` is a soft light that follows the pointer, with a brighter rim near the edge. Off for touch, reduced motion and reduced transparency. |
+| `tone` | `ToneValue` | `undefined` | Applies a semantic left-border accent. |
+| `asChild` | `boolean` | `false` | Merges props onto the immediate child element. |
+| `surface` | `'solid' \| 'glass'` | `'solid'` | Liquid-glass material treatment — see Foundations → Materials. |
+| `CardLink` | `AnchorHTMLAttributes & { asChild?: boolean }` |  | Put it around the card title to make the whole card one link. Its ::after covers the card and the card shows the focus ring. Give other controls inside the card `relative z-[1]`. Use `asChild` for a router link. |
+
+## Example: Default
+
+```tsx
+<Card>
+  <Heading level={3} size="h5">Card title</Heading>
+  <Text size="body-sm" tone="muted">Card description goes here.</Text>
+</Card>
+```
+
+## Example: Variants
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+  <Card variant="flat"><Text size="body-sm">Flat</Text></Card>
+  <Card variant="surface"><Text size="body-sm">Surface (elevated)</Text></Card>
+  <Card variant="interactive"><Text size="body-sm">Interactive (hover)</Text></Card>
+</div>
+```
+
+## Example: Card link
+
+The whole card is one link named by its title. The button sits above the link with `relative z-[1]`.
+
+```tsx
+<Card variant="interactive" className="p-4">
+  <Heading level={3} size="h5">
+    <CardLink href="/projects/atlas">Atlas</CardLink>
+  </Heading>
+  <Text size="body-sm" tone="muted">Updated 2 hours ago</Text>
+  <Button size="sm" variant="text" className="relative z-[1]" onClick={star}>
+    Star
+  </Button>
+</Card>
+```
+
+## Example: Sheen
+
+Move the pointer over the card.
+
+```tsx
+<Card variant="surface" effect="sheen" className="p-6">
+  <Heading level={3} size="h5">Pro</Heading>
+  <Text size="body-sm" tone="muted">Everything in Team, plus audit logs.</Text>
+</Card>
+```
+
+## Accessibility
+
+- Roles: region (when used as a landmark)
+- `Tab`: Focuses interactive children. The card itself is never focusable; with a CardLink, the link is.
+- With a CardLink inside, the focus ring is drawn on the card, not around the title.
+- Prefer CardLink over wrapping the whole card in `<a>`: the link’s accessible name stays the title instead of every word on the card.
+- Group related content with a heading inside the Card so AT users can navigate by heading level.
+
+Related: [media-card](media-card.md), [radio-card](radio-card.md), [callout](callout.md)

package/dist/skill/references/components/checkbox-card.md

@@ -0,0 +1,49 @@
+# Checkbox Card
+
+A checkbox drawn as a whole card: title, description and optional icon. Pick any number.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { CheckboxCard } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/checkbox-card
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` (required) | `ReactNode` |  | The card’s accessible name. |
+| `description` | `ReactNode` |  | Secondary text, exposed as the accessible description. |
+| `icon` | `ReactNode` |  | Leading icon. Turns primary when checked. |
+| `checked / defaultChecked` | `boolean` |  | Controlled or initial state. No indeterminate state. |
+| `onCheckedChange` | `(checked: boolean) => void` |  | Called with a plain boolean. |
+| `children` | `ReactNode` |  | Extra content under the description. Keep it non-interactive. |
+| `disabled` | `boolean` | `false` | Disables the card. |
+
+## Example: Features
+
+Lay checkbox cards out with any grid; there is no group component.
+
+```tsx
+<fieldset className="grid gap-3 sm:grid-cols-3">
+  <legend className="sr-only">Add-ons</legend>
+  <CheckboxCard icon={<Bell />} title="Alerts" description="Email and push notifications." defaultChecked />
+  <CheckboxCard icon={<Shield />} title="Audit log" description="Keep a year of activity." />
+  <CheckboxCard icon={<Zap />} title="Automations" description="Run rules on new records." />
+</fieldset>
+```
+
+## Example: Disabled
+
+```tsx
+<CheckboxCard title="SSO" description="Available on Enterprise." disabled />
+<CheckboxCard title="Data residency" description="Included in your plan." defaultChecked disabled />
+```
+
+## Accessibility
+
+- Roles: checkbox
+- `Tab`: Moves focus to the card.
+- `Space`: Toggles the card.
+- The title is the accessible name and the description is the accessible description.
+- Wrap related cards in a `fieldset` with a `legend` so the set has a name.
+
+Related: [checkbox](checkbox.md), [radio-card](radio-card.md), [card](card.md)

package/dist/skill/references/components/checkbox.md

@@ -0,0 +1,51 @@
+# Checkbox
+
+Binary checkbox input built on Radix UI.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: stable
+- Import: `import { Checkbox } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/checkbox
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `checked` | `boolean` |  | The controlled checked state. |
+| `defaultChecked` | `boolean` |  | The initial checked state when uncontrolled. |
+| `disabled` | `boolean` |  | Disables the checkbox when true. |
+| `required` | `boolean` |  | Marks the checkbox as required in a form. |
+| `onCheckedChange` | `(checked: boolean) => void` |  | Callback fired when the checked state changes. |
+
+## Example: Default
+
+```tsx
+<Checkbox defaultChecked />
+```
+
+## Example: With label
+
+```tsx
+<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">I agree to the terms</Label>
+</div>
+```
+
+## Example: States
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <Checkbox id="checked" defaultChecked />
+    <Label htmlFor="checked">Checked</Label>
+  </div>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <Checkbox id="unchecked" />
+    <Label htmlFor="unchecked">Unchecked</Label>
+  </div>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <Checkbox id="disabled" disabled />
+    <Label htmlFor="disabled">Disabled</Label>
+  </div>
+</div>
+```

package/dist/skill/references/components/chip.md

@@ -0,0 +1,35 @@
+# Chip
+
+Compact label chip, optionally dismissible.
+
+- Package: `@nexub/react` · Category: Labels & Badges · Status: stable
+- Import: `import { Chip } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/chip
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `'filled' \| 'outline'` | `'filled'` | Visual style of the chip. |
+| `onRemove` | `() => void` |  | When provided, renders a dismiss button that calls this handler. |
+| `size` | `'sm' \| 'md'` |  | Controls chip size. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <Chip>Design</Chip>
+  <Chip>Engineering</Chip>
+  <Chip>Product</Chip>
+</div>
+```
+
+## Example: Dismissible
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <Chip onRemove={() => {}}>Design</Chip>
+  <Chip onRemove={() => {}}>Engineering</Chip>
+  <Chip onRemove={() => {}}>Product</Chip>
+</div>
+```

package/dist/skill/references/components/citation.md

@@ -0,0 +1,61 @@
+# Citation
+
+Numbered source markers for running text, with a hover preview, plus SourceChip and SourceList for the sources under a reply.
+
+- Package: `@nexub/react` · Category: AI · Status: beta
+- Import: `import { Citation } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/citation
+
+## When to use
+
+- Assistant answers built from retrieved documents or web results.
+- SourceList under the reply, so sources are reachable without hovering.
+
+## When not to use
+
+- Ordinary links in prose: use Link.
+- Footnotes in static content, where a numbered list at the end of the page is enough.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `index` (required) | `number` |  | Citation: 1-based number shown in the marker. |
+| `source` (required) | `CitationSource` |  | Citation and SourceChip: `{ title, url, domain?, snippet?, favicon? }`. |
+| `source.url` (required) | `string` |  | Linked only if it is http or https. Anything else (javascript:, data:, relative) renders as plain text. |
+| `source.domain` | `string` |  | Shown instead of the URL’s hostname. |
+| `source.snippet` | `string` |  | Quoted text shown in the hover preview. |
+| `source.favicon` | `string` |  | http(s) image URL. Falls back to the domain’s first letter. |
+| `SourceList sources` (required) | `CitationSource[]` |  | Rendered as SourceChips under a "Sources" heading. Scrolls sideways when narrow, wraps from 480px. |
+| `messages` | `Partial<CitationMessages>` |  | Citation and SourceList: overrides for `sources` and `source(index)`. |
+| `safeUrl(url)` | `(url?: string) => string \| undefined` |  | The same http(s) check, exported for your own links. |
+
+## Example: Cited answer
+
+Hover or focus a number to preview its source.
+
+```tsx
+const sources: CitationSource[] = [
+  { url: 'https://example.com/guides/heat-pumps', title: 'Choosing a heat pump', snippet: 'Air-source pumps suit most homes with a garden or outside wall.' },
+  { url: 'https://example.org/grants', title: 'Grants for home heating', domain: 'example.org' },
+  { url: 'https://example.net/costs', title: 'Running costs compared' },
+];
+
+<p>
+  Most homes can use an air-source heat pump<Citation index={1} source={sources[0]} />.
+  Grants cover part of the cost<Citation index={2} source={sources[1]} />, and running
+  costs are close to gas<Citation index={3} source={sources[2]} />.
+</p>
+<SourceList sources={sources} />
+```
+
+## Accessibility
+
+- Roles: link (marker and chips), region (SourceList, named by its heading)
+- `Tab`: Focuses a marker and opens its preview.
+- `Enter`: Opens the source in a new tab.
+- Markers are named "Source 1: <title>", not just the number.
+- The hover preview repeats the marker’s information; nothing in it is only available on hover.
+- Links open in a new tab with `rel="noopener noreferrer"`; favicons load with `referrerPolicy="no-referrer"`.
+
+Related: [message-bubble](message-bubble.md), [hover-card](hover-card.md), [link](link.md)

package/dist/skill/references/components/code-inline.md

@@ -0,0 +1,25 @@
+# Code
+
+Inline code span for technical terms and short code snippets.
+
+- Package: `@nexub/react` · Category: Inline Primitives · Status: stable
+- Import: `import { CodeInline } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/code-inline
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `...props` | `React.HTMLAttributes<HTMLElement>` |  | All standard span/code HTML attributes are forwarded. |
+
+## Example: Default
+
+```tsx
+<Code>npm install @nexub/react</Code>
+```
+
+## Example: In prose
+
+```tsx
+<Text>Use the <Code>useTheme()</Code> hook to access the current theme.</Text>
+```