@xtyle/core 0.5.0

package/dist/manifest/spinner.manifest.js

@@ -0,0 +1,137 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-spinner aria-label="Loading"></xtyle-spinner>
+
+<xtyle-spinner size="sm" tone="neutral" aria-label="Loading"></xtyle-spinner>
+
+<xtyle-spinner size="lg" tone="success" aria-label="Saving changes"></xtyle-spinner>`;
+const svelteExample = `<script lang="ts">
+	import { Spinner } from "@xtyle/svelte";
+</script>
+
+<Spinner ariaLabel="Loading" />
+
+<Spinner size="sm" tone="neutral" ariaLabel="Loading" />
+
+<Spinner size="lg" tone="success" ariaLabel="Saving changes" />`;
+const astroExample = `---
+import { Spinner } from "@xtyle/astro";
+---
+
+<Spinner aria-label="Loading" />
+
+<Spinner size="sm" tone="neutral" aria-label="Loading" />
+
+<Spinner size="lg" tone="success" aria-label="Saving changes" />`;
+export const spinnerManifest = {
+    id: "spinner",
+    name: "Spinner",
+    category: "feedback",
+    summary: "An indeterminate loading indicator: a spinning ring in any of the six semantic tones, in three sizes.",
+    description: "Spinner signals that work is in progress without a known endpoint. It draws a rotating ring with a single transparent gap, sized in `em` so it scales with the surrounding type, and carries `role=\"status\"` so assistive tech announces the busy state. `tone` colors the ring across the six semantic roles (accent, neutral, danger, success, warn, info), and `size` picks sm, md, or lg. The spin runs on `--duration-slow`; the reduced-motion base rule freezes it for users who ask for less motion. It is presentational and standalone; Button carries its own inline spinner for the loading state.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "spinner",
+            description: "The rotating ring: a bordered circle with one transparent side, animated on the slow duration.",
+            selector: ".xtyle-spinner",
+            tokens: ["--accent", "--border-thick", "--radius-full", "--duration-slow"],
+        },
+    ],
+    props: [
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Semantic color role driving the ring color.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Ring size. Scales with `em`, so it also tracks the surrounding font size.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "ariaLabel",
+            type: "string",
+            default: "Loading",
+            description: "Accessible name announced for the busy region. Maps to `aria-label`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "accent",
+            description: "Accent-toned ring, the default.",
+            className: "xtyle-spinner--accent",
+            tokens: ["--accent"],
+        },
+        {
+            name: "neutral",
+            description: "Neutral-toned ring.",
+            className: "xtyle-spinner--neutral",
+            tokens: ["--neutral"],
+        },
+        {
+            name: "danger",
+            description: "Danger-toned ring.",
+            className: "xtyle-spinner--danger",
+            tokens: ["--danger"],
+        },
+        {
+            name: "success",
+            description: "Success-toned ring.",
+            className: "xtyle-spinner--success",
+            tokens: ["--success"],
+        },
+        {
+            name: "warn",
+            description: "Warn-toned ring.",
+            className: "xtyle-spinner--warn",
+            tokens: ["--warn"],
+        },
+        {
+            name: "info",
+            description: "Info-toned ring.",
+            className: "xtyle-spinner--info",
+            tokens: ["--info"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact: thinner ring.", className: "xtyle-spinner--sm" },
+        { name: "md", description: "Default.", className: "xtyle-spinner", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-spinner--lg" },
+    ],
+    states: [],
+    slots: [],
+    consumedTokens: [
+        "--border-normal",
+        "--border-thick",
+        "--radius-full",
+        "--duration-slow",
+        ...FULL_TONES.map((t) => `--${t}`),
+    ],
+    composition: [
+        "Drop inside any container to signal loading; pair with an `aria-live` region when you also surface text.",
+        "Use Button's own `loading` state for in-button spinners. This standalone Spinner is for page, panel, and inline loading.",
+        "Size in `em` means setting `font-size` on the spinner (or its parent) scales the ring without a size class.",
+    ],
+    a11y: [
+        "Carries `role=\"status\"` so the busy state is announced to assistive technology.",
+        "Has no visible text, so it requires an accessible name; `ariaLabel` defaults to \"Loading\" and the binding warns at runtime if it is cleared.",
+        "The ring is decorative; the loading meaning lives in the role and label, not the visual.",
+        "Motion routes through `--duration-slow`; the forced-reduced-motion base rule freezes the animation automatically.",
+    ],
+    examples: [
+        {
+            id: "tones-and-sizes",
+            title: "Tones and sizes",
+            description: "The six tones across the three sizes: color and scale are independent.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=spinner.manifest.js.map

package/dist/manifest/spinner.manifest.js.map

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

package/dist/manifest/splitter.manifest.d.ts

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

package/dist/manifest/splitter.manifest.d.ts.map

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

package/dist/manifest/splitter.manifest.js

@@ -0,0 +1,192 @@
+const htmlExample = `<div class="layout" style="display:grid;grid-template-columns:var(--rail,16rem) auto minmax(0,1fr);height:20rem">
+	<aside class="panel">Rail</aside>
+	<xtyle-splitter var="--rail" value="256" min="160" max="480" step="8" label="Resize rail"></xtyle-splitter>
+	<main class="panel">Content</main>
+</div>
+
+<script>
+	document.querySelector("xtyle-splitter")
+		.addEventListener("resize", (e) => console.log(e.detail.value));
+</script>`;
+const svelteExample = `<script lang="ts">
+	import { Splitter } from "@xtyle/svelte";
+	let rail = $state(256);
+</script>
+
+<div style={\`display:grid;grid-template-columns:\${rail}px auto minmax(0,1fr);height:20rem\`}>
+	<aside>Rail</aside>
+	<Splitter value={rail} min={160} max={480} step={8}
+		onresize={(e) => (rail = e.detail.value)} label="Resize rail" />
+	<main>Content</main>
+</div>`;
+const astroExample = `---
+import Splitter from "@xtyle/astro/Splitter.astro";
+---
+
+<div style="display:grid;grid-template-columns:var(--rail,16rem) auto minmax(0,1fr);height:20rem">
+	<aside>Rail</aside>
+	<Splitter var="--rail" value={256} min={160} max={480} step={8} label="Resize rail" />
+	<main>Content</main>
+</div>`;
+export const splitterManifest = {
+    id: "splitter",
+    name: "Splitter",
+    category: "shell",
+    summary: "A draggable divider that resizes an adjacent pane, with configurable bounds and steps.",
+    description: "Splitter is the handle between two panes: drag it (or arrow it with the keyboard) and the neighboring pane grows or shrinks. It is a `role=\"separator\"` control, so it announces its current, minimum, and maximum size and takes the full keyboard. The size it manages is _data_ the consumer owns: the splitter clamps a `value` (in px) to `min`/`max`, snaps it to an integral `step`, writes it into a CSS custom property (`var`) on a target so a grid or flex track resizes declaratively, and fires `resize` (live, during the drag) and `resize-end` (on release) so the consumer can react or persist. `orientation` picks the axis (`vertical` resizes width, `horizontal` resizes height), and `reversed` flips the direction for a trailing-edge pane like a right rail. Its own chrome is derived: the grip and its focus ring read from the same tokens the rest of the UI does.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "splitter",
+            description: "The separator handle: a fixed-size cell in the layout track that captures the drag.",
+            selector: ".xtyle-splitter",
+            tokens: ["--space-3"],
+        },
+        {
+            name: "grip",
+            description: "The visible grab affordance, accent-tinted on hover and focus.",
+            selector: ".xtyle-splitter__grip",
+            tokens: ["--line", "--accent", "--radius-sm", "--border-thick", "--space-6", "--duration-fast", "--ease-standard"],
+        },
+    ],
+    props: [
+        {
+            name: "value",
+            type: "number",
+            description: "The current size of the managed pane in px. Controlled: the consumer owns it and updates on `resize`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "orientation",
+            type: "SplitterOrientation",
+            default: "vertical",
+            description: "The separator axis: `vertical` resizes width (a side rail), `horizontal` resizes height (a stacked pane).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["vertical", "horizontal"],
+        },
+        {
+            name: "size",
+            type: "SplitterSize",
+            default: "md",
+            description: "The handle's own thickness and grip: `sm`, `md`, or `lg`. This is the divider's footprint, independent of the pane size it controls.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "line",
+            type: "boolean",
+            default: "false",
+            description: "Paint a full-length divider line down the handle, so the splitter reads as a visible separator on its own instead of relying on the contrast between the panes it sits between.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "min",
+            type: "number",
+            default: "0",
+            description: "The smallest the managed pane may shrink to, in px.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "max",
+            type: "number",
+            description: "The largest the managed pane may grow to, in px. Unbounded when omitted.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "step",
+            type: "number",
+            default: "1",
+            description: "The integral increment the size snaps to; drag and arrow keys both quantize to it.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "default",
+            type: "number",
+            description: "The size a reset restores, by double-clicking the handle or the keyboard reset. Omit it and a reset still works, restoring the size the splitter first rendered with, matching Slider.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "reversed",
+            type: "boolean",
+            default: "false",
+            description: "Flip the drag direction, for a pane on the trailing edge (a right or bottom rail) where dragging toward the center grows it.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "var",
+            type: "string",
+            default: "--xtyle-splitter-size",
+            description: "The CSS custom property the splitter writes the size into, so a grid or flex track can read it. Set on the target.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "for",
+            type: "string",
+            description: "The id of the element the `var` is set on. Defaults to the splitter's parent, so a splitter inside the layout container just works.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Lock the size. The handle stops responding to drag and keys and dims.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "A slim divider for dense layouts.", className: "xtyle-splitter--sm" },
+        { name: "md", description: "The default divider footprint.", className: "xtyle-splitter", isDefault: true },
+        { name: "lg", description: "A wide divider that's easy to grab.", className: "xtyle-splitter--lg" },
+    ],
+    states: [
+        {
+            name: "keyboard-focus",
+            description: "The handle focused by keyboard: a ring picks it out and the grip tints to accent. The ring is armed only on genuine keyboard entry (Tab or a key press), so the scripted focus a drag takes never rings.",
+            selector: ".xtyle-splitter[data-focus-ring]",
+            tokens: ["--border-normal", "--border-thick", "--ring", "--accent"],
+        },
+        {
+            name: "disabled",
+            description: "A locked splitter: the grip dims and the resize cursor drops.",
+            selector: ".xtyle-splitter--disabled",
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--space-2",
+        "--space-3",
+        "--space-5",
+        "--space-6",
+        "--space-8",
+        "--line",
+        "--radius-sm",
+        "--border-thin",
+        "--border-thick",
+        "--duration-fast",
+        "--ease-standard",
+        "--accent",
+        "--border-normal",
+        "--ring",
+    ],
+    composition: [
+        "Place a splitter as a track between two panes in a `grid` or `flex` layout, sized by the `var` it writes.",
+        "Give `AppShell` a `resizable` rail and it drops a splitter between the rail and main for you.",
+        "Listen for `resize-end` to persist a chosen size; `resize` for a live preview.",
+    ],
+    a11y: [
+        "The handle is a `role=\"separator\"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`, so assistive tech announces the size and its bounds.",
+        "It is fully keyboard-operable: arrow keys step by `step`, PageUp/PageDown jump ten steps, Home and End go to the bounds.",
+        "Double-clicking the handle resets the size to `default` (or the first-rendered size when `default` is omitted), the same gesture and fallback as Slider.",
+        "Give it a `label` (or `labelledby`) so the separator is announced by what it resizes, not as an unnamed divider.",
+    ],
+    examples: [
+        {
+            id: "resizable-rail",
+            title: "A resizable rail",
+            description: "A splitter between a side rail and the content, writing the rail width into a CSS variable the grid reads.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=splitter.manifest.js.map

package/dist/manifest/splitter.manifest.js.map

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

package/dist/manifest/stack.manifest.d.ts

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

package/dist/manifest/stack.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/stack.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAuDpD,eAAO,MAAM,aAAa,EAAE,iBA2E3B,CAAC"}

package/dist/manifest/stack.manifest.js

@@ -0,0 +1,125 @@
+const htmlExample = `<xtyle-stack gap="4">
+	<xtyle-card>First</xtyle-card>
+	<xtyle-card>Second</xtyle-card>
+	<xtyle-card>Third</xtyle-card>
+</xtyle-stack>
+
+<xtyle-stack gap="2" align="center">
+	<h2>Centered column</h2>
+	<p>Children stack vertically, centered on the cross axis.</p>
+</xtyle-stack>`;
+const svelteExample = `<script lang="ts">
+	import { Stack, Card } from "@xtyle/svelte";
+</script>
+
+<Stack gap={4}>
+	<Card>First</Card>
+	<Card>Second</Card>
+	<Card>Third</Card>
+</Stack>
+
+<Stack gap={2} align="center">
+	<h2>Centered column</h2>
+	<p>Children stack vertically, centered on the cross axis.</p>
+</Stack>`;
+const astroExample = `---
+import { Stack, Card } from "@xtyle/astro";
+---
+
+<Stack gap={4}>
+	<Card>First</Card>
+	<Card>Second</Card>
+	<Card>Third</Card>
+</Stack>
+
+<Stack gap={2} align="center">
+	<h2>Centered column</h2>
+	<p>Children stack vertically, centered on the cross axis.</p>
+</Stack>`;
+const SPACE_TOKENS = [
+    "--space-0",
+    "--space-1",
+    "--space-2",
+    "--space-3",
+    "--space-4",
+    "--space-5",
+    "--space-6",
+    "--space-7",
+    "--space-8",
+];
+export const stackManifest = {
+    id: "stack",
+    name: "Stack",
+    category: "layout",
+    summary: "A vertical flex column with a token-driven gap, the primitive for stacking content.",
+    description: "Stack lays its children out in a flex column with a consistent gap drawn from the `--space` scale. The `gap` prop (0–8) selects the spacing step, while `align` and `justify` control the cross- and main-axis distribution. It carries no visual chrome of its own (no background, border, or color), so it composes cleanly inside cards, panels, and page shells. An `inline` flag switches it to an inline-flex column for embedding in running text or alongside other inline boxes.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "root",
+            description: "The flex-column container carrying the gap, align, and justify classes.",
+            selector: ".xtyle-stack",
+            tokens: ["--space-4"],
+        },
+    ],
+    props: [
+        {
+            name: "gap",
+            type: "number",
+            default: "4",
+            description: "Spacing between children, as a step on the `--space` scale (0–8).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+        },
+        {
+            name: "align",
+            type: "StackAlign",
+            description: "Cross-axis alignment (`align-items`). Omitted leaves the browser default (stretch).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "center", "end", "stretch", "baseline"],
+        },
+        {
+            name: "justify",
+            type: "StackJustify",
+            description: "Main-axis distribution (`justify-content`).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "center", "end", "between", "around", "evenly"],
+        },
+        {
+            name: "inline",
+            type: "boolean",
+            default: "false",
+            description: "Renders as an inline-flex column instead of a block-level one.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The children to stack vertically.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [...SPACE_TOKENS],
+    composition: [
+        "Pair with Cluster (horizontal) and Grid (two-dimensional); the three layout primitives cover most page scaffolding.",
+        "Nest Stacks for sections-within-sections; each level picks its own `gap`.",
+        "Drop any component inside; Stack adds spacing without imposing color or chrome.",
+    ],
+    a11y: [
+        "A generic presentational container with no implicit semantics; it adds no roles and announces nothing.",
+        "Wrap in a landmark element (`<section>`, `<nav>`) or pass a semantic tag where document structure matters.",
+    ],
+    examples: [
+        {
+            id: "vertical-stacking",
+            title: "Vertical stacking",
+            description: "Children flow top to bottom with a uniform, token-driven gap.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=stack.manifest.js.map

package/dist/manifest/stack.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.manifest.js","sourceRoot":"","sources":["../../src/manifest/stack.manifest.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;;;;;;;;;eASL,CAAC;AAEhB,MAAM,aAAa,GAAG;;;;;;;;;;;;;SAab,CAAC;AAEV,MAAM,YAAY,GAAG;;;;;;;;;;;;;SAaZ,CAAC;AAEV,MAAM,YAAY,GAAG;IACpB,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACF,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC/C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,qFAAqF;IAC9F,WAAW,EACV,2dAA2d;IAC5d,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,yEAAyE;YACtF,QAAQ,EAAE,cAAc;YACxB,MAAM,EAAE,CAAC,WAAW,CAAC;SACrB;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,GAAG;YACZ,WAAW,EAAE,mEAAmE;YAChF,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;SACtD;QACD;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,qFAAqF;YAClG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC;SAC1D;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,6CAA6C;YAC1D,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAClE;QACD;YACC,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,gEAAgE;YAC7E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,mCAAmC;YAChD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE,CAAC,GAAG,YAAY,CAAC;IACjC,WAAW,EAAE;QACZ,qHAAqH;QACrH,2EAA2E;QAC3E,iFAAiF;KACjF;IACD,IAAI,EAAE;QACL,wGAAwG;QACxG,4GAA4G;KAC5G;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,mBAAmB;YACvB,KAAK,EAAE,mBAAmB;YAC1B,WAAW,EAAE,+DAA+D;YAC5E,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;KACD;CACD,CAAC"}

package/dist/manifest/stat.manifest.d.ts

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

package/dist/manifest/stat.manifest.d.ts.map

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