@xtyle/core 0.5.0

package/dist/manifest/stat.manifest.js

@@ -0,0 +1,197 @@
+const htmlExample = `<xtyle-stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</xtyle-stat>
+
+<xtyle-stat label="Active themes" delta="-3" trend="down">1,204</xtyle-stat>
+
+<xtyle-stat label="Token coverage" size="lg" align="center">57 / 57</xtyle-stat>
+
+<xtyle-stat label="components" delta="+1" trend="up" inline>49</xtyle-stat>`;
+const svelteExample = `<script lang="ts">
+	import { Stat } from "@xtyle/svelte";
+</script>
+
+<Stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</Stat>
+
+<Stat label="Active themes" delta="-3" trend="down">1,204</Stat>
+
+<Stat label="Token coverage" size="lg" align="center">57 / 57</Stat>
+
+<Stat label="components" delta="+1" trend="up" inline>49</Stat>`;
+const astroExample = `---
+import { Stat } from "@xtyle/astro";
+---
+
+<Stat label="Monthly revenue" delta="+12.5%" trend="up" caption="vs. last month">$48,250</Stat>
+
+<Stat label="Active themes" delta="-3" trend="down">1,204</Stat>
+
+<Stat label="Token coverage" size="lg" align="center">57 / 57</Stat>
+
+<Stat label="components" delta="+1" trend="up" inline>49</Stat>`;
+const sentimentExample = `<!-- Up is bad: a rising error rate arrows up but paints red. -->
+<xtyle-stat label="Error rate" delta="+2.1%" trend="up" sentiment="negative" caption="last hour">4.8%</xtyle-stat>
+
+<!-- Down is good: latency falling arrows down and paints green. -->
+<xtyle-stat label="p95 latency" delta="-18ms" trend="down" sentiment="positive">142ms</xtyle-stat>
+
+<!-- Directional but neutral: a run-count delta shows the arrow in a muted tint, no good/bad. -->
+<xtyle-stat label="Runs" delta="-8%" trend="down" sentiment="neutral" caption="24h">312</xtyle-stat>`;
+export const statManifest = {
+    id: "stat",
+    name: "Stat",
+    category: "metrics",
+    summary: "A single metric: a prominent value with its label, optional trend delta, and caption.",
+    description: "Stat presents one figure at a glance: a large `value` (the default slot) under a small uppercase `label`, with an optional `delta` carrying a `trend` (up / down / flat) and an optional `caption` for context. The value and delta render in tabular figures so columns of stats align digit-for-digit. `trend` picks the delta's directional arrow; a separate `sentiment` (positive / negative / neutral) picks its color and defaults to the trend's own reading (up→positive/green, down→negative/red, flat→neutral). Splitting the axes lets an up-is-bad metric (a rising error rate) paint red on an up-arrow, or a sentiment-neutral metric show a direction in a muted tint, while the color is always paired with the arrow so meaning never rides on color alone. Pure presentation: compose several in a `Grid` or `Cluster` for a dashboard strip, or drop one into a `Card` header.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "stat",
+            description: "The flex-column root carrying the alignment and size classes.",
+            selector: ".xtyle-stat",
+            tokens: ["--font-sans", "--space-1"],
+        },
+        {
+            name: "label",
+            description: "The metric name: small, uppercase, and muted, rendered above the value via flex order.",
+            selector: ".xtyle-stat__label",
+            tokens: ["--text-xs", "--weight-semibold", "--leading-normal", "--fg-2"],
+        },
+        {
+            name: "value",
+            description: "The headline figure: display font, bold, tabular, in the primary ink.",
+            selector: ".xtyle-stat__value",
+            tokens: ["--font-display", "--text-xl", "--text-2xl", "--text-3xl", "--weight-bold", "--leading-tight", "--fg-0"],
+        },
+        {
+            name: "delta",
+            description: "The optional change indicator: a directional arrow (from `trend`) over a base `--neutral-text`, tinted by `sentiment` (positive `--success-vivid`, negative `--danger-vivid`, neutral `--neutral-vivid`).",
+            selector: ".xtyle-stat__delta",
+            tokens: ["--text-sm", "--weight-semibold", "--space-1", "--neutral-text", "--neutral-vivid", "--success-vivid", "--danger-vivid"],
+        },
+        {
+            name: "caption",
+            description: "An optional subtle line of context below the value.",
+            selector: ".xtyle-stat__caption",
+            tokens: ["--text-xs", "--leading-normal", "--fg-3"],
+        },
+    ],
+    props: [
+        {
+            name: "label",
+            type: "string",
+            description: "The metric name rendered above the value.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "delta",
+            type: "string",
+            description: "An optional change indicator (e.g. `+12.5%`) rendered below the value with a trend arrow.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "trend",
+            type: "StatTrend",
+            default: "flat",
+            description: "Picks the delta's directional arrow (▲ up, ▼ down, a flat bar). Also the default color, via `sentiment`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["up", "down", "flat"],
+        },
+        {
+            name: "sentiment",
+            type: "StatSentiment",
+            description: "Colors the delta independently of its arrow: positive (`--success-vivid`), negative (`--danger-vivid`), neutral (`--neutral-vivid`). Omit to derive from `trend` (up→positive, down→negative, flat→neutral), so an up-is-bad metric sets `trend=\"up\" sentiment=\"negative\"` and a directional-but-neutral one sets `sentiment=\"neutral\"`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["positive", "negative", "neutral"],
+        },
+        {
+            name: "caption",
+            type: "string",
+            description: "An optional subtle line of context below the value.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Scales the value (`sm` → `xl`, `md` → `2xl`, `lg` → `3xl`).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "align",
+            type: "StatAlign",
+            default: "start",
+            description: "Block alignment of the stat's contents.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "center"],
+        },
+        {
+            name: "inline",
+            type: "boolean",
+            default: "false",
+            description: "Lays the stat out horizontally (label, value, and trend delta on one baseline, like a ticker) for a status strip or a dense row instead of a dashboard tile.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact value.", className: "xtyle-stat--sm" },
+        { name: "md", description: "Default.", className: "xtyle-stat", isDefault: true },
+        { name: "lg", description: "Large display value.", className: "xtyle-stat--lg" },
+    ],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The metric value.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--font-display",
+        "--text-xs",
+        "--text-sm",
+        "--text-xl",
+        "--text-2xl",
+        "--text-3xl",
+        "--weight-semibold",
+        "--weight-bold",
+        "--leading-tight",
+        "--leading-normal",
+        "--fg-0",
+        "--fg-2",
+        "--fg-3",
+        "--neutral-text",
+        "--success-vivid",
+        "--danger-vivid",
+        "--neutral-vivid",
+        "--space-1",
+        "--space-2",
+    ],
+    composition: [
+        "Lay several in a `Grid` or `Cluster` for a dashboard strip; the tabular figures keep the values aligned.",
+        "Drop one into a `Card` to head a panel with its key number.",
+        "Pair the `delta` + `trend` with period-over-period figures; the arrow carries direction without relying on color.",
+        "For a metric where up is bad (error rate, latency, queue depth) set `trend=\"up\" sentiment=\"negative\"`; for a direction that carries no good/bad meaning set `sentiment=\"neutral\"` to keep the arrow but drop the green/red.",
+    ],
+    a11y: [
+        "The trend pairs its color with a directional arrow (▲ up, ▼ down, a flat bar for no change), so the change reads without color perception (WCAG 1.4.1).",
+        "The arrow glyph is a decorative `aria-hidden` SVG; the delta's meaning comes from its text.",
+        "Order is visual only; the label sits above the value via flex `order`, while the DOM keeps value-then-label, so a screen reader reads the figure first.",
+    ],
+    examples: [
+        {
+            id: "metrics-trends-and-sizes",
+            title: "Metrics, trends, and sizes",
+            description: "A value under its label, with optional trend deltas and captions, across the three sizes and both alignments, plus the `inline` ticker layout that lays label, value, and delta on one line.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "direction-vs-sentiment",
+            title: "Direction vs. sentiment",
+            description: "`sentiment` colors the delta independently of the `trend` arrow: an up-is-bad error rate arrows up but reads red, a falling latency arrows down but reads green, and a neutral run-count keeps the arrow without a good/bad tint.",
+            source: { html: sentimentExample },
+        },
+    ],
+};
+//# sourceMappingURL=stat.manifest.js.map

