pixelize-design-library 2.4.2-beta.58 → 2.4.2-beta.60

package/dist/Components/NavLauncher/NavLauncherProps.d.ts

@@ -0,0 +1,187 @@
+import type { ElementType, KeyboardEvent, MouseEvent } from "react";
+import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
+/** Rendered as `<Icon size={16} aria-hidden />`, so any lucide-compatible component works. */
+export type LauncherIcon = ElementType;
+/** One destination the launcher can open; screens are what pins, Frequent and Recent refer to. */
+export type LauncherScreen = {
+    id: string;
+    label: string;
+    href: string;
+    icon?: LauncherIcon;
+    badge?: number | string;
+    keywords?: readonly string[];
+    /** Listed on the module's second line (first `keyScreenLimit` of them). */
+    isKey?: boolean;
+};
+/** A group of screens shown as one row in the browse view. */
+export type LauncherModule = {
+    id: string;
+    label: string;
+    /** Normally its first visible screen's href. */
+    href: string;
+    icon?: LauncherIcon;
+    badge?: number | string;
+    /** Shows a small "New" tag after the name. */
+    isNew?: boolean;
+    keywords?: readonly string[];
+    /** Pinning the module pins `screens[0]`; a module with no screens is not rendered. */
+    screens: readonly LauncherScreen[];
+};
+/** A labelled run of modules; a section with no renderable module is dropped. */
+export type LauncherSection = {
+    id: string;
+    label: string;
+    modules: readonly LauncherModule[];
+};
+/** A search row that is not a screen: an action (`run`) or an entity result (`href`). */
+export type LauncherSearchItem = {
+    id: string;
+    label: string;
+    /** Second line, e.g. the module a result belongs to. */
+    context?: string;
+    icon?: LauncherIcon;
+    /** Extra terms the query may match; never rendered. */
+    keywords?: string;
+    hint?: string;
+    href?: string;
+    run?: () => void;
+};
+/** A titled batch of remote results, rendered after Screens in the order given. */
+export type LauncherResultGroup = {
+    id: string;
+    label: string;
+    items: readonly LauncherSearchItem[];
+};
+/** Every visible string and accessible name; pass any subset, the rest fall back to English. */
+export type LauncherLabels = {
+    title: string;
+    searchPlaceholder: string;
+    clearSearch: string;
+    close: string;
+    pinned: string;
+    pinnedEmpty: string;
+    frequent: string;
+    recent: string;
+    screensGroup: string;
+    actionsGroup: string;
+    pin: (label: string) => string;
+    unpin: (label: string) => string;
+    openInNewTab: (label: string) => string;
+    noResults: (query: string) => string;
+    noResultsHint: string;
+    searching: string;
+    /** Accessible name of the skeleton region while `isLoading`. */
+    loading: string;
+    /** Heading of the empty state shown when `sections` has nothing to render. */
+    empty: string;
+    /** Footer hint after the four arrow key caps. */
+    hintMove: string;
+    /** Footer hint after the ENTER key cap. */
+    hintOpen: string;
+    /** Footer hint after the mod + ENTER key caps. */
+    hintNewTab: string;
+    /** Footer hint after the P key cap. */
+    hintPin: string;
+    /** Footer hint after the ESC key cap. */
+    hintClose: string;
+    /** Footer hint after `openShortcutHint`; only rendered when that prop is set. */
+    hintOpenMenu: string;
+    /** Heading and list name of the apps section. */
+    apps: string;
+    /** Per-section count shown while searching, e.g. "3 found". */
+    found: (count: number) => string;
+    /** Accessible name of the right-hand quick access rail. */
+    quickAccess: string;
+    /** Tag after a module marked `isNew`. */
+    newBadge: string;
+    /** Noun used in a module's key-screens group name, e.g. "Leave screens". */
+    screens: string;
+    /** Text on the Pin button of Frequently visited rows. */
+    pinShort: string;
+    /** Right-hand footer note. */
+    footerNote: string;
+    /** Line above the suggestion chips of the no-results state. */
+    suggestionsHint: string;
+    /** Tooltip on an unpinned star. */
+    pinTip: string;
+    /** Tooltip on a pinned star. */
+    unpinTip: string;
+};
+/** Passed to `onNavigate`; `newTab` is true for mod+Enter. */
+export type LauncherNavigateOptions = {
+    newTab: boolean;
+};
+/** Full-height navigation launcher: browse every screen, search, pins, Frequent, Recent and optionally the suite's apps. */
+export interface NavLauncherProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Already permission-filtered by the app. Empty sections/modules are dropped, never rendered as gaps. */
+    sections: readonly LauncherSection[];
+    /** Screen ids in display order; ids not in `sections` are ignored silently. */
+    pinnedIds: readonly string[];
+    frequentIds: readonly string[];
+    recentIds: readonly string[];
+    /** Omit to hide every pin toggle (read-only launcher). */
+    onTogglePin?: (screenId: string) => void;
+    /** Keyboard opens only (Enter / mod+Enter); pointer clicks follow the rendered links natively. */
+    onNavigate: (href: string, options: LauncherNavigateOptions) => void;
+    /** Anchor-like component receiving `href`, `target`, `rel`, `onClick`, `ref`. Defaults to `"a"`. */
+    linkAs?: ElementType;
+    actions?: readonly LauncherSearchItem[];
+    /** Remote results, already filtered by the app; rendered after Screens in the given order. */
+    extraResults?: readonly LauncherResultGroup[];
+    /** Controlled query; omit for uncontrolled. Reset to "" on close either way. */
+    query?: string;
+    /** Fires on every change, including the reset on close. */
+    onQueryChange?: (query: string) => void;
+    /** Remote search in flight: shows the searching state when nothing local matched. */
+    isSearching?: boolean;
+    /** Sections not known yet (access loading): skeleton browse view. */
+    isLoading?: boolean;
+    /** Defaults to 3. */
+    keyScreenLimit?: number;
+    /** Most Frequently visited rows shown (pinned ones are skipped); defaults to 4. */
+    frequentLimit?: number;
+    /** Query chips offered by the no-results state; clicking one sets the query. */
+    suggestions?: readonly string[];
+    /** Key cap shown at the end of the search field, e.g. "/" when the app opens the launcher with it. */
+    searchHint?: string;
+    /** Chord that opens the launcher in the host app, e.g. "⌘K or /"; shown as the first footer hint. Omit when the app does not own one. */
+    openShortcutHint?: string;
+    /** Replaces the modifier cap of the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
+    modKeyLabel?: string;
+    /** Panel width at `lg`+; always full width below `lg`. Defaults to "1080px". */
+    maxWidth?: string;
+    labels?: Partial<LauncherLabels>;
+    /** Other Pixelize apps, shown as an "Apps" section at the bottom of the right rail. Same shape as AppSwitcher. */
+    apps?: AppOption[];
+    /** The app this UI runs inside: its row is marked and never a link. */
+    currentAppId?: string;
+    /** Same contract as AppSwitcher.onSelect; preventDefault keeps the app's own routing. */
+    onAppSelect?: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
+    /** Default "apps-on-compact": the section shows only below `md`, where the 9-dot is usually hidden. */
+    appsVisibility?: "always" | "apps-on-compact";
+    "data-testid"?: string;
+}
+/** Props for the star pin toggle used on launcher rows and reusable on a landing page; shows only while its row is hovered or focused. */
+export interface PinToggleProps {
+    isPinned: boolean;
+    /** Accessible name and tooltip, e.g. "Pin Leave". */
+    label: string;
+    onToggle: () => void;
+    /** Tooltip text; defaults to `label`. */
+    title?: string;
+    /** Star size in px; defaults to 13. */
+    size?: number;
+    /** Pass -1 where the row itself is the tab stop. */
+    tabIndex?: number;
+}
+/** Props for the small "open in new tab" anchor beside a launcher row. */
+export interface NewTabLinkProps {
+    href: string;
+    /** Accessible name and tooltip, e.g. "Open Leave in a new tab". */
+    label: string;
+    /** Anchor-like component receiving `href`, `target`, `rel`; defaults to `"a"`. */
+    linkAs?: ElementType;
+    tabIndex?: number;
+}

