@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/layout/breadcrumb.js

@@ -1,21 +1,63 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu.js";
 function Breadcrumb({
   items,
   linkComponent: LinkComponent = "a",
-  ariaLabel
+  ariaLabel,
+  separator,
+  itemRender
 }) {
   const { t } = useTranslation();
+  const separatorNode = separator === void 0 ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : separator;
   return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-      item.to && !isLast ? /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),
-      !isLast ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : null
+      renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
+      !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
     ] }, item.to ?? index);
   }) }) });
 }
+function renderBreadcrumbSegment({
+  item,
+  index,
+  isLast,
+  items,
+  itemRender,
+  LinkComponent
+}) {
+  if (itemRender) return itemRender(item, { index, isLast, items });
+  if (item.menu) {
+    const { items: menuItems, onSelect } = item.menu;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuTrigger, { className: "ui-breadcrumb-menu-trigger ui-focus-ring", children: [
+        item.label,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "ui-breadcrumb-menu-icon", "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomStart", children: menuItems.map((entry) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          disabled: entry.disabled,
+          onSelect: onSelect ? () => onSelect(entry.value) : void 0,
+          asChild: entry.to !== void 0,
+          children: entry.to !== void 0 ? /* @__PURE__ */ jsx(LinkComponent, { href: entry.to, to: entry.to, children: entry.label }) : entry.label
+        },
+        entry.value
+      )) })
+    ] });
+  }
+  if (item.to && !isLast) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label });
+}
 export {
   Breadcrumb
 };

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, gap, align, justify, wrap, hideBelow, hideFrom, className, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ as: Element, direction, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -2,17 +2,29 @@
 import { jsx } from "react/jsx-runtime";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
