@axerity/cli 0.1.0

package/src/content/demo/components/tabs.md

@@ -0,0 +1,146 @@
+---
+title: Tabs
+description: Switch between alternative content in place.
+icon: layers
+---
+
+<script>
+	import { Tabs, Tab } from '$lib';
+</script>
+
+# Tabs
+
+Tabs let readers switch between alternative content, package managers, OSes, or
+languages, without leaving the page.
+
+## Example
+
+<Tabs>
+	<Tab title="pnpm">
+
+```bash
+pnpm add axerity
+```
+
+    </Tab>
+    <Tab title="npm">
+
+```bash
+npm install axerity
+```
+
+    </Tab>
+    <Tab title="yarn">
+
+```bash
+yarn add axerity
+```
+
+    </Tab>
+
+</Tabs>
+
+The first tab is selected by default.
+
+## Icons
+
+Give a `Tab` an `icon` (any Lucide name) to show a glyph next to its label:
+
+<Tabs>
+	<Tab title="TypeScript" icon="code">
+
+```ts
+export const x: number = 1;
+```
+
+    </Tab>
+    <Tab title="Config" icon="file-text">
+
+```json
+{ "x": 1 }
+```
+
+    </Tab>
+
+</Tabs>
+
+## Shared & persistent groups
+
+Give multiple `Tabs` the same `group` and they sync, picking a tab in one
+switches every other group on the page, and the choice is **remembered across
+reloads** (via `localStorage`). Tabs are matched by title.
+
+<Tabs group="pm">
+	<Tab title="pnpm">
+
+```bash
+pnpm add axerity
+```
+
+    </Tab>
+    <Tab title="npm">
+
+```bash
+npm install axerity
+```
+
+    </Tab>
+
+</Tabs>
+
+<Tabs group="pm">
+	<Tab title="pnpm">
+
+```bash
+pnpm dev
+```
+
+    </Tab>
+    <Tab title="npm">
+
+```bash
+npm run dev
+```
+
+    </Tab>
+
+</Tabs>
+
+Switch one of the two blocks above, the other follows.
+
+## Usage
+
+Import `Tabs` and `Tab`, then give each `Tab` a `title`. Remember the blank
+lines around tab content so the Markdown inside is parsed:
+
+````md
+<script>
+	import { Tabs, Tab } from '$lib';
+</script>
+
+<Tabs>
+	<Tab title="pnpm">
+
+    ```bash
+    pnpm add axerity
+    ```
+
+    </Tab>
+    <Tab title="npm">
+
+    ```bash
+    npm install axerity
+    ```
+
+    </Tab>
+
+</Tabs>
+````
+
+## Props
+
+| Component | Prop    | Description                                     |
+| --------- | ------- | ----------------------------------------------- |
+| `Tabs`    | `group` | Sync + persist selection across same-group tabs |
+| `Tab`     | `title` | Tab label (required)                            |
+| `Tab`     | `icon`  | Optional Lucide icon name                       |

package/src/content/demo/components/tooltip.md

@@ -0,0 +1,44 @@
+---
+title: Tooltip
+description: Show a short hint when a reader hovers or focuses a word.
+icon: message-circle
+---
+
+<script>
+	import { Tooltip } from '$lib';
+</script>
+
+# Tooltip
+
+Tooltips attach a short note to a word or phrase. The note stays hidden until the
+reader hovers the trigger or moves keyboard focus onto it. Use them for quick
+definitions and asides that would clutter the sentence if written inline.
+
+## Example
+
+The request returns a <Tooltip tip="JavaScript Object Notation, a plain text data format.">JSON</Tooltip> body with the pet record. Hover the dotted word to read the hint.
+
+## Usage
+
+```svelte
+<script>
+	import { Tooltip } from '$lib';
+</script>
+
+The request returns a <Tooltip tip="JavaScript Object Notation.">JSON</Tooltip> body.
+```
+
+The text between the tags is the trigger. It gets a dotted underline so readers
+know there is more to see. The `tip` text is the note that appears above it.
+
+## Keyboard and screen readers
+
+The trigger is a real button, so it is reachable with the Tab key and the note
+shows on focus as well as hover. The `tip` is also exposed as the button's label,
+so screen readers announce it.
+
+## Props
+
+| Prop  | Type     | Description              |
+| ----- | -------- | ------------------------ |
+| `tip` | `string` | The hint text (required) |

package/src/content/demo/components/tree.md

