@godxjp/ui 18.4.0 → 18.6.0

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SearchX, ServerCrash, ShieldAlert, Wrench } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { Progress } from "../data-display/progress.js";
+import { Text } from "../general/typography.js";
+import { CenteredShell } from "./centered-shell.js";
+const STATUS_META = {
+  403: { icon: ShieldAlert, tone: "warning" },
+  404: { icon: SearchX, tone: "muted" },
+  500: { icon: ServerCrash, tone: "destructive" },
+  503: { icon: Wrench, tone: "warning" }
+};
+function singleAction(action) {
+  const flattened = React.Children.toArray(action).flatMap(
+    (child) => React.isValidElement(child) && child.type === React.Fragment ? React.Children.toArray(child.props.children) : [child]
+  );
+  if (flattened.length > 1 && process.env.NODE_ENV !== "production") {
+    console.error(
+      "[@godxjp/ui] ErrorSurface: `action` takes EXACTLY ONE recovery action. The extra elements were dropped. Put support contact or secondary guidance in `description`."
+    );
+  }
+  return flattened[0] ?? null;
+}
+function formatMaintenanceWindow(maintenance, locale) {
+  const options = {
+    dateStyle: "medium",
+    timeStyle: "short",
+    ...maintenance.timeZone ? { timeZone: maintenance.timeZone } : {}
+  };
+  const start = new Date(maintenance.start);
+  if (Number.isNaN(start.getTime())) return maintenance.start;
+  const formatter = new Intl.DateTimeFormat(locale, options);
+  if (maintenance.end === void 0) return formatter.format(start);
+  const end = new Date(maintenance.end);
+  if (Number.isNaN(end.getTime())) return formatter.format(start);
+  return formatter.formatRange(start, end);
+}
+const ErrorSurface = React.forwardRef(
+  function ErrorSurface2({
+    mode,
+    status,
+    title,
+    description,
+    action,
+    icon,
+    tone,
+    titleLevel,
+    requestId,
+    permission,
+    organization,
+    maintenance,
+    brand,
+    footer,
+    width = "sm",
+    id,
+    className
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const meta = STATUS_META[status];
+    const resolvedIcon = icon ?? meta.icon;
+    const resolvedTone = tone ?? meta.tone;
+    const resolvedTitleLevel = titleLevel ?? (mode === "system" ? 1 : 2);
+    const maintenanceWindow = maintenance === void 0 ? void 0 : formatMaintenanceWindow(maintenance, locale);
+    const maintenanceProgress = maintenance?.progress;
+    const hasProgress = typeof maintenanceProgress === "number" && Number.isFinite(maintenanceProgress);
+    const progressLabel = hasProgress ? t("layout.errorSurface.maintenanceProgress", {
+      percent: new Intl.NumberFormat(locale, {
+        style: "percent",
+        maximumFractionDigits: 0
+      }).format(Math.max(0, Math.min(100, maintenanceProgress)) / 100)
+    }) : void 0;
+    const hasMetadata = requestId !== void 0 || permission !== void 0 || organization !== void 0 || maintenanceWindow !== void 0;
+    const surface = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "error-surface",
+        "data-mode": mode,
+        "data-status": status,
+        className: cn("ui-error-surface", className),
+        children: [
+          brand !== void 0 && mode === "system" && /* @__PURE__ */ jsx("div", { className: "ui-error-surface-brand", children: brand }),
+          /* @__PURE__ */ jsxs(
+            Text,
+            {
+              as: "p",
+              size: "sm",
+              tone: "muted",
+              weight: "medium",
+              mono: true,
+              tabular: true,
+              className: "ui-error-surface-status",
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: status }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.errorSurface.statusLabel", { status: String(status) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              icon: resolvedIcon,
+              tone: resolvedTone,
+              titleLevel: resolvedTitleLevel,
+              title,
+              description,
+              action: singleAction(action),
+              className: "ui-error-surface-body"
+            }
+          ),
+          hasMetadata && /* A description list, not a sentence: each metadata row keeps a machine-readable
+           * label↔value pair, so "Request ID / 01J9Z…" is navigable instead of being one run-on
+           * paragraph. `<div>` wrappers around dt/dd are valid HTML5 and give each row its box. */
+          /* @__PURE__ */ jsxs("dl", { className: "ui-error-surface-meta", children: [
+            requestId !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.requestId") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", mono: true, tabular: true, children: requestId })
+            ] }),
+            permission !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.permission") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", mono: true, children: permission })
+            ] }),
+            organization !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.organization") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", children: organization })
+            ] }),
+            maintenanceWindow !== void 0 && maintenance !== void 0 && /* @__PURE__ */ jsxs("div", { className: "ui-error-surface-meta-row", children: [
+              /* @__PURE__ */ jsx(Text, { as: "dt", size: "xs", tone: "muted", children: t("layout.errorSurface.maintenanceWindow") }),
+              /* @__PURE__ */ jsx(Text, { as: "dd", size: "xs", tone: "muted", children: /* @__PURE__ */ jsx("time", { dateTime: maintenance.start, children: maintenanceWindow }) })
+            ] })
+          ] }),
+          hasProgress && progressLabel !== void 0 && /* @__PURE__ */ jsx("div", { className: "ui-error-surface-progress", children: /* @__PURE__ */ jsx(
+            Progress,
+            {
+              value: Math.max(0, Math.min(100, maintenanceProgress)),
+              label: progressLabel,
+              tone: "warning"
+            }
+          ) })
+        ]
+      }
+    );
+    if (mode === "application") return surface;
+    return /* @__PURE__ */ jsx(CenteredShell, { align: "center", width, ...footer !== void 0 ? { footer } : {}, children: surface });
+  }
+);
+ErrorSurface.displayName = "ErrorSurface";
+export {
+  ErrorSurface
+};

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({ direction, gap, align, justify, wrap, className, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ direction, gap, align, justify, wrap, hideBelow, hideFrom, className, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -7,6 +7,8 @@ function Flex({
   align,
   justify,
   wrap = false,
+  hideBelow,
+  hideFrom,
   className,
   children,
   ...props
@@ -18,6 +20,8 @@ function Flex({
       "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),
       ...props,
       children

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

@@ -5,20 +5,40 @@ export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexP
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
+export { OrgSwitcher } from "./org-switcher.js";
+export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProps, } from "./org-switcher.js";
 export { AuthShell } from "./auth-shell.js";
 export type { AuthShellProp, AuthShellProps } from "./auth-shell.js";
+export type { AuthShellPresetProp } from "../../props/vocabulary/index.js";
+export { AuthDivider } from "./auth-divider.js";
+export type { AuthDividerProp, AuthDividerProps } from "./auth-divider.js";
+export { AuthIdentity } from "./auth-identity.js";
+export type { AuthIdentityProp, AuthIdentityProps } from "./auth-identity.js";
+export { AuthAccountSummary } from "./auth-account-summary.js";
+export type { AuthAccountSummaryProp, AuthAccountSummaryProps } from "./auth-account-summary.js";
+export { AuthFooter } from "./auth-footer.js";
+export type { AuthFooterProp, AuthFooterProps } from "./auth-footer.js";
+export { AuthStack } from "./auth-stack.js";
+export type { AuthStackProps } from "./auth-stack.js";
 export { CenteredShell } from "./centered-shell.js";
 export type { CenteredShellProp, CenteredShellProps } from "./centered-shell.js";
-export type { CenteredShellWidthProp } from "../../props/vocabulary/index.js";
+export type { CenteredShellWidthProp, CenteredShellAlignProp } from "../../props/vocabulary/index.js";
+export { ErrorSurface } from "./error-surface.js";
+export type { ErrorSurfaceMaintenanceProp, ErrorSurfaceProp, ErrorSurfaceProps, } from "./error-surface.js";
+export type { ErrorSurfaceModeProp, ErrorSurfaceStatusProp } from "../../props/vocabulary/index.js";
 export { Breadcrumb } from "./breadcrumb.js";
 export type { BreadcrumbProps } from "./breadcrumb.js";
-export { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
-export type { SidebarItemData, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarSectionProp, } from "../../props/components/layout.prop.js";
+export { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
+export type { SidebarItemData, SidebarLinkComponentProp, SidebarLinkProp, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarRenderItemProp, SidebarSectionProp, } from "../../props/components/layout.prop.js";
 export { Topbar } from "./topbar.js";
 export type { TopbarProp, TopbarProps } from "./topbar.js";
 export { ResponsiveGrid } from "./responsive-grid.js";
 export type { ResponsiveGridProps } from "./responsive-grid.js";
+export { MasterDetail } from "./master-detail.js";
+export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
 export { Separator } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
+export { LegalDocumentShell } from "./legal-document-shell.js";
+export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";

package/dist/components/layout/index.js

@@ -2,22 +2,40 @@ import { PageContainer } from "./page-container.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
+import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
+import { AuthDivider } from "./auth-divider.js";
+import { AuthIdentity } from "./auth-identity.js";
+import { AuthAccountSummary } from "./auth-account-summary.js";
+import { AuthFooter } from "./auth-footer.js";
+import { AuthStack } from "./auth-stack.js";
 import { CenteredShell } from "./centered-shell.js";
+import { ErrorSurface } from "./error-surface.js";
 import { Breadcrumb } from "./breadcrumb.js";
-import { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
+import { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
 import { ResponsiveGrid } from "./responsive-grid.js";
+import { MasterDetail } from "./master-detail.js";
 import { SplitPane } from "./split-pane.js";
 import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
+import { LegalDocumentShell } from "./legal-document-shell.js";
 export {
   AppShell,
   AspectRatio,
+  AuthAccountSummary,
+  AuthDivider,
+  AuthFooter,
+  AuthIdentity,
   AuthShell,
+  AuthStack,
   Breadcrumb,
   CenteredShell,
+  ErrorSurface,
   Flex,
+  LegalDocumentShell,
+  MasterDetail,
+  OrgSwitcher,
   PageContainer,
   ResizableHandle,
   ResizablePanel,
@@ -29,5 +47,6 @@ export {
   SidebarItem,
   SidebarSection,
   SplitPane,
-  Topbar
+  Topbar,
+  createSidebarLink
 };

package/dist/components/layout/legal-document-shell.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { LegalDocumentShellProp } from "../../props/components/layout.prop.js";
+export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProp as LegalDocumentShellProps, } from "../../props/components/layout.prop.js";
+/**
+ * LegalDocumentShell — the long-form **legal / policy document** surface: terms of service, privacy
+ * policy, DPA, cookie policy, SLA, EULA, security policy.
+ *
+ * It exists because a legal page is NOT expressible as `CenteredShell` + `SplitPane` + tokens: the
+ * geometry is the easy half, and the half that keeps getting hand-rolled per app is the behaviour —
+ *
+ * - **scroll spy**: an `IntersectionObserver` marks the section at the reading line active, so the
+ *   contents list tracks the reader (`aria-current="location"`, never colour-only);
+ * - **hash deep links**: `?#section-id` on load selects that section; activating a contents anchor
+ *   rewrites the hash (`history.replaceState`, so the Back button is never hijacked);
+ * - **scroll offset**: `scroll-margin-block-start` from `--legal-document-scroll-offset`, so a jump
+ *   lands below sticky chrome with no offset arithmetic;
+ * - **focus handoff**: the target `<section tabIndex={-1}>` takes focus (`preventScroll`), so a
+ *   keyboard/screen-reader user actually arrives IN the section, with a visible ring;
+ * - **reduced motion**: the smooth scroll degrades to an instant jump under
+ *   `prefers-reduced-motion: reduce`.
+ *
+ * Semantics: `<article>` labelled by the `<h1>` · a NAMED `<nav>` for the contents · REAL
+ * `<a href="#…">` anchors (middle-clickable, deep-linkable, work before JS boots) · one `<section>`
+ * per entry labelled by its `<h2>`.
+ *
+ * Layout: the shell owns its query container, so the one-column ⇄ two-column decision comes from
+ * its OWN width (the SplitPane precedent, gh#165). At ≥56rem the contents become a sticky rail
+ * beside a measure-capped column; below that (the 390×844 case) the shell is a single column and
+ * the contents are a static compact block between the header and the first section — never pinned,
+ * so a phone loses no vertical space.
+ *
+ * ALL legal text stays consumer-owned: the shell only receives `sections` and slots.
+ */
+export declare const LegalDocumentShell: React.ForwardRefExoticComponent<LegalDocumentShellProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/legal-document-shell.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useControlledLatch } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Heading } from "../general/typography.js";
+const SPY_ROOT_MARGIN = "-10% 0px -75% 0px";
+const ISO_CALENDAR_DATE = /^\d{4}-\d{2}-\d{2}$/;
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function formatEffectiveDate(value, locale) {
+  const iso = value.trim();
+  const isCalendarDate = ISO_CALENDAR_DATE.test(iso);
+  const date = new Date(isCalendarDate ? `${iso}T00:00:00Z` : iso);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    ...isCalendarDate ? { timeZone: "UTC" } : {}
+  }).format(date);
+}
+const LegalDocumentShell = React.forwardRef(
+  function LegalDocumentShell2({
+    title,
+    version,
+    effectiveDate,
+    summary,
+    contentsLabel,
+    sections,
+    activeSection,
+    defaultActiveSection,
+    onActiveSectionChange,
+    documentNavigation,
+    footerAction,
+    id,
+    className
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const generatedId = React.useId();
+    const baseId = id ?? generatedId;
+    const titleId = `${baseId}-title`;
+    const contentsId = `${baseId}-contents`;
+    const rootRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = useControlledLatch(activeSection !== void 0);
+    const [internalActive, setInternalActive] = React.useState(
+      () => defaultActiveSection ?? sections[0]?.id
+    );
+    const active = isControlled ? activeSection : internalActive;
+    const emit = React.useCallback(
+      (sectionId) => {
+        if (!isControlled) setInternalActive(sectionId);
+        onActiveSectionChange?.(sectionId);
+      },
+      [isControlled, onActiveSectionChange]
+    );
+    const activeRef = React.useRef(active);
+    const emitRef = React.useRef(emit);
+    React.useEffect(() => {
+      activeRef.current = active;
+      emitRef.current = emit;
+    });
+    const sectionIdsKey = sections.map((section) => section.id).join("\0");
+    const hashHandledRef = React.useRef(false);
+    React.useEffect(() => {
+      if (hashHandledRef.current || typeof window === "undefined") return;
+      hashHandledRef.current = true;
+      const hash = decodeURIComponent(window.location.hash.replace(/^#/, ""));
+      if (hash && sectionIdsKey.split("\0").includes(hash)) emitRef.current(hash);
+    }, [sectionIdsKey]);
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (!root || typeof IntersectionObserver === "undefined") return;
+      const ids = sectionIdsKey ? sectionIdsKey.split("\0") : [];
+      const intersecting = /* @__PURE__ */ new Map();
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            const entryId = entry.target.dataset.legalSection;
+            if (entryId) intersecting.set(entryId, entry.isIntersecting);
+          }
+          const next = ids.find((sectionId) => intersecting.get(sectionId));
+          if (next && next !== activeRef.current) emitRef.current(next);
+        },
+        { rootMargin: SPY_ROOT_MARGIN, threshold: 0 }
+      );
+      for (const element of root.querySelectorAll("[data-legal-section]")) {
+        observer.observe(element);
+      }
+      return () => observer.disconnect();
+    }, [sectionIdsKey]);
+    const handleContentsClick = (event, sectionId) => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      emit(sectionId);
+      const target = typeof document === "undefined" ? null : document.getElementById(sectionId);
+      if (!target) return;
+      event.preventDefault();
+      window.history?.replaceState?.(null, "", `#${sectionId}`);
+      target.scrollIntoView?.({
+        behavior: prefersReducedMotion() ? "auto" : "smooth",
+        block: "start"
+      });
+      target.focus({ preventScroll: true });
+    };
+    const contentsName = contentsLabel ?? t("layout.legalDocumentShell.contents");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRefs,
+        id,
+        "data-slot": "legal-document-shell",
+        className: cn("ui-legal-document-scope", className),
+        children: /* @__PURE__ */ jsxs("article", { className: "ui-legal-document", "aria-labelledby": titleId, children: [
+          /* @__PURE__ */ jsxs("header", { className: "ui-legal-document-header", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 1, id: titleId, children: title }),
+            (version !== void 0 || effectiveDate !== void 0) && /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-meta", children: [
+              version !== void 0 && /* @__PURE__ */ jsx("span", { children: t("layout.legalDocumentShell.version", { version }) }),
+              effectiveDate !== void 0 && // <time dateTime> keeps the MACHINE-readable value as the ISO 8601 input while
+              // the visible text is the Intl-formatted, locale-correct rendering.
+              /* @__PURE__ */ jsx("time", { dateTime: effectiveDate, children: t("layout.legalDocumentShell.effectiveDate", {
+                date: formatEffectiveDate(effectiveDate, locale)
+              }) })
+            ] }),
+            summary !== void 0 && // A <div> (not <p>): the summary slot may carry block content, and a <p> inside a <p>
+            // is invalid HTML the browser silently un-nests.
+            /* @__PURE__ */ jsx("div", { className: "ui-legal-document-summary", children: summary })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-rail", children: [
+            documentNavigation !== void 0 && /* @__PURE__ */ jsx("div", { "data-slot": "legal-document-navigation", children: documentNavigation }),
+            /* @__PURE__ */ jsxs("nav", { className: "ui-legal-document-toc", "aria-labelledby": contentsId, children: [
+              /* @__PURE__ */ jsx("p", { id: contentsId, className: "ui-legal-document-toc-title", children: contentsName }),
+              /* @__PURE__ */ jsx("ol", { className: "ui-legal-document-toc-list", children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `#${section.id}`,
+                  className: "ui-legal-document-toc-link",
+                  "data-active": section.id === active ? "" : void 0,
+                  "aria-current": section.id === active ? "location" : void 0,
+                  onClick: (event) => handleContentsClick(event, section.id),
+                  children: section.title
+                }
+              ) }, section.id)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ui-legal-document-content", children: sections.map((section) => /* @__PURE__ */ jsxs(
+            "section",
+            {
+              id: section.id,
+              tabIndex: -1,
+              "data-legal-section": section.id,
+              "aria-labelledby": `${section.id}-heading`,
+              className: "ui-legal-document-section",
+              children: [
+                /* @__PURE__ */ jsx(Heading, { level: 2, id: `${section.id}-heading`, children: section.title }),
+                /* @__PURE__ */ jsx("div", { className: "ui-legal-document-section-body", children: section.content })
+              ]
+            },
+            section.id
+          )) }),
+          footerAction !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-legal-document-footer", children: footerAction })
+        ] })
+      }
+    );
+  }
+);
+LegalDocumentShell.displayName = "LegalDocumentShell";
+export {
+  LegalDocumentShell
+};