package/dist/Components/NavLauncher/NavLauncherProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NavLauncher/NewTabLink.d.ts

@@ -0,0 +1,3 @@
+import type { NewTabLinkProps } from "./NavLauncherProps";
+/** "Open in a new tab" anchor; visible on row hover, focus-within or its own focus only. */
+export default function NewTabLink({ href, label, linkAs, tabIndex }: NewTabLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavLauncher/NewTabLink.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NewTabLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const revealStyles_1 = require("./revealStyles");
+/** "Open in a new tab" anchor; visible on row hover, focus-within or its own focus only. */
+function NewTabLink({ href, label, linkAs = "a", tabIndex }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, title: label, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: "22px", h: "22px", flexShrink: 0, borderRadius: "md", color: colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), _hover: { bg: colors.backgroundColor.subtle }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 13, "aria-hidden": true }) }));
+}

package/dist/Components/NavLauncher/PinToggle.d.ts

@@ -0,0 +1,3 @@
+import type { PinToggleProps } from "./NavLauncherProps";
+/** Star toggle: outline when unpinned, filled in the accent when pinned; appears on row hover or focus and never follows the row link. */
+export default function PinToggle({ isPinned, label, onToggle, title, size, tabIndex }: PinToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavLauncher/PinToggle.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PinToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const revealStyles_1 = require("./revealStyles");
+const STAR = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z";
+function Star({ filled, size }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinejoin: "round", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: STAR }) }));
+}
+/** Star toggle: outline when unpinned, filled in the accent when pinned; appears on row hover or focus and never follows the row link. */
+function PinToggle({ isPinned, label, onToggle, title, size = 13, tabIndex }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": isPinned, title: title !== null && title !== void 0 ? title : label, icon: (0, jsx_runtime_1.jsx)(Star, { filled: isPinned, size: size }), variant: "ghost", minW: "22px", w: "22px", h: "22px", borderRadius: "md", tabIndex: tabIndex, color: isPinned ? colors.accentText : colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        } }));
+}

