@ag2/weave 0.5.0 → 0.6.0-direction-d.1

package/dist/components/page/style.css.d.ts

@@ -17,7 +17,7 @@ export declare const PageNavResizeHandle: string;
 export declare const PageNavHeader: import("@vanilla-extract/recipes").RuntimeFn<{
     outlined: {
         true: {
-            borderBottomWidth: number;
+            boxShadow: `inset 0 -1px var(--${string})` | `inset 0 -1px var(--${string}, ${string})` | `inset 0 -1px var(--${string}, ${number})`;
         };
     };
 }>;
@@ -36,7 +36,7 @@ export declare const PageHeader: import("@vanilla-extract/recipes").RuntimeFn<{
     };
     outlined: {
         true: {
-            borderBottomWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: `inset 0 -1px var(--${string})` | `inset 0 -1px var(--${string}, ${string})` | `inset 0 -1px var(--${string}, ${number})`;
         };
     };
 }>;

package/dist/components/page-state/EmptyState.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export declare type EmptyStateProps = {
+    icon: ReactNode;
+    title: ReactNode;
+    subTitle: ReactNode;
+    /** Actions under the copy — a primary button, a pair of links. */
+    children?: ReactNode;
+    /** Drop the height floor, for a docked panel. */
+    compact?: boolean;
+};
+/** The hero a page shows when it has nothing to list: icon, title, sub-title, actions. */
+export declare const EmptyState: ({ icon, title, subTitle, children, compact }: EmptyStateProps) => JSX.Element;

package/dist/components/page-state/ErrorState.d.ts

@@ -0,0 +1,9 @@
+export declare type ErrorStateProps = {
+    title: string;
+    description: string;
+    /** Label of the retry button. */
+    retry?: string;
+    onRetry?: () => void;
+};
+/** A centred error with a retry, as pages show when a request fails. */
+export declare const ErrorState: ({ title, description, retry, onRetry }: ErrorStateProps) => JSX.Element;

package/dist/components/page-state/LoadingState.d.ts

@@ -0,0 +1,5 @@
+export declare type LoadingStateProps = {
+    label?: string;
+};
+/** A centred spinner with a label, as every page shows while its data loads. */
+export declare const LoadingState: ({ label }: LoadingStateProps) => JSX.Element;

package/dist/components/page-state/PageState.css.d.ts

@@ -0,0 +1,3 @@
+export declare const ErrorStateMark: string;
+export declare const ErrorStateDescription: string;
+export declare const PageTitleHeaderTitle: string;

package/dist/components/page-state/PageTitleHeader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export declare type PageTitleHeaderProps = {
+    title: string;
+    /** Before the title — a room avatar, a section icon. */
+    icon?: ReactNode;
+    /** Trailing actions, right-aligned. */
+    after?: ReactNode;
+    /** Show the back arrow; narrow layouts push instead of splitting. */
+    back?: boolean;
+    onBack?: () => void;
+};
+/** A page-level header: back arrow, icon, title, trailing actions. */
+export declare const PageTitleHeader: ({ title, icon, after, back, onBack }: PageTitleHeaderProps) => JSX.Element;

package/dist/components/page-state/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./EmptyState";
+export * from "./LoadingState";
+export * from "./ErrorState";
+export * from "./PageTitleHeader";

package/dist/components/password-input/PasswordInput.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentProps } from "react";
+import { Input } from "../input";
+export declare type PasswordInputProps = Omit<ComponentProps<typeof Input>, "type"> & {
+    revealLabel?: string;
+    concealLabel?: string;
+};
+export declare const PasswordInput: React.ForwardRefExoticComponent<Pick<PasswordInputProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "as" | "children" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dateTime" | "open" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "integrity" | "charSet" | "content" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "start" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "rows" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "wrap" | "default" | "kind" | "srcLang" | "poster" | "after" | "radii" | "variant" | "before" | "outlined" | "inputSize" | "revealLabel" | "concealLabel"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/password-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./PasswordInput";

package/dist/components/person-avatar/PersonAvatar.d.ts