package/dist/components/layout/master-detail.d.ts

@@ -0,0 +1,24 @@
+import type { MasterDetailProp } from "../../props/components/layout.prop.js";
+export type MasterDetailProps = MasterDetailProp;
+/**
+ * Token-owned master-detail composition: a selectable collection beside the detail surface it
+ * drives. Geometry is the component's only responsibility — the tracks (`--master-detail-rail-*`),
+ * the gap (`--master-detail-gap`) and the stacking threshold (`--master-detail-collapse-below`)
+ * are all tokens, so a consumer never authors grid tracks or per-screen spacing (gh#223).
+ *
+ * `rail` chooses which region keeps the fixed track: `detail` (default) is the canonical fluid
+ * list + fixed detail rail; `master` is the leading navigator rail. Either way `master` comes
+ * first in DOM order, so below the threshold the regions stack list-then-detail.
+ *
+ * `masterViewport` bounds the collection (gh#231): `auto` (default) lets it grow with its content
+ * exactly as before, while `compact`/`standard` cap its block size with a token and scroll it
+ * INSIDE the region — the only thing that stops a long real collection from pushing the detail
+ * thousands of pixels below the fold once the layout stacks.
+ *
+ * SELECTION AND KEYBOARD STAY WITH THE CALLER — deliberately. The controls inside `master` may be
+ * a listbox, a tablist, a link list or toggle buttons, and only the caller knows which APG pattern
+ * applies; a layout that imposed one would fight it. What the layout DOES own is the wiring those
+ * patterns need: two named landmark regions, a stable `detailId` for `aria-controls`, and a
+ * `tabIndex={-1}` detail region so the app can move focus to the new detail after a selection.
+ */
+export declare function MasterDetail({ master, children, rail, railWidth, masterViewport, collapseBelow, masterLabel, detailLabel, detailId, }: MasterDetailProps): import("react").JSX.Element;

package/dist/components/layout/master-detail.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function MasterDetail({
+  master,
+  children,
+  rail = "detail",
+  railWidth = "standard",
+  masterViewport = "auto",
+  collapseBelow,
+  masterLabel,
+  detailLabel,
+  detailId
+}) {
+  const bounded = masterViewport !== "auto";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-master-detail",
+      "data-rail": rail,
+      "data-rail-width": railWidth,
+      "data-master-viewport": masterViewport,
+      "data-collapse-below": collapseBelow === void 0 ? void 0 : String(collapseBelow),
+      children: [
+        /* @__PURE__ */ jsx(
+          "section",
+          {
+            className: "ui-master-detail-master",
+            "aria-label": masterLabel,
+            tabIndex: bounded ? 0 : void 0,
+            children: master
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "section",
+          {
+            className: "ui-master-detail-detail",
+            id: detailId,
+            "aria-label": detailLabel,
+            tabIndex: -1,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MasterDetail
+};

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

@@ -0,0 +1,9 @@
+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";
+/**
+ * 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;