@@ -0,0 +1,83 @@
+---
+title: File tree
+description: Show a folder and file layout the way it looks on disk.
+icon: folder-tree
+---
+
+<script>
+	import { Tree, Folder, File } from '$lib';
+</script>
+
+# File tree
+
+A file tree shows how files and folders are arranged. Use it to point readers to
+the right place in a project without making them guess.
+
+## Example
+
+<Tree>
+	<Folder name="src" defaultOpen>
+		<Folder name="content">
+			<Folder name="docs">
+				<File name="index.md" />
+				<File name="installation.md" />
+			</Folder>
+		</Folder>
+		<Folder name="lib">
+			<File name="index.ts" />
+		</Folder>
+		<File name="app.html" />
+	</Folder>
+	<File name="axerity.json" />
+	<File name="package.json" />
+</Tree>
+
+Click a folder to open or close it. Pass `defaultOpen` to a folder to show its
+contents on load.
+
+## Usage
+
+```svelte
+<script>
+	import { Tree, Folder, File } from '$lib';
+</script>
+
+<Tree>
+	<Folder name="src" defaultOpen>
+		<Folder name="content">
+			<File name="index.md" />
+		</Folder>
+		<File name="app.html" />
+	</Folder>
+	<File name="package.json" />
+</Tree>
+```
+
+## Custom icons
+
+By default folders use a folder glyph and files use a file glyph. Pass `icon`
+with any Lucide name to override either one.
+
+<Tree>
+	<Folder name="images" icon="image" defaultOpen>
+		<File name="logo.svg" icon="file-image" />
+	</Folder>
+	<File name="README.md" icon="book-open" />
+</Tree>
+
+## Props
+
+### Folder
+
+| Prop          | Type      | Description            |
+| ------------- | --------- | ---------------------- |
+| `name`        | `string`  | Folder name (required) |
+| `icon`        | `string`  | Lucide icon name       |
+| `defaultOpen` | `boolean` | Expand on load         |
+
+### File
+
+| Prop   | Type     | Description          |
+| ------ | -------- | -------------------- |
+| `name` | `string` | File name (required) |
+| `icon` | `string` | Lucide icon name     |

package/src/content/demo/components/type-table.md

@@ -0,0 +1,77 @@
+---
+title: Type Table
+description: Document an object's properties in a configurable table.
+icon: tag
+---
+
+<script>
+	import { TypeTable } from '$lib';
+</script>
+
+# Type Table
+
+`TypeTable` documents the shape of an object, component props, config options,
+API parameters, from a single object. The **Default** column hides itself when
+no property defines one.
+
+## Example
+
+<TypeTable
+type={{
+		title: {
+			type: 'string',
+			description: 'The heading shown at the top.',
+			required: true
+		},
+		icon: {
+			type: 'string',
+			description: 'A Lucide icon name shown beside the title.'
+		},
+		open: {
+			type: 'boolean',
+			description: 'Whether the panel starts expanded.',
+			default: 'false'
+		},
+		variant: {
+			type: "'flat' | 'boxed'",
+			typeDescription: 'Controls the container width.',
+			default: "'flat'"
+		},
+		legacy: {
+			type: 'boolean',
+			description: 'No longer used.',
+			deprecated: true
+		}
+	}}
+/>
+
+## Usage
+
+```svelte
+<script>
+	import { TypeTable } from '$lib';
+</script>
+
+<TypeTable
+	type={{
+		title: { type: 'string', description: 'The heading.', required: true },
+		open: { type: 'boolean', default: 'false' }
+	}}
+/>
+```
+
+## Per-property fields
+
+<TypeTable
+type={{
+		type: { type: 'string', description: 'Shown as a code chip.' },
+		description: { type: 'string', description: 'Short prose under the name.' },
+		typeDescription: {
+			type: 'string',
+			description: 'Longer note shown muted under the type.'
+		},
+		default: { type: 'string', description: 'Shown as a code chip in the Default column.' },
+		required: { type: 'boolean', description: 'Adds a "required" badge.' },
+		deprecated: { type: 'boolean', description: 'Strikes the name and adds a badge.' }
+	}}
+/>

package/src/content/demo/components/update.md

@@ -0,0 +1,48 @@
+---
+title: Update
+description: A timeline entry for changelogs and release notes.
+icon: history
+---
+
+<script>
+	import { Update, Badge } from '$lib';
+</script>
+
+# Update
+
+`Update` renders a single entry on a vertical timeline. Stack several to build a
+changelog. Pair it with a `date` in the page frontmatter.
+
+## Example
+
+<Update label="v1.1.0" date="June 1, 2026">
+
+Added the `Update` component. <Badge color="success">new</Badge>
+
+- Timeline entries with a label and optional date.
+- Reads nicely on a dedicated changelog page.
+
+</Update>
+
+<Update label="v1.0.0" date="May 1, 2026">
+
+The first stable release.
+
+</Update>
+
+## Usage
+
+```svelte
+<script>
+	import { Update } from '$lib';
+</script>
+
+<Update label="v1.1.0" date="June 1, 2026">What changed in this release.</Update>
+```
+
+## Props
+
+| Prop    | Type     | Description                           |
+| ------- | -------- | ------------------------------------- |
+| `label` | `string` | Heading, usually a version (required) |
+| `date`  | `string` | Optional date shown next to the label |

