@godxjp/ui 20.1.0 → 20.2.0

package/dist/app/app-provider.js

@@ -14,7 +14,13 @@ import {
   enableLiveRelativeFormatting,
   syncDatetimeContext
 } from "../lib/datetime/index.js";
-import { DEFAULT_STORAGE_KEY, readStoredPreferences, writeStoredPreferences } from "./storage.js";
+import {
+  DEFAULT_STORAGE_KEY,
+  pickPersistedAxes,
+  readStoredPreferences,
+  resolvePersistedAxes,
+  writeStoredPreferences
+} from "./storage.js";
 import {
   applyThemeAxes,
   PREFERS_DARK_SCHEME_QUERY
@@ -105,8 +111,18 @@ function AppProvider({
     fontSize,
     scaling
   });
+  const persistKey = Array.isArray(persist) ? [...persist].sort().join(",") : String(persist);
+  const persistedAxes = React.useMemo(
+    () => resolvePersistedAxes(persist),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [persistKey]
+  );
+  const commitPreferences = React.useCallback(() => {
+    if (persistedAxes.size === 0) return;
+    writeStoredPreferences(storageKey, pickPersistedAxes(prefsRef.current, persistedAxes));
+  }, [persistedAxes, storageKey]);
   React.useEffect(() => {
-    const stored = persist ? readStoredPreferences(storageKey) : {};
+    const stored = pickPersistedAxes(readStoredPreferences(storageKey), persistedAxes);
     const nextLocale = stored.locale ?? defaultLocale;
     const nextTimezone = stored.timezone ?? resolveDefaultTimezone(defaultTimezone, systemTimezone);
     const nextTimeFormat = resolveInitialTimeFormat(
@@ -154,7 +170,7 @@ function AppProvider({
     initialDensity,
     initialFontSize,
     initialScaling,
-    persist,
+    persistedAxes,
     storageKey,
     systemTimezone
   ]);
@@ -188,81 +204,81 @@ function AppProvider({
       prefsRef.current = { ...prefsRef.current, locale: next };
       setLocaleState(next);
       onLocaleChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onLocaleChange, persist, storageKey]
+    [onLocaleChange, commitPreferences]
   );
   const setTimezone = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, timezone: next };
       setTimezoneState(next);
       onTimezoneChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onTimezoneChange, persist, storageKey]
+    [onTimezoneChange, commitPreferences]
   );
   const setTimeFormat = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, timeFormat: next };
       setTimeFormatState(next);
       onTimeFormatChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onTimeFormatChange, persist, storageKey]
+    [onTimeFormatChange, commitPreferences]
   );
   const setDateFormat = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, dateFormat: next };
       setDateFormatState(next);
       onDateFormatChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onDateFormatChange, persist, storageKey]
+    [onDateFormatChange, commitPreferences]
   );
   const setTheme = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, theme: next };
       setThemeState(next);
       onThemeChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onThemeChange, persist, storageKey]
+    [onThemeChange, commitPreferences]
   );
   const setBrand = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, brand: next };
       setBrandState(next);
       onBrandChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onBrandChange, persist, storageKey]
+    [onBrandChange, commitPreferences]
   );
   const setDensity = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, density: next };
       setDensityState(next);
       onDensityChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onDensityChange, persist, storageKey]
+    [onDensityChange, commitPreferences]
   );
   const setFontSize = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, fontSize: next };
       setFontSizeState(next);
       onFontSizeChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onFontSizeChange, persist, storageKey]
+    [onFontSizeChange, commitPreferences]
   );
   const setScaling = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, scaling: next };
       setScalingState(next);
       onScalingChange?.(next);
-      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+      commitPreferences();
     },
