@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/side-panel.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The preview beside a list: one body, drawn as an aside next to the list above the shell's rail
+ * breakpoint and as a `Drawer` below it, where nothing fits beside a list. Its header row is as
+ * tall as a `DataGrid`'s head, so the rule under it continues the list's.
+ */
+import { CaretLeftIcon, CaretRightIcon, XIcon } from "@phosphor-icons/react";
+import { useId } from "react";
+import { css, cx } from "#primitives/css";
+import { useBreakpoint } from "./breakpoint.js";
+import { IconButton } from "./button.js";
+import { Drawer, DrawerBody, DrawerFooter } from "./drawer.js";
+import { HotkeysProvider, useHotkeys } from "./hotkeys.js";
+import { directional, icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+const aside = css({
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: "0",
+    width: "400px",
+    minWidth: "0",
+    minHeight: "0",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "action",
+    background: "bg.hover",
+    _light: { background: "bg.card" },
+});
+const headerRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    // A list head's height: its block padding round one line of its text.
+    minHeight: "calc(token(spacing.panel.default) * 2 + 16px + 1px)",
+    paddingInlineStart: "panel.comfortable",
+    paddingInlineEnd: "panel.default",
+    borderBottom: "1px solid token(colors.border.panel)",
+});
+const headerLead = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    flex: "1",
+    minWidth: "0",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    "&[data-eyebrow]": { color: "fg.muted", fontSize: "code" },
+});
+const headerActions = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    flexShrink: "0",
+});
+const titleBlock = css({
+    display: "grid",
+    gap: "layout.contentGap",
+    paddingBlockStart: "panel.default",
+    paddingInline: "panel.comfortable",
+});
+const titleLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    margin: "none",
+    fontSize: "heading",
+    fontWeight: "medium",
+    lineHeight: "tight",
+});
+const subtitleLine = css({
+    margin: "none",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const body = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    alignContent: "start",
+    gap: "layout.clusterGap",
+    flex: "1",
+    minHeight: "0",
+    overflowY: "auto",
+    padding: "panel.comfortable",
+    // A flush body holds its content edge to edge, such as tabs whose panels pad themselves.
+    "&[data-flush]": { display: "flex", flexDirection: "column", gap: "0", padding: "0" },
+});
+const footerRow = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    borderTop: "1px solid token(colors.border.panel)",
+});
+const sheetBody = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    alignContent: "start",
+    gap: "layout.clusterGap",
+});
+const layout = css({
+    display: "flex",
+    alignItems: "stretch",
+    gap: "layout.contentGap",
+    minWidth: "0",
+    "& > :first-child": { flex: "1", minWidth: "0" },
+});
+const section = css({ display: "grid", gap: "layout.controlGap", minWidth: "0" });
+const sectionLabel = css({
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+/**
+ * [ and ] step to the previous and next item, and Escape closes the aside (the sheet closes on
+ * Escape by itself). Registered in the panel's own scope, nested in the page's, so its Escape wins
+ * over the list's.
+ */
+function SidePanelHotkeys({ onPrevious, onNext, onClose, }) {
+    const { labels } = useCiridaeLocale();
+    const group = labels.keyboard.panel;
+    useHotkeys([
+        {
+            hotkey: "[",
+            callback: () => onPrevious?.(),
+            options: {
+                enabled: onPrevious !== undefined,
+                meta: { group, name: labels.keyboard.previousItem },
+            },
+        },
+        {
+            hotkey: "]",
+            callback: () => onNext?.(),
+            options: { enabled: onNext !== undefined, meta: { group, name: labels.keyboard.nextItem } },
+        },
+        {
+            hotkey: "Escape",
+            callback: () => onClose?.(),
+            options: {
+                enabled: onClose !== undefined,
+                meta: { group, name: labels.keyboard.closePanel },
+            },
+        },
+    ]);
+    return null;
+}
+/**
+ * A list's preview panel: the open item's header (an eyebrow, title, accessory, subtitle), an
+ * optional previous / next stepper, actions and close, a scrolling body and a footer. Put it beside
+ * the list in a `SidePanelLayout`.
+ */
+export function SidePanel({ title, eyebrow, subtitle, titleAccessory, actions, headerContent, footer, onClose, stepper = false, onPrevious, onNext, flushBody = false, bodyClassName, className, children, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const narrowShell = useBreakpoint("rail");
+    const scope = `side-panel${useId()}`;
+    const stepHandlers = stepper ? { onPrevious, onNext } : {};
+    const stepButtons = stepper && (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": labels.sidePanel.previous, size: "small", disabled: !onPrevious, onClick: onPrevious, children: _jsx(CaretLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }), _jsx(IconButton, { "aria-label": labels.sidePanel.next, size: "small", disabled: !onNext, onClick: onNext, children: _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) }) })] }));
+    if (narrowShell) {
+        return (_jsxs(Drawer, { open: true, onOpenChange: (open) => {
+                if (!open)
+                    onClose();
+            }, title: title, subtitle: subtitle, eyebrow: eyebrow, titleAccessory: titleAccessory, actions: _jsxs(_Fragment, { children: [stepButtons, actions] }), children: [_jsxs(DrawerBody, { flush: flushBody, className: cx(!flushBody && sheetBody, bodyClassName), children: [_jsx(SidePanelHotkeys, { ...stepHandlers }), headerContent, children] }), footer && _jsx(DrawerFooter, { children: footer })] }));
+    }
+    const titleContent = (_jsxs(_Fragment, { children: [title, titleAccessory] }));
+    return (_jsxs(HotkeysProvider, { scope: scope, children: [_jsx(SidePanelHotkeys, { ...stepHandlers, onClose: onClose }), _jsxs("aside", { ...props, className: cx(aside, className), "data-ciridae-ui": "", children: [_jsxs("div", { className: headerRow, children: [_jsx("span", { className: headerLead, "data-eyebrow": eyebrow ? "" : undefined, children: eyebrow ?? titleContent }), _jsxs("span", { className: headerActions, children: [stepButtons, actions, _jsx(IconButton, { "aria-label": labels.common.close, size: "small", onClick: onClose, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] })] }), (eyebrow || subtitle || headerContent) && (_jsxs("div", { className: titleBlock, children: [eyebrow && _jsx("h2", { className: titleLine, children: titleContent }), subtitle && _jsx("p", { className: subtitleLine, children: subtitle }), headerContent] })), _jsx("div", { className: cx(body, bodyClassName), "data-flush": flushBody || undefined, children: children }), footer && _jsx("div", { className: footerRow, children: footer })] })] }));
+}
+/** A list and its `SidePanel` side by side; the list takes the room the panel leaves. */
+export function SidePanelLayout({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(layout, className), "data-ciridae-ui": "" });
+}
+/** A labelled block of a side panel's body. */
+export function SidePanelSection({ label, className, children, ...props }) {
+    return (_jsxs("section", { ...props, className: cx(section, className), children: [_jsx("span", { className: sectionLabel, children: label }), children] }));
+}

package/dist/components/sidebar.d.ts

@@ -0,0 +1,35 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export declare function SidebarNavigation({ className, ...props }: ComponentProps<"nav">): import("@types/react").JSX.Element;
+export declare function SidebarDivider({ className, ...props }: ComponentProps<"hr">): import("@types/react").JSX.Element;
+export declare function SidebarPanel({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function SidebarSection({ label, action, iconTone, className, children, ...props }: ComponentProps<"div"> & {
+    label?: ReactNode;
+    action?: ReactNode;
+    iconTone?: "bronze";
+}): import("@types/react").JSX.Element;
+/** The subject a sidebar is scoped to, such as the open project. */
+export declare function SidebarHeading({ icon, className, children, ...props }: ComponentProps<"button"> & {
+    icon?: ReactNode;
+}): import("@types/react").JSX.Element;
+/**
+ * A sidebar row. Without children it renders icon-only, for the rail; give it an `aria-label`
+ * then, since the label is what names it.
+ */
+export type SidebarItemProps = useRender.ComponentProps<"button"> & {
+    /** Makes the row a link to this address; `render` takes a router's link, such as `<Link to>`. */
+    href?: string;
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    /**
+     * A control at the row's end, such as a pin `IconButton` (compact unless it sets its size),
+     * shown on hover or focus and always on touch. It sits beside the row, so it never navigates.
+     */
+    action?: ReactNode;
+    active?: boolean;
+    /** Tint the leading icon bronze while inactive, as the Projects hub sidebar does. */
+    iconTone?: "bronze";
+    /** `compact` is a secondary list's row, such as recently opened records. */
+    size?: "regular" | "compact";
+};
+export declare function SidebarItem({ icon, trailing, action, active, iconTone, size, href, render, className, children, ...props }: SidebarItemProps): import("@types/react").JSX.Element;

package/dist/components/sidebar.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { css, cx } from "#primitives/css";
+import { IconButtonSizeContext } from "./button.js";
+// Navigation sits in the shell's sidebar; it is not a panel of its own.
+const navigation = css({
+    display: "flex",
+    width: "100%",
+    minWidth: "0",
+    flexDirection: "column",
+    gap: "layout.clusterGap",
+});
+const section = css({ display: "grid", gap: "control.trackInset" });
+// A block of secondary sections, such as pinned and recent records, set apart by a fill.
+const panel = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    padding: "layout.tightGap",
+    borderRadius: "action",
+    background: "bg.hover",
+});
+const sectionLabel = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    paddingInline: "control.compactInline",
+    paddingTop: "layout.tightGap",
+    paddingBottom: "control.compactBlock",
+    color: "fg.subtle",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    "&[data-icon-tone=bronze] > svg": { color: "accent.bronze" },
+});
+const sectionAction = css({ display: "inline-flex", marginInlineStart: "auto" });
+const divider = css({
+    width: "100%",
+    height: "border.hairline",
+    margin: "none",
+    border: "0",
+    background: "border.hairline",
+});
+const item = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    width: "100%",
+    height: "control.small",
+    paddingInline: "control.compactInline",
+    border: "0",
+    borderRadius: "action",
+    background: "transparent",
+    // Muted against the dark canvas; light keeps every item at full contrast, as Round 2 does.
+    color: "fg.muted",
+    _light: { color: "fg.primary" },
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    textAlign: "start",
+    cursor: "pointer",
+    transitionProperty: "background, color",
+    transitionDuration: "fast",
+    "& > svg:first-child": { opacity: ".7" },
+    "&[data-icon-tone=bronze] > svg:first-child": { color: "accent.bronze" },
+    "&:hover, &[aria-pressed=true]": {
+        background: "bg.hover",
+        color: "fg.primary",
+        "& > svg:first-child": { color: "inherit" },
+    },
+    // The open page keeps the hover shape and size, so moving between pages shifts nothing; the
+    // accent wash and the panel's own edge are what mark it.
+    "&[aria-current=page]": {
+        background: "bg.selected",
+        boxShadow: "inset 0 0 0 1px token(colors.border.panel)",
+        color: "fg.primary",
+        "& > svg:first-child": { color: "inherit", opacity: "1" },
+    },
+    _focusVisible: { focusRing: "inset" },
+    // A secondary list under the navigation, such as recently opened records: a shorter row in
+    // smaller, quieter text, so it reads apart from the pages above it.
+    "&[data-size=compact]": {
+        height: "control.compact",
+        color: "fg.secondary",
+        fontSize: "caption",
+    },
+    // With no label it is the rail's square: the same hover, open-page fill and edge, icon only.
+    "&[data-icon-only]": {
+        justifyContent: "center",
+        width: "control.default",
+        height: "control.default",
+        paddingInline: "none",
+        "& > svg:first-child": { opacity: "1", fontSize: "icon.rail" },
+    },
+});
+const label = css({
+    minWidth: "0",
+    flex: "1",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    lineHeight: "compact",
+});
+const trailingStyle = css({ display: "inline-flex", flexShrink: "0", color: "fg.subtle" });
+// A row with an action: the group draws the row's hover, open-page fill and edge, so they span the
+// action too, and the row inside it stays transparent.
+const itemGroup = css({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    minWidth: "0",
+    borderRadius: "action",
+    transitionProperty: "background",
+    transitionDuration: "fast",
+    "&:hover": { background: "bg.hover" },
+    "&:hover > [data-sidebar-row]": { color: "fg.primary" },
+    "&:has(> [data-sidebar-row][aria-current=page])": {
+        background: "bg.selected",
+        boxShadow: "inset 0 0 0 1px token(colors.border.panel)",
+    },
+    // The group draws the one wash; the row inside never adds its own on hover or when current.
+    "& > [data-sidebar-row]": { minWidth: "0" },
+    "& > [data-sidebar-row], & > [data-sidebar-row]:is(:hover, [aria-current=page], [aria-pressed=true])": { background: "transparent", boxShadow: "none" },
+    // Focus rings the whole row, action included, not just the link inside it.
+    "& > [data-sidebar-row]:focus-visible": { outline: "none" },
+    "&:has(> [data-sidebar-row]:focus-visible)": { focusRing: "inset" },
+    "&:hover > [data-sidebar-action], & > [data-sidebar-action]:focus-within": { opacity: "1" },
+});
+// Revealed on hover or focus; always shown where there is no hover to reveal it.
+const itemAction = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    paddingInlineEnd: "control.trackInset",
+    opacity: "0",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    _phone: { opacity: "1" },
+    "@media (hover: none)": { opacity: "1" },
+});
+const heading = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "sidebar.markGap",
+    width: "100%",
+    minWidth: "0",
+    paddingBlock: "control.block",
+    paddingInline: "control.block",
+    border: "0",
+    borderRadius: "field",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    _hover: { background: "bg.hover" },
+    "&[aria-current=page]": { background: "bg.selected" },
+    _focusVisible: { focusRing: "inset" },
+});
+const headingName = css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "heading",
+    fontWeight: "medium",
+    lineHeight: "compact",
+});
+export function SidebarNavigation({ className, ...props }) {
+    return _jsx("nav", { ...props, className: cx(navigation, className), "data-ciridae-ui": "" });
+}
+export function SidebarDivider({ className, ...props }) {
+    return _jsx("hr", { ...props, className: cx(divider, className), "data-ciridae-ui": "" });
+}
+export function SidebarPanel({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(panel, className), "data-ciridae-ui": "" });
+}
+export function SidebarSection({ label, action, iconTone, className, children, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(section, className), "data-ciridae-ui": "", children: [label && (_jsxs("div", { className: sectionLabel, "data-icon-tone": iconTone, children: [label, action && _jsx("span", { className: sectionAction, children: action })] })), children] }));
+}
+/** The subject a sidebar is scoped to, such as the open project. */
+export function SidebarHeading({ icon, className, children, ...props }) {
+    return (_jsxs("button", { ...props, className: cx(heading, className), "data-ciridae-ui": "", type: props.type ?? "button", children: [icon, _jsx("span", { className: headingName, children: children })] }));
+}
+export function SidebarItem({ icon, trailing, action, active, iconTone, size = "regular", href, render, className, children, ...props }) {
+    const link = href !== undefined || render !== undefined;
+    const row = useRender({
+        defaultTagName: href !== undefined ? "a" : "button",
+        render,
+        props: {
+            ...(link ? {} : { type: "button" }),
+            ...(href !== undefined ? { href } : {}),
+            ...props,
+            "aria-current": active ? "page" : undefined,
+            className: cx(item, className),
+            "data-ciridae-ui": "",
+            "data-sidebar-row": "",
+            "data-icon-tone": iconTone,
+            "data-size": size,
+            "data-icon-only": children === undefined || undefined,
+            children: (_jsxs(_Fragment, { children: [icon, children !== undefined && _jsx("span", { className: label, children: children }), trailing && _jsx("span", { className: trailingStyle, children: trailing })] })),
+        },
+    });
+    // The rail's icon-only square has no room for one.
+    if (!action || children === undefined)
+        return row;
+    return (_jsxs("span", { className: itemGroup, "data-ciridae-ui": "", children: [row, _jsx("span", { className: itemAction, "data-sidebar-action": "", children: _jsx(IconButtonSizeContext, { value: "compact", children: action }) })] }));
+}

