@axerity/cli 0.1.0

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

@@ -0,0 +1,83 @@
+---
+title: Callout
+description: Draw attention to important notes.
+icon: info
+---
+
+<script>
+	import { Callout } from '$lib';
+</script>
+
+# Callout
+
+Callouts highlight notes, tips, warnings, and more. Import the component in a
+page's `<script>` block, then use it anywhere in your Markdown.
+
+## Variants
+
+<Callout type="info">
+
+This is the default **info** callout.
+
+</Callout>
+
+<Callout type="tip">
+
+A handy **tip** to make your life easier.
+
+</Callout>
+
+<Callout type="success">
+
+Everything worked, **success!**
+
+</Callout>
+
+<Callout type="warn">
+
+Careful, this is a **warning**.
+
+</Callout>
+
+<Callout type="error">
+
+Something went wrong, this is an **error**.
+
+</Callout>
+
+## Usage
+
+Leave a blank line between the tags and the content so the inner text is parsed
+as Markdown (an mdsvex requirement):
+
+```svelte
+<script>
+	import { Callout } from '$lib';
+</script>
+
+<Callout type="warn">Careful, this is a **warning** with a [link](/).</Callout>
+```
+
+## Types
+
+| Type               | Use for                          |
+| ------------------ | -------------------------------- |
+| `info` _(default)_ | General notes and asides         |
+| `tip`              | Helpful suggestions              |
+| `success`          | Confirmations and positive notes |
+| `warn` / `warning` | Things to be careful about       |
+| `error`            | Errors and destructive warnings  |
+
+## Custom title
+
+Pass a `title` to override the default heading:
+
+<Callout type="tip" title="Pro tip">
+
+You can set any heading you like.
+
+</Callout>
+
+```svelte
+<Callout type="tip" title="Pro tip">You can set any heading you like.</Callout>
+```

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

@@ -0,0 +1,88 @@
+---
+title: Cards
+description: Rich, tappable cards for links and feature grids.
+icon: layout-grid
+---
+
+<script>
+	import { Card, CardGroup } from '$lib';
+</script>
+
+# Cards
+
+Cards present links and information as rich, tappable blocks, great for "next
+steps" grids, feature overviews, and navigation.
+
+## Card
+
+A standalone `Card` with an icon, title, and description. Add `href` to make the
+whole card a link (it gains a hover state and an arrow):
+
+<Card title="Installation" icon="download" href="/installation">
+
+Get Axerity running locally in a minute.
+
+</Card>
+
+## Card group
+
+Wrap cards in a `CardGroup` to lay them out in a responsive grid. Use `cols` to
+set the number of columns:
+
+<CardGroup cols={2}>
+	<Card title="Quick Start" icon="rocket" href="/quick-start">
+
+Write your first page in two minutes.
+
+    </Card>
+    <Card title="Markdown" icon="file-text" href="/writing/markdown">
+
+Author content in Markdown and Svelte.
+
+    </Card>
+    <Card title="Components" icon="blocks" href="/components/callout">
+
+Explore the component kit.
+
+    </Card>
+    <Card title="GitHub" icon="code" href="https://github.com/axerity/axerity">
+
+Star the project on GitHub.
+
+    </Card>
+
+</CardGroup>
+
+## Horizontal
+
+Set `horizontal` to place the icon beside the content instead of above it:
+
+<Card title="Configuration" icon="tag" horizontal>
+
+A horizontal card is handy in tighter layouts.
+
+</Card>
+
+## Usage
+
+```svelte
+<script>
+	import { Card, CardGroup } from '$lib';
+</script>
+
+<CardGroup cols={2}>
+	<Card title="Quick Start" icon="rocket" href="/quick-start">
+		Write your first page in two minutes.
+	</Card>
+</CardGroup>
+```
+
+## Props
+
+| Component   | Prop         | Description                     |
+| ----------- | ------------ | ------------------------------- |
+| `CardGroup` | `cols`       | Number of columns (default `2`) |
+| `Card`      | `title`      | Card heading (required)         |
+| `Card`      | `icon`       | Optional Lucide icon name       |
+| `Card`      | `href`       | Makes the card a link           |
+| `Card`      | `horizontal` | Lay the icon beside the content |

package/src/content/demo/components/code-group.md

@@ -0,0 +1,55 @@
+---
+title: Code Group
+description: Switch between related code blocks in a single tabbed panel.
+icon: code
+---
+
+<script>
+	import { CodeGroup } from '$lib';
+</script>
+
+# Code Group
+
+A code group collapses several code blocks into one panel with a tab for each.
+It is handy for showing the same step across package managers or languages. Each
+tab takes its label from the block's `title`, so give every block one.
+
+## Example
+
+<CodeGroup>
+
+```bash title="npm"
+npm install axerity
+```
+
+```bash title="pnpm"
+pnpm add axerity
+```
+
+```bash title="yarn"
+yarn add axerity
+```
+
+</CodeGroup>
+
+## Usage
+
+Wrap the blocks in `<CodeGroup>` and leave a blank line around each one so the
+Markdown is parsed:
+
+````md
+<CodeGroup>
+
+```bash title="npm"
+npm install axerity
+```
+
+```bash title="pnpm"
+pnpm add axerity
+```
+
+</CodeGroup>
+````
+
+The `title` on each block becomes its tab. Without a title a block falls back to
+`Tab 1`, `Tab 2`, and so on.

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

