@xtyle/core 0.5.0

package/dist/manifest/toolbar.manifest.js

@@ -0,0 +1,243 @@
+const htmlExample = `<xtyle-toolbar heading="Project Atlas" landmark>
+	<svg slot="start" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+		<path fill="currentColor" d="M3 5h18v2H3V5Zm0 6h18v2H3v-2Zm0 6h18v2H3v-2Z" />
+	</svg>
+	<span slot="end">
+		<xtyle-button variant="ghost" tone="neutral">Settings</xtyle-button>
+		<xtyle-button variant="solid" tone="accent">Publish</xtyle-button>
+	</span>
+</xtyle-toolbar>
+
+<xtyle-toolbar heading="Docs" href="/" size="sm" bare>
+	<nav slot="center">
+		<xtyle-button variant="link" tone="neutral" href="/guide">Guide</xtyle-button>
+		<xtyle-button variant="link" tone="neutral" href="/api">API</xtyle-button>
+	</nav>
+</xtyle-toolbar>`;
+const svelteExample = `<script lang="ts">
+	import { Toolbar, Button } from "@xtyle/svelte";
+</script>
+
+<Toolbar heading="Project Atlas" landmark>
+	{#snippet start()}
+		<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+			<path fill="currentColor" d="M3 5h18v2H3V5Zm0 6h18v2H3v-2Zm0 6h18v2H3v-2Z" />
+		</svg>
+	{/snippet}
+	{#snippet end()}
+		<Button variant="ghost" tone="neutral">Settings</Button>
+		<Button variant="solid" tone="accent">Publish</Button>
+	{/snippet}
+</Toolbar>
+
+<Toolbar heading="Docs" href="/" size="sm" bare>
+	{#snippet center()}
+		<Button variant="link" tone="neutral" href="/guide">Guide</Button>
+		<Button variant="link" tone="neutral" href="/api">API</Button>
+	{/snippet}
+</Toolbar>`;
+const astroExample = `---
+import { Toolbar, Button } from "@xtyle/astro";
+---
+
+<Toolbar heading="Project Atlas" landmark>
+	<svg slot="start" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+		<path fill="currentColor" d="M3 5h18v2H3V5Zm0 6h18v2H3v-2Zm0 6h18v2H3v-2Z" />
+	</svg>
+	<Fragment slot="end">
+		<Button variant="ghost" tone="neutral">Settings</Button>
+		<Button variant="solid" tone="accent">Publish</Button>
+	</Fragment>
+</Toolbar>
+
+<Toolbar heading="Docs" href="/" size="sm" bare>
+	<nav slot="center">
+		<Button variant="link" tone="neutral" href="/guide">Guide</Button>
+		<Button variant="link" tone="neutral" href="/api">API</Button>
+	</nav>
+</Toolbar>`;
+export const toolbarManifest = {
+    id: "toolbar",
+    name: "Toolbar",
+    category: "shell",
+    summary: "The header bar: a title plus structured start, center, and end regions for actions and navigation.",
+    description: "Toolbar is the chrome bar that runs across the top of an app, a page, or a panel. It carries an optional `heading` (a plain title, or a link when given an `href`) and three layout regions (start, center, and end) that flex apart so leading controls sit left, primary content centers, and trailing actions push right. It adds layout, not semantics: by default it renders a neutral `<div>` with no landmark role, and opts into a page-banner `<header>` only when you ask for it with `landmark`, since whether a given bar is *the* page banner is the consumer's call. A `bare` mode drops the surface fill and divider for nesting inside another container, `sticky` pins it to the top of its scroll area, and the size scale tightens or loosens its padding.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "toolbar",
+            description: "The bar element carrying the size, sticky, and bare classes; a `<div>` by default, a `<header>` landmark when opted in.",
+            selector: ".xtyle-toolbar",
+            tokens: [
+                "--font-sans",
+                "--fg-1",
+                "--bg-1",
+                "--border-thin",
+                "--line",
+                "--space-2",
+                "--space-3",
+                "--space-4",
+                "--space-8",
+            ],
+        },
+        {
+            name: "title",
+            description: "The heading text; a `<span>`, or a focusable `<a>` when an `href` is set.",
+            selector: ".xtyle-toolbar__title",
+            tokens: ["--font-display", "--weight-bold", "--text-lg", "--leading-tight", "--fg-0", "--link-hover"],
+        },
+        {
+            name: "group",
+            description: "One of the three flex regions (start / center / end) that hold the bar's controls.",
+            selector: ".xtyle-toolbar__group",
+            tokens: ["--space-2"],
+        },
+        {
+            name: "spacer",
+            description: "A flexible gap that pushes the content on either side of it apart.",
+            selector: ".xtyle-toolbar__spacer",
+        },
+    ],
+    props: [
+        {
+            name: "heading",
+            type: "string",
+            description: "The bar's title. Rendered as a link when `href` is also set.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "href",
+            type: "string",
+            description: "When set alongside `heading`, the title renders as a focusable `<a>` (typically the home link).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Bar density: tightens or loosens padding, gap, and minimum height.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "landmark",
+            type: "boolean",
+            default: "false",
+            description: "Renders the bar as a `<header>` banner landmark instead of a plain `<div>`. Opt in only when this is *the* page header.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "sticky",
+            type: "boolean",
+            default: "false",
+            description: "Pins the bar to the top of its scroll container.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "bare",
+            type: "boolean",
+            default: "false",
+            description: "Drops the surface fill and bottom divider, for nesting inside another surface.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "bare",
+            description: "Transparent background with no divider. Chrome for nesting, not for standing alone.",
+            className: "xtyle-toolbar--bare",
+        },
+        {
+            name: "sticky",
+            description: "Pinned to the top of its scroll area at an elevated stacking layer.",
+            className: "xtyle-toolbar--sticky",
+            tokens: ["--elevation-3"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Tight, compact density.", className: "xtyle-toolbar--sm" },
+        { name: "md", description: "Default.", className: "xtyle-toolbar", isDefault: true },
+        { name: "lg", description: "Roomy, generous padding.", className: "xtyle-toolbar--lg" },
+    ],
+    states: [
+        {
+            name: "title-hover",
+            description: "Pointer over a linked title. The title shifts to the link-hover ink.",
+            selector: "a.xtyle-toolbar__title:hover",
+            tokens: ["--link-hover"],
+        },
+        {
+            name: "title-focus-visible",
+            description: "Keyboard focus on a linked title. A token ring plus a transparent outline that becomes real in forced-colors mode.",
+            selector: "a.xtyle-toolbar__title:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring", "--radius-sm"],
+        },
+    ],
+    slots: [
+        {
+            name: "start",
+            description: "Leading region: typically a menu trigger, logo, or back button.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "center",
+            description: "Centered region: typically navigation, search, or a breadcrumb.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "end",
+            description: "Trailing region: typically primary actions, pushed to the far edge.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "default",
+            description: "Unstructured content placed between the heading and the center region, for bars that don't need the three named regions.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--font-display",
+        "--text-lg",
+        "--weight-bold",
+        "--leading-tight",
+        "--fg-0",
+        "--fg-1",
+        "--bg-1",
+        "--line",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-sm",
+        "--ring",
+        "--link-hover",
+        "--elevation-3",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--space-7",
+        "--space-8",
+    ],
+    composition: [
+        "Fill the regions with Button (ghost/link variants read best as bar actions) and Badge for status pips.",
+        "Pair a `landmark` Toolbar with the app's main content region so assistive tech gets a banner/main split.",
+        "Drop `bare` Toolbars inside a Panel or Card header to reuse the region layout without the standalone chrome.",
+    ],
+    a11y: [
+        "Defaults to a plain `<div>` with no landmark role; opts into a `<header>` banner only via `landmark`, so the page never ends up with competing banners.",
+        "Avoids the ARIA `toolbar` role. That role implies roving-tabindex keyboard semantics this presentational bar does not manage; its controls keep their own native focus order.",
+        "A linked title is a real `<a>`, so it is keyboard-focusable and shows the token focus ring plus the forced-colors outline promotion.",
+        "Decorative leading graphics passed to the start region should be marked `aria-hidden`; the accessible name comes from the heading or the controls themselves.",
+    ],
+    examples: [
+        {
+            id: "app-and-docs-bars",
+            title: "App banner and docs bar",
+            description: "A landmark app header with leading icon and trailing actions, and a bare linked-title docs bar with centered nav.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=toolbar.manifest.js.map

package/dist/manifest/toolbar.manifest.js.map

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

package/dist/manifest/tooltip.manifest.d.ts

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

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

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

package/dist/manifest/tooltip.manifest.js

@@ -0,0 +1,248 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-tooltip text="Save your changes" placement="top">
+	<button class="xtyle-button xtyle-button--solid xtyle-button--accent">Save</button>
+</xtyle-tooltip>
+
+<xtyle-tooltip placement="right">
+	<button class="xtyle-button xtyle-button--outline xtyle-button--neutral" aria-label="Settings">
+		<svg slot="icon-start" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+			<path fill="currentColor" d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" />
+		</svg>
+	</button>
+	<span slot="content">Open <strong>settings</strong></span>
+</xtyle-tooltip>`;
+const svelteExample = `<script lang="ts">
+	import { Tooltip, Button } from "@xtyle/svelte";
+</script>
+
+<Tooltip text="Save your changes" placement="top">
+	<Button variant="solid" tone="accent">Save</Button>
+</Tooltip>
+
+<Tooltip placement="right">
+	<Button variant="outline" tone="neutral" iconOnly ariaLabel="Settings">
+		{#snippet iconStart()}
+			<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+				<path fill="currentColor" d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" />
+			</svg>
+		{/snippet}
+	</Button>
+	{#snippet content()}Open <strong>settings</strong>{/snippet}
+</Tooltip>`;
+const astroExample = `---
+import { Tooltip, Button } from "@xtyle/astro";
+---
+
+<Tooltip text="Save your changes" placement="top">
+	<Button variant="solid" tone="accent">Save</Button>
+</Tooltip>
+
+<Tooltip placement="right">
+	<Button variant="outline" tone="neutral" iconOnly aria-label="Settings">
+		<svg slot="icon-start" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+			<path fill="currentColor" d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" />
+		</svg>
+	</Button>
+	<span slot="content">Open <strong>settings</strong></span>
+</Tooltip>`;
+export const tooltipManifest = {
+    id: "tooltip",
+    name: "Tooltip",
+    category: "overlay",
+    summary: "A hover/focus hint that floats a short description beside its trigger, on any of four sides.",
+    description: "Tooltip wraps an interactive trigger and surfaces a short, supplementary hint on hover and on keyboard focus. The hint is linked to the trigger with `aria-describedby` so assistive tech announces it as the element's description, and it floats to one of four `placement` sides (top, bottom, left, right) over an elevated overlay surface with a pointing arrow. It satisfies WCAG 1.4.13 Content on Hover or Focus: the hint is dismissible with Escape, hoverable (the pointer can travel onto the tooltip without it vanishing), and persistent (it stays until focus leaves or the pointer departs both trigger and tooltip). Tip text comes from the `text` prop, or richer markup from the `content` slot. The hint scales past a one-line label: a `mode` of `rich` opens it into a roomier, left-aligned panel that wraps multi-line text and holds structured content (a detail card, a stat or progress readout); `size` dials the padding, and a `tone` colors it, as a leading edge over the neutral overlay by default or as a fully `soft`/`solid` toned surface.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "tooltip",
+            description: "The inline wrapper around the trigger; carries the placement class and anchors the floating content.",
+            selector: ".xtyle-tooltip",
+        },
+        {
+            name: "content",
+            description: "The floating hint surface: an elevated overlay panel holding the tip text or content slot.",
+            selector: ".xtyle-tooltip__content",
+            tokens: [
+                "--font-sans",
+                "--text-sm",
+                "--weight-normal",
+                "--leading-tight",
+                "--fg-0",
+                "--surface-overlay",
+                "--surface-overlay-border",
+                "--border-thin",
+                "--radius-sm",
+                "--elevation-2",
+                "--space-1",
+                "--space-2",
+                "--space-8",
+                "--duration-fast",
+                "--ease-standard",
+            ],
+        },
+        {
+            name: "arrow",
+            description: "The rotated square nub pointing from the content back toward the trigger.",
+            selector: ".xtyle-tooltip__arrow",
+            tokens: ["--space-1", "--space-2", "--surface-overlay", "--surface-overlay-border", "--border-thin"],
+        },
+        {
+            name: "edge",
+            description: "The leading tone bar shown along the content's start edge when a `tone` is set without `soft`/`solid`; zero-width otherwise.",
+            selector: ".xtyle-tooltip__content::before",
+            tokens: ["--space-1", "--radius-sm"],
+        },
+    ],
+    props: [
+        {
+            name: "text",
+            type: "string",
+            description: "The tip text. Use the `content` slot instead for richer markup.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "placement",
+            type: "Placement",
+            default: "top",
+            description: "Which side of the trigger the hint floats on.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["top", "bottom", "left", "right"],
+        },
+        {
+            name: "open",
+            type: "boolean",
+            default: "false",
+            description: "Reflects/controls visibility. Normally driven by hover and focus; settable to force the hint open.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tone",
+            type: "Tone",
+            description: "Colors the hint with one of the register's tones. By default the surface stays a neutral overlay and the tone shows as a leading edge bar; pair with `variant` for a fully toned surface.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "variant",
+            type: "'soft' | 'solid'",
+            description: "How a `tone` fills the surface. Omit for the neutral surface with a leading tone edge; `soft` washes the whole hint in the tone's soft tint; `solid` fills it with the tone. Both color the arrow to match. No effect without a `tone`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["soft", "solid"],
+        },
+        {
+            name: "mode",
+            type: "'hint' | 'rich'",
+            default: "hint",
+            description: "Content density. `hint` is the tight, single-line bubble for short text; `rich` is a roomier, left-aligned panel that wraps multi-line text and holds structured content (detail cards, stat or progress readouts).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["hint", "rich"],
+        },
+        {
+            name: "size",
+            type: "'sm' | 'md'",
+            default: "sm",
+            description: "Padding scale. `sm` is the compact default; `md` is roomier. Independent of `mode`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md"],
+        },
+    ],
+    variants: [
+        {
+            name: "soft",
+            description: "With a tone, washes the whole hint in the tone's soft tint with a matching border and arrow.",
+            className: "xtyle-tooltip--soft",
+            tokens: ["--info-bg", "--info-text", "--info"],
+        },
+        {
+            name: "solid",
+            description: "With a tone, fills the hint with the solid tone and its on-tone text and arrow.",
+            className: "xtyle-tooltip--solid",
+            tokens: ["--info", "--info-fg"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact padding (the default).", className: "", isDefault: true },
+        { name: "md", description: "Roomier padding.", className: "xtyle-tooltip--md" },
+    ],
+    states: [
+        {
+            name: "open",
+            description: "Hint visible: fades in via the content's data-open flag while pointer or focus is on trigger or tooltip.",
+            selector: '.xtyle-tooltip__content[data-open="true"]',
+        },
+        {
+            name: "top",
+            description: "Hint floats above the trigger; arrow points down.",
+            selector: ".xtyle-tooltip--top .xtyle-tooltip__content",
+        },
+        {
+            name: "bottom",
+            description: "Hint floats below the trigger; arrow points up.",
+            selector: ".xtyle-tooltip--bottom .xtyle-tooltip__content",
+        },
+        {
+            name: "left",
+            description: "Hint floats to the left of the trigger; arrow points right.",
+            selector: ".xtyle-tooltip--left .xtyle-tooltip__content",
+        },
+        {
+            name: "right",
+            description: "Hint floats to the right of the trigger; arrow points left.",
+            selector: ".xtyle-tooltip--right .xtyle-tooltip__content",
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The trigger element the tooltip describes.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "content",
+            description: "Rich hint markup, used in place of the `text` prop.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-sm",
+        "--weight-normal",
+        "--leading-tight",
+        "--leading-normal",
+        "--fg-0",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--border-thin",
+        "--radius-sm",
+        "--elevation-2",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-8",
+        "--duration-fast",
+        "--ease-standard",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-bg`, `--${t}-fg`, `--${t}-text`]),
+    ],
+    composition: [
+        "Wrap a Button (or any focusable control) as the trigger; icon-only buttons benefit most from a tooltip.",
+        "Keep the hint short and supplementary; never put essential or interactive content only in a tooltip.",
+        "For a label that must always be readable, use a visible caption instead; tooltips are progressive enhancement.",
+    ],
+    a11y: [
+        "The hint carries `role=\"tooltip\"` and is linked to the trigger via `aria-describedby`, so it is announced as the trigger's description.",
+        "Shows on BOTH pointer hover and keyboard focus, so the hint is reachable without a mouse.",
+        "WCAG 1.4.13 dismissible: Escape hides the hint while the trigger keeps focus.",
+        "WCAG 1.4.13 hoverable: the pointer can move onto the tooltip itself without it disappearing.",
+        "WCAG 1.4.13 persistent: the hint stays until focus leaves or the pointer departs both trigger and tooltip.",
+        "The arrow is decorative (`aria-hidden`); the binding warns at runtime when neither `text` nor a `content` slot is supplied.",
+    ],
+    examples: [
+        {
+            id: "placement-and-content",
+            title: "Placement and rich content",
+            description: "A plain-text hint above a button, and a rich-markup hint to the right of an icon button.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=tooltip.manifest.js.map

package/dist/manifest/tooltip.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.manifest.js","sourceRoot":"","sources":["../../src/manifest/tooltip.manifest.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,GAAG;;;;;;;;;;;iBAWH,CAAC;AAElB,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;WAiBX,CAAC;AAEZ,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;WAeV,CAAC;AAEZ,MAAM,CAAC,MAAM,eAAe,GAAsB;IACjD,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,8FAA8F;IACvG,WAAW,EACV,uhCAAuhC;IACxhC,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,sGAAsG;YACnH,QAAQ,EAAE,gBAAgB;SAC1B;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,4FAA4F;YACzG,QAAQ,EAAE,yBAAyB;YACnC,MAAM,EAAE;gBACP,aAAa;gBACb,WAAW;gBACX,iBAAiB;gBACjB,iBAAiB;gBACjB,QAAQ;gBACR,mBAAmB;gBACnB,0BAA0B;gBAC1B,eAAe;gBACf,aAAa;gBACb,eAAe;gBACf,WAAW;gBACX,WAAW;gBACX,WAAW;gBACX,iBAAiB;gBACjB,iBAAiB;aACjB;SACD;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,2EAA2E;YACxF,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,eAAe,CAAC;SACpG;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EACV,8HAA8H;YAC/H,QAAQ,EAAE,iCAAiC;YAC3C,MAAM,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC;SACpC;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,iEAAiE;YAC9E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,+CAA+C;YAC5D,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;SAC3C;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,oGAAoG;YACjH,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,WAAW,EACV,2LAA2L;YAC5L,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;SACxB;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,kBAAkB;YACxB,WAAW,EACV,yOAAyO;YAC1O,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;SAC1B;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM;YACf,WAAW,EACV,qNAAqN;YACtN,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SACzB;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,qFAAqF;YAClG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;SACrB;KACD;IACD,QAAQ,EAAE;QACT;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,8FAA8F;YAC3G,SAAS,EAAE,qBAAqB;YAChC,MAAM,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,QAAQ,CAAC;SAC9C;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,iFAAiF;YAC9F,SAAS,EAAE,sBAAsB;YACjC,MAAM,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC;SAC/B;KACD;IACD,KAAK,EAAE;QACN,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,gCAAgC,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE;QAC7F,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,mBAAmB,EAAE;KAC/E;IACD,MAAM,EAAE;QACP;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,0GAA0G;YACvH,QAAQ,EAAE,2CAA2C;SACrD;QACD;YACC,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,mDAAmD;YAChE,QAAQ,EAAE,6CAA6C;SACvD;QACD;YACC,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,iDAAiD;YAC9D,QAAQ,EAAE,gDAAgD;SAC1D;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,6DAA6D;YAC1E,QAAQ,EAAE,8CAA8C;SACxD;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,6DAA6D;YAC1E,QAAQ,EAAE,+CAA+C;SACzD;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,4CAA4C;YACzD,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;KACD;IACD,cAAc,EAAE;QACf,aAAa;QACb,WAAW;QACX,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,QAAQ;QACR,mBAAmB;QACnB,0BAA0B;QAC1B,eAAe;QACf,aAAa;QACb,eAAe;QACf,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,iBAAiB;QACjB,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,yGAAyG;QACzG,sGAAsG;QACtG,gHAAgH;KAChH;IACD,IAAI,EAAE;QACL,2IAA2I;QAC3I,2FAA2F;QAC3F,+EAA+E;QAC/E,8FAA8F;QAC9F,4GAA4G;QAC5G,6HAA6H;KAC7H;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,uBAAuB;YAC3B,KAAK,EAAE,4BAA4B;YACnC,WAAW,EAAE,0FAA0F;YACvG,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;KACD;CACD,CAAC"}

package/dist/manifest/tree.manifest.d.ts

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

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

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