package/src/content/demo/components/video.md

@@ -0,0 +1,56 @@
+---
+title: Video
+description: Embed a YouTube video in a responsive player.
+icon: play
+---
+
+<script>
+	import { Video } from '$lib';
+</script>
+
+# Video
+
+The `Video` component renders a responsive 16:9 player. It works with hosted
+files and with the common providers, and picks the right player for whatever you
+give it:
+
+- A direct video file (`.mp4`, `.webm`, `.ogg`, `.mov`, `.m4v`) plays in the
+  browser's native player.
+- A YouTube link or id embeds through the privacy friendly `youtube-nocookie`
+  host.
+- A Vimeo link embeds through the Vimeo player.
+
+## YouTube
+
+<Video src="https://youtu.be/oRdxUFDoQe0" title="Michael Jackson - Beat It" />
+
+A full watch link, a short `youtu.be` link, or a bare video id all work:
+
+```svelte
+<Video src="https://youtu.be/oRdxUFDoQe0" title="Michael Jackson - Beat It" />
+<Video src="https://www.youtube.com/watch?v=oRdxUFDoQe0" />
+<Video src="oRdxUFDoQe0" />
+```
+
+## Hosted file
+
+Point `src` at a video file and it plays inline with native controls. Pass
+`poster` for a still frame to show before playback:
+
+```svelte
+<Video src="/media/demo.mp4" poster="/media/demo-poster.jpg" title="Product demo" />
+```
+
+## Vimeo
+
+```svelte
+<Video src="https://vimeo.com/76979871" title="Vimeo example" />
+```
+
+## Props
+
+| Prop     | Type     | Description                                      |
+| -------- | -------- | ------------------------------------------------ |
+| `src`    | `string` | File URL, provider URL, or YouTube id (required) |
+| `title`  | `string` | Label for screen readers (default `Video`)       |
+| `poster` | `string` | Still frame for hosted files, shown before play  |

package/src/content/demo/components/webhooks.md

@@ -0,0 +1,109 @@
+---
+title: Webhooks
+description: Document the events your API sends to a customer's endpoint.
+icon: webhook
+---
+
+<script>
+	import { Webhook, EventList, Event, ResponseField, ResponseExample } from '$lib';
+</script>
+
+# Webhooks
+
+Webhook docs read differently from endpoints: you are documenting an event your
+service sends to the customer's server. The `Webhook` component lays out the
+event, its payload, and an example, with the same sticky rail as the API kit.
+
+## An event
+
+<Webhook event="invoice.paid" method="POST" description="Sent when an invoice is paid in full.">
+
+## Payload
+
+<ResponseField name="id" type="string">
+
+Unique id for the event.
+
+</ResponseField>
+
+<ResponseField name="type" type="string">
+
+The event type, always `invoice.paid` here.
+
+</ResponseField>
+
+<ResponseField name="data" type="object">
+
+The invoice that was paid.
+
+</ResponseField>
+
+<ResponseExample title="Example event">
+
+```json
+{
+	"id": "evt_1abc",
+	"type": "invoice.paid",
+	"data": { "id": "in_9xy", "amount": 4200, "currency": "usd" }
+}
+```
+
+</ResponseExample>
+
+</Webhook>
+
+## Usage
+
+Wrap the event in `<Webhook>` and document the payload with `ResponseField`, then
+add a `ResponseExample` (or `ObjectExample`) with a fenced code block for the
+sample event:
+
+```svelte
+<Webhook event="invoice.paid" method="POST" description="Sent when an invoice is paid.">
+	## Payload
+
+	<ResponseField name="id" type="string">Unique id for the event.</ResponseField>
+
+	<ResponseExample title="Example event">
+		(a fenced json block with the sample payload)
+	</ResponseExample>
+</Webhook>
+```
+
+It works just like the [API components](/components/api), so any of
+`ResponseField`, `ResponseExample`, and `ObjectExample` are available inside.
+
+## Listing events
+
+`EventList` renders an index of every event you send. Link each one to its
+detail page.
+
+<EventList>
+	<Event name="invoice.paid" href="/components/webhooks">An invoice was paid in full.</Event>
+	<Event name="invoice.payment_failed" href="/components/webhooks">A payment attempt failed.</Event>
+	<Event name="customer.created" href="/components/webhooks">A new customer was created.</Event>
+</EventList>
+
+```svelte
+<EventList>
+	<Event name="invoice.paid" href="/webhooks/invoice-paid">An invoice was paid.</Event>
+	<Event name="customer.created" href="/webhooks/customer-created">A customer was created.</Event>
+</EventList>
+```
+
+## Props
+
+### Webhook
+
+| Prop          | Type     | Description                           |
+| ------------- | -------- | ------------------------------------- |
+| `event`       | `string` | The event type, e.g. `invoice.paid`   |
+| `method`      | `string` | Delivery method (default `POST`)      |
+| `description` | `string` | Short summary of when the event fires |
+
+### Event
+
+| Prop   | Type     | Description                     |
+| ------ | -------- | ------------------------------- |
+| `name` | `string` | The event type (required)       |
+| `href` | `string` | Link to the event's detail page |

