@cueplusplus/ui 0.1.0

package/dist/layout/card.js

@@ -0,0 +1,76 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+/**
+* A padded container for one thing: a summary, a setting group, a preview.
+*
+* Every section paints its own `surface-1` ground, which is what lets the root
+* switch to the seam idiom without any of the parts knowing.
+*
+* @example
+* <Card.Root seam>
+*   <Card.Header><Card.Title>Failover</Card.Title></Card.Header>
+*   <Card.Content>…</Card.Content>
+* </Card.Root>
+*/
+const Card = {
+	Root: React.forwardRef(function CardRoot({ className, seam = false, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "card",
+			"data-seam": seam ? "" : void 0,
+			className: cn("group/card flex flex-col overflow-hidden rounded-(--radius-surface) border border-border", seam ? "gap-px bg-border" : "bg-surface-1", className),
+			...elementProps
+		});
+	}),
+	Header: React.forwardRef(function CardHeader({ className, actions, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "card-header",
+			className: cn("flex items-start justify-between gap-(--cue-space-4) bg-surface-1 px-(--cue-space-5) pt-(--cue-space-5) pb-0 group-data-[seam]/card:pb-(--cue-space-5)", className),
+			...elementProps,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-col gap-(--cue-space-1)",
+				children
+			}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "card-header-actions",
+				className: "flex shrink-0 items-center gap-(--cue-space-2)",
+				children: actions
+			})]
+		});
+	}),
+	Title: React.forwardRef(function CardTitle({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("h3", {
+			ref,
+			"data-slot": "card-title",
+			className: cn("font-mono text-(length:--cue-text-emphasis) font-medium text-fg", className),
+			...elementProps
+		});
+	}),
+	Description: React.forwardRef(function CardDescription({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("p", {
+			ref,
+			"data-slot": "card-description",
+			className: cn("font-mono text-(length:--cue-text-ui) leading-relaxed text-fg-muted", className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function CardContent({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "card-content",
+			className: cn("bg-surface-1 p-(--cue-space-5)", className),
+			...elementProps
+		});
+	}),
+	Footer: React.forwardRef(function CardFooter({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "card-footer",
+			className: cn("flex items-center justify-end gap-(--cue-space-3) bg-surface-1 px-(--cue-space-5) pt-0 pb-(--cue-space-5) group-data-[seam]/card:pt-(--cue-space-5)", className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Card };

package/dist/layout/carousel.d.ts

@@ -0,0 +1,96 @@
+import { IconButtonProps } from "../primitives/icon-button.js";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/layout/carousel.d.ts
+/**
+ * The embla instance, once it has mounted.
+ *
+ * Derived from the hook's own signature rather than imported from
+ * `embla-carousel`, so this file has exactly one optional peer to satisfy
+ * instead of two.
+ */
+type CarouselApi = NonNullable<ReturnType<typeof useEmblaCarousel>[1]>;
+/** embla's options object. */
+type CarouselOptions = NonNullable<Parameters<typeof useEmblaCarousel>[0]>;
+/** embla's plugin array. */
+type CarouselPlugins = NonNullable<Parameters<typeof useEmblaCarousel>[1]>;
+/** Which way the slides travel. */
+type CarouselOrientation = "horizontal" | "vertical";
+interface CarouselContextValue {
+  viewportRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: CarouselApi | undefined;
+  orientation: CarouselOrientation;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  selectedIndex: number;
+  scrollSnaps: readonly number[];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  scrollTo: (index: number) => void;
+}
+/**
+ * Read the enclosing carousel's state and controls.
+ *
+ * Use it to build a control the kit does not ship — a slide counter, a
+ * thumbnail strip, an autoplay toggle.
+ *
+ * @throws If called outside a `Carousel.Root`.
+ * @example
+ * const { selectedIndex, scrollSnaps } = useCarousel();
+ */
+declare function useCarousel(): CarouselContextValue;
+interface CarouselRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> {
+  /** embla options, merged over the axis this component derives from `orientation`. */
+  options?: CarouselOptions;
+  /** embla plugins (autoplay, class names, wheel gestures…). */
+  plugins?: CarouselPlugins;
+  /** Which way the slides travel. Defaults to `"horizontal"`. */
+  orientation?: CarouselOrientation;
+  /** The region's accessible name. Defaults to `"Carousel"`. */
+  label?: string;
+  /** Receives the embla instance once mounted — the escape hatch to its full API. */
+  setApi?: (api: CarouselApi | undefined) => void;
+}
+interface CarouselContentProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Extra classes for the flex track inside the viewport. */
+  trackClassName?: string;
+}
+interface CarouselSlideProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Override the spoken name. Defaults to `"Slide <n> of <total>"`. */
+  label?: string;
+}
+interface CarouselControlProps extends Omit<IconButtonProps, "aria-label" | "icon"> {
+  /** Override the spoken name. */
+  "aria-label"?: string;
+}
+interface CarouselDotsProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** Builds each dot's spoken name. Defaults to `"Go to slide <n>"`. */
+  dotLabel?: (index: number) => string;
+}
+/**
+ * A swipeable strip of slides, on embla.
+ *
+ * `embla-carousel-react` is an **optional peer**: import this from
+ * `@cueplusplus/ui/layout/carousel`, never from the core barrel, so an app that
+ * ships no carousel never installs one.
+ *
+ * @example
+ * <Carousel.Root label="Fixture gallery" options={{ loop: true }}>
+ *   <Carousel.Content>
+ *     {shots.map((s) => <Carousel.Slide key={s.id}><img src={s.src} /></Carousel.Slide>)}
+ *   </Carousel.Content>
+ *   <Carousel.Previous />
+ *   <Carousel.Next />
+ *   <Carousel.Dots />
+ * </Carousel.Root>
+ */
+declare const Carousel: {
+  Root: React.ForwardRefExoticComponent<CarouselRootProps & React.RefAttributes<HTMLDivElement>>;
+  Content: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
+  Slide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
+  Previous: React.ForwardRefExoticComponent<CarouselControlProps & React.RefAttributes<HTMLButtonElement>>;
+  Next: React.ForwardRefExoticComponent<CarouselControlProps & React.RefAttributes<HTMLButtonElement>>;
+  Dots: React.ForwardRefExoticComponent<CarouselDotsProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Carousel, CarouselApi, CarouselContentProps, CarouselControlProps, CarouselDotsProps, CarouselOptions, CarouselOrientation, CarouselPlugins, CarouselRootProps, CarouselSlideProps, useCarousel };

package/dist/layout/carousel.js

@@ -0,0 +1,211 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import { IconButton } from "../primitives/icon-button.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/layout/carousel.tsx
+const CarouselContext = React.createContext(null);
+/**
+* Read the enclosing carousel's state and controls.
+*
+* Use it to build a control the kit does not ship — a slide counter, a
+* thumbnail strip, an autoplay toggle.
+*
+* @throws If called outside a `Carousel.Root`.
+* @example
+* const { selectedIndex, scrollSnaps } = useCarousel();
+*/
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (context === null) throw new Error("useCarousel must be used inside a <Carousel.Root>.");
+	return context;
+}
+/** Position of a slide inside the track, for its spoken name. */
+const SlidePositionContext = React.createContext(null);
+/**
+* A swipeable strip of slides, on embla.
+*
+* `embla-carousel-react` is an **optional peer**: import this from
+* `@cueplusplus/ui/layout/carousel`, never from the core barrel, so an app that
+* ships no carousel never installs one.
+*
+* @example
+* <Carousel.Root label="Fixture gallery" options={{ loop: true }}>
+*   <Carousel.Content>
+*     {shots.map((s) => <Carousel.Slide key={s.id}><img src={s.src} /></Carousel.Slide>)}
+*   </Carousel.Content>
+*   <Carousel.Previous />
+*   <Carousel.Next />
+*   <Carousel.Dots />
+* </Carousel.Root>
+*/
+const Carousel = {
+	Root: React.forwardRef(function CarouselRoot({ className, options, plugins, orientation = "horizontal", label = "Carousel", setApi, onKeyDown, children, ...elementProps }, ref) {
+		const [viewportRef, api] = useEmblaCarousel({
+			axis: orientation === "vertical" ? "y" : "x",
+			...options
+		}, plugins);
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
+		const [selectedIndex, setSelectedIndex] = React.useState(0);
+		const [scrollSnaps, setScrollSnaps] = React.useState([]);
+		React.useEffect(() => {
+			if (api === void 0) return;
+			const sync = () => {
+				setCanScrollPrev(api.canScrollPrev());
+				setCanScrollNext(api.canScrollNext());
+				setSelectedIndex(api.selectedScrollSnap());
+				setScrollSnaps(api.scrollSnapList());
+			};
+			sync();
+			api.on("select", sync);
+			api.on("reInit", sync);
+			return () => {
+				api.off("select", sync);
+				api.off("reInit", sync);
+			};
+		}, [api]);
+		React.useEffect(() => {
+			setApi?.(api);
+		}, [api, setApi]);
+		const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
+		const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
+		const scrollTo = React.useCallback((index) => api?.scrollTo(index), [api]);
+		const context = React.useMemo(() => ({
+			viewportRef,
+			api,
+			orientation,
+			canScrollPrev,
+			canScrollNext,
+			selectedIndex,
+			scrollSnaps,
+			scrollPrev,
+			scrollNext,
+			scrollTo
+		}), [
+			viewportRef,
+			api,
+			orientation,
+			canScrollPrev,
+			canScrollNext,
+			selectedIndex,
+			scrollSnaps,
+			scrollPrev,
+			scrollNext,
+			scrollTo
+		]);
+		const back = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+		const forward = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+		return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-slot": "carousel",
+				role: "region",
+				"aria-roledescription": "carousel",
+				"aria-label": label,
+				tabIndex: 0,
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					if (event.key === back) {
+						event.preventDefault();
+						scrollPrev();
+					} else if (event.key === forward) {
+						event.preventDefault();
+						scrollNext();
+					}
+				},
+				className: cn("relative outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+				...elementProps,
+				children
+			})
+		});
+	}),
+	Content: React.forwardRef(function CarouselContent({ className, trackClassName, children, ...elementProps }, ref) {
+		const { viewportRef, orientation } = useCarousel();
+		const count = React.Children.count(children);
+		return /* @__PURE__ */ jsx("div", {
+			ref: viewportRef,
+			"data-slot": "carousel-viewport",
+			className: cn("overflow-hidden", className),
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-slot": "carousel-track",
+				className: cn("flex gap-(--cue-space-4)", orientation === "vertical" ? "flex-col" : "flex-row", trackClassName),
+				...elementProps,
+				children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(SlidePositionContext.Provider, {
+					value: {
+						index,
+						count
+					},
+					children: child
+				}))
+			})
+		});
+	}),
+	Slide: React.forwardRef(function CarouselSlide({ className, label, ...elementProps }, ref) {
+		const position = React.useContext(SlidePositionContext);
+		const name = label ?? (position === null ? "Slide" : `Slide ${position.index + 1} of ${position.count}`);
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "carousel-slide",
+			role: "group",
+			"aria-roledescription": "slide",
+			"aria-label": name,
+			className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+			...elementProps
+		});
+	}),
+	Previous: React.forwardRef(function CarouselPrevious({ "aria-label": ariaLabel = "Previous slide", disabled, onClick, ...elementProps }, ref) {
+		const { canScrollPrev, scrollPrev } = useCarousel();
+		return /* @__PURE__ */ jsx(IconButton, {
+			ref,
+			"aria-label": ariaLabel,
+			icon: ChevronLeftGlyph,
+			"data-slot": "carousel-previous",
+			disabled: disabled ?? !canScrollPrev,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) scrollPrev();
+			},
+			...elementProps
+		});
+	}),
+	Next: React.forwardRef(function CarouselNext({ "aria-label": ariaLabel = "Next slide", disabled, onClick, ...elementProps }, ref) {
+		const { canScrollNext, scrollNext } = useCarousel();
+		return /* @__PURE__ */ jsx(IconButton, {
+			ref,
+			"aria-label": ariaLabel,
+			icon: ChevronRightGlyph,
+			"data-slot": "carousel-next",
+			disabled: disabled ?? !canScrollNext,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) scrollNext();
+			},
+			...elementProps
+		});
+	}),
+	Dots: React.forwardRef(function CarouselDots({ className, dotLabel = (index) => `Go to slide ${index + 1}`, ...elementProps }, ref) {
+		const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "carousel-dots",
+			className: cn("flex items-center justify-center gap-(--cue-space-2)", className),
+			...elementProps,
+			children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "carousel-dot",
+				"aria-label": dotLabel(index),
+				"aria-current": index === selectedIndex ? "true" : void 0,
+				onClick: () => scrollTo(index),
+				className: cn("size-[0.25rem] cursor-pointer rounded-full border-0 p-0 transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none", index === selectedIndex ? "bg-accent" : "bg-border-strong")
+			}, index))
+		});
+	})
+};
+//#endregion
+export { Carousel, useCarousel };

