@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/general/index.js

@@ -3,6 +3,7 @@ import { Text, Heading } from "./typography.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
 import { Activity } from "./activity.js";
+import { VisuallyHidden } from "./visually-hidden.js";
 export {
   Activity,
   Button,
@@ -10,5 +11,6 @@ export {
   Logo,
   Reveal,
   Text,
+  VisuallyHidden,
   buttonVariants
 };

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

@@ -45,6 +45,23 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * readable wordmark sits beside it.
      */
     label?: string;
+    /**
+     * Mượn thẻ của con làm GỐC của logo thay vì dựng `<span>` — cách để cả cái logo trở thành một
+     * LIÊN KẾT (`<a>`, hay `<Link>` của router).
+     *
+     * Vì sao cần một prop chứ không phải bọc ngoài: `.ui-logo-lockup` là `display: inline-flex`, nên
+     * bọc nó trong một `<a>` thường (`display: inline`) đặt lockup lên một line box và phần descender
+     * của strut đội thêm vài px vào ô mark — logo bị nhích lên trong thanh trên. Consumer chỉ còn
+     * cách viết `className="flex"` lên thẻ `<a>`, thứ `ui-audit` chặn đúng theo luật
+     * `no-utility-layout` (đo ở godx-chat, 08/09/2026). Với `asChild`, chính thẻ của consumer MANG
+     * `.ui-logo-lockup`, nên không còn phần tử trung gian nào để canh.
+     *
+     * Đúng MỘT con, và ruột của nó bị bỏ qua: nội dung của logo vẫn do `glyph`/`mark`/`wordmark`
+     * quyết định.
+     */
+    asChild?: boolean;
+    /** Chỉ dùng cùng `asChild`: đúng một phần tử để đi mượn. */
+    children?: React.ReactNode;
 }
 /**
  * The band the glyph's ink actually occupies, as the (top edge, bottom edge) of the UNION of every

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

@@ -14,7 +14,10 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
     clamp?: number;
+    whitespace?: import("../../props/index.js").TextWhitespaceProp;
     tabular?: boolean;
+    decoration?: "none" | "underline" | "line-through";
+    chip?: boolean;
     mono?: boolean;
     htmlFor?: string;
     href?: string;

package/dist/components/general/typography.js

@@ -12,7 +12,10 @@ const Text = React.forwardRef(
     align,
     truncate,
     clamp,
+    whitespace,
     tabular,
+    decoration,
+    chip,
     mono,
     link,
     className,
@@ -21,6 +24,7 @@ const Text = React.forwardRef(
     ...props
   }, ref) => {
     const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
+    const truncating = truncate === true && clampLines === void 0;
     if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
       if (clamp !== void 0 && clampLines === void 0) {
         console.warn(
@@ -32,6 +36,11 @@ const Text = React.forwardRef(
           "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
         );
       }
+      if (whitespace === "pre-wrap" && truncating) {
+        console.warn(
+          'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
+        );
+      }
     }
     const typography = {
       "data-slot": "text",
@@ -40,10 +49,15 @@ const Text = React.forwardRef(
       "data-link": link ? "" : void 0,
       "data-weight": weight,
       "data-align": align,
-      "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
+      "data-truncate": truncating ? "" : void 0,
       "data-clamp": clampLines !== void 0 ? "" : void 0,
+      // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
+      // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
+      "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
       style: clampLines !== void 0 ? { ...style, "--text-clamp": clampLines } : style,
       "data-tabular": tabular ? "" : void 0,
+      "data-decoration": decoration,
+      "data-chip": chip ? "" : void 0,
       "data-mono": mono ? "" : void 0,
       className: cn("ui-text", className),
       ...props

package/dist/components/general/visually-hidden.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+/** Accessible text without a visible layout box. */
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/visually-hidden.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const VisuallyHidden = React.forwardRef(function VisuallyHidden2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("span", { ...props, ref, className: cn("sr-only", className) });
+});
+export {
+  VisuallyHidden
+};

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { AppLauncherProp } from "../../props/components/layout.prop.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProp as AppLauncherProps, } 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;
+};
+/**
+ * AppLauncher — the nine-dot app grid in the topbar: the platform's standard way to change app.
+ *
+ * THE TRIGGER IS A `TopbarItem`, NOT A `Button`. A bar cell is as tall as the bar, its hover IS the
+ * bar's surface, and its focus mark is hosted inside it; a `Button variant="ghost"` in the same slot
+ * draws a `--control-height` pill floating in a taller strip, with its own hover fill and its own
+ * ring drawn around that pill. That was the 20.0.0 correction, and it is why nothing here emits a
+ * height: the cell stretches to whatever the bar's height happens to be (`--app-shell-bar-height`,
+ * `--topbar-height`, or the coarse-pointer override), so it names none of them.
+ *
+ * The panel is the SAME responsive contract as `OrgSwitcher`: a desktop popover above
+ * `--sheet-responsive-breakpoint-width` and a focus-trapped bottom Sheet at/below it, through the
+ * shared `useSheetResponsiveMode()` hook rather than a component-local media query.
+ *
+ * ## Related — two components this is repeatedly confused with
+ *
+ * - `ServiceLauncherCard` (data-display) is a launcher tile too, but a PAGE-SIZED one: status,
+ *   hostname, plan, an action button, a reason it is locked. It belongs on a service-catalogue page,
+ *   where choosing is a considered act. The tile here is bar-sized — mark plus name, the whole tile
+ *   one link — because changing app is a reflex. Neither is built out of the other, and a grid of
+ *   `ServiceLauncherCard`s inside a popover is the wrong component, not a smaller version of this.
+ * - `AppShellProp.navRail` says the SAME platform scope as a docked column. Pick ONE: the launcher
+ *   for a platform with MANY apps where switching is occasional (Google Workspace), the rail for a
+ *   single product where switching workspace is constant enough to be worth permanent screen width
+ *   (Slack). Shipping both puts one scope in two places and makes neither authoritative.
+ */
+export declare function AppLauncher({ apps, groups, labels, columns, linkComponent, loading, error, onRetry, responsive, open, onOpenChange, className, ...rest }: AppLauncherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

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

@@ -0,0 +1,228 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Grip, Loader2, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+  useSheetResponsiveMode
+} from "../feedback/sheet.js";
+import { Button } from "../general/button.js";
+import { TopbarItem } from "./topbar-item.js";
+function AppMark({ app }) {
+  return /* @__PURE__ */ jsx("span", { className: "ui-app-launcher-mark", "aria-hidden": "true", children: app.icon ?? app.name.trim().charAt(0).toUpperCase() });
+}
+function AppLauncherTile({
+  app,
+  linkComponent: Link,
+  externalHint,
+  close
+}) {
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AppMark, { app }),
+    /* @__PURE__ */ jsx("span", { className: "ui-app-launcher-name", children: app.name }),
+    app.external && externalHint != null ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: externalHint }) : null
+  ] });
+  const linkProps = {
+    href: app.href,
+    className: "ui-app-launcher-tile ui-focus-ring",
+    "data-active": app.current ? "true" : void 0,
+    "aria-current": app.current ? "page" : void 0,
+    onClick: close,
+    children
+  };
+  return /* @__PURE__ */ jsx("li", { className: "ui-app-launcher-cell", "data-app": app.id, children: app.external || Link == null ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...linkProps,
+      target: app.external ? "_blank" : void 0,
+      rel: app.external ? "noreferrer noopener" : void 0
+    }
+  ) : /* @__PURE__ */ jsx(Link, { ...linkProps }) });
+}
+function AppLauncherGrid({
+  apps,
+  linkComponent,
+  externalHint,
+  close,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: "ui-app-launcher-grid", ...props, children: apps.map((app) => /* @__PURE__ */ jsx(
+    AppLauncherTile,
+    {
+      app,
+      linkComponent,
+      externalHint,
+      close
+    },
+    app.id
+  )) });
+}
+function AppLauncherSection({
+  label,
+  apps,
+  linkComponent,
+  externalHint,
+  close
+}) {
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": labelId, className: "ui-app-launcher-group", children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-app-launcher-group-label", children: label }),
+    /* @__PURE__ */ jsx(
+      AppLauncherGrid,
+      {
+        apps,
+        linkComponent,
+        externalHint,
+        close
+      }
+    )
+  ] });
+}
+function AppLauncherPanel({
+  apps,
+  groups,
+  labels,
+  columns,
+  linkComponent,
+  loading,
+  error,
+  onRetry,
+  close
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-app-launcher-state", role: "status", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ui-app-launcher-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: labels.loading })
+    ] });
+  }
+  if (error != null) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-app-launcher-state", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry != null ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }),
+        labels.retry
+      ] }) : null
+    ] });
+  }
+  if (!apps.length && (groups ?? []).every((group) => !group.apps.length)) {
+    return /* @__PURE__ */ jsx("div", { className: "ui-app-launcher-state", role: "status", children: /* @__PURE__ */ jsx("span", { children: labels.empty }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-app-launcher-panel",
+      style: columns == null ? void 0 : { "--app-launcher-columns": String(columns) },
+      children: [
+        apps.length ? /* @__PURE__ */ jsx(
+          AppLauncherGrid,
+          {
+            apps,
+            linkComponent,
+            externalHint: labels.externalHint,
+            close,
+            "aria-label": labels.title
+          }
+        ) : null,
+        groups?.map((group) => /* @__PURE__ */ jsx(
+          AppLauncherSection,
+          {
+            label: group.label,
+            apps: group.apps,
+            linkComponent,
+            externalHint: labels.externalHint,
+            close
+          },
+          group.label
+        ))
+      ]
+    }
+  );
+}
+function AppLauncher({
+  apps,
+  groups,
+  labels,
+  columns,
+  linkComponent,
+  loading = false,
+  error,
+  onRetry,
+  responsive = "auto",
+  open,
+  onOpenChange,
+  className,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const controlled = open !== void 0;
+  const resolvedOpen = controlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (!controlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [controlled, onOpenChange]
+  );
+  const compactViewport = useSheetResponsiveMode("auto") === "bottom";
+  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const close = React.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const trigger = /* @__PURE__ */ jsx(
+    TopbarItem,
+    {
+      className: cn("ui-app-launcher-trigger", className),
+      "aria-label": labels.trigger,
+      ...rest,
+      children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" })
+    }
+  );
+  const panel = /* @__PURE__ */ jsx(
+    AppLauncherPanel,
+    {
+      apps,
+      groups,
+      labels,
+      columns,
+      linkComponent,
+      loading,
+      error,
+      onRetry,
+      close
+    }
+  );
+  if (sheet) {
+    return /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          responsive: "bottom",
+          className: "ui-app-launcher-sheet",
+          style: {
+            "--sheet-bottom-max-height": "var(--app-launcher-sheet-max-height)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { title: labels.title }),
+            /* @__PURE__ */ jsx(SheetBody, { children: panel })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "ui-app-launcher-popover", "aria-label": labels.title, children: panel })
+  ] });
+}
+export {
+  AppLauncher
+};

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