package/src/content/demo/components/websockets.md

@@ -0,0 +1,101 @@
+---
+title: WebSockets
+description: Document channels and messages for WebSocket and AsyncAPI services.
+icon: radio
+---
+
+<script>
+	import { Channel, Message, ResponseField, ResponseExample } from '$lib';
+</script>
+
+# WebSockets
+
+Event-driven APIs are documented as channels and messages, not requests and
+responses. `Channel` lays out a connection and its messages with the same sticky
+rail as the API kit, and `Message` marks the direction of each one.
+
+## A channel
+
+<Channel address={'/chat/{roomId}'} protocol="wss" server="wss://api.example.com" description="Real-time chat for a room.">
+
+<Message direction="receive" name="message.created">
+
+A new chat message arrived.
+
+## Payload
+
+<ResponseField name="id" type="string">
+
+Unique id for the message.
+
+</ResponseField>
+
+<ResponseField name="body" type="string">
+
+The message text.
+
+</ResponseField>
+
+<ResponseExample title="message.created">
+
+```json
+{ "id": "msg_1", "body": "hey there", "user": "ada" }
+```
+
+</ResponseExample>
+
+</Message>
+
+<Message direction="send" name="message.send">
+
+Send a new message to the room.
+
+## Payload
+
+<ResponseField name="body" type="string" required>
+
+The message text to send.
+
+</ResponseField>
+
+</Message>
+
+</Channel>
+
+## Usage
+
+Wrap a channel in `<Channel>`, then mark each message with `<Message>` and
+document its payload with `ResponseField` and `ResponseExample`:
+
+```svelte
+<Channel address="/chat/{roomId}" protocol="wss" server="wss://api.example.com">
+	<Message direction="receive" name="message.created">
+		## Payload
+
+		<ResponseField name="body" type="string">The message text.</ResponseField>
+	</Message>
+
+	<Message direction="send" name="message.send">Send a message to the room.</Message>
+</Channel>
+```
+
+`receive` is server-to-client, `send` is client-to-server (the AsyncAPI
+`publish`/`subscribe` keywords work too).
+
+## Props
+
+### Channel
+
+| Prop          | Type     | Description                                    |
+| ------------- | -------- | ---------------------------------------------- |
+| `address`     | `string` | The channel or topic, e.g. `/chat/{roomId}`    |
+| `protocol`    | `string` | `ws`, `wss`, `kafka`, `mqtt`, … (default `ws`) |
+| `server`      | `string` | Base server URL, prepended to the address      |
+| `description` | `string` | Short summary of the channel                   |
+
+### Message
+
+| Prop        | Type     | Description                                    |
+| ----------- | -------- | ---------------------------------------------- |
+| `direction` | `string` | `send` or `receive` (or `publish`/`subscribe`) |
+| `name`      | `string` | The message name, e.g. `message.created`       |

package/src/content/demo/configuration/ai.md

@@ -0,0 +1,40 @@
+---
+title: AI and LLMs
+description: Copy page, Markdown URLs, and llms.txt.
+icon: file-text
+---
+
+# AI and LLMs
+
+Axerity makes your docs easy to feed to a language model.
+
+## Copy page
+
+Every page has a copy page button at the top right. The main button copies the
+page as clean Markdown, with the frontmatter and scripts stripped out. The
+dropdown has more options:
+
+- Copy page as Markdown.
+- View as Markdown, which opens the raw Markdown in a new tab.
+- Open in ChatGPT, with a prompt pointing at the page.
+- Open in Claude, with the same.
+
+## Markdown URLs
+
+Every page is also served as raw Markdown at a `.md` URL. Add `.md` to any page
+path:
+
+```
+/installation      ->  the rendered page
+/installation.md   ->  the raw Markdown
+```
+
+These are static files, generated at build time.
+
+## llms.txt
+
+Two files are generated for whole site ingestion, following the
+[llms.txt](https://llmstxt.org) convention:
+
+- `/llms.txt` is an index of every page with links to its Markdown.
+- `/llms-full.txt` is the full Markdown of every page in one file.