package/dist/layout/collapsible.d.ts

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/layout/collapsible.d.ts
+interface CollapsibleRootProps extends Omit<Collapsible.Root.Props, "className"> {
+  /** Extra classes for the frame. */
+  className?: string;
+}
+interface CollapsibleTriggerProps extends Omit<Collapsible.Trigger.Props, "className"> {
+  /** Extra classes for the summary row. */
+  className?: string;
+}
+interface CollapsiblePanelProps extends Omit<Collapsible.Panel.Props, "className"> {
+  /** Extra classes for the animating box. Padding belongs on `bodyClassName`. */
+  className?: string;
+  /** Extra classes for the padded body inside it. */
+  bodyClassName?: string;
+}
+/**
+ * One section that opens and closes — an accordion of exactly one.
+ *
+ * Wraps Base UI's `Collapsible` and wears the same summary-row skin as
+ * `Accordion`, so a lone section and a stack of them are visibly the same
+ * component.
+ *
+ * @example
+ * <Collapsible.Root defaultOpen>
+ *   <Collapsible.Trigger>failover</Collapsible.Trigger>
+ *   <Collapsible.Panel>…</Collapsible.Panel>
+ * </Collapsible.Root>
+ */
+declare const Collapsible$1: {
+  Root: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Trigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Panel: React.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+interface DisclosureProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children" | "onChange"> {
+  /** What the toggle says. Defaults to `"advanced"`. */
+  label?: React.ReactNode;
+  /** Open state when controlled. Pass with `onOpenChange`. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  /** Called with the new open state. */
+  onOpenChange?: Collapsible.Root.Props["onOpenChange"];
+  /** Extra classes for the frame around toggle and body. */
+  rootClassName?: string;
+  /** Extra classes for the revealed body. */
+  bodyClassName?: string;
+  /** The rarely-used fields to reveal. */
+  children?: React.ReactNode;
+}
+/**
+ * The "advanced" idiom: a chromeless `▸ advanced` toggle over the fields most
+ * users never touch.
+ *
+ * Progressive disclosure, drawn as quietly as the system can draw anything — no
+ * rim, no fill, mono micro caption ink, one triangle. It is deliberately *not*
+ * a `Collapsible`: a collapsible section is a peer of the sections around it,
+ * while this is an annotation on the form it sits in, and giving it a summary
+ * row that looks like a section header is what makes forms read as twice as
+ * long as they are.
+ *
+ * Ported from dmxhub's `advBtn`, which is repeated at every route editor.
+ *
+ * @example
+ * <Disclosure>
+ *   <Field label="failover ttl"><NumberField /></Field>
+ * </Disclosure>
+ * @example
+ * <Disclosure label="output" open={open} onOpenChange={setOpen}>…</Disclosure>
+ */
+declare const Disclosure: React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps };

package/dist/layout/collapsible.js

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses, collapsiblePanelClasses } from "./_collapse.js";
+import { ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+/**
+* One section that opens and closes — an accordion of exactly one.
+*
+* Wraps Base UI's `Collapsible` and wears the same summary-row skin as
+* `Accordion`, so a lone section and a stack of them are visibly the same
+* component.
+*
+* @example
+* <Collapsible.Root defaultOpen>
+*   <Collapsible.Trigger>failover</Collapsible.Trigger>
+*   <Collapsible.Panel>…</Collapsible.Panel>
+* </Collapsible.Root>
+*/
+const Collapsible$1 = {
+	Root: React.forwardRef(function CollapsibleRoot({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Collapsible.Root, {
+			ref,
+			"data-slot": "collapsible",
+			className: cn("flex min-w-0 flex-col", className),
+			...elementProps
+		});
+	}),
+	Trigger: React.forwardRef(function CollapsibleTrigger({ className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			ref,
+			"data-slot": "collapsible-trigger",
+			className: cn(collapseTriggerClasses, className),
+			...elementProps,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: collapseLabelClasses,
+				children
+			}), /* @__PURE__ */ jsx(ChevronRightGlyph, {
+				"data-slot": "collapsible-caret",
+				className: collapseCaretClasses
+			})]
+		});
+	}),
+	Panel: React.forwardRef(function CollapsiblePanel({ className, bodyClassName, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Collapsible.Panel, {
+			ref,
+			"data-slot": "collapsible-panel",
+			className: cn(collapsiblePanelClasses, className),
+			...elementProps,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "collapsible-panel-body",
+				className: cn(collapsePanelBodyClasses, bodyClassName),
+				children
+			})
+		});
+	})
+};
+/**
+* The chromeless triangle used for the disclosure's own caret.
+*
+* Two glyphs, swapped by CSS off the trigger's `data-panel-open`, rather than
+* one glyph rotated: `▸`/`▾` are the exact characters the upstream consoles use
+* and a rotated `▸` sits visibly off-centre against a mono baseline.
+*/
+const DISCLOSURE_GLYPH_CLASSES = "shrink-0 text-(length:--cue-text-micro) leading-none select-none";
+/**
+* The "advanced" idiom: a chromeless `▸ advanced` toggle over the fields most
+* users never touch.
+*
+* Progressive disclosure, drawn as quietly as the system can draw anything — no
+* rim, no fill, mono micro caption ink, one triangle. It is deliberately *not*
+* a `Collapsible`: a collapsible section is a peer of the sections around it,
+* while this is an annotation on the form it sits in, and giving it a summary
+* row that looks like a section header is what makes forms read as twice as
+* long as they are.
+*
+* Ported from dmxhub's `advBtn`, which is repeated at every route editor.
+*
+* @example
+* <Disclosure>
+*   <Field label="failover ttl"><NumberField /></Field>
+* </Disclosure>
+* @example
+* <Disclosure label="output" open={open} onOpenChange={setOpen}>…</Disclosure>
+*/
+const Disclosure = React.forwardRef(function Disclosure({ className, label = "advanced", open, defaultOpen, onOpenChange, rootClassName, bodyClassName, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		"data-slot": "disclosure",
+		className: cn("flex min-w-0 flex-col", rootClassName),
+		open,
+		defaultOpen,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			ref,
+			"data-slot": "disclosure-trigger",
+			className: cn("group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase transition-colors duration-150 outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+			...elementProps,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "disclosure-glyph",
+					"aria-hidden": "true",
+					className: cn(DISCLOSURE_GLYPH_CLASSES, "group-data-[panel-open]/disclosure:hidden"),
+					children: "▸"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "disclosure-glyph",
+					"aria-hidden": "true",
+					className: cn(DISCLOSURE_GLYPH_CLASSES, "hidden group-data-[panel-open]/disclosure:inline"),
+					children: "▾"
+				}),
+				label
+			]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			"data-slot": "disclosure-panel",
+			className: collapsiblePanelClasses,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "disclosure-panel-body",
+				className: cn("flex flex-col gap-(--cue-space-2) pb-(--cue-space-2)", bodyClassName),
+				children
+			})
+		})]
+	});
+});
+//#endregion
+export { Collapsible$1 as Collapsible, Disclosure };