@@ -0,0 +1,6 @@
+import { IdentityAvatarProps } from "../identity/Identity";
+export declare type PersonAvatarProps = Omit<IdentityAvatarProps, "kind" | "fallback" | "busy"> & {
+    agent?: boolean;
+};
+/** Legacy agent avatars remain glyph-only; AgentAvatar also accepts uploaded photos. */
+export declare const PersonAvatar: ({ agent, src, radii, ...props }: PersonAvatarProps) => JSX.Element;

package/dist/components/person-avatar/index.d.ts

@@ -0,0 +1 @@
+export * from "./PersonAvatar";

package/dist/components/pill/Pill.d.ts

@@ -0,0 +1,11 @@
+export declare type PillProps = {
+    label: string;
+    /** Renders pressed (Primary) and sets aria-pressed. */
+    active?: boolean;
+    onClick?: () => void;
+};
+/**
+ * A pill-shaped toggle chip: join rules, filters, and tab-like choices that
+ * are not routes. It is a toggle, so it reports its state with aria-pressed.
+ */
+export declare const Pill: ({ label, active, onClick }: PillProps) => JSX.Element;

package/dist/components/pill/index.d.ts

@@ -0,0 +1 @@
+export * from "./Pill";

package/dist/components/pop-out/PopOut.css.d.ts

@@ -1,2 +1,3 @@
 export declare const PopOut: string;
 export declare const PopOutContainer: string;
+export declare const PopOutContent: string;

package/dist/components/power/Power.css.d.ts

@@ -0,0 +1 @@
+export declare const Icon: string;

package/dist/components/power/Power.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps } from "react";
+import { Select } from "../select";
+import { MainColor } from "../types";
+export declare type PowerOption = {
+    value: number;
+    label: string;
+    disabled?: boolean;
+};
+export declare type PowerSelectorProps = Omit<ComponentProps<typeof Select>, "options" | "value" | "onValueChange" | "onChange"> & {
+    options: PowerOption[];
+    value: number;
+    onValueChange: (value: number) => void;
+};
+export declare const PowerSelector: ({ options, value, onValueChange, ...props }: PowerSelectorProps) => JSX.Element;
+export declare const PowerBadge: ({ label, level, variant, }: {
+    label: string;
+    level?: number | undefined;
+    variant?: MainColor | undefined;
+}) => JSX.Element;
+export declare const PowerIcon: ({ name, imageSrc, children, }: {
+    name: string;
+    imageSrc?: string | undefined;
+    children?: string | undefined;
+}) => JSX.Element;

package/dist/components/power/index.d.ts

@@ -0,0 +1 @@
+export * from "./Power";

package/dist/components/presence/Presence.css.d.ts

@@ -0,0 +1,39 @@
+export declare const AvatarPresence: string;
+export declare const BadgeFrame: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        Background: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        Surface: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        SurfaceVariant: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        Primary: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        Secondary: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        Success: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        Warning: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        Critical: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    animate: {
+        true: {
+            animation: `${string} 2.8s var(--${string}) infinite` | `${string} 2.8s var(--${string}, ${string}) infinite` | `${string} 2.8s var(--${string}, ${number}) infinite`;
+            "@media": {
+                "(prefers-reduced-motion: reduce)": {
+                    animation: "none";
+                };
+            };
+        };
+    };
+}>;