package/dist/Components/NavLauncher/launcherParts.d.ts

@@ -0,0 +1,152 @@
+import { type ElementType, type FocusEvent, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
+import type { LauncherLabels, LauncherModule, LauncherScreen } from "./NavLauncherProps";
+export declare const ITEM_SELECTOR = "[data-launcher-item]";
+export declare const isPlainClick: (event: MouseEvent) => boolean;
+export type LinkCtx = {
+    linkAs: ElementType;
+    onPlainClick: (event: MouseEvent) => void;
+};
+export declare const WIDE_ROW = "@container launcher-row (min-width: 300px)";
+export declare const ROW_CONTAINER: {
+    containerType: string;
+    containerName: string;
+};
+export declare const activeRowStyle: (colors: PaletteProps) => {
+    edge: string;
+    fill: string;
+};
+export declare const activeRowSurface: (colors: PaletteProps) => {
+    backgroundColor: string;
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+};
+export declare const titleInset: (base: number, open: number, chip?: number) => {
+    "@container launcher-row (max-width: 219px)": {
+        "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &": {
+            "--row-pr": string;
+        };
+    };
+    "@container launcher-row (min-width: 300px)"?: {
+        "[data-group][data-reveal=true] &": {
+            "--row-pr": string;
+        };
+    } | undefined;
+    paddingRight: string;
+    "--row-pr": string;
+    "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &": {
+        "--row-pr": string;
+    };
+};
+export declare const useRowFocus: (isBordered?: boolean) => {
+    sx: {
+        "&[data-row-focus]": {
+            backgroundColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    primary: {
+        onFocus: (event: FocusEvent<HTMLElement>) => boolean | undefined;
+        onBlur: (event: FocusEvent<HTMLElement>) => boolean | undefined;
+    };
+};
+export declare const stretchedLink: (radius: string) => {
+    outline: string;
+    _after: {
+        content: string;
+        position: string;
+        inset: number;
+        borderRadius: string;
+    };
+};
+export declare const useRowHover: () => {
+    bg: string;
+    _hover: {
+        bg: string;
+    };
+    _focusWithin: {
+        bg: string;
+    };
+};
+type BadgeProps = {
+    value?: number | string;
+    size?: "row" | "tile";
+};
+export declare function CountBadge({ value, size }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NewTag({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+type SectionHeaderProps = {
+    label: string;
+    meta?: string;
+    isDecorative?: boolean;
+    isRail?: boolean;
+    hasCount?: boolean;
+};
+export declare function SectionHeader({ label, meta, isDecorative, isRail, hasCount, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+type RowIconProps = {
+    icon?: ElementType;
+    size: number;
+    stroke?: number;
+    mt?: string;
+};
+export declare function RowIcon({ icon: Icon, size, stroke, mt }: RowIconProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Highlight({ text, query }: {
+    text: string;
+    query: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RowActions({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RowTip({ text }: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;
+type ModuleRowProps = {
+    module: LauncherModule;
+    keyScreens: LauncherScreen[];
+    isPinned: boolean;
+    onTogglePin?: () => void;
+    pinId: string;
+    labels: LauncherLabels;
+    link: LinkCtx;
+};
+export declare function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }: ModuleRowProps): import("react/jsx-runtime").JSX.Element;
+type RailRowProps = {
+    screen: LauncherScreen;
+    module: LauncherModule;
+    link: LinkCtx;
+    isStrong?: boolean;
+    trailing?: ReactNode;
+    pinId?: string;
+};
+export declare function RailRow({ screen, module, link, isStrong, trailing, pinId, }: RailRowProps): import("react/jsx-runtime").JSX.Element;
+type PinTextButtonProps = {
+    label: string;
+    text: string;
+    onToggle: () => void;
+};
+export declare function PinTextButton({ label, text, onToggle }: PinTextButtonProps): import("react/jsx-runtime").JSX.Element;
+type PinnedTileProps = {
+    screen: LauncherScreen;
+    module: LauncherModule;
+    link: LinkCtx;
+    labels: LauncherLabels;
+    onTogglePin?: () => void;
+};
+export declare function PinnedTile({ screen, module, link, labels, onTogglePin, }: PinnedTileProps): import("react/jsx-runtime").JSX.Element;
+type AppsSectionProps = {
+    apps: readonly AppOption[];
+    hues: readonly string[];
+    currentAppId?: string;
+    heading: string;
+    onSelect: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
+};
+export declare function AppsSection({ apps, hues, currentAppId, heading, onSelect, }: AppsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/launcherParts.js

@@ -0,0 +1,212 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.ITEM_SELECTOR = void 0;
+exports.CountBadge = CountBadge;
+exports.NewTag = NewTag;
+exports.SectionHeader = SectionHeader;
+exports.RowIcon = RowIcon;
+exports.Highlight = Highlight;
+exports.RowActions = RowActions;
+exports.RowTip = RowTip;
+exports.ModuleRow = ModuleRow;
+exports.RailRow = RailRow;
+exports.PinTextButton = PinTextButton;
+exports.PinnedTile = PinnedTile;
+exports.AppsSection = AppsSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const OverflowToolTip_1 = __importDefault(require("../ToolTip/OverflowToolTip"));
+const AppMark_1 = __importDefault(require("../AppSwitcher/AppMark"));
+const match_1 = require("./match");
+const NewTabLink_1 = __importDefault(require("./NewTabLink"));
+const PinToggle_1 = __importDefault(require("./PinToggle"));
+const revealStyles_1 = require("./revealStyles");
+exports.ITEM_SELECTOR = "[data-launcher-item]";
+const isPlainClick = (event) => event.button === 0 &&
+    !event.metaKey &&
+    !event.ctrlKey &&
+    !event.shiftKey &&
+    !event.altKey;
+exports.isPlainClick = isPlainClick;
+const ROW_FOCUS = "data-row-focus";
+const ROW_PR = "--row-pr";
+const REVEALED = "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &";
+const NARROW_ROW = "@container launcher-row (max-width: 219px)";
+exports.WIDE_ROW = "@container launcher-row (min-width: 300px)";
+exports.ROW_CONTAINER = {
+    containerType: "inline-size",
+    containerName: "launcher-row",
+};
+const activeRowStyle = (colors) => {
+    const fill = (0, rowStates_1.listRowBackgrounds)(colors).active;
+    const edge = (0, outlineRung_1.liftToContrast)((0, outlineRung_1.liftToContrast)(colors.primary[500], fill, outlineRung_1.AA_NON_TEXT), colors.surfaceRaised, outlineRung_1.AA_NON_TEXT);
+    return { edge, fill };
+};
+exports.activeRowStyle = activeRowStyle;
+const activeRowSurface = (colors) => {
+    const { edge, fill } = (0, exports.activeRowStyle)(colors);
+    return {
+        backgroundColor: fill,
+        boxShadow: `inset 0 0 0 1px ${edge}`,
+        outline: "2px solid transparent",
+        outlineOffset: "-2px",
+    };
+};
+exports.activeRowSurface = activeRowSurface;
+const titleInset = (base, open, chip = 0) => ({
+    paddingRight: `var(${ROW_PR})`,
+    [ROW_PR]: `${base}px`,
+    [REVEALED]: { [ROW_PR]: `${open}px` },
+    ...(chip
+        ? {
+            [exports.WIDE_ROW]: {
+                "[data-group][data-reveal=true] &": { [ROW_PR]: `${open + chip}px` },
+            },
+        }
+        : {}),
+    [NARROW_ROW]: { [REVEALED]: { [ROW_PR]: `${base}px` } },
+});
+exports.titleInset = titleInset;
+const markRowFocus = (event, isOn) => { var _a; return (_a = event.currentTarget.closest("[data-group]")) === null || _a === void 0 ? void 0 : _a.toggleAttribute(ROW_FOCUS, isOn); };
+const useRowFocus = (isBordered = false) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { edge, fill } = (0, exports.activeRowStyle)(colors);
+    const lit = isBordered
+        ? { backgroundColor: fill, borderColor: edge }
+        : (0, exports.activeRowSurface)(colors);
+    return {
+        sx: { [`&[${ROW_FOCUS}]`]: lit },
+        primary: {
+            onFocus: (event) => markRowFocus(event, event.currentTarget.matches(":focus-visible")),
+            onBlur: (event) => markRowFocus(event, false),
+        },
+    };
+};
+exports.useRowFocus = useRowFocus;
+const stretchedLink = (radius) => ({
+    outline: "none",
+    _after: {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: radius,
+    },
+});
+exports.stretchedLink = stretchedLink;
+const useRowHover = () => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hover = (0, rowStates_1.listRowBackgrounds)(colors).active;
+    return { bg: hover, _hover: { bg: hover }, _focusWithin: { bg: hover } };
+};
+exports.useRowHover = useRowHover;
+function CountBadge({ value, size = "row" }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (value === undefined || value === 0 || value === "")
+        return null;
+    const fill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const isRow = size === "row";
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", flexShrink: 0, minW: isRow ? "20px" : undefined, h: isRow ? "18px" : "17px", px: "6px", mr: isRow ? "2px" : 0, borderRadius: "full", bg: fill.fill, color: fill.color, fontSize: isRow ? "10.5px" : "10px", fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", sx: { fontVariantNumeric: "tabular-nums" }, children: value }));
+}
+function NewTag({ label }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", flexShrink: 0, fontSize: "10px", fontWeight: 600, letterSpacing: "0.02em", color: colors.accentText, opacity: 0.85, children: label }));
+}
+function SectionHeader({ label, meta, isDecorative = false, isRail = false, hasCount = true, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: colors.boxborder[200], "aria-hidden": isDecorative || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "12.5px", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
+}
+function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (!Icon)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: (0, motion_1.transitionFor)(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
+}
+function Highlight({ text, query }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query).map((segment, i) => segment.isMatch ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "mark", bg: "transparent", color: "inherit", fontWeight: 650, textDecoration: "underline", textDecorationColor: colors.primary.opacity[48], textDecorationThickness: "1.5px", textUnderlineOffset: "2px", children: segment.text }, i)) : ((0, jsx_runtime_1.jsx)(react_2.Fragment, { children: segment.text }, i))) }));
+}
+function RowActions({ children }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const revealed = REVEALED.replace(/ &/g, " > &");
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { sx: {
+            [NARROW_ROW]: {
+                [revealed]: {
+                    backgroundColor: (0, exports.activeRowStyle)(colors).fill,
+                    borderRadius: "6px",
+                },
+            },
+        }, position: "absolute", top: "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
+}
+function RowTip({ text }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "6px", fontSize: "11px", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
+}
+function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hover = (0, exports.useRowHover)();
+    const focus = (0, exports.useRowFocus)();
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const base = typeof module.badge === "number" || module.badge ? 24 : 0;
+    const open = base + (onTogglePin ? 46 : 24);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: "34px", pl: "8px", pr: "4px", pt: "7px", pb: "5px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...exports.ROW_CONTAINER }, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: (0, exports.titleInset)(base, open), children: [(0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: module.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? pinId : undefined, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: module.label }) }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, position: "relative", zIndex: 1, w: "fit-content", maxW: "100%", fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
+                                            textDecoration: "underline",
+                                            textUnderlineOffset: "2px",
+                                        }, sx: ring, children: screen.label })] }, screen.id))) }) })) : null] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+}
+function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hover = (0, exports.useRowHover)();
+    const focus = (0, exports.useRowFocus)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
+}
+function PinTextButton({ label, text, onToggle }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": label, flexShrink: 0, h: "22px", px: "7px", display: "inline-flex", alignItems: "center", gap: "4px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, color: colors.text[700], fontSize: "11px", fontWeight: 600, cursor: "pointer", opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: { ...(0, revealStyles_1.revealStyles)(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 11, strokeWidth: 2, "aria-hidden": true }), text] }));
+}
+function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
+    const focus = (0, exports.useRowFocus)(true);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, transition: (0, motion_1.transitionFor)(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("9px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+}
+function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const rows = (0, rowStates_1.listRowBackgrounds)(colors);
+    const rowRing = (0, exports.activeRowSurface)(colors);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
+                    var _a;
+                    const isCurrent = app.id === currentAppId;
+                    const interactive = !isCurrent && !app.locked;
+                    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: interactive ? "a" : "div", ...(interactive
+                                ? {
+                                    href: app.url,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    "data-launcher-item": true,
+                                    onClick: (event) => onSelect(app, event),
+                                }
+                                : {}), "aria-current": isCurrent ? "true" : undefined, title: app.locked
+                                ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`)
+                                : undefined, "data-app-locked": app.locked ? "true" : undefined, "aria-disabled": app.locked ? "true" : undefined, align: "center", gap: 3, minH: "44px", px: 2, py: 1, borderRadius: "8px", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: {
+                                _focusVisible: rowRing,
+                                [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: rowRing,
+                            }, children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: app.name, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }) }), app.locked ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: lucide_react_1.Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));
+                }) })] }));
+}