@ai-matrx/design-system 0.86.335 → 0.86.336

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/confirm-host.tsx","../src/archived-disclosure.tsx","../src/organization-picker.tsx","../src/app-shell/status-dot.tsx","../src/app-shell/app-rail.tsx","../src/resizable.tsx","../src/app-shell/canvas.tsx","../src/app-shell/mode-switch.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * `<ConfirmDialogHost />` — render ONCE, near the root of every provider tree,\n * so the imperative `confirm()` always has a live host to dispatch to.\n *\n * THE SPLIT (census row 19i, 2026-09-07). The confirm system is two halves in\n * two packages, on purpose:\n *\n * `@ai-matrx/kit/confirm-opener` the OPENER — `confirm()`, the host\n * registry, the request queue. Pure TS: zero\n * React, zero markup, zero CSS. Statically\n * importable from a Redux thunk, a util, a\n * sync handler — hundreds of call sites at\n * near-zero bundle cost.\n * `@ai-matrx/design-system` the BODY — this host and `ConfirmDialog`,\n * built on the package AlertDialog so the\n * surface gets the shipped motion layer and\n * the themed scrim instead of the host-plugin\n * classes and the hardcoded black scrim\n * kit could neither style nor animate.\n *\n * Design-system depends on kit, so this direction is the acyclic one; kit\n * re-exports nothing of the body. A consumer mounts `<ConfirmDialogHost />`\n * from here and calls `confirm()` from there — the two find each other through\n * the opener's `Symbol.for(\"ai-matrx.kit.confirm-opener-state\")` globalThis\n * slot, which is deliberately NOT a module-level variable: with unsplit dual\n * ESM/CJS bundles each loader graph instantiates its own module, and a module\n * local would silently split host registration from callers. Never \"clean that\n * up\".\n *\n * Pre-mount `confirm()` calls queue inside the opener and resolve as soon as\n * this host registers — a destructive action triggered in the first ~50ms after\n * load still gets a real confirmation, never a silent default-yes/no.\n *\n * NO FRAMEWORK IMPORT. The matrx-frontend original split shell + impl and\n * loaded the impl through `next/dynamic({ ssr: false })` to keep radix out of\n * route entry chunks. A framework-agnostic package cannot do that, so this is\n * ONE directly-imported component; hosts that want the code-splitting lazy-load\n * it themselves:\n * `dynamic(() => import(\"@ai-matrx/design-system\").then(m => m.ConfirmDialogHost), { ssr: false })`\n * The \"render `<ConfirmDialogHost/>` once\" contract is unchanged either way.\n *\n * Imperative model: calls to `confirm(...)` push a request into the opener's\n * queue; `useOpenerHost` (`@ai-matrx/kit/opener-react`) drains it one at a time\n * and this component renders a `<ConfirmDialog>` for the active request. The promise resolves `true` on Confirm, `false` on\n * cancel/dismiss. The dialog closes immediately on click — callers that need an\n * in-dialog busy spinner during async work use the inline `<ConfirmDialog>`\n * with the `busy` prop instead.\n */\n\nimport { confirmOpener } from \"@ai-matrx/kit/confirm-opener\";\nimport { useOpenerHost } from \"@ai-matrx/kit/opener-react\";\nimport * as React from \"react\";\n\nimport { ConfirmDialog } from \"./confirm-dialog\";\n\nexport function ConfirmDialogHost() {\n // The registration, the ref-backed queue, the drain effect and the\n // settle-once callback are ALL `useOpenerHost` (kit 0.10.0). They used to be\n // written out here — and identically in three matrx-frontend dialog hosts,\n // which is exactly the duplication the opener primitive ends. What is left\n // below is the only part that was ever this package's: the dialog body.\n // `shown`, not `request`: the dialog animates out AFTER it is answered, and\n // `request` is already null by then — the body used to fade out empty\n // (reviewer, 2026-10-02). `shown` keeps the answered words until the next\n // question replaces them.\n const { shown, open, settle } = useOpenerHost(confirmOpener);\n\n // `ready` (kit 0.22.0): Confirm is held until the question can say what it\n // will do. Settling either way releases it — a failed read never traps the\n // person. Keyed by the request object, so the next question starts held.\n const [readyFor, setReadyFor] = React.useState<object | null>(null);\n const ready = shown?.ready;\n React.useEffect(() => {\n if (!shown || !ready) return undefined;\n let live = true;\n const release = () => {\n if (live) setReadyFor(shown);\n };\n Promise.resolve(ready).then(release, release);\n return () => {\n live = false;\n };\n }, [shown, ready]);\n const held = !!ready && readyFor !== shown;\n\n const handleConfirm = React.useCallback(() => settle(true), [settle]);\n const handleOpenChange = React.useCallback(\n (next: boolean) => {\n // Any dismiss (Esc / backdrop / Cancel) is a \"no\" — never a silent yes.\n if (!next) settle(false);\n },\n [settle],\n );\n\n return (\n <ConfirmDialog\n open={open}\n onOpenChange={handleOpenChange}\n title={shown?.title ?? \"\"}\n description={shown?.description}\n confirmLabel={shown?.confirmLabel}\n cancelLabel={shown?.cancelLabel}\n variant={shown?.variant}\n confirmHeld={held}\n onConfirm={handleConfirm}\n />\n );\n}\n","\"use client\";\n\n/**\n * ArchivedDisclosure — THE ARCHIVED-ITEMS LAW, card-list half.\n * (`common-docs/policies/archived-items.md`, Arman 2026-09-09.)\n *\n * Every list over an entity that can be archived carries an archive control,\n * it defaults to HIDING archived rows, and revealing them is one or two\n * clicks — on the surface itself. There are exactly TWO implementations of\n * that control in the platform, and both live in THIS package:\n *\n * • `ArchiveFilter` — the tri-state segmented control (Active only /\n * Archived only / Active + archived) for table and browse surfaces whose\n * reader takes an archive parameter. Prefer it whenever the surface can\n * express the request server-side.\n * • `ArchivedDisclosure` — THIS component: a one-click \"Archived (N)\"\n * disclosure, closed by default, revealing the archived rows in place\n * underneath. For card lists, panels and pickers that are not table\n * shaped.\n *\n * Never invent a third. The disclosure was proven first in matrx-frontend's\n * Transcript Studio, lived as `components/official/ArchivedDisclosure` there,\n * and moved here (0.14.0) verbatim so every client inherits the same control\n * instead of re-growing it per app.\n *\n * Both controls share one vocabulary: `ARCHIVE_LABEL` is the single noun, and\n * `archiveFilterFromDisclosure(open)` says a disclosure's state in the\n * tri-state words for a host whose toggle IS a server request.\n *\n * Two shapes, one primitive:\n *\n * <ArchivedDisclosure count={n} open={open} onOpenChange={setOpen}>\n * …archived rows…\n * </ArchivedDisclosure>\n *\n * renders the button AND the revealed block. Omit `children` when the caller\n * merges the archived rows into an existing table/grid itself — the button is\n * then the whole control.\n *\n * The count is ALWAYS the true number of archived rows the surface holds. A\n * screen never lies: when there is nothing archived the control renders\n * nothing at all rather than an empty promise. A surface whose archive view is\n * a SERVER request (the rows below the button are the archived page itself,\n * not children of it) passes `keepWhileOpen` so the revealed view never loses\n * its way back.\n *\n * `countLabel` exists for the one case a bare integer cannot tell the truth: a\n * server-side count that hit its cap (render `\"12+\"`), or a count that has not\n * landed yet (pass `null` and no parenthetical is printed at all).\n */\n\nimport * as React from \"react\";\n\nimport { ARCHIVE_LABEL } from \"./archive-filter\";\nimport { cn } from \"./cn\";\nimport { ArchiveIcon, ChevronDownIcon, ChevronRightIcon } from \"./icons\";\n\n/** What every archive on this platform promises, said once (the noun voice opens with it). */\nexport const ARCHIVED_NEVER_DESTROYED =\n \"Archiving never destroys anything. What you put away waits here until somebody brings it back.\";\n\nexport interface ArchivedDisclosureProps {\n /**\n * True number of archived rows this surface holds. 0 renders nothing. Absent = not read yet:\n * the control still draws (a count nobody has read is not a reason to hide the way in) and no\n * parenthetical is printed — a \"(0)\" the screen guessed would be a lie.\n */\n count?: number | undefined;\n /** Whether archived rows are revealed (controlled). Omit to let the control hold it itself. */\n open?: boolean | undefined;\n /** Uncontrolled only: open on first render (the address asked for the archive). */\n defaultOpen?: boolean | undefined;\n onOpenChange?: ((open: boolean) => void) | undefined;\n /**\n * The archived rows. Omit when the host merges them into its own list and\n * only needs the toggle.\n */\n children?: React.ReactNode;\n /** Noun for the rows, so the button reads in the surface's own words. */\n label?: string;\n /**\n * THE NOUN VOICE: the archived things in the plural (\"portals\", \"pick lists\"). The button then\n * says \"Show archived portals (3)\" / \"Hide archived portals\", and the revealed block opens with\n * {@link ARCHIVED_NEVER_DESTROYED} (override with `note`). Takes precedence over `label`.\n */\n noun?: string | undefined;\n /** A line at the top of the revealed block. `null` = none. Default: the noun voice's promise, else none. */\n note?: React.ReactNode;\n /**\n * Override the parenthetical. A string replaces the number (`\"12+\"` for a\n * capped server count); `null` prints no parenthetical at all, for a count\n * that has not arrived yet. Omit it and the honest `count` is printed.\n */\n countLabel?: string | null;\n /**\n * Keep the control rendered while `open` even at `count === 0`. For surfaces\n * where opening SWITCHES the list to the archive (a server-side filter)\n * rather than nesting rows inside this component: without it the way back\n * would vanish the moment the count read zero or had not landed.\n */\n keepWhileOpen?: boolean;\n /**\n * Draw the way in even when the count reads 0 — the revealed block then says the archive is\n * empty in its own words (a rail whose archive is a sentence, never a blank). Default: on in\n * the noun voice, off otherwise. A 0 is never printed as \"(0)\" in the noun voice.\n */\n showWhenEmpty?: boolean;\n className?: string | undefined;\n contentClassName?: string;\n}\n\nexport function ArchivedDisclosure({\n count,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n children,\n label = ARCHIVE_LABEL,\n noun,\n note,\n countLabel,\n keepWhileOpen = false,\n showWhenEmpty,\n className,\n contentClassName,\n}: ArchivedDisclosureProps) {\n const [ownOpen, setOwnOpen] = React.useState(defaultOpen);\n const open = openProp ?? ownOpen;\n // Nothing archived: an empty promise, so render nothing — unless this\n // surface's open state IS the archive view, whose way back must never vanish.\n const drawEmpty = showWhenEmpty ?? noun !== undefined;\n if (count !== undefined && count <= 0 && !drawEmpty && !(open && keepWhileOpen)) return null;\n const toggle = () => {\n const next = !open;\n if (openProp === undefined) setOwnOpen(next);\n onOpenChange?.(next);\n };\n const parenthetical =\n countLabel !== undefined ? countLabel : count === undefined || (noun !== undefined && count <= 0) ? null : String(count);\n const words = noun ? `${open ? \"Hide\" : \"Show\"} archived ${noun}` : label;\n const shownNote = note !== undefined ? note : noun ? ARCHIVED_NEVER_DESTROYED : null;\n return (\n <div className={cn(\"min-w-0\", className)} data-slot=\"archived-disclosure\">\n <button\n type=\"button\"\n onClick={toggle}\n aria-expanded={open}\n data-slot=\"archived-disclosure-toggle\"\n className=\"flex w-full items-center gap-2 rounded-lg px-2 py-2 text-sm text-muted-foreground hover:bg-accent active:bg-accent\"\n >\n {open ? (\n <ChevronDownIcon className=\"h-4 w-4 shrink-0\" />\n ) : (\n <ChevronRightIcon className=\"h-4 w-4 shrink-0\" />\n )}\n <ArchiveIcon className=\"h-4 w-4 shrink-0\" />\n <span className=\"truncate\">\n {parenthetical === null ? words : `${words} (${parenthetical})`}\n </span>\n </button>\n {open && (children || shownNote) ? (\n <div className={cn(\"mt-1\", contentClassName)}>\n {shownNote ? <p className=\"px-2 pb-2 text-xs text-muted-foreground\">{shownNote}</p> : null}\n {children}\n </div>\n ) : null}\n </div>\n );\n}\n\nexport default ArchivedDisclosure;\n","\"use client\";\n\n/**\n * OrganizationPicker — THE ONE \"which organization am I acting in\" control,\n * identical on every Matrx surface (the main app's user menu and header nudge,\n * Workflow Studio's sidebar, the admin dashboard's settings).\n *\n * Ported from matrx-frontend `features/organizations/components/\n * OrganizationPickerPanel.tsx` + `UserMenuOrgSection.tsx` + `DefaultOrgSwitch.tsx`\n * (2026-09-08), which until then were the ONLY surfaces with the full picker;\n * Studio and the dashboard each had a bare `<Select>` with different copy,\n * different placement and no default control. Three UIs for one fact.\n *\n * THE ACTIVE ROW IS THE ANSWER (owner, 2026-10-01). The active organization is\n * the highlighted row — tinted, bold, ringed and checked — and nothing else:\n * the \"Working in …\" sentence above the list is gone (\"It should be\n * highlighted and clear\"), and so is the \"Keep it at the top\" switch.\n *\n * FAVORITES (owner, 2026-10-01: \"add a star you can click to favorite any of\n * them\"). Every row carries its own star; a person favorites as many as they\n * like, and favorites are drawn first. The star never selects the row — it is\n * a sibling button, not part of the row — and it picks no organization for\n * anyone: which organization you are working in is this device's own\n * remembered choice (the host's resolver), never a star.\n *\n * 🚨 A HUNDRED ROWS IS NOT A LIST (VERIFIER-8 MEDIUM-3, 2026-09-21).\n * The first screen of the data product offered the admin account's 116\n * organizations nine at a time, with no search, most of them lane fixtures.\n * Three things answer that, and all three are here rather than in one host:\n * • SEARCH over name and abbreviation, once the list passes eight rows.\n * • TEST ORGANIZATIONS HIDDEN by default behind the platform's one\n * archive-style disclosure (`ArchivedDisclosure`), with their count always\n * on screen. Hidden, never dropped.\n * • THE PERSON'S OWN organizations drawn first, under the starred one.\n * The host classifies (`isTestFixture`, `isOwn`); this component decides\n * nothing about a name it is given.\n *\n * Seam inversions from the origin: lucide `Check`/`Star` become package\n * SVGs (C19); the host `Switch` becomes this package's; `cn` is local.\n */\n\nimport * as React from \"react\";\n\nimport { ArchivedDisclosure } from \"./archived-disclosure\";\nimport { cn } from \"./cn\";\nimport { ErrorBox } from \"./error-box\";\nimport { CheckIcon, StarIcon } from \"./icons\";\nimport { Input } from \"./input\";\nimport { Skeleton } from \"./skeleton\";\nimport { Button } from \"./controls/controls\";\nimport { MENU_LOOK_CLASS, MenuLookRowBody } from \"./menu-look\";\n\n/**\n * Above this many rows the list stops being something a person reads and\n * starts being something they hunt through, so the search box appears. Below\n * it a search box is one more control over a list the eye already took in.\n */\nconst SEARCH_APPEARS_ABOVE = 8;\n\n/**\n * Case-insensitive substring over the two things a person actually types. Exported once: every\n * organization picker (this one, the desktop sheet) searches the same way.\n */\nexport function matchesOrganizationQuery(org: Pick<OrganizationPickerOrganization, \"name\" | \"abbreviation\">, query: string): boolean {\n const q = query.trim().toLowerCase();\n if (!q) return true;\n if (org.name.toLowerCase().includes(q)) return true;\n const abbreviation = org.abbreviation?.trim().toLowerCase();\n return !!abbreviation && abbreviation.includes(q);\n}\n\nexport interface OrganizationPickerOrganization {\n id: string;\n name: string;\n /** Database-validated 2–3 uppercase letters. Optional — not every report carries it. */\n abbreviation?: string | null;\n /**\n * THE ADDRESS, for when the NAME is not enough — its slug, or whatever else the\n * host has that tells two of them apart.\n *\n * 🚨 WHY (crew D2, 2026-09-21). Two organizations called \"Kessler Lab for Applied\n * Microbial Ecology\" and two called \"Wraithmoor Regional Museum of Art & Craft\" sat\n * in one list, identical down to the abbreviation tile, and a person had no way of\n * knowing which one they were about to work in. The list drew the name and nothing\n * else, so there was nothing for it to draw.\n *\n * It is shown ONLY on the rows whose name another row in the list also carries —\n * the way Slack shows a workspace's URL and Google shows the account's email, and\n * only where it settles the question. A list of distinct names stays exactly as it\n * was, because a second line under every row is noise a person learns to skip.\n */\n distinguisher?: string | null;\n /**\n * This organization is a TEST FIXTURE — a lane's scratch organization, not a\n * business anybody works in. Classified in `iam.organizations.settings`\n * (`test_fixture`), never guessed from its name.\n *\n * 🚨 WHY (VERIFIER-8 MEDIUM-3, 2026-09-21). The admin account belongs to 116\n * organizations and 59 of them are fixtures. The first screen of the data\n * product offered all of them, nine at a time, with no search — so the two\n * or three a person actually works in were buried under lane debris. The\n * archived-items law already answers this shape everywhere else in the\n * platform: hide by default, ONE disclosure to reveal, and the count of what\n * is hidden is always on screen. It is hidden, never dropped: a fixture the\n * person genuinely wants is one click away.\n */\n isTestFixture?: boolean;\n /**\n * The signed-in person created this organization. Drawn before the rest,\n * under the starred one — the same reason Slack puts your own workspace\n * first: in a list of a hundred, yours must not be something you search for.\n */\n isOwn?: boolean;\n /**\n * A short trailing label for the row — what a click does or the row's state\n * (\"Open\", \"Finish setup\", \"Turn on HR\"). Muted text, right-aligned; the row\n * stays one button. Omitted, the row is exactly as before.\n */\n detail?: string | null;\n /**\n * Fold this row behind the host's second disclosure (`foldedLabel`) — for rows\n * the person rarely came for (organizations without HR). Hidden, counted,\n * one click away; a search that matches only folded rows opens the fold.\n */\n folded?: boolean;\n}\n\n/**\n * THE LIST IS A PAGE (bounded organizations, 2026-10-16). A person in hundreds of organizations\n * (an agency with a client organization each) is never sent all of them: the host passes the\n * first page and this. The box then always shows; every keystroke goes to `onQueryChange` and the\n * host answers with the matching rows from its FULL list (server-side), which are drawn as given —\n * no second local filter. \"Show more\" appears while `hasMore`.\n */\nexport interface OrganizationPickerMore {\n onQueryChange: (query: string) => void;\n /** More rows exist past these, for the current query. */\n hasMore: boolean;\n onLoadMore: () => void;\n loadingMore?: boolean;\n /** How many the person has in all, for the current query. */\n total?: number;\n}\n\nexport interface OrganizationPickerProps {\n organizations: readonly OrganizationPickerOrganization[];\n /** The list is the first page of a longer one; omit when it is the whole list. */\n more?: OrganizationPickerMore;\n /** The organization the person is acting in right now; null = nothing chosen. */\n activeOrganizationId: string | null;\n /** The person's favorite organizations, drawn first and starred. */\n favoriteOrganizationIds?: readonly string[];\n loading?: boolean;\n /** Memberships could not be read. The panel says so instead of showing an empty list. */\n loadFailed?: boolean;\n /** Choose the active organization. Hosts persist + refetch here. */\n onSelect: (organization: OrganizationPickerOrganization) => void;\n /**\n * Favorite (true) or unfavorite (false) one organization. Omit to draw no\n * star buttons — a host with no write path must not show a control that\n * does nothing (a favorite is still marked, read-only).\n */\n onToggleFavorite?: ((organizationId: string, favorite: boolean) => void) | undefined;\n /** Hide the \"Organization\" eyebrow when the host already labels the section. */\n hideHeading?: boolean;\n /**\n * `\"menu\"`: the rows are the one menu look's rows (`cm-item`: a 16px mark in the icon slot, the name,\n * the active one marked by a check at its END) — the picker inside a menu-look panel (the account\n * rail's organization menu). Default: the picker's own rows.\n */\n look?: \"default\" | \"menu\";\n /** The noun on the disclosure that holds `folded` rows. Default \"More\". */\n foldedLabel?: string;\n className?: string;\n}\n\n/**\n * An organization's color — one of a fixed set of hues, chosen from its id so\n * the same organization wears the same color on every surface and every\n * device. Color tells organizations apart at a glance; the letters still say\n * which one (owner, 2026-10-01: \"a bit of color for the logos\").\n */\nconst ORGANIZATION_HUES = [217, 262, 330, 12, 32, 152, 189, 290] as const;\nexport function organizationColor(seed: string): { background: string; color: string } {\n let hash = 0;\n for (let index = 0; index < seed.length; index += 1) {\n hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;\n }\n const hue = ORGANIZATION_HUES[hash % ORGANIZATION_HUES.length];\n return { background: `hsl(${hue} 62% 46%)`, color: \"#fff\" };\n}\n\n/**\n * THE organization mark — its own logo when it has one, otherwise its 2–3\n * letter abbreviation on its color tile (the first letter of the name when the\n * report has no abbreviation, so a tile is never empty). Three letters get a\n * smaller face than two so they fit the tile. Every Matrx surface draws this.\n */\nexport function OrganizationMark({\n id,\n name,\n abbreviation,\n logoUrl,\n size = 20,\n className,\n}: {\n /** Seeds the color; the name is used when absent. */\n id?: string | null | undefined;\n name: string;\n abbreviation?: string | null | undefined;\n logoUrl?: string | null | undefined;\n size?: number;\n className?: string | undefined;\n}) {\n const box = { width: size, height: size };\n if (logoUrl) {\n return (\n <span\n style={box}\n className={cn(\"relative inline-flex shrink-0 overflow-hidden rounded-md bg-muted\", className)}\n data-slot=\"organization-mark\"\n >\n <img src={logoUrl} alt={name} className=\"h-full w-full object-cover\" />\n </span>\n );\n }\n const letters = ((abbreviation && abbreviation.trim()) || name.trim().slice(0, 1) || \"?\")\n .slice(0, 3)\n .toUpperCase();\n const fontSize = Math.round(size * (letters.length >= 3 ? 0.36 : 0.44));\n return (\n <span\n style={{ ...box, ...organizationColor(id || name), fontSize }}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center rounded-md font-bold leading-none tracking-tight\",\n className,\n )}\n aria-label={`Organization abbreviation ${letters}`}\n title={letters}\n data-slot=\"organization-mark\"\n >\n {letters}\n </span>\n );\n}\n\n/**\n * THE ORDER every organization list uses: the ACTIVE organization (where the person is working, and\n * where new things go by default), then their favorites, then their OWN organizations, then everything\n * else. Inside each band the host's order is kept exactly as given — this reorders bands, it never sorts\n * names. Exported once for every picker (this one, the desktop sheet).\n */\nexport function orderOrganizationsForPicker<T extends { id: string; isOwn?: boolean | undefined }>(\n organizations: readonly T[],\n favoriteOrganizationIds: readonly string[],\n activeOrganizationId: string | null = null,\n): T[] {\n const favorites = new Set(favoriteOrganizationIds);\n const rank = (org: T) => (org.id === activeOrganizationId ? -1 : favorites.has(org.id) ? 0 : org.isOwn ? 1 : 2);\n return [...organizations].sort((a, b) => rank(a) - rank(b));\n}\n\nexport function OrganizationPicker({\n organizations,\n activeOrganizationId,\n favoriteOrganizationIds = [],\n loading = false,\n loadFailed = false,\n onSelect,\n onToggleFavorite,\n hideHeading = false,\n look = \"default\",\n foldedLabel = \"More\",\n className,\n more,\n}: OrganizationPickerProps) {\n const [query, setQuery] = React.useState(\"\");\n const [showFixtures, setShowFixtures] = React.useState(false);\n const [showFolded, setShowFolded] = React.useState(false);\n\n const favorites = new Set(favoriteOrganizationIds);\n const isFavorite = (id: string) => favorites.has(id);\n /**\n * THE ORDER, and it is the whole point of this control on an account with a\n * hundred memberships: the person's favorites, then their OWN organizations,\n * then everything else. Inside each band the host's order is kept exactly as\n * given — this reorders bands, it never sorts names.\n */\n const ordered = orderOrganizationsForPicker(organizations, favoriteOrganizationIds, activeOrganizationId);\n\n // A paged host already answered the query from its full list; filtering again would drop its\n // slug matches.\n const matching = more ? ordered : ordered.filter((org) => matchesOrganizationQuery(org, query));\n // The ACTIVE organization is always in the main list, first: a test organization the person is working in\n // is never behind the \"Test organizations\" disclosure, and a folded one is never behind \"More\".\n const isActive = (org: OrganizationPickerOrganization) => org.id === activeOrganizationId;\n const listed = matching.filter((org) => isActive(org) || (!org.isTestFixture && !org.folded));\n const folded = matching.filter((org) => !isActive(org) && !org.isTestFixture && org.folded);\n const fixtures = matching.filter((org) => !isActive(org) && org.isTestFixture);\n // The fold opens by itself when it is all there is, or when a search found\n // something inside it — a match is never hidden behind a closed disclosure.\n const foldOpen =\n showFolded || (folded.length > 0 && (listed.length === 0 || query.trim().length > 0));\n // Same rule for the test organizations: when they are ALL the person has\n // (an account whose only workspace is a test fixture) the disclosure opens by\n // itself — a collapsed group holding the only choice reads as \"no workspace\"\n // (feedback 6717c61d: \"An organization is needed\" with the one workspace\n // hidden under \"Test organizations (n)\").\n const fixturesOpen =\n showFixtures ||\n (fixtures.length > 0 &&\n listed.length === 0 &&\n folded.length === 0 &&\n query.trim().length === 0);\n const searchable = Boolean(more) || organizations.length > SEARCH_APPEARS_ABOVE;\n /**\n * Which display names appear more than once in THIS list — the only rows where the\n * second line earns its space. Computed from the list itself, so the answer is right\n * for the person looking at it rather than for organizations they cannot see.\n */\n const sharesItsName = (org: OrganizationPickerOrganization) =>\n organizations.filter((other) => other.name.trim() === org.name.trim()).length > 1;\n\n const renderRow = (org: OrganizationPickerOrganization) => {\n const isActive = org.id === activeOrganizationId;\n const favorite = isFavorite(org.id);\n return (\n <li key={org.id} role=\"none\" className=\"group/org relative flex items-center\">\n {look === \"menu\" ? (\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={isActive}\n aria-pressed={isActive}\n onClick={(event) => {\n event.stopPropagation();\n onSelect(org);\n }}\n className={MENU_LOOK_CLASS.item}\n data-active={isActive ? \"\" : undefined}\n data-current={isActive ? \"\" : undefined}\n data-end-button={onToggleFavorite || favorite ? \"\" : undefined}\n >\n <MenuLookRowBody\n icon={<OrganizationMark id={org.id} name={org.name} abbreviation={org.abbreviation} size={16} />}\n label={org.name}\n description={sharesItsName(org) && org.distinguisher ? org.distinguisher : undefined}\n trail={org.detail ?? undefined}\n current={isActive}\n />\n </button>\n ) : (\n <button\n type=\"button\"\n role=\"option\"\n aria-selected={isActive}\n aria-pressed={isActive}\n onClick={(event) => {\n // Inside a host menu the click must not also close/route the menu.\n event.stopPropagation();\n onSelect(org);\n }}\n className={cn(\n \"flex w-full min-w-0 items-center gap-2.5 rounded-md py-1.5 pl-2 pr-8 text-left text-sm text-foreground transition-colors hover:bg-accent\",\n isActive && \"bg-primary/10 font-semibold text-primary-ink ring-1 ring-inset ring-primary/30 hover:bg-primary/15\",\n )}\n data-active={isActive ? \"\" : undefined}\n >\n <OrganizationMark id={org.id} name={org.name} abbreviation={org.abbreviation} size={20} />\n <span className=\"flex min-w-0 flex-1 flex-col\">\n <span className=\"truncate\">{org.name}</span>\n {/* Only where the name does not settle it — see `distinguisher`. */}\n {sharesItsName(org) && org.distinguisher ? (\n <span className=\"truncate text-[10px] font-normal text-muted-foreground\">\n {org.distinguisher}\n </span>\n ) : null}\n </span>\n {org.detail ? (\n <span\n className=\"shrink-0 text-xs font-normal text-muted-foreground\"\n data-slot=\"organization-picker-detail\"\n >\n {org.detail}\n </span>\n ) : null}\n {isActive && (\n <CheckIcon className=\"h-[15px] w-[15px] shrink-0 text-primary-ink\" />\n )}\n </button>\n )}\n {/* THE STAR — its own button beside the row, never part of it: a star\n favorites, it never selects. Shown on hover/focus, always shown\n while favorited. Read-only (a mark) when the host has no write. */}\n {onToggleFavorite ? (\n <button\n type=\"button\"\n aria-pressed={favorite}\n aria-label={favorite ? `Remove ${org.name} from favorites` : `Add ${org.name} to favorites`}\n title={favorite ? \"Remove from favorites\" : \"Add to favorites\"}\n onClick={(event) => {\n event.stopPropagation();\n onToggleFavorite(org.id, !favorite);\n }}\n className={cn(\n \"absolute right-1 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100\",\n favorite ? \"opacity-100\" : \"opacity-0 group-hover/org:opacity-100\",\n )}\n data-slot=\"organization-picker-favorite\"\n >\n <StarIcon\n className={cn(\"h-[14px] w-[14px]\", favorite && \"fill-warning text-warning-ink\")}\n />\n </button>\n ) : favorite ? (\n <StarIcon\n className=\"absolute right-2 h-[13px] w-[13px] fill-warning text-warning-ink\"\n aria-hidden={false}\n aria-label=\"Favorite\"\n role=\"img\"\n />\n ) : null}\n </li>\n );\n };\n\n return (\n <div className={cn(\"flex flex-col\", className)} data-slot=\"organization-picker\">\n {!hideHeading && (\n <p className=\"px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n Organization\n </p>\n )}\n\n {loading ? (\n <div className=\"space-y-1 px-1 py-1\" aria-busy=\"true\" aria-label=\"Loading organizations\">\n <Skeleton className=\"h-7 rounded-md\" />\n <Skeleton className=\"h-7 rounded-md\" />\n </div>\n ) : loadFailed ? (\n <ErrorBox\n className=\"px-2 py-2 text-xs text-destructive-ink\"\n operation=\"Load your organizations\"\n origin=\"design-system/OrganizationPicker\"\n >\n Could not load organizations.\n </ErrorBox>\n ) : organizations.length === 0 && !(more && query.trim()) ? (\n <p className=\"px-2 py-2 text-xs text-muted-foreground\">\n Your account is not a member of any organization. Ask an administrator to add you to one.\n </p>\n ) : (\n <>\n {/* SEARCH. A list a person scrolls nine rows at a time is not a\n control, it is a filing cabinet (VERIFIER-8 MEDIUM-3). Name and\n abbreviation, case-insensitive substring; an empty box is exactly\n the list that was there before. */}\n {searchable && (\n <div className=\"px-2 pb-1.5\">\n <Input\n type=\"search\"\n value={query}\n onChange={(event) => {\n setQuery(event.target.value);\n more?.onQueryChange(event.target.value);\n }}\n onClick={(event) => event.stopPropagation()}\n onKeyDown={(event) => event.stopPropagation()}\n placeholder=\"Search organizations\"\n aria-label=\"Search organizations by name or abbreviation\"\n className=\"h-8 text-sm\"\n data-slot=\"organization-picker-search\"\n />\n </div>\n )}\n\n {listed.length === 0 && folded.length === 0 && fixtures.length === 0 ? (\n <p\n className=\"px-2 py-2 text-xs text-muted-foreground\"\n data-slot=\"organization-picker-no-match\"\n >\n No organization matches “{query.trim()}”.\n </p>\n ) : listed.length === 0 && folded.length > 0 ? null : listed.length === 0 ? (\n /* THE ARCHIVED-ITEMS LAW, honesty half: \"nothing\" may only be said\n when both halves are empty. Here the other half is one line down.\n AND IT SAYS WHAT IS TRUE, NOT WHAT IS EMPTY. The earlier sentence\n read \"Nothing matches “X” outside the test organizations below\" —\n which opens by negating the very rows sitting one click away, and\n `fixtures` IS query-filtered, so those rows ARE matches for X. A\n person reading \"nothing matches\" retypes their search instead of\n clicking. So: count the matches, say where they are, and carry\n the click that reveals them — the same shape as the honest\n empty-filter twin one line down. (TAILS-3) */\n <p\n className=\"px-2 py-2 text-xs text-muted-foreground\"\n data-slot=\"organization-picker-only-fixtures\"\n >\n {query.trim() ? (\n <>\n {fixtures.length === 1\n ? `1 match for “${query.trim()}” is in your test organizations`\n : `All ${fixtures.length} matches for “${query.trim()}” are in your test organizations`}\n {showFixtures ? (\n \", listed below.\"\n ) : (\n <>\n {\" — \"}\n <button\n type=\"button\"\n className=\"underline underline-offset-2 hover:text-foreground\"\n data-slot=\"organization-picker-show-fixtures\"\n onClick={(event) => {\n event.stopPropagation();\n setShowFixtures(true);\n }}\n >\n show them\n </button>\n .\n </>\n )}\n </>\n ) : (\n `Every organization you belong to is a test organization — all ${fixtures.length} are below.`\n )}\n </p>\n ) : (\n <ul className=\"max-h-72 overflow-y-auto\" role=\"listbox\" aria-label=\"Organizations\">\n {listed.map(renderRow)}\n {more?.hasMore && (\n <li role=\"none\">\n <Button\n type=\"button\"\n variant=\"quiet\"\n className=\"w-full justify-start\"\n disabled={more.loadingMore}\n onClick={(event) => {\n event.stopPropagation();\n more.onLoadMore();\n }}\n data-slot=\"organization-picker-more\"\n >\n {more.loadingMore\n ? \"Loading more…\"\n : more.total !== undefined\n ? `Show more (${organizations.length} of ${more.total})`\n : \"Show more\"}\n </Button>\n </li>\n )}\n </ul>\n )}\n\n {/* THE HOST'S FOLD — rows it marked `folded`, counted, one click away. */}\n <ArchivedDisclosure\n count={folded.length}\n open={foldOpen}\n onOpenChange={setShowFolded}\n label={foldedLabel}\n className=\"mt-0.5\"\n >\n <ul className=\"max-h-72 overflow-y-auto\" role=\"listbox\" aria-label={foldedLabel}>\n {folded.map(renderRow)}\n </ul>\n </ArchivedDisclosure>\n\n {/* THE TEST ORGANIZATIONS, behind the platform's ONE archive-style\n disclosure (`ArchivedDisclosure`, the archived-items law). Hidden\n by default, counted out loud, one click away — never silently\n dropped. */}\n <ArchivedDisclosure\n count={fixtures.length}\n open={fixturesOpen}\n onOpenChange={setShowFixtures}\n label=\"Test organizations\"\n className=\"mt-0.5\"\n >\n <ul\n className=\"max-h-72 overflow-y-auto\"\n role=\"listbox\"\n aria-label=\"Test organizations\"\n >\n {fixtures.map(renderRow)}\n </ul>\n </ArchivedDisclosure>\n\n </>\n )}\n </div>\n );\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\n/**\n * A 6 px status mark. Fills are SIGNAL colors — bright, saturated, the same family the leading\n * agent tools use (blue working, amber waiting, green done, red failed) — never the text-contrast\n * `--warning`/`--success` tokens, which a host darkens for readable text and which read as brown\n * and olive at dot size. A host re-tints any tone with `--dot-<tone>` (HSL triplet).\n * `ring` is the hollow variant for icon corners, where a filled dot reads as \"unread\".\n */\nexport type StatusTone = \"info\" | \"warning\" | \"danger\" | \"success\" | \"neutral\";\n\nconst FILL: Record<StatusTone, string> = {\n info: \"bg-[hsl(var(--dot-info,217_91%_60%))]\",\n warning: \"bg-[hsl(var(--dot-warning,38_92%_50%))]\",\n danger: \"bg-[hsl(var(--dot-danger,0_84%_60%))]\",\n success: \"bg-[hsl(var(--dot-success,142_71%_45%))]\",\n neutral: \"bg-muted-foreground/50\",\n};\n\nconst RING: Record<StatusTone, string> = {\n info: \"border-[hsl(var(--dot-info,217_91%_60%))]\",\n warning: \"border-[hsl(var(--dot-warning,38_92%_50%))]\",\n danger: \"border-[hsl(var(--dot-danger,0_84%_60%))]\",\n success: \"border-[hsl(var(--dot-success,142_71%_45%))]\",\n neutral: \"border-muted-foreground/50\",\n};\n\nexport interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {\n tone: StatusTone;\n variant?: \"solid\" | \"ring\";\n /** Accessible name; without it the dot is decorative. */\n label?: string;\n}\n\nexport function StatusDot({ tone, variant = \"solid\", label, className, ...props }: StatusDotProps) {\n return (\n <span\n data-slot=\"status-dot\"\n data-tone={tone}\n data-variant={variant}\n {...(label ? { role: \"img\", \"aria-label\": label } : { \"aria-hidden\": true })}\n className={cn(\n \"inline-block shrink-0 rounded-full\",\n variant === \"solid\" ? cn(\"size-1.5\", FILL[tone]) : cn(\"size-2 border-[1.5px] bg-transparent\", RING[tone]),\n className,\n )}\n {...props}\n />\n );\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip\";\nimport { StatusDot, type StatusTone } from \"./status-dot\";\n\n/**\n * The app rail: a narrow, never-changing strip of area icons on the far left, with the\n * person at the bottom (Codex, VS Code, Slack, Teams). It answers \"where am I\"; the panel\n * beside it answers \"what can I do here\". Width is the `--app-rail-width` knob (48 px).\n */\n\nexport function AppRail({ className, style, onKeyDown, ...props }: React.HTMLAttributes<HTMLElement>) {\n return (\n <nav\n data-slot=\"app-rail\"\n aria-label=\"Areas\"\n // Up/Down move between the rail's items, Home/End jump to the ends (a source list's keys).\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || ![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(event.key)) return;\n const items = Array.from(event.currentTarget.querySelectorAll<HTMLElement>(\"[data-slot=app-rail-item]:not(:disabled), [data-slot=app-rail-avatar]\"));\n const at = items.indexOf(event.target as HTMLElement);\n if (at === -1) return;\n const next = event.key === \"Home\" ? 0 : event.key === \"End\" ? items.length - 1 : at + (event.key === \"ArrowDown\" ? 1 : -1);\n const target = items[Math.max(0, Math.min(items.length - 1, next))];\n if (target) {\n event.preventDefault();\n target.focus();\n }\n }}\n className={cn(\"flex h-full w-(--app-rail-width) shrink-0 flex-col items-center gap-1 py-2\", className)}\n style={{ \"--app-rail-width\": \"48px\", ...style } as React.CSSProperties}\n {...props}\n />\n );\n}\n\nexport function AppRailGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return <div data-slot=\"app-rail-group\" className={cn(\"flex flex-col items-center gap-1\", className)} {...props} />;\n}\n\n/** Pushes everything after it to the bottom of the rail. */\nexport function AppRailSpacer() {\n return <div data-slot=\"app-rail-spacer\" className=\"flex-1\" />;\n}\n\nexport interface AppRailItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n icon: React.ReactNode;\n label: string;\n /** Shown in the tooltip after the label, e.g. \"⌘1\". */\n shortcut?: string;\n active?: boolean;\n /** A hollow corner mark when the area needs attention; healthy areas carry none. */\n attention?: StatusTone;\n attentionLabel?: string;\n}\n\nexport const AppRailItem = React.forwardRef<HTMLButtonElement, AppRailItemProps>(function AppRailItem(\n { icon, label, shortcut, active = false, attention, attentionLabel, className, ...props },\n ref,\n) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n ref={ref}\n type=\"button\"\n data-slot=\"app-rail-item\"\n data-active={active}\n aria-label={label}\n aria-current={active ? \"page\" : undefined}\n className={cn(\n \"relative flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors\",\n \"hover:bg-foreground/[0.06] hover:text-foreground\",\n \"data-[active=true]:bg-foreground/[0.08] data-[active=true]:text-foreground\",\n \"focus-visible:ring-2 focus-visible:ring-ring\",\n \"[&_svg]:size-[18px] [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {icon}\n {attention ? (\n <StatusDot\n tone={attention}\n variant=\"ring\"\n {...(attentionLabel ? { label: attentionLabel } : {})}\n className=\"absolute right-0.5 bottom-0.5\"\n />\n ) : null}\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\">\n <span className=\"flex items-center gap-2\">\n {label}\n {shortcut ? <span className=\"opacity-60\">{shortcut}</span> : null}\n </span>\n </TooltipContent>\n </Tooltip>\n );\n});\n\nexport interface AppRailAvatarProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n /** Up to two letters. Ignored when `children` is given. */\n initials?: string;\n label: string;\n /** A glyph instead of initials (e.g. a neutral person while signed out). */\n children?: React.ReactNode;\n}\n\n/** The person, at the bottom of the rail (Codex's initials circle). */\nexport const AppRailAvatar = React.forwardRef<HTMLButtonElement, AppRailAvatarProps>(function AppRailAvatar(\n { initials = \"\", label, className, children, ...props },\n ref,\n) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n ref={ref}\n type=\"button\"\n data-slot=\"app-rail-avatar\"\n aria-label={label}\n className={cn(\n \"flex size-6 items-center justify-center rounded-full bg-foreground/[0.12] text-[10px] font-semibold leading-none text-muted-foreground outline-none [&_svg]:size-3.5\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n className,\n )}\n {...props}\n >\n {children ?? initials.slice(0, 2).toUpperCase()}\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\">\n {label}\n </TooltipContent>\n </Tooltip>\n );\n});\n","\"use client\";\n\n/**\n * Resizable — the split-pane family, on react-resizable-panels **v4**.\n *\n * TWO FORKS COLLAPSE INTO ONE COMPONENT. matrx-frontend shipped\n * `components/ui/resizable.tsx` (38 import sites, one fixed handle width) AND\n * `components/ui/matrx/resizable.tsx` (6 sites, an eight-step `size` scale).\n * They disagreed about exactly one thing — how thick the handle is — which is\n * the C18 density-as-a-fork pattern this package exists to end. `size` is a\n * prop here; both forks die.\n *\n * v4 IS NOT v1/v2, and the differences are the reason a wrapper exists at all:\n * - the group prop is `orientation`, not `direction`;\n * - `data-panel-group-direction` is gone — the separator states\n * `aria-orientation`, and it is `vertical` in a HORIZONTAL group (it is the\n * separator's own axis, not the group's), which is why every orientation\n * selector below reads the way it does;\n * - `Group` sets `height:100%/width:100%/overflow:hidden` internally;\n * - `Panel` renders an outer flex-sizing div wrapping an inner\n * `overflow:auto` div that receives `className`/`style` — to make a panel\n * clip instead of scroll, pass `style={{ overflow: \"hidden\", height: \"100%\" }}`;\n * - numeric size props are PIXELS; percentages are strings (`\"30%\"`).\n *\n * THE DRAG OUTLINE BUG, kept fixed. The library sets `tabIndex=0` on the\n * separator, so a mouse drag FOCUSES it and the browser's default outline\n * flashes — which rendered as a near-white bar in dark mode. `focus-visible:`\n * does not suppress it (that is keyboard-only); `focus:outline-none` does, and\n * the keyboard ring is restored explicitly on `focus-visible`.\n *\n * MOUSE TOLERANCE IS AN INVISIBLE TARGET. A 2px line is not grabbable; an\n * `::after` overlay widens the hit area without widening the rule, and goes to\n * 44px on coarse pointers.\n *\n * `react-resizable-panels` is an ordinary dependency, not a peer (C23): the\n * panel geometry IS this component's product.\n */\n\nimport * as React from \"react\";\nimport { Group, Panel, Separator } from \"react-resizable-panels\";\n\nimport { cn } from \"./cn\";\nimport { DragHandleDots2Icon } from \"./icons\";\n\nexport type ResizableHandleSize =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"4xl\";\n\n/**\n * The separator's own thickness. `aria-orientation=horizontal` means a\n * separator lying across a VERTICAL group, so its thickness is a height.\n */\nconst HANDLE_SIZES: Record<ResizableHandleSize, string> = {\n xs: \"w-0.5 [&[aria-orientation=horizontal]]:h-0.5 [&[aria-orientation=horizontal]]:w-full\",\n sm: \"w-1 [&[aria-orientation=horizontal]]:h-1 [&[aria-orientation=horizontal]]:w-full\",\n md: \"w-1.5 [&[aria-orientation=horizontal]]:h-1.5 [&[aria-orientation=horizontal]]:w-full\",\n lg: \"w-2 [&[aria-orientation=horizontal]]:h-2 [&[aria-orientation=horizontal]]:w-full\",\n xl: \"w-3 [&[aria-orientation=horizontal]]:h-3 [&[aria-orientation=horizontal]]:w-full\",\n \"2xl\":\n \"w-4 [&[aria-orientation=horizontal]]:h-4 [&[aria-orientation=horizontal]]:w-full\",\n \"3xl\":\n \"w-6 [&[aria-orientation=horizontal]]:h-6 [&[aria-orientation=horizontal]]:w-full\",\n \"4xl\":\n \"w-8 [&[aria-orientation=horizontal]]:h-8 [&[aria-orientation=horizontal]]:w-full\",\n};\n\nconst ResizablePanelGroup = ({\n className,\n ...props\n}: React.ComponentProps<typeof Group>) => (\n <Group\n data-slot=\"resizable-group\"\n className={cn(\"flex h-full w-full\", className)}\n {...props}\n />\n);\nResizablePanelGroup.displayName = \"ResizablePanelGroup\";\n\nconst ResizablePanel = Panel;\n\nexport interface ResizableHandleProps\n extends React.ComponentProps<typeof Separator> {\n /** Render the centered grip. */\n withHandle?: boolean;\n /** Separator thickness. Default `xs` — matrx-frontend's original 2px line. */\n size?: ResizableHandleSize;\n}\n\nconst ResizableHandle = ({\n withHandle,\n size = \"xs\",\n className,\n ...props\n}: ResizableHandleProps) => (\n <Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"group/handle relative flex shrink-0 items-center justify-center bg-border transition-colors\",\n // Invisible hit target centered on the line; wider still on touch.\n \"after:absolute after:inset-y-0 after:left-1/2 after:w-1.5 after:-translate-x-1/2 after:content-['']\",\n \"pointer-coarse:after:w-11\",\n \"[&[aria-orientation=horizontal]]:after:inset-x-0 [&[aria-orientation=horizontal]]:after:left-0 [&[aria-orientation=horizontal]]:after:top-1/2 [&[aria-orientation=horizontal]]:after:h-1.5 [&[aria-orientation=horizontal]]:after:w-full [&[aria-orientation=horizontal]]:after:-translate-x-0 [&[aria-orientation=horizontal]]:after:-translate-y-1/2\",\n \"pointer-coarse:[&[aria-orientation=horizontal]]:after:h-11\",\n // The drag-outline bug: suppress for ALL focus, restore for keyboard.\n \"focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1\",\n // Library-driven state feedback.\n \"data-[separator=hover]:bg-primary data-[separator=active]:bg-primary\",\n HANDLE_SIZES[size],\n \"cursor-col-resize [&[aria-orientation=horizontal]]:cursor-row-resize\",\n className,\n )}\n {...props}\n >\n {withHandle ? (\n <div className=\"z-10 flex h-8 w-4 items-center justify-center rounded-sm border bg-border group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8\">\n <DragHandleDots2Icon className=\"h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90\" />\n </div>\n ) : null}\n </Separator>\n);\nResizableHandle.displayName = \"ResizableHandle\";\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"../resizable\";\n\n/**\n * The canvas: a right-hand workspace of panels (terminal, files, browser, info) beside the\n * main content, as in Claude desktop and Codex. Panels stack in columns, resize by dragging\n * the gaps between them, and any one can expand to fill the whole canvas region.\n *\n * The layout is presentational: the host owns which panels are open, which is expanded and\n * what each renders. The panel CHROME (CanvasPanel, CanvasPanelEmpty, BrowserTabs, BrowserBar)\n * lives in @ai-matrx/canvas/react — the one canvas chrome; this package cannot depend on it\n * (canvas → tap-target → design-system would be a cycle).\n */\n\nexport interface CanvasPanelDef {\n id: string;\n node: React.ReactNode;\n /** Pixels (number) or percent of the column (string). */\n minSize?: number | string;\n defaultSize?: number | string;\n}\n\nexport interface CanvasColumnDef {\n id: string;\n panels: CanvasPanelDef[];\n minSize?: number | string;\n defaultSize?: number | string;\n}\n\nexport interface CanvasLayoutProps {\n columns: CanvasColumnDef[];\n /** When set, only this panel renders, filling the layout. */\n expandedId?: string | null;\n className?: string;\n}\n\nconst GAP = \"bg-transparent data-[separator=hover]:bg-foreground/15 data-[separator=active]:bg-foreground/25\";\n\nexport function CanvasLayout({ columns, expandedId = null, className }: CanvasLayoutProps) {\n const visible = columns.filter((c) => c.panels.length > 0);\n const expanded = expandedId ? visible.flatMap((c) => c.panels).find((p) => p.id === expandedId) : undefined;\n\n if (expanded) {\n return (\n <div data-slot=\"canvas-layout\" data-expanded={expanded.id} className={cn(\"flex h-full w-full\", className)}>\n {expanded.node}\n </div>\n );\n }\n\n return (\n <ResizablePanelGroup data-slot=\"canvas-layout\" orientation=\"horizontal\" className={cn(\"gap-0\", className)}>\n {visible.map((column, ci) => (\n <React.Fragment key={column.id}>\n {ci > 0 ? <ResizableHandle data-canvas-gap=\"column\" size=\"md\" className={GAP} /> : null}\n <ResizablePanel\n id={column.id}\n minSize={column.minSize ?? 220}\n {...(column.defaultSize !== undefined ? { defaultSize: column.defaultSize } : {})}\n >\n <ResizablePanelGroup data-canvas-column={column.id} orientation=\"vertical\">\n {column.panels.map((panel, pi) => (\n <React.Fragment key={panel.id}>\n {pi > 0 ? <ResizableHandle data-canvas-gap=\"row\" size=\"md\" className={GAP} /> : null}\n <ResizablePanel\n id={panel.id}\n minSize={panel.minSize ?? 120}\n {...(panel.defaultSize !== undefined ? { defaultSize: panel.defaultSize } : {})}\n >\n {panel.node}\n </ResizablePanel>\n </React.Fragment>\n ))}\n </ResizablePanelGroup>\n </ResizablePanel>\n </React.Fragment>\n ))}\n </ResizablePanelGroup>\n );\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip\";\n\n/**\n * A small segmented group of icon buttons for switching the app's mode (Claude desktop's\n * chat | code pair in the title bar). A radio group: arrow keys move, one is always checked.\n */\n\nexport interface ModeSwitchOption<T extends string> {\n value: T;\n label: string;\n icon: React.ReactNode;\n shortcut?: string;\n}\n\nexport interface ModeSwitchProps<T extends string> {\n value: T;\n onValueChange: (value: T) => void;\n options: ReadonlyArray<ModeSwitchOption<T>>;\n label?: string;\n className?: string;\n}\n\nexport function ModeSwitch<T extends string>({ value, onValueChange, options, label = \"Mode\", className }: ModeSwitchProps<T>) {\n const refs = React.useRef<Array<HTMLButtonElement | null>>([]);\n\n const move = (from: number, delta: number) => {\n const next = (from + delta + options.length) % options.length;\n const option = options[next];\n if (!option) return;\n onValueChange(option.value);\n refs.current[next]?.focus();\n };\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={label}\n data-slot=\"mode-switch\"\n className={cn(\"inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.06] p-0.5\", className)}\n >\n {options.map((option, index) => {\n const checked = option.value === value;\n return (\n <Tooltip key={option.value}>\n <TooltipTrigger asChild>\n <button\n ref={(el) => {\n refs.current[index] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={checked}\n aria-label={option.label}\n data-slot=\"mode-switch-item\"\n data-value={option.value}\n tabIndex={checked ? 0 : -1}\n onClick={() => onValueChange(option.value)}\n onKeyDown={(event) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n move(index, 1);\n } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n move(index, -1);\n }\n }}\n className={cn(\n \"flex h-6 w-7 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors\",\n \"hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\",\n \"aria-checked:bg-background aria-checked:text-foreground aria-checked:shadow-[0_0_0_0.5px_hsl(var(--foreground)/0.12),0_1px_2px_hsl(var(--foreground)/0.08)]\",\n \"dark:aria-checked:bg-foreground/[0.14] dark:aria-checked:shadow-none\",\n \"[&_svg]:size-[15px] [&_svg]:shrink-0\",\n )}\n >\n {option.icon}\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\" align=\"center\">\n <span className=\"flex items-center gap-2\">\n {option.label}\n {option.shortcut ? <span className=\"opacity-60\">{option.shortcut}</span> : null}\n </span>\n </TooltipContent>\n </Tooltip>\n );\n })}\n </div>\n );\n}\n"],"mappings":"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","names":["React","jsx","React","jsx","jsxs","isActive","jsx","React","jsx","jsxs","AppRailItem","AppRailAvatar","jsx","React","jsx","jsxs","React","jsx","jsxs"]}
@@ -2,17 +2,26 @@
2
2
  import {
3
3
  EditableLabel
4
4
  } from "./chunk-J6637L6D.js";