package/dist/layout/container.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+//#region src/layout/container.d.ts
+/** How wide the content column is allowed to get. */
+type ContainerWidth = "narrow" | "wide" | "full";
+interface ContainerProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Which measure the column takes. Defaults to `"narrow"`. */
+  width?: ContainerWidth;
+  /** Draw the standard side gutters. Defaults to `true`. */
+  padded?: boolean;
+}
+/**
+ * A centred column with the standard gutters and nothing else.
+ *
+ * `PageShell` is this plus a page header; reach for `Container` when the page
+ * already has its own heading (a route that opens with a `TitleBar`, a section
+ * inside a shell) and all you need is the measure.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Container width="wide"><Table /></Container>
+ * @example
+ * <Container width="full" padded={false}><Canvas /></Container>
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Container, ContainerProps, ContainerWidth };

package/dist/layout/container.js

@@ -0,0 +1,40 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/container.tsx
+/**
+* The same two measures `PageShell` uses, plus an uncapped one.
+*
+* `narrow` (42rem) is a reading column — settings, forms, prose. `wide` (54rem)
+* is a working column — tables and panel grids. `full` caps nothing, for a
+* console layout that owns the whole viewport and only wants the gutters.
+*/
+const WIDTHS = {
+	narrow: "max-w-[42rem]",
+	wide: "max-w-[54rem]",
+	full: ""
+};
+/**
+* A centred column with the standard gutters and nothing else.
+*
+* `PageShell` is this plus a page header; reach for `Container` when the page
+* already has its own heading (a route that opens with a `TitleBar`, a section
+* inside a shell) and all you need is the measure.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Container width="wide"><Table /></Container>
+* @example
+* <Container width="full" padded={false}><Canvas /></Container>
+*/
+const Container = React.forwardRef(function Container({ className, width = "narrow", padded = true, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "container",
+		className: cn("mx-auto w-full", WIDTHS[width], padded ? "px-(--cue-space-6)" : null, className),
+		...elementProps
+	});
+});
+//#endregion
+export { Container };

package/dist/layout/description-list.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+//#region src/layout/description-list.d.ts
+/** How a term and its detail are arranged. */
+type DescriptionListLayout = "inline" | "stacked";
+interface DescriptionListRootProps extends React.ComponentPropsWithoutRef<"dl"> {
+  /**
+   * `"inline"` (default) puts the detail beside its term in a two-column grid;
+   * `"stacked"` puts it underneath. Stack when the details are long enough to
+   * wrap, which turns the aligned column into ragged text anyway.
+   */
+  layout?: DescriptionListLayout;
+}
+/** Props for {@link DescriptionListTerm}: the native `<dt>` plus `className`. */
+type DescriptionListTermProps = React.ComponentPropsWithoutRef<"dt">;
+/** Props for {@link DescriptionListDetail}: the native `<dd>` plus `className`. */
+type DescriptionListDetailProps = React.ComponentPropsWithoutRef<"dd">;
+/** The `<dl>` family: {@link DescriptionListRoot}, `Term` and `Detail`. */
+declare const DescriptionList: {
+  Root: React.ForwardRefExoticComponent<DescriptionListRootProps & React.RefAttributes<HTMLDListElement>>;
+  Term: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+  Detail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+};
+//#endregion
+export { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps };