{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"settings","type":"registry:block","title":"Settings","description":"Profile and workspace settings with one draft and a real save handler, on grouped panels: photo upload, time zone with the local time, appearance cards, notifications by channel, workspace security, members, plan and usage, API keys and a hold-to-confirm danger zone. Personal mode omits workspace data; optional profile fields share validation, persistence, error recovery and focus return.","categories":["blocks"],"dependencies":["@radix-ui/react-alert-dialog@1.1.23","@radix-ui/react-checkbox@1.3.11","@radix-ui/react-dialog@1.1.23","@radix-ui/react-direction@1.1.4","@radix-ui/react-dropdown-menu@2.1.24","@radix-ui/react-label@2.1.15","@radix-ui/react-popover@1.1.23","@radix-ui/react-radio-group@1.4.7","@radix-ui/react-select@2.3.7","@radix-ui/react-slot@1.3.3","@radix-ui/react-switch@1.3.7","@radix-ui/react-tooltip@1.2.16","clsx@^2.1.1","lucide-react@^1.48.0","motion@^13.4.4","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/blocks/settings/messages.ts","type":"registry:file","target":"src/ui/beamline/blocks/settings/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n invitationsSent: {\n one: \"Invited {count} person\",\n other: \"Invited {count} people\",\n },\n invitationExpiry: \"Their link expires in 7 days.\",\n roleChanged: \"{name} is now {value}\",\n roleChangeFailed: \"{name}'s role did not change\",\n invitationWithdrawn: \"Invitation to {email} withdrawn\",\n memberRemoved: \"{name} removed\",\n removeFailed: \"Nobody was removed\",\n planChanged: \"You're on {value}, billed {period}\",\n planChangeFailed: \"Your plan did not change\",\n revoked: \"Revoked {name}\",\n keyRevokedDescription: \"Requests with it now fail.\",\n keyRevokeFailed: \"{name} is still active\",\n deletionScheduledToast: \"Workspace deletion scheduled\",\n deletionCancellationWindow: \"You have 7 days to cancel.\",\n navigationLabel: \"Settings sections\",\n unsaved: \"(unsaved)\",\n fieldNeedsAttention: \"Field needs attention\",\n savedAt: \"Saved {value}\",\n profile: \"Profile\",\n profileDescription: \"Your name and how to reach you.\",\n changePhoto: \"Change photo\",\n name: \"Name\",\n optional: \"(optional)\",\n email: \"Email\",\n emailDescription: \"Used for sign-in and notifications.\",\n timeZone: \"Time zone\",\n timeZoneDescription: \"Dates and times show in this zone.\",\n workspace: \"Workspace\",\n workspaceDescription: \"Shared by everyone in {workspace}.\",\n workspaceName: \"Workspace name\",\n workspaceUrl: \"URL\",\n workspaceUrlDescription: \"Changing it breaks old links to this workspace.\",\n members: \"Members\",\n invite: \"Invite\",\n inviteTitle: \"Invite teammates\",\n inviteDescription: \"They get an email with a link that expires in 7 days.\",\n cancel: \"Cancel\",\n sendInvites: {\n \"=0\": \"Send invites\",\n one: \"Send {count} invite\",\n other: \"Send {count} invites\",\n },\n inviteEmails: \"Emails\",\n invitePlaceholder: \"name@company.com, then Enter\",\n role: \"Role\",\n person: \"Person\",\n actions: \"Actions\",\n invited: \"Invited\",\n memberRoleLabel: \"Role for {name}\",\n memberActionsLabel: \"Actions for {name}\",\n withdrawInvitation: \"Withdraw invitation\",\n removeFromWorkspace: \"Remove from workspace\",\n withdrawTitle: \"Withdraw the invitation to {email}?\",\n removeTitle: \"Remove {name}?\",\n withdrawDescription: \"The link in their email stops working.\",\n removeDescription: \"They lose access to every deal, report and key in this workspace right away.\",\n withdraw: \"Withdraw\",\n remove: \"Remove\",\n billing: \"Billing\",\n billingDescription: \"Plan, seats and usage.\",\n billingPeriod: \"Billing period\",\n monthly: \"Monthly\",\n yearly: \"Yearly\",\n plan: \"Plan\",\n current: \"Current\",\n priceUnit: \"/ seat / mo\",\n planChange: \"Plan change\",\n keepCurrent: \"Keep current\",\n switchPlan: \"Switch plan\",\n seats: \"Seats\",\n active: \"Active\",\n notifications: \"Notifications\",\n notificationsDescription: \"Email, per workspace. Changes wait for Save.\",\n apiKeys: \"API keys\",\n apiDescription: \"Keys act as the workspace. After creation only the start of each key is shown.\",\n createKey: \"Create key\",\n keyReady: \"{name} is ready\",\n createKeyTitle: \"Create an API key\",\n keyReadyDescription: \"Copy it now and store it somewhere safe.\",\n createKeyDescription: \"It can do anything your workspace can.\",\n done: \"Done\",\n copyKey: \"Copy key\",\n keySecretWarning: \"You won't see this key again. If it is lost, revoke it and create another.\",\n keyName: \"Key name\",\n keyNamePlaceholder: \"Production\",\n keysEmpty: \"No keys yet. Create one for each place that calls the API.\",\n keyCreated: \"· created {date}\",\n revoke: \"Revoke\",\n revokeTitle: \"Revoke {name}?\",\n revokeDescription: \"Anything still using it stops working at once. This cannot be undone.\",\n revokeKey: \"Revoke key\",\n dangerZone: \"Danger zone\",\n dangerDescription:\n \"Deleting {workspace} removes every deal, report and key after 7 days. Until then it can be restored by support.\",\n deletionScheduledDescription: \"{workspace} will be deleted in 7 days. Contact support to cancel.\",\n deletionScheduled: \"Deletion scheduled\",\n schedulingDeletion: \"Scheduling deletion…\",\n deleteAction: \"Hold to delete {workspace}\",\n unsavedChanges: \"Unsaved changes\",\n saveResult: \"Save result\",\n fieldSaveFailed: \"Not saved: 1 field needs attention\",\n savingElapsed: \"Saving… {elapsed} s\",\n saving: \"Saving…\",\n saved: \"Saved\",\n fixInvalidField: \"· fix the marked field first\",\n goToField: \"Go to field\",\n discard: \"Discard\",\n tryAgain: \"Try again\",\n save: \"Save\",\n heading: \"Settings\",\n roleOwner: \"Owner\",\n roleAdmin: \"Admin\",\n roleMember: \"Member\",\n roleViewer: \"Viewer\",\n digest: \"Weekly digest\",\n digestDescription: \"Every Monday at 09:00 in your time zone.\",\n mentions: \"Mentions and replies\",\n mentionsDescription: \"When someone @mentions you or replies to your note.\",\n incidents: \"Incidents\",\n incidentsDescription: \"Outages and failed webhooks, as they happen.\",\n product: \"Product updates\",\n productDescription: \"New features, about once a month.\",\n nameRequired: \"Enter your name.\",\n emailInvalid: \"Enter a full email address, like name@company.com.\",\n workspaceRequired: \"Give the workspace a name.\",\n slugInvalid: \"Use 3–32 lowercase letters, numbers or dashes.\",\n fieldRequired: \"Enter {field}.\",\n saveFailed: \"Settings could not be saved. Try again.\",\n changesDiscarded: \"Changes discarded.\",\n inviteFailed: \"The invitations were not sent. Try again.\",\n retry: \"Try again.\",\n keyNameRequired: \"Name the key after where it is used: Production, CI.\",\n keyFailed: \"The key was not created. Try again.\",\n deleteFailed: \"The workspace was not scheduled for deletion. Try again.\",\n alreadyMember: \"Already a member.\",\n emailRequired: \"Not an email address.\",\n contactSales: \"Talk to us\",\n savingDiscount: \"Saving {percent}\",\n planChangeDescription: \"Switch to {plan}, billed {period}. Changes are prorated.\",\n locale: \"Language and region\",\n localeDescription: \"The language and formats your application uses after saving.\",\n localeInvalid: \"Choose a valid language tag, such as uk-UA.\",\n monthlyPeriod: \"monthly\",\n yearlyPeriod: \"yearly\",\n unsavedCount: {\n one: \"{count} unsaved change\",\n other: \"{count} unsaved changes\",\n },\n membersDescription: {\n one: \"{count} person · roles decide who can edit billing and API keys.\",\n other: \"{count} people · roles decide who can edit billing and API keys.\",\n },\n membersInvitedDescription: {\n one: \"{active} active · {count} invited person · roles decide who can edit billing and API keys.\",\n other: \"{active} active · {count} invited people · roles decide who can edit billing and API keys.\",\n },\n groupAccount: \"Account\",\n identityMembers: {\n one: \"{count} member\",\n other: \"{count} members\",\n },\n profileAppearanceDescription: \"How you appear to your team, and how the app looks to you.\",\n photoUpload: \"Upload\",\n photoChange: \"Change\",\n photoHint: \"Drop an image or upload. Cropped to a square.\",\n photoNotImage: \"Choose an image: PNG, JPG or WebP.\",\n photoUnreadable: \"That image could not be read. Try another file.\",\n zoneNow: \"{time} there now · {offset}\",\n appearance: \"Appearance\",\n appearanceDescription: \"Only on your devices; your team keeps its own.\",\n appearanceSystem: \"System\",\n appearanceSystemDetail: \"Follows this device\",\n appearanceDark: \"Dark\",\n appearanceDarkDetail: \"Easy on the eyes at night\",\n appearanceLight: \"Light\",\n appearanceLightDetail: \"Crisp in a bright room\",\n security: \"Security\",\n securityDescription: \"Applies to everyone at their next sign-in.\",\n requireTwoFactor: \"Require two-step sign-in\",\n requireTwoFactorDescription: \"Members add an authenticator app or a passkey before they can open anything.\",\n signInDomains: \"Sign-in domains\",\n signInDomainsDescription: \"Only addresses at these domains can join. Leave empty to allow any.\",\n signInDomainsPlaceholder: \"company.com, then Enter\",\n domainInvalid: \"Not a domain, like company.com.\",\n notificationsByChannelDescription: \"What reaches you, and where. Changes wait for Save.\",\n notificationsByChannel: \"Notifications by channel\",\n notificationByChannel: \"{label} by {channel}\",\n event: \"Event\",\n usage: \"Usage\",\n usageDescription: \"This billing period, updated hourly.\",\n deleteWorkspaceTitle: \"Delete {workspace}\",\n deleteWorkspaceDescription: \"Members, deals, reports and keys go with it.\",\n timeZone2: \"time zone\",\n workspaceName2: \"workspace name\",\n workspaceURL: \"workspace URL\",\n twoStepSignIn: \"two-step sign-in\",\n signInDomains2: \"sign-in domains\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/blocks/settings/settings.module.css","type":"registry:file","target":"src/ui/beamline/blocks/settings/settings.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n .focusTarget:focus-visible {\n outline: var(--pui-focus-width) var(--pui-focus-style) var(--pui-focus-ring);\n outline-offset: 4px;\n border-radius: var(--pui-radius-control);\n }\n .root {\n container-type: inline-size;\n /* one column for the form, the tab row and the save bar: 720 wide, the same inline padding everywhere */\n --_column: 720px;\n --_gutter: var(--pui-space-4);\n }\n @container (min-width: 560px) {\n .layout {\n --_gutter: var(--pui-space-8);\n }\n }\n .layout {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n }\n .root[data-navigation=\"none\"] .layout {\n grid-template-rows: minmax(0, 1fr);\n }\n /* navigation none: the host's page routes the sections and owns the page, so the form starts at the page's own left\n edge with no gutter of its own (trial t27: a centred 720 column in a wide page left a gap on the left) */\n .root[data-navigation=\"none\"] .column {\n margin-inline: 0;\n padding-inline: 0;\n padding-top: 0;\n /* no room kept for the save bar (t28: a 112 px gap under the form at rest); the bar takes its own when it shows */\n padding-bottom: var(--pui-space-2);\n }\n .root[data-navigation=\"none\"] .saveBar {\n justify-content: flex-start;\n margin-block-start: 0;\n padding-inline: 0;\n }\n .root[data-navigation=\"none\"] .bar {\n max-width: var(--_column);\n }\n .column {\n display: flex;\n max-width: var(--_column);\n flex-direction: column;\n gap: var(--pui-space-6);\n margin-inline: auto;\n padding: var(--pui-space-5) var(--_gutter) calc(var(--pui-space-24) + var(--pui-space-4));\n }\n @container (min-width: 560px) {\n .column {\n padding-top: var(--pui-space-8);\n }\n }\n .navigation {\n display: flex;\n min-width: 0;\n flex-direction: column;\n border-block-end: 1px solid var(--pui-line-soft);\n padding: var(--pui-space-3);\n }\n .heading {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pui-space-1) var(--pui-space-3);\n padding: 0 var(--pui-space-2) var(--pui-space-2);\n }\n /* tab row: its heading and items start where the form's text starts (the item's own padding sits in the gutter) */\n .root[data-navigation=\"tabs\"] .navigation {\n padding-inline: 0;\n }\n .root[data-navigation=\"tabs\"] .heading {\n width: 100%;\n max-width: var(--_column);\n margin-inline: auto;\n padding: var(--pui-space-2) var(--_gutter) var(--pui-space-3);\n }\n .root[data-navigation=\"tabs\"] .items {\n width: 100%;\n max-width: var(--_column);\n margin-inline: auto;\n padding-inline: calc(var(--_gutter) - var(--pui-space-3));\n }\n .items {\n position: relative;\n display: flex;\n gap: var(--pui-space-2);\n overflow-x: auto;\n mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);\n }\n /* The chosen section wears one plate that travels between the items (useIndicator + the glide class), painted the way\n Item paints a selection (accent tint, a 2px accent-ink bar at the start), so the items draw none of their own and\n sit above it. */\n .items .item {\n z-index: 1;\n }\n .items .item[data-state=\"selected\"],\n .items .item[data-state=\"selected\"]:hover {\n background-color: transparent;\n }\n .items .item[data-state=\"selected\"]::before {\n content: none;\n }\n .items:dir(rtl) {\n mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);\n }\n .saveBar {\n pointer-events: none;\n position: sticky;\n bottom: calc(var(--pui-space-4) + env(safe-area-inset-bottom));\n z-index: var(--pui-z-raised);\n display: flex;\n justify-content: center;\n /* the bar floats over the column's bottom padding instead of adding its own height under the form */\n margin-block-start: calc(-1 * var(--pui-space-20));\n padding-inline: var(--_gutter);\n padding-block-end: var(--pui-space-4);\n }\n .bar {\n max-width: calc(var(--_column) - 2 * var(--_gutter));\n }\n @container (min-width: 760px) {\n /* beside the rail the sections take the room as grouped panels, not a narrow form in an empty canvas */\n .root[data-navigation=\"rail\"] .layout {\n --_column: 1000px;\n }\n .root[data-navigation=\"rail\"] .group {\n display: block;\n }\n .root[data-navigation=\"rail\"] .identity {\n display: flex;\n }\n .root[data-navigation=\"rail\"] .layout {\n grid-template-columns: 220px minmax(0, 1fr);\n grid-template-rows: minmax(0, 1fr);\n }\n .root[data-navigation=\"rail\"] .navigation {\n border-inline-end: 1px solid var(--pui-line-soft);\n border-block-end: 0;\n }\n .root[data-navigation=\"rail\"] .items {\n flex-direction: column;\n mask-image: none;\n }\n }\n\n /* ── the rail: whose settings, then the person's sections and the workspace's ─────────────────────────────── */\n .identity {\n display: none;\n align-items: center;\n gap: var(--pui-space-3);\n margin: 0 0 var(--pui-space-3);\n border-radius: var(--pui-radius-control);\n padding: var(--pui-space-2) var(--pui-space-3);\n }\n .group {\n display: none;\n padding: var(--pui-space-4) var(--pui-space-3) var(--pui-space-1);\n }\n .group:first-child {\n padding-top: var(--pui-space-1);\n }\n\n /* ── a section's groups ──────────────────────────────────────────────────────────────────────────────── */\n .panel {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--pui-space-5);\n padding: var(--pui-space-5);\n }\n @container (min-width: 560px) {\n .panel:not([data-flush]) {\n padding: var(--pui-space-6);\n }\n }\n .panel[data-flush] {\n gap: 0;\n overflow: hidden;\n padding: 0;\n }\n .panel[data-flat] {\n padding: 0;\n }\n .panelHeader {\n display: grid;\n gap: var(--pui-space-0-5);\n }\n .panel[data-flush] > .panelHeader {\n border-block-end: 1px solid var(--pui-line-soft);\n padding: var(--pui-space-4) var(--pui-space-5);\n }\n .panel[data-tone=\"danger\"] {\n box-shadow:\n var(--m-surface-edge),\n inset 0 0 0 1px color-mix(in oklch, var(--pui-red) 45%, transparent);\n }\n .fields {\n display: grid;\n align-content: start;\n gap: var(--pui-space-4) var(--pui-space-5);\n }\n @container (min-width: 520px) {\n .fields {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .identityGrid {\n display: grid;\n gap: var(--pui-space-5);\n }\n @container (min-width: 600px) {\n .identityGrid {\n grid-template-columns: 176px minmax(0, 1fr);\n gap: var(--pui-space-8);\n }\n }\n /* the photo sits in a well that takes a dropped image */\n .photo {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--pui-space-3);\n border-radius: var(--pui-radius-card);\n padding: var(--pui-space-4) var(--pui-space-3);\n outline: 1px dashed transparent;\n outline-offset: -1px;\n transition:\n outline-color var(--pui-motion-out),\n background-color var(--pui-motion-out);\n }\n .photo[data-state=\"dropping\"] {\n outline-color: var(--pui-accent);\n background-color: var(--pui-accent-tint);\n }\n .photo .photoAvatar {\n --_s: 88px;\n --_d: 26px;\n }\n .photo > p {\n text-align: center;\n }\n /* a narrow panel puts the photo beside its buttons instead of over them */\n @container (max-width: 599px) {\n .photo {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n justify-items: start;\n gap: var(--pui-space-1) var(--pui-space-4);\n padding: var(--pui-space-3);\n }\n .photo .photoAvatar {\n --_s: 64px;\n --_d: 20px;\n grid-row: span 2;\n }\n .photo > p {\n text-align: start;\n }\n }\n .root[data-navigation=\"none\"] .photo {\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n padding: 0;\n }\n\n /* ── appearance: each card shows a small window in its scheme, drawn from the theme's own colours ─────── */\n .appearance [data-slot=\"radio-cards-media\"] {\n aspect-ratio: 16 / 7;\n }\n .preview {\n --_bg: oklch(from var(--pui-canvas) 0.985 0.004 h);\n --_rail: oklch(from var(--pui-canvas) 0.94 0.006 h);\n --_ink: oklch(from var(--pui-ink) 0.3 c h / 0.22);\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: var(--pui-radius-control);\n background: var(--_bg);\n box-shadow: inset 0 0 0 1px var(--pui-line-soft);\n }\n .preview[data-scheme=\"dark\"] {\n --_bg: oklch(from var(--pui-canvas) 0.19 0.008 h);\n --_rail: oklch(from var(--pui-canvas) 0.235 0.008 h);\n --_ink: oklch(from var(--pui-ink) 0.92 c h / 0.22);\n }\n .preview[data-scheme=\"system\"] {\n background: linear-gradient(\n 115deg,\n oklch(from var(--pui-canvas) 0.985 0.004 h) 0 50%,\n oklch(from var(--pui-canvas) 0.19 0.008 h) 50% 100%\n );\n --_rail: oklch(from var(--pui-canvas) 0.6 0.006 h / 0.25);\n --_ink: oklch(from var(--pui-ink) 0.6 c h / 0.35);\n }\n .previewRail {\n width: 26%;\n background: var(--_rail);\n }\n .previewBody {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 6px;\n padding: 12% 10%;\n }\n .previewLine {\n height: 5px;\n border-radius: var(--pui-radius-pill);\n background: var(--_ink);\n }\n .previewLine:nth-child(2) {\n width: 64%;\n }\n .previewAccent {\n width: 38%;\n height: 9px;\n margin-top: auto;\n border-radius: var(--pui-radius-pill);\n /* the brand, kept readable on the scheme it sits on */\n background: oklch(from var(--pui-accent) min(l, 0.55) max(c, 0.02) h);\n }\n .preview[data-scheme=\"dark\"] .previewAccent {\n background: oklch(from var(--pui-accent) max(l, 0.78) c h);\n }\n\n /* ── rows inside a panel: notifications, keys ─────────────────────────────────────────────────────────── */\n .row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--pui-space-6);\n border-block-end: 1px solid var(--pui-line-soft);\n padding-block: var(--pui-space-4);\n }\n .row:last-child {\n border-block-end: 0;\n }\n .panel:not([data-flush]) {\n > .row:first-child {\n padding-block-start: 0;\n }\n > .row:last-child {\n padding-block-end: 0;\n }\n }\n .panel:not([data-flush]) > .row {\n padding-block: var(--pui-space-4);\n }\n .panel:not([data-flush]) > .row + .row {\n border-block-start: 0;\n }\n .panel:not([data-flush]):has(> .row) {\n gap: 0;\n }\n .panel[data-flush] > .row {\n padding-inline: var(--pui-space-5);\n }\n .keyRow {\n justify-content: flex-start;\n gap: var(--pui-space-3);\n }\n .keyIcon {\n display: grid;\n width: 32px;\n height: 32px;\n flex-shrink: 0;\n place-items: center;\n border-radius: var(--pui-radius-control);\n color: var(--pui-ink-3);\n }\n .meters {\n display: grid;\n gap: var(--pui-space-6);\n }\n @container (min-width: 560px) {\n .meters {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--pui-space-8);\n }\n }\n .dangerRow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--pui-space-3) var(--pui-space-6);\n }\n\n /* ── notifications by channel ─────────────────────────────────────────────────────────────────────────── */\n .matrix {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n }\n .matrix th,\n .matrix td {\n border-block-end: 1px solid var(--pui-line-soft);\n padding: var(--pui-space-3) var(--pui-space-4);\n font-weight: inherit;\n }\n /* cells by name, never `> *`: a last-child test followed by \"any\" makes every insert beside the page root (a portal,\n a chart's colour probe) restyle the whole page */\n .matrix tbody tr:last-child > :is(th, td) {\n border-block-end: 0;\n }\n .matrix th[scope=\"row\"] {\n padding-inline-start: var(--pui-space-5);\n text-align: start;\n }\n .matrix thead th {\n padding-block: var(--pui-space-3);\n color: var(--pui-ink-2);\n font-size: var(--pui-text-xs);\n }\n .matrix td {\n width: 96px;\n text-align: center;\n }\n .matrix tbody tr {\n transition: background-color var(--pui-motion-out);\n }\n .matrix tbody tr:hover {\n background-color: var(--pui-hover);\n }\n .channel {\n display: inline-flex;\n align-items: center;\n gap: var(--pui-space-1-5);\n }\n .channel > svg {\n width: 14px;\n height: 14px;\n color: var(--pui-ink-3);\n }\n\n /* ── the save bar wears its state: a mark at the start and a line along the bottom that fills while it saves,\n then turns green when saved or red when it failed ─────────────────────────────────────────────────── */\n .bar {\n position: relative;\n overflow: hidden;\n }\n .saveLine {\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: 2px;\n background: var(--pui-accent);\n opacity: 0;\n transform: scaleX(0);\n transform-origin: left;\n transition:\n transform var(--pui-motion-out),\n opacity var(--pui-motion-out),\n background-color var(--pui-motion-out);\n }\n .saveLine:dir(rtl) {\n transform-origin: right;\n }\n .bar[data-state=\"saving\"] .saveLine {\n opacity: 1;\n transform: scaleX(0.82);\n /* a long ease-out: it keeps moving for as long as a save usually takes, then waits near the end */\n transition-duration: calc(var(--pui-duration-sweep) * 2), var(--pui-duration-fast);\n transition-timing-function: var(--pui-ease-exit);\n }\n .bar[data-state=\"saved\"] .saveLine,\n .bar[data-state=\"failed\"] .saveLine {\n opacity: 1;\n transform: scaleX(1);\n }\n .bar[data-state=\"saved\"] .saveLine {\n background: var(--pui-green);\n }\n .bar[data-state=\"failed\"] .saveLine {\n background: var(--pui-red);\n }\n .saveIcon {\n display: grid;\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n place-items: center;\n border-radius: var(--pui-radius-pill);\n background: var(--pui-accent-tint);\n color: var(--pui-accent-ink);\n }\n .saveIcon:empty::before {\n content: \"\";\n width: 7px;\n height: 7px;\n border-radius: var(--pui-radius-pill);\n background: var(--pui-accent);\n }\n .bar[data-state=\"saving\"] .saveIcon:empty::before {\n transform: scale(0.6);\n transition: transform var(--pui-motion-out);\n }\n .bar[data-state=\"saved\"] .saveIcon {\n background: var(--pui-green-tint);\n color: var(--pui-green);\n }\n .bar[data-state=\"failed\"] .saveIcon {\n background: var(--pui-red-tint);\n color: var(--pui-red);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.identity {\n composes: m-inset from global;\n}\n.keyIcon {\n composes: m-inset from global;\n}\n.items {\n composes: scrollbar-none from global;\n}\n.plate {\n composes: plate-current from global;\n}\n"},{"path":"beamline/blocks/settings/settings.tsx","type":"registry:file","target":"src/ui/beamline/blocks/settings/settings.tsx","content":"\"use client\";\n\nimport { type MessageLabels, type Translator, dateFormatter, useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { createContext, useContext, useEffect, useId, useRef, useState, useLayoutEffect } from \"react\";\nimport type { ReactNode, Ref, CSSProperties } from \"react\";\nimport {\n Bell,\n Building2,\n Check,\n Clock,\n CreditCard,\n ImageUp,\n KeyRound,\n Mail,\n MessageSquare,\n MoreHorizontal,\n Plus,\n ShieldAlert,\n Smartphone,\n TriangleAlert,\n User,\n Users,\n} from \"lucide-react\";\nimport { Alert } from \"../../components/alert/alert\";\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogFooter,\n} from \"../../components/alert-dialog/alert-dialog\";\nimport { Avatar } from \"../../components/avatar/avatar\";\nimport { Badge } from \"../../components/badge/badge\";\nimport { Button } from \"../../components/button/button\";\nimport { Combobox } from \"../../components/combobox/combobox\";\nimport { CopyButton } from \"../../components/copy-button/copy-button\";\nimport { Dialog, DialogContent, DialogTrigger } from \"../../components/dialog/dialog\";\nimport { DropdownMenu } from \"../../components/dropdown-menu/dropdown-menu\";\nimport { HoldToConfirm } from \"../../components/hold-to-confirm/hold-to-confirm\";\nimport { Input } from \"../../components/input/input\";\nimport { Item } from \"../../components/item/item\";\nimport { RadioCards } from \"../../components/radio-cards/radio-cards\";\nimport { SegmentedControl } from \"../../components/segmented-control/segmented-control\";\nimport { Select } from \"../../components/select/select\";\nimport { SlotText } from \"../../components/slot-text/slot-text\";\nimport { Switch } from \"../../components/switch/switch\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../../components/table/table\";\nimport { TagInput } from \"../../components/tag-input/tag-input\";\nimport { TextMorph } from \"../../components/text-morph/text-morph\";\nimport { ToastStack, ToastStackProvider, useToastStack } from \"../../components/toast/toast\";\nimport { UsageMeter, type UsageMeterSegment } from \"../../components/usage-meter/usage-meter\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { glideProps, useIndicator } from \"../../hooks/use-indicator\";\nimport { cn } from \"../../lib/utils\";\nimport { useExpiring } from \"../../hooks/use-expiring\";\nimport { useElapsed } from \"../../hooks/use-elapsed\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport styles from \"./settings.module.css\";\nimport { useNow } from \"../../lib/now\";\n\nexport type SettingsSection = \"profile\" | \"workspace\" | \"members\" | \"billing\" | \"notifications\" | \"api\" | \"danger\";\nexport type BillingPeriod = \"monthly\" | \"yearly\";\n\n/** Everything the save bar saves: profile, workspace and email notifications. */\nexport interface SettingsValues {\n /** Human-readable name of this record. Required. */\n name: string;\n /** Email address shown for this person. Required. */\n email: string;\n /** IANA time zone for this person. Required. */\n timeZone: string;\n /** Optional BCP 47 language tag; not restricted to the suggestion list. */\n locale?: string;\n /** Workspace name. Omitted by default. */\n workspace?: string;\n /** Workspace URL slug. Omitted by default. */\n slug?: string;\n /** The person's photo as a URL or data URL; \"\" for none. Present (even empty) to offer upload in Profile: a chosen\n * image is cropped to a square, kept in the draft and saved with everything else. */\n avatar?: string;\n /** The chosen appearance (an appearanceOptions value). Present to show the Appearance cards in Profile. */\n appearance?: string;\n /** Workspace security, shown in Workspace when present: everyone signs in with a second step. */\n requireTwoFactor?: boolean;\n /** Workspace security, shown in Workspace when present: only these email domains may join. */\n allowedDomains?: string[];\n /** Additional profile values, keyed by profileFields. */\n profile?: Record;\n /** On or off per notification id; with notificationChannels, per `${notification}.${channel}`. */\n notifications: Record;\n}\n/** An appearance card: its preview is drawn for the built-in system, dark and light, or pass your own. */\nexport interface SettingsAppearance {\n value: string;\n label: string;\n detail?: string;\n preview?: ReactNode;\n}\n/** A notification channel: a column of switches in the notification matrix. */\nexport interface SettingsChannel {\n id: string;\n label: string;\n icon?: ReactNode;\n}\nexport interface SettingsProfileField {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Text displayed for this item. Required. */\n label: string;\n /** Whether an empty value is permitted. Omitted by default. */\n optional?: boolean;\n /** Supporting content describing this item. Omitted by default. */\n description?: string;\n /** Native autocomplete hint for this field. Omitted by default. */\n autoComplete?: string;\n /** Maximum number of characters accepted by the field. Omitted by default. */\n maxLength?: number;\n /** Returns a validation error for this field, or undefined to accept its value. Omitted by default. */\n validate?: (value: string) => string | undefined;\n}\n\nexport interface SettingsMember {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Human-readable name of this record. Required. */\n name: string;\n /** Email address shown for this person. Required. */\n email: string;\n /** Role assigned to this person. Required. */\n role: string;\n /** URL of the person avatar. Omitted by default. */\n avatar?: string;\n /** Whether this member is awaiting invitation acceptance. Omitted by default. */\n pending?: boolean;\n}\nexport interface SettingsRole {\n /** Value represented by this item. Required. */\n value: string;\n /** Text displayed for this item. Required. */\n label: string;\n}\n/** A plan's price per seat per month for each period; null when it is quoted by sales. */\nexport interface SettingsPlan {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Human-readable name of this record. Required. */\n name: string;\n /** Additional content describing this item. Omitted by default. */\n detail?: string;\n /** Monthly and yearly prices, or null when pricing is unavailable. Required. */\n price: { monthly: number; yearly: number } | null;\n}\nexport interface SettingsUsage {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Text displayed for this item. Required. */\n label: string;\n /** Unit printed beside the amount. Omitted by default. */\n unit?: string;\n /** Maximum allowed amount for this allowance. Required. */\n limit: number;\n /** Fraction of the limit at which the usage warning starts. Omitted by default. */\n warnAt?: number;\n /** Parts that make up the measured usage. Required. */\n segments: UsageMeterSegment[];\n}\n/** A key as listed after creation: only its start is ever shown again. */\nexport interface SettingsApiKey {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Human-readable name of this record. Required. */\n name: string;\n /** Non-secret API key prefix shown for identification. Required. */\n prefix: string;\n /** Creation timestamp in milliseconds since the Unix epoch. Required. */\n created: number;\n}\nexport interface SettingsNotification {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Text displayed for this item. Required. */\n label: string;\n /** Supporting content describing this item. Required. */\n description: string;\n}\n\nexport type SettingsClassNames = Partial<\n Record<\n | \"button\"\n | \"avatar\"\n | \"name\"\n | \"email\"\n | \"profileField\"\n | \"workspace\"\n | \"slug\"\n | \"timeZone\"\n | \"inviteEmails\"\n | \"role\"\n | \"dialog\"\n | \"table\"\n | \"tableHeader\"\n | \"tableBody\"\n | \"tableRow\"\n | \"confirmation\"\n | \"confirmationFooter\"\n | \"confirmationCancel\"\n | \"confirmationAction\"\n | \"memberActions\"\n | \"badge\"\n | \"period\"\n | \"plans\"\n | \"usage\"\n | \"notificationSwitch\"\n | \"copyKey\"\n | \"alert\"\n | \"keyName\"\n | \"delete\"\n | \"toasts\"\n | \"root\"\n | \"layout\"\n | \"navigation\"\n | \"heading\"\n | \"title\"\n | \"items\"\n | \"item\"\n | \"unsavedLabel\"\n | \"plate\"\n | \"fieldAttention\"\n | \"dirty\"\n | \"viewport\"\n | \"body\"\n | \"savedAt\"\n | \"column\"\n | \"photoRow\"\n | \"optional\"\n | \"domain\"\n | \"inviteIcon\"\n | \"inviteForm\"\n | \"inviteError\"\n | \"roleHeader\"\n | \"actionsHeader\"\n | \"actionsLabel\"\n | \"personCell\"\n | \"person\"\n | \"personBody\"\n | \"personName\"\n | \"personEmail\"\n | \"roleLabel\"\n | \"memberActionsIcon\"\n | \"planName\"\n | \"planChange\"\n | \"planDescription\"\n | \"wantedPlan\"\n | \"notification\"\n | \"notificationBody\"\n | \"notificationLabel\"\n | \"notificationDescription\"\n | \"keyCreateIcon\"\n | \"secretBody\"\n | \"secretRow\"\n | \"secret\"\n | \"keyForm\"\n | \"keysEmpty\"\n | \"key\"\n | \"keyIcon\"\n | \"keyBody\"\n | \"keyTitle\"\n | \"keyMeta\"\n | \"keyPrefix\"\n | \"keyCreated\"\n | \"danger\"\n | \"deleteError\"\n | \"announcement\"\n | \"saveRegion\"\n | \"saveBar\"\n | \"saveDescription\"\n | \"saveError\"\n | \"saved\"\n | \"invalid\"\n | \"section\"\n | \"sectionHeader\"\n | \"sectionIdentity\"\n | \"sectionHeading\"\n | \"sectionDescription\"\n | \"identity\"\n | \"identityName\"\n | \"identityMeta\"\n | \"group\"\n | \"panel\"\n | \"panelHeader\"\n | \"panelTitle\"\n | \"panelDescription\"\n | \"photo\"\n | \"photoActions\"\n | \"photoHint\"\n | \"photoError\"\n | \"zone\"\n | \"appearance\"\n | \"preview\"\n | \"matrix\"\n | \"security\"\n | \"saveIcon\",\n string\n >\n>;\nexport interface SettingsProps {\n /** Per-instance copy overrides UIRoot messages. */\n labels?: MessageLabels;\n /** Suggested language tags; any valid BCP 47 saved value remains supported. */\n localeOptions?: SettingsLocaleOption[];\n /** Currency for built-in plan prices. */\n currency?: string;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: SettingsClassNames;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Use tabs inside an app with its own navigation; none when the host routes sections: then the block sits flush in\n * the host's page (its background, its left edge, its heading) and shows only the section's form. */\n navigation?: \"rail\" | \"tabs\" | \"none\";\n /** The heading over the section list (rail, tabs). Null leaves it to the host; with navigation none the host's page\n * has the heading and this is not shown. */\n heading?: ReactNode | null;\n /** Beside the heading, outside it: a status the page owns, such as where saves are kept (\"Saves stay in this\n * browser\"). Shown only with a heading. */\n headingAside?: ReactNode;\n /** Extra profile Inputs use the same draft, validation and save handler. */\n profileFields?: SettingsProfileField[];\n /** The section in view, controlled or not. */\n section?: SettingsSection;\n /** Initial visible settings section when uncontrolled. Defaults to \"profile\". */\n defaultSection?: SettingsSection;\n /** Reports visible settings section after a change; no callback by default. */\n onSectionChange?: (section: SettingsSection) => void;\n /** The saved values, controlled (update them from onValuesChange) or not. */\n values?: SettingsValues;\n /** Initial field values when uncontrolled. Required. */\n defaultValues: SettingsValues;\n /** Controlled pending edits over saved values; omitted by default to keep the draft locally. */\n draft?: Partial;\n /** Restored pending edits applied once when uncontrolled; defaults to no pending edits. */\n defaultDraft?: Partial;\n /** Reports pending edits on typing, discard or successful save; no callback by default. */\n onDraftChange?: (draft: Partial) => void;\n /** Reports field values after a change; no callback by default. */\n onValuesChange?: (values: SettingsValues) => void;\n /** Persist the draft. Reject to keep the save bar with your message. */\n onSave: (values: SettingsValues, changed: string[]) => Promise;\n /** Shows \"Change photo\" next to the avatar. */\n onPhotoChange?: () => void;\n /** IANA zones for the time zone field; an empty list leaves the field out. */\n timeZones?: string[];\n /** The address the workspace URL sits under: \"northline.example\". */\n domain?: string;\n /** Email notifications with their switches. */\n notificationOptions?: SettingsNotification[];\n /** Channels (Email, Push, Slack): each notification gets a switch per channel, as a matrix. */\n notificationChannels?: SettingsChannel[];\n /** The Appearance cards, when values carry an appearance. */\n appearanceOptions?: SettingsAppearance[];\n /** Members, controlled or not; the Members section appears with them. */\n members?: SettingsMember[];\n /** Initial member records; omitted by default to hide the members section unless members is supplied. */\n defaultMembers?: SettingsMember[];\n /** Reports member records after a change; no callback by default. */\n onMembersChange?: (members: SettingsMember[]) => void;\n /** Roles that can be given; \"owner\" is shown but never offered. */\n roles?: SettingsRole[];\n /** Send invitations; resolve with the new (pending) members. */\n onInvite?: (emails: string[], role: string) => Promise;\n /** Reports role after a change; no callback by default. */\n onRoleChange?: (memberId: string, role: string) => Promise;\n /** Removes the specified workspace member; no handler by default. */\n onRemoveMember?: (memberId: string) => Promise;\n /** Plans; the Billing section appears with them. */\n plans?: SettingsPlan[];\n /** Controlled subscribed plan id; omit to use defaultPlan. */\n plan?: string;\n /** Initial subscribed plan id; defaults to the first offered plan, then an empty string. */\n defaultPlan?: string;\n /** Controlled billing period; omit to use defaultPeriod. */\n period?: BillingPeriod;\n /** Initial billing period when uncontrolled; defaults to yearly. */\n defaultPeriod?: BillingPeriod;\n /** Reports the billing period after onPlanChange succeeds; no callback by default. */\n onPeriodChange?: (period: BillingPeriod) => void;\n /** Change plan or billing period; resolve once billing has it. */\n onPlanChange?: (plan: string, period: BillingPeriod) => Promise;\n /** Seats the plan includes (the seats meter counts members). */\n seats?: number;\n /** Other metered allowances. */\n usage?: SettingsUsage[];\n /** API keys, controlled or not; the API keys section appears with them. */\n apiKeys?: SettingsApiKey[];\n /** Initial API key records; omitted by default to hide that section unless apiKeys is supplied. */\n defaultApiKeys?: SettingsApiKey[];\n /** Reports API keys after a change; no callback by default. */\n onApiKeysChange?: (keys: SettingsApiKey[]) => void;\n /** Create a key; resolve with it and its secret, which is shown once. */\n onCreateKey?: (name: string) => Promise<{ key: SettingsApiKey; secret: string }>;\n /** Revokes the specified API key; no handler by default. */\n onRevokeKey?: (keyId: string) => Promise;\n /** Schedule the workspace for deletion; the Danger zone appears with it. */\n onDeleteWorkspace?: () => Promise;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n}\n\nexport interface SettingsLocaleOption {\n value: string;\n label?: string;\n}\nexport const SETTINGS_LOCALE_OPTIONS: SettingsLocaleOption[] = [\n \"en-US\",\n \"en-GB\",\n \"de-DE\",\n \"fr-FR\",\n \"es-ES\",\n \"ja-JP\",\n].map((value) => ({ value }));\nconst ROLES = (i18n: Translator): SettingsRole[] => [\n { value: \"owner\", label: i18n(\"roleOwner\") },\n { value: \"admin\", label: i18n(\"roleAdmin\") },\n { value: \"member\", label: i18n(\"roleMember\") },\n { value: \"viewer\", label: i18n(\"roleViewer\") },\n];\nconst ZONES = [\n \"Europe/Berlin\",\n \"Europe/London\",\n \"America/New_York\",\n \"America/Los_Angeles\",\n \"Asia/Singapore\",\n \"Asia/Tokyo\",\n \"Australia/Sydney\",\n \"UTC\",\n];\nconst APPEARANCES = (i18n: Translator): SettingsAppearance[] => [\n { value: \"system\", label: i18n(\"appearanceSystem\"), detail: i18n(\"appearanceSystemDetail\") },\n { value: \"dark\", label: i18n(\"appearanceDark\"), detail: i18n(\"appearanceDarkDetail\") },\n { value: \"light\", label: i18n(\"appearanceLight\"), detail: i18n(\"appearanceLightDetail\") },\n];\n/** The channel icons a matrix shows when a channel brings none. */\nexport const SETTINGS_CHANNEL_ICONS: Record = {\n email: ,\n push: ,\n slack: ,\n};\nconst NOTIFICATIONS = (i18n: Translator): SettingsNotification[] => [\n { id: \"digest\", label: i18n(\"digest\"), description: i18n(\"digestDescription\") },\n { id: \"mentions\", label: i18n(\"mentions\"), description: i18n(\"mentionsDescription\") },\n { id: \"incidents\", label: i18n(\"incidents\"), description: i18n(\"incidentsDescription\") },\n { id: \"product\", label: i18n(\"product\"), description: i18n(\"productDescription\") },\n];\nconst ICONS: Record = {\n profile: ,\n workspace: ,\n members: ,\n billing: ,\n notifications: ,\n api: ,\n danger: ,\n};\nconst LABELS = (i18n: Translator): Record => ({\n profile: i18n(\"profile\"),\n workspace: i18n(\"workspace\"),\n members: i18n(\"members\"),\n billing: i18n(\"billing\"),\n notifications: i18n(\"notifications\"),\n api: i18n(\"apiKeys\"),\n danger: i18n(\"dangerZone\"),\n});\nfunction localizedFIELD_NAMES(i18n: Translator): Record {\n return {\n locale: \"locale\",\n name: \"name\",\n email: \"email\",\n timeZone: i18n(\"timeZone2\"),\n workspace: i18n(\"workspaceName2\"),\n slug: i18n(\"workspaceURL\"),\n avatar: \"photo\",\n appearance: \"appearance\",\n requireTwoFactor: i18n(\"twoStepSignIn\"),\n allowedDomains: i18n(\"signInDomains2\"),\n };\n}\n/** The workspace fields; every other draft field belongs to Profile (or Notifications). */\nconst WORKSPACE_FIELDS = [\"workspace\", \"slug\", \"requireTwoFactor\", \"allowedDomains\"];\nconst same = (a: unknown, b: unknown) =>\n Array.isArray(a) && Array.isArray(b) ? a.length === b.length && a.every((v, i) => v === b[i]) : a === b;\n/** What it is in a time zone now, in the reader's locale, and its offset: \"14:05\", \"GMT+2\". */\nfunction zoneNow(zone: string, now: number | null, locale?: string) {\n if (now === null) return null;\n try {\n const time = dateFormatter(locale, { timeZone: zone, hour: \"2-digit\", minute: \"2-digit\" }).format(now);\n const offset =\n dateFormatter(\"en-US\", { timeZone: zone, timeZoneName: \"shortOffset\" })\n .formatToParts(now)\n .find((p) => p.type === \"timeZoneName\")?.value ?? \"\";\n return { time, offset: offset.replace(/^GMT$/, \"GMT+0\") };\n } catch {\n return null;\n }\n}\n/** A chosen image, cropped to its centre square and scaled to 192 px, as a data URL small enough to keep. */\nasync function squarePhoto(file: File) {\n const bitmap = await createImageBitmap(file);\n const side = Math.min(bitmap.width, bitmap.height);\n const canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 192;\n canvas\n .getContext(\"2d\")\n ?.drawImage(bitmap, (bitmap.width - side) / 2, (bitmap.height - side) / 2, side, side, 0, 0, 192, 192);\n bitmap.close();\n return canvas.toDataURL(\"image/webp\", 0.86);\n}\nconst validLocale = (value: string) => {\n try {\n return Intl.getCanonicalLocales(value).length === 1;\n } catch {\n return false;\n }\n};\nconst isEmail = (v: string) => /^[^\\s@]+@[^\\s@.]+(\\.[^\\s@.]+)+$/.test(v.trim());\nconst message = (e: unknown, fallback: string) => (e instanceof Error && e.message ? e.message : fallback);\n\n/**\n * Workspace settings: a section list and one section at a time. Profile, workspace and notification edits collect in\n * a draft and a save bar offers Save or Discard; your onSave's promise drives it. Invites, role changes, plan changes,\n * keys and deletion each call their own handler and confirm with a toast; destructive ones ask first.\n */\nexport function Settings(props: SettingsProps) {\n return (\n \n \n \n );\n}\n\nfunction SettingsBody({\n labels,\n localeOptions: localeOptionsProp,\n currency = \"USD\",\n navigation = \"rail\",\n heading: headingProp,\n headingAside,\n profileFields = [],\n section: sectionProp,\n defaultSection = \"profile\",\n onSectionChange,\n values,\n defaultValues,\n draft: draftProp,\n defaultDraft = {},\n onDraftChange,\n onValuesChange,\n onSave,\n onPhotoChange,\n timeZones = ZONES,\n domain = \"app.example.com\",\n notificationOptions: notificationOptionsProp,\n notificationChannels,\n appearanceOptions: appearanceOptionsProp,\n members: membersProp,\n defaultMembers,\n onMembersChange,\n roles: rolesProp,\n onInvite,\n onRoleChange,\n onRemoveMember,\n plans,\n plan: planProp,\n defaultPlan,\n period: periodProp,\n defaultPeriod = \"yearly\",\n onPeriodChange,\n onPlanChange,\n seats,\n usage = [],\n apiKeys: keysProp,\n defaultApiKeys,\n onApiKeysChange,\n onCreateKey,\n onRevokeKey,\n onDeleteWorkspace,\n className,\n classNames,\n style,\n ref,\n}: SettingsProps) {\n const i18n = useMessages(\"settings\", englishMessages, labels);\n const localeOptions = localeOptionsProp ?? SETTINGS_LOCALE_OPTIONS;\n const heading = headingProp === undefined ? i18n(\"heading\") : headingProp;\n const notificationOptions = notificationOptionsProp ?? NOTIFICATIONS(i18n);\n const appearanceOptions = appearanceOptionsProp ?? APPEARANCES(i18n);\n const roles = rolesProp ?? ROLES(i18n);\n const sectionLabels = LABELS(i18n);\n const day = (value: number) => i18n.date(value, { month: \"short\", day: \"numeric\", year: \"numeric\" });\n\n const { toast } = useToastStack();\n const root = useRef(null);\n const localeField = useRef(null);\n const composedRef = useComposedRef(root, ref);\n const pendingFocus = useRef(null);\n const hasWorkspace =\n (values ?? defaultValues).workspace !== undefined || (values ?? defaultValues).slug !== undefined;\n const hasMembers = !!(membersProp ?? defaultMembers);\n const hasKeys = !!(keysProp ?? defaultApiKeys);\n const sections: SettingsSection[] = [\n \"profile\",\n \"notifications\",\n ...(hasWorkspace ? [\"workspace\" as const] : []),\n ...(hasMembers ? [\"members\" as const] : []),\n ...(plans?.length ? [\"billing\" as const] : []),\n ...(hasKeys ? [\"api\" as const] : []),\n ...(onDeleteWorkspace ? [\"danger\" as const] : []),\n ];\n const [sectionRaw, setSection] = useControllable(sectionProp, defaultSection, onSectionChange);\n const section = sections.includes(sectionRaw) ? sectionRaw : \"profile\";\n // the chosen section's plate travels between items (and stretches toward the new one) instead of switching off here\n // and on there; a reflow (the rail becoming a row of tabs) places it without travel\n const [itemsRef, plate] = useIndicator('[data-slot=\"item\"][data-state=\"selected\"]');\n\n // ── the draft: edits over the saved values ─────────────────────────────────\n const [saved, setSaved] = useControllable(values, defaultValues, onValuesChange);\n const [edits, setEdits] = useControllable(draftProp, defaultDraft, onDraftChange);\n const draft: SettingsValues = {\n ...saved,\n ...edits,\n notifications: { ...saved.notifications, ...edits.notifications },\n profile: { ...saved.profile, ...edits.profile },\n };\n const hasAvatar = saved.avatar !== undefined;\n const hasAppearance = saved.appearance !== undefined;\n const hasSecurity = saved.requireTwoFactor !== undefined || saved.allowedDomains !== undefined;\n // with channels each notification has a switch per channel: \"digest.email\"\n const notificationKeys = notificationChannels?.length\n ? notificationOptions.flatMap((n) => notificationChannels.map((c) => `${n.id}.${c.id}`))\n : notificationOptions.map((n) => n.id);\n const changed = [\n ...(Object.keys(localizedFIELD_NAMES(i18n)) as (keyof ReturnType)[]).filter(\n (k) => !same(draft[k as keyof SettingsValues], saved[k as keyof SettingsValues]),\n ),\n ...profileFields\n .filter((field) => (draft.profile?.[field.id] ?? \"\") !== (saved.profile?.[field.id] ?? \"\"))\n .map((field) => `profile.${field.id}`),\n ...notificationKeys\n .filter((key) => !!draft.notifications[key] !== !!saved.notifications[key])\n .map((key) => `notifications.${key}`),\n ];\n const [saving, setSaving] = useState(false);\n const [saveError, setSaveError] = useState<{ message: string; field?: string } | null>(null);\n const [savedAt, setSavedAt] = useState(null);\n const [showSaved, setShowSaved] = useExpiring(1600);\n const [announcement, setAnnouncement] = useState(\"\");\n const saveBarRef = useRef(null);\n const [toastBottom, setToastBottom] = useState(0);\n const saveBarVisible = changed.length > 0 || showSaved;\n const barState = saveError ? \"failed\" : saving ? \"saving\" : showSaved && !changed.length ? \"saved\" : \"dirty\";\n useLayoutEffect(() => {\n const bar = saveBarRef.current,\n host = root.current;\n if (!saveBarVisible || !bar || !host) return;\n const measure = () =>\n setToastBottom(Math.max(0, host.getBoundingClientRect().bottom - bar.getBoundingClientRect().top));\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(bar);\n observer.observe(host);\n host.addEventListener(\"scroll\", measure, true);\n return () => {\n observer.disconnect();\n host.removeEventListener(\"scroll\", measure, true);\n };\n }, [saveBarVisible]);\n\n const fieldSection = (key: string): SettingsSection =>\n key.startsWith(\"notifications.\") ? \"notifications\" : WORKSPACE_FIELDS.includes(key) ? \"workspace\" : \"profile\";\n const knownFields = [\n \"locale\",\n \"name\",\n \"email\",\n ...(hasAvatar ? [\"avatar\"] : []),\n ...(hasWorkspace ? [\"workspace\", \"slug\"] : []),\n ...profileFields.map((field) => `profile.${field.id}`),\n ];\n const clearFieldError = (key: string) => setSaveError((error) => (error?.field === key ? null : error));\n const set = (key: K, value: SettingsValues[K]) => {\n setEdits((edits) => ({ ...edits, [key]: value }));\n setShowSaved(null);\n clearFieldError(key);\n };\n const setProfile = (key: string, value: string) => {\n setEdits((edits) => ({ ...edits, profile: { ...edits.profile, [key]: value } }));\n setShowSaved(null);\n clearFieldError(`profile.${key}`);\n };\n const errors: Record = {\n locale: draft.locale !== undefined && !validLocale(draft.locale) ? i18n(\"localeInvalid\") : undefined,\n name: draft.name.trim() ? undefined : i18n(\"nameRequired\"),\n email: isEmail(draft.email) ? undefined : i18n(\"emailInvalid\"),\n ...(hasWorkspace\n ? {\n workspace: draft.workspace?.trim() ? undefined : i18n(\"workspaceRequired\"),\n slug: /^[a-z0-9-]{3,32}$/.test(draft.slug ?? \"\") ? undefined : i18n(\"slugInvalid\"),\n }\n : {}),\n ...Object.fromEntries(\n profileFields.map((field) => {\n const value = draft.profile?.[field.id] ?? \"\";\n return [\n `profile.${field.id}`,\n !field.optional && !value.trim()\n ? i18n(\"fieldRequired\", { field: field.label })\n : field.optional && !value.trim()\n ? undefined\n : field.validate?.(value),\n ];\n }),\n ),\n };\n const invalid = Object.values(errors).some(Boolean);\n if (saveError?.field) errors[saveError.field] = saveError.message;\n const focusHeading = () =>\n root.current?.querySelector('[data-slot=\"settings-section-heading\"]')?.focus({ preventScroll: true });\n const focusField = (field: string) =>\n field === \"locale\"\n ? localeField.current?.focus()\n : root.current?.querySelector(`[data-settings-field=\"${CSS.escape(field)}\"]`)?.focus();\n useEffect(() => {\n const selected = root.current?.querySelector('[data-slot=\"item\"][data-state=\"selected\"]');\n const row = selected?.parentElement;\n if (selected && row && row.scrollWidth > row.clientWidth) {\n const target = selected.getBoundingClientRect();\n const viewport = row.getBoundingClientRect();\n // Scroll this row only. scrollIntoView would also move the host page when the block is in a preview frame.\n if (target.left < viewport.left) row.scrollBy({ left: target.left - viewport.left });\n else if (target.right > viewport.right) row.scrollBy({ left: target.right - viewport.right });\n }\n if (pendingFocus.current) {\n focusField(pendingFocus.current);\n pendingFocus.current = null;\n }\n }, [section]);\n const elapsed = useElapsed(saving);\n useEffect(() => {\n if (saving) {\n setAnnouncement(i18n(\"saving\"));\n return;\n }\n if (!changed.length) return;\n const timer = setTimeout(() => setAnnouncement(i18n(\"unsavedCount\", { count: changed.length })), 500);\n return () => clearTimeout(timer);\n }, [changed.length, saving, i18n]);\n async function save() {\n if (invalid || saving) return;\n const submitted = { ...draft, name: draft.name.trim(), email: draft.email.trim() };\n const submittedEdits = edits;\n setSaving(true);\n setSaveError(null);\n try {\n await onSave(submitted, changed);\n setSaved(submitted);\n // A handler may be pending while the person keeps typing. Only remove the edits it actually saved.\n setEdits((latest) => {\n const remaining = { ...latest };\n for (const key of Object.keys(submittedEdits) as (keyof SettingsValues)[]) {\n if (key === \"profile\" || key === \"notifications\") {\n const values: Record = { ...latest[key] };\n for (const id of Object.keys(submittedEdits[key] ?? {})) {\n if (latest[key]?.[id] === submittedEdits[key]?.[id]) delete values[id];\n }\n if (Object.keys(values).length) Object.assign(remaining, { [key]: values });\n else delete remaining[key];\n } else if (latest[key] === submittedEdits[key]) delete remaining[key];\n }\n return remaining;\n });\n setSavedAt(new Date());\n setShowSaved(true);\n setAnnouncement(i18n(\"saved\"));\n focusHeading();\n } catch (error) {\n const tagged = error as { field?: string };\n const field = tagged?.field && knownFields.includes(tagged.field) ? tagged.field : undefined;\n setSaveError({ message: message(error, i18n(\"saveFailed\")), field });\n if (field && fieldSection(field) === section) requestAnimationFrame(() => focusField(field));\n } finally {\n setSaving(false);\n }\n }\n const discard = () => {\n setEdits({});\n setSaveError(null);\n setShowSaved(null);\n setAnnouncement(i18n(\"changesDiscarded\"));\n focusHeading();\n };\n const goToField = () => {\n if (!saveError?.field) return;\n pendingFocus.current = saveError.field;\n setSection(fieldSection(saveError.field));\n };\n\n // ── photo and clock ───────────────────────────────────────────────────────\n const photoInput = useRef(null);\n const [photoError, setPhotoError] = useState(null);\n const [dropping, setDropping] = useState(false);\n async function pickPhoto(file: File | undefined) {\n if (!file) return;\n if (!file.type.startsWith(\"image/\")) {\n setPhotoError(i18n(\"photoNotImage\"));\n return;\n }\n try {\n set(\"avatar\", await squarePhoto(file));\n setPhotoError(null);\n } catch {\n setPhotoError(i18n(\"photoUnreadable\"));\n }\n }\n // the time zone field says what time it is there; it moves on at each new minute, not on a running timer. The clock\n // is read only in the browser (useNow: null on the server and while hydrating), so a server-rendered page can show\n // this screen: Next.js 16 refused to prerender it while the first render read Date.now() (3 Nov free-path run)\n const firstNow = useNow();\n const [tick, setTick] = useState(null);\n const now = tick ?? firstNow;\n useEffect(() => {\n if (now === null || section !== \"profile\" || !timeZones.length) return;\n const timer = setTimeout(() => setTick(Date.now()), 60_000 - (Date.now() % 60_000) + 50);\n return () => clearTimeout(timer);\n }, [now, section, timeZones.length]);\n const zone = zoneNow(draft.timeZone, now, i18n.locale);\n\n // ── members ───────────────────────────────────────────────────────────────\n const [members, setMembers] = useControllable(membersProp, defaultMembers ?? [], onMembersChange);\n const [inviteOpen, setInviteOpen] = useState(false);\n const [invite, setInvite] = useState([]);\n const [inviteRole, setInviteRole] = useState(\n roles.find((r) => r.value === \"member\")?.value ?? roles.at(-1)?.value ?? \"\",\n );\n const [inviting, setInviting] = useState(false);\n const [inviteError, setInviteError] = useState(null);\n const [removing, setRemoving] = useState(null);\n const [busyRemove, setBusyRemove] = useState(false);\n const roleLabel = (v: string) => roles.find((r) => r.value === v)?.label ?? v;\n async function sendInvites() {\n if (!onInvite || !invite.length) return;\n setInviting(true);\n setInviteError(null);\n try {\n const added = await onInvite(invite, inviteRole);\n setMembers((current) => [...current, ...added]);\n toast({\n type: \"success\",\n title: i18n(\"invitationsSent\", { count: added.length }),\n description: i18n(\"invitationExpiry\"),\n });\n setInvite([]);\n setInviteOpen(false);\n } catch (e) {\n setInviteError(message(e, i18n(\"inviteFailed\")));\n } finally {\n setInviting(false);\n }\n }\n const roleRequests = useRef(new Map());\n async function changeRole(m: SettingsMember, role: string) {\n const request = Symbol();\n roleRequests.current.set(m.id, request);\n setMembers((current) => current.map((x) => (x.id === m.id ? { ...x, role } : x)));\n try {\n await onRoleChange?.(m.id, role);\n if (roleRequests.current.get(m.id) !== request) return;\n toast({ type: \"success\", title: i18n(\"roleChanged\", { name: m.name, value: roleLabel(role) }) });\n } catch (e) {\n if (roleRequests.current.get(m.id) !== request) return;\n setMembers((current) => current.map((x) => (x.id === m.id && x.role === role ? { ...x, role: m.role } : x)));\n toast({\n type: \"error\",\n title: i18n(\"roleChangeFailed\", { name: m.name }),\n description: message(e, i18n(\"retry\")),\n });\n } finally {\n if (roleRequests.current.get(m.id) === request) roleRequests.current.delete(m.id);\n }\n }\n async function removeMember() {\n if (!removing) return;\n setBusyRemove(true);\n try {\n await onRemoveMember?.(removing.id);\n setMembers((current) => current.filter((x) => x.id !== removing.id));\n toast({\n type: \"success\",\n title: removing.pending\n ? i18n(\"invitationWithdrawn\", { email: removing.email })\n : i18n(\"memberRemoved\", { name: removing.name }),\n });\n setRemoving(null);\n } catch (e) {\n toast({ type: \"error\", title: i18n(\"removeFailed\"), description: message(e, i18n(\"retry\")) });\n } finally {\n setBusyRemove(false);\n }\n }\n\n // ── billing ───────────────────────────────────────────────────────────────\n const [plan, setPlan] = useControllable(planProp, defaultPlan ?? plans?.[0]?.id ?? \"\", undefined);\n const [period, setPeriod] = useControllable(periodProp, defaultPeriod, onPeriodChange);\n const [choice, setChoice] = useState<{ plan: string; period: BillingPeriod } | null>(null);\n const [switching, setSwitching] = useState(false);\n const wanted = choice ?? { plan, period };\n const pending = wanted.plan !== plan || wanted.period !== period;\n const planName = (id: string) => plans?.find((p) => p.id === id)?.name ?? id;\n const yearlySaving = Math.max(\n 0,\n ...(plans ?? []).map((p) =>\n p.price && p.price.monthly > 0 ? Math.round((1 - p.price.yearly / p.price.monthly) * 100) : 0,\n ),\n );\n async function switchPlan() {\n setSwitching(true);\n try {\n await onPlanChange?.(wanted.plan, wanted.period);\n setPlan(wanted.plan);\n setPeriod(wanted.period);\n setChoice(null);\n toast({\n type: \"success\",\n title: i18n(\"planChanged\", {\n value: planName(wanted.plan),\n period: i18n(wanted.period === \"monthly\" ? \"monthlyPeriod\" : \"yearlyPeriod\"),\n }),\n });\n } catch (e) {\n toast({ type: \"error\", title: i18n(\"planChangeFailed\"), description: message(e, i18n(\"retry\")) });\n } finally {\n setSwitching(false);\n }\n }\n\n // ── API keys ──────────────────────────────────────────────────────────────\n const [keys, setKeys] = useControllable(keysProp, defaultApiKeys ?? [], onApiKeysChange);\n const [keyOpen, setKeyOpen] = useState(false);\n const [keyName, setKeyName] = useState(\"\");\n const [creating, setCreating] = useState(false);\n const [keyError, setKeyError] = useState(null);\n const [secret, setSecret] = useState<{ name: string; value: string } | null>(null);\n const [revoking, setRevoking] = useState(null);\n const [busyRevoke, setBusyRevoke] = useState(false);\n const changeKeyOpen = (open: boolean) => {\n setKeyOpen(open);\n if (!open) {\n setSecret(null);\n setKeyError(null);\n setKeyName(\"\");\n }\n };\n async function createKey() {\n if (!onCreateKey) return;\n if (!keyName.trim()) {\n setKeyError(i18n(\"keyNameRequired\"));\n return;\n }\n setCreating(true);\n setKeyError(null);\n try {\n const { key, secret: value } = await onCreateKey(keyName.trim());\n setKeys((current) => [...current, key]);\n setSecret({ name: key.name, value });\n setKeyName(\"\");\n } catch (e) {\n setKeyError(message(e, i18n(\"keyFailed\")));\n } finally {\n setCreating(false);\n }\n }\n async function revokeKey() {\n if (!revoking) return;\n setBusyRevoke(true);\n try {\n await onRevokeKey?.(revoking.id);\n setKeys((current) => current.filter((k) => k.id !== revoking.id));\n toast({\n type: \"success\",\n title: i18n(\"revoked\", { name: revoking.name }),\n description: i18n(\"keyRevokedDescription\"),\n });\n setRevoking(null);\n } catch (e) {\n toast({\n type: \"error\",\n title: i18n(\"keyRevokeFailed\", { name: revoking.name }),\n description: message(e, i18n(\"retry\")),\n });\n } finally {\n setBusyRevoke(false);\n }\n }\n\n // ── danger zone ───────────────────────────────────────────────────────────\n const [deletion, setDeletion] = useState<\"idle\" | \"working\" | \"scheduled\" | \"failed\">(\"idle\");\n const [deleteError, setDeleteError] = useState(null);\n async function deleteWorkspace() {\n if (!onDeleteWorkspace) return;\n setDeletion(\"working\");\n setDeleteError(null);\n try {\n await onDeleteWorkspace();\n setDeletion(\"scheduled\");\n toast({\n type: \"warning\",\n title: i18n(\"deletionScheduledToast\"),\n description: i18n(\"deletionCancellationWindow\"),\n });\n } catch (e) {\n setDeletion(\"failed\");\n setDeleteError(message(e, i18n(\"deleteFailed\")));\n }\n }\n\n const active = members.filter((m) => !m.pending).length;\n const invited = members.length - active;\n\n return (\n \n
\n {navigation !== \"none\" && (\n \n {heading != null && (\n
\n \n {heading}\n \n {headingAside}\n
\n )}\n {hasWorkspace && (\n // whose settings these are: the workspace, its plan and its people, above the list\n
\n \n \n \n {saved.workspace}\n \n \n {[\n plans?.length ? planName(plan) : null,\n hasMembers ? i18n(\"identityMembers\", { count: active }) : null,\n ]\n .filter(Boolean)\n .join(\" · \") || domain}\n \n \n
\n )}\n
\n {plate && (\n \n )}\n {sections.map((s) => [\n // in the rail the list falls into the person's own sections and the workspace's\n hasWorkspace && (s === \"profile\" || s === \"workspace\") && (\n \n {s === \"profile\" ? i18n(\"groupAccount\") : i18n(\"workspace\")}\n \n ),\n \n {sectionLabels[s]}\n {changed.some((key) => fieldSection(key) === s) && (\n \n {\" \"}\n {i18n(\"unsaved\")}\n \n )}\n \n }\n meta={\n saveError?.field && fieldSection(saveError.field) === s ? (\n \n ▲\n \n ) : changed.some((key) => fieldSection(key) === s) ? (\n \n ) : undefined\n }\n selected={section === s}\n onSelect={() => setSection(s)}\n className={cn(\"shrink-0\", styles.item, classNames?.item)}\n />,\n ])}\n
\n \n )}\n\n \n
\n \n {i18n(\"savedAt\", { value: i18n.date(savedAt, { hour: \"2-digit\", minute: \"2-digit\" }) })}\n

\n )\n }\n >\n \n
\n {section === \"profile\" && (\n \n \n
\n {\n e.preventDefault();\n setDropping(true);\n }\n : undefined\n }\n onDragLeave={hasAvatar ? () => setDropping(false) : undefined}\n onDrop={\n hasAvatar\n ? (e) => {\n e.preventDefault();\n setDropping(false);\n void pickPhoto(e.dataTransfer.files[0]);\n }\n : undefined\n }\n >\n \n {hasAvatar ? (\n \n {\n void pickPhoto(e.target.files?.[0]);\n e.target.value = \"\";\n }}\n />\n photoInput.current?.click()}\n >\n \n {draft.avatar ? i18n(\"photoChange\") : i18n(\"photoUpload\")}\n \n {draft.avatar && (\n set(\"avatar\", \"\")}\n >\n {i18n(\"remove\")}\n \n )}\n
\n ) : (\n onPhotoChange && (\n \n {i18n(\"changePhoto\")}\n \n )\n )}\n {hasAvatar &&\n (photoError || errors.avatar ? (\n \n {photoError ?? errors.avatar}\n

\n ) : (\n \n {i18n(\"photoHint\")}\n

\n ))}\n
\n
\n set(\"name\", e.target.value)}\n error={errors.name}\n />\n set(\"email\", e.target.value)}\n error={errors.email}\n description={i18n(\"emailDescription\")}\n />\n {profileFields.map((field) => (\n \n {field.label}\n {field.optional && (\n \n {\" \"}\n {i18n(\"optional\")}\n \n )}\n \n }\n data-settings-field={`profile.${field.id}`}\n name={field.id}\n required={!field.optional}\n autoComplete={field.autoComplete}\n maxLength={field.maxLength}\n description={field.description}\n value={draft.profile?.[field.id] ?? \"\"}\n onChange={(event) => setProfile(field.id, event.target.value)}\n error={errors[`profile.${field.id}`]}\n />\n ))}\n {timeZones.length > 0 && (\n {\n const there = zoneNow(z, now, i18n.locale);\n return {\n value: z,\n label: z.replace(/_/g, \" \"),\n description: there ? `${there.time} · ${there.offset}` : undefined,\n keywords: there ? [there.offset] : undefined,\n };\n })}\n value={draft.timeZone}\n onValueChange={(v) => v && set(\"timeZone\", v)}\n description={\n zone ? (\n \n \n \n {i18n(\"zoneNow\", { time: zone.time, offset: zone.offset })}\n \n \n ) : (\n i18n(\"timeZoneDescription\")\n )\n }\n />\n )}\n {(draft.locale !== undefined || localeOptionsProp !== undefined) && (\n set(\"locale\", value)}\n error={errors.locale}\n options={[\n ...localeOptions,\n ...(!localeOptions.some((o) => o.value === (draft.locale ?? i18n.locale))\n ? [{ value: draft.locale ?? i18n.locale }]\n : []),\n ].map((option) => ({\n value: option.value,\n label:\n option.label ??\n (validLocale(option.value)\n ? new Intl.DisplayNames(i18n.locale, { type: \"language\" }).of(option.value)\n : option.value) ??\n option.value,\n }))}\n />\n )}\n
\n
\n \n {hasAppearance && (\n \n set(\"appearance\", v)}\n cards={appearanceOptions.map((a) => ({\n value: a.value,\n label: a.label,\n detail: a.detail,\n media: a.preview ?? ,\n }))}\n />\n \n )}\n \n )}\n\n {section === \"workspace\" && (\n \n \n
\n set(\"workspace\", e.target.value)}\n error={errors.workspace}\n />\n set(\"slug\", e.target.value.toLowerCase())}\n leading={\n \n {domain}/\n \n }\n error={errors.slug}\n description={i18n(\"workspaceUrlDescription\")}\n />\n
\n \n {hasSecurity && (\n \n {saved.requireTwoFactor !== undefined && (\n set(\"requireTwoFactor\", v)}\n />\n )}\n {saved.allowedDomains !== undefined && (\n set(\"allowedDomains\", v)}\n placeholder={i18n(\"signInDomainsPlaceholder\")}\n validate={(v) =>\n /^([a-z0-9-]+\\.)+[a-z]{2,}$/i.test(v.trim()) ? undefined : i18n(\"domainInvalid\")\n }\n error={errors.allowedDomains}\n />\n )}\n \n )}\n \n )}\n\n {section === \"members\" && (\n {\n setInviteOpen(o);\n if (!o) setInviteError(null);\n }}\n >\n \n \n \n \n setInviteOpen(false)}\n disabled={inviting}\n >\n {i18n(\"cancel\")}\n \n \n {i18n(\"sendInvites\", { count: invite.length })}\n \n \n }\n >\n
\n \n isEmail(v)\n ? members.some((m) => m.email === v.trim())\n ? i18n(\"alreadyMember\")\n : undefined\n : i18n(\"emailRequired\")\n }\n />\n r.value !== \"owner\")}\n value={inviteRole}\n onValueChange={setInviteRole}\n />\n {inviteError && (\n \n {inviteError}\n

\n )}\n
\n \n \n )\n }\n >\n \n \n \n \n {i18n(\"person\")}\n {i18n(\"role\")}\n \n \n {i18n(\"actions\")}\n \n \n \n \n \n {members.map((m) => (\n \n \n \n \n \n \n {m.name}\n {m.pending && (\n \n {i18n(\"invited\")}\n \n )}\n \n \n {m.email}\n \n \n \n \n \n {m.role === \"owner\" || !onRoleChange ? (\n \n {roleLabel(m.role)}\n \n ) : (\n r.value !== \"owner\")}\n value={m.role}\n onValueChange={(role) => changeRole(m, role)}\n />\n )}\n \n \n {/* a row's actions wait for attention (hover, focus, an open menu; always on touch) */}\n {m.role !== \"owner\" && onRemoveMember && (\n \n \n }\n items={[\n {\n label: m.pending ? i18n(\"withdrawInvitation\") : i18n(\"removeFromWorkspace\"),\n tone: \"danger\",\n onSelect: () => setRemoving(m),\n },\n ]}\n />\n \n )}\n \n \n ))}\n \n
\n \n {\n if (!o && !busyRemove) setRemoving(null);\n }}\n >\n {removing && (\n \n \n \n {i18n(\"cancel\")}\n \n {\n e.preventDefault();\n removeMember();\n }}\n >\n {removing.pending ? i18n(\"withdraw\") : i18n(\"remove\")}\n \n \n \n )}\n \n \n )}\n\n {section === \"billing\" && plans && (\n setChoice({ plan: wanted.plan, period: p as BillingPeriod })}\n options={[\n { value: \"monthly\", label: i18n(\"monthly\") },\n {\n value: \"yearly\",\n label: i18n(\"yearly\"),\n note: yearlySaving ? i18n.number(-yearlySaving / 100, { style: \"percent\" }) : undefined,\n activeNote: yearlySaving\n ? i18n(\"savingDiscount\", {\n percent: i18n.number(yearlySaving / 100, { style: \"percent\" }),\n })\n : undefined,\n },\n ]}\n />\n }\n >\n setChoice({ plan: p, period: wanted.period })}\n cards={plans.map((p) => ({\n value: p.id,\n detail: p.detail,\n label: (\n \n {p.name}\n {p.id === plan && (\n \n {i18n(\"current\")}\n \n )}\n \n ),\n // the price rolls when the period changes, as it does on the plan comparison\n figure: p.price ? (\n <>\n \n \n i18n.number(v, {\n style: \"currency\",\n currency,\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n })\n }\n />\n {\" \"}\n {i18n(\"priceUnit\")}\n \n ) : (\n i18n(\"contactSales\")\n ),\n }))}\n />\n {/* the pending switch grows in under the plans, so the meters below glide down */}\n {pending && (\n
\n \n \n \n {i18n(\"planChangeDescription\", {\n plan: planName(wanted.plan),\n period: i18n(wanted.period === \"monthly\" ? \"monthlyPeriod\" : \"yearlyPeriod\"),\n })}\n \n

\n setChoice(null)}\n disabled={switching}\n >\n {i18n(\"keepCurrent\")}\n \n \n {i18n(\"switchPlan\")}\n \n
\n
\n )}\n {(seats != null || usage.length > 0) && (\n \n
\n {seats != null && (\n \n )}\n {usage.map((u) => (\n \n ))}\n
\n \n )}\n \n )}\n\n {section === \"notifications\" && (\n \n {notificationChannels?.length ? (\n // one switch per event and channel: rows are what happened, columns are where it reaches you\n \n \n \n \n \n {i18n(\"event\")}\n \n {notificationChannels.map((c) => (\n \n \n {c.icon ?? SETTINGS_CHANNEL_ICONS[c.id]}\n {c.label}\n \n \n ))}\n \n \n \n {notificationOptions.map((n) => (\n \n \n \n {n.label}\n \n \n {n.description}\n \n \n {notificationChannels.map((c) => {\n const key = `${n.id}.${c.id}`;\n return (\n \n \n set(\"notifications\", { ...edits.notifications, [key]: v })\n }\n />\n \n );\n })}\n \n ))}\n \n \n \n ) : (\n \n {notificationOptions.map((n) => (\n \n \n \n {n.label}\n

\n \n {n.description}\n

\n \n set(\"notifications\", { ...edits.notifications, [n.id]: v })}\n />\n \n ))}\n \n )}\n \n )}\n\n {section === \"api\" && (\n \n \n \n \n changeKeyOpen(false)}>\n {i18n(\"done\")}\n \n ) : (\n <>\n changeKeyOpen(false)}\n disabled={creating}\n >\n {i18n(\"cancel\")}\n \n \n \n )\n }\n >\n {secret ? (\n \n \n \n {secret.value}\n \n \n \n }>\n {i18n(\"keySecretWarning\")}\n \n \n ) : (\n {\n e.preventDefault();\n createKey();\n }}\n >\n {\n setKeyName(e.target.value);\n setKeyError(null);\n }}\n placeholder={i18n(\"keyNamePlaceholder\")}\n error={keyError ?? undefined}\n autoFocus\n />\n \n )}\n \n \n )\n }\n >\n \n {keys.length === 0 && (\n \n {i18n(\"keysEmpty\")}\n

\n )}\n {keys.map((k) => (\n \n \n \n \n
\n \n {k.name}\n

\n \n \n {k.prefix}…\n {\" \"}\n \n {i18n(\"keyCreated\", { date: day(k.created) })}\n \n

\n
\n {onRevokeKey && (\n setRevoking(k)}\n >\n {i18n(\"revoke\")}\n \n )}\n \n ))}\n \n {\n if (!o && !busyRevoke) setRevoking(null);\n }}\n >\n {revoking && (\n \n \n \n {i18n(\"cancel\")}\n \n {\n e.preventDefault();\n revokeKey();\n }}\n >\n {i18n(\"revokeKey\")}\n \n \n \n )}\n \n \n )}\n\n {section === \"danger\" && (\n \n {deletion === \"scheduled\" ? (\n \n {i18n(\"deletionScheduledDescription\", { workspace: saved.workspace ?? \"\" })}\n \n ) : (\n \n
\n
\n

\n {i18n(\"deleteWorkspaceTitle\", { workspace: saved.workspace ?? \"\" })}\n

\n

{i18n(\"deleteWorkspaceDescription\")}

\n
\n \n {deleteError && (\n \n {deleteError}\n

\n )}\n
\n \n )}\n \n )}\n \n \n \n \n\n \n {announcement}\n \n {(changed.length > 0 || showSaved) && (\n \n \n \n {/* one mark that changes with the bar's state: a dot for unsaved work, a ring while saving, a tick, a\n warning; keyed so each new state arrives instead of switching */}\n \n {barState === \"saved\" ? (\n \n ) : barState === \"failed\" ? (\n \n ) : null}\n \n \n {saveError ? (\n \n {saveError.field ? i18n(\"fieldSaveFailed\") : saveError.message}\n \n ) : saving ? (\n {elapsed > 2 ? i18n(\"savingElapsed\", { elapsed }) : i18n(\"saving\")}\n ) : showSaved && !changed.length ? (\n \n {i18n(\"saved\")}\n \n ) : (\n <>\n {i18n(\"unsavedCount\", { count: changed.length })}\n {invalid && (\n \n {\" \"}\n {i18n(\"fixInvalidField\")}\n \n )}\n \n )}\n

\n {saveError?.field && fieldSection(saveError.field) !== section && (\n \n )}\n {changed.length > 0 && (\n <>\n \n {i18n(\"discard\")}\n \n \n {saveError ? i18n(\"tryAgain\") : i18n(\"save\")}\n \n \n )}\n \n \n )}\n \n \n \n \n );\n}\n\n/** \"Saved 20:41\" after a save this session, shown in the current section's header (O4 §3.2). */\nconst SavedCaption = createContext(null);\n\nfunction Section({\n classNames,\n title,\n description,\n action,\n children,\n}: {\n title: string;\n classNames?: SettingsClassNames;\n description: string;\n action?: ReactNode;\n children: ReactNode;\n}) {\n const id = useId();\n const caption = useContext(SavedCaption);\n return (\n \n \n
\n \n {title}\n \n \n {description}\n

\n
\n {/* the last save's time sits in the header it belongs to, so it never pushes the form down */}\n {caption}\n {action}\n \n {children}\n \n );\n}\n\n/** Inside your own page (navigation none) a group has no surface of its own: the form sits flush on your page. */\nconst FlatPanels = createContext(false);\n\n/** One group of a section on its own surface: an optional title row, then its fields or rows. */\nfunction Panel({\n classNames,\n title,\n description,\n flush,\n tone,\n className,\n children,\n}: {\n classNames?: SettingsClassNames;\n title?: string;\n description?: string;\n /** Rows and tables run to the panel's edges. */\n flush?: boolean;\n tone?: \"danger\";\n className?: string;\n children: ReactNode;\n}) {\n const flat = useContext(FlatPanels);\n const id = useId();\n return (\n \n {title && (\n
\n

\n {title}\n

\n {description && (\n

\n {description}\n

\n )}\n
\n )}\n {children}\n \n );\n}\n\n/** A small window in the scheme a card offers: system shows both halves. Drawn from the theme's own tokens. */\nfunction SchemePreview({ scheme, className }: { scheme: string; className?: string }) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default Settings;\n"},{"path":"beamline/components/_shared/chip.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/chip.tsx","content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\nimport { focusAfterRemoval } from \"../../lib/focus\";\nimport { IconAction } from \"./icon-action\";\n\n/** A value inside a field (a tag, a chosen option) with its remove button. */\nexport function FieldChip({\n children,\n onRemove,\n removeLabel,\n active,\n disabled,\n invalid,\n className,\n textClassName,\n removeClassName,\n flip,\n fit,\n}: {\n children: ReactNode;\n onRemove?: () => void;\n removeLabel: string;\n active?: boolean;\n disabled?: boolean;\n invalid?: boolean;\n className?: string;\n textClassName?: string;\n removeClassName?: string;\n /** A stable key: the chip grows in, slides and leaves a ghost inside a container that runs useFlip. */\n flip?: string;\n /** One of a row's items that useFit counts (the row folds what does not fit into \"+N\"). */\n fit?: boolean;\n}) {\n return (\n \n \n {children}\n \n {onRemove && (\n {\n e.stopPropagation();\n const chip = e.currentTarget.closest(\"[data-slot=field-chip]\");\n focusAfterRemoval(chip, { scope: chip?.closest(\"[data-slot=field-control]\") });\n onRemove();\n }}\n className={removeClassName}\n >\n \n \n )}\n \n );\n}\n"},{"path":"beamline/components/_shared/delta-ghost.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/delta-ghost.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* The ghost spans the two real values. A loss sits under the fill in a pale wash of its colour, holds for a flash and\n drains toward the new end; a gain sits over the fill, lit, and cools. Reduced motion: shown still, then gone. */\n .ghost {\n --g-color: var(--pui-ink-3);\n position: absolute;\n inset-block: 0;\n inset-inline-start: calc(var(--g-lo) * 100%);\n width: calc((var(--g-hi) - var(--g-lo)) * 100%);\n pointer-events: none;\n }\n .ghost[data-kind=\"loss\"] {\n z-index: 0;\n background: color-mix(in oklab, var(--g-color) 42%, transparent);\n box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-color) 55%, transparent);\n animation: drain calc(var(--pui-duration-flash) * 2.4) var(--pui-ease-standard) both;\n }\n .ghost[data-kind=\"gain\"] {\n z-index: 2;\n /* a lift of the fill's own light, not a white flash */\n /* organism-allow-start: literal-colour -- a lift of the fill's own light (white at low alpha over any tone), not a theme colour */\n background: light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.26));\n box-shadow: inset 0 0 0 1px light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.3));\n /* organism-allow-end */\n animation: cool calc(var(--pui-duration-flash) * 2.2) var(--pui-ease-exit) both;\n }\n /* reduced motion: the same moment, without movement */\n .ghost[data-reduced] {\n /* organism-allow: literal-motion -- reduced motion collapses duration tokens to 1ms; this still-frame must stay readable for its moment */\n animation: hold 1.1s steps(1, end) both;\n }\n /* the loss drains toward where the bar now ends (the start side of the ghost) */\n @keyframes drain {\n 0%,\n 46% {\n clip-path: inset(0 0 0 0);\n }\n 100% {\n clip-path: inset(0 100% 0 0);\n }\n }\n .ghost[data-kind=\"loss\"]:dir(rtl) {\n animation-name: drain-rtl;\n }\n @keyframes drain-rtl {\n 0%,\n 46% {\n clip-path: inset(0 0 0 0);\n }\n 100% {\n clip-path: inset(0 0 0 100%);\n }\n }\n @keyframes cool {\n 0%,\n 25% {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes hold {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n}\n"},{"path":"beamline/components/_shared/delta-ghost.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/delta-ghost.tsx","content":"\"use client\";\n\nimport { useCallback, useLayoutEffect, useRef, useState, type CSSProperties } from \"react\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./delta-ghost.module.css\";\n\n/**\n * Magnitude memory for a bar (research/morphing-interfaces-2026-10-04, M4). When a value drops, the part it lost stays\n * as a pale ghost for a moment and then drains toward the new end; when it rises, the part it gained arrives lit and\n * cools. You see how much changed, not only the new value. The ghost always spans two real values (before and after),\n * never an invented in-between. A run of changes the same way extends one ghost; a reversal starts a new one. With\n * reduced motion the ghost is shown still for the same moment and then removed, so the information stays.\n */\nexport interface Ghost {\n /** Fractions of the track (0–1): where the bar was and where it is now. */\n from: number;\n to: number;\n /** Increments per change, to restart the CSS animation. */\n key: number;\n}\n\nexport function useDeltaGhost(value: number | null | undefined) {\n const before = useRef(value);\n const [ghost, setGhost] = useState(null);\n useLayoutEffect(() => {\n const was = before.current;\n before.current = value;\n if (was == null || value == null || !Number.isFinite(was) || !Number.isFinite(value) || was === value) return;\n setGhost((g) => {\n const sameWay = g && Math.sign(g.to - g.from) === Math.sign(value - was) && g.to === was;\n return { from: sameWay ? g.from : was, to: value, key: (g?.key ?? 0) + 1 };\n });\n }, [value]);\n const clear = useCallback(() => setGhost(null), []);\n return [ghost, clear] as const;\n}\n\n/** The ghost itself, absolutely placed in a relative, clipped track. `color` is the fill's colour. */\nexport function DeltaGhost({\n ghost,\n onDone,\n color,\n className,\n}: {\n ghost: Ghost | null;\n onDone: () => void;\n color?: string;\n className?: string;\n}) {\n const reduced = useReducedMotionSafe();\n if (!ghost) return null;\n const lo = Math.max(0, Math.min(1, Math.min(ghost.from, ghost.to)));\n const hi = Math.max(0, Math.min(1, Math.max(ghost.from, ghost.to)));\n if (hi - lo < 0.002) return null;\n return (\n {\n if (e.target === e.currentTarget) onDone();\n }}\n />\n );\n}\n"},{"path":"beamline/components/_shared/field.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/field.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* A field: label (with an optional aside at the end of its row), the control, then one message line. The gap under\n the control belongs to the message (--pui-field-gap), so a message that arrives or leaves takes its gap with it. */\n /* a column, not a grid: a message (or a fold) that leaves pulls its gap away with a negative margin, which a flex\n column honours and a grid track does not (it would stop at zero and stretch the leaving part back open) */\n .field {\n --pui-field-gap: var(--pui-space-1-5);\n /* positioned: a hidden label or a count's spoken words (sr-only, absolutely placed) stay inside the field */\n position: relative;\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--pui-field-gap);\n }\n .labelRow {\n display: flex;\n min-width: 0;\n align-items: baseline;\n gap: var(--pui-space-2);\n }\n .aside {\n margin-inline-start: auto;\n flex-shrink: 0;\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n }\n\n /* The message: one line at a time. A new line grows in to its own height (0fr to 1fr, no measuring) while the one it\n replaces folds away above it, so the height glides from one to the other; a line that leaves with nothing after it\n takes the gap with it. Arrival over --pui-motion-in, departure over --pui-motion-out; reduced motion keeps the fades. */\n .messages {\n display: grid;\n margin-top: calc(var(--pui-field-gap, var(--pui-space-1-5)) * -1);\n }\n .line {\n display: grid;\n grid-template-rows: 1fr;\n opacity: 1;\n transition:\n grid-template-rows var(--pui-motion-in) var(--pui-ease-default),\n opacity var(--pui-fade-in, var(--pui-motion-in)) var(--pui-ease-default);\n }\n @starting-style {\n .line {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n }\n /* the line a field is first drawn with does not grow in */\n .line[data-initial] {\n transition: none;\n }\n /* a swap is one change of size: the old line folds and the new one grows over the same duration and curve, so their\n sum (the field's height) moves straight from one to the other, with no swell between; the old words fade first */\n .line[data-leaving] {\n grid-template-rows: 0fr;\n opacity: 0;\n transition:\n grid-template-rows var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-fade-in, var(--pui-motion-in)) var(--pui-ease-default);\n pointer-events: none;\n }\n .messages:has(> .line[data-leaving]) > .line:not([data-leaving], [data-initial]) {\n transition-duration: var(--pui-motion-out), var(--pui-fade-in, var(--pui-motion-in));\n }\n .clip {\n min-height: 0;\n overflow: clip;\n overflow-clip-margin: var(--pui-space-1);\n }\n .message {\n display: flex;\n align-items: flex-start;\n gap: var(--pui-space-1-5);\n padding-top: var(--pui-field-gap, var(--pui-space-1-5));\n font-size: var(--pui-text-xs);\n line-height: 1.375;\n }\n .description {\n display: block;\n color: var(--pui-ink-3);\n }\n .error {\n color: var(--pui-red);\n }\n .success {\n color: var(--pui-green);\n }\n .icon {\n flex-shrink: 0;\n width: var(--pui-icon-sm);\n height: var(--pui-icon-sm);\n margin-top: 1px;\n }\n\n /* The count in the label's row: tabular, quiet, shown with attention (.reveal) and in words near the limit. */\n .count {\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n .count[data-state=\"near\"],\n .count[data-state=\"full\"] {\n color: var(--pui-orange);\n }\n .count[data-state=\"over\"] {\n color: var(--pui-red);\n }\n\n /* The status at the end of the frame: the spinner arrives scaled in from its centre, and closes into the check. */\n .status {\n display: inline-grid;\n flex-shrink: 0;\n place-items: center;\n animation: status-in var(--pui-motion-in) var(--pui-ease-default);\n }\n @keyframes status-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.4 * var(--pui-motion-travel, 1));\n }\n }\n\n /* The one frame every text-like control sits in: input, textarea, password, search, number, the select and date\n triggers. Its paint (fill, edge, hover, focus) is the field role of the look in force (looks.css); invalid,\n read-only and disabled are drawn here so they read the same in every look. */\n .frame {\n --_field-height: var(--pui-control-height-md);\n position: relative;\n display: flex;\n min-width: 0; /* a grid or flex parent may make it narrower than the input's natural width */\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--_field-height);\n padding-inline: var(--pui-space-2-5);\n border-radius: var(--pui-field-radius, var(--pui-radius-control));\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: text;\n transition:\n box-shadow var(--pui-motion-out) var(--pui-ease-default),\n background-color var(--pui-motion-out) var(--pui-ease-default);\n }\n .frame:hover:not([data-disabled]) {\n transition-duration: 0ms;\n }\n .frame[data-state=\"open\"] {\n box-shadow: var(--m-field-edge-focus);\n }\n .frame:focus-within {\n transition: none;\n }\n .frame[data-disabled] {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .frame[data-readonly] {\n --m-field-bg: transparent;\n }\n .sm {\n --_field-height: var(--pui-control-height-sm);\n padding-inline: var(--pui-space-2);\n }\n .lg {\n --_field-height: var(--pui-control-height-lg);\n padding-inline: var(--pui-space-3);\n font-size: var(--pui-text-base);\n }\n .multiline {\n align-items: stretch;\n padding-block: var(--pui-space-2);\n }\n\n /* The control itself: borderless, it takes the frame's look. Focus shows on the frame, so the control's own ring is off\n (the frame's ring is the visible focus indicator, which is always present when the control has focus). */\n .control {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: calc(var(--_field-height) - 2px);\n border: 0;\n outline: none;\n background: transparent;\n color: inherit;\n font: inherit;\n letter-spacing: inherit;\n padding: 0;\n }\n .control:focus-visible {\n outline: none;\n }\n .control::placeholder {\n color: var(--pui-ink-3);\n opacity: 1;\n }\n .control:disabled {\n cursor: not-allowed;\n }\n textarea.control {\n min-height: 0;\n resize: none;\n line-height: 1.5;\n field-sizing: content;\n }\n .adornment {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .adornment :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.frame {\n composes: m-field nest-corner from global;\n}\n"},{"path":"beamline/components/_shared/field.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/field.tsx","content":"\"use client\";\nimport { useMessages } from \"../../runtime/localization\";\nimport { english } from \"./messages\";\n\nimport {\n useEffect,\n useId,\n useRef,\n useState,\n type CSSProperties,\n type PointerEvent as ReactPointerEvent,\n type ReactNode,\n type Ref,\n type TransitionEvent,\n} from \"react\";\nimport { AlertCircle, CircleCheck } from \"lucide-react\";\nimport { Label } from \"../label/label\";\nimport { Spinner } from \"../spinner/spinner\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./field.module.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\nexport type FieldClassNames = Partial<\n Record<\"root\" | \"label\" | \"frame\" | \"leading\" | \"trailing\" | \"description\" | \"error\" | \"success\" | \"aside\", string>\n>;\n\nexport interface FieldOptions {\n /** Visible label, also the accessible name. */\n label?: ReactNode;\n /** Keep the label for assistive tech only (dense rows, toolbars). */\n hideLabel?: boolean;\n /** One line of help under the control. */\n description?: ReactNode;\n /** The problem and its fix; replaces the description and marks the control invalid. */\n error?: ReactNode;\n /** The confirmation that the value works (\"@mira is available\"): replaces the description, with a check. */\n success?: ReactNode;\n required?: boolean;\n size?: FieldSize;\n}\n\n/** Ids and aria wiring for one field: the control gets these spread onto it. */\nexport function useFieldIds(\n id?: string,\n { description, error, success }: Pick = {},\n) {\n const auto = useId();\n const controlId = id ?? `field-${auto}`;\n // the line under the field is one of three, and the control points at whichever is there\n const descriptionId = (success || description) && !error ? `${controlId}-description` : undefined;\n const errorId = error ? `${controlId}-error` : undefined;\n return {\n controlId,\n descriptionId,\n errorId,\n aria: {\n id: controlId,\n \"aria-describedby\": [descriptionId, errorId].filter(Boolean).join(\" \") || undefined,\n \"aria-invalid\": error ? true : undefined,\n \"aria-errormessage\": errorId,\n },\n };\n}\n\n/** Label above (with an optional aside at the end of its row: a counter, a link), control frame, then the message. */\nexport function Field({\n label,\n hideLabel,\n description,\n error,\n success,\n required,\n controlId,\n descriptionId,\n errorId,\n aside,\n className,\n classNames,\n style,\n slot = \"field\",\n requiredOnControl,\n children,\n}: FieldOptions & {\n controlId: string;\n descriptionId?: string;\n errorId?: string;\n /** At the end of the label's row: a character count, \"Forgot password?\", \"Optional\". */\n aside?: ReactNode;\n className?: string;\n classNames?: FieldClassNames;\n style?: CSSProperties;\n slot?: string;\n /** The control carries `required` itself, so the label does not repeat it in the control's name. */\n requiredOnControl?: boolean;\n children: ReactNode;\n}) {\n const labelNode = label != null && (\n \n {label}\n \n );\n return (\n \n {aside != null ? (\n
\n {labelNode}\n \n {aside}\n \n
\n ) : (\n labelNode\n )}\n {children}\n \n \n );\n}\n\ntype Tone = \"error\" | \"success\" | \"description\";\ninterface Line {\n key: string;\n tone: Tone;\n content: ReactNode;\n}\nconst ICON = { error: AlertCircle, success: CircleCheck } as const;\n\n/**\n * The line under a field: its problem when there is one, else its confirmation, else its help. Shared by every field\n * and choice group. A change of line keeps its path: the new line grows in under the control while the old one folds\n * away above it, so what sits below glides instead of jumping, and a quick reversal turns around from where it is.\n * The leaving line is a still copy, hidden from assistive tech and inert; ids and aria point only at the line that is\n * there. It is gone when its fold ends, and by the clock as well: a line that leaves in the frame it arrived has no\n * fold to run, so no end is reported.\n */\nexport function FieldMessage({\n error,\n success,\n description,\n errorId,\n descriptionId,\n slot = \"field\",\n classNames,\n}: Pick & {\n errorId?: string;\n descriptionId?: string;\n /** The slot names' prefix: \"checkbox\" names the lines checkbox-error, checkbox-description. */\n slot?: string;\n classNames?: Pick;\n}) {\n const tone: Tone | null = error ? \"error\" : success ? \"success\" : description ? \"description\" : null;\n const content = error || success || description;\n // a new text is a new line (one problem replacing another also folds and grows); rich content changes in place\n const text = typeof content === \"string\" || typeof content === \"number\" ? String(content) : \"\";\n const current: Line | null = tone ? { key: `${tone}\\u0000${text}`, tone, content } : null;\n const [last, setLast] = useState(current);\n const [leaving, setLeaving] = useState(null);\n // the line a field is drawn with is simply there; only a change of line moves\n const [changed, setChanged] = useState(false);\n if ((last?.key ?? null) !== (current?.key ?? null)) {\n // the line that was there leaves (one at a time: a line already leaving is gone at once)\n setLeaving(last && last.key !== current?.key ? last : null);\n setLast(current);\n setChanged(true);\n }\n const box = useRef(null);\n useEffect(() => {\n if (!leaving) return;\n // the clock is the leaving line's own longest transition, read once as it starts to leave (the fold's end event\n // usually comes first), so a field resolves no motion tokens of its own\n const el = box.current?.querySelector(\"[data-leaving]\");\n const longest = el\n ? Math.max(\n 0,\n ...getComputedStyle(el)\n .transitionDuration.split(\",\")\n .map((t) => parseFloat(t) * (t.trim().endsWith(\"ms\") ? 1 : 1000) || 0),\n )\n : 0;\n const id = window.setTimeout(() => setLeaving((l) => (l === leaving ? null : l)), longest + 250);\n return () => window.clearTimeout(id);\n }, [leaving]);\n if (!current && !leaving) return null;\n const shown = leaving && leaving.key === current?.key ? null : leaving;\n const ids = { error: errorId, success: descriptionId, description: descriptionId };\n const line = (l: Line, gone: boolean) => {\n const Icon = l.tone === \"description\" ? null : ICON[l.tone];\n return (\n ) => {\n if (e.target === e.currentTarget && e.propertyName === \"grid-template-rows\") setLeaving(null);\n }\n : undefined\n }\n >\n
\n \n {Icon && }\n {l.content}\n

\n
\n \n );\n };\n return (\n
\n {shown && line(shown, true)}\n {current && line(current, false)}\n
\n );\n}\n\n/** What the end of a text field says about its work: a spinner while a value is checked, a drawn check when it works. */\nexport type FieldStatus = \"busy\" | \"success\";\n\n/** The frame a text-like control sits in; clicking anywhere on it focuses the control. */\nexport function FieldFrame({\n size = \"md\",\n invalid,\n disabled,\n readOnly,\n multiline,\n status,\n statusLabel: statusLabelProp,\n leading,\n trailing,\n className,\n classNames,\n children,\n onPointerDown,\n ref,\n}: {\n size?: FieldSize;\n invalid?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n multiline?: boolean;\n /** busy: a spinner at the end while the value is checked or saved; success: the ring closes into a check. */\n status?: FieldStatus;\n /** What the spinner says while busy (\"Checking\", \"Saving\"). */\n statusLabel?: string;\n leading?: ReactNode;\n trailing?: ReactNode;\n className?: string;\n classNames?: FieldClassNames;\n children: ReactNode;\n onPointerDown?: (e: ReactPointerEvent) => void;\n /** The frame itself, for a control that lays out by the frame's width (useWidthAs). */\n ref?: Ref;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const statusLabel = statusLabelProp === undefined ? i18n(\"statusLabel\") : statusLabelProp;\n\n return (\n {\n onPointerDown?.(e);\n // a click on the frame's padding or an adornment that is not itself interactive focuses the control\n const t = e.target as HTMLElement;\n if (t === e.currentTarget || (t.closest(\"[data-adornment]\") && !t.closest(\"button, a, input, [role=button]\"))) {\n e.preventDefault();\n e.currentTarget.querySelector(\"input, textarea\")?.focus();\n }\n }}\n >\n {leading && (\n \n {leading}\n \n )}\n {children}\n {status && (\n // one ring for both: it spins while the value is checked and closes into the check when it works\n \n \n \n )}\n {trailing && (\n \n {trailing}\n \n )}\n \n );\n}\n\n/**\n * A character count for the label's row (Field `aside`): quiet (\"58/140\") and shown while the field has attention,\n * then always shown and in words as the limit nears (\"12 left\", \"Limit reached\", \"3 over\"), so it never competes with\n * the label at rest. Assistive tech hears it only when it crosses into those words, not at every key.\n */\nexport function FieldCount({\n length,\n max,\n near: nearAt,\n slot = \"field-count\",\n className,\n}: {\n length: number;\n max: number;\n /** How many left turns it into words: by default 10 % of the limit, at least 5 (characters); 1 suits a few tags. */\n near?: number;\n slot?: string;\n className?: string;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const left = max - length;\n const near = left <= (nearAt ?? Math.max(5, Math.ceil(max * 0.1)));\n const state = left < 0 ? \"over\" : left === 0 ? \"full\" : near ? \"near\" : \"room\";\n const words =\n state === \"over\"\n ? i18n(\"fieldOver\", { count: -left })\n : state === \"full\"\n ? i18n(\"fieldFull\")\n : i18n(\"fieldLeft\", { count: left });\n return (\n \n {state === \"room\" ? `${i18n.number(length)}/${i18n.number(max)}` : words}\n \n {state === \"room\" ? \"\" : words}\n \n \n );\n}\n\n/** The class a native input or textarea needs inside a FieldFrame. */\nexport const fieldControlClass = styles.control;\n\n/** What a choice group (segmented control, radio cards) spreads onto its own root when it is a form field. */\nexport interface ChoiceFieldAria {\n \"aria-labelledby\": string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: true;\n}\n\n/**\n * Whether a choice control (segmented control, radio cards, chip group) is laid out as a form field, its label shown\n * above like every field's: when asked (`field`), when it has a description, error or required mark, and whenever its\n * label is not hidden. A view switch or a quick filter passes `hideLabel`: its label stays for assistive tech only.\n * (Trials t16 and t19: agents wrote and the question never showed.)\n */\nexport function choiceIsField(\n field: boolean | undefined,\n label: ReactNode,\n hideLabel: boolean | undefined,\n marked: boolean,\n) {\n return field ?? (marked || (label != null && label !== \"\" && !hideLabel));\n}\n\n/**\n * A choice group as a form field: the visible label above (with the required marker), the group, then its help or its\n * problem — the same frame and message every text field has. Groups that name themselves only for assistive tech\n * (a view switch in a toolbar) do not use it.\n */\nexport function ChoiceField({\n slot,\n label,\n hideLabel,\n required,\n description,\n error,\n className,\n style,\n classNames,\n requiredOnControl,\n children,\n}: Omit & {\n slot: string;\n /** The group carries `aria-required` itself (a radiogroup), so the label does not repeat it in the group's name. */\n requiredOnControl?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: Pick;\n children: (aria: ChoiceFieldAria) => ReactNode;\n}) {\n const auto = useId();\n const labelId = `choice-${auto}-label`;\n const messageId = error || description ? `choice-${auto}-message` : undefined;\n return (\n
\n \n {label}\n \n {children({\n \"aria-labelledby\": labelId,\n ...(messageId ? { \"aria-describedby\": messageId } : {}),\n ...(error ? { \"aria-invalid\": true as const } : {}),\n })}\n \n
\n );\n}\n"},{"path":"beamline/components/_shared/fold-more.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/fold-more.tsx","content":"\"use client\";\n// organism-allow-file: raw-control -- the shared +N part itself, painted by its owner's look\nimport { useMessages } from \"../../runtime/localization\";\nimport { english } from \"./messages\";\n\nimport { useLayoutEffect, useRef, type PointerEventHandler } from \"react\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { rollText } from \"./roll\";\nimport { resolveCssEasing } from \"../../lib/css-values\";\nimport { cn } from \"../../lib/utils\";\n\n/** The most names the tooltip lists before it counts the rest. */\nconst NAMED = 8;\n/** A fold that has just appeared settles its count without a roll: the row measures the \"+N\" once it is on screen and\n * may correct the count right after (the room did not change, so nothing should travel). */\nconst SETTLING_MS = 400;\n\n/**\n * The \"+N\" a folded row ends in (hooks/use-fit.ts): one part for every row of chips, tags, filters or sources, so a\n * fold reads and behaves the same in each. It counts what did not fit and names those items in the system tooltip on\n * hover or focus; with `onExpand` it is a button that shows them all (\"Show 3 more filters: …\" to a screen reader),\n * without it a quiet mark for a field that brings its items back on its own (a tag field on focus). When the room\n * changes, the count rolls to its new value: up as more fold, down as they come back (a fold that has just appeared\n * settles its first count in place). The row gives it its geometry through `className` (height, radius, padding), so\n * it stands like its neighbours; the look and the behaviour are the part's.\n */\nexport function FoldMore({\n names,\n noun,\n onExpand,\n onPointerDown,\n marks = true,\n hidden,\n slot,\n className,\n}: {\n /** The folded items, in order: their count is shown; their names are the tooltip and the spoken label. */\n names: string[];\n /** What the items are, for the spoken label (\"sources\", \"filters\"). */\n noun?: string;\n /** Show every folded item (the row expands, a menu opens). Without it the mark is not a control. */\n onExpand?: () => void;\n onPointerDown?: PointerEventHandler;\n /** Mark it as the row's overflow control for useFit and useFlip (`data-fit-more`, `data-flip=\"more\"`). Off when a\n * wrapper of the caller's is the row's child and carries the marks (a list item). Default true. */\n marks?: boolean;\n /** Hidden from assistive tech: the control it sits in already names every item (a multi-select trigger). */\n hidden?: boolean;\n /** The owner's part name (data-slot). */\n slot?: string;\n className?: string;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const count = useRef(null);\n const motion = useMotionTokens(count);\n const last = useRef(names.length);\n const born = useRef(null);\n useLayoutEffect(() => {\n born.current ??= performance.now();\n const was = last.current;\n last.current = names.length;\n const el = count.current;\n if (!el || was === names.length || motion.reduced || performance.now() - born.current < SETTLING_MS) return;\n rollText(el, `+${i18n.number(was)}`, `+${i18n.number(names.length)}`, names.length > was ? 1 : -1, {\n duration: motion.duration.standard * 1000,\n easing: resolveCssEasing(el, \"--pui-ease-default\"),\n });\n }, [names.length, i18n]); // eslint-disable-line react-hooks/exhaustive-deps -- rolls on a change of the count only\n const listed =\n names.length > NAMED\n ? i18n(\"foldMore\", { list: i18n.list(names.slice(0, NAMED)), count: names.length - NAMED })\n : i18n.list(names);\n const marked = marks ? { \"data-fit-more\": \"\", \"data-flip\": \"more\" } : {};\n const look = cn(\n \"relative inline-flex h-6 shrink-0 items-center rounded-chip px-2 text-xs text-ink-2 tabular-nums\",\n \"shadow-[inset_0_0_0_1px_var(--pui-line)]\",\n );\n const body = (\n \n +{i18n.number(names.length)}\n \n );\n return (\n \n {onExpand ? (\n \n {body}\n \n ) : (\n \n {body}\n \n )}\n \n );\n}\n"},{"path":"beamline/components/_shared/glide.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/glide.tsx","content":"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport overlay from \"./overlay.module.css\";\n\n/**\n * The gliding highlight for a list whose active row is tracked in state (command menu, listbox): one plate travels to\n * the active row for the arrow keys and the pointer alike, over --pui-duration-fast. It appears in place (no travel)\n * the first time and whenever `reset` changes (a new page or a new query), so typing never sends it flying.\n * The list must be the plate's offset parent (position: relative); rows stay above it (overlay.item is z-index 1).\n */\nexport function GlidePlate({\n list,\n selector,\n reset,\n axis = \"y\",\n className,\n}: {\n list: RefObject;\n /** Finds the active row inside `list`; null when nothing is active. */\n selector: string | null;\n reset?: unknown;\n /** \"y\" for a list (the plate spans the width); \"xy\" for a row or grid of cells (it takes each cell's size). */\n axis?: \"y\" | \"xy\";\n className?: string;\n}) {\n const [plate, setPlate] = useState<{ x: number; y: number; w: number; h: number; jump: boolean } | null>(null);\n const lastReset = useRef(reset);\n const self = useRef(null);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose; setPlate bails out when unchanged\n useLayoutEffect(() => {\n // the list holds the plate, and React attaches a parent's ref only after its children's layout effects: on the\n // first commit the list is the plate's own parent (it placed itself only when something rendered again later)\n const host = list.current ?? self.current?.parentElement;\n const row = selector ? host?.querySelector(selector) : null;\n const fresh = lastReset.current !== reset;\n lastReset.current = reset;\n if (!row) {\n setPlate((p) => (p && p.h ? { ...p, h: 0 } : p));\n return;\n }\n const x = row.offsetLeft,\n y = row.offsetTop,\n w = row.offsetWidth,\n h = row.offsetHeight;\n setPlate((p) =>\n p && p.x === x && p.y === y && p.w === w && p.h === h && !fresh ? p : { x, y, w, h, jump: fresh || !p?.h },\n );\n // every render: rows can arrive or change height without the selector changing; an unchanged place keeps the state\n });\n return (\n \n );\n}\n\n/**\n * A GlidePlate for lists whose highlight is the pointer or keyboard focus rather than state (time picker, plain option\n * lists): it follows the row under the pointer or holding focus, and fades when neither is in the list. Rows drop\n * their own hover and focus tint.\n */\nexport function FollowPlate({\n list,\n rows,\n className,\n}: {\n list: RefObject;\n /** Matches a row inside `list`, e.g. \"[role=option]\". */\n rows: string;\n className?: string;\n}) {\n const [hot, setHot] = useState(null);\n // after the commit, when the list's ref is attached (a layout effect here ran before it and never listened)\n useEffect(() => {\n const el = list.current;\n if (!el) return;\n let n = 0;\n const mark = (target: EventTarget | null) => {\n const row = (target as HTMLElement | null)?.closest?.(rows);\n if (!row || !el.contains(row)) return;\n row.dataset.glideKey ??= String(++n);\n setHot(row.dataset.glideKey);\n };\n const over = (e: Event) => mark(e.target);\n const leave = () => {\n if (!el.contains(document.activeElement)) setHot(null);\n };\n const blur = (e: FocusEvent) => {\n if (!el.contains(e.relatedTarget as Node)) setHot(null);\n };\n el.addEventListener(\"pointerover\", over);\n el.addEventListener(\"focusin\", over);\n el.addEventListener(\"pointerleave\", leave);\n el.addEventListener(\"focusout\", blur);\n return () => {\n el.removeEventListener(\"pointerover\", over);\n el.removeEventListener(\"focusin\", over);\n el.removeEventListener(\"pointerleave\", leave);\n el.removeEventListener(\"focusout\", blur);\n };\n }, [list, rows]);\n return ;\n}\n"},{"path":"beamline/components/_shared/icon-action.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/icon-action.module.css","content":"@layer properties, theme, base, components, utilities;\n/* The small square action that sits inside another element: a field's clear and open buttons, a chip's remove, a\n toast's close, a carousel's previous and next. One recipe so every one of them answers alike: quiet ink at rest,\n the hover plate at once, the press at once, both let go over --pui-motion-out. Its corner is the chip radius: under\n the nested-corner rule (.nest-corner) a part whose own corner is the chip never changes inside a rounded frame. */\n@layer components {\n .root {\n position: relative;\n display: grid;\n flex-shrink: 0;\n place-items: center;\n inline-size: var(--_size);\n block-size: var(--_size);\n border-radius: var(--pui-radius-chip);\n color: var(--pui-ink-3);\n /* opacity and translate stay in the list so a .reveal action keeps its own arrival whichever rule wins */\n transition:\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n transform var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-motion-out) var(--pui-ease-default),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n .root:hover:not(:disabled),\n .root[data-pressed] {\n background-color: var(--pui-hover);\n color: var(--pui-ink);\n }\n .root:hover {\n transition-duration: 0ms;\n }\n .root:active:not(:disabled) {\n transform: scale(var(--pui-press-scale));\n transition-duration: 0ms;\n }\n .root:disabled {\n cursor: default;\n opacity: 0.4;\n }\n .root[data-tone=\"ink-2\"] {\n color: var(--pui-ink-2);\n }\n .root[data-tone=\"inherit\"] {\n color: inherit;\n }\n .root[data-tone=\"inherit\"]:hover:not(:disabled) {\n color: inherit;\n }\n /* on an inverted (ink) surface: inverse ink, a faint inverse plate */\n .root[data-tone=\"inverse\"] {\n color: color-mix(in oklab, var(--pui-ink-inverse) 72%, transparent);\n }\n .root[data-tone=\"inverse\"]:hover:not(:disabled),\n .root[data-tone=\"inverse\"][data-pressed] {\n background-color: color-mix(in oklab, var(--pui-ink-inverse) 12%, transparent);\n color: var(--pui-ink-inverse);\n }\n\n .xs {\n --_size: 1.25rem;\n }\n /* a 20px action still takes a 24px hit (WCAG 2.5.8): the bleed is outside the drawn square */\n .xs::after {\n position: absolute;\n inset: calc((var(--pui-hit-min) - 1.25rem) / -2);\n content: \"\";\n }\n .sm {\n --_size: 1.5rem;\n }\n .md {\n --_size: 1.75rem;\n }\n .lg {\n --_size: 2rem;\n }\n}\n"},{"path":"beamline/components/_shared/icon-action.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/icon-action.tsx","content":"\"use client\";\n// organism-allow-file: raw-control -- the shared part every element draws this control from\n\nimport type { ButtonHTMLAttributes, Ref } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./icon-action.module.css\";\n\n/** 20 · 24 · 28 · 32 px. A 20px action keeps a 24px hit outside its square. */\nexport type IconActionSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface IconActionProps extends ButtonHTMLAttributes {\n /** The action's name: the button holds only an icon. */\n \"aria-label\": string;\n size?: IconActionSize;\n /** Rest ink: ink-3 (the default, an action beside content), ink-2 (an action that is the row's point), inverse (on\n * an inverted ink surface) or inherit (on a painted surface that brings its own colours). */\n tone?: \"ink-3\" | \"ink-2\" | \"inverse\" | \"inherit\";\n /** Holds the hover plate while what it opens is open, or while it is switched on. */\n pressed?: boolean;\n ref?: Ref;\n}\n\n/**\n * The small square icon action inside another element (clear, remove, dismiss, previous, next, retry). One recipe for\n * all of them; a full-size action with words is a Button, and Button with iconOnly is the standalone square.\n */\nexport function IconAction({\n size = \"sm\",\n tone = \"ink-3\",\n pressed,\n type = \"button\",\n className,\n ref,\n ...props\n}: IconActionProps) {\n return (\n \n );\n}\n"},{"path":"beamline/components/_shared/list-controls.messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/list-controls.messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n pagination: \"Pagination\",\n previousPage: \"Previous page\",\n nextPage: \"Next page\",\n pageUnknown: \"Page {page} · total unknown\",\n rowsPerPage: \"Rows per page\",\n perPage: \"{value} / page\",\n loadMore: \"Load more\",\n retryMore: \"Retry loading more\",\n loadingMore: \"Loading more…\",\n end: \"End of results\",\n selectRows: \"Select rows\",\n allVisible: \"All visible rows\",\n selected: \"{count} selected\",\n selectedHidden: \"{count} selected · {hidden} not shown\",\n clearSelection: \"Clear selection\",\n selectAllMatching: \"Select all {count} matching rows\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/_shared/list-controls.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/list-controls.tsx","content":"\"use client\";\nimport { useMessages } from \"../../runtime/localization\";\nimport { english } from \"./list-controls.messages\";\nimport { english as feedbackEnglish } from \"./list-feedback.messages\";\n\nimport { useEffect, useRef, type RefObject } from \"react\";\nimport { Button } from \"../button/button\";\nimport { Pagination } from \"../pagination/pagination\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\nimport { Select } from \"../select/select\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport type { ListWindowProps } from \"../../lib/list\";\nimport { useListEnd } from \"./list-state\";\n\nexport function ListPagination({\n page,\n pageSize,\n rowCount,\n onPageChange,\n onPageSizeChange,\n hasMore,\n}: ListWindowProps & { page: number; pageSize: number; onPageChange: (page: number) => void }) {\n const i18n = useMessages(\"_shared-list-controls\", english);\n return (\n
\n
\n {rowCount != null ? (\n \n ) : (\n \n )}\n
\n {onPageSizeChange && (\n onPageSizeChange(Number(value))}\n options={[...new Set([10, 25, 50, 100, pageSize])]\n .sort((a, b) => a - b)\n .map((value) => ({ value: String(value), label: i18n(\"perPage\", { value }) }))}\n />\n )}\n
\n );\n}\n\nexport function ListEnd({\n root,\n resultKey,\n hasMore = true,\n automatic = true,\n loadLabel: loadLabelProp,\n ...props\n}: ListWindowProps & {\n loading?: boolean;\n error?: unknown;\n root?: RefObject;\n resultKey: string | number;\n automatic?: boolean;\n loadLabel?: string;\n}) {\n const i18n = useMessages(\"_shared-list-controls\", english);\n const loadLabel = loadLabelProp === undefined ? i18n(\"loadMore\") : loadLabelProp;\n const end = useRef(null);\n const { request, failure, busy } = useListEnd({\n ...props,\n hasMore,\n resultKey,\n });\n useEffect(() => {\n if (!automatic || !end.current || !props.onEndReached || !hasMore || typeof IntersectionObserver === \"undefined\")\n return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) void request();\n },\n { root: root?.current ?? null },\n );\n observer.observe(end.current);\n return () => observer.disconnect();\n }, [root, request, props.onEndReached, hasMore, automatic]);\n if (!props.onEndReached) return null;\n return (\n \n {failure && (\n \n {failure}\n \n )}\n {hasMore ? (\n void request(true)}\n >\n {failure || props.error ? i18n(\"retryMore\") : props.loadingMore || busy ? i18n(\"loadingMore\") : loadLabel}\n \n ) : (\n {i18n(\"end\")}\n )}\n \n );\n}\n\n/** Inline status leaves the list and its controls mounted during a refresh or a failure. */\nexport function ListFeedback({ loading, error, onRetry }: import(\"../../lib/list\").ListProps) {\n const i18n = useMessages(\"_shared-list-feedback\", feedbackEnglish);\n const message = error instanceof Error ? error.message : error;\n if (!message && !loading) return null;\n return (\n
\n {message || i18n(\"loading\")}\n {message && onRetry && (\n \n )}\n
\n );\n}\n\nexport function ListFooter({\n state,\n props,\n automatic = true,\n loadLabel,\n}: {\n state: {\n page: number;\n pageSize: number;\n rowCount?: number | null;\n pagination: boolean;\n setPage: (value: number) => void;\n setPageSize: (value: number) => void;\n query: string;\n filters: import(\"../../lib/list\").ListFilters;\n sort: import(\"../../lib/list\").ListSort;\n rows: unknown[];\n };\n props: import(\"../../lib/list\").ListProps;\n automatic?: boolean;\n loadLabel?: string;\n}) {\n return (\n <>\n {state.pagination && (\n \n )}\n (row as { id?: string; symbol?: string }).id ?? (row as { symbol?: string }).symbol),\n state.query,\n state.filters,\n state.sort,\n ])}\n />\n \n );\n}\n\n/** Custom lists expose selection without replacing their existing row-opening action. */\nexport function ListSelection({\n state,\n props,\n getRowId,\n getLabel,\n}: {\n state: {\n rows: T[];\n selected: string[];\n setSelected: (ids: string[]) => void;\n rowCount?: number | null;\n query: string;\n filters: import(\"../../lib/list\").ListFilters;\n };\n props: import(\"../../lib/list\").ListProps;\n getRowId: (row: T) => string;\n getLabel: (row: T) => string;\n}) {\n const i18n = useMessages(\"_shared-list-controls\", english);\n if (!props.selectable && !state.selected.length) return null;\n const ids = state.rows.map(getRowId);\n const hidden = state.selected.filter((id) => !ids.includes(id));\n const all = ids.length > 0 && ids.every((id) => state.selected.includes(id));\n return (\n
\n {props.selectable && (\n state.setSelected(all ? hidden : [...new Set([...state.selected, ...ids])]),\n },\n ...state.rows.map((row) => {\n const id = getRowId(row);\n return {\n id,\n label: getLabel(row),\n checked: state.selected.includes(id),\n onSelect: () =>\n state.setSelected(\n state.selected.includes(id) ? state.selected.filter((key) => key !== id) : [...state.selected, id],\n ),\n };\n }),\n ]}\n />\n )}\n {state.selected.length > 0 && (\n <>\n \n {i18n(hidden.length ? \"selectedHidden\" : \"selected\", {\n count: state.selected.length,\n hidden: hidden.length,\n })}\n \n \n \n )}\n {props.manual &&\n props.allowSelectAllMatching &&\n props.onSelectAllMatching &&\n all &&\n state.rowCount != null &&\n state.rowCount > ids.length && (\n \n props.onSelectAllMatching?.({ rowCount: state.rowCount!, query: state.query, filters: state.filters })\n }\n >\n {i18n(\"selectAllMatching\", { count: state.rowCount })}\n \n )}\n
\n );\n}\n"},{"path":"beamline/components/_shared/list-feedback.messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/list-feedback.messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n loading: \"Loading…\",\n tryAgain: \"Try again\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/_shared/list-state.messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/list-state.messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n moreRowsDidNotLoad: \"More rows did not load\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/_shared/list-state.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/list-state.ts","content":"\"use client\";\nimport { useMessages } from \"../../runtime/localization\";\nimport { english } from \"./list-state.messages\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport type { ListWindowProps } from \"../../lib/list\";\nimport { useDeprecatedProp } from \"../../hooks/use-deprecated-prop\";\nimport { useControllable } from \"../../hooks/use-controllable\";\n\nexport function hasPagination(props: ListWindowProps) {\n return (\n props.pagination ??\n (!props.onEndReached &&\n [props.page, props.defaultPage, props.pageSize, props.defaultPageSize, props.rowCount, props.total].some(\n (v) => v !== undefined,\n ))\n );\n}\n\nexport function useListWindow(props: ListWindowProps) {\n useDeprecatedProp(\"List\", \"total\", \"rowCount\", props.total !== undefined);\n const [rawPage, changePage] = useControllable(props.page, props.defaultPage ?? 1, props.onPageChange);\n const [rawSize, changeSize] = useControllable(props.pageSize, props.defaultPageSize ?? 25, props.onPageSizeChange);\n const page = Math.max(1, Math.floor(rawPage) || 1);\n const pageSize = Math.max(1, Math.floor(rawSize) || 25);\n const setPage = useCallback((next: number) => changePage(Math.max(1, Math.floor(next) || 1)), [changePage]);\n const resetPage = useCallback(() => {\n if (page !== 1) setPage(1);\n }, [page, setPage]);\n const setPageSize = useCallback(\n (next: number) => {\n changeSize(Math.max(1, Math.floor(next) || 25));\n resetPage();\n },\n [changeSize, resetPage],\n );\n return {\n rowCount: props.rowCount !== undefined ? props.rowCount : props.total,\n page,\n pageSize,\n setPage,\n setPageSize,\n resetPage,\n pagination: hasPagination(props),\n };\n}\n\nexport { useRetainedRows } from \"./retained-rows\";\n\n/** Detect a result boundary once. A failed callback stops automatic retries until explicitly retried. */\nexport function useListEnd({\n onEndReached,\n hasMore,\n loadingMore,\n loading,\n error,\n resultKey,\n}: ListWindowProps & { loading?: boolean; error?: unknown; resultKey: string | number }) {\n const i18n = useMessages(\"_shared-list-state\", english);\n const [failed, setFailed] = useState<{ key: string | number; message: string | null } | null>(null);\n const failure = failed?.key === resultKey ? (failed.message ?? i18n(\"moreRowsDidNotLoad\")) : null;\n const [busy, setBusy] = useState(false);\n const requested = useRef(null);\n const inFlight = useRef(false);\n const request = useCallback(\n async (retry = false) => {\n if (\n !onEndReached ||\n !hasMore ||\n loading ||\n loadingMore ||\n inFlight.current ||\n (!retry && (error || failure || requested.current === resultKey))\n )\n return;\n requested.current = resultKey;\n inFlight.current = true;\n setBusy(true);\n setFailed(null);\n try {\n await onEndReached();\n } catch (e) {\n setFailed({ key: resultKey, message: e instanceof Error ? e.message : null });\n } finally {\n inFlight.current = false;\n setBusy(false);\n }\n },\n [onEndReached, hasMore, loading, loadingMore, error, failure, resultKey],\n );\n return { request, failure, busy };\n}\n"},{"path":"beamline/components/_shared/listbox.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/listbox.tsx","content":"\"use client\";\nimport { useMessages } from \"../../runtime/localization\";\nimport { english } from \"./messages\";\n\nimport { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { Highlight, filterRanked } from \"./match\";\nimport { cn } from \"../../lib/utils\";\nimport { GlidePlate } from \"./glide\";\nimport overlay from \"./overlay.module.css\";\n\nexport interface ListOption {\n value: string;\n label: string;\n description?: string;\n /** Other words that should find it. */\n keywords?: string[];\n icon?: ReactNode;\n disabled?: boolean;\n /** Heading it sits under (Billing address). With no query the list shows a heading where the group changes, in the\n * given order; while searching, results rank flat and each row names its group beside its description. */\n group?: string;\n}\n\n/** Lists longer than this mount only the rows near the visible window. */\nconst WINDOW = 200;\n/** A one-line row's height before it is measured, and rows kept mounted past each edge. */\nconst ROW = 34;\nconst OVERSCAN = 8;\n\n/** Filtering and the active row for a search-as-you-type list; the field keeps focus and points at the active row. */\nexport function useListbox(options: ListOption[], query: string, extra?: ListOption | null) {\n // a group's name finds its options too; `extra` (a row that acts, such as Create \"…\") always comes last\n const ranked = useMemo(\n () => filterRanked(options, query, (o) => (o.group ? { ...o, keywords: [...(o.keywords ?? []), o.group] } : o)),\n [options, query],\n );\n const filtered = useMemo(() => (extra ? [...ranked, extra] : ranked), [ranked, extra]);\n const [active, setActive] = useState(0);\n const viaKeys = useRef(false);\n useEffect(() => {\n setActive(\n Math.max(\n 0,\n filtered.findIndex((o) => !o.disabled),\n ),\n );\n }, [query]); // eslint-disable-line react-hooks/exhaustive-deps -- reset per question\n const move = (delta: number) => {\n if (!filtered.length) return;\n viaKeys.current = true;\n let i = active;\n for (let n = 0; n < filtered.length; n++) {\n i = (i + delta + filtered.length) % filtered.length;\n if (!filtered[i].disabled) break;\n }\n setActive(i);\n };\n // Home, End and Page keys: to a place in the whole list (no wrap), the nearest enabled row from there\n const jump = (to: number) => {\n if (!filtered.length) return;\n viaKeys.current = true;\n const at = Math.max(0, Math.min(filtered.length - 1, to));\n const back = to < active;\n for (let n = 0; n < filtered.length; n++) {\n const i = back ? at + n : at - n;\n if (i >= 0 && i < filtered.length && !filtered[i].disabled) return setActive(i);\n }\n };\n return {\n filtered,\n active: Math.min(active, filtered.length - 1),\n setActive,\n move,\n jump,\n viaKeys,\n current: filtered[Math.min(active, filtered.length - 1)],\n };\n}\n\n/** The list itself: rows in the system's menu look, the match emphasised, chosen rows checked. */\nexport function Listbox({\n id,\n label,\n options,\n query,\n active,\n onActive,\n isSelected,\n onPick,\n multiple,\n emptyText,\n viaKeys,\n className,\n}: {\n id: string;\n label: string;\n options: ListOption[];\n query: string;\n active: number;\n onActive: (i: number) => void;\n isSelected: (value: string) => boolean;\n onPick: (option: ListOption) => void;\n multiple?: boolean;\n emptyText?: ReactNode;\n viaKeys: { current: boolean };\n className?: string;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const list = useRef(null);\n // a long list mounts only the rows near the visible window; spacers above and below keep its scroll height true\n const windowed = options.length > WINDOW;\n const heights = useRef(new Map());\n const [scroll, setScroll] = useState({ top: 0, height: 300 });\n const [measured, setMeasured] = useState(0);\n const offsets = useMemo(() => {\n if (!windowed) return null;\n const out = new Float64Array(options.length + 1);\n for (let i = 0; i < options.length; i++)\n out[i + 1] = out[i] + (heights.current.get(options[i].value) ?? (options[i].description ? 46 : ROW));\n return out;\n }, [windowed, options, measured]); // eslint-disable-line react-hooks/exhaustive-deps -- measured invalidates the cached heights\n // the first row whose bottom is below y\n const rowAt = (y: number) => {\n let lo = 0;\n let hi = options.length;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (offsets![mid + 1] <= y) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n };\n const first = windowed ? Math.max(0, rowAt(scroll.top) - OVERSCAN) : 0;\n const last = windowed ? Math.min(options.length, rowAt(scroll.top + scroll.height) + OVERSCAN + 1) : options.length;\n // the mounted rows measure once each time the window moves; a row only re-renders when a height changed\n useLayoutEffect(() => {\n if (!windowed || !list.current) return;\n let changed = false;\n for (const el of list.current.querySelectorAll(\"[data-row]\")) {\n const h = el.offsetHeight;\n if (h && heights.current.get(el.dataset.row!) !== h) {\n heights.current.set(el.dataset.row!, h);\n changed = true;\n }\n }\n if (changed) setMeasured((m) => m + 1);\n }, [windowed, first, last, options]);\n useEffect(() => {\n if (!viaKeys.current) return;\n const row = list.current?.querySelector(`#${CSS.escape(`${id}-${active}`)}`);\n if (row) row.scrollIntoView({ block: \"nearest\" });\n else if (offsets && list.current) {\n // not mounted: scroll its place into view and the row renders there\n const el = list.current;\n if (offsets[active] < el.scrollTop) el.scrollTop = offsets[active];\n else if (offsets[active + 1] > el.scrollTop + el.clientHeight)\n el.scrollTop = offsets[active + 1] - el.clientHeight;\n }\n }, [active, id, viaKeys, offsets]);\n // what a search found, said once it settles (a polite status beside the list, never inside it: a listbox holds\n // options only), so a screen reader hears \"3 results\" or that nothing matched while focus stays in the field\n const found = !query.trim()\n ? \"\"\n : options.length\n ? i18n(\"results\", { count: options.length })\n : typeof emptyText === \"string\"\n ? emptyText\n : i18n(\"noMatch\", { query });\n return (\n <>\n \n {found}\n \n {\n viaKeys.current = false;\n }}\n onScroll={\n windowed\n ? (e) => setScroll({ top: e.currentTarget.scrollTop, height: e.currentTarget.clientHeight })\n : undefined\n }\n className={cn(\n \"relative max-h-[min(300px,var(--radix-popover-content-available-height,300px))] overflow-y-auto p-1\",\n className,\n )}\n >\n \n {options.length === 0 && (\n
{emptyText ?? i18n(\"noMatch\", { query })}
\n )}\n {windowed &&
}\n {options.slice(first, last).map((o, k) => {\n const i = first + k;\n const on = isSelected(o.value);\n const prev = options[i - 1];\n // headings only for the unsearched list, where they follow the caller's order; arrow keys never land on them\n const groupStart = !query && (o.group ?? \"\") !== (prev?.group ?? \"\") && (i > 0 || !!o.group);\n const detail = query && o.group ? [o.group, o.description].filter(Boolean).join(\" · \") : o.description;\n const row = (\n <>\n {groupStart && i > 0 && (\n
\n )}\n {groupStart && o.group && (\n
\n {o.group}\n
\n )}\n {\n if (i !== active && !o.disabled) onActive(i);\n }}\n onMouseDown={(e) => e.preventDefault()}\n onClick={() => {\n if (!o.disabled) onPick(o);\n }}\n >\n {/* a checked row fills at once and its check scales in (a fade under reduced motion); unchecking\n lets the fill go over --pui-motion-out, like every hover */}\n {multiple && (\n \n {on && }\n \n )}\n {o.icon}\n \n \n \n \n {detail && {detail}}\n \n {!multiple && on && }\n
\n \n );\n // a windowed row is measured with its heading, so the spacers stay true\n return windowed ? (\n
\n {row}\n
\n ) : (\n {row}\n );\n })}\n {windowed && (\n
\n )}\n
\n \n );\n}\n"},{"path":"beamline/components/_shared/match.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/match.tsx","content":"/** One way to rank and mark matches for every search-as-you-type list (command menu, combobox, multi-select). */\n\n/** How well `label` (and its keywords) answers `query`: label start 100, word start 80, anywhere 60, keyword 45,\n * every word of a several-word query found across label, keywords and description 40 (50 when one starts the label:\n * \"billing city\" finds Billing address › City), description 30, letters in order 15, no match 0. An empty query\n * matches everything with 1. */\nexport function rank(query: string, label: string, keywords?: string[], description?: string): number {\n const q = query.trim().toLowerCase();\n if (!q) return 1;\n const l = label.toLowerCase();\n const at = l.indexOf(q);\n if (at === 0) return 100 - l.length / 100;\n if (at > 0 && /[\\s\\-/(_.]/.test(l[at - 1])) return 80;\n if (at > 0) return 60;\n if (keywords?.some((k) => k.toLowerCase().includes(q))) return 45;\n const words = q.split(/\\s+/);\n if (words.length > 1) {\n const hay = [l, ...(keywords ?? []).map((k) => k.toLowerCase()), description?.toLowerCase() ?? \"\"];\n if (words.every((w) => hay.some((h) => h.includes(w)))) return words.some((w) => l.startsWith(w)) ? 50 : 40;\n }\n if (description?.toLowerCase().includes(q)) return 30;\n let i = 0;\n for (const ch of l) if (ch === q[i]) i++;\n return i === q.length ? 15 : 0;\n}\n\n/** Sorts by rank (best first, original order for ties) and drops non-matches. */\nexport function filterRanked(\n items: T[],\n query: string,\n get: (item: T) => { label: string; keywords?: string[]; description?: string },\n): T[] {\n if (!query.trim()) return items;\n return items\n .map((item, order) => {\n const g = get(item);\n return { item, order, s: rank(query, g.label, g.keywords, g.description) };\n })\n .filter((r) => r.s > 0)\n .sort((a, b) => b.s - a.s || a.order - b.order)\n .map((r) => r.item);\n}\n\n/** The label with the matched run emphasised. */\nexport function Highlight({ text, query }: { text: string; query: string }) {\n const q = query.trim().toLowerCase();\n const at = q ? text.toLowerCase().indexOf(q) : -1;\n if (at < 0) return <>{text};\n return (\n <>\n {text.slice(0, at)}\n {text.slice(at, at + q.length)}\n {text.slice(at + q.length)}\n \n );\n}\n"},{"path":"beamline/components/_shared/menu.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/menu.tsx","content":"\"use client\";\n\nimport {\n Fragment,\n useCallback,\n useRef,\n useState,\n type ComponentType,\n type FocusEvent,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { Check, ChevronRight } from \"lucide-react\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { cn } from \"../../lib/utils\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport overlay from \"./overlay.module.css\";\n\nexport interface MenuClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the trigger part; no override by default. */\n trigger?: string;\n /** Classes for the content part; no override by default. */\n content?: string;\n /** Classes for the submenu part; no override by default. */\n submenu?: string;\n /** Classes for the indicator part; no override by default. */\n indicator?: string;\n /** Classes for the item part; no override by default. */\n item?: string;\n /** Classes for the label part; no override by default. */\n label?: string;\n /** Classes for the shortcut part; no override by default. */\n shortcut?: string;\n /** Classes for the check part; no override by default. */\n check?: string;\n /** Classes for the separator part; no override by default. */\n separator?: string;\n /** Classes for the heading part; no override by default. */\n heading?: string;\n /** Classes for the chevron part; no override by default. */\n chevron?: string;\n}\n\n/** One row of any menu in the system (dropdown, context menu, menu bar). The same data renders the same everywhere. */\nexport interface MenuItem {\n /** Stable key; the label is used when absent. */\n id?: string;\n /** Text displayed for this item. Required. */\n label: ReactNode;\n /** Icon element displayed with this item. Omitted by default. */\n icon?: ReactNode;\n /** A shortcut shown at the end, e.g. \"⌘D\". The app binds the key. */\n shortcut?: string;\n /** Runs when this item is activated. Omitted by default. */\n onSelect?: (event: Event) => void;\n /** Whether this option is unavailable for selection. Omitted by default. */\n disabled?: boolean;\n /** danger: a destructive action (red). */\n tone?: \"danger\";\n /** A line above this item. */\n separatorBefore?: boolean;\n /** A small heading above this item, starting a group. */\n heading?: string;\n /** A checkable item; shows a check when true. */\n checked?: boolean;\n /** checkbox (default when checked is set) stays open when toggled; radio is one of a set and closes the menu. */\n type?: \"checkbox\" | \"radio\";\n /** A submenu. */\n items?: MenuItem[];\n}\n\ntype Part = ComponentType; // eslint-disable-line @typescript-eslint/no-explicit-any -- Radix menu namespaces share part names, not prop types\n/** The Radix parts a menu needs; DropdownMenu, ContextMenu and Menubar all provide them. */\nexport interface MenuKit {\n Content: Part;\n SubContent: Part;\n Item: Part;\n CheckboxItem: Part;\n ItemIndicator: Part;\n Sub: Part;\n SubTrigger: Part;\n Separator: Part;\n Label: Part;\n Portal: Part;\n}\n\n/** The reading direction a menu should open in: an explicit one, else the direction in force around its trigger (read\n * when the trigger mounts and again as it is pressed, right-clicked or keyed), else a Direction provider. Without it\n * Radix falls back to \"ltr\", so a portalled menu on an RTL page reads left to right, opens submenus to the right and\n * answers → instead of ←. Spread `triggerProps` on the Radix trigger and pass `dir` to the Radix root. */\nexport function useMenuDirection(explicit?: \"ltr\" | \"rtl\") {\n const provided = useDirection();\n const [around, setAround] = useState<\"ltr\" | \"rtl\">();\n const read = useCallback((el: Element | null) => {\n if (el) setAround(getComputedStyle(el).direction === \"rtl\" ? \"rtl\" : \"ltr\");\n }, []);\n const measure = useCallback((e: { currentTarget: Element }) => read(e.currentTarget), [read]);\n return {\n dir: explicit ?? around ?? provided,\n triggerProps: {\n ref: read,\n onPointerDownCapture: measure,\n onKeyDownCapture: measure,\n onContextMenuCapture: measure,\n },\n };\n}\n\n/** The floating list: one surface and one highlight plate that glides between rows, under the pointer and the arrow\n * keys alike. Extra props (align, side, sideOffset) go to the Radix content part. */\nexport function MenuSurface({\n kit,\n sub = false,\n label,\n className,\n classNames,\n children,\n ref,\n ...rest\n}: {\n kit: MenuKit;\n sub?: boolean;\n label?: string;\n className?: string;\n classNames?: MenuClassNames;\n children: ReactNode;\n ref?: Ref;\n} & Record) {\n const surface = useRef(null);\n // the portal's presence passes its own ref (it watches the exit animation); keep both\n const attach = useComposedRef(surface, ref);\n const [plate, setPlate] = useState<{ y: number; h: number; jump: boolean } | null>(null);\n const Part = sub ? kit.SubContent : kit.Content;\n const { onFocusOutside, ...others } = rest as { onFocusOutside?: (event: Event) => void };\n return (\n {\n if (surface.current?.dataset.state === \"closed\") event.preventDefault();\n onFocusOutside?.(event);\n }}\n className={cn(\n overlay.surface,\n overlay.menu,\n \"relative min-w-[11rem]\",\n sub ? classNames?.submenu : classNames?.content,\n className,\n )}\n // React events cross portals: only rows of this surface move its plate (a submenu has its own)\n onFocusCapture={(e: FocusEvent) => {\n const item = (e.target as HTMLElement).closest(\"[data-menu-item]\");\n if (item && !surface.current?.contains(item)) return;\n if (!item) {\n setPlate((p) => (p ? { ...p, h: 0 } : p));\n return;\n }\n setPlate((p) => ({ y: item.offsetTop, h: item.offsetHeight, jump: !p?.h }));\n }}\n // while a submenu is open, its trigger keeps the plate\n onPointerLeave={() => {\n if (!surface.current?.querySelector(\":scope > [data-menu-item][data-state=open]\"))\n setPlate((p) => (p ? { ...p, h: 0 } : p));\n }}\n >\n \n {children}\n \n );\n}\n\n/** Rows for a MenuItem list, in any kit. */\nexport function MenuItems({\n kit,\n items,\n container,\n classNames,\n}: {\n kit: MenuKit;\n items: MenuItem[];\n container?: HTMLElement | null;\n classNames?: MenuClassNames;\n}) {\n return items.map((item, i) => {\n const tone = item.tone;\n const common = {\n \"data-menu-item\": \"\",\n \"data-slot\": \"menu-item\",\n \"data-glide\": \"\",\n \"data-tone\": tone,\n className: cn(overlay.item, classNames?.item),\n disabled: item.disabled,\n };\n const content = (\n <>\n {item.icon}\n \n {item.label}\n \n {item.shortcut && (\n \n {item.shortcut}\n \n )}\n \n );\n let node: ReactNode;\n if (item.items?.length) {\n node = (\n \n \n {content}\n \n \n {container !== null && (\n \n \n \n \n \n )}\n \n );\n } else if (item.checked !== undefined && item.type === \"radio\") {\n node = (\n \n {content}\n \n {item.checked && }\n \n \n );\n } else if (item.checked !== undefined) {\n node = (\n {\n e.preventDefault();\n item.onSelect?.(e);\n }}\n >\n {content}\n \n \n \n \n );\n } else {\n node = (\n \n {content}\n \n );\n }\n return (\n \n {item.separatorBefore && i > 0 && (\n \n )}\n {item.heading && (\n \n {item.heading}\n \n )}\n {node}\n \n );\n });\n}\n"},{"path":"beamline/components/_shared/messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n results: {\n one: \"{count} result\",\n other: \"{count} results\",\n },\n noMatch: \"No match for {query}\",\n fieldOver: \"{count} over\",\n fieldFull: \"Limit reached\",\n fieldLeft: \"{count} left\",\n foldMore: \"{list} and {count} more\",\n foldShow: \"Show {count} more {noun}: {list}\",\n statusLabel: \"Checking\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/_shared/overlay.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the source morph's moving parts: the clip's four sides, the radius and the offset back to the trigger */\n@property --ci-t {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-r {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-b {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-l {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@property --ci-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@layer components {\n /* Every floating layer in the system: one surface (painted by the overlay role of the look in force), one menu-item\n look, one scrim, one enter and exit. A layer placed against a trigger opens out of it (the source morph below); one\n without a placement arrives in --pui-motion-in scaling from its origin. Each leaves in --pui-motion-out; Radix keeps\n it mounted until the exit animation ends. Reduced motion makes both instant (the duration tokens become 1ms). */\n .surface {\n z-index: var(--pui-z-popover);\n min-width: 8rem;\n /* never past the screen: as wide and as tall as the room beside the trigger (Radix measures it) */\n max-width: var(--radix-popper-available-width, none);\n max-height: var(--radix-popper-available-height, 70vh);\n overflow: auto;\n border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n color: var(--pui-ink);\n transform-origin: var(--radix-popper-transform-origin, var(--radix-dropdown-menu-content-transform-origin, center));\n outline: none;\n }\n .surface[data-state=\"open\"],\n .surface[data-state=\"delayed-open\"],\n .surface[data-state=\"instant-open\"] {\n animation: pop-in var(--pui-motion-in) var(--pui-ease-default);\n }\n .surface[data-state=\"closed\"] {\n animation: pop-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n\n /* The source morph (research/morphing-interfaces-2026-10-04, M3): a layer placed against a trigger does not fade in\n beside it, it opens out of it. It starts as the trigger's own box (Radix gives its size and the side and alignment\n it was placed on), offset back onto the trigger, and grows: the side nearest the trigger is there at once, the\n sides across follow, the far side arrives last (~200 ms), so the rows by the trigger are readable within the\n ruled 90 ms while the outline settles. Content fades in over those 90 ms. It closes back into the trigger in the\n ruled 180 ms. The clip ends 48px outside the box so the layer's shadow is never cut. Reduced motion: instant. */\n .surface[data-side] {\n --_aw: var(--radix-popper-anchor-width, 0px);\n --_ah: var(--radix-popper-anchor-height, 0px);\n --_gap: 6px;\n --from-t: -48px;\n --from-r: -48px;\n --from-b: -48px;\n --from-l: -48px;\n --from-x: 0px;\n --from-y: 0px;\n --d-near: calc(var(--pui-duration-standard) * 0.55);\n --d-cross: calc(var(--pui-duration-standard) * 0.85);\n --d-far: var(--pui-duration-standard);\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-overlay-radius, var(--pui-radius-card))\n );\n translate: var(--ci-x) var(--ci-y);\n }\n .surface[data-side=\"bottom\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n --from-y: calc(-1 * (var(--_ah) + var(--_gap)));\n --d-t: var(--d-near);\n --d-b: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"top\"] {\n --from-b: 0px;\n --from-t: calc(100% - var(--_ah));\n --from-y: calc(var(--_ah) + var(--_gap));\n --d-b: var(--d-near);\n --d-t: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"right\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n --from-x: calc(-1 * (var(--_aw) + var(--_gap)));\n --d-l: var(--d-near);\n --d-r: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n .surface[data-side=\"left\"] {\n --from-r: 0px;\n --from-l: calc(100% - var(--_aw));\n --from-x: calc(var(--_aw) + var(--_gap));\n --d-r: var(--d-near);\n --d-l: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n /* alignment along the trigger: which part of the layer the trigger sits over */\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"] {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"]:dir(rtl) {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"]:dir(rtl) {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"center\"] {\n --from-l: calc((100% - var(--_aw)) / 2);\n --from-r: calc((100% - var(--_aw)) / 2);\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"start\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"end\"] {\n --from-t: calc(100% - var(--_ah));\n --from-b: 0px;\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"center\"] {\n --from-t: calc((100% - var(--_ah)) / 2);\n --from-b: calc((100% - var(--_ah)) / 2);\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) {\n animation:\n grow-t var(--d-t) var(--pui-ease-out-strong),\n grow-r var(--d-r) var(--pui-ease-out-strong),\n grow-b var(--d-b) var(--pui-ease-out-strong),\n grow-l var(--d-l) var(--pui-ease-out-strong),\n grow-xy var(--d-cross) var(--pui-ease-out-strong),\n settling var(--d-far) step-end;\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) > * {\n animation: content-in var(--pui-motion-in) var(--pui-ease-default) both;\n }\n /* one duration for every part of the exit: the layer unmounts when the first of them ends */\n .surface[data-side][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .surface[data-side][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n @keyframes grow-t {\n from {\n --ci-t: var(--from-t);\n }\n }\n @keyframes grow-r {\n from {\n --ci-r: var(--from-r);\n }\n }\n @keyframes grow-b {\n from {\n --ci-b: var(--from-b);\n }\n }\n @keyframes grow-l {\n from {\n --ci-l: var(--from-l);\n }\n }\n @keyframes grow-xy {\n from {\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n }\n }\n /* it starts over its own trigger: until it has grown, the press that opened it must not land on a row */\n @keyframes settling {\n 0%,\n 100% {\n pointer-events: none;\n }\n }\n @keyframes shrink {\n to {\n --ci-t: var(--from-t);\n --ci-r: var(--from-r);\n --ci-b: var(--from-b);\n --ci-l: var(--from-l);\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n opacity: 0;\n }\n }\n @keyframes content-in {\n from {\n opacity: 0;\n }\n }\n @keyframes content-out {\n to {\n opacity: 0;\n }\n }\n .padded {\n padding: var(--pui-pad-popover);\n }\n .menu {\n padding: var(--pui-space-1);\n }\n @keyframes pop-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes pop-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n\n /* rows (and the gliding plate) nest in the list: its radius minus its padding, never rounder than a chip; on the\n row itself, so any list that uses .item gets it */\n .item,\n .glide {\n --_item-radius: min(\n var(--pui-radius-chip),\n calc(var(--pui-overlay-radius, var(--pui-radius-card)) - var(--pui-space-1))\n );\n }\n\n /* menu rows: shared by dropdown, context menu, menubar, select, combobox lists */\n .item {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--pui-control-height-sm);\n padding: 0 var(--pui-space-2);\n /* nested in the list: the overlay's radius minus its padding, never rounder than a chip */\n border-radius: var(--_item-radius);\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: default;\n user-select: none;\n outline: none;\n }\n /* on a touch screen a row is a finger's target: the touch height (44px) from the tokens; a mouse keeps the dense row */\n @media (pointer: coarse) {\n .item {\n min-height: var(--pui-control-height-touch);\n }\n }\n /* a destructive row speaks in the danger ink only while it can be used: disabled wins (muted ink, no alarm for an\n action that cannot happen) */\n .item[data-tone=\"danger\"]:not([data-disabled]) {\n color: var(--pui-red);\n }\n .item[data-disabled] {\n color: var(--pui-ink-3);\n pointer-events: none;\n }\n .item :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .item[data-tone=\"danger\"]:not([data-disabled]) :where(svg) {\n color: currentColor;\n }\n .item[data-highlighted]:not([data-glide]) {\n background: var(--pui-hover-2);\n }\n /* a press is acknowledged at once, over the plate, before the menu closes or the row toggles */\n .item:active:not([data-disabled]) {\n background: var(--pui-hover);\n }\n .shortcut {\n margin-inline-start: auto;\n padding-inline-start: var(--pui-space-4);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n letter-spacing: var(--pui-tracking-mono-caps);\n }\n .heading {\n padding: var(--pui-space-1-5) var(--pui-space-2) var(--pui-space-1);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n font-weight: var(--pui-weight-medium);\n }\n .separator {\n height: 1px;\n margin: var(--pui-space-1) calc(var(--pui-space-1) * -1);\n background: var(--pui-line);\n }\n .check {\n margin-inline-start: auto;\n color: var(--pui-accent) !important;\n }\n /* a check arrives in its row as the value changes (at once): it grows from the middle over the arrival */\n .check :where(svg) {\n animation: check-in var(--pui-motion-in) var(--pui-ease-out-strong);\n }\n @keyframes check-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.5 * var(--pui-motion-travel, 1));\n }\n }\n /* the gliding highlight: one plate moves between rows for the pointer and the arrow keys; it appears in place */\n .glide {\n position: absolute;\n z-index: 0;\n inset-inline: var(--pui-space-1);\n top: 0;\n border-radius: var(--_item-radius);\n background: var(--pui-hover-2);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--pui-motion-out) var(--pui-ease-default);\n }\n .glide[data-on] {\n opacity: 1;\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n .glide[data-jump] {\n transition: opacity 0ms;\n }\n /* a plate over a row or grid of cells takes each cell's size and travels both ways */\n .glide[data-axis=\"xy\"] {\n inset-inline: auto;\n left: 0;\n }\n .glide[data-axis=\"xy\"][data-on] {\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n width var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n\n /* a layer that has begun to close is out of the way at once: for the length of its exit it takes no pointer, so a tap\n meant for the page behind (the next row, the button the panel covered) lands there, never on the leaving ghost.\n Focus has already gone back (Radix) and it unmounts when the exit ends. */\n .scrim[data-state=\"closed\"],\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n pointer-events: none;\n }\n\n /* modal layers */\n .scrim {\n position: fixed;\n inset: 0;\n z-index: var(--pui-z-overlay);\n background: var(--pui-scrim);\n backdrop-filter: blur(var(--pui-blur-overlay));\n }\n .scrim[data-state=\"open\"] {\n animation: fade-in var(--pui-fade-in) var(--pui-ease-default);\n }\n .scrim[data-state=\"closed\"] {\n animation: fade-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n }\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes fade-out {\n to {\n opacity: 0;\n }\n }\n .dialog {\n /* the content answers to the dialog's own width (a footer's buttons share the row on a phone) */\n container-type: inline-size;\n position: fixed;\n z-index: var(--pui-z-modal);\n left: 50%;\n top: 50%;\n width: min(calc(100vw - var(--pui-space-8)), var(--pui-dialog-width, var(--_dialog-width, 440px)));\n max-height: calc(100dvh - var(--pui-space-12));\n overflow: hidden;\n translate: -50% -50%;\n border-radius: var(--pui-dialog-radius, var(--pui-radius-window));\n color: var(--pui-ink);\n outline: none;\n /* a size chosen while open (a step that needs more room) eases the width in place, centred */\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n .dialog[data-state=\"open\"] {\n animation: dialog-in var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .dialog[data-state=\"closed\"] {\n animation: dialog-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n /* A dialog opened from something (use-open-from.ts) grows out of it: it starts as the opener's box, offset back onto\n it, and grows to its own place over the considered duration while its content fades in; it closes back into the\n opener in the ruled 180 ms. Shares the source morph's moving parts and guard with .surface. */\n .dialog[data-open-from] {\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-dialog-radius, var(--pui-radius-window))\n );\n transform: translate(var(--ci-x), var(--ci-y));\n }\n .dialog[data-open-from][data-state=\"open\"] {\n animation:\n grow-t var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-r var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-b var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-l var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-xy calc(var(--pui-duration-considered) * 0.9) var(--pui-ease-out-strong),\n settling var(--pui-duration-considered) step-end;\n }\n .dialog[data-open-from][data-state=\"open\"] > * {\n animation: content-in var(--pui-duration-standard) var(--pui-ease-default) calc(var(--pui-duration-standard) * 0.35)\n both;\n }\n .dialog[data-open-from][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .dialog[data-open-from][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n /* A sheet: a panel from an edge. It slides in from its edge over the considered duration on the drawer curve and\n goes back out to that edge in the ruled departure (a layer closes back into where it came from). The edge is\n logical: an end (\"right\") sheet comes from the left in a right-to-left page. Its content answers to its width. */\n .sheet {\n --_sx: 0px;\n --_sy: 0px;\n container-type: inline-size;\n /* where a finger has swiped it toward its edge (sheet.tsx); it settles back over the departure */\n translate: var(--_swipe, 0px) 0;\n }\n /* a side panel leaves sideways pans to the swipe and keeps vertical scrolling native, in its body too */\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]),\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) [data-slot=\"sheet-body\"] {\n touch-action: pan-y;\n }\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) {\n transition:\n var(--m-transition),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n .sheet[data-swiping] {\n transition: none;\n }\n .sheet[data-side=\"right\"] {\n --_sx: 100%;\n }\n .sheet[data-side=\"left\"] {\n --_sx: -100%;\n }\n .sheet[data-side=\"right\"]:dir(rtl) {\n --_sx: -100%;\n }\n .sheet[data-side=\"left\"]:dir(rtl) {\n --_sx: 100%;\n }\n .sheet[data-side=\"top\"] {\n --_sy: -100%;\n }\n .sheet[data-side=\"bottom\"] {\n --_sy: 100%;\n }\n .sheet[data-state=\"open\"] {\n animation: sheet-in var(--pui-duration-considered) var(--pui-ease-drawer) both;\n }\n .sheet[data-state=\"closed\"] {\n animation: sheet-out var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n @keyframes sheet-in {\n from {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes sheet-out {\n to {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n }\n @keyframes dialog-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n}\n\n/* Reduced motion: surfaces and dialogs fade without scaling or growing, over the fade tokens (restrained under reduced,\n 1ms under none; APPEARANCE A06). */\n@media (prefers-reduced-motion: reduce) {\n .surface,\n .dialog,\n .sheet {\n animation-name: fade-in !important;\n animation-duration: var(--pui-fade-in) !important;\n }\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n animation-name: fade-out !important;\n animation-duration: var(--pui-fade-out) !important;\n }\n}\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .surface,\n :global(.pui[data-motion=\"none\"]) .surface,\n :global(.pui[data-motion=\"reduced\"]) .dialog,\n :global(.pui[data-motion=\"none\"]) .dialog,\n :global(.pui[data-motion=\"reduced\"]) .sheet,\n :global(.pui[data-motion=\"none\"]) .sheet {\n animation-name: fade-in;\n animation-duration: var(--pui-fade-in);\n }\n :global(.pui[data-motion=\"reduced\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .sheet[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .sheet[data-state=\"closed\"] {\n animation-name: fade-out;\n animation-duration: var(--pui-fade-out);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.surface {\n composes: m-overlay from global;\n}\n.dialog {\n composes: m-overlay from global;\n}\n"},{"path":"beamline/components/_shared/record-list.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/record-list.ts","content":"\"use client\";\n\nimport { useMemo } from \"react\";\nimport type { ListFilters, ListProps, ListSort } from \"../../lib/list\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { useListWindow, useRetainedRows } from \"./list-state\";\n\nexport interface ListColumn {\n id: string;\n value?: (row: T) => unknown;\n}\nconst NO_FILTERS: ListFilters = {};\nconst NO_SORT: ListSort = [];\nconst NO_SELECTION: string[] = [];\n\n/** One state owner for custom list views and the native Table. No network or persistence behavior. */\nexport function useListController(props: ListProps, aliases?: ListFilters) {\n const paging = useListWindow(props);\n const [query, changeQuery] = useControllable(props.query, props.defaultQuery ?? \"\", props.onQueryChange);\n const [sort, changeSort] = useControllable(props.sort, props.defaultSort ?? NO_SORT, props.onSortChange);\n const [storedFilters, changeFilters] = useControllable(\n props.filters,\n props.defaultFilters ?? NO_FILTERS,\n props.onFiltersChange,\n );\n const filters = props.filters !== undefined || !aliases ? storedFilters : { ...storedFilters, ...aliases };\n const [selected, setSelected] = useControllable(\n props.selected,\n props.defaultSelected ?? NO_SELECTION,\n props.onSelectedChange,\n );\n const setQuery = (value: string) => {\n changeQuery(value);\n paging.resetPage();\n };\n const setSort = (value: ListSort) => {\n changeSort(value);\n paging.resetPage();\n };\n const setFilters = (value: ListFilters) => {\n changeFilters(value);\n paging.resetPage();\n };\n return {\n ...paging,\n query,\n setQuery,\n sort,\n setSort,\n filters,\n setFilters,\n selected,\n setSelected,\n error: props.error instanceof Error ? props.error.message : props.error,\n props: {\n ...props,\n page: paging.page,\n pageSize: paging.pageSize,\n rowCount: paging.rowCount,\n pagination: paging.pagination,\n onPageChange: paging.setPage,\n onPageSizeChange: paging.setPageSize,\n query,\n onQueryChange: changeQuery,\n sort,\n onSortChange: changeSort,\n filters,\n onFiltersChange: changeFilters,\n selected,\n onSelectedChange: setSelected,\n },\n };\n}\n\nexport function useRecordList(props: ListProps, data: T[], columns?: ListColumn[], aliases?: ListFilters) {\n const state = useListController(props, aliases);\n return useListRows(state, data, columns);\n}\n\n/** Apply the shared transforms after a custom screen has selected its local domain scope. */\nexport function useListRows(\n state: ReturnType,\n data: T[],\n columns?: ListColumn[],\n options?: { search?: boolean; sort?: boolean },\n) {\n const props = state.props;\n const { query, filters, sort } = state;\n const retained = useRetainedRows(data, !!props.loading || !!props.loadingMore, props.error);\n const matching = useMemo(() => {\n if (props.manual) return retained;\n const read = (row: T, id: string) => {\n const column = columns?.find((c) => c.id === id);\n return column?.value ? column.value(row) : (row as Record)[id];\n };\n const q = options?.search === false ? \"\" : query.trim().toLowerCase();\n const activeFilters = Object.entries(filters).filter(([, values]) => values?.length);\n let result = retained;\n if (q || activeFilters.length)\n result = retained.filter((row) => {\n const matchesQuery =\n !q ||\n (columns ? columns.map((column) => read(row, column.id)) : Object.values(row as object)).some((value) =>\n String(value ?? \"\")\n .toLowerCase()\n .includes(q),\n );\n return (\n matchesQuery &&\n activeFilters.every(([id, values]) => {\n if (columns && !columns.some((column) => column.id === id)) return true;\n const value = read(row, id);\n return Array.isArray(value)\n ? value.some((item) => values.includes(String(item)))\n : values.includes(String(value));\n })\n );\n });\n if (sort.length && options?.sort !== false)\n result = [...result].sort((a, b) => {\n for (const s of sort) {\n if (columns && !columns.some((c) => c.id === s.id)) continue;\n const av = read(a, s.id),\n bv = read(b, s.id);\n if (av == null && bv == null) continue;\n if (av == null) return 1;\n if (bv == null) return -1;\n const cmp =\n typeof av === \"number\" && typeof bv === \"number\"\n ? av - bv\n : String(av).localeCompare(String(bv), undefined, { numeric: true });\n if (cmp) return s.desc ? -cmp : cmp;\n }\n return 0;\n });\n return result;\n }, [retained, columns, query, sort, filters, props.manual, options?.search, options?.sort]);\n const rows =\n props.manual || !state.pagination\n ? matching\n : matching.slice((state.page - 1) * state.pageSize, state.page * state.pageSize);\n const rowCount = props.manual ? state.rowCount : matching.length;\n return { ...state, rows, rowCount };\n}\n"},{"path":"beamline/components/_shared/retained-rows.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/retained-rows.ts","content":"\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\n/** Keep the last completed rows if a fetch library temporarily supplies an empty pending/error result. */\nexport function useRetainedRows(data: T[], pending: boolean, error: unknown) {\n // Retain committed responses without another render: callers may derive their rows inline.\n const settled = useRef(data);\n useEffect(() => {\n if (!pending && !error) settled.current = data;\n }, [data, pending, error]);\n return (pending || error) && data.length === 0 ? settled.current : data;\n}\n"},{"path":"beamline/components/_shared/roll.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/roll.ts","content":"/**\n * Rolls the text of a field or any text part from one value to the next (number field steps, a time segment): the old text leaves up and the new one\n * arrives from below for an increase, the other way for a decrease. The field's value changes at once; a still copy of\n * each text is drawn over the field for the roll and removed after, so typing and the caret are never touched.\n */\nconst running = new WeakMap void>();\n\nexport function rollText(\n input: HTMLElement | null,\n from: string,\n to: string,\n direction: 1 | -1,\n { duration, easing }: { duration: number; easing: string },\n) {\n if (!input || from === to || duration < 2 || !input.offsetParent) return;\n running.get(input)?.();\n const host = input.offsetParent as HTMLElement;\n const cs = getComputedStyle(input);\n const box = document.createElement(\"span\");\n box.setAttribute(\"aria-hidden\", \"true\");\n Object.assign(box.style, {\n position: \"absolute\",\n left: `${input.offsetLeft}px`,\n top: `${input.offsetTop}px`,\n width: `${input.offsetWidth}px`,\n height: `${input.offsetHeight}px`,\n overflow: \"hidden\",\n pointerEvents: \"none\",\n });\n const line = (text: string) => {\n const s = document.createElement(\"span\");\n s.textContent = text;\n Object.assign(s.style, {\n position: \"absolute\",\n inset: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent:\n cs.textAlign === \"right\" || cs.textAlign === \"end\"\n ? \"flex-end\"\n : cs.textAlign === \"center\"\n ? \"center\"\n : \"flex-start\",\n paddingInline: `${cs.paddingLeft} ${cs.paddingRight}`,\n font: cs.font,\n fontVariantNumeric: cs.fontVariantNumeric,\n letterSpacing: cs.letterSpacing,\n color: cs.color,\n whiteSpace: \"pre\",\n });\n return s;\n };\n const old = line(from),\n next = line(to);\n box.append(old, next);\n host.appendChild(box);\n const color = input.style.color;\n input.style.color = \"transparent\";\n const shift = 0.7 * direction;\n const a = old.animate(\n [\n { transform: \"none\", opacity: 1 },\n { transform: `translateY(${-shift * 100}%)`, opacity: 0 },\n ],\n { duration, easing },\n );\n next.animate(\n [\n { transform: `translateY(${shift * 100}%)`, opacity: 0 },\n { transform: \"none\", opacity: 1 },\n ],\n { duration, easing },\n );\n const done = () => {\n running.delete(input);\n box.remove();\n input.style.color = color;\n };\n running.set(input, done);\n a.finished.then(done, done);\n}\n"},{"path":"beamline/components/_shared/use-open-from.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/use-open-from.ts","content":"\"use client\";\n\nimport { useCallback, type Ref } from \"react\";\n\n/**\n * A centred layer (dialog, alert dialog) that opens out of whatever opened it: as its content element attaches (each\n * time it opens, before the first frame and before focus moves in), the element that had focus (the button, row or\n * card that was used) is measured, and the layer starts as that box, offset back onto it, then grows to its own place\n * (overlay.module.css, `[data-open-from]`). The same values take it back there as it closes. Without a recent press\n * or Enter/Space (a shortcut, a controlled `open` from code) nothing is set and the ordinary entrance runs. Returns a ref\n * callback for the layer's content element, composed with the caller's `ref`.\n */\nexport function useOpenFrom(external?: Ref) {\n watch();\n return useCallback(\n (el: T | null) => {\n if (typeof external === \"function\") external(el);\n else if (external) external.current = el;\n if (el) measure(el);\n },\n [external],\n );\n}\n\n/** What was last pressed or keyed, noted as it happened: a field inside the new layer may take focus (autoFocus)\n * before the layer can ask what had it. */\nlet last: { el: Element; at: number } | null = null;\nlet watching = false;\nfunction watch() {\n if (watching || typeof document === \"undefined\") return;\n watching = true;\n const note = (e: Event) => {\n // a press, or Enter / Space on the focused control; a shortcut (⌘K) opens from nowhere in particular\n if (e.type === \"keydown\" && ![\"Enter\", \" \"].includes((e as KeyboardEvent).key)) return;\n // the control that was pressed, not the label or icon inside it\n const target =\n e.type === \"keydown\"\n ? document.activeElement\n : ((e.target as Element | null)?.closest(\n \"button, a[href], [role=button], [role=menuitem], [role=option], [role=tab], [role=row], input, select, textarea, [tabindex]\",\n ) ?? (e.target as Element | null));\n if (target && target !== document.body) last = { el: target, at: performance.now() };\n };\n document.addEventListener(\"pointerdown\", note, true);\n document.addEventListener(\"keydown\", note, true);\n}\n\nconst pending = new WeakSet();\nfunction measure(el: HTMLElement) {\n // once per opening: a later call would measure the layer already moved onto its opener\n if (el.dataset.openFrom !== undefined || pending.has(el)) return;\n const doc = el.ownerDocument;\n // only a recent press or activation counts as the opener; a layer opened by a shortcut or by code has none\n const opener = (\n last && performance.now() - last.at < 1500 && last.el.isConnected ? last.el : null\n ) as HTMLElement | null;\n if (!opener || opener === doc.body || el.contains(opener)) return;\n // A modal's scroll lock lands in an effect after the ref. Measure on the next frame, after the lock and before\n // paint. WebKit can reserve scrollbar space in the fixed containing block even when innerWidth === clientWidth\n // (also on a touch viewport), so comparing those widths cannot tell us whether the centre will move.\n const view = doc.defaultView;\n if (view) {\n pending.add(el);\n view.requestAnimationFrame(() => {\n pending.delete(el);\n if (el.isConnected && el.dataset.openFrom === undefined && place(el, opener)) el.dataset.openFrom = \"\";\n });\n } else if (place(el, opener)) el.dataset.openFrom = \"\";\n}\n\n/** Sets the start box: the opener's box as offsets from the layer's resting box. False when either has no size. */\nfunction place(el: HTMLElement, opener: HTMLElement) {\n const from = opener.getBoundingClientRect();\n // the layer's own resting box: its centre as laid out (an entrance scale does not move a centre) and its size\n // without transforms\n const w = el.offsetWidth;\n const h = el.offsetHeight;\n if (!w || !h || !from.width || !from.height) return false;\n const r = el.getBoundingClientRect();\n const left = r.left + r.width / 2 - w / 2;\n const top = r.top + r.height / 2 - h / 2;\n el.style.setProperty(\"--from-x\", `${from.left - left}px`);\n el.style.setProperty(\"--from-y\", `${from.top - top}px`);\n el.style.setProperty(\"--from-t\", \"0px\");\n el.style.setProperty(\"--from-l\", \"0px\");\n el.style.setProperty(\"--from-r\", `${Math.max(0, w - from.width)}px`);\n el.style.setProperty(\"--from-b\", `${Math.max(0, h - from.height)}px`);\n return true;\n}\n"},{"path":"beamline/components/_shared/use-return-focus.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/use-return-focus.ts","content":"\"use client\";\n\nimport { useRef } from \"react\";\nimport { useAppearanceRoot } from \"../../runtime/appearance\";\n\n/**\n * Where focus goes when a modal layer closes. Radix returns it to its own Trigger; a layer opened another way (a\n * controlled `open`, a menu item, a shortcut) would drop focus on . Spread the result on the Radix content: it\n * remembers what had focus as the layer opened and returns there, unless the caller's own handler prevents it.\n * If that opener is removed, return to its surviving owning region, or the managed scope's visual root.\n */\nexport function useReturnFocus({\n onOpenAutoFocus,\n onCloseAutoFocus,\n}: { onOpenAutoFocus?: (event: Event) => void; onCloseAutoFocus?: (event: Event) => void } = {}) {\n track();\n const before = useRef(null);\n const regions = useRef([]);\n const scope = useAppearanceRoot();\n return {\n onOpenAutoFocus: (event: Event) => {\n before.current = outside(document.activeElement, event.currentTarget as Element | null);\n const owners: HTMLElement[] = [];\n let ancestor = before.current;\n while (ancestor) {\n if (ancestor !== document.body && ancestor.matches(\"[data-return-region]\")) owners.push(ancestor);\n ancestor = ancestor.parentElement;\n }\n const root = scope ?? before.current?.closest(\".pui\");\n if (root && root !== document.body && !owners.includes(root)) owners.push(root);\n regions.current = owners;\n onOpenAutoFocus?.(event);\n },\n /** `layer` is the layer's own element, for a caller that runs this itself instead of Radix. */\n onCloseAutoFocus: (event: Event, layer: Element | null = event.currentTarget as Element | null) => {\n onCloseAutoFocus?.(event);\n if (event.defaultPrevented) return;\n // a layer whose field took focus as it mounted (autoFocus) never hears that it opened (Radix skips the mount\n // focus): the opener is then the last element focused outside it\n const el =\n before.current && before.current.isConnected && !layer?.contains?.(before.current)\n ? before.current\n : outside(null, layer);\n if (el && el !== document.body && el.isConnected) {\n event.preventDefault();\n el.focus({ preventScroll: true });\n return;\n }\n const region = regions.current.find((owner) => owner.isConnected);\n if (region) {\n event.preventDefault();\n // Regions need not be tab stops, but they must receive programmatic return focus.\n if (!region.hasAttribute(\"tabindex\")) region.tabIndex = -1;\n region.focus({ preventScroll: true });\n }\n },\n };\n}\n\n/** The last elements that took focus or were pressed, newest last, noted as it happened (capture phase, once per\n * page). Presses count too: a click on a button does not focus it everywhere (Safari), and the control that was\n * pressed is the opener a layer should give focus back to. */\nconst trail: Element[] = [];\nlet tracking = false;\nconst PRESSABLE =\n \"button, a[href], [role=button], [role=menuitem], [role=option], [role=tab], [tabindex], input, select, textarea\";\nfunction note(el: Element | null) {\n if (!el || el === document.body) return;\n if (trail.at(-1) === el) return;\n trail.push(el);\n if (trail.length > 24) trail.shift();\n}\nfunction track() {\n if (tracking || typeof document === \"undefined\") return;\n tracking = true;\n // A lazily mounted layer may be the first focus consumer on the page. Remember its opener before child autofocus.\n note(document.activeElement);\n document.addEventListener(\"focusin\", (event) => note(event.target as Element | null), true);\n document.addEventListener(\n \"pointerdown\",\n (event) => note((event.target as Element | null)?.closest?.(PRESSABLE) ?? null),\n true,\n );\n}\n\n/** `active` unless it is inside `layer`; then the most recent element focused outside the layer that still exists. */\nfunction outside(active: Element | null, layer: Element | null): HTMLElement | null {\n if (active && active !== document.body && !layer?.contains?.(active)) return active as HTMLElement;\n for (let i = trail.length - 1; i >= 0; i--) {\n const el = trail[i];\n if (el.isConnected && el !== document.body && !layer?.contains?.(el)) return el as HTMLElement;\n }\n return null;\n}\n"},{"path":"beamline/components/alert-dialog/alert-dialog.tsx","type":"registry:file","target":"src/ui/beamline/components/alert-dialog/alert-dialog.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport * as RadixAlertDialog from \"@radix-ui/react-alert-dialog\";\nimport { Button, type ButtonVariant } from \"../button/button\";\nimport { useReturnFocus } from \"../_shared/use-return-focus\";\nimport { useOpenFrom } from \"../_shared/use-open-from\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { cn } from \"../../lib/utils\";\nimport overlay from \"../_shared/overlay.module.css\";\n\n/** A confirmation that must be answered. open / defaultOpen / onOpenChange. */\nexport const AlertDialog = RadixAlertDialog.Root;\nexport const AlertDialogTrigger = RadixAlertDialog.Trigger;\n\nexport interface AlertDialogClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the scrim part; no override by default. */\n scrim?: string;\n /** Classes for the header part; no override by default. */\n header?: string;\n /** Classes for the title part; no override by default. */\n title?: string;\n /** Classes for the description part; no override by default. */\n description?: string;\n}\n\nexport interface AlertDialogContentProps extends Omit, \"title\"> {\n /** The question: \"Revoke production-server?\" */\n title: ReactNode;\n /** What happens, and whether it can be undone. */\n description: ReactNode;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: AlertDialogClassNames;\n}\n\n/**\n * Blocking: the scrim does not dismiss it (Escape and Cancel do), and focus starts on the safe choice, Cancel. Put an\n * AlertDialogFooter with AlertDialogCancel then AlertDialogAction inside.\n */\nexport function AlertDialogContent({\n title,\n description,\n className,\n classNames,\n children,\n onCloseAutoFocus,\n ref,\n ...props\n}: AlertDialogContentProps) {\n const openFrom = useOpenFrom(ref);\n const container = usePortalContainer();\n // focus starts on the safe choice, Cancel\n const focus = useReturnFocus({\n onOpenAutoFocus: (e) => {\n e.preventDefault();\n (e.currentTarget as HTMLElement).querySelector(\"[data-slot=alert-dialog-cancel]\")?.focus();\n },\n onCloseAutoFocus,\n });\n if (container === null) return null;\n return (\n \n \n \n
\n \n {title}\n \n \n {description}\n \n
\n {children}\n \n \n );\n}\n\n/** Cancel, then the consequential action, at the end; in a narrow dialog (a phone) they share the row in equal parts. */\nexport function AlertDialogFooter({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\n\n/** The safe choice; it has focus when the dialog opens. */\nexport function AlertDialogCancel({\n children: childrenProp,\n ...props\n}: ComponentProps) {\n const i18n = useMessages(\"alert-dialog\", englishMessages);\n const children = childrenProp === undefined ? i18n(\"cancel\") : childrenProp;\n\n return (\n \n \n \n );\n}\n\n/** The consequential choice: danger for destructive actions, primary otherwise. Your onClick runs the operation; for\n * async work call event.preventDefault() to keep the dialog open, show loading, and close it on success. */\nexport function AlertDialogAction({\n variant = \"danger\",\n loading,\n children,\n ...props\n}: ComponentProps & {\n /** Visual weight of the control. Defaults to \"danger\". */\n variant?: ButtonVariant;\n /** Shows the loading state while data or an operation is pending. Defaults to false. */\n loading?: boolean;\n}) {\n return (\n \n \n \n );\n}\n\nexport default AlertDialog;\n"},{"path":"beamline/components/alert-dialog/messages.ts","type":"registry:file","target":"src/ui/beamline/components/alert-dialog/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n cancel: \"Cancel\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/alert/alert.module.css","type":"registry:file","target":"src/ui/beamline/components/alert/alert.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the tone's tint, registered so a change of tone blends instead of switching */\n@property --pui-alert-tint {\n syntax: \"\";\n inherits: false;\n initial-value: transparent;\n}\n@layer components {\n /* An alert is a surface like any other, so every look frames it (blueprint's rule, pop's ink outline, ink's pen,\n mono's dashes, metal's pocket). The tone is a tint composed over the role's own fill, never a replacement, plus\n the icon in the tone's colour and the words: colour is never the only signal. */\n .alert {\n display: flex;\n gap: var(--pui-space-3);\n padding: var(--pui-space-3);\n border-radius: var(--pui-radius-card);\n background: linear-gradient(var(--pui-alert-tint), var(--pui-alert-tint)), var(--m-surface-bg);\n color: var(--pui-ink-2);\n /* a change of tone (warning → resolved) blends the tint instead of switching it */\n transition:\n var(--m-transition),\n --pui-alert-tint var(--pui-duration-standard) var(--pui-ease-default);\n }\n .alert[data-tone=\"info\"] {\n --_tone: var(--pui-blue);\n }\n .alert[data-tone=\"success\"] {\n --_tone: var(--pui-green);\n }\n .alert[data-tone=\"warning\"] {\n --_tone: var(--pui-orange);\n }\n .alert[data-tone=\"danger\"] {\n --_tone: var(--pui-red);\n }\n .alert[data-tone=\"neutral\"] {\n --_tone: var(--pui-ink-3);\n }\n .alert:not([data-tone=\"neutral\"]) {\n --pui-alert-tint: color-mix(in oklab, var(--_tone) 9%, transparent);\n }\n .icon {\n display: grid;\n flex: none;\n margin-top: var(--pui-space-0-5);\n color: var(--_tone);\n transition: color var(--pui-duration-standard) var(--pui-ease-default);\n }\n /* a new tone's glyph arrives from a little smaller, so the change of meaning is seen as well as the colour */\n .icon[data-changed] > svg {\n animation: glyph var(--pui-duration-standard) var(--pui-ease-default) both;\n }\n @keyframes glyph {\n from {\n opacity: 0;\n scale: calc(1 - 0.4 * var(--pui-motion-travel, 1));\n }\n }\n .action {\n margin-top: var(--pui-space-2);\n }\n /* a wide alert (from 36rem) keeps its action on the message's line, at the end; a narrow one puts it underneath */\n .alert[data-wide] > .body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--pui-space-4);\n align-items: center;\n }\n .alert[data-wide] > .body > :not(.action) {\n grid-column: 1;\n }\n .alert[data-wide] > .body > .action {\n grid-column: 2;\n grid-row: 1 / span var(--_rows, 1);\n margin-top: 0;\n justify-content: flex-end;\n }\n .icon > svg {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n }\n /* the fold: rows collapse to zero and the alert fades, then it unmounts; it arrives the same way, growing to its\n height where it belongs (so what sits below glides down instead of jumping) */\n .wrap {\n display: grid;\n grid-template-rows: 1fr;\n transition:\n grid-template-rows var(--pui-duration-standard) var(--pui-ease-standard),\n opacity var(--pui-duration-standard) var(--pui-ease-standard);\n }\n @starting-style {\n .wrap[data-state=\"open\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n }\n .wrap[data-state=\"closed\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n /* clips the fold, with room for the look's outer edge and shadow (pop's lip, soft's drop) so they are not cut */\n .clip {\n min-height: 0;\n margin: calc(var(--pui-space-1-5) * -1);\n padding: var(--pui-space-1-5);\n overflow: hidden;\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.alert {\n composes: m-surface from global;\n}\n"},{"path":"beamline/components/alert/alert.tsx","type":"registry:file","target":"src/ui/beamline/components/alert/alert.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport type { CSSProperties, Ref } from \"react\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { AlertDefaults } from \"./defaults\";\nexport type { AlertDefaults } from \"./defaults\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from \"lucide-react\";\nimport { Button } from \"../button/button\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useWidthAs } from \"../../hooks/use-content-width\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { focusAfterRemoval } from \"../../lib/focus\";\nimport styles from \"./alert.module.css\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\";\n\nexport interface AlertClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the wrap part; no override by default. */\n wrap?: string;\n /** Classes for the clip part; no override by default. */\n clip?: string;\n /** Classes for the icon part; no override by default. */\n icon?: string;\n /** Classes for the body part; no override by default. */\n body?: string;\n /** Classes for the title part; no override by default. */\n title?: string;\n /** Classes for the description part; no override by default. */\n description?: string;\n /** Classes for the action part; no override by default. */\n action?: string;\n /** Classes for the dismiss part; no override by default. */\n dismiss?: string;\n}\n\nexport interface AlertProps {\n /** Semantic colour of the displayed content. Defaults to \"info\". */\n tone?: AlertTone;\n /** Heading shown above the content. Defaults to no heading. */\n title?: ReactNode;\n /** What happened and what to do. */\n children?: ReactNode;\n /** Buttons or links: Retry, Update card. */\n action?: ReactNode;\n /** Replace the tone's icon, or false for none. */\n icon?: ReactNode | false;\n /** Controlled visibility; omitted by default to keep visibility locally. */\n open?: boolean;\n /** Initial visibility when uncontrolled; defaults to true. */\n defaultOpen?: boolean;\n /** Reports a request to close; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Shows a close button; defaults to whether onDismiss or onOpenChange is supplied. */\n dismissible?: boolean;\n /** Adds a close button; the alert folds away when open turns false. */\n onDismiss?: () => void;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: AlertClassNames;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n}\n\nconst ICON: Record = {\n info: ,\n success: ,\n warning: ,\n danger: ,\n neutral: ,\n};\n\n/** A message that stays until it is dealt with: what happened, what to do, and the action. Danger and warning are\n * announced as they appear; a dismissed alert folds its height away. */\nexport function Alert({\n tone: toneProp,\n title,\n children,\n action,\n icon,\n open: openProp,\n defaultOpen = true,\n onOpenChange,\n dismissible,\n onDismiss,\n className,\n style,\n classNames,\n ref,\n}: AlertProps) {\n const i18n = useMessages(\"alert\", englishMessages);\n\n const scopeDefaults = useComponentDefaults(\"alert\", [\"tone\"]);\n const tone = toneProp ?? scopeDefaults.tone ?? \"info\";\n\n // an older caller that only listens to onDismiss decides the removal itself, so closing is guarded and reported beside\n const [open, setOpen] = useControllable(openProp, defaultOpen);\n const canDismiss = dismissible ?? !!(onDismiss || onOpenChange);\n const [shown, setShown] = useState(open);\n useEffect(() => {\n if (open) setShown(true);\n }, [open]);\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n // a wide alert keeps its action on the message's line (read once per change of that answer)\n const wide = useWidthAs(host, (w) => w >= 576, false, shown);\n // the glyph of a tone it changed to arrives visibly; the first one is simply there\n const firstTone = useRef(tone);\n if (!shown) return null;\n return (\n {\n if (!open && e.target === e.currentTarget) setShown(false);\n }}\n >\n
\n \n {icon !== false && (\n \n {icon ?? ICON[tone]}\n \n )}\n
\n {title && (\n

\n {title}\n

\n )}\n {children && (\n
\n {children}\n
\n )}\n {action && (\n
\n {action}\n
\n )}\n
\n {canDismiss && (\n {\n focusAfterRemoval(e.currentTarget.closest(\"[data-slot=alert-wrap]\"));\n // Existing event-only callers still decide when removal happens; the new state API can close locally.\n if (dismissible !== undefined || onOpenChange !== undefined) setOpen(false);\n onOpenChange?.(false);\n onDismiss?.();\n }}\n >\n \n \n )}\n
\n
\n \n );\n}\n\nexport default Alert;\n"},{"path":"beamline/components/alert/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/alert/defaults.ts","content":"/** Pure allowed presentation defaults for Alert; no component or runtime imports. */\nexport interface AlertDefaults {\n /** Shared tone setting; omit to inherit the surrounding scope or the component default. */\n tone?: \"danger\" | \"success\" | \"warning\" | \"info\" | \"neutral\";\n}\n"},{"path":"beamline/components/alert/messages.ts","type":"registry:file","target":"src/ui/beamline/components/alert/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n dismiss: \"Dismiss\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/avatar/avatar.module.css","type":"registry:file","target":"src/ui/beamline/components/avatar/avatar.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Avatar: a face (initials on the name's hue, or a photo) and an optional presence mark. The mark is cut out of the\n face with a mask, so the gap around it is truly empty and reads on any ground: a card, a row hover, glass, a photo. */\n .root {\n --_s: 36px;\n --_d: 10px;\n --_g: 2px;\n position: relative;\n display: inline-grid;\n flex: none;\n width: var(--_s);\n height: var(--_s);\n place-items: center;\n /* initials scale with the face (geometry), never below 80% of the smallest type step */\n font-size: max(calc(var(--pui-text-2xs) * 0.8), calc(var(--_s) * 0.36));\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n user-select: none;\n }\n .xs {\n --_s: 20px;\n --_d: 6px;\n --_g: 1.5px;\n }\n .sm {\n --_s: 28px;\n --_d: 8px;\n }\n .lg {\n --_s: 44px;\n --_d: 12px;\n }\n .xl {\n --_s: 56px;\n --_d: 14px;\n --_g: 2.5px;\n }\n .face {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n overflow: hidden;\n border-radius: 50%;\n background: color-mix(in oklab, var(--pui-avatar-hue) 24%, var(--pui-surface-2));\n color: color-mix(in oklab, var(--pui-avatar-hue) 55%, var(--pui-ink));\n }\n /* the initials keep their tint but mix it into black or white, whichever the face's fill reads better against (its\n luminance at WCAG's 0.179 crossover): mixed into the scope's ink they fell to 3.5–4.5 on mid fills, a brand-toned\n sidebar's above all; this keeps every face at 5.5:1 or more in every look */\n @supports (color: color(from red xyz-d65 x y z)) {\n .face {\n --_ink: color(\n from color-mix(in oklab, var(--pui-avatar-hue) 24%, var(--pui-surface-2)) xyz-d65\n calc(0.9505 * round(0.679 - y)) round(0.679 - y) calc(1.089 * round(0.679 - y))\n );\n color: color-mix(in oklab, var(--pui-avatar-hue) 55%, var(--_ink));\n }\n }\n /* a company tile takes the look's card corner, never more than a third of the face, so it stays a square at xs */\n .root[data-shape=\"square\"] .face {\n /* nesting input (O1 §14.1, as Button): a parent that holds this near its rounded corner sets --pui-nest-radius and\n --pui-nest-inset; the corner becomes radius − inset, clamped between a floor (chip) and the part's own role radius (or --pui-nest-ceiling: a pill container sets it to the pill radius). Unset, the declaration is invalid and the own corner\n applies. --pui-avatar-radius wins over both. */\n --_avatar-nest: clamp(\n var(--pui-radius-chip),\n calc(var(--pui-nest-radius) - var(--pui-nest-inset, 0px)),\n var(--pui-nest-ceiling, min(var(--pui-radius-card), calc(var(--_s) / 3)))\n );\n --_r: var(--pui-avatar-radius, var(--_avatar-nest, min(var(--pui-radius-card), calc(var(--_s) / 3))));\n border-radius: var(--_r);\n }\n .photo {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity var(--pui-fade-in) var(--pui-ease-default);\n }\n /* still on its way: the initials hold the place, and the photo fades in over them when it lands */\n .photo[data-pending] {\n opacity: 0;\n }\n /* The mark sits on the bottom inline-end corner; the face loses a disc one gap wider than the mark under it. */\n .root[data-status] .face {\n --_at: calc(var(--_d) / 2 - 1px);\n mask: radial-gradient(\n circle at calc(100% - var(--_at)) calc(100% - var(--_at)),\n transparent calc(var(--_d) / 2 + var(--_g)),\n black calc(var(--_d) / 2 + var(--_g) + 0.5px)\n );\n }\n .root[data-status]:dir(rtl) .face {\n mask: radial-gradient(\n circle at var(--_at) calc(100% - var(--_at)),\n transparent calc(var(--_d) / 2 + var(--_g)),\n black calc(var(--_d) / 2 + var(--_g) + 0.5px)\n );\n }\n .mark {\n position: absolute;\n inset-inline-end: -1px;\n bottom: -1px;\n }\n /* a presence that changed settles into its new mark: the colour and shape arrive at once, the mark grows from a\n little smaller (reduced motion keeps only the fade) */\n .mark[data-changed] {\n animation: presence-settle var(--pui-duration-feedback) var(--pui-ease-standard) both;\n }\n\n /* Presence: colour and shape together, so it reads in greyscale (DESIGN-LANGUAGE: colour is never the only signal).\n online a full disc · away a crescent · busy a disc with a bar through it · offline a hollow ring. */\n .presence {\n --_d: 10px;\n display: inline-block;\n flex: none;\n width: var(--_d);\n height: var(--_d);\n border-radius: 50%;\n background: var(--_c);\n }\n .presence[data-size=\"xs\"] {\n --_d: 6px;\n }\n .presence[data-size=\"sm\"] {\n --_d: 8px;\n }\n .presence[data-size=\"lg\"] {\n --_d: 12px;\n }\n .presence[data-size=\"xl\"] {\n --_d: 14px;\n }\n .presence[data-status=\"online\"] {\n --_c: var(--pui-green);\n }\n .presence[data-status=\"away\"] {\n --_c: var(--pui-orange);\n mask: radial-gradient(circle at 18% 18%, transparent calc(var(--_d) * 0.36), black calc(var(--_d) * 0.36 + 0.5px));\n }\n .presence[data-status=\"away\"]:dir(rtl) {\n mask: radial-gradient(circle at 82% 18%, transparent calc(var(--_d) * 0.36), black calc(var(--_d) * 0.36 + 0.5px));\n }\n .presence[data-status=\"busy\"] {\n --_c: var(--pui-red);\n mask:\n linear-gradient(black 0 0) center / 56% max(1.5px, 22%) no-repeat,\n linear-gradient(black 0 0);\n mask-composite: exclude;\n }\n .presence[data-status=\"offline\"] {\n --_c: var(--pui-ink-3);\n mask: radial-gradient(circle, transparent calc(var(--_d) * 0.24), black calc(var(--_d) * 0.24 + 0.5px));\n }\n}\n@keyframes presence-settle {\n from {\n opacity: 0.4;\n scale: calc(1 - 0.45 * var(--pui-motion-travel, 1));\n }\n}\n"},{"path":"beamline/components/avatar/avatar.tsx","type":"registry:file","target":"src/ui/beamline/components/avatar/avatar.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { AvatarDefaults } from \"./defaults\";\nexport type { AvatarDefaults } from \"./defaults\";\n\nimport { useCallback, useState, type CSSProperties, type HTMLAttributes, type Ref } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./avatar.module.css\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type PresenceStatus = \"online\" | \"away\" | \"busy\" | \"offline\";\n\nconst SIZE: Record = {\n xs: styles.xs,\n sm: styles.sm,\n md: undefined,\n lg: styles.lg,\n xl: styles.xl,\n};\n\n/** A person's (or account's) series hue, the same everywhere their name appears. */\nexport function hueOf(name: string) {\n let h = 0;\n for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) | 0;\n return `var(--pui-series-${(Math.abs(h) % 8) + 1})`;\n}\nexport const initialsOf = (name: string) =>\n name\n .trim()\n .split(/\\s+/)\n .filter((w) => /\\p{L}|\\d/u.test(w[0] ?? \"\"))\n .slice(0, 2)\n .map((w) => w[0].toUpperCase())\n .join(\"\") || \"?\";\n\n/** A presence mark for avatars and lists. Colour and shape together: online a disc, away a crescent, busy a disc with\n * a bar, offline a hollow ring, so the status survives greyscale and colour-blindness. */\nexport function PresenceDot({\n status,\n size = \"md\",\n className,\n style,\n ref,\n ...props\n}: {\n status: PresenceStatus;\n size?: AvatarSize;\n className?: string;\n style?: CSSProperties;\n ref?: Ref;\n} & Omit, \"children\">) {\n const i18n = useMessages(\"avatar\", englishMessages);\n return (\n \n );\n}\n\nexport interface AvatarClassNames {\n root?: string;\n face?: string;\n photo?: string;\n presence?: string;\n}\n\nexport interface AvatarProps extends HTMLAttributes {\n name: string;\n /** A photo; initials show while it loads and if it fails. */\n src?: string;\n size?: AvatarSize;\n /** circle for people, square for companies and workspaces. */\n shape?: \"circle\" | \"square\";\n status?: PresenceStatus;\n ref?: Ref;\n classNames?: AvatarClassNames;\n}\n\n/** A person or account in a small space: a photo, or initials on the colour their name always gets. A photo still on\n * its way fades in over the initials instead of popping; a presence that changes settles into its new mark. */\nexport function Avatar({\n name,\n src,\n size: sizeProp,\n shape = \"circle\",\n status,\n className,\n classNames,\n style,\n ref,\n ...props\n}: AvatarProps) {\n const i18n = useMessages(\"avatar\", englishMessages);\n const scopeDefaults = useComponentDefaults(\"avatar\", [\"size\"]);\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n\n const [failed, setFailed] = useState(null);\n const photo = src && failed !== src;\n // a photo that is not decoded yet when it mounts waits unseen and fades in over the initials when it lands; one that\n // is already there (cached, or loaded before the page hydrated) shows at once, so a server render never hides it\n const [pending, setPending] = useState(null);\n const watch = useCallback((img: HTMLImageElement | null) => {\n if (!img) return;\n if (!img.complete) setPending(img.getAttribute(\"src\"));\n // A cached/decode failure can finish before React attaches onError during hydration.\n else if (img.naturalWidth === 0) setFailed(img.getAttribute(\"src\"));\n }, []);\n // a presence that changes (online → away) settles into its new mark; the first render does not play it\n const [seen, setSeen] = useState(status);\n const [changes, setChanges] = useState(0);\n if (seen !== status) {\n setSeen(status);\n setChanges((n) => n + 1);\n }\n return (\n \n \n {initialsOf(name)}\n {photo && (\n setPending(null)}\n onError={() => setFailed(src)}\n className={cn(styles.photo, classNames?.photo)}\n />\n )}\n \n {status && (\n 0 || undefined}\n className={cn(styles.mark, classNames?.presence)}\n />\n )}\n \n );\n}\n\nexport default Avatar;\n"},{"path":"beamline/components/avatar/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/avatar/defaults.ts","content":"/** Pure allowed presentation defaults for Avatar; no component or runtime imports. */\nexport interface AvatarDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"xs\" | \"lg\" | \"xl\";\n}\n"},{"path":"beamline/components/avatar/messages.ts","type":"registry:file","target":"src/ui/beamline/components/avatar/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n online: \"Online\",\n away: \"Away\",\n busy: \"Do not disturb\",\n offline: \"Offline\",\n presence: \"{name}, {status}\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/badge/badge.module.css","type":"registry:file","target":"src/ui/beamline/components/badge/badge.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Badge: a tinted label. The tone sets three local colours; the tag role lets a look outline it and ink its text\n (pop turns badges into stickers), every other look leaves it a quiet tinted pill for dense tables. */\n .root {\n --pui-badge-bg: var(--pui-hover);\n --pui-badge-fg: var(--pui-ink-2);\n --pui-badge-dot: var(--pui-ink-3);\n display: inline-flex;\n flex-shrink: 0;\n max-width: 100%;\n align-items: center;\n gap: var(--pui-space-1);\n height: 22px;\n padding-inline: var(--pui-space-2);\n /* nesting input (O1 §14.1, as Button): a parent that holds this near its rounded corner sets --pui-nest-radius and\n --pui-nest-inset; the corner becomes radius − inset, clamped between a floor (chip) and the part's own role radius (or --pui-nest-ceiling: a pill container sets it to the pill radius). Unset, the declaration is invalid and the own corner\n applies. --pui-badge-radius wins over both. */\n --_badge-nest: clamp(\n var(--pui-radius-chip),\n calc(var(--pui-nest-radius) - var(--pui-nest-inset, 0px)),\n var(--pui-nest-ceiling, var(--pui-radius-pill))\n );\n border-radius: var(--pui-badge-radius, var(--_badge-nest, var(--pui-radius-pill)));\n background: var(--pui-badge-bg);\n color: var(--m-tag-ink, var(--pui-badge-fg));\n font-size: var(--pui-text-xs);\n font-weight: var(--pui-weight-medium);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n white-space: nowrap;\n /* a tone that changes (Pending → Paid) eases its fill and ink in place; the word itself changes at once */\n transition:\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n var(--m-transition);\n }\n /* in a cell too narrow for it the label ends in \"…\" (the whole label shows on hover); icon and dot stay */\n .label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n /* the clip keeps descenders: the label is one line tall at the badge's line height */\n padding-block: 0.1em;\n }\n .root :where(svg) {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n }\n .sm {\n height: 20px;\n padding-inline: var(--pui-space-1-5);\n font-size: var(--pui-text-2xs);\n }\n .sm :where(svg) {\n width: 12px;\n height: 12px;\n }\n .accent {\n --pui-badge-bg: var(--pui-accent-tint);\n --pui-badge-fg: var(--pui-accent-ink);\n --pui-badge-dot: var(--pui-accent);\n }\n .success {\n --pui-badge-bg: var(--pui-green-tint);\n --pui-badge-fg: var(--pui-green);\n --pui-badge-dot: var(--pui-green);\n }\n .warning {\n --pui-badge-bg: var(--pui-orange-tint);\n --pui-badge-fg: var(--pui-orange);\n --pui-badge-dot: var(--pui-orange);\n }\n .danger {\n --pui-badge-bg: var(--pui-red-tint);\n --pui-badge-fg: var(--pui-red);\n --pui-badge-dot: var(--pui-red);\n }\n .info {\n --pui-badge-bg: var(--pui-blue-tint);\n --pui-badge-fg: var(--pui-blue);\n --pui-badge-dot: var(--pui-blue);\n }\n /* a category's own colour (identity): its dot, larger than a status dot so the colour reads, ringed in the badge's\n own ink so a pale or a dark stop shows on any fill; an icon takes the colour instead; with tint the pill takes a light\n wash of it and the word stays in ink */\n .root[data-color] {\n --pui-badge-dot: var(--_label-color);\n }\n .root[data-color] .dot {\n width: 8px;\n height: 8px;\n box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 30%, transparent);\n }\n .root[data-color] > :where(svg) {\n color: var(--_label-color);\n }\n .root[data-color=\"tint\"] {\n --pui-badge-bg: color-mix(in oklab, var(--_label-color) 18%, var(--pui-surface));\n --pui-badge-fg: var(--pui-ink);\n }\n .dot {\n width: 6px;\n height: 6px;\n flex-shrink: 0;\n border-radius: var(--pui-radius-pill);\n background: var(--pui-badge-dot);\n transition: background-color var(--pui-motion-out) var(--pui-ease-default);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: m-tag from global;\n}\n"},{"path":"beamline/components/badge/badge.tsx","type":"registry:file","target":"src/ui/beamline/components/badge/badge.tsx","content":"\"use client\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { BadgeDefaults } from \"./defaults\";\nexport type { BadgeDefaults } from \"./defaults\";\n\nimport type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./badge.module.css\";\n\nexport type BadgeTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport interface BadgeClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the dot part; no override by default. */\n dot?: string;\n /** Classes for the label part; no override by default. */\n label?: string;\n}\n\nexport interface BadgeProps extends HTMLAttributes {\n /** Semantic colour; pair it with a word or icon (colour is never the only signal). */\n tone?: BadgeTone;\n /** Height 20 / 22 px. */\n size?: BadgeSize;\n /** A leading icon element. */\n icon?: ReactNode;\n /** A leading status dot in the tone colour, instead of an icon. */\n dot?: boolean;\n /** A category's own colour, for a label the user matches across places (a card's \"Billing\" and the filter that\n * shows it): a dot in it before the word, ringed in the badge's ink so a pale or dark colour reads on any surface.\n * Take it from `identity(i, n)` in `@/lib/tone`, never a status tone. Omitted by default: no dot. */\n color?: string;\n /** With `color`, the pill takes a light tint of it as well (the word stays in ink). Default false: a neutral pill. */\n tint?: boolean;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: BadgeClassNames;\n}\n\n/** A short label for status, category or count; a category the user matches across places takes `color` (a dot,\n * optionally a tint, from the identity ramp). A tone that changes (Pending → Paid) eases its colours in place;\n * nothing else moves, so it costs nothing in a dense table. In a cell too narrow for it, the label ends in \"…\" and the\n * whole label shows on hover. Reads scoped presentation defaults. A look may outline it (pop makes it a sticker). */\nexport function Badge({\n tone: toneProp,\n size: sizeProp,\n icon,\n dot = false,\n color,\n tint = false,\n className,\n classNames,\n children,\n ref,\n onPointerEnter,\n ...props\n}: BadgeProps) {\n const scopeDefaults = useComponentDefaults(\"badge\", [\"tone\", \"size\"]);\n const tone = toneProp ?? scopeDefaults.tone ?? \"neutral\";\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n\n // a label cut by a narrow cell names itself on hover; nothing is measured until someone points at it\n const nameIfCut = (e: PointerEvent) => {\n onPointerEnter?.(e);\n const label = e.currentTarget.querySelector(\"[data-slot=badge-label]\");\n if (!label || props.title !== undefined) return;\n e.currentTarget.title = label.scrollWidth > label.clientWidth + 1 ? (label.textContent ?? \"\") : \"\";\n };\n return (\n \n {(dot || (color && !icon)) && (\n \n )}\n {icon}\n {children != null && children !== false && (\n \n {children}\n \n )}\n \n );\n}\n\nexport default Badge;\n"},{"path":"beamline/components/badge/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/badge/defaults.ts","content":"/** Pure allowed presentation defaults for Badge; no component or runtime imports. */\nexport interface BadgeDefaults {\n /** Shared tone setting; omit to inherit the surrounding scope or the component default. */\n tone?: \"danger\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"neutral\";\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\";\n}\n"},{"path":"beamline/components/bottom-sheet/bottom-sheet.tsx","type":"registry:file","target":"src/ui/beamline/components/bottom-sheet/bottom-sheet.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type Ref, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { animate, motion, useMotionValue, useTransform } from \"motion/react\";\nimport * as RadixDialog from \"@radix-ui/react-dialog\";\nimport { Button } from \"../button/button\";\nimport { useReturnFocus } from \"../_shared/use-return-focus\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useDrag } from \"../../hooks/use-drag\";\nimport { useResolvedAppearance } from \"../../hooks/use-resolved-appearance\";\nimport { motionEase } from \"../../lib/motion-tokens\";\nimport { semanticMotion } from \"../../lib/motion-source\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport overlay from \"../_shared/overlay.module.css\";\n\nexport interface BottomSheetProps {\n /** An element that opens it (uncontrolled use). */\n trigger?: ReactNode;\n /** Controlled open state; omit to use defaultOpen. */\n open?: boolean;\n /** Initial open state when uncontrolled. Defaults to false. */\n defaultOpen?: boolean;\n /** Reports open state after a change; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Heading shown above the content. Required. */\n title: string;\n /** Supporting text beneath the label or heading. Defaults to no supporting text. */\n description?: string;\n /** Resting heights as fractions of the screen, lowest first. Default [0.45, 0.92]. */\n detents?: number[];\n /** Which resting height it opens at. Default 0. */\n initialDetent?: number;\n /** Reports sheet resting height after a change; no callback by default. */\n onDetentChange?: (index: number) => void;\n /** Accessible text for the close control. Defaults to \"Close\". */\n closeLabel?: string;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: Partial<\n Record<\"root\" | \"backdrop\" | \"header\" | \"handle\" | \"title\" | \"description\" | \"close\" | \"body\", string>\n >;\n /** Content rendered inside the component. Defaults to no children. */\n children?: ReactNode;\n}\n\n/**\n * A phone panel that rests at a peek and follows the finger to full height. Drag the handle (or the header) between\n * resting heights; a flick down from the lowest closes it. The handle is a button: Enter cycles heights, ↑ ↓ move.\n * Escape, the scrim and Close also close it: focus goes back at once and the sheet slides away after.\n */\nexport function BottomSheet({\n trigger,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n title,\n description,\n detents = [0.45, 0.92],\n initialDetent = 0,\n onDetentChange,\n closeLabel: closeLabelProp,\n className,\n classNames,\n style,\n ref,\n children,\n}: BottomSheetProps) {\n const i18n = useMessages(\"bottom-sheet\", englishMessages);\n const closeLabel = closeLabelProp === undefined ? i18n(\"close\") : closeLabelProp;\n\n const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);\n const container = usePortalContainer();\n // the panel outlives `open`: focus returns and the trap lets go as `open` turns false, the panel leaves after;\n // opening again starts a fresh panel\n const [shown, setShown] = useState(open);\n const [round, setRound] = useState(0);\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) {\n setShown(true);\n setRound((r) => r + 1);\n }\n }\n return (\n \n {trigger && {trigger}}\n {container !== null && shown && (\n \n setOpen(false)}\n onGone={() => setShown(false)}\n >\n {children}\n \n \n )}\n \n );\n}\n\nfunction Panel({\n open,\n title,\n description,\n detents,\n initialDetent,\n onDetentChange,\n closeLabel,\n className,\n classNames,\n style,\n ref,\n onClose,\n onGone,\n children,\n}: Required> &\n Pick<\n BottomSheetProps,\n \"description\" | \"onDetentChange\" | \"className\" | \"classNames\" | \"style\" | \"ref\" | \"children\"\n > & { open: boolean; onClose: () => void; onGone: () => void }) {\n const i18n = useMessages(\"bottom-sheet\", englishMessages);\n\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n const appearance = useResolvedAppearance(host, { times: [\"duration-considered\"], easings: [\"ease-drawer\"] });\n const entered = useRef(false);\n const [vh, setVh] = useState(() => (typeof window === \"undefined\" ? 800 : window.innerHeight));\n const maxH = Math.round(vh * detents[detents.length - 1]);\n const yOf = (i: number) => maxH - Math.round(vh * detents[i]);\n const [detent, setDetent] = useState(Math.min(initialDetent, detents.length - 1));\n const y = useMotionValue(maxH);\n const scrim = useTransform(y, [yOf(0), maxH], [1, 0]);\n const drag = useRef<{ from: number } | null>(null);\n // held: the handle answers the finger at once (wider and brighter) for as long as the sheet is held\n const [held, setHeld] = useState(false);\n const header = useRef(null);\n // focus goes back as the sheet closes (below), so the unmount after it leaves must not move focus again\n const released = useRef(false);\n const focus = useReturnFocus({\n onCloseAutoFocus: (event) => {\n if (released.current) event.preventDefault();\n },\n });\n // closed from inside (Escape, Close, the scrim, a flick): it slides away; closed by its owner: it goes at once\n const [dismissed, setDismissed] = useState(false);\n const away = !open && !dismissed;\n const [headerH, setHeaderH] = useState(76);\n useLayoutEffect(() => {\n const element = header.current;\n if (!element) return;\n const measure = () => setHeaderH(element.offsetHeight);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(element);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const on = () => setVh(window.innerHeight);\n window.addEventListener(\"resize\", on);\n return () => window.removeEventListener(\"resize\", on);\n }, []);\n // the glide in flight, so a hand that grabs the sheet mid-glide takes it where it is\n const gliding = useRef | null>(null);\n const go = (target: number, after?: () => void) => {\n gliding.current?.stop();\n const run = animate(y, target, {\n duration: appearance.reducedMotion\n ? 0\n : (appearance.times[\"duration-considered\"] ?? semanticMotion.duration.considered),\n // the drawer curve the scope resolves; before it has, the system's entrance curve\n ease: motionEase(appearance.easings[\"ease-drawer\"], semanticMotion.ease.enter),\n });\n gliding.current = run;\n if (after) run.then(after);\n };\n const settle = (i: number) => {\n setDetent(i);\n onDetentChange?.(i);\n go(yOf(i));\n };\n const close = () => {\n setDismissed(true);\n onClose();\n };\n useLayoutEffect(() => {\n if (!appearance.ready || entered.current) return;\n entered.current = true;\n y.set(maxH);\n go(yOf(detent));\n }, [appearance.ready]); // eslint-disable-line react-hooks/exhaustive-deps -- slide in once\n useEffect(() => {\n if (!drag.current && open) y.set(yOf(detent));\n }, [vh]); // eslint-disable-line react-hooks/exhaustive-deps -- keep the resting height on rotation\n // `open` turned false and the trap has let go: focus returns now (not after the slide, never through ), then\n // the panel leaves; an effect, so the trap's own cleanup has already run\n useEffect(() => {\n if (open) return;\n const active = document.activeElement;\n if (!active || active === document.body || host.current?.contains(active))\n focus.onCloseAutoFocus(new Event(\"close\", { cancelable: true }), host.current);\n released.current = true;\n // a leaving panel takes no focus back: not by Tab, not by a child's autofocus that lands a frame late\n if (host.current) host.current.inert = true;\n if (!dismissed) {\n onGone();\n return;\n }\n entered.current = true;\n let live = true;\n go(maxH, () => live && onGone());\n return () => {\n live = false;\n };\n }, [open]); // eslint-disable-line react-hooks/exhaustive-deps -- on close only\n\n // the header drags the sheet through the shared drag (BUILDING §7): it follows the hand, resisting past the top; a\n // release projects 180 ms of the throw and closes past half the way down (or on a fast flick from the lowest detent),\n // else settles on the nearest detent; Escape mid-drag puts the sheet back on its detent and keeps it open\n useDrag(\n header,\n {\n onPress: (_, e) => {\n if ((e.target as HTMLElement).closest(\"button:not([data-handle]), a, input, textarea, select\")) return false;\n // a sheet still settling stops under the hand and is dragged from where it is\n gliding.current?.stop();\n drag.current = { from: y.get() };\n setHeld(true);\n },\n onMove: (p) => {\n const d = drag.current;\n if (!d) return;\n const next = d.from + p.dy;\n y.set(next < 0 ? next * 0.2 : next); // resist past the top\n },\n onEnd: (p) => {\n drag.current = null;\n setHeld(false);\n const v = p.vy / 1000; // px per ms\n const projected = y.get() + v * 180;\n if (projected > yOf(0) + (maxH - yOf(0)) * 0.5 || (v > 0.9 && detentAt(y.get()) === 0)) {\n close();\n return;\n }\n settle(detentAt(projected));\n },\n onTap: () => {\n const d = drag.current;\n drag.current = null;\n setHeld(false);\n if (d && Math.abs(y.get() - yOf(detent)) > 0.5) settle(detent);\n },\n onCancel: () => {\n const d = drag.current;\n drag.current = null;\n setHeld(false);\n if (d) settle(detentAt(d.from));\n },\n // a press the page took before it became a drag (a sideways move scrolls instead): let the handle go, and put a\n // sheet stopped mid-glide on its detent\n onAbandon: () => {\n const d = drag.current;\n drag.current = null;\n setHeld(false);\n if (d && Math.abs(y.get() - yOf(detent)) > 0.5) settle(detent);\n },\n },\n { axis: \"y\" },\n );\n const detentAt = (pos: number) =>\n detents.reduce((best, _, i) => (Math.abs(yOf(i) - pos) < Math.abs(yOf(best) - pos) ? i : best), 0);\n\n return (\n <>\n \n {\n e.preventDefault();\n close();\n }}\n />\n \n {\n e.preventDefault();\n close();\n }}\n onPointerDownOutside={(e) => e.preventDefault()}\n {...focus}\n >\n {\n const last = detents.length - 1;\n if (\n detent < last &&\n !drag.current &&\n (e.target as HTMLElement).getBoundingClientRect().bottom - e.currentTarget.getBoundingClientRect().top >\n Math.round(vh * detents[detent])\n )\n settle(last);\n }}\n className={cn(\n \"m-overlay fixed inset-x-0 bottom-0 z-[var(--pui-z-modal)] mx-auto flex max-w-[640px] flex-col rounded-t-[var(--pui-radius-window)] text-ink outline-none data-[state=closed]:pointer-events-none\",\n // closed by its owner it is gone from the first frame, still focusable until focus has gone back\n away && \"opacity-0\",\n classNames?.root,\n className,\n )}\n >\n \n \n
\n
\n \n {title}\n \n {description ? (\n \n {description}\n \n ) : (\n {title}\n )}\n
\n \n \n \n
\n \n \n {children}\n \n \n \n \n );\n}\n\nexport default BottomSheet;\n"},{"path":"beamline/components/bottom-sheet/messages.ts","type":"registry:file","target":"src/ui/beamline/components/bottom-sheet/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n collapseSheet: \"Collapse sheet\",\n expandSheet: \"Expand sheet\",\n close: \"Close\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/button/button-variants.ts","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts","content":"import { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n/** sm 32 · md 36 · lg 40 · touch 44 (a bottom action bar on a phone). */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"touch\";\n/** Market side: buy fills with --pui-up, sell with --pui-down (a red-up market flips the two tokens, not the code). */\nexport type ButtonTone = \"up\" | \"down\";\n\n/** Which paint role paints each variant: filled variants are solids, the quiet ones keep their own light paint. */\nconst ROLE: Record = {\n primary: \"m-solid\",\n accent: \"m-solid\",\n secondary: \"m-control\",\n outline: undefined,\n ghost: undefined,\n danger: undefined,\n};\n\n/** A variant's paint without the button's layout, for a group that wears one button's look (SplitButton paints the\n * pair as one button and leaves its halves transparent). */\nexport function buttonPaint(variant: ButtonVariant = \"primary\", tone?: ButtonTone) {\n return cn(ROLE[variant], styles[variant], tone && styles[tone]);\n}\n\n/** The classes that make any element look like a Button, for parts that render their own element. */\nexport function buttonClassName({\n variant = \"primary\",\n size = \"md\",\n tone,\n className,\n}: { variant?: ButtonVariant; size?: ButtonSize; tone?: ButtonTone; className?: string } = {}) {\n return cn(styles.root, ROLE[variant], styles[variant], tone && styles[tone], styles[size], className);\n}\n"},{"path":"beamline/components/button/button.module.css","type":"registry:file","target":"src/ui/beamline/components/button/button.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Button. Every colour, size and duration is a token; a variant only sets the four local properties below. */\n .root {\n --_button-bg: transparent;\n --_button-bg-hover: var(--pui-hover);\n --_button-fg: var(--pui-ink);\n --_button-edge: none;\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n position: relative;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pui-space-1-5);\n flex-shrink: 0;\n height: var(--_button-height);\n min-width: var(--_button-height);\n /* never wider than its room: in a narrow card the label ends in an ellipsis instead of spilling (the full words\n stay the accessible name) */\n max-width: 100%;\n padding-inline: var(--_button-pad);\n border: 0;\n /* Nested context: inside a frame that sets --pui-nest-radius and --pui-nest-inset (and --pui-nest-ceiling for pills)\n the corner is the shared nested corner (.nest-corner, utilities.css: radius − inset, or the button's own radius\n where that would fall under the chip radius); elsewhere the control radius. --pui-button-radius wins over both. */\n border-radius: var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control)));\n color: var(--_button-fg);\n font-family: var(--pui-font-body);\n font-size: var(--pui-text-sm);\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n letter-spacing: var(--pui-tracking-body);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n /* frequency law: hover arrives at 0ms (below), leaves over the ruled departure; opacity and translate are listed\n so a button that waits for attention (.reveal) fades away like every reveal instead of vanishing */\n transition:\n var(--m-transition),\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-motion-out) var(--pui-ease-default),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n /* the quiet variants paint themselves; filled and secondary variants are painted by their look role (m-solid,\n m-control), which these zero-specificity rules can never override */\n :where(.root) {\n background: var(--_button-bg);\n box-shadow: var(--_button-edge);\n }\n :where(.root:hover:not(:disabled, [aria-disabled=\"true\"])) {\n background: var(--_button-bg-hover);\n }\n .root:hover:not(:disabled, [aria-disabled=\"true\"]) {\n transition-duration: 0ms;\n }\n /* the asChild form has no motion: a CSS press instead */\n .root:not(button):active {\n transform: scale(0.97);\n }\n .root:disabled,\n .root[aria-disabled=\"true\"]:not([data-loading]) {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .root[data-loading] {\n cursor: progress;\n }\n\n /* Icons: 16px unless the icon says otherwise (zero specificity, so size-5 or an inline size wins) */\n :where(.root) :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n }\n\n .sm {\n --_button-height: var(--pui-control-height-sm);\n --_button-pad: var(--pui-space-2-5);\n /* the base gap (--pui-space-1-5); 5px had no scale step, and 6px also lets the loader's negative margin cancel\n the gap exactly at every size */\n }\n .md {\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n }\n .lg {\n --_button-height: var(--pui-control-height-lg);\n --_button-pad: var(--pui-space-4);\n font-size: var(--pui-text-base);\n }\n /* a bottom action bar on a phone: the 44 px touch target (a platform minimum, not a spacing step, so it holds when\n the spacing parameter changes — O1 §14.2), the large label */\n .touch {\n --_button-height: calc(var(--pui-control-height-lg) + 0.25rem);\n --_button-pad: var(--pui-space-5);\n font-size: var(--pui-text-base);\n }\n .root[data-icon-only] {\n padding-inline: 0;\n width: var(--_button-height);\n }\n\n /* the main action: ink on the page, inverted per theme */\n .primary {\n --m-color: var(--pui-ink);\n --_button-fg: var(--pui-ink-inverse);\n }\n .secondary {\n --_button-fg: var(--pui-ink);\n }\n .outline {\n --_button-edge: inset 0 0 0 1px var(--pui-line-strong);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost {\n --_button-fg: var(--pui-ink-2);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost:hover:not(:disabled) {\n color: var(--pui-ink);\n }\n .danger {\n --_button-fg: var(--pui-red);\n --_button-edge: inset 0 0 0 1px color-mix(in oklab, var(--pui-red) 42%, transparent);\n --_button-bg-hover: var(--pui-red-tint);\n }\n .accent {\n --m-color: var(--pui-accent);\n --_button-fg: var(--pui-accent-foreground);\n }\n\n /* Market side. Declared after the variants so it wins: a filled variant takes the side's colour and its on-colour\n ink; a quiet variant keeps its paint and colours the label. */\n .up {\n --m-color: var(--pui-up);\n --_button-fg: var(--pui-up);\n }\n .down {\n --m-color: var(--pui-down);\n --_button-fg: var(--pui-down);\n }\n .ghost:is(.up, .down):hover:not(:disabled) {\n color: var(--_button-fg);\n }\n .primary.up,\n .accent.up {\n --_button-fg: var(--pui-on-up);\n }\n .primary.down,\n .accent.down {\n --_button-fg: var(--pui-on-down);\n }\n\n /* The main actions' light, where the look provides one, as a spectrum. Glow spills a soft light in the brand's\n spectrum from under the button's bottom edge (clipped at it, so it never tints the face) that brightens under the\n pointer. Prism keeps it inside the glass (--m-solid-glow-fit: 1): the face the light leaves by, the bottom edge,\n splits it into a crisp line with a faint wash rising into the face, only while pointed at. Every other look\n leaves --m-solid-glow at none, so the layer does not exist. */\n .primary::after,\n .accent::after {\n --_fit: var(--m-solid-glow-fit, 0);\n content: var(--m-solid-glow);\n position: absolute;\n z-index: -1;\n top: calc((1 - var(--_fit)) * (100% + var(--m-solid-glow-gap, 0px)));\n inset-inline: var(--m-solid-glow-inset, 14%);\n height: var(--m-solid-glow-height, 14px);\n border-radius: calc(\n var(--_fit) * var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control))) + (1 - var(--_fit)) *\n var(--pui-radius-pill)\n );\n background: var(--m-spectrum);\n background-size: var(--m-spectrum-size, 100% 100%);\n /* the part of the spectrum that shows: this button's own angle (--m-prism-seed, new at every press), turned by\n where the pointer is across the face (--m-prism-x) in a look that turns it (--m-solid-glow-turn) */\n background-position: calc((var(--m-prism-seed, 0.3) + var(--m-prism-x, 0.5) * var(--m-solid-glow-turn, 0)) * 100%) 0;\n filter: blur(var(--m-solid-glow-blur, 9px));\n clip-path: var(--m-solid-glow-clip, inset(0 -32px -32px -32px));\n mask: var(--m-solid-glow-mask, none);\n mask-position:\n 0 0,\n calc(var(--m-prism-seed, 0.3) * 100%) 0;\n mask-composite: intersect;\n opacity: var(--m-solid-glow-rest, 0.75);\n scale: var(--m-solid-glow-scale, 1) 1;\n pointer-events: none;\n transition:\n opacity var(--pui-motion-out) var(--pui-ease-default),\n scale var(--pui-motion-out) var(--pui-ease-default),\n background-position var(--pui-duration-considered) var(--pui-ease-default),\n mask-position var(--pui-duration-considered) var(--pui-ease-default);\n }\n /* pointed at: the light brightens (glow) or grows out from the centre and drifts along while the pointer stays\n (prism) */\n .primary:hover::after,\n .accent:hover::after {\n opacity: 1;\n scale: 1 1;\n transition-duration: var(--m-solid-glow-in, 0ms);\n animation: var(--m-solid-glow-flow, none);\n }\n /* A change of word or colour (Save → Saved, a tone turning green) passes a band of split light across the face once,\n in a look that has one (prism: --m-solid-shift-light; the pen hook's ::before is free on a solid otherwise). */\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: var(--m-solid-shift-light, none);\n position: absolute;\n inset: 0;\n z-index: -1;\n border: 0;\n border-radius: inherit;\n background: var(--m-spectrum) 0 0 / var(--m-spectrum-size, 100% 100%);\n mask: linear-gradient(105deg, transparent 39%, #000 47.5%, #000 52.5%, transparent 61%) 0 0 / 300% 100% no-repeat;\n opacity: 0;\n animation: prism-shift calc(var(--pui-duration-considered) * 2.2) var(--pui-ease-default);\n pointer-events: none;\n }\n @keyframes prism-shift {\n from {\n mask-position: 100% 0;\n opacity: 0.25;\n }\n 35% {\n opacity: 0.55;\n }\n to {\n mask-position: 0 0;\n opacity: 0;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .primary::after,\n .accent::after {\n transition: none;\n animation: none !important;\n }\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: none;\n }\n }\n .root:disabled::after,\n .root[aria-disabled=\"true\"]::after {\n content: none;\n }\n\n /* The loader opens its own width, and the negative margin cancels the gap so the label does not jump */\n .loader {\n display: inline-flex;\n overflow: hidden;\n margin-inline-end: calc(var(--pui-space-1-5) * -1);\n }\n .loader > * {\n margin-inline-end: var(--pui-space-1-5);\n }\n .spinner {\n color: currentColor;\n }\n .root[data-icon-only] .loader {\n margin-inline-end: 0;\n }\n .root[data-icon-only] .loader > * {\n margin-inline-end: 0;\n }\n\n /* The label holds its place while the text inside swaps; the leaving text pops out of flow against it */\n .label {\n position: relative;\n display: inline-flex;\n justify-content: center;\n min-width: 0;\n overflow: visible;\n }\n /* the clip box is let out by a little over a line so descenders are never cut, without changing the layout */\n .text {\n display: inline-block;\n max-width: 100%;\n margin-block: -0.2em;\n padding-block: 0.2em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .label[data-morphing] > .text {\n overflow: visible;\n text-overflow: clip;\n }\n}\n\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .root:not(button):active,\n :global(.pui[data-motion=\"none\"]) .root:not(button):active {\n transform: none;\n }\n @media (prefers-reduced-motion: reduce) {\n .root:not(button):active {\n transform: none;\n }\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: nest-corner from global;\n}\n"},{"path":"beamline/components/button/button.tsx","type":"registry:file","target":"src/ui/beamline/components/button/button.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport {\n Children,\n Fragment,\n isValidElement,\n useLayoutEffect,\n useRef,\n type ButtonHTMLAttributes,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type RefObject,\n type ComponentProps,\n} from \"react\";\nimport { AnimatePresence, LazyMotion, m, spring, useIsPresent } from \"motion/react\";\nimport { animate } from \"motion/mini\";\nimport * as Slot from \"@radix-ui/react-slot\";\nimport { Spinner } from \"../spinner/spinner\";\nimport type { BuiltInLook as Look } from \"../../runtime/preset\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type { ButtonVariant, ButtonSize, ButtonTone } from \"./button-variants\";\nexport { buttonPaint, buttonClassName } from \"./button-variants\";\nimport { buttonClassName, type ButtonVariant, type ButtonSize, type ButtonTone } from \"./button-variants\";\nimport type { ButtonDefaults } from \"./defaults\";\nexport type { ButtonDefaults } from \"./defaults\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\n\ntype NativeProps = Omit<\n ButtonHTMLAttributes,\n \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"\n>;\n\nexport interface ButtonProps extends NativeProps {\n /** Visual weight: primary (ink-filled), secondary, outline, ghost, danger, or accent (filled with the brand). */\n variant?: ButtonVariant;\n /** Height 32 / 36 / 40 px; touch 44 px for a bottom action bar on a phone. */\n size?: ButtonSize;\n /** Market side. On primary/accent the fill becomes --pui-up (buy) or --pui-down (sell); on the quiet variants the\n * label takes that colour. Pair it with a word or arrow: colour is never the only signal. */\n tone?: ButtonTone;\n /** Shows a loader in front of the label, sets aria-busy and ignores clicks; size and focus stay. */\n loading?: boolean;\n classNames?: Partial>;\n /** Paint this button in another look than the one in force around it (DESIGN-LANGUAGE.md \"Looks\"). */\n look?: Look;\n /** Render the single child (a link, a Radix trigger) with the button's look instead of a \n );\n })}\n {hidden > 0 && (\n !shown.includes(o)).map((o) => o.label)}\n onExpand={() => setExpanded(true)}\n slot=\"chip-group-more\"\n className={cn(\"h-7 rounded-pill px-3 text-sm\", classNames?.more)}\n />\n )}\n {expanded && (\n setExpanded(false)}\n className={cn(styles.more, classNames?.more)}\n data-slot=\"chip-group-more\"\n >\n {i18n(\"showFewer\")}\n \n )}\n \n );\n if (!asField) return control();\n return (\n \n {control}\n \n );\n}\n\nexport default ChipGroup;\n"},{"path":"beamline/components/chip-group/messages.ts","type":"registry:file","target":"src/ui/beamline/components/chip-group/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n showFewer: \"Show fewer\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/combobox/combobox.tsx","type":"registry:file","target":"src/ui/beamline/components/combobox/combobox.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { ComboboxDefaults } from \"./defaults\";\nexport type { ComboboxDefaults } from \"./defaults\";\n\nimport { useEffect, useId, useMemo, useRef, useState, type Ref, type CSSProperties, type ReactNode } from \"react\";\nimport { ChevronsUpDown, Plus, Search, X } from \"lucide-react\";\nimport * as RadixPopover from \"@radix-ui/react-popover\";\nimport {\n Field,\n FieldFrame,\n fieldControlClass,\n useFieldIds,\n type FieldClassNames,\n type FieldSize,\n} from \"../_shared/field\";\nimport { Listbox, useListbox, type ListOption } from \"../_shared/listbox\";\nimport { BottomSheet } from \"../bottom-sheet/bottom-sheet\";\nimport { useMediaQuery } from \"../../hooks/use-media-query\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { IconAction } from \"../_shared/icon-action\";\nimport overlay from \"../_shared/overlay.module.css\";\n\nexport type ComboboxOption = ListOption;\n\n/** The create row's value: never a real option's. */\nconst CREATE = \"\\u0000create\";\n/** Rows a Page key moves. */\nconst PAGE = 10;\n\nexport interface ComboboxProps {\n label: ReactNode;\n hideLabel?: boolean;\n options: ComboboxOption[];\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string) => void;\n description?: ReactNode;\n error?: ReactNode;\n placeholder?: string;\n /** What to say when nothing matches. Default: No match for “…”. */\n emptyMessage?: ReactNode;\n /** Show a × that clears the choice. It shows while the field is hovered or holds focus (always on touch). */\n clearable?: boolean;\n /** Offer to make a new choice from a search that matches no option exactly: a last row, Create “…”. Resolve with the\n * new option (it is chosen, and stays in the list even before `options` carries it) or with an error, said under the\n * field with the search kept. Without it the list offers only `options`, as before. */\n onCreate?: (query: string) => Promise;\n /** The create row's words. Default: Create “…”. */\n createLabel?: (query: string) => string;\n /** Heading of the list's bottom sheet below 640 px. Default: the label. */\n sheetTitle?: string;\n size?: FieldSize;\n disabled?: boolean;\n required?: boolean;\n id?: string;\n className?: string;\n /** Classes for documented field parts; root style does not replace native behavior. */\n classNames?: FieldClassNames & Partial>;\n style?: CSSProperties;\n ref?: Ref;\n}\n\n/**\n * One value from a long list, found by typing: time zones, countries, customers. Typing ranks label starts first;\n * ↑ ↓ move, Page Up / Down by ten, Enter picks, Escape closes and restores what was chosen. The field keeps focus\n * throughout; a list of thousands mounts only the rows in view. Below 640 px\n * the list opens in a bottom sheet with its own search field, clear of the on-screen keyboard; focus comes back to\n * the field when it closes.\n */\nexport function Combobox({\n label,\n hideLabel,\n options,\n value: valueProp,\n defaultValue = null,\n onValueChange,\n description,\n error,\n placeholder: placeholderProp,\n emptyMessage,\n clearable,\n onCreate,\n createLabel,\n sheetTitle,\n size: sizeProp,\n disabled,\n required,\n id,\n className,\n classNames,\n style,\n ref,\n}: ComboboxProps) {\n const i18n = useMessages(\"combobox\", englishMessages);\n const placeholder = placeholderProp === undefined ? i18n(\"placeholder\") : placeholderProp;\n\n const scopeDefaults = useComponentDefaults(\"combobox\", [\"size\"]);\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n\n // the value is null once cleared, while onValueChange reports a clear as \"\" (its documented contract)\n const [value, setValue] = useControllable(valueProp, defaultValue);\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [typing, setTyping] = useState(false);\n // choices made here stay listed until `options` carries them itself\n const [created, setCreated] = useState([]);\n const [creating, setCreating] = useState(null);\n const [createError, setCreateError] = useState(null);\n const all = useMemo(\n () =>\n created.length ? [...options, ...created.filter((c) => !options.some((o) => o.value === c.value))] : options,\n [options, created],\n );\n const chosen = all.find((o) => o.value === value) ?? null;\n const asked = query.trim();\n const createRow = useMemo(\n () =>\n onCreate && typing && asked && !all.some((o) => o.label.trim().toLowerCase() === asked.toLowerCase())\n ? {\n value: CREATE,\n label:\n creating === asked\n ? i18n(\"creating\", { query: asked })\n : (createLabel?.(asked) ?? i18n(\"create\", { query: asked })),\n icon: ,\n keywords: [asked],\n disabled: creating !== null,\n }\n : null,\n [onCreate, typing, asked, all, creating, createLabel, i18n],\n );\n // The list keeps its search through the exit; resetting it while closing resizes the observed popover.\n const { filtered, active, setActive, move, jump, viaKeys, current } = useListbox(all, query, createRow);\n const { controlId, descriptionId, errorId, aria } = useFieldIds(id, {\n description,\n error: error ?? createError ?? undefined,\n });\n const listId = useId();\n const input = useRef(null);\n const attach = useComposedRef(input, ref);\n const container = usePortalContainer();\n // a phone: the list is a sheet, and the field only opens it (no keyboard under a popover)\n const phone = useMediaQuery(\"(max-width: 639px)\");\n const [sheet, setSheet] = useState(false);\n // a sheet left open when the screen widens past 640 px must not come back by itself\n useEffect(() => {\n if (!phone) setSheet(false);\n }, [phone]);\n const openSheet = (initial = \"\") => {\n if (disabled) return;\n setQuery(initial);\n setTyping(!!initial);\n setSheet(true);\n };\n\n // when the list opens without typing, the chosen row is the active one\n useEffect(() => {\n if ((open || sheet) && !typing && chosen)\n setActive(\n Math.max(\n 0,\n filtered.findIndex((o) => o.value === chosen.value),\n ),\n );\n }, [open, sheet]); // eslint-disable-line react-hooks/exhaustive-deps -- on open only\n const pick = (o: ListOption) => {\n if (o.value === CREATE) {\n void create(asked);\n return;\n }\n setCreateError(null);\n setValue(o.value);\n onValueChange?.(o.value);\n setTyping(false);\n setOpen(false);\n setSheet(false);\n };\n const create = async (text: string) => {\n if (!onCreate || creating) return;\n setCreating(text);\n setCreateError(null);\n const r = await onCreate(text);\n setCreating(null);\n if (\"error\" in r) {\n setCreateError(i18n(\"createFailed\", { query: text, reason: r.error }));\n return;\n }\n setCreated((c) => [...c.filter((x) => x.value !== r.value), r]);\n pick(r);\n };\n const close = () => {\n setOpen(false);\n setTyping(false);\n };\n const openList = () => {\n setQuery(\"\");\n setTyping(false);\n setOpen(true);\n };\n\n return (\n \n {\n if (!o) close();\n }}\n >\n \n
\n \n {clearable && chosen && !disabled && (\n e.preventDefault()}\n onClick={() => {\n setValue(null);\n onValueChange?.(\"\");\n input.current?.focus();\n }}\n className={cn(\"reveal\", classNames?.clear)}\n >\n \n \n )}\n e.preventDefault()}\n onClick={() => {\n if (phone) openSheet();\n else if (open) close();\n else openList();\n input.current?.focus();\n }}\n pressed={open}\n className={classNames?.toggle}\n >\n \n \n \n }\n >\n {\n if (phone) {\n openSheet(e.target.value);\n return;\n }\n setQuery(e.target.value);\n setTyping(true);\n setOpen(true);\n setCreateError(null);\n }}\n onFocus={(e) => {\n if (!phone) e.currentTarget.select();\n }}\n // a click shows the options (Tab alone does not, so moving through a form stays quiet)\n onClick={() => {\n if (phone) openSheet();\n else if (!open && !disabled) openList();\n }}\n onBlur={() => {\n if (!phone) close();\n }}\n onKeyDown={(e) => {\n if (phone) {\n // the field opens the sheet; a typed letter starts its search\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(e.key)) {\n e.preventDefault();\n openSheet();\n } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {\n e.preventDefault();\n openSheet(e.key);\n }\n return;\n }\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n if (!open) openList();\n else move(e.key === \"ArrowDown\" ? 1 : -1);\n } else if (e.key === \"Enter\" && open) {\n e.preventDefault();\n if (current && !current.disabled) pick(current);\n } else if (e.key === \"Escape\" && open) {\n e.preventDefault();\n e.stopPropagation();\n close();\n } else if (e.key === \"Home\" && open && !typing) {\n e.preventDefault();\n jump(0);\n } else if (e.key === \"End\" && open && !typing) {\n e.preventDefault();\n jump(filtered.length - 1);\n } else if ((e.key === \"PageDown\" || e.key === \"PageUp\") && open) {\n e.preventDefault();\n jump(active + (e.key === \"PageDown\" ? PAGE : -PAGE));\n }\n }}\n />\n \n
\n \n {!phone && container !== null && (\n \n e.preventDefault()}\n onCloseAutoFocus={(e) => e.preventDefault()}\n onInteractOutside={(e) => {\n if (e.target instanceof Node && input.current?.closest(\"[data-slot=field]\")?.contains(e.target))\n e.preventDefault();\n }}\n className={cn(\n overlay.surface,\n \"w-[var(--radix-popover-trigger-width)] min-w-[220px]\",\n classNames?.content,\n )}\n >\n v === value}\n onPick={pick}\n emptyText={emptyMessage}\n />\n \n \n )}\n \n {phone && (\n {\n if (!o) close();\n setSheet(o);\n }}\n title={sheetTitle ?? (typeof label === \"string\" ? label : placeholder)}\n detents={[0.92]}\n classNames={{ body: \"flex flex-col\" }}\n >\n {\n setQuery(q);\n setTyping(true);\n setCreateError(null);\n }}\n filtered={filtered}\n active={active}\n setActive={setActive}\n move={move}\n jump={jump}\n viaKeys={viaKeys}\n current={current}\n value={value}\n onPick={pick}\n emptyText={emptyMessage}\n className={classNames?.content}\n />\n \n )}\n \n );\n}\n\n/** The sheet's search field and list: the same listbox, keys and ranking as the popover, with the field inside. */\nfunction SheetList({\n listId,\n label,\n placeholder,\n query,\n onQuery,\n filtered,\n active,\n setActive,\n move,\n jump,\n viaKeys,\n current,\n value,\n onPick,\n emptyText,\n className,\n}: {\n listId: string;\n label: string;\n placeholder: string;\n query: string;\n onQuery: (query: string) => void;\n filtered: ListOption[];\n active: number;\n setActive: (i: number) => void;\n move: (delta: number) => void;\n jump: (to: number) => void;\n viaKeys: { current: boolean };\n current: ListOption | undefined;\n value: string | null;\n onPick: (option: ListOption) => void;\n emptyText?: ReactNode;\n className?: string;\n}) {\n const i18n = useMessages(\"combobox\", englishMessages);\n\n const search = useRef(null);\n // after the sheet's own focus scope settles (it records the field to return to), the search takes focus\n useEffect(() => {\n const frame = requestAnimationFrame(() => search.current?.focus({ preventScroll: true }));\n return () => cancelAnimationFrame(frame);\n }, []);\n return (\n
\n
\n }>\n onQuery(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n move(e.key === \"ArrowDown\" ? 1 : -1);\n } else if (e.key === \"PageDown\" || e.key === \"PageUp\") {\n e.preventDefault();\n jump(active + (e.key === \"PageDown\" ? PAGE : -PAGE));\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (current && !current.disabled) onPick(current);\n }\n }}\n />\n \n
\n v === value}\n onPick={onPick}\n emptyText={emptyText}\n className=\"max-h-none min-h-0 flex-1 px-[var(--pui-space-2)] pb-[var(--pui-space-4)]\"\n />\n
\n );\n}\n\nexport default Combobox;\n"},{"path":"beamline/components/combobox/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/combobox/defaults.ts","content":"/** Pure allowed presentation defaults for Combobox; no component or runtime imports. */\nexport interface ComboboxDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n"},{"path":"beamline/components/combobox/messages.ts","type":"registry:file","target":"src/ui/beamline/components/combobox/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n placeholder: \"Search\",\n clear: \"Clear\",\n closeList: \"Close list\",\n openList: \"Open list\",\n options: \"Options\",\n search: \"Search {label}\",\n create: \"Create “{query}”\",\n creating: \"Creating “{query}”…\",\n createFailed: \"“{query}” wasn't created: {reason}\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/copy-button/copy-button.tsx","type":"registry:file","target":"src/ui/beamline/components/copy-button/copy-button.tsx","content":"\"use client\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { CopyButtonDefaults } from \"./defaults\";\nexport type { CopyButtonDefaults } from \"./defaults\";\n\nimport { useEffect, useRef, useState, type CSSProperties, type Ref } from \"react\";\nimport { Check, Copy, X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Button, type ButtonSize, type ButtonVariant } from \"../button/button\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\nimport { copyText } from \"../../lib/clipboard\";\nimport { useMessages, type MessageLabels } from \"../../runtime/localization\";\nimport { english } from \"./messages\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface CopyButtonClassNames {\n root?: string;\n label?: string;\n loader?: string;\n iconFrame?: string;\n icon?: string;\n status?: string;\n}\n\nexport interface CopyButtonProps {\n /** The text that lands on the clipboard. */\n value: string;\n /** What is copied, e.g. \"Copy API key\"; the accessible name when icon-only. Default \"Copy\". */\n label?: string;\n /** Per-instance copy; overrides UIRoot messages. */\n labels?: MessageLabels;\n /** The confirmation in your words, shown in place of the label and said to a screen reader: \"Link copied\". Default\n * \"Copied\" (heard as \"Copied to clipboard\"). */\n copiedLabel?: string;\n iconOnly?: boolean;\n /** Any Button variant; \"plain\" is kept as an alias of ghost. Default secondary. */\n variant?: ButtonVariant | \"plain\";\n size?: ButtonSize;\n disabled?: boolean;\n /** Runs after a successful copy. */\n onCopied?: () => void;\n /** How long \"Copied\" stays, ms. Default 1600. */\n timeout?: number;\n className?: string;\n classNames?: CopyButtonClassNames;\n style?: CSSProperties;\n ref?: Ref;\n}\n\nconst ICONS = { idle: Copy, copied: Check, failed: X } as const;\n\n/**\n * Copies a value and confirms in place: the icon turns into a check and the label into \"Copied\" for a moment, and a\n * screen reader hears it. If the browser refuses, it says so instead of pretending.\n */\nexport function CopyButton({\n value,\n label,\n labels,\n copiedLabel,\n iconOnly = false,\n variant: variantProp,\n size: sizeProp,\n disabled,\n onCopied,\n timeout = 1600,\n className,\n classNames,\n style,\n ref,\n}: CopyButtonProps) {\n const t = useMessages(\"copy-button\", english, labels);\n const scopeDefaults = useComponentDefaults(\"copy-button\", [\"variant\", \"size\"]);\n const variant = variantProp ?? scopeDefaults.variant ?? \"secondary\";\n const size = sizeProp ?? scopeDefaults.size ?? \"sm\";\n\n const [state, setState] = useState<\"idle\" | \"copied\" | \"failed\">(\"idle\");\n const timer = useRef>(undefined);\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n const tokens = useMotionTokens(host);\n const managedReduced = useReducedMotionSafe();\n const reduced = tokens.reduced || managedReduced;\n useEffect(() => () => clearTimeout(timer.current), []);\n const run = async () => {\n const ok = await copyText(value);\n setState(ok ? \"copied\" : \"failed\");\n if (ok) onCopied?.();\n clearTimeout(timer.current);\n timer.current = setTimeout(() => setState(\"idle\"), ok ? timeout : timeout + 1200);\n };\n const Icon = ICONS[state];\n const text =\n state === \"copied\" ? (copiedLabel ?? t(\"copied\")) : state === \"failed\" ? t(\"error\") : (label ?? t(\"label\"));\n return (\n