5
+ import {
6
+ MenuLookCheckboxItem,
7
+ MenuLookContent,
8
+ MenuLookContextCheckboxItem,
9
+ MenuLookContextContent,
10
+ MenuLookContextItem,
11
+ MenuLookContextLabel,
12
+ MenuLookContextSeparator,
13
+ MenuLookContextSub,
14
+ MenuLookContextSubContent,
15
+ MenuLookContextSubTrigger,
16
+ MenuLookItem,
17
+ MenuLookLabel,
18
+ MenuLookSeparator,
19
+ MenuLookSub,
20
+ MenuLookSubContent,
21
+ MenuLookSubTrigger
22
+ } from "./chunk-L5OACQXS.js";
5
23
  import {
6
24
  ContextMenu,
7
- ContextMenuCheckboxItem,
8
- ContextMenuContent,
9
- ContextMenuItem,
10
- ContextMenuLabel,
11
- ContextMenuSeparator,
12
- ContextMenuShortcut,
13
- ContextMenuSub,
14
- ContextMenuSubContent,
15
- ContextMenuSubTrigger,
16
25
  ContextMenuTrigger
17
26
  } from "./chunk-HEFTQUJ5.js";
18
27
  import {
@@ -31,20 +40,8 @@ import {
31
40
  } from "./chunk-QOEKPR37.js";
32
41
  import {
33
42
  DropdownMenu,
34
- DropdownMenuCheckboxItem,
35
- DropdownMenuContent,
36
- DropdownMenuItem,
37
- DropdownMenuLabel,
38
- DropdownMenuSeparator,
39
- DropdownMenuShortcut,
40
- DropdownMenuSub,
41
- DropdownMenuSubContent,
42
- DropdownMenuSubTrigger,
43
43
  DropdownMenuTrigger
44
44
  } from "./chunk-X6ZRHJQP.js";
45
- import {
46
- useScrollFade
47
- } from "./chunk-BNXNIN2S.js";
48
45
  import {
49
46
  declareLazyDataProps,
50
47
  useMatrxTableRowAlchemy,
@@ -120,7 +117,7 @@ function runToggle(entry, next) {
120
117
  }
121
118
 
122
119
  // src/item/ItemMenu.tsx
123
- import { Fragment as Fragment2, useCallback, useEffect, useRef, useState as useState2 } from "react";
120
+ import { Fragment as Fragment2, useEffect, useRef, useState as useState2 } from "react";
124
121
  import { Slot } from "@radix-ui/react-slot";
125
122
  import { useIsMobile } from "@ai-matrx/kit/media-query";
126
123
 
@@ -300,52 +297,37 @@ function DrawerEntry({
300
297
  // src/item/ItemMenu.tsx
301
298
  import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
302
299
  var dropdownFamily = {
303
- Item: DropdownMenuItem,
304
- CheckboxItem: DropdownMenuCheckboxItem,
305
- Sub: DropdownMenuSub,
306
- SubTrigger: DropdownMenuSubTrigger,
307
- SubContent: DropdownMenuSubContent,
308
- Separator: DropdownMenuSeparator,
309
- Label: DropdownMenuLabel,
310
- Shortcut: DropdownMenuShortcut
300
+ Item: MenuLookItem,
301
+ CheckboxItem: MenuLookCheckboxItem,
302
+ Sub: MenuLookSub,
303
+ SubTrigger: MenuLookSubTrigger,
304
+ SubContent: MenuLookSubContent,
305
+ Separator: MenuLookSeparator,
306
+ Label: MenuLookLabel
311
307
  };
312
308
  var contextFamily = {
313
- Item: ContextMenuItem,
314
- CheckboxItem: ContextMenuCheckboxItem,
315
- Sub: ContextMenuSub,
316
- SubTrigger: ContextMenuSubTrigger,
317
- SubContent: ContextMenuSubContent,
318
- Separator: ContextMenuSeparator,
319
- Label: ContextMenuLabel,
320
- Shortcut: ContextMenuShortcut
309
+ Item: MenuLookContextItem,
310
+ CheckboxItem: MenuLookContextCheckboxItem,
311
+ Sub: MenuLookContextSub,
312
+ SubTrigger: MenuLookContextSubTrigger,
313
+ SubContent: MenuLookContextSubContent,
314
+ Separator: MenuLookContextSeparator,
315
+ Label: MenuLookContextLabel
321
316
  };
322
- var DESTRUCTIVE_ITEM_CLASS = "text-destructive-ink focus:bg-destructive/10 focus:text-destructive-ink [&_svg]:text-destructive-ink";
323
- function EntryInner({
324
- entry,
325
- Shortcut,
326
- showShortcut = true
327
- }) {
317
+ function entryRow(entry, { showShortcut = true } = {}) {
328
318
  const Icon = entry.icon;
329
- const destructive = isCommand(entry) && entry.tone === "destructive";
330
- const shortcutText = isCommand(entry) || isCheckbox(entry) ? entry.shortcut ?? entry.shortcutKey?.toUpperCase() : void 0;
331
- const secondLine = entry.disabled && entry.disabledReason ? entry.disabledReason : void 0;
332
- return /* @__PURE__ */ jsxs2(Fragment3, { children: [
333
- Icon && /* @__PURE__ */ jsx3(
334
- Icon,
335
- {
336
- className: cn(
337
- "h-4 w-4 shrink-0",
338
- destructive ? "text-destructive" : entry.iconClassName ?? "text-muted-foreground"
339
- )
340
- }
341
- ),
342
- /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-1 flex-col", children: [
343
- /* @__PURE__ */ jsx3("span", { className: "truncate", title: entry.description, children: entry.label }),
344
- secondLine && /* @__PURE__ */ jsx3("span", { className: "truncate type-secondary text-muted-foreground", children: secondLine })
345
- ] }),
346
- entry.badge && /* @__PURE__ */ jsx3("span", { className: "ml-2 shrink-0 rounded border border-border px-1.5 py-px type-meta font-medium uppercase tracking-wide text-muted-foreground", children: entry.badge }),
347
- showShortcut && shortcutText && /* @__PURE__ */ jsx3(Shortcut, { children: shortcutText })
348
- ] });
319
+ const shortcut = showShortcut && (isCommand(entry) || isCheckbox(entry)) ? entry.shortcut ?? entry.shortcutKey?.toUpperCase() : void 0;
320
+ return {
321
+ // A destructive row's glyph takes the row's danger tone (menu-look.css); others keep their own color.
322
+ icon: Icon ? /* @__PURE__ */ jsx3(Icon, { className: isCommand(entry) && entry.tone === "destructive" ? void 0 : entry.iconClassName }) : void 0,
323
+ label: entry.label,
324
+ labelTitle: entry.description,
325
+ // The only second line an entry draws is why it is disabled; `description` is hover text
326
+ // (Arman, 2026-10-14: no "novels" in menus).
327
+ description: entry.disabled && entry.disabledReason ? entry.disabledReason : void 0,
328
+ badge: entry.badge,
329
+ shortcut
330
+ };
349
331
  }
350
332
  function MenuSections({
351
333
  family,
@@ -355,7 +337,7 @@ function MenuSections({
355
337
  const visibleSections = sections.map((s) => ({ ...s, items: s.items.filter((e) => !e.hidden) })).filter((s) => s.items.length > 0);
356
338
  return /* @__PURE__ */ jsx3(Fragment3, { children: visibleSections.map((section, sIdx) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
357
339
  sIdx > 0 && /* @__PURE__ */ jsx3(family.Separator, {}),
358
- section.label && /* @__PURE__ */ jsx3(family.Label, { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: section.label }),
340
+ section.label && /* @__PURE__ */ jsx3(family.Label, { children: section.label }),
359
341
  section.items.map((entry) => /* @__PURE__ */ jsx3(
360
342
  MenuLeaf,
361
343
  {
@@ -379,17 +361,10 @@ function MenuLeaf({
379
361
  const toastPromise = useItemMenuHost()?.toastPromise;
380
362
  if (isSubmenu(entry)) {
381
363
  return /* @__PURE__ */ jsxs2(family.Sub, { children: [
382
- /* @__PURE__ */ jsx3(family.SubTrigger, { disabled: entry.disabled, className: "gap-2", onPointerLeave: (event) => {
364
+ /* @__PURE__ */ jsx3(family.SubTrigger, { ...entryRow(entry, { showShortcut: false }), disabled: entry.disabled, onPointerLeave: (event) => {
383
365
  if (entry.renderContent && event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-canonical-alchemy-submenu]")) event.preventDefault();
384
- }, children: /* @__PURE__ */ jsx3(
385
- EntryInner,
386
- {
387
- entry,
388
- Shortcut: family.Shortcut,
389
- showShortcut: false
390
- }
391
- ) }),
392
- /* @__PURE__ */ jsx3(family.SubContent, { onFocusOutside: keepCanonicalPaletteInteraction, onPointerDownOutside: keepCanonicalPaletteInteraction, className: entry.renderContent ? "p-0 [--radix-popover-content-available-height:var(--radix-dropdown-menu-content-available-height)]" : void 0, children: entry.renderContent ? entry.renderContent(onCloseRequest) : /* @__PURE__ */ jsx3(
366
+ } }),
367
+ /* @__PURE__ */ jsx3(family.SubContent, { onFocusOutside: keepCanonicalPaletteInteraction, onPointerDownOutside: keepCanonicalPaletteInteraction, fit: entry.renderContent ? "content" : "menu", children: entry.renderContent ? entry.renderContent(onCloseRequest) : /* @__PURE__ */ jsx3(
393
368
  MenuSections,
394
369
  {
395
370
  family,
@@ -403,37 +378,33 @@ function MenuLeaf({
403
378
  return /* @__PURE__ */ jsx3(
404
379
  family.CheckboxItem,
405
380
  {
381
+ ...entryRow(entry),
406
382
  checked: entry.checked,
407
383
  disabled: entry.disabled,
408
384
  onSelect: (e) => e.preventDefault(),
409
- onCheckedChange: (next) => runToggle(entry, next),
410
- className: "gap-2",
411
- children: /* @__PURE__ */ jsx3(EntryInner, { entry, Shortcut: family.Shortcut })
385
+ onCheckedChange: (next) => runToggle(entry, next)
412
386
  }
413
387
  );
414
388
  }
415
389
  if (isLink(entry)) {
416
- return /* @__PURE__ */ jsx3(family.Item, { asChild: true, disabled: entry.disabled, className: "gap-2", children: /* @__PURE__ */ jsx3(
417
- "a",
390
+ return /* @__PURE__ */ jsx3(
391
+ family.Item,
418
392
  {
393
+ ...entryRow(entry),
394
+ disabled: entry.disabled,
419
395
  href: entry.href,
420
396
  target: entry.target,
421
- rel: entry.target === "_blank" ? "noopener noreferrer" : void 0,
422
- onClick: onCloseRequest,
423
- children: /* @__PURE__ */ jsx3(EntryInner, { entry, Shortcut: family.Shortcut })
397
+ linkProps: { onClick: onCloseRequest }
424
398
  }
425
- ) });
399
+ );
426
400
  }
427
401
  return /* @__PURE__ */ jsx3(
428
402
  family.Item,
429
403
  {
404
+ ...entryRow(entry),
430
405
  disabled: entry.disabled,
431
- onSelect: () => runCommand(entry, toastPromise),
432
- className: cn(
433
- "gap-2",
434
- entry.tone === "destructive" && DESTRUCTIVE_ITEM_CLASS
435
- ),
436
- children: /* @__PURE__ */ jsx3(EntryInner, { entry, Shortcut: family.Shortcut })
406
+ destructive: entry.tone === "destructive",
407
+ onSelect: () => runCommand(entry, toastPromise)
437
408
  }
438
409
  );
439
410
  }
@@ -500,7 +471,6 @@ function ItemMenu({
500
471
  open: openProp,
501
472
  onOpenChange,
502
473
  onCloseAutoFocus,
503
- contentMinWidth = "12rem",
504
474
  presentation = "auto"
505
475
  }) {
506
476
  const toastPromise = useItemMenuHost()?.toastPromise;
@@ -538,20 +508,6 @@ function ItemMenu({
538
508
  ...baseConfig,
539
509
  sections: targetSection !== void 0 ? baseConfig.sections.map((section, index) => index === targetSection ? { ...section, items: [...section.items, ...injectedRowItems] } : section) : [{ id: "actions", items: injectedRowItems }, ...baseConfig.sections]
540
510
  } : baseConfig;
541
- const scrollFade = useScrollFade();
542
- const viewportRef = useRef(null);
543
- const setViewport = useCallback(
544
- (node) => {
545
- viewportRef.current = node;
546
- scrollFade.ref(node);
547
- },
548
- [scrollFade.ref]
549
- );
550
- const scrollToEnd = () => {
551
- const el = viewportRef.current;
552
- if (!el) return;
553
- el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
554
- };
555
511
  const handleOpenChange = (next) => {
556
512
  if (!isControlled) setUncontrolledOpen(next);
557
513
  onOpenChange?.(next);
@@ -619,17 +575,14 @@ function ItemMenu({
619
575
  return /* @__PURE__ */ jsxs2(DropdownMenu, { open, onOpenChange: handleOpenChange, modal: false, children: [
620
576
  /* @__PURE__ */ jsx3(DropdownMenuTrigger, { ref: dropdownTriggerRef, asChild: true, children }),
621
577
  resolved && /* @__PURE__ */ jsxs2(
622
- DropdownMenuContent,
578
+ MenuLookContent,
623
579
  {
624
580
  onFocusOutside: keepCanonicalPaletteInteraction,
625
581
  onPointerDownOutside: keepCanonicalPaletteInteraction,
626
582
  align,
627
583
  ...side ? { side } : {},
628
584
  collisionPadding: 12,
629
- className: cn(
630
- "flex max-h-[var(--radix-dropdown-menu-content-available-height)] flex-col overflow-hidden p-0"
631
- ),
632
- style: { minWidth: contentMinWidth },
585
+ moreBelowLabel: "More actions below",
633
586
  ...onCloseAutoFocus ? { onCloseAutoFocus } : {},
634
587
  onKeyDown: makeShortcutHandler(
635
588
  resolved,
@@ -637,42 +590,13 @@ function ItemMenu({
637
590
  toastPromise
638
591
  ),
639
592
  children: [
640
- /* @__PURE__ */ jsxs2(
641
- "div",
642
- {
643
- ref: setViewport,
644
- "data-slot": "item-menu-viewport",
645
- className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",
646
- children: [
647
- resolved.header?.title && /* @__PURE__ */ jsxs2(DropdownMenuLabel, { className: "text-xs", children: [
648
- resolved.header.title,
649
- resolved.header.description && /* @__PURE__ */ jsx3("span", { className: "mt-0.5 block type-meta font-normal text-muted-foreground", children: resolved.header.description })
650
- ] }),
651
- /* @__PURE__ */ jsx3(
652
- MenuSections,
653
- {
654
- family: dropdownFamily,
655
- sections: resolved.sections,
656
- onCloseRequest: () => handleOpenChange(false)
657
- }
658
- )
659
- ]
660
- }
661
- ),
662
- scrollFade.state.bottom && /* @__PURE__ */ jsxs2(
663
- "button",
593
+ resolved.header?.title && /* @__PURE__ */ jsx3(MenuLookLabel, { description: resolved.header.description, children: resolved.header.title }),
594
+ /* @__PURE__ */ jsx3(
595
+ MenuSections,
664
596
  {
665
- type: "button",
666
- "data-slot": "item-menu-more-below",
667
- tabIndex: -1,
668
- "aria-hidden": "true",
669
- onPointerDown: (e) => e.preventDefault(),
670
- onClick: scrollToEnd,
671
- className: "flex w-full shrink-0 items-center justify-center gap-1 border-t border-border bg-popover px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
672
- children: [
673
- /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "h-3 w-3" }),
674
- "More actions below"
675
- ]
597
+ family: dropdownFamily,
598
+ sections: resolved.sections,
599
+ onCloseRequest: () => handleOpenChange(false)
676
600
  }
677
601
  )
678
602
  ]
@@ -719,17 +643,10 @@ function DefaultItemContextMenu({
719
643
  children
720
644
  }
721
645
  ),
722
- resolved && /* @__PURE__ */ jsxs2(
723
- ContextMenuContent,
724
- {
725
- className: "z-[9999] min-w-[12rem]",
726
- onCloseAutoFocus,
727
- children: [
728
- resolved.header?.title && /* @__PURE__ */ jsx3(ContextMenuLabel, { className: "text-xs font-medium text-muted-foreground", children: resolved.header.title }),
729
- /* @__PURE__ */ jsx3(MenuSections, { family: contextFamily, sections: resolved.sections, onCloseRequest: () => onOpenChange?.(false) })
730
- ]
731
- }
732
- )
646
+ resolved && /* @__PURE__ */ jsxs2(MenuLookContextContent, { onCloseAutoFocus, children: [
647
+ resolved.header?.title && /* @__PURE__ */ jsx3(MenuLookContextLabel, { description: resolved.header.description, children: resolved.header.title }),
648
+ /* @__PURE__ */ jsx3(MenuSections, { family: contextFamily, sections: resolved.sections, onCloseRequest: () => onOpenChange?.(false) })
649
+ ] })
733
650
  ]
734
651
  }
735
652
  );
@@ -1048,4 +965,4 @@ export {
1048
965
  ItemContextMenu,
1049
966
  ItemRow
1050
967
  };
1051
- //# sourceMappingURL=chunk-4CO5STZU.js.map
968
+ //# sourceMappingURL=chunk-WZC3K7SO.js.map