package/dist/components/presence/Presence.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { ContainerColor, MainColor } from "../types";
+export declare type Presence = "online" | "unavailable" | "offline";
+export declare type PresenceBadgeProps = {
+    presence: Presence;
+    status?: string;
+    /** Localised presence label. Status text is appended when supplied. */
+    label?: string;
+    size?: "200" | "300" | "400" | "500";
+    variantOverride?: MainColor;
+    glyph?: ReactNode;
+};
+/** A named image, with no tooltip id or network/state dependency. */
+export declare const PresenceBadge: <T extends React.ElementType<any> = "span">(props: import("../types").AsOutProps<T, PresenceBadgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare type AvatarPresenceProps = {
+    badge?: ReactNode;
+    variant?: ContainerColor;
+    animate?: boolean;
+};
+export declare const AvatarPresence: <T extends React.ElementType<any> = "span">(props: import("../types").AsOutProps<T, AvatarPresenceProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/components/presence/index.d.ts

@@ -0,0 +1 @@
+export * from "./Presence";

package/dist/components/progress-bar/ProgressBar.css.d.ts

@@ -42,6 +42,8 @@ export declare const ProgressBar: import("@vanilla-extract/recipes").RuntimeFn<{
         "300": string;
         "400": string;
         "500": string;
+        "600": string;
+        "700": string;
         Pill: string;
     };
     outlined: {

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -8,7 +8,7 @@ export declare const ProgressBar: <T extends React.ElementType<any> = "span">(pr
     size?: "300" | "400" | "500" | undefined;
     variant?: "Primary" | "Secondary" | "Success" | "Warning" | "Critical" | undefined;
     fill?: "Solid" | "Soft" | "None" | undefined;
-    radii?: "0" | "300" | "400" | "500" | "Pill" | "Inherit" | undefined;
+    radii?: "0" | "300" | "400" | "500" | "600" | "700" | "Pill" | "Inherit" | undefined;
     outlined?: boolean | undefined;
 }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export {};

package/dist/components/scroll/Scroll.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const Scroll: <T extends React.ElementType<any> = "div">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {
     variant?: "Background" | "Surface" | "SurfaceVariant" | "Primary" | "Secondary" | "Success" | "Warning" | "Critical" | undefined;
-    visibility?: "Always" | "Hover" | undefined;
+    visibility?: "Hover" | "Always" | undefined;
     hideTrack?: boolean | undefined;
     size?: "0" | "300" | "400" | undefined;
     direction?: "Horizontal" | "Vertical" | "Both" | undefined;

package/dist/components/select/Select.css.d.ts

@@ -0,0 +1,3 @@
+export declare const Root: string;
+export declare const Select: string;
+export declare const Arrow: string;

package/dist/components/select/Select.d.ts

@@ -0,0 +1,21 @@
+import React, { SelectHTMLAttributes } from "react";
+import * as inputCss from "../input/Input.css";
+export declare type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export declare type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "children"> & inputCss.InputVariants & {
+    options: SelectOption[];
+    onValueChange?: (value: string) => void;
+};
+/** A native choice field: keyboard navigation, touch picker and form submission stay native. */
+export declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children" | "size"> & {
+    variant?: "Background" | "Surface" | "SurfaceVariant" | "Primary" | "Secondary" | "Success" | "Warning" | "Critical" | undefined;
+    size?: "300" | "400" | "500" | undefined;
+    outlined?: boolean | undefined;
+    radii?: "0" | "300" | "400" | "500" | "600" | "700" | "Pill" | "Inherit" | undefined;
+} & {
+    options: SelectOption[];
+    onValueChange?: ((value: string) => void) | undefined;
+} & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/index.d.ts

@@ -0,0 +1 @@
+export * from "./Select";

package/dist/components/sequence-card/SequenceCard.d.ts

@@ -9,14 +9,14 @@ export declare const SequenceCard: <T extends React.ElementType<any> = "div">(pr
     alignContent?: "Start" | "Center" | "End" | "Inherit" | "Stretch" | "Baseline" | "SpaceBetween" | "SpaceAround" | "SpaceEvenly" | undefined;
     alignItems?: "Start" | "Center" | "End" | "Inherit" | "Stretch" | "Baseline" | undefined;
     alignSelf?: "Start" | "Center" | "End" | "Inherit" | "Stretch" | "Baseline" | undefined;
-    gap?: "0" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "Inherit" | undefined;
+    gap?: "0" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "Inherit" | "50" | "250" | undefined;
     grow?: "No" | "Yes" | undefined;
     shrink?: "No" | "Yes" | undefined;
     basis?: "No" | "Yes" | undefined;
 } & import("..").AsProp<React.ElementType<any>> & {
     variant?: "Background" | "Surface" | "SurfaceVariant" | "Primary" | "Secondary" | "Success" | "Warning" | "Critical" | undefined;
 } & {
-    radii?: "0" | "300" | "400" | "500" | undefined;
+    radii?: "0" | "300" | "400" | "500" | "600" | "700" | undefined;
     outlined?: boolean | undefined;
     mergeBorder?: boolean | undefined;
 }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/components/sequence-card/style.css.d.ts

@@ -21,6 +21,16 @@ export declare const SequenceCard: import("@vanilla-extract/recipes").RuntimeFn<
                 [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             };
         };
+        "600": {
+            vars: {
+                [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        "700": {
+            vars: {
+                [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
     };
     outlined: {
         true: {
@@ -31,10 +41,16 @@ export declare const SequenceCard: import("@vanilla-extract/recipes").RuntimeFn<
     };
     mergeBorder: {
         true: {
-            borderBottomWidth: number;
+            marginBottom: `calc(-1 * var(--${string}))` | `calc(-1 * var(--${string}, ${string}))` | `calc(-1 * var(--${string}, ${number}))`;
             selectors: {
                 "&:last-child, &:not(:has(+&))": {
-                    borderBottomWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    marginBottom: number;
+                };
+                '&[data-last-child="false"]': {
+                    marginBottom: `calc(-1 * var(--${string}))` | `calc(-1 * var(--${string}, ${string}))` | `calc(-1 * var(--${string}, ${number}))`;
+                };
+                '&[data-last-child="true"]': {
+                    marginBottom: number;
                 };
             };
         };

package/dist/components/settings-shell/SettingsShell.css.d.ts

@@ -0,0 +1,6 @@
+export declare const Navigation: string;
+export declare const NavHeader: string;
+export declare const NavItems: string;
+export declare const Content: string;
+export declare const NarrowNavigation: string;
+export declare const NavItem: string;

package/dist/components/settings-shell/SettingsShell.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export declare type NavSection = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export declare type SectionNavProps = {
+    header: ReactNode;
+    sections: NavSection[];
+    active: string;
+    onSelect?: (id: string) => void;
+    onClose?: () => void;
+    label?: string;
+};
+export declare const SectionNav: ({ header, sections, active, onSelect, onClose, label, }: SectionNavProps) => JSX.Element;
+export declare type SettingsPageProps = {
+    title: string;
+    children: ReactNode;
+    after?: ReactNode;
+    onBack?: () => void;
+};
+export declare const SettingsPage: ({ title, children, after, onBack }: SettingsPageProps) => JSX.Element;
+export declare type SettingsShellProps = SettingsPageProps & {
+    nav: ReactNode;
+    /** The consuming layout decides when the two columns no longer fit. */
+    compact?: boolean;
+    /** Controlled mobile navigation; routing and history stay with the consumer. */
+    navigationVisible?: boolean;
+};
+export declare const SettingsShell: ({ nav, compact, navigationVisible, ...pageProps }: SettingsShellProps) => JSX.Element;

package/dist/components/settings-shell/index.d.ts

@@ -0,0 +1 @@
+export * from "./SettingsShell";

package/dist/components/sidebar/Sidebar.css.d.ts

@@ -51,7 +51,7 @@ export declare const SidebarAvatar: import("@vanilla-extract/recipes").RuntimeFn
     };
     outlined: {
         true: {
-            border: `var(--${string}) solid var(--${string})` | `var(--${string}) solid var(--${string}, ${string})` | `var(--${string}) solid var(--${string}, ${number})` | `var(--${string}, ${string}) solid var(--${string})` | `var(--${string}, ${string}) solid var(--${string}, ${string})` | `var(--${string}, ${string}) solid var(--${string}, ${number})` | `var(--${string}, ${number}) solid var(--${string})` | `var(--${string}, ${number}) solid var(--${string}, ${string})` | `var(--${string}, ${number}) solid var(--${string}, ${number})`;
+            boxShadow: `inset 0 0 0 var(--${string}) var(--${string})` | `inset 0 0 0 var(--${string}) var(--${string}, ${string})` | `inset 0 0 0 var(--${string}) var(--${string}, ${number})` | `inset 0 0 0 var(--${string}, ${string}) var(--${string})` | `inset 0 0 0 var(--${string}, ${string}) var(--${string}, ${string})` | `inset 0 0 0 var(--${string}, ${string}) var(--${string}, ${number})` | `inset 0 0 0 var(--${string}, ${number}) var(--${string})` | `inset 0 0 0 var(--${string}, ${number}) var(--${string}, ${string})` | `inset 0 0 0 var(--${string}, ${number}) var(--${string}, ${number})`;
         };
     };
 }>;
@@ -59,7 +59,7 @@ export declare type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>
 export declare const SidebarFolder: import("@vanilla-extract/recipes").RuntimeFn<{
     state: {
         Close: {
-            gap: string;
+            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
         Open: {

package/dist/components/sidebar/SidebarItem.d.ts

@@ -14,7 +14,8 @@ export declare const SidebarAvatar: <T extends React.ElementType<any> = "div">(p
     outlined?: boolean | undefined;
 } & Omit<any, "as"> & {
     size?: "200" | "300" | "400" | "500" | undefined;
-    radii?: "0" | "300" | "400" | "500" | "Pill" | "Inherit" | undefined;
+    radii?: "0" | "300" | "400" | "500" | "600" | "700" | "Pill" | "Inherit" | undefined;
+    activity?: "Idle" | "Busy" | undefined;
 } & import("..").AsProp<React.ElementType<any>>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export declare const SidebarFolder: <T extends React.ElementType<any> = "div">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {
     state?: "Close" | "Open" | undefined;

package/dist/components/skeleton/Skeleton.css.d.ts

@@ -0,0 +1,28 @@
+import { RecipeVariants } from "@vanilla-extract/recipes";
+export declare const Skeleton: import("@vanilla-extract/recipes").RuntimeFn<{
+    shape: {
+        line: {};
+        avatar: {
+            width: string;
+            height: string;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    short: {
+        true: {
+            width: "40%";
+        };
+    };
+    animate: {
+        true: {
+            animation: `${string} 1.8s var(--${string}) infinite` | `${string} 1.8s var(--${string}, ${string}) infinite` | `${string} 1.8s var(--${string}, ${number}) infinite`;
+            "@media": {
+                "(prefers-reduced-motion: reduce)": {
+                    animation: "none";
+                };
+            };
+        };
+    };
+}>;
+export declare type SkeletonVariants = RecipeVariants<typeof Skeleton>;
+export declare const Row: string;

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const Skeleton: <T extends React.ElementType<any> = "span">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {
+    shape?: "line" | "avatar" | undefined;
+    short?: boolean | undefined;
+    animate?: boolean | undefined;
+} & import("..").AsProp<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const SkeletonRow: ({ avatar, animate, }: {
+    avatar?: boolean | undefined;
+    animate?: boolean | undefined;
+}) => JSX.Element;

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/dist/components/spinner/Spinner.css.d.ts

@@ -11,6 +11,10 @@ export declare const Spinner: import("@vanilla-extract/recipes").RuntimeFn<{
         "500": string;
         "600": string;
     };
+    shape: {
+        Ring: {};
+        Morph: {};
+    };
     variant: {
         Primary: ComplexStyleRule;
         Secondary: ComplexStyleRule;
@@ -35,3 +39,4 @@ export declare type SpinnerVariants = RecipeVariants<typeof Spinner>;
 export declare const SpinnerSvg: string;
 export declare const SpinnerOuter: string;
 export declare const SpinnerInner: string;
+export declare const SpinnerMorph: string;

package/dist/components/spinner/Spinner.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export declare const Spinner: <T extends React.ElementType<any> = "span">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {
     size?: "100" | "200" | "300" | "400" | "500" | "600" | "Inherit" | "50" | undefined;
+    shape?: "Ring" | "Morph" | undefined;
     variant?: "Primary" | "Secondary" | "Success" | "Warning" | "Critical" | undefined;
     fill?: "Solid" | "Soft" | undefined;
 } & import("..").AsProp<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/dist/components/split-button/SplitButton.css.d.ts

@@ -0,0 +1,4 @@
+export declare const Group: string;
+export declare const Primary: string;
+export declare const More: string;
+export declare const Spinner: string;

package/dist/components/split-button/SplitButton.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactNode } from "react";
+import { Button } from "../button";
+import { MenuEntry } from "../menu-button";
+export declare type SplitButtonProps = {
+    children: ReactNode;
+    onClick: ComponentProps<typeof Button>["onClick"];
+    entries: MenuEntry[];
+    menuLabel: string;
+    disabled?: boolean;
+    /** Controlled: the consumer owns async work, errors and completion lifetime. */
+    busy?: boolean;
+    complete?: boolean;
+    busyLabel?: string;
+    completeLabel?: string;
+};
+export declare const SplitButton: ({ children, onClick, entries, menuLabel, disabled, busy, complete, busyLabel, completeLabel, }: SplitButtonProps) => JSX.Element;

package/dist/components/split-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./SplitButton";

package/dist/components/tab-bar/TabBar.d.ts

@@ -0,0 +1,12 @@
+export declare type TabBarProps = {
+    tabs: string[];
+    /** The selected tab; compared to each entry by value. */
+    active: string;
+    onSelect?: (tab: string) => void;
+};
+/**
+ * A row of tab chips — the settings tab strip, the explore filters, the
+ * console sections. A tablist, so the selected chip carries aria-selected;
+ * for a pressed-state toggle that is not a tab, use Pill.
+ */
+export declare const TabBar: ({ tabs, active, onSelect }: TabBarProps) => JSX.Element;

package/dist/components/tab-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./TabBar";

package/dist/components/text/Text.css.d.ts

@@ -92,6 +92,21 @@ export declare const Text: import("@vanilla-extract/recipes").RuntimeFn<{
             letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
+        Metadata: {
+            fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            letterSpacing: "0";
+        };
+        LabelMono: {
+            fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textTransform: "uppercase";
+        };
         O400: {
             fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/components/text/Text.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare const Text: <T extends React.ElementType<any> = "p">(props: Omit<React.PropsWithChildren<React.ComponentPropsWithRef<T>>, "as"> & {
-    size?: "D400" | "H1" | "H2" | "H3" | "H4" | "H5" | "H6" | "T500" | "T400" | "T300" | "T200" | "B500" | "B400" | "B300" | "L400" | "O400" | "C400" | "Inherit" | undefined;
+    size?: "D400" | "H1" | "H2" | "H3" | "H4" | "H5" | "H6" | "T500" | "T400" | "T300" | "T200" | "B500" | "B400" | "B300" | "L400" | "LabelMono" | "O400" | "C400" | "Inherit" | "Metadata" | undefined;
     align?: "Right" | "Left" | "Center" | "Justify" | undefined;
     truncate?: boolean | undefined;
     priority?: "300" | "400" | "500" | "Inherit" | "Initial" | undefined;

package/dist/components/text-area/TextArea.css.d.ts

@@ -18,7 +18,6 @@ export declare const TextArea: import("@vanilla-extract/recipes").RuntimeFn<{
             };
             minHeight: string;
             padding: `calc((${string} - var(--${string})) / 2) var(--${string})` | `calc((${string} - var(--${string})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string})) / 2) var(--${string}, ${number})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string}, ${number})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string}, ${number})`;
-            paddingRight: number;
         };
         "400": {
             vars: {
@@ -26,7 +25,6 @@ export declare const TextArea: import("@vanilla-extract/recipes").RuntimeFn<{
             };
             minHeight: string;
             padding: `calc((${string} - var(--${string})) / 2) var(--${string})` | `calc((${string} - var(--${string})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string})) / 2) var(--${string}, ${number})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string}, ${number})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string}, ${number})`;
-            paddingRight: number;
         };
         "500": {
             vars: {
@@ -34,7 +32,6 @@ export declare const TextArea: import("@vanilla-extract/recipes").RuntimeFn<{
             };
             minHeight: string;
             padding: `calc((${string} - var(--${string})) / 2) var(--${string})` | `calc((${string} - var(--${string})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string})) / 2) var(--${string}, ${number})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string}, ${string})) / 2) var(--${string}, ${number})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string}, ${string})` | `calc((${string} - var(--${string}, ${number})) / 2) var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
     outlined: {
@@ -48,6 +45,8 @@ export declare const TextArea: import("@vanilla-extract/recipes").RuntimeFn<{
         "300": string;
         "400": string;
         "500": string;
+        "600": string;
+        "700": string;
         Pill: string;
     };
     resize: {

package/dist/components/text-area/TextArea.d.ts

@@ -3,6 +3,6 @@ export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.AllHTM
     variant?: "Background" | "Surface" | "SurfaceVariant" | "Primary" | "Secondary" | "Success" | "Warning" | "Critical" | undefined;
     size?: "300" | "400" | "500" | undefined;
     outlined?: boolean | undefined;
-    radii?: "0" | "300" | "400" | "500" | "Pill" | "Inherit" | undefined;
+    radii?: "0" | "300" | "400" | "500" | "600" | "700" | "Pill" | "Inherit" | undefined;
     resize?: "None" | "Horizontal" | "Vertical" | "Both" | "Block" | "Inline" | undefined;
 } & React.RefAttributes<HTMLTextAreaElement>>;