package/dist/components/site-banner.d.ts

@@ -0,0 +1,25 @@
+import { type RecipeVariantProps } from "#primitives/css";
+import type { ComponentProps } from "react";
+declare const banner: import("../../../src/styled-system/types/index.js").RecipeRuntimeFn<{
+    tone: {
+        neutral: {
+            background: "bg.hover";
+        };
+        info: {
+            background: "bg.infoSubtle";
+        };
+        success: {
+            background: "bg.successSubtle";
+        };
+        warning: {
+            background: "bg.warningSubtle";
+        };
+        danger: {
+            background: "bg.errorSubtle";
+        };
+    };
+}>;
+export type SiteBannerProps = ComponentProps<"div"> & RecipeVariantProps<typeof banner>;
+/** A quiet, full-width site notice, separate from page-level status banners. */
+export declare function SiteBanner({ tone, className, ...props }: SiteBannerProps): import("@types/react").JSX.Element;
+export {};

package/dist/components/site-banner.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva, cx } from "#primitives/css";
+const banner = cva({
+    base: {
+        flexShrink: "0",
+        width: "100%",
+        boxSizing: "border-box",
+        paddingBlock: "2px",
+        paddingInline: "16px",
+        textAlign: "start",
+        fontSize: "11px",
+        fontWeight: "medium",
+        lineHeight: "16px",
+        color: "fg.muted",
+    },
+    variants: {
+        tone: {
+            neutral: { background: "bg.hover" },
+            info: { background: "bg.infoSubtle" },
+            success: { background: "bg.successSubtle" },
+            warning: { background: "bg.warningSubtle" },
+            danger: { background: "bg.errorSubtle" },
+        },
+    },
+    defaultVariants: { tone: "info" },
+});
+/** A quiet, full-width site notice, separate from page-level status banners. */
+export function SiteBanner({ tone, className, ...props }) {
+    return _jsx("div", { ...props, className: cx(banner({ tone }), className) });
+}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+export type SkeletonWidth = "short" | "medium" | "long" | "full" | `${number}%`;
+export type SkeletonHeight = "text" | "caption" | "control" | "row" | "block" | "chart" | "chart.small" | "chart.medium" | "chart.large";
+/**
+ * Loading placeholder with a shimmer. `block` fills its box, `text` takes one line of the
+ * surrounding text, `circle` stands in for avatars and icons, and `square` for logos and tiles. Size it with `width` (a token
+ * length, `full`, or a percentage of its box) and `height` (a line of text or caption, a control,
+ * a list row, the whole box, or a chart's height).
+ */
+export declare function Skeleton({ shape, width, height, className, style, ...props }: ComponentProps<"span"> & {
+    shape?: "block" | "text" | "circle" | "square";
+    /** A token width, for a value of roughly known length, or a share of the box such as `"60%"`. */
+    width?: SkeletonWidth;
+    height?: SkeletonHeight;
+}): import("@types/react").JSX.Element;

