@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/appear.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { createContext, use, useEffect, useRef, useState } from "react";
+import { KitMotion } from "../lib/kit-motion.js";
+import { spring } from "../lib/motion.js";
+const AppearContext = createContext({ live: false, seen: new Set() });
+export function AppearProvider({ live, children }) {
+    const seen = useRef(new Set());
+    return _jsx(AppearContext, { value: { live, seen: seen.current }, children: children });
+}
+/**
+ * A container that arrives as a whole (a row of a live list) and animates itself: what it holds when it
+ * mounts doesn't animate again; only what arrives inside it later does.
+ */
+export function AppearScope({ children }) {
+    const parent = use(AppearContext);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return (_jsx(AppearContext, { value: { live: parent.live && mounted, seen: parent.seen }, children: children }));
+}
+/** Whether a child with this id should play its entrance; the id counts as seen once it has mounted. */
+function useAppear(id) {
+    const { live, seen } = use(AppearContext);
+    const reduced = useReducedMotion() === true;
+    // Decided once per mount and without side effects, so StrictMode's double render agrees.
+    const [enter] = useState(() => live && !reduced && !seen.has(id));
+    useEffect(() => {
+        seen.add(id);
+    }, [seen, id]);
+    return enter;
+}
+/** A 6 px rise and fade on the snappy spring for an item that just arrived. */
+export function Appear({ id, ...props }) {
+    const enter = useAppear(id);
+    return (_jsx(KitMotion, { children: _jsx(m.div, { "data-slot": "appear", initial: enter ? { opacity: 0, y: 6 } : false, animate: { opacity: 1, y: 0 }, transition: spring.snappy, ...props }) }));
+}
+/** Content that replaces a skeleton fades in where the skeleton was (no jump, no movement). */
+export function Reveal(props) {
+    return (_jsx(KitMotion, { children: _jsx(m.div, { "data-slot": "reveal", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.18, ease: [0.2, 0, 0, 1] }, ...props }) }));
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,196 @@
+import type { PersonaTint } from "../_bundled/tokens/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+export type Persona = PersonaTint;
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "busy" | "away" | "offline";
+declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        sm: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        md: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        lg: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        xl: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            root: string;
+        };
+        square: {};
+    };
+    status: {
+        online: {
+            status: string;
+        };
+        busy: {
+            status: string;
+        };
+        away: {
+            status: string;
+        };
+        offline: {
+            status: string;
+        };
+    };
+}, {
+    wrapper: string;
+    root: string[];
+    image: string[];
+    fallback: string;
+    status: string[];
+}, undefined, {
+    size: {
+        xs: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        sm: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        md: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        lg: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        xl: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            root: string;
+        };
+        square: {};
+    };
+    status: {
+        online: {
+            status: string;
+        };
+        busy: {
+            status: string;
+        };
+        away: {
+            status: string;
+        };
+        offline: {
+            status: string;
+        };
+    };
+}, {
+    wrapper: string;
+    root: string[];
+    image: string[];
+    fallback: string;
+    status: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        sm: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        md: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        lg: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+        xl: {
+            wrapper: string;
+            root: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            root: string;
+        };
+        square: {};
+    };
+    status: {
+        online: {
+            status: string;
+        };
+        busy: {
+            status: string;
+        };
+        away: {
+            status: string;
+        };
+        offline: {
+            status: string;
+        };
+    };
+}, {
+    wrapper: string;
+    root: string[];
+    image: string[];
+    fallback: string;
+    status: string[];
+}>>;
+export interface AvatarProps extends Omit<ComponentProps<"span">, "children">, Omit<VariantProps<typeof avatarStyles>, "status" | "size"> {
+    /** The person's (or a bot's) name: the accessible label, the initials and the tint. */
+    name: string;
+    src?: string | undefined;
+    size?: AvatarSize;
+    /** Presence dot. Announced in the accessible label, not just shown in color. */
+    status?: AvatarStatus | undefined;
+    /** Override the hashed persona tint. */
+    persona?: Persona;
+    /** Replace the initials, e.g. with an icon for a bot or a team. */
+    fallback?: ReactNode;
+    /** Optional role/descriptor appended to the label, e.g. "CEO". */
+    description?: string;
+}
+/** Image avatar with deterministic tinted initials as fallback, plus optional presence dot. */
+export declare function Avatar({ name, src, size, shape, status, persona, fallback, description, className, ...props }: AvatarProps): import("react").JSX.Element;
+export interface AvatarGroupProps extends ComponentProps<"div"> {
+    size?: AvatarSize;
+    /** Show at most this many avatars, then a "+N" chip. */
+    max?: number;
+}
+/**
+ * Overlapping stack of avatars. Set `--avatar-ring` to the surface color when the group sits on
+ * anything other than the page background (e.g. `[--avatar-ring:var(--surface)]` inside a Card).
+ */
+export declare function AvatarGroup({ size, max, className, children, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/avatar.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { Children, createContext, use } from "react";
+import { useUiLocale, useUiStrings } from "../i18n/provider.js";
+import { cn, tv } from "../lib/cn.js";
+import { initialsOf, spokenParts } from "../lib/text.js";
+import { Group } from "./group.js";
+const PERSONAS = [
+    "clay",
+    "ochre",
+    "sage",
+    "teal",
+    "slate",
+    "iris",
+    "plum",
+    "rose",
+];
+/** Static class strings so Tailwind can see every tint. */
+const PERSONA_TINT = {
+    clay: "bg-persona-clay-bg text-persona-clay-fg",
+    ochre: "bg-persona-ochre-bg text-persona-ochre-fg",
+    sage: "bg-persona-sage-bg text-persona-sage-fg",
+    teal: "bg-persona-teal-bg text-persona-teal-fg",
+    slate: "bg-persona-slate-bg text-persona-slate-fg",
+    iris: "bg-persona-iris-bg text-persona-iris-fg",
+    plum: "bg-persona-plum-bg text-persona-plum-fg",
+    rose: "bg-persona-rose-bg text-persona-rose-fg",
+};
+/** Deterministic persona for a name (FNV-1a). The same name always gets the same tint. */
+function personaFor(name) {
+    let hash = 0x811c9dc5;
+    for (const char of name.trim().toLowerCase()) {
+        hash ^= char.codePointAt(0) ?? 0;
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return PERSONAS[(hash >>> 0) % PERSONAS.length] ?? "slate";
+}
+const avatarStyles = tv({
+    slots: {
+        wrapper: "relative inline-flex shrink-0 align-middle",
+        root: [
+            "relative inline-flex size-full select-none items-center justify-center overflow-hidden font-medium leading-none",
+            // Hairline inner edge keeps photos from bleeding into the surface behind them.
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_0_0_1px_var(--border-subtle)]",
+        ],
+        image: [
+            "size-full object-cover transition-opacity duration-(--duration-base) ease-(--ease-standard)",
+            "data-starting-style:opacity-0 motion-reduce:transition-none",
+        ],
+        fallback: "flex size-full items-center justify-center [&_svg]:size-[55%]",
+        status: [
+            "absolute end-0 bottom-0 rounded-full",
+            "ring-[1.5px] ring-[color:var(--avatar-ring,var(--bg))]",
+        ],
+    },
+    variants: {
+        size: {
+            xs: { wrapper: "size-5", root: "text-[0.5625rem]", status: "size-1.5" },
+            sm: { wrapper: "size-6", root: "text-[0.625rem]", status: "size-2" },
+            md: { wrapper: "size-8", root: "text-xs", status: "size-2.5 ring-2" },
+            lg: { wrapper: "size-10", root: "text-sm", status: "size-3 ring-2" },
+            xl: { wrapper: "size-14", root: "text-md", status: "size-3.5 ring-[2.5px] end-0.5 bottom-0.5" },
+        },
+        shape: {
+            circle: { root: "rounded-full" },
+            square: {},
+        },
+        status: {
+            online: { status: "bg-success" },
+            busy: { status: "bg-danger" },
+            away: { status: "bg-warning" },
+            // Hollow ring: reads as "absent" without relying on hue.
+            offline: {
+                status: "bg-[color:var(--avatar-ring,var(--bg))] shadow-[inset_0_0_0_1.5px_var(--fg-subtle)]",
+            },
+        },
+    },
+    compoundVariants: [
+        { shape: "square", size: "xs", class: { root: "rounded-sm" } },
+        { shape: "square", size: "sm", class: { root: "rounded-md" } },
+        { shape: "square", size: "md", class: { root: "rounded-lg" } },
+        { shape: "square", size: "lg", class: { root: "rounded-xl" } },
+        { shape: "square", size: "xl", class: { root: "rounded-2xl", status: "-end-0.5 -bottom-0.5" } },
+    ],
+    defaultVariants: { size: "md", shape: "circle" },
+});
+const AvatarSizeContext = createContext(undefined);
+/** Image avatar with deterministic tinted initials as fallback, plus optional presence dot. */
+export function Avatar({ name, src, size, shape, status, persona, fallback, description, className, ...props }) {
+    const groupSize = use(AvatarSizeContext);
+    const locale = useUiLocale();
+    const styles = avatarStyles({ size: size ?? groupSize ?? "md", shape, status });
+    const statusWords = useUiStrings().primitives.avatarStatus;
+    const label = spokenParts([name, description, status && statusWords[status]].flatMap((part) => (part ? [part] : [])), locale);
+    return (_jsxs("span", { "data-slot": "avatar", role: "img", "aria-label": label, className: styles.wrapper({ className }), ...props, children: [_jsxs(BaseAvatar.Root, { "data-slot": "avatar-root", className: cn(styles.root(), PERSONA_TINT[persona ?? personaFor(name)]), children: [src && _jsx(BaseAvatar.Image, { src: src, alt: "", className: styles.image() }), _jsx(BaseAvatar.Fallback, { className: styles.fallback(), children: fallback ?? initialsOf(name, locale) })] }), status && _jsx("span", { "aria-hidden": true, "data-slot": "avatar-status", className: styles.status() })] }));
+}
+/* ------------------------------------------------------------------------------------------ */
+/* AvatarGroup                                                                                */
+/* ------------------------------------------------------------------------------------------ */
+const avatarGroup = tv({
+    slots: {
+        root: [
+            "flex items-center",
+            // Each avatar is cut out of the surface behind it with a ring in the surface color.
+            "[&_[data-slot=avatar-root]]:ring-2 [&_[data-slot=avatar-root]]:ring-[color:var(--avatar-ring,var(--bg))]",
+        ],
+        overflow: [
+            "relative inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium tabular",
+            "bg-bg-muted text-fg-muted ring-2 ring-[color:var(--avatar-ring,var(--bg))]",
+        ],
+    },
+    variants: {
+        size: {
+            xs: { root: "-space-x-1", overflow: "size-5 text-[0.5625rem]" },
+            sm: { root: "-space-x-1.5", overflow: "size-6 text-[0.625rem]" },
+            md: { root: "-space-x-2", overflow: "size-8 text-xs" },
+            lg: { root: "-space-x-2.5", overflow: "size-10 text-sm" },
+            xl: { root: "-space-x-3.5", overflow: "size-14 text-base" },
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * Overlapping stack of avatars. Set `--avatar-ring` to the surface color when the group sits on
+ * anything other than the page background (e.g. `[--avatar-ring:var(--surface)]` inside a Card).
+ */
+export function AvatarGroup({ size = "md", max, className, children, ...props }) {
+    const t = useUiStrings().primitives;
+    const items = Children.toArray(children);
+    const visible = max === undefined ? items : items.slice(0, Math.max(0, max));
+    const hidden = items.length - visible.length;
+    const styles = avatarGroup({ size });
+    return (_jsx(AvatarSizeContext, { value: size, children: _jsxs(Group, { "data-slot": "avatar-group", className: styles.root({ className }), ...props, children: [visible, hidden > 0 && (_jsxs("span", { "data-slot": "avatar-overflow", role: "img", "aria-label": t.moreAvatars({ count: hidden }), className: styles.overflow(), children: ["+", hidden] }))] }) }));
+}

package/dist/components/badge.d.ts

@@ -0,0 +1,183 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const badgeStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Quiet gray — metadata, counts, model names. */
+        neutral: {
+            root: string;
+            dot: string;
+        };
+        /** Hairline only — for dense lists where fills get noisy. */
+        outline: {
+            root: string;
+            dot: string;
+        };
+        success: {
+            root: string;
+            dot: string;
+        };
+        warning: {
+            root: string;
+            dot: string;
+        };
+        danger: {
+            root: string;
+            dot: string;
+        };
+        /** Neutral wash + fg-muted ink, like every info surface; its `Info` icon is what says "info". */
+        info: {
+            root: string;
+            dot: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    dot: string;
+}, undefined, {
+    variant: {
+        /** Quiet gray — metadata, counts, model names. */
+        neutral: {
+            root: string;
+            dot: string;
+        };
+        /** Hairline only — for dense lists where fills get noisy. */
+        outline: {
+            root: string;
+            dot: string;
+        };
+        success: {
+            root: string;
+            dot: string;
+        };
+        warning: {
+            root: string;
+            dot: string;
+        };
+        danger: {
+            root: string;
+            dot: string;
+        };
+        /** Neutral wash + fg-muted ink, like every info surface; its `Info` icon is what says "info". */
+        info: {
+            root: string;
+            dot: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    dot: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** Quiet gray — metadata, counts, model names. */
+        neutral: {
+            root: string;
+            dot: string;
+        };
+        /** Hairline only — for dense lists where fills get noisy. */
+        outline: {
+            root: string;
+            dot: string;
+        };
+        success: {
+            root: string;
+            dot: string;
+        };
+        warning: {
+            root: string;
+            dot: string;
+        };
+        danger: {
+            root: string;
+            dot: string;
+        };
+        /** Neutral wash + fg-muted ink, like every info surface; its `Info` icon is what says "info". */
+        info: {
+            root: string;
+            dot: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    dot: string;
+}>>;
+export type BadgeVariants = VariantProps<typeof badgeStyles>;
+export interface BadgeProps extends ComponentProps<"span">, BadgeVariants {
+    /** Leading status dot. Pair with text — the dot alone never carries meaning. */
+    dot?: boolean;
+    /**
+     * Leading icon. The info variant defaults to lucide `Info`: info is neutral, not the accent, so the
+     * icon is what tells it apart from a plain neutral badge. Pass your own icon to
+     * replace it, or `false` to hide it. A `dot` takes the icon's place.
+     */
+    icon?: ReactNode | false;
+}
+/** Small, calm label: subtle tint + matching foreground. Never loud. */
+export declare function Badge({ variant, size, dot, icon, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+declare const countBadge: import("tailwind-variants").TVReturnType<{
+    tone: {
+        /** Gray pill — unread counts in sidebars. */
+        neutral: "bg-bg-muted text-fg-muted";
+        /** Ink pill — draws the eye without color. */
+        ink: "bg-primary text-primary-fg";
+        /** Something waits on the person (needs-you counts). */
+        warning: "bg-warning-subtle text-warning-fg";
+        /** Errors or blocking items only. */
+        danger: "bg-danger text-danger-on-solid";
+    };
+}, undefined, string[], {
+    tone: {
+        /** Gray pill — unread counts in sidebars. */
+        neutral: "bg-bg-muted text-fg-muted";
+        /** Ink pill — draws the eye without color. */
+        ink: "bg-primary text-primary-fg";
+        /** Something waits on the person (needs-you counts). */
+        warning: "bg-warning-subtle text-warning-fg";
+        /** Errors or blocking items only. */
+        danger: "bg-danger text-danger-on-solid";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        /** Gray pill — unread counts in sidebars. */
+        neutral: "bg-bg-muted text-fg-muted";
+        /** Ink pill — draws the eye without color. */
+        ink: "bg-primary text-primary-fg";
+        /** Something waits on the person (needs-you counts). */
+        warning: "bg-warning-subtle text-warning-fg";
+        /** Errors or blocking items only. */
+        danger: "bg-danger text-danger-on-solid";
+    };
+}, undefined>>;
+export interface CountBadgeProps extends Omit<ComponentProps<"span">, "children">, VariantProps<typeof countBadge> {
+    count: number;
+    /** Values above `max` render as `max+`. */
+    max?: number;
+    /** Render a `0` instead of nothing. */
+    showZero?: boolean;
+}
+/** Numeric pill for unread/pending counts. The number rolls softly when it changes. */
+export declare function CountBadge({ count, max, showZero, tone, className, ...props }: CountBadgeProps): import("react").JSX.Element | null;
+export {};

package/dist/components/badge.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { cn, tv } from "../lib/cn.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { spring } from "../lib/motion.js";
+const badgeStyles = tv({
+    slots: {
+        root: [
+            "inline-flex shrink-0 select-none items-center whitespace-nowrap font-medium tabular",
+            "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3",
+        ],
+        dot: "size-1.5 shrink-0 rounded-full",
+    },
+    variants: {
+        variant: {
+            /** Quiet gray — metadata, counts, model names. */
+            neutral: { root: "bg-bg-muted text-fg-muted", dot: "bg-fg-subtle" },
+            /** Hairline only — for dense lists where fills get noisy. */
+            outline: { root: "border border-border text-fg-muted", dot: "bg-fg-subtle" },
+            success: { root: "bg-success-subtle text-success-fg", dot: "bg-success" },
+            warning: { root: "bg-warning-subtle text-warning-fg", dot: "bg-warning" },
+            danger: { root: "bg-danger-subtle text-danger-fg", dot: "bg-danger" },
+            /** Neutral wash + fg-muted ink, like every info surface; its `Info` icon is what says "info". */
+            info: { root: "bg-info-subtle text-info-fg", dot: "bg-info" },
+        },
+        size: {
+            // Text keeps 8 px from a filled edge at every size (system.md §2.3).
+            sm: { root: "h-4.5 gap-1 rounded-sm px-2 text-xs" },
+            md: { root: "h-5.5 gap-1.5 rounded-md px-2 text-xs" },
+        },
+    },
+    defaultVariants: { variant: "neutral", size: "md" },
+});
+/** Small, calm label: subtle tint + matching foreground. Never loud. */
+export function Badge({ variant, size, dot = false, icon, className, children, ...props }) {
+    const styles = badgeStyles({ variant, size });
+    const lead = dot || icon === false ? null : (icon ?? (variant === "info" ? _jsx(Info, { "aria-hidden": true }) : null));
+    return (_jsxs("span", { "data-slot": "badge", className: styles.root({ className }), ...props, children: [dot && _jsx("span", { "aria-hidden": true, className: styles.dot() }), lead, children] }));
+}
+const countBadge = tv({
+    base: [
+        "relative inline-flex h-4 min-w-4 shrink-0 select-none items-center justify-center overflow-hidden rounded-full px-1",
+        "text-xs font-semibold leading-none tabular",
+    ],
+    variants: {
+        tone: {
+            /** Gray pill — unread counts in sidebars. */
+            neutral: "bg-bg-muted text-fg-muted",
+            /** Ink pill — draws the eye without color. */
+            ink: "bg-primary text-primary-fg",
+            /** Something waits on the person (needs-you counts). */
+            warning: "bg-warning-subtle text-warning-fg",
+            /** Errors or blocking items only. */
+            danger: "bg-danger text-danger-on-solid",
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+/** Numeric pill for unread/pending counts. The number rolls softly when it changes. */
+export function CountBadge({ count, max = 99, showZero = false, tone, className, ...props }) {
+    if (count <= 0 && !showZero)
+        return null;
+    const label = count > max ? `${max}+` : String(Math.max(0, count));
+    return (_jsx("span", { "data-slot": "count-badge", className: cn(countBadge({ tone }), className), ...props, children: _jsx(KitMotion, { children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(m.span, { initial: { y: 6, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -6, opacity: 0 }, transition: spring.snappy, children: label }, label) }) }) }));
+}

package/dist/components/block-stack.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps, type ReactNode } from "react";
+/**
+ * A panel of blocks: every block has the same header — its title with
+ * a caret, then a grip — every block collapses, and blocks reorder by dragging the grip or with the
+ * arrow keys on it. Collapse and reorder are instant: nothing animates a size or a position.
+ * Order and collapsed state live in a `BlockLayout` the host keeps and remembers.
+ */
+export interface BlockLayout {
+    /** Block ids, top to bottom. */
+    readonly order: readonly string[];
+    /** Ids of collapsed blocks. */
+    readonly collapsed: readonly string[];
+}
+export interface BlockStackProps extends Omit<ComponentProps<"div">, "children"> {
+    readonly layout: BlockLayout;
+    readonly onLayoutChange: (layout: BlockLayout) => void;
+    /** `<Block>`s; their order on screen is `layout.order` (blocks it doesn't list follow, as given). */
+    readonly children: ReactNode;
+}
+export declare function BlockStack({ layout, onLayoutChange, className, children, ...props }: BlockStackProps): import("react").JSX.Element;
+export interface BlockProps extends Omit<ComponentProps<"section">, "title" | "id"> {
+    /** Stable id: the key in `BlockLayout`. */
+    readonly id: string;
+    /** Heading text ("Context"). Names the region and the grip. */
+    readonly title: string;
+    /**
+     * Quiet trailing summary in the header ("48 % used", "2 running"), shown collapsed too. Text only:
+     * a block header holds no buttons besides its own; actions live in the body.
+     */
+    readonly meta?: ReactNode;
+}
+/** One block of a `BlockStack`: the shared header (title and caret, meta, grip), then its body. */
+export declare function Block({ id, title, meta, className, children, ...props }: BlockProps): import("react").JSX.Element;