-import { flexGapClass } from "../../lib/variants.js";
+import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Flex({
   as: Element = "div",
   direction = "row",
+  grow,
+  shrink,
+  surface,
+  bleed,
+  reveal,
   gap = "md",
+  gapRaw,
+  pad,
+  padRaw,
   align,
   justify,
   wrap = false,
   hideBelow,
   hideFrom,
+  fill = false,
+  width,
   className,
+  style,
   children,
   ...props
 }) {
@@ -30,16 +42,42 @@ function Flex({
       "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
     };
   }
+  const responsive = typeof direction === "object";
+  const axes = responsive ? direction : { base: direction };
+  const cssDirection = (axis) => axis === "col" ? "column" : axis;
+  const directionVars = responsive ? Object.fromEntries(
+    Object.entries(axes).map(([step, axis]) => [
+      `--flex-direction-${step}`,
+      cssDirection(axis)
+    ])
+  ) : {};
   return /* @__PURE__ */ jsx(
     Element,
     {
-      "data-direction": direction,
+      "data-direction": responsive ? "responsive" : direction,
+      "data-grow": grow ? "" : void 0,
+      "data-shrink": shrink === false ? "false" : void 0,
+      "data-surface": surface,
+      "data-reveal": reveal,
+      "data-list": Element === "ul" ? "disc" : Element === "ol" ? "decimal" : void 0,
       "data-align": align,
       "data-justify": justify,
       "data-wrap": wrap ? "true" : void 0,
       "data-hide-below": hideBelow,
       "data-hide-from": hideFrom,
-      className: cn("ui-flex", flexGapClass[gap], className),
+      "data-fill": fill ? "" : void 0,
+      "data-width-raw": width === void 0 ? void 0 : "",
+      "data-gap-raw": gapRaw,
+      className: cn("ui-flex", gapRaw === void 0 ? flexGapClass[gap] : void 0, className),
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      style: {
+        ...style,
+        ...directionVars,
+        ...bleed === void 0 ? void 0 : { marginInline: `calc(-1 * ${padStepToken(bleed)})` },
+        ...gapRaw === void 0 ? void 0 : { gap: `${gapRaw}px` },
+        ...width === void 0 ? void 0 : { inlineSize: toCssLength(width) },
+        ...padStyle(pad, padRaw)
+      },
       ...domProps,
       children
     }

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

@@ -7,6 +7,8 @@ export { NavList } from "./nav-list.js";
 export type { NavListProp, NavListProps } from "./nav-list.js";
 export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
+export { AppLauncher } from "./app-launcher.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProps, } from "./app-launcher.js";
 export { OrgSwitcher } from "./org-switcher.js";
 export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProps, } from "./org-switcher.js";
 export { AuthShell } from "./auth-shell.js";
@@ -54,3 +56,4 @@ export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
+export { useAppShellNavigationMode } from "./app-shell.js";

package/dist/components/layout/index.js

@@ -3,6 +3,7 @@ import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { NavList } from "./nav-list.js";
 import { AppShell } from "./app-shell.js";
+import { AppLauncher } from "./app-launcher.js";
 import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
 import { AuthDivider } from "./auth-divider.js";
@@ -25,8 +26,10 @@ import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
+import { useAppShellNavigationMode } from "./app-shell.js";
 export {
   AccountChip,
+  AppLauncher,
   AppShell,
   AspectRatio,
   AuthAccountSummary,
@@ -58,5 +61,6 @@ export {
   SplitPane,
   Topbar,
   TopbarItem,
-  createSidebarLink
+  createSidebarLink,
+  useAppShellNavigationMode
 };

package/dist/components/layout/nav-surface.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+/**
+ * WHICH SURFACE a navigation component is rendering into.
+ *
+ * `AppShell` reuses the very same `sidebar` / `navRail` nodes for the mobile drawer that it docks
+ * on desktop — that is the point of the default, since a consumer should not have to build its
+ * navigation twice. But those nodes carry `collapsed`, and collapse is a DESKTOP answer: it trades
+ * labels for horizontal room in a docked column. A drawer has no such pressure, and below the
+ * breakpoint it is the ONLY navigation there is.
+ *
+ * Shipping both together produced a drawer of anonymous icons: a consumer collapsed its sidebar at
+ * 1280px, resized to 393px, opened the drawer, and got the organization mark plus five unlabelled
+ * glyphs — captured in that repo's own browser test, which is named "desktop sidebar collapse
+ * stays independent from the mobile navigation drawer" and had been asserting exactly this.
+ *
+ * The node cannot be un-collapsed from the outside once it is built, so the surface announces
+ * itself instead and the navigation components read it. Not exported from the public barrel: this
+ * is a contract between `AppShell` and the navigation it hosts, not a consumer knob.
+ */
+export type NavSurface = "docked" | "drawer";
+export declare function NavSurfaceProvider({ surface, children, }: {
+    surface: NavSurface;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** `"docked"` outside an AppShell drawer — so a standalone `Sidebar` keeps its own `collapsed`. */
+export declare function useNavSurface(): NavSurface;

package/dist/components/layout/nav-surface.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const NavSurfaceContext = React.createContext("docked");
+function NavSurfaceProvider({
+  surface,
+  children
+}) {
+  return /* @__PURE__ */ jsx(NavSurfaceContext.Provider, { value: surface, children });
+}
+function useNavSurface() {
+  return React.useContext(NavSurfaceContext);
+}
+export {
+  NavSurfaceProvider,
+  useNavSurface
+};

package/dist/components/layout/org-switcher.d.ts

@@ -1,9 +1,13 @@
 import * as React from "react";
 import type { OrgSwitcherProp } from "../../props/components/layout.prop.js";
 export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProp as OrgSwitcherProps, } from "../../props/components/layout.prop.js";
+/** Arbitrary `data-*` hooks — the one escape hatch this closed component keeps open. */
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
 /**
  * Organization switcher with one stable shell contract: canonical trigger geometry, an optional
  * status badge, a searchable desktop popover, a focus-trapped bottom Sheet at/below the shared
  * `--sheet-responsive-breakpoint-width`, and explicit loading/empty/error states.
  */
-export declare function OrgSwitcher({ organizations, value, onValueChange, collapsed, disabled, loading, error, onRetry, labels, responsive, open, onOpenChange, className, }: OrgSwitcherProp): React.JSX.Element;
+export declare function OrgSwitcher({ organizations, value, onValueChange, collapsed, disabled, loading, error, onRetry, labels, responsive, open, onOpenChange, className, ...rest }: OrgSwitcherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

package/dist/components/layout/org-switcher.js

@@ -3,6 +3,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronsUpDown, Loader2, RotateCcw } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../feedback/dialog.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import {
   Command,
@@ -46,7 +54,7 @@ const OrgSwitcherTrigger = React.forwardRef(
         ref,
         type: "button",
         variant: "ghost",
-        className: "ui-org-switcher-trigger",
+        className: cn("ui-org-switcher-trigger", "h-[length:var(--org-switcher-trigger-height)]"),
         "data-collapsed": collapsed ? "true" : void 0,
         disabled,
         "aria-label": label,
@@ -147,7 +155,8 @@ function OrgSwitcher({
   responsive = "auto",
   open,
   onOpenChange,
-  className
+  className,
+  ...rest
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const controlled = open !== void 0;
@@ -162,7 +171,9 @@ function OrgSwitcher({
     [controlled, onOpenChange]
   );
   const compactViewport = useSheetResponsiveMode("auto") === "bottom";
-  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const responsivePair = responsive === "auto" || responsive === "dialog";
+  const sheet = responsive === "sheet" || responsivePair && compactViewport;
+  const dialog = responsive === "dialog" && !sheet;
   const current = organizations.find((organization) => organization.id === value);
   const fallbackName = current?.name ?? labels.title;
   const triggerLabel = labels.trigger(fallbackName);
@@ -173,7 +184,8 @@ function OrgSwitcher({
       organization: current,
       collapsed,
       disabled: triggerDisabled,
-      label: triggerLabel
+      label: triggerLabel,
+      ...rest
     }
   );
   const panel = /* @__PURE__ */ jsx(
@@ -208,6 +220,15 @@ function OrgSwitcher({
       )
     ] }) });
   }
+  if (dialog) {
+    return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Dialog, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "ui-org-switcher-dialog", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+        /* @__PURE__ */ jsx(DialogBody, { children: panel })
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "ui-org-switcher-popover", "aria-label": labels.title, children: panel })

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
+import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
 function scrollParent(el) {
   let node = el?.parentElement ?? null;
   while (node) {
@@ -40,6 +40,8 @@ function PageContainerRoot({
   extra,
   toolbar,
   footer,
+  toolbarPad,
+  footerPad,
   breadcrumb,
   breadcrumbLabel,
   breadcrumbAriaLabel,
@@ -146,9 +148,9 @@ function PageContainerRoot({
             ]
           }
         ),
-        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", children: toolbar }),
+        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", style: padStyle(toolbarPad, void 0), children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
-        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
+        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", style: padStyle(footerPad, void 0), children: footer })
       ]
     }
   );

package/dist/components/layout/responsive-grid.d.ts

@@ -1,12 +1,17 @@
 import type { ReactNode } from "react";
-import type { ResponsiveGridColumnsProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { ResponsiveGridColumnsProp, ResponsiveGridFlowProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { PadProp, PadRawProp } from "../../props/vocabulary/index.js";
 import type { GapProp } from "../../props/vocabulary/layout.prop.js";
 export type ResponsiveGridProps = {
+    pad?: PadProp;
+    padRaw?: PadRawProp;
     /** Gap between cells, the same steps as Flex. Default `md`. */
     gap?: GapProp;
     /** Optional structural class override. */
     className?: string;
     columns?: ResponsiveGridColumnsProp;
+    /** Keep collections in a horizontal sequence; pair with ScrollArea orientation="horizontal". */
+    flow?: ResponsiveGridFlowProp;
     /**
      * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
      * Wins over `columns` when both are set, so a caller migrating to a preset does not also need
@@ -15,4 +20,13 @@ export type ResponsiveGridProps = {
     preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, gap, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, flow, gap, pad, padRaw, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare namespace ResponsiveGrid {
+    export { ResponsiveGridItem as Item };
+}
+/** A grid item owns its responsive span; no extra implicit columns on a narrow container. */
+export declare function ResponsiveGridItem({ span, children, className, }: {
+    span?: ResponsiveGridColumnsProp;
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/layout/responsive-grid.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
   "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
@@ -29,14 +30,40 @@ function toStyle(resolved) {
 }
 function ResponsiveGrid({
   columns = 4,
+  flow = "rows",
   gap,
+  pad,
+  padRaw,
   preset,
   className,
   children
 }) {
   const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid", className), "data-gap": gap, style: toStyle(resolved), children }) });
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ui-responsive-grid", className),
+      "data-gap": gap,
+      "data-flow": flow === "columns" ? "columns" : void 0,
+      style: { ...toStyle(resolved), ...padStyle(pad, padRaw) },
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      children
+    }
+  ) });
 }
+function ResponsiveGridItem({
+  span = 1,
+  children,
+  className
+}) {
+  const steps = typeof span === "number" ? { base: 1, sm: span, md: span, lg: span } : resolveColumns(span);
+  const style = Object.fromEntries(
+    Object.entries(steps).map(([step, value]) => [`--responsive-grid-item-${step}`, value])
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid-item", className), style, children });
+}
+ResponsiveGrid.Item = ResponsiveGridItem;
 export {
-  ResponsiveGrid
+  ResponsiveGrid,
+  ResponsiveGridItem
 };

package/dist/components/layout/separator.js

@@ -1,4 +1,3 @@
-"use client";
 import { Separator } from "../ui/separator.js";
 export {
   Separator

package/dist/components/layout/sidebar.js

@@ -1,11 +1,12 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { ChevronDown } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { useNavSurface } from "./nav-surface.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 function SidebarHeader({ children, className, ...props }) {
@@ -301,6 +302,8 @@ function Sidebar({
 }) {
   const { t } = useTranslation();
   const resolvedSections = sections ?? [];
+  const surface = useNavSurface();
+  collapsed = surface === "drawer" ? false : collapsed;
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
     brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? (() => {
       const interactive = onProductClick != null;

package/dist/components/layout/split-pane.d.ts

@@ -15,5 +15,18 @@ export type SplitPaneProps = {
     asideWidth?: "sm" | "md" | "lg";
     /** Accessible complementary landmark name; required when multiple panes share a document. */
     asideLabel?: string;
+    /**
+     * Fill the remaining height of the parent instead of growing with the content.
+     *
+     * Default `false` keeps the pane content-height — the right answer for a pane that sits in a
+     * scrolling page. Set it for an app-shell surface whose columns own their own scrolling (a chat
+     * transcript with a pinned composer, a full-height table beside a detail rail): the pane and
+     * both columns get a DEFINITE height, so `overflow` inside a column scrolls that column rather
+     * than pushing the page taller.
+     *
+     * The parent still decides how much height there is to fill — `fill` claims 100% of it, it does
+     * not invent it. Inside a flex column give the wrapper `flex: 1; min-height: 0`.
+     */
+    fill?: boolean;
 };
-export declare function SplitPane({ children, aside, asideWidth, asideLabel }: SplitPaneProps): import("react").JSX.Element;
+export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, }: SplitPaneProps): import("react").JSX.Element;

package/dist/components/layout/split-pane.js

@@ -1,18 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-function SplitPane({ children, aside, asideWidth = "md", asideLabel }) {
+function SplitPane({
+  children,
+  aside,
+  asideWidth = "md",
+  asideLabel,
+  fill = false
+}) {
   const closed = aside === null || aside === void 0;
-  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "ui-split-pane",
-      "data-aside-width": asideWidth,
-      "data-aside": closed ? "closed" : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-        closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
-      ]
-    }
-  ) });
+  return (
+    // `data-fill` is published on BOTH wrappers, not just the grid: the scope element is the one
+    // the consumer's own box actually contains, so without it the height stops at the scope and
+    // the grid has nothing definite to fill. Two attributes here are what keeps the consumer from
+    // reaching past its own child with `[&>*>*]` to say the same thing.
+    /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", "data-fill": fill ? "true" : void 0, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "ui-split-pane",
+        "data-aside-width": asideWidth,
+        "data-aside": closed ? "closed" : void 0,
+        "data-fill": fill ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
+          closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
+        ]
+      }
+    ) })
+  );
 }
 export {
   SplitPane

package/dist/components/layout/topbar-item.d.ts

@@ -11,6 +11,9 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
  * file resolves, including nothing at all while the `--focus-outline` switch ships off.
  */
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    hideBelow?: import("../../props/index.js").BreakpointProp;
+    badge?: React.ReactNode;
+    badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
     asChild?: boolean;
     children?: React.ReactNode;
     className?: import("../../props/index.js").ClassNameProp;

package/dist/components/layout/topbar-item.js

@@ -1,18 +1,32 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, ...props }, ref) {
+const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, badge, badgeTone, children, ...props }, ref) {
   const Comp = asChild ? Slot : "button";
+  const showBadge = !asChild && badge !== void 0 && badge !== "";
+  const badgeNode = showBadge ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-badge",
+      className: "ui-topbar-item-badge",
+      "data-tone": badgeTone === "destructive" ? "destructive" : void 0,
+      children: badge
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "data-slot": "topbar-item",
+      "data-hide-below": hideBelow,
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        badgeNode
+      ] })
     }
   );
 });

package/dist/components/layout/topbar.d.ts

@@ -4,4 +4,4 @@ export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/componen
  * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
  * bar's flex layout; it does NOT bake any chrome.
  */
-export declare function Topbar({ start, center, end, className, children, ...props }: TopbarProp): import("react").JSX.Element;
+export declare function Topbar({ start, center, end, className, children, height, pad, style, ...props }: TopbarProp): import("react").JSX.Element;

package/dist/components/layout/topbar.js

@@ -1,11 +1,32 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
-function Topbar({ start, center, end, className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "topbar", className: cn("ui-topbar", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
-    center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
-    end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
-  ] }) });
+function Topbar({
+  start,
+  center,
+  end,
+  className,
+  children,
+  height,
+  pad,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-height": height,
+      style: { ...style, ...padStyle(pad, void 0) },
+      "data-slot": "topbar",
+      className: cn("ui-topbar", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
+        center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
+        end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
+      ] })
+    }
+  );
 }
 export {
   Topbar