-    [onScalingChange, persist, storageKey]
+    [onScalingChange, commitPreferences]
   );
   const requestHeaders = React.useMemo(
     () => buildRequestHeaders(locale, timezone, timeFormat, dateFormat),

package/dist/app/index.d.ts

@@ -12,3 +12,5 @@ export { AppProvider, useAppContext, useOptionalAppContext, useAppLocale, useApp
 export { useFormatting, useDateTime } from "./use-formatting.js";
 export { syncDatetimeContext, getDatetimeContext, formatDate, isFormatDateValue, detectFormatDateKind, formatAppDate, formatAppDateTime, formatAppTime, formatAppDateLong, formatAppRelative, formatCalendarDate, formatTimeOfDay, parseDateInput, normalizeHhmm, isValidHhmm, type FormatDateOptions, type FormatDateKind, type FormatDatetimeOptions, } from "../lib/datetime/index.js";
 export { useTranslation, usePickerLocales } from "../i18n/use-translation.js";
+export { OverlayPortalProvider } from "../lib/overlay-portal.js";
+export type { OverlayPortalProviderProps } from "../lib/overlay-portal.js";

package/dist/app/index.js

@@ -36,8 +36,10 @@ import {
   isValidHhmm
 } from "../lib/datetime/index.js";
 import { useTranslation, usePickerLocales } from "../i18n/use-translation.js";
+import { OverlayPortalProvider } from "../lib/overlay-portal.js";
 export {
   AppProvider,
+  OverlayPortalProvider,
   detectFormatDateKind,
   formatAppDate,
   formatAppDateLong,

package/dist/app/storage.d.ts

@@ -14,6 +14,23 @@ export type StoredAppPreferences = {
     /** Continuous global size multiplier; `null` defers to the density preset. */
     scaling?: number | null;
 };
+/**
+ * The axes a viewer's preferences are made of — the keys of {@link StoredAppPreferences}.
+ *
+ * They do NOT share an owner. `theme`, `density`, `fontSize`, `scaling` and `brand` are the
+ * viewer's, and belong in this browser. `locale`, `timezone`, `timeFormat` and `dateFormat` are
+ * frequently the SERVER's — resolved per request from a cookie, an account row or an Accept-Language
+ * header — and a copy in local storage then wins over the value the server just sent, because
+ * storage is read after the props. That is why `persist` takes a LIST as well as a boolean: one
+ * flag for axes with two different owners forces an all-or-nothing choice, and the consumer that
+ * hits it turns persistence off entirely and loses the viewer's theme with it.
+ */
+export declare const APP_PREFERENCE_AXES: readonly ["locale", "timezone", "timeFormat", "dateFormat", "theme", "brand", "density", "fontSize", "scaling"];
+export type AppPreferenceAxis = (typeof APP_PREFERENCE_AXES)[number];
+/** `true` → every axis, `false` → none, a list → exactly those. */
+export declare function resolvePersistedAxes(persist: boolean | readonly AppPreferenceAxis[]): ReadonlySet<AppPreferenceAxis>;
+/** The subset of `preferences` on the given axes; the rest are dropped, not set to undefined. */
+export declare function pickPersistedAxes(preferences: StoredAppPreferences, axes: ReadonlySet<AppPreferenceAxis>): StoredAppPreferences;
 export declare function readStoredPreferences(storageKey: string): StoredAppPreferences;
 export declare function writeStoredPreferences(storageKey: string, preferences: StoredAppPreferences): void;
 export { DEFAULT_STORAGE_KEY };

package/dist/app/storage.js

@@ -8,6 +8,31 @@ import {
   isAppTheme
 } from "./theme-axes.js";
 const DEFAULT_STORAGE_KEY = "godxjp.app";
+const APP_PREFERENCE_AXES = [
+  "locale",
+  "timezone",
+  "timeFormat",
+  "dateFormat",
+  "theme",
+  "brand",
+  "density",
+  "fontSize",
+  "scaling"
+];
+function resolvePersistedAxes(persist) {
+  if (persist === true) return new Set(APP_PREFERENCE_AXES);
+  if (persist === false) return /* @__PURE__ */ new Set();
+  return new Set(persist);
+}
+function pickPersistedAxes(preferences, axes) {
+  const out = {};
+  for (const axis of APP_PREFERENCE_AXES) {
+    if (axes.has(axis) && preferences[axis] !== void 0) {
+      out[axis] = preferences[axis];
+    }
+  }
+  return out;
+}
 function readStoredPreferences(storageKey) {
   if (typeof window === "undefined") return {};
   try {
@@ -37,7 +62,10 @@ function writeStoredPreferences(storageKey, preferences) {
   }
 }
 export {
+  APP_PREFERENCE_AXES,
   DEFAULT_STORAGE_KEY,
+  pickPersistedAxes,
   readStoredPreferences,
+  resolvePersistedAxes,
   writeStoredPreferences
 };

package/dist/components/data-display/popover.d.ts

@@ -34,6 +34,12 @@ type PopoverContentFlush = {
     flush?: FlushProp;
 };
 interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, PopoverContentFlush {
+    /**
+     * Render THIS panel somewhere other than the default. Almost always unnecessary: mounting the
+     * whole tree in a shadow root is what `OverlayPortalProvider` is for, and it moves every overlay
+     * at once. Reach for this only to place one panel differently from the rest.
+     */
+    portalContainer?: Element;
     /** Cạnh của trigger mà panel bám vào. */
     side?: Side;
     /** Canh panel theo cạnh của trigger. */
@@ -67,7 +73,7 @@ interface PopoverContentProps extends React.ComponentPropsWithRef<"div">, Popove
      */
     onCloseAutoFocus?: (event: Event) => void;
 }
-export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, ...props }: PopoverContentProps): React.JSX.Element;
+export declare function PopoverContent({ className, style, children, ref, flush, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onOpenAutoFocus, onCloseAutoFocus, portalContainer, ...props }: PopoverContentProps): React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;

package/dist/components/data-display/popover.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Popover as AriaPopover } from "react-aria-components";
@@ -142,6 +143,7 @@ function PopoverContent({
   forceMount: _forceMount,
   onOpenAutoFocus,
   onCloseAutoFocus,
+  portalContainer,
   ...props
 }) {
   const root = usePopoverRoot("PopoverContent");
@@ -176,9 +178,11 @@ function PopoverContent({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [open, setOpen, triggerRef]);
+  const overlayPortalContainer = useOverlayPortalContainer(portalContainer);
   return /* @__PURE__ */ jsx(
     AriaPopover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: root.open,
       onOpenChange: root.setOpen,
       isNonModal: root.isNonModal,

package/dist/components/data-display/service-launcher-card.js

@@ -31,8 +31,10 @@ const ServiceLauncherCard = React.forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
           /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-heading", children: [
-            /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
-            /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title }),
+            /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-identity", children: [
+              /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title })
+            ] }),
             statusLabel != null ? /* @__PURE__ */ jsx(Badge, { tone: statusTone, "data-slot": "service-launcher-status", children: statusLabel }) : null
           ] }),
           description != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-description", children: description }) : null,