@@ -1,4 +1,6 @@
 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;
+/** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
+export declare function useAppShellNavigationMode(): "drawer" | "docked";
+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,15 @@
 "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 { useMediaQuery } from "../../lib/hooks.js";
 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 useAppShellNavigationMode() {
+  return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
+}
 function AppShell({
   sidebar,
   topbar,
@@ -17,32 +22,70 @@ 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 hasDrawer = responsiveNavigation === "drawer" && drawerNav != null;
+  const navigationMode = useAppShellNavigationMode();
+  const hasSidebar = sidebar !== void 0 && sidebar !== null && sidebar !== false;
+  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    navRail,
+    sidebar
+  ] }) : sidebar;
+  const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null && drawerNav !== false;
+  const railInDrawer = mobileNav === void 0 && navRail !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
   const setDrawerOpen = onMobileNavOpenChange ?? setUncontrolledOpen;
   const handleDrawerClick = (event) => {
     const target = event.target;
     const hit = target.closest("a[href], button, [role='menuitem']");
-    if (hit && !hit.classList.contains("sb-nav-group-trigger")) {
+    if (!hit) {
+      return;
+    }
+    const opensSomething = hit.hasAttribute("aria-expanded") || hit.hasAttribute("aria-haspopup") || hit.classList.contains("sb-nav-group-trigger");
+    if (!opensSomething) {
       setDrawerOpen(false);
     }
   };
   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 = hasSidebar && 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 = hasSidebar ? /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
+    logoInRail && /* @__PURE__ */ jsx("div", { className: "app-sidebar-logo", children: logo }),
+    sidebar
+  ] }) : null;
+  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 +114,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 })
               }
             )
           ]