package/dist/components/skeleton.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cx } from "#primitives/css";
+const skeleton = css({
+    display: "block",
+    flexShrink: "0",
+    background: "token(gradients.skeleton)",
+    backgroundSize: "200% 100%",
+    animation: "skeletonShimmer 1.6s ease-in-out infinite",
+    _motionReduce: { animation: "none" },
+    "&[data-shape=block]": { minHeight: "skeleton.line", borderRadius: "action" },
+    // One line of the surrounding text: the bar is shorter than the line box and centered in it.
+    "&[data-shape=text]": {
+        width: "100%",
+        height: "0.75em",
+        marginBlock: "calc((1lh - 0.75em) / 2)",
+        borderRadius: "keycap",
+    },
+    "&[data-shape=circle]": {
+        width: "control.compact",
+        aspectRatio: "1",
+        borderRadius: "round",
+    },
+    "&[data-shape=square]": {
+        width: "control.compact",
+        aspectRatio: "1",
+        borderRadius: "action",
+    },
+    "&[data-shape][data-width=short]": { width: "skeleton.short" },
+    "&[data-shape][data-width=medium]": { width: "skeleton.medium" },
+    "&[data-shape][data-width=long]": { width: "skeleton.long" },
+    "&[data-shape][data-width=full]": { width: "100%" },
+    // A line of caption text, as `text` is a line of the surrounding text.
+    "&[data-shape][data-height=caption]": {
+        height: "calc(token(fontSizes.caption) * 0.75)",
+        marginBlock: "calc((1lh - token(fontSizes.caption) * 0.75) / 2)",
+    },
+    "&[data-shape][data-height=text]": {
+        height: "0.75em",
+        marginBlock: "calc((1lh - 0.75em) / 2)",
+    },
+    "&[data-shape][data-height=control]": { height: "control.default", marginBlock: "0" },
+    "&[data-shape][data-height=row]": { height: "control.field", marginBlock: "0" },
+    "&[data-shape][data-height=block]": { height: "100%", marginBlock: "0" },
+    "&[data-shape][data-height=chart], &[data-shape][data-height='chart.medium']": {
+        height: "chart.medium",
+        marginBlock: "0",
+    },
+    "&[data-shape][data-height='chart.small']": { height: "chart.small", marginBlock: "0" },
+    "&[data-shape][data-height='chart.large']": { height: "chart.large", marginBlock: "0" },
+});
+/**
+ * Loading placeholder with a shimmer. `block` fills its box, `text` takes one line of the
+ * surrounding text, `circle` stands in for avatars and icons, and `square` for logos and tiles. Size it with `width` (a token
+ * length, `full`, or a percentage of its box) and `height` (a line of text or caption, a control,
+ * a list row, the whole box, or a chart's height).
+ */
+export function Skeleton({ shape = "block", width, height, className, style, ...props }) {
+    const percent = width?.endsWith("%") ? width : undefined;
+    // A block-level span, so it is valid inside buttons, headings, and other phrasing content.
+    return (_jsx("span", { ...props, "aria-hidden": "true", "data-ciridae-ui": "", "data-shape": shape, "data-width": percent ? undefined : width, "data-height": height, style: percent ? { width: percent, ...style } : style, className: cx(skeleton, className) }));
+}