package/dist/components/data-display/table.d.ts

@@ -18,6 +18,36 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * table exactly as it is.
      */
     preset?: TablePresetProp;
+    /**
+     * PER-INSTANCE column measures for `preset="action-collection"`, in place of re-pointing its
+     * `--table-action-collection-*` knobs from a consumer stylesheet.
+     *
+     * Those knobs are global by design, and that is exactly the problem: two collections on the same
+     * screen do not share a column budget. A console that widened `actions` globally so a Japanese
+     * status badge would stop breaking to one character per line — an SC 1.4.10 reflow failure —
+     * collapsed a sibling table's name column to ~15px in the same change. The only way out was a
+     * scoped class in consumer CSS, and the comment that shipped with it said so: "until the package
+     * can express a per-table measure, the retune stays on the collection needing it".
+     *
+     * Emitted as inline custom properties, the same contract `Flex width` uses for a call-site
+     * measurement: the value is a raw length the design system cannot know, so it rides in `style`
+     * and leaves `data-column-widths` on the DOM so each one stays countable.
+     */
+    columnWidths?: {
+        /** `--table-action-collection-actions-width` — the row-action column above the collapse step. */
+        actions?: string;
+        /** `--table-action-collection-actions-width-compact` — the same column below it. */
+        actionsCompact?: string;
+        /** `--table-action-collection-meta-width-compact` — a `meta`-priority column below the step. */
+        metaCompact?: string;
+        /**
+         * `--table-action-collection-min-inline-size-compact` — the legibility FLOOR the compact tier
+         * keeps before the wrapper scrolls. The preset sizes its compact tier for one column per
+         * priority; a collection carrying several of the same priority needs a wider floor or its
+         * free-text column is squeezed toward zero.
+         */
+        minInlineSizeCompact?: string;
+    };
     /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
 };
@@ -39,6 +69,36 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * table exactly as it is.
      */
     preset?: TablePresetProp;