@@ -84,13 +130,23 @@ function AppShell({
     "div",
     {
       className: "app-root",
-      "data-collapsed": sidebarCollapsed ? "true" : void 0,
+      "data-collapsed": hasSidebar && sidebarCollapsed ? "true" : void 0,
+      "data-sidebar": hasSidebar ? void 0 : "none",
       "data-responsive-navigation": responsiveNavigation,
+      "data-navigation": navigationMode,
       "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
@@ -101,5 +157,6 @@ function AppShell({
   );
 }
 export {
-  AppShell
+  AppShell,
+  useAppShellNavigationMode
 };

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/breadcrumb.d.ts

@@ -1,9 +1,21 @@
 import type { ElementType } from "react";
-import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
+import type { BreadcrumbItemRenderProp, BreadcrumbProp, BreadcrumbSeparatorProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
     linkComponent?: ElementType;
     /** Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb". */
     ariaLabel?: string;
+    /**
+     * Ant Design `separator`. Defaults to the chevron glyph. A string (`"/"`) or any node replaces
+     * it; `""` removes it. It is always `aria-hidden` — the trail's structure is carried by the
+     * `<ol>`/`<li>`, never by the glyph, so a screen reader never hears "slash" between segments.
+     */
+    separator?: BreadcrumbSeparatorProp;
+    /**
+     * Ant Design `itemRender`. Replaces the anchor/text of ONE segment while this component keeps
+     * owning the `<nav>`, the `<ol>`/`<li>`, the separators and `aria-current` — the parts that make
+     * the trail a landmark. Use it to hand the trail a router `<Link>` (Inertia, react-router).
+     */
+    itemRender?: BreadcrumbItemRenderProp;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, separator, itemRender, }: BreadcrumbProps): import("react").JSX.Element;