@godxjp/ui 19.5.0 → 20.0.0

package/dist/components/general/logo.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 const X_HEIGHT_TOP = /^[acegmnopqrsuvwxyz]+$/;
 const LATIN_DESCENDER = /[gjpqy]/;
@@ -83,42 +84,47 @@ const Logo = React.forwardRef(
     tone = "primary",
     wordmark,
     label,
+    asChild,
+    children,
     className,
     ...props
   }, ref) => {
     const hasWordmark = wordmark !== void 0 && wordmark !== null && wordmark !== false;
     const identity = { "data-mark": mark, "data-size": size, "data-tone": tone };
+    const renderRoot = (rootProps, content) => {
+      if (!asChild) {
+        return /* @__PURE__ */ jsx("span", { ref, ...rootProps, children: content });
+      }
+      const borrowed = React.Children.only(children);
+      return /* @__PURE__ */ jsx(Slot, { ...rootProps, ref, children: React.cloneElement(borrowed, void 0, content) });
+    };
     if (hasWordmark) {
-      return /* @__PURE__ */ jsxs(
-        "span",
+      return renderRoot(
         {
-          ref,
           "data-slot": "logo-lockup",
           ...identity,
           className: cn("ui-logo-lockup", className),
           role: label ? "img" : void 0,
           "aria-label": label,
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
-            /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
-          ]
-        }
+          ...props
+        },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
+          /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
+        ] })
       );
     }
-    return /* @__PURE__ */ jsx(
-      "span",
+    return renderRoot(
       {
-        ref,
         "data-slot": "logo",
         ...identity,
         className: cn("ui-logo", className),
         role: label ? "img" : void 0,
         "aria-label": label,
         "aria-hidden": label ? void 0 : true,
-        ...props,
-        children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph })
-      }
+        ...props
+      },
+      /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph })
     );
   }
 );

package/dist/components/general/typography.d.ts

@@ -5,7 +5,9 @@ export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as Headi
  * font-medium text-muted-foreground">`.
  */
 export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
-    as?: "span" | "p" | "div" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
+    as?: "span" | "p" | "div" | "a" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
+    asChild?: import("../../props/index.js").AsChildProp;
+    link?: boolean;
     size?: import("../../props/index.js").TextSizeProp;
     tone?: import("../../props/index.js").TextToneProp;
     weight?: import("../../props/index.js").FontWeightProp;
