@xtyle/core 0.5.0

package/dist/manifest/alert.manifest.js

@@ -0,0 +1,251 @@
+import { FULL_TONES } from "../vocab.js";
+/** The four severities: the meaning axis (glyph + live-region politeness), distinct from color. */
+const ALERT_SEVERITIES = ["success", "warn", "danger", "info"];
+const htmlExample = `<xtyle-alert tone="info" variant="soft">
+	<span slot="title">Heads up</span>
+	Your changes are saved locally and will sync when you reconnect.
+</xtyle-alert>
+
+<xtyle-alert tone="success" variant="soft">Profile updated.</xtyle-alert>
+
+<xtyle-alert tone="danger" variant="solid" dismissible>
+	<span slot="title">Upload failed</span>
+	The file exceeded the 25 MB limit.
+	<span slot="actions">
+		<xtyle-button variant="outline" tone="danger">Try again</xtyle-button>
+	</span>
+</xtyle-alert>`;
+const svelteExample = `<script lang="ts">
+	import { Alert, Button } from "@xtyle/svelte";
+</script>
+
+<Alert tone="info">
+	{#snippet title()}Heads up{/snippet}
+	Your changes are saved locally and will sync when you reconnect.
+</Alert>
+
+<Alert tone="success">Profile updated.</Alert>
+
+<Alert tone="danger" variant="solid" dismissible ondismiss={() => retry()}>
+	{#snippet title()}Upload failed{/snippet}
+	The file exceeded the 25 MB limit.
+	{#snippet actions()}
+		<Button variant="outline" tone="danger">Try again</Button>
+	{/snippet}
+</Alert>`;
+const astroExample = `---
+import { Alert, Button } from "@xtyle/astro";
+---
+
+<Alert tone="info">
+	<Fragment slot="title">Heads up</Fragment>
+	Your changes are saved locally and will sync when you reconnect.
+</Alert>
+
+<Alert tone="success">Profile updated.</Alert>
+
+<Alert tone="danger" variant="solid" dismissible>
+	<Fragment slot="title">Upload failed</Fragment>
+	The file exceeded the 25 MB limit.
+	<Button slot="actions" variant="outline" tone="danger">Try again</Button>
+</Alert>`;
+export const alertManifest = {
+    id: "alert",
+    name: "Alert",
+    category: "feedback",
+    summary: "An inline message banner with an optional severity glyph, a title, actions, and a dismissible form; color and meaning on independent axes.",
+    description: "Alert presents a persistent, inline message. Two axes drive it independently. `severity` (success, warn, danger, info) carries the *meaning*: the leading status glyph and the live-region politeness. `tone` carries the *color*, drawn from the full palette (semantic roles, accent variants, or named hues). By default a severity paints itself its standard color (danger reads red), but a `tone` overrides that, so a `danger` can be repainted pink and still announce as danger, while a color-only notice (a pink awareness banner with no `severity`) shows no glyph and announces politely. A `soft` variant tints the banner; a `solid` variant fills it for higher emphasis. An optional title sits above the message, an actions footer holds buttons, and a `dismissible` form adds a close button (also closable with Escape) that emits a `dismiss` event before removing the banner.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "alert",
+            description: "The banner root carrying the variant and tone classes plus the live-region role.",
+            selector: ".xtyle-alert",
+            tokens: [
+                "--space-3",
+                "--font-sans",
+                "--text-body",
+                "--leading-normal",
+                "--border-thin",
+                "--radius-md",
+                "--space-4",
+            ],
+        },
+        {
+            name: "icon",
+            description: "The leading status glyph, shown when a `severity` is set, drawn in the banner color and hidden from assistive tech. Project an `icon` slot to override it (the slot shows even on a severity-less banner).",
+            selector: ".xtyle-alert__icon",
+            tokens: ["--text-lg", "--space-0"],
+        },
+        {
+            name: "body",
+            description: "The vertical stack holding the title, message, and actions.",
+            selector: ".xtyle-alert__body",
+            tokens: ["--space-1"],
+        },
+        {
+            name: "title",
+            description: "The optional bold heading above the message.",
+            selector: ".xtyle-alert__title",
+            tokens: ["--weight-semibold", "--text-lg", "--leading-tight", "--fg-0"],
+        },
+        {
+            name: "message",
+            description: "The default-slot body copy.",
+            selector: ".xtyle-alert__message",
+        },
+        {
+            name: "actions",
+            description: "The footer row of buttons rendered below the message.",
+            selector: ".xtyle-alert__actions",
+            tokens: ["--space-2", "--space-1"],
+        },
+        {
+            name: "dismiss",
+            description: "The close button shown in the dismissible form, with its own hover/press overlay and focus ring.",
+            selector: ".xtyle-alert__dismiss",
+            tokens: ["--text-lg", "--space-0", "--space-1", "--border-thin", "--radius-sm", "--duration-fast", "--ease-standard"],
+        },
+    ],
+    props: [
+        {
+            name: "tone",
+            type: "AlertTone",
+            description: "The banner color: any semantic role, accent variant, or named hue. Defaults to the `severity` color (info when neither is set). Set it to recolor a severity (a pink `danger`) or to tint a color-only notice (a pink awareness banner).",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "severity",
+            type: "AlertSeverity",
+            description: "The meaning, independent of color: drives the leading status glyph and the live-region politeness (`danger`/`warn` announce assertively). Omit for a color-only notice with no glyph. A bare status-named `tone` (e.g. `danger`) implies the matching severity.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...ALERT_SEVERITIES],
+        },
+        {
+            name: "variant",
+            type: "AlertVariant",
+            default: "soft",
+            description: "Visual treatment: a soft tone tint or a solid tone fill.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["soft", "solid"],
+        },
+        {
+            name: "dismissible",
+            type: "boolean",
+            default: "false",
+            description: "Adds a close button and Escape-to-close; emits a cancelable `dismiss` event before removing the banner.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "dismissLabel",
+            type: "string",
+            default: "Dismiss",
+            description: "Accessible label for the close button (kebab `dismiss-label` on the custom element).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "soft",
+            description: "A soft tone-tinted background with tone-colored text, border, and icon.",
+            className: "xtyle-alert--soft",
+            tokens: ["--info-bg", "--info-text", "--info"],
+        },
+        {
+            name: "solid",
+            description: "Filled with the tone color and reverse ink; the high-emphasis treatment.",
+            className: "xtyle-alert--solid",
+            tokens: ["--info", "--info-fg"],
+        },
+    ],
+    sizes: [{ name: "md", description: "The single size.", className: "xtyle-alert", isDefault: true }],
+    states: [
+        {
+            name: "dismiss-hover",
+            description: "Pointer over the close button. Overlay paints the hover tint.",
+            selector: ".xtyle-alert__dismiss:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "dismiss-active",
+            description: "Close button pressed. Overlay paints the press tint.",
+            selector: ".xtyle-alert__dismiss:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "dismiss-focus-visible",
+            description: "Keyboard focus on the close button: a token-colored ring plus a transparent outline that the forced-colors base rule promotes.",
+            selector: ".xtyle-alert__dismiss:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The message body.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "title",
+            description: "An optional bold heading above the message.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "actions",
+            description: "A footer row of buttons rendered below the message.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "icon",
+            description: "Overrides the built-in severity glyph; fill it to show your own icon (or to mark a severity-less notice).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--border-normal",
+        "--border-thick",
+        "--border-thin",
+        "--duration-fast",
+        "--ease-standard",
+        "--fg-0",
+        "--font-sans",
+        "--leading-normal",
+        "--leading-tight",
+        "--radius-md",
+        "--radius-sm",
+        "--ring",
+        "--space-0",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--state-hover",
+        "--state-press",
+        "--text-body",
+        "--text-lg",
+        "--weight-semibold",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-bg`, `--${t}-fg`, `--${t}-text`]),
+    ],
+    composition: [
+        "Drop Button components into the `actions` slot for primary/secondary responses; match the button tone to the alert tone.",
+        "For transient, auto-dismissing notices use Toast instead; Alert is for persistent inline messages.",
+        "The leading icon is built in per `severity`; project your own into the `icon` slot to override it, or to mark a color-only notice that carries no severity.",
+    ],
+    a11y: [
+        "Live-region semantics follow `severity`, not color: danger/warn render `role=\"alert\"` with `aria-live=\"assertive\"`, success/info render `role=\"status\"` with `aria-live=\"polite\"`, and a severity-less notice is polite `role=\"status\"`.",
+        "The leading status glyph is decorative (`aria-hidden`) and appears only with a `severity`; meaning is carried by the text and the role, never by color alone.",
+        "The dismissible form is closable by pointer or the Escape key and exposes an accessible label on the close button (`dismissLabel`, default \"Dismiss\").",
+        "Dismissing fires a cancelable `dismiss` event; calling `preventDefault()` keeps the banner in place so a host can run its own removal animation.",
+        "Focus on the close button shows the token ring plus a transparent outline that the forced-colors base rule promotes to a real system outline.",
+    ],
+    examples: [
+        {
+            id: "tones-variants-and-dismiss",
+            title: "Tones, variants, and dismissal",
+            description: "The four status tones across the soft and solid variants, with an optional title, an actions footer, and the dismissible form.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=alert.manifest.js.map

package/dist/manifest/alert.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.manifest.js","sourceRoot":"","sources":["../../src/manifest/alert.manifest.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,mGAAmG;AACnG,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAExE,MAAM,WAAW,GAAG;;;;;;;;;;;;;eAaL,CAAC;AAEhB,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;SAiBb,CAAC;AAEV,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;SAeZ,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC/C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,4IAA4I;IACrJ,WAAW,EACV,02BAA02B;IAC32B,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,kFAAkF;YAC/F,QAAQ,EAAE,cAAc;YACxB,MAAM,EAAE;gBACP,WAAW;gBACX,aAAa;gBACb,aAAa;gBACb,kBAAkB;gBAClB,eAAe;gBACf,aAAa;gBACb,WAAW;aACX;SACD;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,4MAA4M;YACzN,QAAQ,EAAE,oBAAoB;YAC9B,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;SAClC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,6DAA6D;YAC1E,QAAQ,EAAE,oBAAoB;YAC9B,MAAM,EAAE,CAAC,WAAW,CAAC;SACrB;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,8CAA8C;YAC3D,QAAQ,EAAE,qBAAqB;YAC/B,MAAM,EAAE,CAAC,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,QAAQ,CAAC;SACvE;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,6BAA6B;YAC1C,QAAQ,EAAE,uBAAuB;SACjC;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,uDAAuD;YACpE,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;SAClC;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,kGAAkG;YAC/G,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;SACrH;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,0OAA0O;YACvP,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;SACxB;QACD;YACC,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,iQAAiQ;YAC9Q,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,GAAG,gBAAgB,CAAC;SAC9B;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0DAA0D;YACvE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;SAC1B;QACD;YACC,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,yGAAyG;YACtH,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sFAAsF;YACnG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE;QACT;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,yEAAyE;YACtF,SAAS,EAAE,mBAAmB;YAC9B,MAAM,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,QAAQ,CAAC;SAC9C;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,0EAA0E;YACvF,SAAS,EAAE,oBAAoB;YAC/B,MAAM,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC;SAC/B;KACD;IACD,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACnG,MAAM,EAAE;QACP;YACC,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,+DAA+D;YAC5E,QAAQ,EAAE,oCAAoC;YAC9C,MAAM,EAAE,CAAC,eAAe,CAAC;SACzB;QACD;YACC,IAAI,EAAE,gBAAgB;YACtB,WAAW,EAAE,sDAAsD;YACnE,QAAQ,EAAE,qCAAqC;YAC/C,MAAM,EAAE,CAAC,eAAe,CAAC;SACzB;QACD;YACC,IAAI,EAAE,uBAAuB;YAC7B,WAAW,EAAE,gIAAgI;YAC7I,QAAQ,EAAE,qCAAqC;YAC/C,MAAM,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,EAAE,QAAQ,CAAC;SACvD;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,mBAAmB;YAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,6CAA6C;YAC1D,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,qDAAqD;YAClE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,2GAA2G;YACxH,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE;QACf,iBAAiB;QACjB,gBAAgB;QAChB,eAAe;QACf,iBAAiB;QACjB,iBAAiB;QACjB,QAAQ;QACR,aAAa;QACb,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;QACb,aAAa;QACb,QAAQ;QACR,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;QACf,eAAe;QACf,aAAa;QACb,WAAW;QACX,mBAAmB;QACnB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KACjF;IACD,WAAW,EAAE;QACZ,0HAA0H;QAC1H,oGAAoG;QACpG,6JAA6J;KAC7J;IACD,IAAI,EAAE;QACL,oPAAoP;QACpP,+JAA+J;QAC/J,0JAA0J;QAC1J,kJAAkJ;QAClJ,+IAA+I;KAC/I;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,4BAA4B;YAChC,KAAK,EAAE,gCAAgC;YACvC,WAAW,EAAE,gIAAgI;YAC7I,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;KACD;CACD,CAAC"}

package/dist/manifest/app-shell.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const appShellManifest: ComponentManifest;
+//# sourceMappingURL=app-shell.manifest.d.ts.map

package/dist/manifest/app-shell.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/app-shell.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAwFpD,eAAO,MAAM,gBAAgB,EAAE,iBAiN9B,CAAC"}

package/dist/manifest/app-shell.manifest.js

@@ -0,0 +1,287 @@
+const htmlExample = `<xtyle-app-shell skip-link>
+	<header slot="toolbar" class="xtyle-toolbar">App title and global actions</header>
+	<nav slot="left" class="xtyle-panel">Primary navigation</nav>
+
+	<h1>Page content</h1>
+	<p>Everything in the default slot lands in the scrollable main column.</p>
+
+	<aside slot="right" class="xtyle-panel">Contextual details</aside>
+	<footer slot="statusbar" class="xtyle-statusbar">Ready</footer>
+</xtyle-app-shell>`;
+const svelteExample = `<script lang="ts">
+	import { AppShell } from "@xtyle/svelte";
+</script>
+
+<AppShell skipLink>
+	{#snippet toolbar()}
+		<header class="xtyle-toolbar">App title and global actions</header>
+	{/snippet}
+	{#snippet left()}
+		<nav class="xtyle-panel">Primary navigation</nav>
+	{/snippet}
+
+	<h1>Page content</h1>
+	<p>Everything in the default slot lands in the scrollable main column.</p>
+
+	{#snippet right()}
+		<aside class="xtyle-panel">Contextual details</aside>
+	{/snippet}
+	{#snippet statusbar()}
+		<footer class="xtyle-statusbar">Ready</footer>
+	{/snippet}
+</AppShell>`;
+const astroExample = `---
+import { AppShell } from "@xtyle/astro";
+---
+
+<AppShell skipLink>
+	<header slot="toolbar" class="xtyle-toolbar">App title and global actions</header>
+	<nav slot="left" class="xtyle-panel">Primary navigation</nav>
+
+	<h1>Page content</h1>
+	<p>Everything in the default slot lands in the scrollable main column.</p>
+
+	<aside slot="right" class="xtyle-panel">Contextual details</aside>
+	<footer slot="statusbar" class="xtyle-statusbar">Ready</footer>
+</AppShell>`;
+const htmlResizableExample = `<xtyle-app-shell right-size="344" right-resizable right-min="288" right-max="560">
+	<header slot="toolbar" class="xtyle-toolbar">Editor</header>
+
+	<h1>Canvas</h1>
+
+	<!-- Drag the rail's inner edge to resize; double-click it to reset to 344. -->
+	<aside slot="right" class="xtyle-panel">Inspector</aside>
+</xtyle-app-shell>`;
+const svelteResizableExample = `<script lang="ts">
+	import { AppShell } from "@xtyle/svelte";
+</script>
+
+<AppShell rightSize={344} rightResizable rightMin={288} rightMax={560}>
+	{#snippet toolbar()}
+		<header class="xtyle-toolbar">Editor</header>
+	{/snippet}
+
+	<h1>Canvas</h1>
+
+	{#snippet right()}
+		<aside class="xtyle-panel">Inspector</aside>
+	{/snippet}
+</AppShell>`;
+const astroResizableExample = `---
+import { AppShell } from "@xtyle/astro";
+---
+
+<AppShell rightSize={344} rightResizable rightMin={288} rightMax={560}>
+	<header slot="toolbar" class="xtyle-toolbar">Editor</header>
+
+	<h1>Canvas</h1>
+
+	<aside slot="right" class="xtyle-panel">Inspector</aside>
+</AppShell>`;
+export const appShellManifest = {
+    id: "app-shell",
+    name: "AppShell",
+    category: "shell",
+    summary: "The three-row application scaffold: toolbar over a left/main/right body over a status bar.",
+    description: "AppShell is the outermost layout frame for a full-screen application. It establishes a three-row grid (a top toolbar, a flexible body, and a bottom status bar) where the body is itself a three-column grid of a left rail, a scrollable main column, and a right rail. Every region is an optional named slot, so the same scaffold collapses cleanly from a full IDE-style layout down to a bare main column. The main region is a real `<main>` landmark that owns the only scroll, keeping the chrome pinned. An optional skip link, hidden until focused, lets keyboard users jump straight past the chrome to the content. It carries no chrome of its own: the Astro and HTML bindings emit the same light-DOM structure, and the custom element is a transparent `display: contents` host that contributes nothing to the layout.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "app",
+            description: "The outer three-row grid filling the viewport, carrying the body background and base typography.",
+            selector: ".xtyle-app",
+            tokens: [
+                "--body-bg",
+                "--fg-0",
+                "--font-sans",
+                "--text-body",
+                "--leading-normal",
+            ],
+        },
+        {
+            name: "body",
+            description: "The middle row split into the left rail, the main column, and the right rail.",
+            selector: ".xtyle-app__body",
+        },
+        {
+            name: "main",
+            description: "The scrollable `<main>` landmark and skip-link target; takes the remaining space.",
+            selector: ".xtyle-main",
+            tokens: ["--space-5"],
+        },
+        {
+            name: "rail-handle",
+            description: "The drag handle on a resizable rail's inner edge (when `leftResizable` / `rightResizable` is set); a hairline that thickens to the accent on hover, keyboard focus, and drag.",
+            selector: ".xtyle-app__resizer",
+            tokens: ["--line", "--accent", "--border-thin", "--border-normal", "--ring", "--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "skip-link",
+            description: "The keyboard-only jump link, off-screen until focused, sliding into the top-left when it is.",
+            selector: ".xtyle-app__skip-link",
+            tokens: [
+                "--font-sans",
+                "--text-sm",
+                "--weight-medium",
+                "--leading-tight",
+                "--accent",
+                "--accent-fg",
+                "--border-thin",
+                "--radius-md",
+                "--space-2",
+                "--space-3",
+                "--space-4",
+                "--duration-fast",
+                "--ease-standard",
+            ],
+        },
+    ],
+    props: [
+        {
+            name: "skipLink",
+            type: "string | boolean",
+            description: "Renders a skip link targeting the main region. `true` uses the default label; a string overrides it. The Astro binding also accepts a `skip-link` slot for richer content.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "leftSize",
+            type: "number | string",
+            description: "Width of the left rail column. A bare number is treated as px; a string passes through (`18rem`, `20%`). Omit to size the rail to its content.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "rightSize",
+            type: "number | string",
+            description: "Width of the right rail column, same rules as `leftSize`. When `rightResizable` is set this is the rail's starting width and its double-click reset target.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "leftResizable",
+            type: "boolean",
+            default: "false",
+            description: "Makes the left rail user-resizable: a drag handle on the rail's inner edge, arrow-key nudges (`Shift` for a larger step, `Home`/`End` to jump to the bounds), and a double-click reset to `leftSize`. The main column reflows live as the rail changes. The element emits `resize` / `resize-end` events with the side and size.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "rightResizable",
+            type: "boolean",
+            default: "false",
+            description: "Makes the right rail user-resizable, mirroring `leftResizable` with a double-click reset to `rightSize`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "leftMin / leftMax",
+            type: "number",
+            default: "160 / 720",
+            description: "Clamp, in px, for the resizable left rail (`left-min` / `left-max`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "rightMin / rightMax",
+            type: "number",
+            default: "160 / 720",
+            description: "Clamp, in px, for the resizable right rail (`right-min` / `right-max`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [
+        {
+            name: "main-focus",
+            description: "The main region after the skip link moves focus to it; an inset ring marks the landing.",
+            selector: ".xtyle-main:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "skip-link-focus",
+            description: "The skip link revealed on keyboard focus, sliding into view with the standard ring.",
+            selector: ".xtyle-app__skip-link:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The main content, rendered inside the scrollable `<main>` landmark.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "toolbar",
+            description: "The top row; typically a Toolbar with the app title and global actions.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "left",
+            description: "The left rail; typically navigation.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "right",
+            description: "The right rail; typically contextual detail.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "statusbar",
+            description: "The bottom row; typically a Statusbar.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "skip-link",
+            description: "Custom content for the skip link (Astro only); falls back to a default label otherwise.",
+            bindings: ["astro"],
+        },
+    ],
+    consumedTokens: [
+        "--body-bg",
+        "--fg-0",
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--leading-normal",
+        "--leading-tight",
+        "--weight-medium",
+        "--accent",
+        "--accent-fg",
+        "--line",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-md",
+        "--ring",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Fill the `toolbar` slot with Toolbar and the `statusbar` slot with Statusbar for the matching chrome.",
+        "Use Panel in the `left` / `right` slots for collapsible rails.",
+        "Mount one AppShell per application; nest layout components inside the main slot rather than nesting shells.",
+    ],
+    a11y: [
+        "The main content is a native `<main>` landmark, so assistive tech can jump to it directly.",
+        "The optional skip link is the first focusable element and targets `#main` (which carries `tabindex=\"-1\"`), letting keyboard users bypass the chrome.",
+        "The skip link is positioned off-screen and only slides into view on `:focus-visible`, so it stays out of the visual layout until needed.",
+        "`<main>` receives a focus ring when the skip link moves focus to it, confirming the landing point.",
+        "The custom element host is `display: contents`, so it adds no box and never disturbs the landmark or grid structure.",
+        "A resizable rail's handle is a `role=\"separator\"` with `aria-orientation=\"vertical\"` and `aria-valuenow`/`min`/`max`, is keyboard-focusable, and drives the width with the arrow keys, so the rail resizes without a pointer.",
+    ],
+    examples: [
+        {
+            id: "full-scaffold",
+            title: "Full application scaffold",
+            description: "Toolbar, left and right rails, scrollable main, a status bar, and a skip link.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "resizable-rail",
+            title: "Resizable right rail",
+            description: "An editor with a user-resizable inspector: drag the rail's inner edge (or arrow-key the handle) and the main column reflows; double-click to reset. `leftResizable` mirrors it.",
+            source: { html: htmlResizableExample, svelte: svelteResizableExample, astro: astroResizableExample },
+        },
+    ],
+};
+//# sourceMappingURL=app-shell.manifest.js.map

package/dist/manifest/app-shell.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.manifest.js","sourceRoot":"","sources":["../../src/manifest/app-shell.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/avatar-group.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const avatarGroupManifest: ComponentManifest;
+//# sourceMappingURL=avatar-group.manifest.d.ts.map

package/dist/manifest/avatar-group.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/avatar-group.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAmEpD,eAAO,MAAM,mBAAmB,EAAE,iBAyHjC,CAAC"}