package/dist/manifest/stat.manifest.js.map

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

package/dist/manifest/statusbar.manifest.d.ts

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

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

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

package/dist/manifest/statusbar.manifest.js

@@ -0,0 +1,232 @@
+const htmlExample = `<xtyle-statusbar label="Editor status">
+	<span class="xtyle-statusbar__item xtyle-statusbar__item--strong" part="item">main.ts</span>
+	<span class="xtyle-statusbar__item" part="item">UTF-8</span>
+	<span class="xtyle-statusbar__item" part="item">Ln 42, Col 8</span>
+	<span class="xtyle-statusbar__spacer" part="spacer"></span>
+	<span class="xtyle-statusbar__item" part="item">Spaces: 2</span>
+	<span class="xtyle-statusbar__item" part="item">TypeScript</span>
+</xtyle-statusbar>
+
+<xtyle-statusbar live label="Build status">
+	<span class="xtyle-statusbar__item xtyle-statusbar__item--strong" part="item">Build passing</span>
+	<span class="xtyle-statusbar__spacer" part="spacer"></span>
+	<span class="xtyle-statusbar__item" part="item">12.4s</span>
+</xtyle-statusbar>`;
+const svelteExample = `<script lang="ts">
+	import { Statusbar } from "@xtyle/svelte";
+</script>
+
+<Statusbar label="Editor status">
+	<span class="xtyle-statusbar__item xtyle-statusbar__item--strong">main.ts</span>
+	<span class="xtyle-statusbar__item">UTF-8</span>
+	<span class="xtyle-statusbar__item">Ln 42, Col 8</span>
+	<span class="xtyle-statusbar__spacer"></span>
+	<span class="xtyle-statusbar__item">Spaces: 2</span>
+	<span class="xtyle-statusbar__item">TypeScript</span>
+</Statusbar>
+
+<Statusbar live label="Build status">
+	<span class="xtyle-statusbar__item xtyle-statusbar__item--strong">Build passing</span>
+	<span class="xtyle-statusbar__spacer"></span>
+	<span class="xtyle-statusbar__item">12.4s</span>
+</Statusbar>`;
+const astroExample = `---
+import { Statusbar } from "@xtyle/astro";
+---
+
+<Statusbar label="Editor status">
+	<span class="xtyle-statusbar__item xtyle-statusbar__item--strong">main.ts</span>
+	<span class="xtyle-statusbar__item">UTF-8</span>
+	<span class="xtyle-statusbar__item">Ln 42, Col 8</span>
+	<span class="xtyle-statusbar__spacer"></span>
+	<span class="xtyle-statusbar__item">Spaces: 2</span>
+	<span class="xtyle-statusbar__item">TypeScript</span>
+</Statusbar>
+
+<Statusbar live label="Build status">
+	<span class="xtyle-statusbar__item xtyle-statusbar__item--strong">Build passing</span>
+	<span class="xtyle-statusbar__spacer"></span>
+	<span class="xtyle-statusbar__item">12.4s</span>
+</Statusbar>`;
+export const statusbarManifest = {
+    id: "statusbar",
+    name: "Statusbar",
+    category: "shell",
+    summary: "The footer status strip: a compact, monospace row of status items separated by flexible spacers.",
+    description: "Statusbar is the thin strip that lives along the bottom of an app shell, reporting ambient state: cursor position, encoding, branch, sync status, build result. It is a flex row of `item` parts you space apart with one or more `spacer` parts that absorb the slack, so groups push to the left and right edges. The default treatment is small monospace ink at low contrast; an `item--strong` modifier lifts a single item to full-contrast foreground for the one fact that matters most. A `live` flag turns the bar into an `aria-live` region so screen readers announce status changes as they happen; ideal for build, sync, or save indicators that update in place. Under `overflow=\"collapse\"` it measures the row with a `ResizeObserver`, ranks items by `data-priority` (a `data-required` item never drops), and folds the lowest-priority ones into a `+N` popover until the row fits; by default it clones the dropped items into a shadow popover, which is right for plain text/token cells, though a clone can't carry light-DOM styles or event handlers, so set `manual-overflow` for styled/interactive cells. Whenever the dropped set changes, collapse fires an `overflow-change` `CustomEvent` (`bubbles`, `composed`, deduped against the last emit) whose `detail` carries the actual slotted light-DOM cell elements (`{ hidden: HTMLElement[]; visible: HTMLElement[] }`) so a consumer knows exactly which of its own cells dropped and can render them itself with their original styles and handlers intact.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "statusbar",
+            description: "The footer strip, a flex row carrying the monospace status items.",
+            selector: ".xtyle-statusbar",
+            tokens: [
+                "--space-4",
+                "--space-1",
+                "--space-6",
+                "--bg-1",
+                "--border-thin",
+                "--line",
+                "--font-mono",
+                "--text-xs",
+                "--fg-2",
+            ],
+        },
+        {
+            name: "item",
+            description: "A single status entry: an inline group of label text and any inline graphic.",
+            selector: ".xtyle-statusbar__item",
+            tokens: ["--space-1"],
+        },
+        {
+            name: "spacer",
+            description: "A flexible gap that absorbs free space, pushing items to opposite edges.",
+            selector: ".xtyle-statusbar__spacer",
+            tokens: ["--space-2"],
+        },
+        {
+            name: "overflow",
+            description: "The `+N` affordance and its popover, present only under `overflow=\"collapse\"`. The trigger is a compact button; the popover escapes the bar's clip via the top layer and lists the dropped items.",
+            selector: ".xtyle-statusbar__overflow",
+            tokens: [
+                "--space-1",
+                "--space-2",
+                "--space-8",
+                "--bg-2",
+                "--fg-0",
+                "--fg-1",
+                "--fg-2",
+                "--font-mono",
+                "--text-xs",
+                "--border-thin",
+                "--radius-sm",
+                "--radius-md",
+                "--surface-overlay",
+                "--surface-overlay-border",
+                "--elevation-3",
+            ],
+        },
+    ],
+    props: [
+        {
+            name: "live",
+            type: "boolean",
+            default: "false",
+            description: "Marks the bar as a polite live region (`role=\"status\"`, `aria-live=\"polite\"`) so status changes are announced.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "An accessible name for the bar (`aria-label`), useful when the strip is a live region.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "overflow",
+            type: '"clip" | "wrap" | "scroll" | "collapse"',
+            default: "clip",
+            description: "How the bar handles content wider than its width. `clip` (default) hides the overflow; `wrap` lets items flow onto multiple lines; `scroll` gives the bar a horizontal scrollbar; `collapse` ranks items and folds the lowest-priority ones into a `+N` popover until the row fits. `collapse` is JS-driven (a `ResizeObserver` measures the fit) and needs the live `html` or `svelte` element; the static `astro` binding has no element to upgrade, so it falls back to `scroll` there to keep every cell reachable.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["clip", "wrap", "scroll", "collapse"],
+        },
+        {
+            name: "separated",
+            type: "boolean",
+            default: "false",
+            description: "Draws a thin divider between adjacent items at the bar's own spacing, so each cell stays an individual item (and `collapse` counts and drops them independently) instead of carrying its own `Separator`. The leading divider is suppressed at the start of each run (the first item and any item after a `spacer`) and stays correct as items collapse.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "data-priority",
+            type: "number (per-item attribute)",
+            default: "0",
+            description: "Set on an individual item (not the bar). Under `overflow=\"collapse\"`, items drop lowest-priority-first when the row can't fit; higher values are kept longer. Ties drop right-to-left so leading items survive. Ignored by every other overflow mode.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "data-required",
+            type: "boolean (per-item attribute)",
+            default: "false",
+            description: "Set on an individual item. Under `overflow=\"collapse\"`, a required item is never dropped into the `+N` popover regardless of width. Ignored by every other overflow mode.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "manual-overflow",
+            type: "boolean",
+            default: "false",
+            description: "Inverts ownership of the overflow contents under `overflow=\"collapse\"`. Off (default), the element renders its own `+N` trigger and a shadow popover, cloning the dropped items into it; this is clean for plain text/token cells, but a clone drops light-DOM (framework-scoped) styles and event handlers, so styled/interactive cells degrade. On, the element still measures, ranks, and hides the lowest-priority cells (`display:none` + a `data-xtyle-collapsed` marker) but renders neither the `+N` trigger nor the shadow popover. Instead it fires `overflow-change` so the consumer renders its own light-DOM popover from its original, styled, wired cells. Either way the element fires `overflow-change`; only manual mode suppresses the built-in affordance. Bindings: live on `html`/`svelte`; the static `astro` binding has no element to drive, so the prop is accepted for parity but inert (collapse already falls back to `scroll` there).",
+            bindings: ["html", "svelte"],
+        },
+    ],
+    variants: [
+        {
+            name: "item-strong",
+            description: "Lifts a single item to full-contrast foreground and medium weight for emphasis.",
+            className: "xtyle-statusbar__item--strong",
+            tokens: ["--fg-0", "--weight-medium"],
+        },
+    ],
+    sizes: [],
+    states: [
+        {
+            name: "item-focus-visible",
+            description: "Keyboard focus on an interactive item: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-statusbar__item:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring", "--radius-sm"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The status items and spacers, in order.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--space-1",
+        "--space-2",
+        "--space-4",
+        "--space-6",
+        "--space-8",
+        "--bg-1",
+        "--bg-2",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--line",
+        "--font-mono",
+        "--text-xs",
+        "--weight-medium",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-sm",
+        "--radius-md",
+        "--elevation-3",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--ring",
+    ],
+    composition: [
+        "Sits at the bottom of AppShell as the footer strip, mirroring Toolbar at the top.",
+        "Drop a Badge or inline SVG inside an `item` for sync, branch, or status glyphs.",
+        "Use multiple `spacer` parts to split the bar into left / center / right groups.",
+        "For styled or interactive cells, set `manual-overflow` and listen for `overflow-change`: the element ranks and hides the dropped cells, your code reads `detail.hidden` (the originals, styles and handlers intact) and renders them into your own `+N` popover.",
+    ],
+    a11y: [
+        "Renders a native `<footer>` so it is exposed as a content landmark.",
+        "`live` makes the strip a polite `aria-live` region (`role=\"status\"`) so in-place status updates are announced without stealing focus.",
+        "`label` supplies an `aria-label` to name the region when its purpose is not obvious from context.",
+        "Focusable items receive a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "State belongs in the item text, not in color alone; the strong modifier adds weight as well as contrast.",
+    ],
+    examples: [
+        {
+            id: "items-and-spacer",
+            title: "Items, spacers, and a live region",
+            description: "A status row split by a spacer, plus a live-updating build bar.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=statusbar.manifest.js.map

package/dist/manifest/statusbar.manifest.js.map

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

package/dist/manifest/swatch.manifest.d.ts

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

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

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