@@ -0,0 +1,42 @@
+---
+title: Columns
+description: Lay content out in a responsive grid.
+icon: columns-3
+---
+
+<script>
+	import { Columns, Card } from '$lib';
+</script>
+
+# Columns
+
+Columns place their children in an even grid. On narrow screens the grid
+collapses to a single column so nothing gets cramped. Set `cols` to choose how
+many columns to show on wider screens.
+
+## Example
+
+<Columns cols={2}>
+	<Card title="Fast" icon="zap">Static output that loads instantly.</Card>
+	<Card title="Simple" icon="feather">Write Markdown, get a site.</Card>
+</Columns>
+
+## Usage
+
+```svelte
+<script>
+	import { Columns, Card } from '$lib';
+</script>
+
+<Columns cols={3}>
+	<Card title="One" />
+	<Card title="Two" />
+	<Card title="Three" />
+</Columns>
+```
+
+## Props
+
+| Prop   | Type     | Description                                 |
+| ------ | -------- | ------------------------------------------- |
+| `cols` | `number` | Columns on screens 640px and up (default 2) |

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

@@ -0,0 +1,51 @@
+---
+title: Frame
+description: Wrap an image, video, or component in a styled border with a caption.
+icon: image
+---
+
+<script>
+	import { Frame } from '$lib';
+</script>
+
+# Frame
+
+A frame puts a soft border and padding around whatever you place inside it, so a
+screenshot or diagram sits apart from the surrounding text instead of bleeding
+into it. Add a caption to label what the reader is looking at.
+
+Click a frame to open it full screen, then click anywhere or press `Escape` to
+close. Pass `zoom={false}` to turn that off.
+
+## With a caption
+
+<Frame caption="The dashboard after a fresh install">
+	<img src="https://placehold.co/720x360/png" alt="Dashboard screenshot" />
+</Frame>
+
+## Without a caption
+
+<Frame>
+	<img src="https://placehold.co/720x240/png" alt="A wide banner" />
+</Frame>
+
+## Usage
+
+Frame works with any content, an image, a video, or another component:
+
+```svelte
+<script>
+	import { Frame } from '$lib';
+</script>
+
+<Frame caption="The dashboard after a fresh install">
+	<img src="/screenshots/dashboard.png" alt="Dashboard" />
+</Frame>
+```
+
+## Props
+
+| Prop      | Type      | Description                            |
+| --------- | --------- | -------------------------------------- |
+| `caption` | `string`  | Text shown below the framed content    |
+| `zoom`    | `boolean` | Click to open full screen (default on) |

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