package/dist/components/skeletons.d.ts

@@ -0,0 +1,28 @@
+import { type TableColumnMeta } from "./data-grid.js";
+import type { ReactNode } from "react";
+/** Stands in for a labelled group of sidebar rows: a section label, then icon-and-name rows. */
+export declare function SidebarRowsSkeleton({ rows }: {
+    rows?: number;
+}): import("@types/react").JSX.Element;
+/** Stands in for a page header: optional avatar, title, meta line, and action buttons. */
+export declare function PageHeaderSkeleton({ avatar, actions, }: {
+    avatar?: boolean;
+    actions?: number;
+}): import("@types/react").JSX.Element;
+/** Stands in for a panel of label-value rows. */
+export declare function PanelSkeleton({ rows }: {
+    rows?: number;
+}): import("@types/react").JSX.Element;
+/** Placeholder for a row's compact edit and delete icon buttons. */
+export declare function RowActionsSkeleton(): import("@types/react").JSX.Element;
+/**
+ * A section's toolbar note and add button above its table header with placeholder rows, for
+ * tables whose real columns need loaded data.
+ */
+export declare function TableSectionSkeleton({ note, columns, }: {
+    note: ReactNode;
+    columns: {
+        header: string;
+        meta?: TableColumnMeta;
+    }[];
+}): import("@types/react").JSX.Element;