+    /**
+     * PER-INSTANCE column measures for `preset="action-collection"`, in place of re-pointing its
+     * `--table-action-collection-*` knobs from a consumer stylesheet.
+     *
+     * Those knobs are global by design, and that is exactly the problem: two collections on the same
+     * screen do not share a column budget. A console that widened `actions` globally so a Japanese
+     * status badge would stop breaking to one character per line — an SC 1.4.10 reflow failure —
+     * collapsed a sibling table's name column to ~15px in the same change. The only way out was a
+     * scoped class in consumer CSS, and the comment that shipped with it said so: "until the package
+     * can express a per-table measure, the retune stays on the collection needing it".
+     *
+     * Emitted as inline custom properties, the same contract `Flex width` uses for a call-site
+     * measurement: the value is a raw length the design system cannot know, so it rides in `style`
+     * and leaves `data-column-widths` on the DOM so each one stays countable.
+     */
+    columnWidths?: {
+        /** `--table-action-collection-actions-width` — the row-action column above the collapse step. */
+        actions?: string;
+        /** `--table-action-collection-actions-width-compact` — the same column below it. */
+        actionsCompact?: string;
+        /** `--table-action-collection-meta-width-compact` — a `meta`-priority column below the step. */
+        metaCompact?: string;
+        /**
+         * `--table-action-collection-min-inline-size-compact` — the legibility FLOOR the compact tier
+         * keeps before the wrapper scrolls. The preset sizes its compact tier for one column per
+         * priority; a collection carrying several of the same priority needs a wider floor or its
+         * free-text column is squeezed toward zero.
+         */
+        minInlineSizeCompact?: string;
+    };
     /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */
     collapseBelow?: BreakpointProp;
 } & React.RefAttributes<HTMLTableElement>>;

package/dist/components/data-display/table.js

@@ -9,6 +9,7 @@ const Table = React.forwardRef(
     bordered = false,
     preset = "default",
     collapseBelow = "sm",
+    columnWidths,
     ...props
   }, ref) => (
     // A table wider than its container scrolls horizontally in this wrapper; keep it
@@ -27,6 +28,13 @@ const Table = React.forwardRef(
         ),
         "data-preset": preset === "default" ? void 0 : preset,
         "data-collapse-below": preset === "default" ? void 0 : collapseBelow,
+        "data-column-widths": columnWidths ? "" : void 0,
+        style: columnWidths ? {
+          "--table-action-collection-actions-width": columnWidths.actions,
+          "--table-action-collection-actions-width-compact": columnWidths.actionsCompact,
+          "--table-action-collection-meta-width-compact": columnWidths.metaCompact,
+          "--table-action-collection-min-inline-size-compact": columnWidths.minInlineSizeCompact
+        } : void 0,
         ...scrollable ? { tabIndex: 0 } : {},
         children: /* @__PURE__ */ jsx(
           "table",

package/dist/components/data-entry/calendar.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CalendarProp } from "../../props/components/data-entry.prop.js";
 export type { CalendarProp, CalendarProp as CalendarProps, CalendarCellRenderProp, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
-export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, cellRender, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;
+export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, cellRender, month: monthProp, onMonthChange, locale: localeProp, ...props }: CalendarProp): React.JSX.Element;

package/dist/components/data-entry/calendar.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import { DayButton, DayPicker, dateMatchModifiers } from "react-day-picker";
-import { useTranslation } from "../../i18n/use-translation.js";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconSmClass } from "../../lib/control-styles.js";
 import { Button, buttonVariants } from "../general/button.js";