@@ -0,0 +1,54 @@
+---
+title: Icon
+description: Drop a Lucide icon inline in a sentence or heading.
+icon: flag
+---
+
+<script>
+	import { Icon } from '$lib';
+</script>
+
+# Icon
+
+Use the `Icon` component to place a single glyph anywhere in your text. It pulls
+from [Lucide](https://lucide.dev/icons), so any icon name on that site works here.
+
+## Inline
+
+Icons sit on the text baseline, so they read well inside a sentence. Save your
+work often <Icon icon="save" /> and ship when the tests pass <Icon icon="check" color="oklch(0.6 0.16 155)" />.
+
+## Sizing
+
+Pass `size` in pixels. The default is 16.
+
+<Icon icon="flag" size={20} /> <Icon icon="flag" size={28} /> <Icon icon="flag" size={36} />
+
+## Color
+
+By default an icon takes the color of the surrounding text. Pass `color` with any
+CSS color to override it.
+
+<Icon icon="heart" color="oklch(0.62 0.22 25)" size={24} />
+<Icon icon="star" color="oklch(0.7 0.16 75)" size={24} />
+<Icon icon="droplet" color="oklch(0.62 0.2 250)" size={24} />
+
+## Usage
+
+```svelte
+<script>
+	import { Icon } from '$lib';
+</script>
+
+Save your work <Icon icon="save" /> often.
+
+<Icon icon="flag" size={32} color="oklch(0.62 0.22 25)" />
+```
+
+## Props
+
+| Prop    | Type     | Description                         |
+| ------- | -------- | ----------------------------------- |
+| `icon`  | `string` | Lucide icon name (required)         |
+| `size`  | `number` | Size in pixels (default 16)         |
+| `color` | `string` | Any CSS color (defaults to inherit) |

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

@@ -0,0 +1,28 @@
+---
+title: Keyboard
+description: Show keyboard keys and shortcuts.
+icon: keyboard
+---
+
+<script>
+	import { Kbd } from '$lib';
+</script>
+
+# Keyboard
+
+Wrap a key name in `Kbd` to render it as a physical keyboard key. It is handy
+for documenting shortcuts inline.
+
+## Example
+
+Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search, or <Kbd>Esc</Kbd> to close a dialog.
+
+## Usage
+
+```svelte
+<script>
+	import { Kbd } from '$lib';
+</script>
+
+Save with <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>.
+```

package/src/content/demo/components/meta.json

@@ -0,0 +1,26 @@
+{
+	"title": "Components",
+	"icon": "blocks",
+	"pages": [
+		"callout",
+		"cards",
+		"accordion",
+		"tabs",
+		"code-group",
+		"tooltip",
+		"tree",
+		"icon",
+		"frame",
+		"video",
+		"steps",
+		"columns",
+		"badge",
+		"kbd",
+		"update",
+		"roadmap",
+		"type-table",
+		"api",
+		"webhooks",
+		"websockets"
+	]
+}

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

@@ -0,0 +1,86 @@
+---
+title: Roadmap
+description: Show what you are building, in progress, and shipped.
+icon: map
+---
+
+<script>
+	import { Roadmap, RoadmapItem } from '$lib';
+</script>
+
+# Roadmap
+
+A roadmap is a list of items, each with a status and an optional target. Use it
+on a public roadmap page so readers can see what is planned, what you are working
+on now, and what already shipped.
+
+## Example
+
+<Roadmap>
+
+<RoadmapItem title="Versioned content" status="shipped" eta="June 2026">
+
+Keep separate v1 and v2 content trees with a switcher that follows the reader
+across versions.
+
+</RoadmapItem>
+
+<RoadmapItem title="Search filters" status="in-progress" eta="Q3 2026">
+
+Filter results by section and tag.
+
+</RoadmapItem>
+
+<RoadmapItem title="Offline reading" status="exploring">
+
+Bundle pages into a service worker so docs stay available without a connection.
+
+</RoadmapItem>
+
+<RoadmapItem title="PDF export" status="planned" />
+
+</Roadmap>
+
+## Usage
+
+Wrap the items in `<Roadmap>` and give each `<RoadmapItem>` a `title` and a
+`status`. The body is optional, and so is the `eta`.
+
+```svelte
+<script>
+	import { Roadmap, RoadmapItem } from '$lib';
+</script>
+
+<Roadmap>
+	<RoadmapItem title="Versioned content" status="shipped" eta="June 2026">
+		Separate content trees with a version switcher.
+	</RoadmapItem>
+
+	<RoadmapItem title="Search filters" status="in-progress" eta="Q3 2026">
+		Filter results by section and tag.
+	</RoadmapItem>
+
+	<RoadmapItem title="PDF export" status="planned" />
+</Roadmap>
+```
+
+## Status
+
+Each status has its own color and label.
+
+| Status        | Label       |
+| ------------- | ----------- |
+| `planned`     | Planned     |
+| `exploring`   | Exploring   |
+| `in-progress` | In progress |
+| `shipped`     | Shipped     |
+
+## Props
+
+### RoadmapItem
+
+| Prop     | Type     | Description                                         |
+| -------- | -------- | --------------------------------------------------- |
+| `title`  | `string` | The item name                                       |
+| `status` | `string` | `planned`, `exploring`, `in-progress`, or `shipped` |
+| `eta`    | `string` | Optional target, e.g. `Q3 2026`                     |

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

@@ -0,0 +1,72 @@
+---
+title: Steps
+description: Numbered, vertical walkthroughs.
+icon: list
+---
+
+<script>
+	import { Steps, Step } from '$lib';
+</script>
+
+# Steps
+
+Steps lay out a sequence of instructions as a numbered, vertical walkthrough.
+Numbering is automatic.
+
+## Example
+
+<Steps>
+	<Step title="Install">
+
+Add Axerity to your project:
+
+```bash
+pnpm add axerity
+```
+
+    </Step>
+    <Step title="Create a page">
+
+Drop a Markdown file into `src/content/docs`.
+
+    </Step>
+    <Step title="Run it">
+
+Start the dev server with `pnpm dev` and open the page.
+
+    </Step>
+
+</Steps>
+
+## Usage
+
+Wrap `Step`s in `Steps`. Each `Step` takes an optional `title`. Keep the blank
+lines around content so the Markdown is parsed:
+
+````md
+<script>
+	import { Steps, Step } from '$lib';
+</script>
+
+<Steps>
+	<Step title="Install">
+
+    ```bash
+    pnpm add axerity
+    ```
+
+    </Step>
+    <Step title="Run it">
+
+    Start the dev server.
+
+    </Step>
+
+</Steps>
+````
+
+## Props
+
+| Component | Prop    | Description             |
+| --------- | ------- | ----------------------- |
+| `Step`    | `title` | Step heading (optional) |