@xtyle/core 0.5.0

package/dist/manifest/dialog.manifest.js

@@ -0,0 +1,267 @@
+const htmlExample = `<xtyle-button variant="solid" tone="accent" onclick="document.getElementById('confirm').showModal()">
+	Delete account
+</xtyle-button>
+
+<xtyle-dialog id="confirm" heading="Delete account?">
+	<p>This permanently removes your account and all of its data. This cannot be undone.</p>
+	<div slot="footer">
+		<xtyle-button variant="ghost" tone="neutral" onclick="document.getElementById('confirm').close()">
+			Cancel
+		</xtyle-button>
+		<xtyle-button variant="solid" tone="danger">Delete</xtyle-button>
+	</div>
+</xtyle-dialog>`;
+const svelteExample = `<script lang="ts">
+	import { Button, Dialog } from "@xtyle/svelte";
+
+	let open = $state(false);
+</script>
+
+<Button variant="solid" tone="accent" onclick={() => (open = true)}>Delete account</Button>
+
+<Dialog bind:open heading="Delete account?" size="sm">
+	<p>This permanently removes your account and all of its data. This cannot be undone.</p>
+	{#snippet footer()}
+		<Button variant="ghost" tone="neutral" onclick={() => (open = false)}>Cancel</Button>
+		<Button variant="solid" tone="danger" onclick={() => (open = false)}>Delete</Button>
+	{/snippet}
+</Dialog>`;
+const astroExample = `---
+import { Button, Dialog } from "@xtyle/astro";
+---
+
+<Button variant="solid" tone="accent" id="open-confirm">Delete account</Button>
+
+<Dialog heading="Delete account?">
+	<p>This permanently removes your account and all of its data. This cannot be undone.</p>
+	<div slot="footer">
+		<Button variant="ghost" tone="neutral" id="cancel-confirm">Cancel</Button>
+		<Button variant="solid" tone="danger">Delete</Button>
+	</div>
+</Dialog>
+
+<script>
+	const dialog = document.querySelector("xtyle-dialog");
+	document.getElementById("open-confirm")?.addEventListener("click", () => dialog?.showModal());
+	document.getElementById("cancel-confirm")?.addEventListener("click", () => dialog?.close());
+</script>`;
+export const dialogManifest = {
+    id: "dialog",
+    name: "Dialog",
+    category: "overlay",
+    summary: "A centered modal built on the native `<dialog>` element: scrim, focus trap, and Esc-to-close come for free.",
+    description: "Dialog is a centered modal that wraps the platform `<dialog>` element, so the native modal machinery (the top-layer scrim, the focus trap, focus restore on close, `Escape` to dismiss, and the `role`/`aria-modal` semantics) all comes from the browser rather than re-implemented JavaScript. Open and close it imperatively with `showModal()` / `close()` (or the reactive `open` prop in the framework wrappers). It lays out a header, a scrolling body, and a footer via named slots, and ships a close button by default. The header is wired to the dialog with `aria-labelledby` whenever a `heading` (or explicit `labelledby`) is supplied; a dialog that brings its own `header` slot instead names itself with `label`, since `aria-labelledby` cannot reach a slotted title across the shadow boundary. Three sizes (sm, md, lg) cap its width while it stays responsive on small screens.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "dialog",
+            description: "The native `<dialog>` surface holding the modal; the elevated panel above the scrim.",
+            selector: ".xtyle-dialog",
+            tokens: [
+                "--font-sans",
+                "--text-body",
+                "--leading-normal",
+                "--fg-0",
+                "--surface-overlay",
+                "--surface-overlay-border",
+                "--border-thin",
+                "--radius-lg",
+                "--elevation-5",
+                "--space-5",
+                "--space-6",
+            ],
+        },
+        {
+            name: "scrim",
+            description: "The native `::backdrop` pseudo-element dimming the page behind the modal.",
+            selector: ".xtyle-dialog::backdrop",
+            tokens: ["--scrim"],
+        },
+        {
+            name: "header",
+            description: "The top region carrying the title slot and the close button, separated by a hairline.",
+            selector: ".xtyle-dialog__header",
+            tokens: ["--space-3", "--space-4", "--space-5", "--border-thin", "--line"],
+        },
+        {
+            name: "body",
+            description: "The scrolling content region between header and footer.",
+            selector: ".xtyle-dialog__body",
+            tokens: ["--space-5", "--fg-1"],
+        },
+        {
+            name: "footer",
+            description: "The bottom region for actions, right-aligned with a hairline above.",
+            selector: ".xtyle-dialog__footer",
+            tokens: ["--space-2", "--space-4", "--space-5", "--border-thin", "--line"],
+        },
+        {
+            name: "close",
+            description: "The default dismiss button in the header corner, drawn in currentColor.",
+            selector: ".xtyle-dialog__close",
+            tokens: [
+                "--fg-2",
+                "--fg-0",
+                "--radius-sm",
+                "--duration-fast",
+                "--ease-standard",
+                "--state-hover",
+                "--state-press",
+                "--border-normal",
+                "--border-thick",
+                "--ring",
+            ],
+        },
+    ],
+    props: [
+        {
+            name: "open",
+            type: "boolean",
+            default: "false",
+            description: "Whether the modal is shown. Set it true to open; the wrappers bind it two-way.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Caps the dialog's width.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "heading",
+            type: "string",
+            description: "Title text rendered in the header and wired to the dialog via `aria-labelledby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Accessible name applied as `aria-label`: the way to name a dialog that supplies its own `header` slot instead of a `heading`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "labelledby",
+            type: "string",
+            description: "Id of an external element naming the dialog. Overrides the generated heading id.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "closeLabel",
+            type: "string",
+            default: "Close",
+            description: "Accessible label for the built-in close button.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "noCloseButton",
+            type: "boolean",
+            default: "false",
+            description: "Suppresses the built-in close button when the dialog supplies its own dismiss control.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact: for short confirmations.", className: "xtyle-dialog--sm" },
+        { name: "md", description: "Default.", className: "xtyle-dialog", isDefault: true },
+        { name: "lg", description: "Roomy: for richer content.", className: "xtyle-dialog--lg" },
+    ],
+    states: [
+        {
+            name: "open",
+            description: "Shown as a modal via `showModal()`, placed in the top layer with the scrim painted by `::backdrop`.",
+            selector: ".xtyle-dialog::backdrop",
+            tokens: ["--scrim"],
+        },
+        {
+            name: "close-hover",
+            description: "Pointer over the close button; overlay paints the hover tint and the icon brightens.",
+            selector: ".xtyle-dialog__close:hover",
+            tokens: ["--fg-0", "--state-hover"],
+        },
+        {
+            name: "close-active",
+            description: "Close button pressed; overlay paints the press tint.",
+            selector: ".xtyle-dialog__close:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "close-focus-visible",
+            description: "Keyboard focus on the close button; a token ring plus the transparent outline promoted in forced-colors mode.",
+            selector: ".xtyle-dialog__close:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The dialog body content.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "header",
+            description: "Custom header content, replacing the generated title. Falls back to the `heading` text; pair it with `label` to give the dialog an accessible name.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "footer",
+            description: "Footer actions, right-aligned.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-lg",
+        "--leading-normal",
+        "--leading-tight",
+        "--weight-semibold",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--scrim",
+        "--line",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-lg",
+        "--radius-sm",
+        "--ring",
+        "--elevation-5",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--space-6",
+        "--duration-fast",
+        "--ease-standard",
+        "--state-hover",
+        "--state-press",
+    ],
+    composition: [
+        "Pair the footer with Button for the action row; wire a ghost neutral Cancel to `close()` and the primary action to its handler.",
+        "Use `heading` for the common titled case; drop in a `header` slot when the title needs an icon, badge, or subtitle.",
+        "Set `no-close-button` when the dialog is a blocking confirm whose only exits are explicit footer actions.",
+    ],
+    a11y: [
+        "Built on the native `<dialog>` element, so `role=\"dialog\"`, `aria-modal=\"true\"`, the focus trap, focus restore on close, and `Escape`-to-dismiss all come from the browser.",
+        "`showModal()` places the dialog in the top layer and renders the `::backdrop` scrim; a click on the backdrop closes it.",
+        "A `heading` (or explicit `labelledby`) wires the dialog to its title via `aria-labelledby`; a `header`-slot dialog names itself with `label` (an `aria-label`) instead, since the IDREF cannot cross into the slotted light DOM. The binding warns at runtime when none is present.",
+        "The built-in close button carries an `aria-label` (default \"Close\", overridable via `closeLabel`) and its glyph is `aria-hidden`.",
+        "Focus on the close button is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "Closing (by `Escape`, the close button, a backdrop click, or `close()`) fires a `close` event and clears the `open` state.",
+    ],
+    examples: [
+        {
+            id: "confirm-dialog",
+            title: "Confirmation dialog",
+            description: "A titled modal with a body message and a Cancel / Delete action row in the footer.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=dialog.manifest.js.map

package/dist/manifest/dialog.manifest.js.map

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

package/dist/manifest/dock-zone.manifest.d.ts

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

package/dist/manifest/dock-zone.manifest.d.ts.map

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

package/dist/manifest/dock-zone.manifest.js

@@ -0,0 +1,277 @@
+const htmlExample = `<xtyle-dock-zone style="height: 320px;">
+	<section data-panel-id="files" data-title="Files">The file tree.</section>
+	<section data-panel-id="outline" data-title="Outline">The document outline.</section>
+	<section data-panel-id="preview" data-title="Preview">The rendered preview.</section>
+</xtyle-dock-zone>
+
+<script type="module">
+	import "@xtyle/core/elements";
+	const zone = document.querySelector("xtyle-dock-zone");
+	zone.addEventListener("layout-change", (e) => {
+		localStorage.setItem("layout", JSON.stringify(e.detail.layout));
+	});
+	const saved = localStorage.getItem("layout");
+	if (saved) zone.layout = JSON.parse(saved);
+</script>`;
+const chromeExample = `<xtyle-dock-zone style="height: 320px;">
+	<section
+		data-panel-id="editor"
+		data-title="Editor"
+		data-badge="3"
+		data-closable
+		data-actions='[{ "id": "split", "label": "Split editor", "icon": "◫" }]'
+		data-menu='[{ "heading": "Panel" }, { "label": "Reveal in tree", "value": "reveal" }, { "separator": true }, { "label": "Close", "value": "close", "intent": "danger" }]'
+	>The document.</section>
+	<section data-panel-id="preview" data-title="Preview" data-closable>The rendered preview.</section>
+</xtyle-dock-zone>
+
+<script type="module">
+	import "@xtyle/core/elements";
+	const zone = document.querySelector("xtyle-dock-zone");
+	// A header button or a menu row: both arrive as panel-action.
+	zone.addEventListener("panel-action", (e) => {
+		if (e.detail.actionId === "close") zone.closePanel(e.detail.panelId); // same path as the ✕ button
+		else runCommand(e.detail.panelId, e.detail.actionId);
+	});
+	// The built-in close is cancelable; the zone removes the panel and re-reports the layout unless you veto it.
+	zone.addEventListener("panel-close", (e) => {
+		if (e.detail.panelId === "editor" && hasUnsavedChanges()) e.preventDefault();
+	});
+</script>`;
+const stackExample = `<!-- A tool rail: every panel open at once, each a collapsible section. -->
+<xtyle-dock-zone mode="stack" style="height: 320px; max-width: 280px;">
+	<section data-panel-id="layers" data-title="Layers">The layer list.</section>
+	<section data-panel-id="props" data-title="Properties">The property inspector.</section>
+	<section data-panel-id="history" data-title="History">The undo stack.</section>
+</xtyle-dock-zone>
+
+<!-- For a mixed workspace (a stacked rail beside a tabbed editor), author the leaf's mode in the tree: -->
+<script type="module">
+	import "@xtyle/core/elements";
+	document.querySelector("xtyle-dock-zone").layout = {
+		kind: "split", direction: "row", sizes: [1, 3],
+		children: [
+			{ kind: "leaf", id: "rail", panels: ["layers", "props", "history"], active: 0, mode: "stack", collapsed: ["history"] },
+			{ kind: "leaf", id: "main", panels: ["editor", "preview"], active: 0 },
+		],
+	};
+</script>`;
+const svelteExample = `<script lang="ts">
+	import { DockZone } from "@xtyle/svelte";
+	import type { DockLayout } from "@xtyle/core/elements";
+
+	// Restore a persisted layout in; read the current one back out via onLayoutChange.
+	let layout: DockLayout | null = $state(JSON.parse(localStorage.getItem("layout") ?? "null"));
+</script>
+
+<DockZone
+	{layout}
+	style="height: 320px;"
+	onLayoutChange={(e) => {
+		layout = e.detail.layout;
+		localStorage.setItem("layout", JSON.stringify(layout));
+	}}
+>
+	<section data-panel-id="files" data-title="Files">The file tree.</section>
+	<section data-panel-id="outline" data-title="Outline">The document outline.</section>
+	<section data-panel-id="preview" data-title="Preview">The rendered preview.</section>
+</DockZone>`;
+const astroExample = `---
+import { DockZone } from "@xtyle/astro";
+---
+
+<DockZone style="height: 320px;">
+	<section data-panel-id="files" data-title="Files">The file tree.</section>
+	<section data-panel-id="outline" data-title="Outline">The document outline.</section>
+	<section data-panel-id="preview" data-title="Preview">The rendered preview.</section>
+</DockZone>
+
+<!-- The Astro wrapper renders the initial panels; wire persistence in a client
+	 script that reads the element's \`layout\` and listens for \`layout-change\`. -->`;
+export const dockZoneManifest = {
+    id: "dock-zone",
+    name: "Dock Zone",
+    category: "shell",
+    summary: "A drag-and-drop dockable-panel workspace: tabbed zones that rearrange by dragging.",
+    description: "Dock Zone is a movable-panel workspace, the editor-style chrome an app builds its layout from. Its direct children are the panels: any element with a `data-panel-id` and a `data-title` (or `title`) for its tab. The zone reads them, arranges them into a layout of tabbed zones, and renders the tab strips and splits around them. Dragging a tab re-docks its panel onto another zone, joining it as a tab when dropped over the center or splitting the zone when dropped against an edge. Dragging a tab out past every zone tears it into a floating window that moves, resizes, and docks back on the same layout. Every rearrangement dispatches a `layout-change` event carrying the serializable layout, and setting the `layout` property restores a saved one, so a workspace persists across reloads. A panel carries its own header chrome, declared on the panel child: `data-closable` for a built-in close (a cancelable `panel-close`, then removal and a fresh `layout-change`), `data-actions` for direct header buttons, and `data-menu` for a kebab overflow `<xtyle-menu>`. A header button or a menu row both fire `panel-action`, and a `data-badge` puts trailing status text (a count) on the panel's own tab. A leaf renders in one of two modes: `tabs` (the default, one active panel behind a tab strip) or `stack` (every panel a collapsible section, the tool-rail shape); set `mode` for the whole workspace or per leaf in the tree. The layout physics are xtyle's own headless engine (`resolveDrop` for the drop geometry, `dockPanel` for the tree), the same primitives a consumer can drive directly from `@xtyle/core/elements`. The Svelte binding surfaces `layout` as a prop and reports rearrangement through `onLayoutChange`, close through `onPanelClose`, and header controls through `onPanelAction`; the Astro binding renders the panels and upgrades the workspace on the client.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "zone",
+            description: "A leaf of the layout: a tab strip over the active panel's body.",
+            selector: ".xtyle-dock-zone__leaf",
+            tokens: ["--bg-1", "--line", "--radius-md"],
+        },
+        {
+            name: "tab",
+            description: "A draggable tab; the active one carries an accent underline. A `data-badge` renders trailing status text (`.xtyle-dock-zone__badge`, muted) after the title.",
+            selector: ".xtyle-dock-zone__tab",
+            tokens: ["--fg-2", "--text-sm", "--accent", "--space-1"],
+        },
+        {
+            name: "actions",
+            description: "The active panel's header controls, pinned to the end of the tab strip: direct action buttons, a kebab overflow menu, and the close button (its hover tints `--danger`).",
+            selector: ".xtyle-dock-zone__actions",
+            tokens: ["--fg-0", "--fg-2", "--danger", "--state-hover"],
+        },
+        {
+            name: "section",
+            description: "A stack-mode panel: a disclosure header (a rotating chevron and the title, the panel's controls beside it) over a body shown when expanded.",
+            selector: ".xtyle-dock-zone__section",
+            tokens: ["--bg-2", "--fg-0", "--fg-2", "--line", "--state-hover"],
+        },
+        {
+            name: "highlight",
+            description: "The drag-preview films over the live zones: the drop target (`--accent`), the remnant a split would leave (`--accent-2`), and every other zone (`--accent-3`).",
+            selector: ".xtyle-dock-zone__film",
+            tokens: ["--accent", "--accent-2", "--accent-3", "--border-normal"],
+        },
+    ],
+    props: [
+        {
+            name: "layout",
+            type: "DockLayout",
+            default: "all panels in one zone",
+            description: "The whole workspace (a `DockLayout` from `@xtyle/core/elements`: `{ tree, floating }`, the docked tree plus any floating windows). Set the JS property to restore a persisted layout and read it back from `layout-change.detail`; for a declarative start, pass it as a JSON `layout` attribute. A bare `DockNode` tree is still accepted and read as a layout with no floats. A leaf's `mode` / `collapsed` and each float's rect travel in the one layout, so the whole workspace persists together.",
+            bindings: ["html", "svelte"],
+        },
+        {
+            name: "mode",
+            type: '"tabs" | "stack"',
+            default: '"tabs"',
+            description: "The starting render mode when no `layout` is authored: `\"tabs\"` shows one active panel behind a tab strip; `\"stack\"` shows every panel as a collapsible section stacked top-to-bottom (a tool/inspector rail). Per-leaf mode lives in the layout tree; this attribute only seeds the auto single zone.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "data-badge",
+            type: "string (on a panel child)",
+            description: "Trailing status text on the panel's own tab (and its stacked-section header), like an unread or problem count. Rides on every panel's tab, not just the active one; decorative (`aria-hidden`), so the tab's accessible name stays its title.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "data-closable",
+            type: "boolean attribute (on a panel child)",
+            description: "Renders a close button in the panel's header. Clicking it fires a cancelable `panel-close` (`detail: { panelId }`); unless a listener calls `preventDefault()`, the zone removes the panel and fires `layout-change` with the new tree.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "data-actions",
+            type: "JSON `{ id, label, icon? }[]` (on a panel child)",
+            description: "Direct header buttons for a panel. `icon` is a short glyph shown on the button, `label` its accessible name. Clicking one fires `panel-action` (`detail: { panelId, actionId }`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "data-menu",
+            type: "JSON `MenuItem[]` (on a panel child)",
+            description: "A kebab (⋮) overflow menu for the panel, rendered as an `<xtyle-menu>` (so it carries headings, hints, and `intent: \"danger\"`). Selecting a row fires `panel-action` with the row's `value` as the `actionId`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "closePanel",
+            type: "(panelId: string) => void (method)",
+            description: "Close a panel through the same path as the built-in close button (a cancelable `panel-close`, then removal + `layout-change`). Call this from a `data-menu` \"close\" row or a shortcut; pulling a panel from the tree by hand and re-setting `layout` won't stick, since the panel is still a DOM child the zone will recover.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "floatPanel",
+            type: "(panelId: string, rect?: { x, y, w, h }) => void (method)",
+            description: "Tear a docked panel out into a floating window over the workspace, opening at `rect` (or a cascaded default), and report the new layout through `layout-change`. The window has a draggable titlebar (clamped to the workspace), a bottom-right resize grip, plus dock and close buttons; its rect rides on the same `layout` as the docks, so it persists with everything else. Dragging a tab out past every zone floats it too. Wire the method to a `data-menu` \"float\" row or a shortcut.",
+            bindings: ["html", "svelte"],
+        },
+        {
+            name: "dockFloating",
+            type: "(panelId: string, target?: string, region?: DockRegion) => void (method)",
+            description: "Re-dock a floating panel back into the tree, routing through the same drop path a tab move uses. With no `target` it returns to the zone it floated out of (or the root zone if that's gone); pass a `target` zone id and `region` to land it elsewhere. The float window's dock button calls this, and dragging the window over a zone re-docks it there through the drop preview.",
+            bindings: ["html", "svelte"],
+        },
+        {
+            name: "onPanelClose",
+            type: "(event: CustomEvent<{ panelId }>) => void",
+            description: "Svelte callback for the `panel-close` event. Call `event.preventDefault()` to veto the removal (e.g. an unsaved-changes guard).",
+            bindings: ["svelte"],
+        },
+        {
+            name: "onPanelAction",
+            type: "(event: CustomEvent<{ panelId, actionId }>) => void",
+            description: "Svelte callback for the `panel-action` event fired by a header button or a menu row.",
+            bindings: ["svelte"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The panels: elements carrying `data-panel-id` and `data-title`. Their content shows in the active zone body. A panel can also carry its own header chrome: `data-closable`, `data-actions`, `data-menu`, and `data-badge`.",
+            bindings: ["html"],
+        },
+    ],
+    consumedTokens: [
+        "--accent",
+        "--accent-2",
+        "--accent-3",
+        "--bg-1",
+        "--bg-2",
+        "--border-normal",
+        "--border-thick",
+        "--border-thin",
+        "--danger",
+        "--duration-fast",
+        "--ease-standard",
+        "--elevation-4",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--font-sans",
+        "--line",
+        "--radius-md",
+        "--radius-sm",
+        "--ring",
+        "--space-0",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-6",
+        "--state-hover",
+        "--text-lg",
+        "--text-sm",
+        "--weight-medium",
+    ],
+    composition: [
+        "Give the zone a height (it fills its container); inside a `Splitter` or an `AppShell` main region it takes the available space.",
+        "Persist the workspace by saving `layout-change.detail.layout` and restoring it into the `layout` property on load.",
+        "For a headless workspace (your own panel chrome), drive `resolveDrop` and `dockPanel` from `@xtyle/core/elements` directly instead.",
+        "Give a panel header controls without leaving the layout: `data-closable` for a built-in close, `data-actions` for direct buttons, and `data-menu` for a kebab `<xtyle-menu>`. The chrome always reflects the active panel.",
+        "`panel-close` is cancelable, so a consumer can gate removal (unsaved changes) with `preventDefault()`; otherwise the zone removes the panel and reports the new tree through `layout-change`.",
+    ],
+    a11y: [
+        "Tabs are real `<button>`s with `role=\"tab\"` and `aria-selected`, so the active panel is announced and the strip is keyboard-focusable.",
+        "Dragging is pointer-driven; clicking a tab activates its panel without a drag, so rearrangement is not the only way to switch panels.",
+        "Header controls are real `<button>`s with an accessible name (`data-actions` uses its `label`, close reads `Close <title>`); the kebab menu is a full `<xtyle-menu>` with keyboard navigation.",
+        "A `data-badge` is decorative (`aria-hidden`), so a tab's accessible name stays its title; put anything a screen reader must announce in `data-title`.",
+        "In `stack` mode each section header is a real `<button>` with `aria-expanded`, so its collapsed state is announced and it toggles by keyboard; the chevron is decorative (`aria-hidden`).",
+    ],
+    examples: [
+        {
+            id: "panels-and-persistence",
+            title: "Panels and persistence",
+            description: "Three panels in one zone; drag a tab to split or re-tab, and the layout persists to `localStorage`.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "panel-chrome",
+            title: "Panel controls",
+            description: "A panel with a close button, a direct action button, and a kebab overflow menu, all declared on the panel child, all reporting through `panel-action` / `panel-close`.",
+            source: { html: chromeExample },
+        },
+        {
+            id: "stacked-rail",
+            title: "Stacked rail",
+            description: "`mode=\"stack\"` renders every panel as a collapsible section instead of a tab strip, the shape a tool or inspector rail wants. Per-leaf mode also lives in the layout tree, so a stacked rail and a tabbed editor coexist in one workspace.",
+            source: { html: stackExample },
+        },
+    ],
+};
+//# sourceMappingURL=dock-zone.manifest.js.map

package/dist/manifest/dock-zone.manifest.js.map

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

package/dist/manifest/dock.manifest.d.ts

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

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

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