@@ -26,9 +26,11 @@ function Calendar({
   cellRender,
   month: monthProp,
   onMonthChange,
+  locale: localeProp,
   ...props
 }) {
   const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
   const [month, setMonth] = React.useState(monthProp ?? props.defaultMonth);
   const today = startOfDay(props.today ?? /* @__PURE__ */ new Date());
   const todayDisabled = props.startMonth != null && today < startOfMonth(props.startMonth) || props.endMonth != null && today > endOfMonth(props.endMonth) || props.disabled != null && dateMatchModifiers(today, props.disabled);
@@ -68,6 +70,7 @@ function Calendar({
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
+      locale: dayPickerLocale,
       showOutsideDays,
       "aria-label": ariaLabel,
       month: showToday ? monthProp ?? month : monthProp,
@@ -78,7 +81,13 @@ function Calendar({
       footer: footer ?? actions,
       labels: {
         ...labels,
-        labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
+        /*
+         * LOCALIZED, like every other string this component renders. It was an English literal
+         * built by template — so a Japanese calendar announced its own month controls as "Calendar
+         * navigation" while the two buttons INSIDE that container said 前の月へ and 次の月へ. Nothing
+         * failed and nothing warned; the only reader affected was the one using a screen reader.
+         */
+        labelNav: labels?.labelNav ?? (() => t("dataEntry.calendar.nav", { label: ariaLabel ?? t("dataEntry.calendar.name") }))
       },
       className: cn("ui-calendar", className),
       "data-width": width === "full" ? "full" : void 0,

package/dist/components/feedback/dialog.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
@@ -58,9 +59,11 @@ function DialogShell({
   const labels = React.useMemo(() => ({ titleId, descriptionId }), [titleId, descriptionId]);
   const dataState = state.isOpen ? "open" : "closed";
   useOverlayCloseFocus(state.isOpen, onCloseAutoFocus);
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: state.isOpen,
       onOpenChange: state.setOpen,
       isDismissable,

package/dist/components/feedback/sheet.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
@@ -152,9 +153,11 @@ function SheetContent({
   const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
   const dataState = state.isOpen ? "open" : "closed";
   useOverlayCloseFocus(state.isOpen);
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: state.isOpen,
       onOpenChange: state.setOpen,
       isDismissable: true,

package/dist/components/feedback/tooltip.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { mergeRefs } from "@react-aria/utils";
 import {
@@ -74,9 +75,11 @@ function TooltipContent({
   forceMount: _forceMount,
   ...props
 }) {
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     AriaTooltip,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       placement: toPlacement(side, align),
       offset: sideOffset,
       crossOffset: alignOffset,

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

@@ -10,6 +10,7 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     size?: import("../../props/index.js").ButtonSizeProp;
     shape?: import("../../props/index.js").ShapeProp;
     fullWidth?: boolean;
+    fill?: boolean;
     wrap?: boolean;
     align?: import("../../props/index.js").TextAlignProp;
     asChild?: import("../../props/index.js").AsChildProp;

package/dist/components/general/button.js

@@ -56,6 +56,7 @@ const Button = React.forwardRef(
     size,
     shape,
     fullWidth = false,
+    fill = false,
     wrap = false,
     align = "center",
     asChild = false,
@@ -87,6 +88,7 @@ const Button = React.forwardRef(
         "data-size": size ?? "default",
         "data-shape": shape ?? "default",
         "data-full-width": fullWidth ? "" : void 0,
+        "data-fill": fill ? "" : void 0,
         "data-wrap": wrap ? "" : void 0,
         "data-align": align === "center" ? void 0 : align,
         "data-loading": isLoading ? "" : void 0,

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

@@ -31,4 +31,4 @@ type DataAttributes = {
  *   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;
+export declare function AppLauncher({ apps, groups, labels, columns, linkComponent, loading, error, onRetry, responsive, appearance, side, align, open, onOpenChange, className, ...rest }: AppLauncherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

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

@@ -4,6 +4,13 @@ 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 {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../feedback/dialog.js";
 import {
   Sheet,
   SheetBody,
@@ -154,6 +161,9 @@ function AppLauncher({
   error,
   onRetry,
   responsive = "auto",
+  appearance = "bar",
+  side,
+  align,
   open,
   onOpenChange,
   className,
@@ -173,18 +183,16 @@ function AppLauncher({
   );
   const compactViewport = useSheetResponsiveMode("auto") === "bottom";
   const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const launchpad = responsive === "fullscreen";
   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 triggerProps = {
+    className: cn("ui-app-launcher-trigger", className),
+    "aria-label": labels.trigger,
+    ...rest
+  };
+  const trigger = appearance === "bar" ? /* @__PURE__ */ jsx(TopbarItem, { ...triggerProps, children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", ...triggerProps, children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" }) });
   const panel = /* @__PURE__ */ jsx(
     AppLauncherPanel,
     {
@@ -199,6 +207,22 @@ function AppLauncher({
       close
     }
   );
+  if (launchpad) {
+    return /* @__PURE__ */ jsxs(Dialog, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "ui-app-launcher-launchpad",
+          overlayClassName: "ui-app-launcher-launchpad-overlay",
+          children: [
+            /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+            panel
+          ]
+        }
+      )
+    ] });
+  }
   if (sheet) {
     return /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
@@ -220,7 +244,16 @@ function AppLauncher({
   }
   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 })
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side: side ?? (appearance === "bar" ? "bottom" : "right"),
+        align: align ?? (appearance === "bar" ? "end" : "start"),
+        className: "ui-app-launcher-popover",
+        "aria-label": labels.title,
+        children: panel
+      }
+    )
   ] });
 }
 export {

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

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