package/dist/components/skeletons.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "#primitives/css";
+import { createTableColumns, Table } from "./data-grid.js";
+import { Cluster, MutedText, Stack, Text, Toolbar } from "./layout.js";
+import { Panel, PanelHeader } from "./panel.js";
+import { Skeleton } from "./skeleton.js";
+// These placeholders stand in for product page chrome, so their spacing mirrors the page,
+// panel, and sidebar layouts a Crucible screen builds around them.
+/** Mirrors SidebarSection: its label's inset and the same gap between rows. */
+const sidebarSection = css({ display: "grid", gap: "layout.tightGap" });
+const sidebarLabel = css({
+    display: "flex",
+    alignItems: "center",
+    paddingInline: "control.compactInline",
+    marginBottom: "layout.controlGap",
+    fontSize: "body",
+    lineHeight: "tight",
+});
+const sidebarRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    height: "control.compact",
+    paddingInline: "control.compactInline",
+});
+const pageTitle = css({ fontSize: "heading.section" });
+const panelRow = css({
+    paddingBlock: "control.block",
+    borderTop: "1px solid token(colors.border.subtle)",
+    "&:first-of-type": { borderTop: "0" },
+});
+const textWidths = ["72%", "54%", "64%", "46%"];
+/** Stands in for a labelled group of sidebar rows: a section label, then icon-and-name rows. */
+export function SidebarRowsSkeleton({ rows = 3 }) {
+    return (_jsxs("div", { className: sidebarSection, children: [_jsx("span", { className: sidebarLabel, children: _jsx(Skeleton, { shape: "text", style: { width: 64 } }) }), Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: sidebarRow, children: [_jsx(Skeleton, { shape: "circle", style: { width: 16 } }), _jsx(Skeleton, { shape: "text", style: { width: textWidths[index % textWidths.length] } })] }, index)))] }));
+}
+/** Stands in for a page header: optional avatar, title, meta line, and action buttons. */
+export function PageHeaderSkeleton({ avatar = false, actions = 0, }) {
+    return (_jsxs(Toolbar, { render: _jsx("header", {}), gap: "16", justify: "between", stackOnPhone: true, children: [_jsxs(Cluster, { gap: "12", wrap: false, children: [avatar && _jsx(Skeleton, { shape: "circle", style: { width: 50 } }), _jsxs("div", { children: [_jsx("div", { className: pageTitle, children: _jsx(Skeleton, { shape: "text", style: { width: 220 } }) }), _jsx(Text, { render: _jsx("div", {}), size: "caption", children: _jsx(Skeleton, { shape: "text", style: { width: 160 } }) })] })] }), actions > 0 && (_jsx(Cluster, { gap: "12", wrap: false, children: Array.from({ length: actions }, (_, index) => (_jsx(Skeleton, { style: { width: 112, height: 38 } }, index))) }))] }));
+}
+/** Stands in for a panel of label-value rows. */
+export function PanelSkeleton({ rows = 4 }) {
+    return (_jsxs(Panel, { tone: "outline", children: [_jsx(PanelHeader, { level: 2, title: _jsx(Skeleton, { shape: "text", style: { width: 120 } }) }), _jsx("div", { children: Array.from({ length: rows }, (_, index) => (_jsxs(Toolbar, { justify: "between", className: panelRow, children: [_jsx(Skeleton, { shape: "text", style: { width: 80 } }), _jsx(Skeleton, { shape: "text", style: { width: 96 + (index % 3) * 24 } })] }, index))) })] }));
+}
+/** Placeholder for a row's compact edit and delete icon buttons. */
+export function RowActionsSkeleton() {
+    return (_jsxs(Cluster, { gap: "12", render: _jsx("span", {}), children: [_jsx(Skeleton, { shape: "circle", style: { width: 24 } }), _jsx(Skeleton, { shape: "circle", style: { width: 24 } })] }));
+}
+const placeholderColumn = createTableColumns();
+/**
+ * A section's toolbar note and add button above its table header with placeholder rows, for
+ * tables whose real columns need loaded data.
+ */
+export function TableSectionSkeleton({ note, columns, }) {
+    return (_jsxs(Stack, { gap: "section", children: [_jsxs(Toolbar, { gap: "12", justify: "between", stackOnPhone: true, children: [_jsx(MutedText, { children: note }), _jsx(Skeleton, { style: { width: 128, height: 32 } })] }), _jsx(Table, { data: [], columns: placeholderColumn.columns(columns.map((column, index) => placeholderColumn.display({
+                    id: String(index),
+                    header: column.header,
+                    meta: column.meta,
+                }))), getRowId: () => "", loading: true })] }));
+}