@@ -15,6 +17,10 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     tabular?: boolean;
     mono?: boolean;
     htmlFor?: string;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    download?: React.AnchorHTMLAttributes<HTMLAnchorElement>["download"];
 } & React.RefAttributes<HTMLElement>>;
 /**
  * Heading — h1..h4 sized from the `--heading-h*` tokens. `level` sets both the size token and the

package/dist/components/general/typography.js

@@ -3,16 +3,21 @@ import { cn } from "../../lib/utils.js";
 const Text = React.forwardRef(
   ({
     as = "span",
+    asChild = false,
     size = "sm",
-    tone = "default",
+    // `link` is an affordance, not a colour: it only moves the DEFAULT tone, so
+    // `link tone="destructive"` is a destructive link rather than an argument between two rules.
+    tone,
     weight = "regular",
     align,
     truncate,
     clamp,
     tabular,
     mono,
+    link,
     className,
     style,
+    children,
     ...props
   }, ref) => {
     const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
@@ -28,11 +33,11 @@ const Text = React.forwardRef(
         );
       }
     }
-    return React.createElement(as, {
-      ref,
+    const typography = {
       "data-slot": "text",
       "data-size": size,
-      "data-tone": tone,
+      "data-tone": tone ?? (link ? "primary" : "default"),
+      "data-link": link ? "" : void 0,
       "data-weight": weight,
       "data-align": align,
       "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
@@ -42,7 +47,17 @@ const Text = React.forwardRef(
       "data-mono": mono ? "" : void 0,
       className: cn("ui-text", className),
       ...props
-    });
+    };
+    if (asChild) {
+      const child = React.Children.only(children);
+      return React.cloneElement(child, {
+        ...typography,
+        ...child.props,
+        ref,
+        className: cn(typography.className, child.props.className)
+      });
+    }
+    return React.createElement(as, { ref, ...typography }, children);
   }
 );
 Text.displayName = "Text";

package/dist/components/layout/app-shell.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Menu } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
+import { NavSurfaceProvider } from "./nav-surface.js";
 function AppShell({
   sidebar,
   topbar,
@@ -17,14 +18,20 @@ function AppShell({
   sidebarCollapsed = false,
   responsiveNavigation = "drawer",
   topbarSpan = "content",
+  navRail,
+  navRailLabel,
   mobileNav,
   mobileNavLabel,
   mobileNavOpen,
   onMobileNavOpenChange
 }) {
   const { t } = useTranslation();
-  const drawerNav = mobileNav !== void 0 ? mobileNav : sidebar;
+  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    navRail,
+    sidebar
+  ] }) : sidebar;
   const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null;
+  const railInDrawer = mobileNav === void 0 && navRail !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
   const setDrawerOpen = onMobileNavOpenChange ?? setUncontrolledOpen;
@@ -36,13 +43,39 @@ function AppShell({
     }
   };
   const hasTopbarContent = topbar !== void 0 || topbarLeft !== void 0 || topbarRight !== void 0 || logo !== void 0;
-  const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
-    logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+  if (process.env.NODE_ENV !== "production" && topbar !== void 0) {
+    const ignored = [
+      topbarLeft !== void 0 && "topbarLeft",
+      topbarRight !== void 0 && "topbarRight"
+    ].filter(Boolean);
+    if (ignored.length > 0) {
+      console.warn(
+        `AppShell: \`topbar\` \u0111\u01B0\u1EE3c truy\u1EC1n, n\xEAn ${ignored.join(", ")} b\u1ECB b\u1ECF qua v\xE0 KH\xD4NG \u0111\u01B0\u1EE3c v\u1EBD. Ho\u1EB7c b\u1ECF \`topbar\` \u0111\u1EC3 AppShell t\u1EF1 d\u1EF1ng d\u1EA3i t\u1EEB c\xE1c khe kia, ho\u1EB7c \u0111\u1EB7t n\u1ED9i dung \u0111\xF3 v\xE0o trong ch\xEDnh \`topbar\`. (\`logo\` KH\xD4NG n\u1EB1m trong s\u1ED1 n\xE0y \u2014 n\xF3 lu\xF4n \u0111\u01B0\u1EE3c v\u1EBD.)`
+      );
+    }
+  }
+  const logoInRail = logo !== void 0 && topbarSpan !== "full";
+  const resolvedTopbar = topbar !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
+    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+    /* @__PURE__ */ jsx("div", { className: "app-topbar-custom", children: topbar })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
+    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
-  const rail = /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar });
+  const rail = /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
+    logoInRail && /* @__PURE__ */ jsx("div", { className: "app-sidebar-logo", children: logo }),
+    sidebar
+  ] });
+  const navRailRegion = navRail === void 0 ? null : /* @__PURE__ */ jsx(
+    "aside",
+    {
+      className: "app-nav-rail",
+      "aria-label": navRailLabel ?? t("layout.appShell.navRailLabel"),
+      children: navRail
+    }
+  );
   const bar = !hasTopbarContent && !hasDrawer ? null : /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
     hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -71,7 +104,10 @@ function AppShell({
               {
                 className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
                 onClick: handleDrawerClick,
-                children: drawerNav
+                children: railInDrawer ? /* @__PURE__ */ jsxs("div", { className: "app-mobile-nav-columns", children: [
+                  /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-rail", children: navRail }),
+                  /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-sections", children: sidebar }) })
+                ] }) : /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: drawerNav })
               }
             )
           ]
@@ -88,9 +124,17 @@ function AppShell({
       "data-responsive-navigation": responsiveNavigation,
       "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
+      "data-nav-rail": navRail !== void 0 ? "" : void 0,
       children: [
-        topbarSpan === "full" ? bar : rail,
-        topbarSpan === "full" ? rail : bar,
+        topbarSpan === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          bar,
+          navRailRegion,
+          rail
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          navRailRegion,
+          rail,
+          bar
+        ] }),
         /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), tabIndex: 0, children: [
           breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
           children

package/dist/components/layout/aspect-ratio.js

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

package/dist/components/layout/auth-divider.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { Separator } from "../ui/separator.js";

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, 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,24 @@
 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 } from "../../lib/variants.js";
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Flex({
   as: Element = "div",
   direction = "row",
   gap = "md",
+  gapRaw,
+  pad,
+  padRaw,
   align,
   justify,
   wrap = false,
   hideBelow,
   hideFrom,
+  fill = false,
+  width,
   className,
+  style,
   children,
   ...props
 }) {
@@ -39,7 +46,17 @@ function Flex({
       "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,
+        ...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/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

@@ -46,7 +46,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 +147,8 @@ function OrgSwitcher({
   responsive = "auto",
   open,
   onOpenChange,
-  className
+  className,
+  ...rest
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const controlled = open !== void 0;
@@ -173,7 +174,8 @@ function OrgSwitcher({
       organization: current,
       collapsed,
       disabled: triggerDisabled,
-      label: triggerLabel
+      label: triggerLabel,
+      ...rest
     }
   );
   const panel = /* @__PURE__ */ jsx(

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.js

@@ -1,7 +1,6 @@
-"use client";
 import { jsx } 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 Comp = asChild ? Slot : "button";

package/dist/components/navigation/app-setting-picker.js

@@ -110,7 +110,8 @@ const AppSettingPicker = React.forwardRef(
     }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
     const unbound = current === void 0 || !handleChange;
     const Icon = ICON[kind];
-    const iconOnly = resolvedAppearance === "icon";
+    const bar = resolvedAppearance === "bar";
+    const iconOnly = bar || resolvedAppearance === "icon";
     const inline = resolvedAppearance === "inline";
     const isCompact = compact && !inline;
     return /* @__PURE__ */ jsxs(
@@ -164,7 +165,24 @@ const AppSettingPicker = React.forwardRef(
                   // thua lớp utilities mà SelectTrigger phát ra.
                   cn(
                     "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground",
-                    "w-[length:var(--control-height)] shrink-0 justify-center"
+                    "w-[length:var(--control-height)] shrink-0 justify-center",
+                    // `bar` — a CELL of the bar, not a control in it. Both overrides are UTILITIES
+                    // for the reason the block above already records twice: SelectTrigger emits
+                    // `rounded-[var(--control-radius)]` from controlTriggerClass and takes its
+                    // height from `.ui-control`, and a rule in @layer components loses to both.
+                    //
+                    // HEIGHT IS `self-stretch` + `h-auto`, NOT A LENGTH. The bar's height comes
+                    // from a grid row in AppShell, from --topbar-height standalone, or from the
+                    // coarse-pointer override on touch — a cell that named any one of those would
+                    // be wrong in the other two. `h-auto` is what releases `.ui-control`'s height
+                    // so the stretch can take effect; without it the box stays 32px in a 48px bar
+                    // and the hover paints a pill, which is the whole defect this value fixes.
+                    // `min-h` keeps the touch target when the bar is SHORTER than --control-height.
+                    // The radius reads --topbar-item-radius, the SAME knob `TopbarItem` uses, so a
+                    // service that wants softer bar cells retunes one token and both follow. A
+                    // `rounded-none` literal here would put the shape out of a theme's reach
+                    // (rules #44/#45) and let the two bar cells drift apart.
+                    bar && "h-auto min-h-[length:var(--control-height)] self-stretch rounded-[var(--topbar-item-radius)]"
                   )
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
@@ -180,6 +198,7 @@ const AppSettingPicker = React.forwardRef(
                 className
               ),
               "data-kind": kind,
+              "data-appearance": resolvedAppearance,
               "aria-label": t(ARIA_KEY[kind]),
               children: [
                 inline ? null : /* @__PURE__ */ jsx(

package/dist/components/navigation/app-setting-toggle.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { AppSettingToggleProp } from "../../props/components/app.prop.js";
+export type { AppSettingToggleKind, AppSettingToggleProp, AppSettingToggleProp as AppSettingToggleProps, } from "../../props/components/app.prop.js";
+/**
+ * AppSettingToggle — ONE button that steps a single AppProvider setting to its next value.
+ *
+ * The no-menu counterpart to {@link AppSettingPicker}: same binding contract, same option order,
+ * one tap instead of open-then-choose. Reach for it when the value set is closed and short (theme,
+ * density, font size, clock format) and the control lives in a top bar, where a dropdown for three
+ * values is a menu nobody wanted to open.
+ *
+ * The accessible name carries BOTH the setting and its current value ("Theme: Dark"), because the
+ * glyph is the only visible state and a screen-reader user would otherwise be told only which
+ * setting they are standing on, never where it currently is.
+ */
+export declare const AppSettingToggle: React.ForwardRefExoticComponent<AppSettingToggleProp & React.RefAttributes<HTMLButtonElement>>;