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

{navigation !== "none" && (

{heading != null && (

{heading}

{headingAside}

)} {hasWorkspace && ( // whose settings these are: the workspace, its plan and its people, above the list

{saved.workspace} {[ plans?.length ? planName(plan) : null, hasMembers ? i18n("identityMembers", { count: active }) : null, ] .filter(Boolean) .join(" · ") || domain}

)}

{plate && ( )} {sections.map((s) => [ // in the rail the list falls into the person's own sections and the workspace's hasWorkspace && (s === "profile" || s === "workspace") && ( ), {sectionLabels[s]} {changed.some((key) => fieldSection(key) === s) && ( {" "} {i18n("unsaved")} )} } meta={ saveError?.field && fieldSection(saveError.field) === s ? ( ▲ ) : changed.some((key) => fieldSection(key) === s) ? ( ) : undefined } selected={section === s} onSelect={() => setSection(s)} className={cn("shrink-0", styles.item, classNames?.item)} />, ])}

)}

{i18n("savedAt", { value: i18n.date(savedAt, { hour: "2-digit", minute: "2-digit" }) })}

) } >

{section === "profile" && (

{ e.preventDefault(); setDropping(true); } : undefined } onDragLeave={hasAvatar ? () => setDropping(false) : undefined} onDrop={ hasAvatar ? (e) => { e.preventDefault(); setDropping(false); void pickPhoto(e.dataTransfer.files[0]); } : undefined } > {hasAvatar ? (

{ void pickPhoto(e.target.files?.[0]); e.target.value = ""; }} /> {draft.avatar && ( )}

) : ( onPhotoChange && ( ) )} {hasAvatar && (photoError || errors.avatar ? (

{photoError ?? errors.avatar}

) : (

{i18n("photoHint")}

))}

set("name", e.target.value)} error={errors.name} /> set("email", e.target.value)} error={errors.email} description={i18n("emailDescription")} /> {profileFields.map((field) => ( {field.label} {field.optional && ( {" "} {i18n("optional")} )} } data-settings-field={`profile.${field.id}`} name={field.id} required={!field.optional} autoComplete={field.autoComplete} maxLength={field.maxLength} description={field.description} value={draft.profile?.[field.id] ?? ""} onChange={(event) => setProfile(field.id, event.target.value)} error={errors[`profile.${field.id}`]} /> ))} {timeZones.length > 0 && ( { const there = zoneNow(z, now, i18n.locale); return { value: z, label: z.replace(/_/g, " "), description: there ? `${there.time} · ${there.offset}` : undefined, keywords: there ? [there.offset] : undefined, }; })} value={draft.timeZone} onValueChange={(v) => v && set("timeZone", v)} description={ zone ? ( ) : ( i18n("timeZoneDescription") ) } /> )} {(draft.locale !== undefined || localeOptionsProp !== undefined) && ( set("workspace", e.target.value)} error={errors.workspace} /> set("slug", e.target.value.toLowerCase())} leading={ {domain}/ } error={errors.slug} description={i18n("workspaceUrlDescription")} />

{hasSecurity && ( {saved.requireTwoFactor !== undefined && ( set("requireTwoFactor", v)} /> )} {saved.allowedDomains !== undefined && ( set("allowedDomains", v)} placeholder={i18n("signInDomainsPlaceholder")} validate={(v) => /^([a-z0-9-]+\.)+[a-z]{2,}$/i.test(v.trim()) ? undefined : i18n("domainInvalid") } error={errors.allowedDomains} /> )} )}

)} {section === "members" && (

{ setInviteOpen(o); if (!o) setInviteError(null); }} > } >

isEmail(v) ? members.some((m) => m.email === v.trim()) ? i18n("alreadyMember") : undefined : i18n("emailRequired") } /> r.value !== "owner")} value={m.role} onValueChange={(role) => changeRole(m, role)} /> )} {/* a row's actions wait for attention (hover, focus, an open menu; always on touch) */} {m.role !== "owner" && onRemoveMember && ( } items={[ { label: m.pending ? i18n("withdrawInvitation") : i18n("removeFromWorkspace"), tone: "danger", onSelect: () => setRemoving(m), }, ]} /> )} ))} { if (!o && !busyRemove) setRemoving(null); }} > {removing && ( {i18n("cancel")} { e.preventDefault(); removeMember(); }} > {removing.pending ? i18n("withdraw") : i18n("remove")} )}

)} {section === "billing" && plans && (

setChoice({ plan: wanted.plan, period: p as BillingPeriod })} options={[ { value: "monthly", label: i18n("monthly") }, { value: "yearly", label: i18n("yearly"), note: yearlySaving ? i18n.number(-yearlySaving / 100, { style: "percent" }) : undefined, activeNote: yearlySaving ? i18n("savingDiscount", { percent: i18n.number(yearlySaving / 100, { style: "percent" }), }) : undefined, }, ]} /> } > setChoice({ plan: p, period: wanted.period })} cards={plans.map((p) => ({ value: p.id, detail: p.detail, label: ( {p.name} {p.id === plan && ( {i18n("current")} )} ), // the price rolls when the period changes, as it does on the plan comparison figure: p.price ? ( <> i18n.number(v, { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 2, }) } /> {" "} {i18n("priceUnit")} ) : ( i18n("contactSales") ), }))} /> {/* the pending switch grows in under the plans, so the meters below glide down */} {pending && (

{i18n("planChangeDescription", { plan: planName(wanted.plan), period: i18n(wanted.period === "monthly" ? "monthlyPeriod" : "yearlyPeriod"), })}

)} {(seats != null || usage.length > 0) && (

{seats != null && ( )} {usage.map((u) => ( ))}

)}

)} {section === "notifications" && (

{notificationChannels?.length ? ( // one switch per event and channel: rows are what happened, columns are where it reaches you {notificationChannels.map((c) => ( ))} {notificationOptions.map((n) => ( {notificationChannels.map((c) => { const key = `${n.id}.${c.id}`; return ( ); })} ))}

{i18n("event")}	{c.icon ?? SETTINGS_CHANNEL_ICONS[c.id]} {c.label}
{n.label} {n.description}	set("notifications", { ...edits.notifications, [key]: v }) } />

) : ( {notificationOptions.map((n) => (

{n.label}

{n.description}

set("notifications", { ...edits.notifications, [n.id]: v })} />

))} )}

)} {section === "api" && (

changeKeyOpen(false)}> {i18n("done")} ) : ( <> ) } > {secret ? (


                                      {secret.value}

}> {i18n("keySecretWarning")}

) : ( )} ) } > {keys.length === 0 && (

{i18n("keysEmpty")}

)} {keys.map((k) => (

{k.name}

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

{onRevokeKey && ( )}

))} { if (!o && !busyRevoke) setRevoking(null); }} > {revoking && ( {i18n("cancel")} { e.preventDefault(); revokeKey(); }} > {i18n("revokeKey")} )}

)} {section === "danger" && (

{deletion === "scheduled" ? ( {i18n("deletionScheduledDescription", { workspace: saved.workspace ?? "" })} ) : (

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

{i18n("deleteWorkspaceDescription")}

{deleteError && (

{deleteError}

)}

{announcement} {(changed.length > 0 || showSaved) && (

{/* one mark that changes with the bar's state: a dot for unsaved work, a ring while saving, a tick, a warning; keyed so each new state arrives instead of switching */}

{saveError ? ( {saveError.field ? i18n("fieldSaveFailed") : saveError.message} ) : saving ? ( {elapsed > 2 ? i18n("savingElapsed", { elapsed }) : i18n("saving")} ) : showSaved && !changed.length ? ( {i18n("saved")} ) : ( <> {i18n("unsavedCount", { count: changed.length })} {invalid && ( {" "} {i18n("fixInvalidField")} )} )}

{saveError?.field && fieldSection(saveError.field) !== section && ( )} {changed.length > 0 && ( <> )}

)}

); } /** "Saved 20:41" after a save this session, shown in the current section's header (O4 §3.2). */ const SavedCaption = createContext(null); function Section({ classNames, title, description, action, children, }: { title: string; classNames?: SettingsClassNames; description: string; action?: ReactNode; children: ReactNode; }) { const id = useId(); const caption = useContext(SavedCaption); return (

{title}

{description}

{/* the last save's time sits in the header it belongs to, so it never pushes the form down */} {caption} {action}

{children}

); } /** Inside your own page (navigation none) a group has no surface of its own: the form sits flush on your page. */ const FlatPanels = createContext(false); /** One group of a section on its own surface: an optional title row, then its fields or rows. */ function Panel({ classNames, title, description, flush, tone, className, children, }: { classNames?: SettingsClassNames; title?: string; description?: string; /** Rows and tables run to the panel's edges. */ flush?: boolean; tone?: "danger"; className?: string; children: ReactNode; }) { const flat = useContext(FlatPanels); const id = useId(); return (

{title && (

{title}

{description && (

{description}

)}

)} {children}

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

{aside != null ? (

{labelNode} {aside}

) : ( labelNode )} {children}

); } type Tone = "error" | "success" | "description"; interface Line { key: string; tone: Tone; content: ReactNode; } const ICON = { error: AlertCircle, success: CircleCheck } as const; /** * The line under a field: its problem when there is one, else its confirmation, else its help. Shared by every field * and choice group. A change of line keeps its path: the new line grows in under the control while the old one folds * away above it, so what sits below glides instead of jumping, and a quick reversal turns around from where it is. * The leaving line is a still copy, hidden from assistive tech and inert; ids and aria point only at the line that is * 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 * fold to run, so no end is reported. */ export function FieldMessage({ error, success, description, errorId, descriptionId, slot = "field", classNames, }: Pick & { errorId?: string; descriptionId?: string; /** The slot names' prefix: "checkbox" names the lines checkbox-error, checkbox-description. */ slot?: string; classNames?: Pick; }) { const tone: Tone | null = error ? "error" : success ? "success" : description ? "description" : null; const content = error || success || description; // a new text is a new line (one problem replacing another also folds and grows); rich content changes in place const text = typeof content === "string" || typeof content === "number" ? String(content) : ""; const current: Line | null = tone ? { key: `${tone}\u0000${text}`, tone, content } : null; const [last, setLast] = useState(current); const [leaving, setLeaving] = useState(null); // the line a field is drawn with is simply there; only a change of line moves const [changed, setChanged] = useState(false); if ((last?.key ?? null) !== (current?.key ?? null)) { // the line that was there leaves (one at a time: a line already leaving is gone at once) setLeaving(last && last.key !== current?.key ? last : null); setLast(current); setChanged(true); } const box = useRef(null); useEffect(() => { if (!leaving) return; // the clock is the leaving line's own longest transition, read once as it starts to leave (the fold's end event // usually comes first), so a field resolves no motion tokens of its own const el = box.current?.querySelector("[data-leaving]"); const longest = el ? Math.max( 0, ...getComputedStyle(el) .transitionDuration.split(",") .map((t) => parseFloat(t) * (t.trim().endsWith("ms") ? 1 : 1000) || 0), ) : 0; const id = window.setTimeout(() => setLeaving((l) => (l === leaving ? null : l)), longest + 250); return () => window.clearTimeout(id); }, [leaving]); if (!current && !leaving) return null; const shown = leaving && leaving.key === current?.key ? null : leaving; const ids = { error: errorId, success: descriptionId, description: descriptionId }; const line = (l: Line, gone: boolean) => { const Icon = l.tone === "description" ? null : ICON[l.tone]; return (

) => { if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") setLeaving(null); } : undefined } >

{Icon && } {l.content}

); }; return (

{shown && line(shown, true)} {current && line(current, false)}

); } /** What the end of a text field says about its work: a spinner while a value is checked, a drawn check when it works. */ export type FieldStatus = "busy" | "success"; /** The frame a text-like control sits in; clicking anywhere on it focuses the control. */ export function FieldFrame({ size = "md", invalid, disabled, readOnly, multiline, status, statusLabel: statusLabelProp, leading, trailing, className, classNames, children, onPointerDown, ref, }: { size?: FieldSize; invalid?: boolean; disabled?: boolean; readOnly?: boolean; multiline?: boolean; /** busy: a spinner at the end while the value is checked or saved; success: the ring closes into a check. */ status?: FieldStatus; /** What the spinner says while busy ("Checking", "Saving"). */ statusLabel?: string; leading?: ReactNode; trailing?: ReactNode; className?: string; classNames?: FieldClassNames; children: ReactNode; onPointerDown?: (e: ReactPointerEvent) => void; /** The frame itself, for a control that lays out by the frame's width (useWidthAs). */ ref?: Ref; }) { const i18n = useMessages("_shared", english); const statusLabel = statusLabelProp === undefined ? i18n("statusLabel") : statusLabelProp; return (

{ onPointerDown?.(e); // a click on the frame's padding or an adornment that is not itself interactive focuses the control const t = e.target as HTMLElement; if (t === e.currentTarget || (t.closest("[data-adornment]") && !t.closest("button, a, input, [role=button]"))) { e.preventDefault(); e.currentTarget.querySelector("input, textarea")?.focus(); } }} > {leading && ( {leading} )} {children} {status && ( // one ring for both: it spins while the value is checked and closes into the check when it works )} {trailing && ( {trailing} )}

); } /** * A character count for the label's row (Field `aside`): quiet ("58/140") and shown while the field has attention, * then always shown and in words as the limit nears ("12 left", "Limit reached", "3 over"), so it never competes with * the label at rest. Assistive tech hears it only when it crosses into those words, not at every key. */ export function FieldCount({ length, max, near: nearAt, slot = "field-count", className, }: { length: number; max: number; /** How many left turns it into words: by default 10 % of the limit, at least 5 (characters); 1 suits a few tags. */ near?: number; slot?: string; className?: string; }) { const i18n = useMessages("_shared", english); const left = max - length; const near = left <= (nearAt ?? Math.max(5, Math.ceil(max * 0.1))); const state = left < 0 ? "over" : left === 0 ? "full" : near ? "near" : "room"; const words = state === "over" ? i18n("fieldOver", { count: -left }) : state === "full" ? i18n("fieldFull") : i18n("fieldLeft", { count: left }); return ( {state === "room" ? `${i18n.number(length)}/${i18n.number(max)}` : words} {state === "room" ? "" : words} ); } /** The class a native input or textarea needs inside a FieldFrame. */ export const fieldControlClass = styles.control; /** What a choice group (segmented control, radio cards) spreads onto its own root when it is a form field. */ export interface ChoiceFieldAria { "aria-labelledby": string; "aria-describedby"?: string; "aria-invalid"?: true; } /** * Whether a choice control (segmented control, radio cards, chip group) is laid out as a form field, its label shown * above like every field's: when asked (`field`), when it has a description, error or required mark, and whenever its * label is not hidden. A view switch or a quick filter passes `hideLabel`: its label stays for assistive tech only. * (Trials t16 and t19: agents wrote and the question never showed.) */ export function choiceIsField( field: boolean | undefined, label: ReactNode, hideLabel: boolean | undefined, marked: boolean, ) { return field ?? (marked || (label != null && label !== "" && !hideLabel)); } /** * A choice group as a form field: the visible label above (with the required marker), the group, then its help or its * problem — the same frame and message every text field has. Groups that name themselves only for assistive tech * (a view switch in a toolbar) do not use it. */ export function ChoiceField({ slot, label, hideLabel, required, description, error, className, style, classNames, requiredOnControl, children, }: Omit & { slot: string; /** The group carries `aria-required` itself (a radiogroup), so the label does not repeat it in the group's name. */ requiredOnControl?: boolean; className?: string; style?: CSSProperties; classNames?: Pick; children: (aria: ChoiceFieldAria) => ReactNode; }) { const auto = useId(); const labelId = `choice-${auto}-label`; const messageId = error || description ? `choice-${auto}-message` : undefined; return (

{label} {children({ "aria-labelledby": labelId, ...(messageId ? { "aria-describedby": messageId } : {}), ...(error ? { "aria-invalid": true as const } : {}), })}

); } 79:T1275,"use client"; // organism-allow-file: raw-control -- the shared +N part itself, painted by its owner's look import { useMessages } from "../../runtime/localization"; import { english } from "./messages"; import { useLayoutEffect, useRef, type PointerEventHandler } from "react"; import { Tooltip } from "../tooltip/tooltip"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { rollText } from "./roll"; import { resolveCssEasing } from "../../lib/css-values"; import { cn } from "../../lib/utils"; /** The most names the tooltip lists before it counts the rest. */ const NAMED = 8; /** A fold that has just appeared settles its count without a roll: the row measures the "+N" once it is on screen and * may correct the count right after (the room did not change, so nothing should travel). */ const SETTLING_MS = 400; /** * The "+N" a folded row ends in (hooks/use-fit.ts): one part for every row of chips, tags, filters or sources, so a * fold reads and behaves the same in each. It counts what did not fit and names those items in the system tooltip on * hover or focus; with `onExpand` it is a button that shows them all ("Show 3 more filters: …" to a screen reader), * without it a quiet mark for a field that brings its items back on its own (a tag field on focus). When the room * changes, the count rolls to its new value: up as more fold, down as they come back (a fold that has just appeared * settles its first count in place). The row gives it its geometry through `className` (height, radius, padding), so * it stands like its neighbours; the look and the behaviour are the part's. */ export function FoldMore({ names, noun, onExpand, onPointerDown, marks = true, hidden, slot, className, }: { /** The folded items, in order: their count is shown; their names are the tooltip and the spoken label. */ names: string[]; /** What the items are, for the spoken label ("sources", "filters"). */ noun?: string; /** Show every folded item (the row expands, a menu opens). Without it the mark is not a control. */ onExpand?: () => void; onPointerDown?: PointerEventHandler; /** Mark it as the row's overflow control for useFit and useFlip (`data-fit-more`, `data-flip="more"`). Off when a * wrapper of the caller's is the row's child and carries the marks (a list item). Default true. */ marks?: boolean; /** Hidden from assistive tech: the control it sits in already names every item (a multi-select trigger). */ hidden?: boolean; /** The owner's part name (data-slot). */ slot?: string; className?: string; }) { const i18n = useMessages("_shared", english); const count = useRef(null); const motion = useMotionTokens(count); const last = useRef(names.length); const born = useRef(null); useLayoutEffect(() => { born.current ??= performance.now(); const was = last.current; last.current = names.length; const el = count.current; if (!el || was === names.length || motion.reduced || performance.now() - born.current < SETTLING_MS) return; rollText(el, `+${i18n.number(was)}`, `+${i18n.number(names.length)}`, names.length > was ? 1 : -1, { duration: motion.duration.standard * 1000, easing: resolveCssEasing(el, "--pui-ease-default"), }); }, [names.length, i18n]); // eslint-disable-line react-hooks/exhaustive-deps -- rolls on a change of the count only const listed = names.length > NAMED ? i18n("foldMore", { list: i18n.list(names.slice(0, NAMED)), count: names.length - NAMED }) : i18n.list(names); const marked = marks ? { "data-fit-more": "", "data-flip": "more" } : {}; const look = cn( "relative inline-flex h-6 shrink-0 items-center rounded-chip px-2 text-xs text-ink-2 tabular-nums", "shadow-[inset_0_0_0_1px_var(--pui-line)]", ); const body = ( +{i18n.number(names.length)} ); return ( {onExpand ? ( ) : ( {body} )} ); } 7a:T1231,"use client"; import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react"; import { cn } from "../../lib/utils"; import overlay from "./overlay.module.css"; /** * The gliding highlight for a list whose active row is tracked in state (command menu, listbox): one plate travels to * the active row for the arrow keys and the pointer alike, over --pui-duration-fast. It appears in place (no travel) * the first time and whenever `reset` changes (a new page or a new query), so typing never sends it flying. * The list must be the plate's offset parent (position: relative); rows stay above it (overlay.item is z-index 1). */ export function GlidePlate({ list, selector, reset, axis = "y", className, }: { list: RefObject; /** Finds the active row inside `list`; null when nothing is active. */ selector: string | null; reset?: unknown; /** "y" for a list (the plate spans the width); "xy" for a row or grid of cells (it takes each cell's size). */ axis?: "y" | "xy"; className?: string; }) { const [plate, setPlate] = useState<{ x: number; y: number; w: number; h: number; jump: boolean } | null>(null); const lastReset = useRef(reset); const self = useRef(null); // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose; setPlate bails out when unchanged useLayoutEffect(() => { // the list holds the plate, and React attaches a parent's ref only after its children's layout effects: on the // first commit the list is the plate's own parent (it placed itself only when something rendered again later) const host = list.current ?? self.current?.parentElement; const row = selector ? host?.querySelector(selector) : null; const fresh = lastReset.current !== reset; lastReset.current = reset; if (!row) { setPlate((p) => (p && p.h ? { ...p, h: 0 } : p)); return; } const x = row.offsetLeft, y = row.offsetTop, w = row.offsetWidth, h = row.offsetHeight; setPlate((p) => p && p.x === x && p.y === y && p.w === w && p.h === h && !fresh ? p : { x, y, w, h, jump: fresh || !p?.h }, ); // every render: rows can arrive or change height without the selector changing; an unchanged place keeps the state }); return ( ); } /** * A GlidePlate for lists whose highlight is the pointer or keyboard focus rather than state (time picker, plain option * lists): it follows the row under the pointer or holding focus, and fades when neither is in the list. Rows drop * their own hover and focus tint. */ export function FollowPlate({ list, rows, className, }: { list: RefObject; /** Matches a row inside `list`, e.g. "[role=option]". */ rows: string; className?: string; }) { const [hot, setHot] = useState(null); // after the commit, when the list's ref is attached (a layout effect here ran before it and never listened) useEffect(() => { const el = list.current; if (!el) return; let n = 0; const mark = (target: EventTarget | null) => { const row = (target as HTMLElement | null)?.closest?.(rows); if (!row || !el.contains(row)) return; row.dataset.glideKey ??= String(++n); setHot(row.dataset.glideKey); }; const over = (e: Event) => mark(e.target); const leave = () => { if (!el.contains(document.activeElement)) setHot(null); }; const blur = (e: FocusEvent) => { if (!el.contains(e.relatedTarget as Node)) setHot(null); }; el.addEventListener("pointerover", over); el.addEventListener("focusin", over); el.addEventListener("pointerleave", leave); el.addEventListener("focusout", blur); return () => { el.removeEventListener("pointerover", over); el.removeEventListener("focusin", over); el.removeEventListener("pointerleave", leave); el.removeEventListener("focusout", blur); }; }, [list, rows]); return ; } 7b:T9cc,@layer properties, theme, base, components, utilities; /* The small square action that sits inside another element: a field's clear and open buttons, a chip's remove, a toast's close, a carousel's previous and next. One recipe so every one of them answers alike: quiet ink at rest, the hover plate at once, the press at once, both let go over --pui-motion-out. Its corner is the chip radius: under the nested-corner rule (.nest-corner) a part whose own corner is the chip never changes inside a rounded frame. */ @layer components { .root { position: relative; display: grid; flex-shrink: 0; place-items: center; inline-size: var(--_size); block-size: var(--_size); border-radius: var(--pui-radius-chip); color: var(--pui-ink-3); /* opacity and translate stay in the list so a .reveal action keeps its own arrival whichever rule wins */ transition: background-color var(--pui-motion-out) var(--pui-ease-default), color var(--pui-motion-out) var(--pui-ease-default), transform var(--pui-motion-out) var(--pui-ease-default), opacity var(--pui-motion-out) var(--pui-ease-default), translate var(--pui-motion-out) var(--pui-ease-default); } .root:hover:not(:disabled), .root[data-pressed] { background-color: var(--pui-hover); color: var(--pui-ink); } .root:hover { transition-duration: 0ms; } .root:active:not(:disabled) { transform: scale(var(--pui-press-scale)); transition-duration: 0ms; } .root:disabled { cursor: default; opacity: 0.4; } .root[data-tone="ink-2"] { color: var(--pui-ink-2); } .root[data-tone="inherit"] { color: inherit; } .root[data-tone="inherit"]:hover:not(:disabled) { color: inherit; } /* on an inverted (ink) surface: inverse ink, a faint inverse plate */ .root[data-tone="inverse"] { color: color-mix(in oklab, var(--pui-ink-inverse) 72%, transparent); } .root[data-tone="inverse"]:hover:not(:disabled), .root[data-tone="inverse"][data-pressed] { background-color: color-mix(in oklab, var(--pui-ink-inverse) 12%, transparent); color: var(--pui-ink-inverse); } .xs { --_size: 1.25rem; } /* a 20px action still takes a 24px hit (WCAG 2.5.8): the bleed is outside the drawn square */ .xs::after { position: absolute; inset: calc((var(--pui-hit-min) - 1.25rem) / -2); content: ""; } .sm { --_size: 1.5rem; } .md { --_size: 1.75rem; } .lg { --_size: 2rem; } } 7c:T655,"use client"; // organism-allow-file: raw-control -- the shared part every element draws this control from import type { ButtonHTMLAttributes, Ref } from "react"; import { cn } from "../../lib/utils"; import styles from "./icon-action.module.css"; /** 20 · 24 · 28 · 32 px. A 20px action keeps a 24px hit outside its square. */ export type IconActionSize = "xs" | "sm" | "md" | "lg"; export interface IconActionProps extends ButtonHTMLAttributes { /** The action's name: the button holds only an icon. */ "aria-label": string; size?: IconActionSize; /** Rest ink: ink-3 (the default, an action beside content), ink-2 (an action that is the row's point), inverse (on * an inverted ink surface) or inherit (on a painted surface that brings its own colours). */ tone?: "ink-3" | "ink-2" | "inverse" | "inherit"; /** Holds the hover plate while what it opens is open, or while it is switched on. */ pressed?: boolean; ref?: Ref; } /** * The small square icon action inside another element (clear, remove, dismiss, previous, next, retry). One recipe for * all of them; a full-size action with words is a Button, and Button with iconOnly is the standalone square. */ export function IconAction({ size = "sm", tone = "ink-3", pressed, type = "button", className, ref, ...props }: IconActionProps) { return ( {i18n("pageUnknown", { page })} )} {onPageSizeChange && ( { if (phone) { openSheet(e.target.value); return; } setQuery(e.target.value); setTyping(true); setOpen(true); setCreateError(null); }} onFocus={(e) => { if (!phone) e.currentTarget.select(); }} // a click shows the options (Tab alone does not, so moving through a form stays quiet) onClick={() => { if (phone) openSheet(); else if (!open && !disabled) openList(); }} onBlur={() => { if (!phone) close(); }} onKeyDown={(e) => { if (phone) { // the field opens the sheet; a typed letter starts its search if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) { e.preventDefault(); openSheet(); } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); openSheet(e.key); } return; } if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); if (!open) openList(); else move(e.key === "ArrowDown" ? 1 : -1); } else if (e.key === "Enter" && open) { e.preventDefault(); if (current && !current.disabled) pick(current); } else if (e.key === "Escape" && open) { e.preventDefault(); e.stopPropagation(); close(); } else if (e.key === "Home" && open && !typing) { e.preventDefault(); jump(0); } else if (e.key === "End" && open && !typing) { e.preventDefault(); jump(filtered.length - 1); } else if ((e.key === "PageDown" || e.key === "PageUp") && open) { e.preventDefault(); jump(active + (e.key === "PageDown" ? PAGE : -PAGE)); } }} /> {!phone && container !== null && ( e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onInteractOutside={(e) => { if (e.target instanceof Node && input.current?.closest("[data-slot=field]")?.contains(e.target)) e.preventDefault(); }} className={cn( overlay.surface, "w-[var(--radix-popover-trigger-width)] min-w-[220px]", classNames?.content, )} > v === value} onPick={pick} emptyText={emptyMessage} /> )} {phone && ( { if (!o) close(); setSheet(o); }} title={sheetTitle ?? (typeof label === "string" ? label : placeholder)} detents={[0.92]} classNames={{ body: "flex flex-col" }} > { setQuery(q); setTyping(true); setCreateError(null); }} filtered={filtered} active={active} setActive={setActive} move={move} jump={jump} viaKeys={viaKeys} current={current} value={value} onPick={pick} emptyText={emptyMessage} className={classNames?.content} /> )} ); } /** The sheet's search field and list: the same listbox, keys and ranking as the popover, with the field inside. */ function SheetList({ listId, label, placeholder, query, onQuery, filtered, active, setActive, move, jump, viaKeys, current, value, onPick, emptyText, className, }: { listId: string; label: string; placeholder: string; query: string; onQuery: (query: string) => void; filtered: ListOption[]; active: number; setActive: (i: number) => void; move: (delta: number) => void; jump: (to: number) => void; viaKeys: { current: boolean }; current: ListOption | undefined; value: string | null; onPick: (option: ListOption) => void; emptyText?: ReactNode; className?: string; }) { const i18n = useMessages("combobox", englishMessages); const search = useRef(null); // after the sheet's own focus scope settles (it records the field to return to), the search takes focus useEffect(() => { const frame = requestAnimationFrame(() => search.current?.focus({ preventScroll: true })); return () => cancelAnimationFrame(frame); }, []); return (

}> onQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); move(e.key === "ArrowDown" ? 1 : -1); } else if (e.key === "PageDown" || e.key === "PageUp") { e.preventDefault(); jump(active + (e.key === "PageDown" ? PAGE : -PAGE)); } else if (e.key === "Enter") { e.preventDefault(); if (current && !current.disabled) onPick(current); } }} />

v === value} onPick={onPick} emptyText={emptyText} className="max-h-none min-h-0 flex-1 px-[var(--pui-space-2)] pb-[var(--pui-space-4)]" />

); } export default Combobox; 97:T1525,"use client"; import { useComponentDefaults } from "../../runtime/appearance"; import type { CopyButtonDefaults } from "./defaults"; export type { CopyButtonDefaults } from "./defaults"; import { useEffect, useRef, useState, type CSSProperties, type Ref } from "react"; import { Check, Copy, X } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import { Button, type ButtonSize, type ButtonVariant } from "../button/button"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { useReducedMotionSafe } from "../../hooks/use-reduced-motion-safe"; import { copyText } from "../../lib/clipboard"; import { useMessages, type MessageLabels } from "../../runtime/localization"; import { english } from "./messages"; import { cn } from "../../lib/utils"; export interface CopyButtonClassNames { root?: string; label?: string; loader?: string; iconFrame?: string; icon?: string; status?: string; } export interface CopyButtonProps { /** The text that lands on the clipboard. */ value: string; /** What is copied, e.g. "Copy API key"; the accessible name when icon-only. Default "Copy". */ label?: string; /** Per-instance copy; overrides UIRoot messages. */ labels?: MessageLabels; /** The confirmation in your words, shown in place of the label and said to a screen reader: "Link copied". Default * "Copied" (heard as "Copied to clipboard"). */ copiedLabel?: string; iconOnly?: boolean; /** Any Button variant; "plain" is kept as an alias of ghost. Default secondary. */ variant?: ButtonVariant | "plain"; size?: ButtonSize; disabled?: boolean; /** Runs after a successful copy. */ onCopied?: () => void; /** How long "Copied" stays, ms. Default 1600. */ timeout?: number; className?: string; classNames?: CopyButtonClassNames; style?: CSSProperties; ref?: Ref; } const ICONS = { idle: Copy, copied: Check, failed: X } as const; /** * Copies a value and confirms in place: the icon turns into a check and the label into "Copied" for a moment, and a * screen reader hears it. If the browser refuses, it says so instead of pretending. */ export function CopyButton({ value, label, labels, copiedLabel, iconOnly = false, variant: variantProp, size: sizeProp, disabled, onCopied, timeout = 1600, className, classNames, style, ref, }: CopyButtonProps) { const t = useMessages("copy-button", english, labels); const scopeDefaults = useComponentDefaults("copy-button", ["variant", "size"]); const variant = variantProp ?? scopeDefaults.variant ?? "secondary"; const size = sizeProp ?? scopeDefaults.size ?? "sm"; const [state, setState] = useState<"idle" | "copied" | "failed">("idle"); const timer = useRef>(undefined); const host = useRef(null); const attach = useComposedRef(host, ref); const tokens = useMotionTokens(host); const managedReduced = useReducedMotionSafe(); const reduced = tokens.reduced || managedReduced; useEffect(() => () => clearTimeout(timer.current), []); const run = async () => { const ok = await copyText(value); setState(ok ? "copied" : "failed"); if (ok) onCopied?.(); clearTimeout(timer.current); timer.current = setTimeout(() => setState("idle"), ok ? timeout : timeout + 1200); }; const Icon = ICONS[state]; const text = state === "copied" ? (copiedLabel ?? t("copied")) : state === "failed" ? t("error") : (label ?? t("label")); return ( ); } export default CopyButton; 98:T1c6f,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useDeprecatedProp } from "../../hooks/use-deprecated-prop"; import { useRef, type ComponentProps, type CSSProperties, type ReactNode } from "react"; import { X } from "lucide-react"; import { Button } from "../button/button"; import * as RadixDialog from "@radix-ui/react-dialog"; import { useReturnFocus } from "../_shared/use-return-focus"; import { useOpenFrom } from "../_shared/use-open-from"; import { useHeightMorph } from "../../hooks/use-height-morph"; import { usePortalContainer, useComponentDefaults } from "../../runtime/appearance"; import type { DialogDefaults } from "./defaults"; export type { DialogDefaults } from "./defaults"; import { cn } from "../../lib/utils"; import overlay from "../_shared/overlay.module.css"; /** A focused task over the page: create, invite, rename. open / defaultOpen / onOpenChange. */ export const Dialog = RadixDialog.Root; export const DialogTrigger = RadixDialog.Trigger; export const DialogClose = RadixDialog.Close; const WIDTH = { sm: "380px", md: "440px", lg: "560px", xl: "720px" } as const; /** * The dialog's stepped tray: header, body and footer in one column whose height eases to each step's content when * `step` changes (the shared useHeightMorph), so the dialog grows or settles in place, centred, instead of jumping. It * mounts with the open dialog, so it measures the dialog it is in. */ function DialogTray({ step, className, children }: { step: unknown; className?: string; children: ReactNode }) { const tray = useRef(null); useHeightMorph(tray, step); return (

{children}

); } export interface DialogContentProps extends Omit, "title"> { /** The task, as a heading; also the dialog's accessible name. */ title: ReactNode; /** One or two lines under the title. */ description?: ReactNode; /** Width preset: sm 380px, md 440px, lg 560px or xl 720px; defaults to md. */ width?: keyof typeof WIDTH; /** Legacy width preset; omitted by default. @deprecated Use width instead. */ size?: keyof typeof WIDTH; /** The × in the corner. Default true. */ showClose?: boolean; /** Close on Escape and on a click outside. Set false while work is running that must not be abandoned (and hide * the × with showClose={false}); Cancel and Done stay yours to offer. Default true. */ dismissible?: boolean; /** Buttons at the bottom; DialogFooter lays them out the same everywhere. */ footer?: ReactNode; /** The step of a flow the dialog shows (a string or a number). When it changes, the dialog eases to the new step's * height in place instead of jumping (a stepped tray). */ step?: string | number; /** Classes for the named visual parts; no part overrides by default. */ classNames?: Partial< Record<"root" | "scrim" | "tray" | "header" | "title" | "description" | "body" | "footer" | "close", string> >; } /** * The dialog surface: scrim, title, description, body and footer. Focus moves in (to the first field, or an autoFocus * one), is trapped while open and returns to the trigger on close. When its content changes height at once (the next * step), it eases to the new height in place. */ export function DialogContent({ title, description, width, size: sizeProp, showClose = true, dismissible = true, footer, step, className, classNames, children, style, onPointerDownOutside, onEscapeKeyDown, onOpenAutoFocus, onCloseAutoFocus, ref, ...props }: DialogContentProps) { const i18n = useMessages("dialog", englishMessages); const openFrom = useOpenFrom(ref); const defaults = useComponentDefaults("dialog", ["size"]); useDeprecatedProp("DialogContent", "size", "width", sizeProp !== undefined); const size = width ?? sizeProp ?? defaults.size ?? "md"; const container = usePortalContainer(); const focus = useReturnFocus({ onOpenAutoFocus, onCloseAutoFocus }); if (container === null) return null; return ( { if (!dismissible) e.preventDefault(); onPointerDownOutside?.(e); }} onEscapeKeyDown={(e) => { if (!dismissible) e.preventDefault(); onEscapeKeyDown?.(e); }} {...focus} {...props} >

{title} {description ? ( {description} ) : ( {typeof title === "string" ? title : i18n("dialog")} )}

{/* the body scrolls alone so the header and the footer's actions stay on screen; its 4px bleed keeps a field's focus halo from being cut off by the scroll box */}

{children}

{footer && {footer}} {showClose && ( )} ); } /** The action row: secondary actions first, the main action last, aligned to the end. In a narrow dialog (a phone) the * buttons share the row in equal parts, so each is a full-size target. */ export function DialogFooter({ className, ...props }: ComponentProps<"div">) { return (

); } export default Dialog; 99:T123e,"use client"; import { useComponentDefaults } from "../../runtime/appearance"; import type { DropdownMenuDefaults } from "./defaults"; export type { DropdownMenuDefaults } from "./defaults"; import type { CSSProperties, Ref, ReactElement, ReactNode } from "react"; import * as RadixMenu from "@radix-ui/react-dropdown-menu"; import { Button, type ButtonSize, type ButtonVariant } from "../button/button"; import { MenuItems, MenuSurface, useMenuDirection, type MenuItem, type MenuClassNames, } from "../_shared/menu"; import { cn } from "../../lib/utils"; import { usePortalContainer } from "../../runtime/appearance"; export type { MenuItem, MenuClassNames }; export interface DropdownMenuProps { /** The menu's name: the trigger's text, or its accessible name when the trigger is an icon. */ label: string; /** Items rendered in the component. Required. */ items: MenuItem[]; /** An icon for the built-in trigger (MoreHorizontal for row actions); with it the trigger shows only the icon, and * label becomes its accessible name, unless showLabel is set. */ icon?: ReactNode; /** Shows the label beside the icon. Defaults to false. */ showLabel?: boolean; /** Your own trigger (a Button, an avatar); it receives the open state and keyboard handling. */ trigger?: ReactElement; /** Visual weight of the control. Defaults to "ghost". */ variant?: ButtonVariant; /** Control size within the supported size steps. Defaults to "sm". */ size?: ButtonSize; /** Alignment within the available space. Defaults to "end". */ align?: "start" | "center" | "end"; /** Edge from which the panel or anchored content opens. Defaults to "bottom". */ side?: "top" | "right" | "bottom" | "left"; /** Controlled open state; omit to use defaultOpen. */ open?: boolean; /** Initial open state when uncontrolled. Defaults to false. */ defaultOpen?: boolean; /** Reports open state after a change; no callback by default. */ onOpenChange?: (open: boolean) => void; /** Classes on the documented visual root; no override by default. */ className?: string; /** Classes for the named visual parts; no part overrides by default. */ classNames?: MenuClassNames; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Receives the documented root element; no ref by default. */ ref?: Ref; /** Reading direction; inherits the surrounding direction when omitted. Defaults to the surrounding reading direction. */ dir?: "ltr" | "rtl"; } /** * A list of actions behind a trigger: row actions, "More", an account menu. One highlight plate glides between rows * under the pointer and jumps with the keyboard; type to jump to an item; → opens a submenu. */ export function DropdownMenu({ label, items, icon, showLabel = false, trigger, variant: variantProp, size: sizeProp, align: alignProp, side = "bottom", open, defaultOpen, onOpenChange, className, classNames, style, ref, dir: direction, }: DropdownMenuProps) { const scopeDefaults = useComponentDefaults("dropdown-menu", ["variant", "size", "align"]); const variant = variantProp ?? scopeDefaults.variant ?? "ghost"; const size = sizeProp ?? scopeDefaults.size ?? "sm"; const align = alignProp ?? scopeDefaults.align ?? "end"; const container = usePortalContainer(); const iconOnly = !!icon && !showLabel; const { dir, triggerProps } = useMenuDirection(direction); return ( {trigger ?? ( )} {container !== null && ( )} ); } export default DropdownMenu; 9a:Te39,@layer properties, theme, base, components, utilities; @layer components { /* Light that says "working". Aurora: colour pools under and behind the element and drifts. Ring: a band of colour travels around the edge. Both are blurred layers that only translate or rotate (compositor work), fade in and out with `active`, stop entirely when inactive, and hold still off screen. Colours come from --pui-glow-1/2/3; every period is a multiple of --pui-duration-considered, so the scope's animation speed reaches the light too. */ .root { --pui-r: var(--pui-radius-card); --pui-i: 1; position: relative; isolation: isolate; border-radius: var(--pui-r); } .root > .field { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity calc(var(--pui-duration-considered) * 2) var(--pui-ease-standard); } .root[data-active] > .field { opacity: calc(0.9 * var(--pui-i)); } /* aurora: three soft blobs along the lower edge, each drifting on its own period */ .aurora { inset: 30% -6% -34%; filter: blur(22px); } .blob { position: absolute; bottom: 0; width: 46%; height: 70%; border-radius: 50%; will-change: transform; } .blob:nth-child(1) { left: 2%; background: var(--pui-glow-1); animation: glow-drift-a calc(var(--pui-duration-considered) * 19.5) var(--pui-ease-in-out) infinite alternate; } .blob:nth-child(2) { left: 30%; background: var(--pui-glow-2); animation: glow-drift-b calc(var(--pui-duration-considered) * 25) var(--pui-ease-in-out) infinite alternate; } .blob:nth-child(3) { right: 2%; background: var(--pui-glow-3); animation: glow-drift-c calc(var(--pui-duration-considered) * 22) var(--pui-ease-in-out) infinite alternate; } /* ring: a conic band (a square as wide as the element's diagonal, set from its size) rotating inside a mask that leaves only a thin frame plus its soft bloom */ .ring { inset: -1px; border-radius: calc(var(--pui-r) + 1px); padding: 1.5px; overflow: hidden; -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .bloom { inset: -10px; border-radius: calc(var(--pui-r) + 10px); overflow: hidden; filter: blur(12px); } .band { position: absolute; left: 50%; top: 50%; width: var(--pui-d, 150%); aspect-ratio: 1; translate: -50% -50%; will-change: transform; background: conic-gradient( from 0deg, transparent 0 58%, var(--pui-glow-1) 70%, var(--pui-glow-2) 80%, var(--pui-glow-3) 88%, transparent 96% ); animation: glow-turn calc(var(--pui-duration-considered) * 10) linear infinite; } .bloom .band { opacity: 0.55; } .root:not([data-active]) .blob, .root:not([data-active]) .band { animation-play-state: paused; } .root[data-paused] .blob, .root[data-paused] .band { animation-play-state: paused; } .root[data-reduced] .blob, .root[data-reduced] .band { animation: none; } @media (prefers-reduced-motion: reduce) { .blob, .band { animation: none !important; } } } @keyframes glow-drift-a { to { transform: translate(18%, -12%) scale(1.15); } } @keyframes glow-drift-b { to { transform: translate(-14%, 8%) scale(0.9); } } @keyframes glow-drift-c { to { transform: translate(-20%, -10%) scale(1.1); } } @keyframes glow-turn { to { transform: rotate(1turn); } } 9b:T14a9,"use client"; import { useDeprecatedProp } from "../../hooks/use-deprecated-prop"; import { useComponentDefaults } from "../../runtime/appearance"; import type { GlowDefaults } from "./defaults"; export type { GlowDefaults } from "./defaults"; import { useEffect, useRef, type CSSProperties, type ReactNode, type Ref } from "react"; import { useActive } from "../../hooks/use-active"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { useReducedMotionSafe } from "../../hooks/use-reduced-motion-safe"; import { cn } from "../../lib/utils"; import styles from "./glow.module.css"; export interface GlowClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the field part; no override by default. */ field?: string; /** Classes for the blob part; no override by default. */ blob?: string; /** Classes for the bloom part; no override by default. */ bloom?: string; /** Classes for the ring part; no override by default. */ ring?: string; /** Classes for the band part; no override by default. */ band?: string; } export interface GlowProps { /** Content rendered inside the component. Defaults to no children. */ children?: ReactNode; /** While true the glow fades in and moves; false fades it out and stops all motion. */ active?: boolean; /** Aurora light behind the content or a ring around it; defaults to aurora. */ effect?: "aurora" | "ring"; /** Legacy effect setting; omitted by default. @deprecated Use effect instead. */ variant?: "aurora" | "ring"; /** 0–1, how strong the light is. */ intensity?: number; /** Corner radius of the wrapped element, so the ring follows it. Defaults to the card radius. */ radius?: string; /** Classes on the documented visual root; no override by default. */ className?: string; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Receives the documented root element; no ref by default. */ ref?: Ref; /** Classes for the named visual parts; no part overrides by default. */ classNames?: GlowClassNames; } /** * Ambient light around one element that says "something is happening here": the composer while an agent works, the * live card, the call in progress. One running per screen (bind `active` to a state that ends). Compositor-only motion; nothing runs while inactive or off screen. */ export function Glow({ children, active = true, effect: effectProp, variant: variantProp, intensity = 1, radius, className, classNames, style, ref, }: GlowProps) { const scopeDefaults = useComponentDefaults("glow", ["variant"]); useDeprecatedProp( "glow", "variant", "effect", variantProp !== undefined || (effectProp === undefined && scopeDefaults.variant !== undefined), ); const variant = effectProp ?? variantProp ?? scopeDefaults.variant ?? "aurora"; const own = useRef(null); const attach = useComposedRef(own, ref); const tokens = useMotionTokens(own); const managedReduced = useReducedMotionSafe(); const onScreen = useActive(own); // The ring's rotating band must cover the element's diagonal and no more (a larger layer only costs GPU memory). useEffect(() => { const el = own.current; if (!el || variant !== "ring" || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => { const { width, height } = e.contentRect; el.style.setProperty("--pui-d", `${Math.ceil(Math.hypot(width, height) + 24)}px`); }); ro.observe(el); return () => ro.disconnect(); }, [variant]); return (

{variant === "aurora" ? (

); } export default Glow; 9c:T9dc,@layer properties, theme, base, components, utilities; @layer components { /* Held, the control sinks a little at once (a wide control presses shallower than a small one), so the hold is acknowledged before the fill has visibly moved; reduced motion keeps only the fill. */ [data-slot="hold-to-confirm"].root { transition: var(--m-transition), background-color var(--pui-motion-out) var(--pui-ease-default), color var(--pui-motion-out) var(--pui-ease-default), scale var(--pui-motion-out) var(--pui-ease-default); } .root[data-state="holding"] { scale: calc(1 - (1 - var(--pui-press-scale, 0.955)) / 3); transition-duration: 0ms; } :global(.pui[data-motion="reduced"]) .root[data-state="holding"], :global(.pui[data-motion="none"]) .root[data-state="holding"] { scale: none; } @media (prefers-reduced-motion: reduce) { .root[data-state="holding"] { scale: none; } } /* the words keep their path when the hold lands: the width eases from the old to the new */ .words { display: inline-flex; overflow: clip; white-space: nowrap; } /* a press let go too soon: the fill runs a little way and drains, showing what holding does */ .root[data-hint] > .fill { animation: hint calc(var(--_hold) * 0.6) var(--pui-ease-default); } @keyframes hint { 40% { transform: scaleX(0.22); } } /* The hold fill: the control's own text colour at a quarter strength (red for danger, ink for neutral), sweeping from the inline start for exactly the hold time, linearly, so its edge is a true progress mark. It sits over the hover tint, so held and not-yet-held parts stay distinct. Let go early and it drains back on the standard ease; once confirmed it stays full. The sweep is information, so reduced motion keeps it; only the drain becomes instant. */ .fill { position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, currentColor 24%, transparent); transform: scaleX(0); transform-origin: left; transition: transform var(--pui-duration-standard) var(--pui-ease-standard); pointer-events: none; } .fill:dir(rtl) { transform-origin: right; } :where([data-state="holding"]) > .fill { transform: none; transition: transform var(--_hold) linear; } :where([data-state="confirmed"]) > .fill { transform: none; } :where([data-tone="neutral"]) > .fill { background: color-mix(in oklab, currentColor 14%, transparent); } } 9d:T1c09,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { type Ref } from "react"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { useReducedMotionSafe } from "../../hooks/use-reduced-motion-safe"; import { useComponentDefaults } from "../../runtime/appearance"; import type { HoldToConfirmDefaults } from "./defaults"; export type { HoldToConfirmDefaults } from "./defaults"; import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react"; import { Check } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import { buttonClassName, type ButtonSize } from "../button/button"; import { useWidthMorph } from "../../hooks/use-width-morph"; import { cn } from "../../lib/utils"; import { usePressHold } from "../../hooks/use-press-hold"; import { useExpiring } from "../../hooks/use-expiring"; import styles from "./hold-to-confirm.module.css"; export interface HoldToConfirmClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the fill part; no override by default. */ fill?: string; /** Classes for the content part; no override by default. */ content?: string; /** Classes for the hint part; no override by default. */ hint?: string; } export interface HoldToConfirmProps { /** Say the hold: "Hold to delete workspace". */ label: string; /** Shown once confirmed. Default "Done". */ confirmedLabel?: string; /** Runs the confirmation action; required handler. */ onConfirm: () => void; /** How long to hold, ms. Default 1200. */ duration?: number; /** Icon element shown beside the label. Defaults to no leading icon. */ icon?: ReactNode; /** Semantic colour of the displayed content. Defaults to "danger". */ tone?: "danger" | "neutral"; /** Confirmed state, controlled; uncontrolled it stays confirmed after the hold. */ confirmed?: boolean; /** Reports hold state after a change; no callback by default. */ onHoldChange?: (holding: boolean) => void; /** Control size within the supported size steps. Defaults to "md". */ size?: ButtonSize; /** Prevents interaction with the control. Defaults to false. */ disabled?: boolean; /** Classes on the documented visual root; no override by default. */ className?: string; /** Classes for the named visual parts; no part overrides by default. */ classNames?: HoldToConfirmClassNames; /** Receives the button or trigger; no ref by default. */ ref?: Ref; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; } /** * Confirms a costly action by holding instead of clicking: a fill sweeps across while held and drains if let go * early. Pointer, touch, Space and Enter all hold. Use it where a dialog would interrupt but a click is too cheap. */ export function HoldToConfirm({ label, confirmedLabel: confirmedLabelProp, onConfirm, duration = 1200, icon, tone: toneProp, confirmed: confirmedProp, onHoldChange, size: sizeProp, disabled, className, classNames, ref, style, }: HoldToConfirmProps) { const i18n = useMessages("hold-to-confirm", englishMessages); const confirmedLabel = confirmedLabelProp === undefined ? i18n("done") : confirmedLabelProp; const scopeDefaults = useComponentDefaults("hold-to-confirm", ["tone", "size"]); const tone = toneProp ?? scopeDefaults.tone ?? "danger"; const size = sizeProp ?? scopeDefaults.size ?? "md"; const [inner, setInner] = useState(false); const confirmed = confirmedProp ?? inner; // a press let go too soon to mean anything shows once what holding would do (the fill runs a little way and back) const [hint, setHint] = useExpiring(1000); const startedAt = useRef(0); const timer = useRef>(undefined); // the words change size in place when the hold lands ("Hold to delete workspace" → "Deletion scheduled") const words = useRef(null); useWidthMorph(words, confirmed); const hintId = useId(); const host = useRef(null); const attach = useComposedRef(host, ref); const tokens = useMotionTokens(host); const managedReduced = useReducedMotionSafe(); const reduced = tokens.reduced || managedReduced; useEffect(() => () => clearTimeout(timer.current), []); useEffect(() => { if (confirmedProp === false) setInner(false); }, [confirmedProp]); // the shared press and hold: pointer, finger, Space and Enter hold; Escape, a lost pointer or focus let go before it // commits const hold = usePressHold({ disabled: disabled || confirmed, onStart: () => { setHint(null); startedAt.current = performance.now(); onHoldChange?.(true); timer.current = setTimeout(() => { hold.end("release"); setInner(true); navigator.vibrate?.(12); onConfirm(); }, duration); }, onEnd: (how) => { clearTimeout(timer.current); onHoldChange?.(false); if (how === "release" && performance.now() - startedAt.current < duration * 0.25) setHint(true, duration * 0.6); }, }); const pressed = hold.pressing; return ( ); } export default HoldToConfirm; 9e:T29bd,"use client"; import { useDeprecatedProp } from "../../hooks/use-deprecated-prop"; import { useId, useMemo, useRef, useState, type InputHTMLAttributes, type ReactNode, type Ref } from "react"; import * as RadixPopover from "@radix-ui/react-popover"; import { Listbox } from "../_shared/listbox"; import overlay from "../_shared/overlay.module.css"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { usePortalContainer } from "../../runtime/appearance"; import { Field, FieldCount, FieldFrame, fieldControlClass, useFieldIds, type FieldSize, type FieldClassNames, } from "../_shared/field"; import { cn } from "../../lib/utils"; import { useComponentDefaults } from "../../runtime/appearance"; import type { InputDefaults } from "./defaults"; export type { InputDefaults } from "./defaults"; export interface InputProps extends Omit, "size"> { /** Visible label and accessible name. */ label: ReactNode; /** Reports the text after an edit; no callback by default, and native onChange still receives its event. */ onValueChange?: (value: string) => void; /** Shows the label visually while keeping its accessible name; defaults to true. Takes precedence over hideLabel. */ showLabel?: boolean; /** Hides the label; defaults to false. @deprecated Use showLabel={false} instead. */ hideLabel?: boolean; /** One line of help under the field. */ description?: ReactNode; /** The problem and its fix; marks the field invalid. */ error?: ReactNode; /** The confirmation that the value works ("@mira is available"): replaces the description, and the ring at the end * closes into a check. */ success?: ReactNode; /** A check or save of the value is running: a spinner at the end, the field stays editable (aria-busy). */ loading?: boolean; /** With `maxLength`: the count in the label's row, quiet until the field has attention, in words near the limit. */ showCount?: boolean; /** Height 32 / 36 / 40 px. */ size?: FieldSize; /** Content before the text: an icon, a unit, a prefix like "https://". */ leading?: ReactNode; /** Content after the text: a unit, a status, an icon button. */ trailing?: ReactNode; /** Whole values to offer for what is typed, shown under the field: ↑ ↓ move, Enter (or Tab after moving) takes one, * Escape keeps what was typed. What the person typed is never replaced unless they take a suggestion. */ complete?: (text: string) => string[]; /** Email entry: offers the typed name with each of these domains ("mira@" → mira@gmail.com …), narrowed by what is * typed after the @. A shorthand for `complete`. */ emailDomains?: string[]; /** Lands on the outer field (label, frame, message). */ className?: string; /** Classes for the named visual parts; no part overrides by default. */ classNames?: FieldClassNames & { input?: string }; /** Receives the native input; no ref by default. */ ref?: Ref; } /** A single-line text field with its label, help and error wired for assistive tech. */ export function Input({ label, hideLabel: hideLabelProp, showLabel, description, error, success, loading, showCount, size: sizeProp, leading, trailing, id, className, classNames, style, required, disabled, readOnly, maxLength, value, defaultValue, onChange, onValueChange, complete, emailDomains, ref, ...props }: InputProps) { useDeprecatedProp("Input", "hideLabel", "showLabel={false}", hideLabelProp !== undefined); const hideLabel = showLabel === undefined ? hideLabelProp : !showLabel; const defaults = useComponentDefaults("input", ["size"]); const size = sizeProp ?? defaults.size ?? "md"; const { controlId, descriptionId, errorId, aria } = useFieldIds(id, { description, error, success }); // the count follows the text, typed or set by the caller const [typed, setTyped] = useState(String(defaultValue ?? "").length); const length = value !== undefined ? String(value).length : typed; const counted = !!showCount && maxLength != null; const completes = !!complete || !!emailDomains?.length; const [text, setText] = useState(String(defaultValue ?? "")); const current = value !== undefined ? String(value) : text; const [focused, setFocused] = useState(false); const [dismissed, setDismissed] = useState(null); const [active, setActive] = useState(-1); const viaKeys = useRef(false); const input = useRef(null); const attach = useComposedRef(input, ref); const listId = useId(); const container = usePortalContainer(); const offers = useMemo(() => { if (!completes || !current) return []; const list = complete ? complete(current) : emailOffers(current, emailDomains ?? []); // an offer the field already holds whole is no offer return list.filter((s) => s !== current).slice(0, 8); }, [completes, complete, emailDomains, current]); const open = completes && focused && offers.length > 0 && dismissed !== current && !disabled && !readOnly; const take = (s: string) => { const el = input.current; if (!el) return; // through the native setter, so onChange and onValueChange hear it like typing, controlled or not Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(el, s); el.dispatchEvent(new Event("input", { bubbles: true })); setDismissed(s); setActive(-1); }; const field = ( { if (counted) setTyped(e.target.value.length); if (completes) { setText(e.target.value); setActive(-1); } onChange?.(e); onValueChange?.(e.target.value); }} className={cn(fieldControlClass, classNames?.input)} {...(completes ? { role: "combobox", autoComplete: "off", "aria-autocomplete": "list" as const, "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && active >= 0 ? `${listId}-${active}` : undefined, } : {})} {...props} onFocus={(e) => { if (completes) setFocused(true); props.onFocus?.(e); }} onBlur={(e) => { if (completes) { setFocused(false); setActive(-1); } props.onBlur?.(e); }} onKeyDown={(e) => { if (open) { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); viaKeys.current = true; const n = offers.length; setActive((a) => (e.key === "ArrowDown" ? (a + 1) % n : a <= 0 ? n - 1 : a - 1)); } else if ((e.key === "Enter" || e.key === "Tab") && active >= 0) { if (e.key === "Enter") e.preventDefault(); take(offers[active]); } else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setDismissed(current); } } props.onKeyDown?.(e); }} /> ); const frame = ( {completes ? ( field ) : ( { if (counted) setTyped(e.target.value.length); onChange?.(e); onValueChange?.(e.target.value); }} className={cn(fieldControlClass, classNames?.input)} {...props} /> )} ); return ( : undefined} required={required} requiredOnControl controlId={controlId} descriptionId={descriptionId} errorId={errorId} className={className} classNames={classNames} style={style} > {completes ? (

{frame}

{container !== null && ( e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} className={cn(overlay.surface, "w-[var(--radix-popper-anchor-width)] min-w-[min(240px,100vw)]")} > ({ value: o, label: o }))} query={current} active={active} onActive={setActive} viaKeys={viaKeys} isSelected={() => false} onPick={(o) => take(o.value)} /> )} ) : ( frame )} ); } /** The typed name with each domain, narrowed by what follows the @; nothing before a name is typed. */ export function emailOffers(text: string, domains: string[]) { const at = text.indexOf("@"); const name = (at < 0 ? text : text.slice(0, at)).trim(); if (!name || /\s/.test(name)) return []; const typed = at < 0 ? "" : text.slice(at + 1).toLowerCase(); return domains.filter((d) => d.toLowerCase().startsWith(typed)).map((d) => `${name}@${d}`); } export default Input; 9f:T17eb,@layer properties, theme, base, components, utilities; @layer components { /* Item: one row. Plain rows are bare until pointed at; outline draws a quiet hairline; card wears the surface role. Selected (O1 §6): accent tint, a 2px accent-ink bar on the inline-start side, and every line of text in ink, so the state never rests on colour alone and the text keeps 4.5:1 on the tint in every look. */ .root { position: relative; display: flex; align-items: center; gap: var(--pui-space-2); min-width: 0; padding-inline: var(--pui-space-3); border-radius: var(--pui-radius-control); /* the corner an icon tile in the row's corner zone must take (O1 nested radius = outer − inset) */ --_item-nest: calc(var(--pui-radius-control) - var(--_pb, var(--pui-space-2-5))); transition: background-color var(--pui-motion-out) var(--pui-ease-default), var(--m-transition); } .outline { --_item-nest: calc(var(--pui-radius-card) - var(--_pb, var(--pui-space-2-5))); border-radius: var(--pui-radius-card); box-shadow: var(--pui-shadow-hairline); } .card { --_item-nest: calc(var(--pui-radius-card) - var(--_pb, var(--pui-space-2-5))); border-radius: var(--pui-radius-card); } .root[data-interactive]:hover { background-color: var(--pui-hover); transition-duration: 0ms; } /* a press steps one more rung at once */ .root[data-interactive]:has(> .main:active) { background-color: var(--pui-hover-2); transition-duration: 0ms; } .root[data-state="selected"], .root[data-state="selected"]:hover { background-color: var(--pui-accent-tint); } /* the selection bar is always there and grows from its middle when the row is chosen (a transition, so a row that starts selected simply is) */ .root::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 2px; border-radius: var(--pui-radius-pill); background: var(--pui-accent-ink); opacity: 0; scale: 1 0.3; transition: opacity var(--pui-motion-out) var(--pui-ease-default), scale var(--pui-motion-out) var(--pui-ease-default); pointer-events: none; } .root[data-state="selected"]::before { opacity: 1; scale: 1 1; transition-duration: var(--pui-duration-fast); } .main { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--pui-space-3); padding-block: var(--pui-space-2-5); border-radius: var(--pui-radius-control); color: inherit; text-align: start; text-decoration: none; outline-offset: 2px; } .sm { --_pb: var(--pui-space-1-5); } .sm .main { padding-block: var(--pui-space-1-5); } .media { display: grid; flex: none; place-items: center; } .text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .title { overflow: hidden; color: var(--pui-ink); font-size: var(--pui-text-base); font-weight: var(--pui-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .sm .title { font-size: var(--pui-text-sm); } .description { overflow: hidden; color: var(--pui-ink-3); font-size: var(--pui-text-xs); text-overflow: ellipsis; white-space: nowrap; } .meta { flex: none; color: var(--pui-ink-3); font-size: var(--pui-text-xs); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .root[data-state="selected"] :is(.description, .meta) { color: var(--pui-ink); } .actions { display: flex; flex: none; align-items: center; gap: var(--pui-space-1); } /* a narrow room (below 20rem, measured) joins what a wide one separates: the meta moves onto the description line, so the title keeps the whole width (a row with no description keeps its meta beside the title) */ .root[data-narrow] .main:has(.description) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "media title title" "media description meta"; column-gap: var(--pui-space-3); align-items: center; } .root[data-narrow] .main:has(.description) .text { display: contents; } .root[data-narrow] .main:has(.description) .media { grid-area: media; } .root[data-narrow] .main:has(.description) .title { grid-area: title; } .root[data-narrow] .main:has(.description) .description { grid-area: description; } .root[data-narrow] .main:has(.description) .meta { grid-area: meta; align-self: baseline; font-size: var(--pui-text-2xs); } /* ItemIcon: a tinted tile behind an icon; its corner follows the look's control radius. */ .icon { display: grid; width: 32px; height: 32px; place-items: center; /* its own control corner, or concentric with the row (never squarer than a chip, O1 §14.1) when the row's corner is round enough to reach it; the 100000× term switches between the two without a conditional */ --_r: max( var(--_item-nest, -1px), var(--pui-radius-chip), var(--pui-radius-control) - max(var(--_item-nest, -1px), 0px) * 100000 ); border-radius: var(--_r); background: var(--_tile, var(--pui-hover-2)); color: var(--_glyph, var(--pui-ink-2)); } .icon > svg { width: 16px; height: 16px; } .icon[data-tone="accent"] { --_tile: var(--pui-accent-tint); --_glyph: var(--pui-accent-ink); } .icon[data-tone="green"] { --_tile: var(--pui-green-tint); --_glyph: var(--pui-green); } .icon[data-tone="orange"] { --_tile: var(--pui-orange-tint); --_glyph: var(--pui-orange); } .icon[data-tone="red"] { --_tile: var(--pui-red-tint); --_glyph: var(--pui-red); } .icon[data-tone="blue"] { --_tile: var(--pui-blue-tint); --_glyph: var(--pui-blue); } .icon[data-tone="violet"] { --_tile: var(--pui-violet-tint); --_glyph: var(--pui-violet); } } /* CSS-module composition only; visual rules stay in the component layer. */ .card { composes: m-surface from global; } a0:T26f6,"use client"; import { useDeprecatedProp } from "../../hooks/use-deprecated-prop"; import { useEffect, useRef, type CSSProperties, type ComponentProps, type RefObject } from "react"; import { useComponentDefaults } from "../../runtime/appearance"; import type { ItemDefaults } from "./defaults"; export type { ItemDefaults } from "./defaults"; import type { ReactNode, Ref } from "react"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useWidthAs } from "../../hooks/use-content-width"; import { cn } from "../../lib/utils"; import { useControllable } from "../../hooks/use-controllable"; import styles from "./item.module.css"; export interface ItemClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the main part; no override by default. */ main?: string; /** Classes for the media part; no override by default. */ media?: string; /** Classes for the text part; no override by default. */ text?: string; /** Classes for the title part; no override by default. */ title?: string; /** Classes for the description part; no override by default. */ description?: string; /** Classes for the meta part; no override by default. */ meta?: string; /** Classes for the actions part; no override by default. */ actions?: string; } export interface ItemProps { /** Heading shown above the content. Required. */ title: ReactNode; /** Supporting text beneath the label or heading. Defaults to no supporting text. */ description?: ReactNode; /** Icon tile, avatar or thumbnail on the start side. */ media?: ReactNode; /** Right-aligned meta: time, count, status. */ meta?: ReactNode; /** Trailing controls. Clicks inside do not trigger the row. They wait for attention (hover, focus in the row, the * row selected; always shown on touch) and stay while one of them is pressed or has its menu open. */ actions?: ReactNode; /** Show the actions at rest instead of with attention. Default false. */ actionsAtRest?: boolean; /** URL opened when the item is activated. Defaults to a non-link item. */ href?: string; /** Called when an item is activated; no handler by default. */ onSelect?: () => void; /** Controlled selected indication; omitted by default to use defaultSelected. */ selected?: boolean; /** Initial selected indication when uncontrolled; defaults to false. */ defaultSelected?: boolean; /** Reports selecting the row; no callback by default, and onSelect remains the activation event. */ onSelectedChange?: (selected: boolean) => void; /** Visual weight; defaults to ghost. @deprecated The values plain and card alias ghost and secondary. */ variant?: "ghost" | "outline" | "secondary" | "plain" | "card"; /** Control size within the supported size steps. Defaults to "md". */ size?: "sm" | "md"; /** Classes on the documented visual root; no override by default. */ className?: string; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Classes for the named visual parts; no part overrides by default. */ classNames?: ItemClassNames; /** Receives the documented root element; no ref by default. */ ref?: Ref; } /** Watched by nothing: a row that has no fold to make measures nothing. */ const UNWATCHED: RefObject = { current: null }; const VARIANT: Record, string | undefined> = { ghost: undefined, plain: undefined, outline: styles.outline, secondary: styles.card, card: styles.card, }; /** * The generic list row every list is built from: media, title, description, meta and actions. It becomes a link or a * button when given `href` / `onSelect`, keeping trailing actions separately focusable. It answers its room: below * 20rem the meta joins the description line so the title keeps the whole width; trailing actions wait for attention. */ export function Item({ title, description, media, meta, actions, actionsAtRest = false, href, onSelect, selected: selectedProp, defaultSelected, onSelectedChange, variant: variantProp, size: sizeProp, className, style, classNames, ref, }: ItemProps) { const scopeDefaults = useComponentDefaults("item", ["variant", "size"]); const requestedVariant = variantProp ?? scopeDefaults.variant ?? "ghost"; useDeprecatedProp("Item", 'variant="plain"', 'variant="ghost"', requestedVariant === "plain"); useDeprecatedProp("Item", 'variant="card"', 'variant="secondary"', requestedVariant === "card"); const variant = requestedVariant === "ghost" ? "plain" : requestedVariant === "secondary" ? "card" : requestedVariant; const [selected, setSelected] = useControllable(selectedProp, defaultSelected ?? false); const selectable = defaultSelected !== undefined || onSelectedChange !== undefined; const choose = () => { // an item nobody listens to stays a plain row: it keeps no selection of its own if (selectable) setSelected(true); onSelectedChange?.(true); onSelect?.(); }; const size = sizeProp ?? scopeDefaults.size ?? "md"; const interactive = !!(href || onSelect || selectable); // only a row with both a description and a meta has a fold to make, so only such a row measures its width (one // observer, read when the width crosses 20rem); no containment, so a row can sit in a scrolling strip at its own width const root = useRef(null); const rootRef = useComposedRef(root, ref); const narrow = useWidthAs(description && meta ? root : UNWATCHED, (w) => w < 320, false); const tools = useRef(null); // the actions stay shown while one is pressed (a favourite that is on) or has its menu open; watched only for those // attributes, so a still row costs nothing const hasActions = !!actions && !actionsAtRest; useEffect(() => { const el = tools.current; if (!el || !hasActions || typeof MutationObserver === "undefined") return; const held = '[aria-pressed="true"],[aria-expanded="true"],[data-state="open"]'; const update = () => el.toggleAttribute("data-shown", !!el.querySelector(held)); update(); const watch = new MutationObserver(update); watch.observe(el, { subtree: true, attributes: true, attributeFilter: ["aria-pressed", "aria-expanded", "data-state"], }); return () => watch.disconnect(); }, [hasActions]); const body = ( <> {media && ( {media} )} {title} {description && ( {description} )} {meta && ( {meta} )} ); return (

{href ? ( {body} ) : onSelect || selectable ? ( ) : (

{body}

)} {actions && ( {actions} )}

); } export type ItemIconPalette = "green" | "orange" | "red" | "blue" | "violet"; export type ItemIconTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info" | ItemIconPalette; const ICON_TONES: Record = { neutral: "neutral", accent: "accent", success: "green", warning: "orange", danger: "red", info: "blue", green: "green", orange: "orange", red: "red", blue: "blue", violet: "violet", }; /** A tinted tile behind an icon — the default media for items. Its corner follows the look's control radius. */ export function ItemIcon({ children, tone = "neutral", palette, className, ...props }: ComponentProps<"span"> & { /** Semantic colour; defaults to neutral. @deprecated Named colours should use palette instead. */ tone?: ItemIconTone; /** Explicit decorative colour overriding the semantic tone; omitted by default. */ palette?: ItemIconPalette; }) { useDeprecatedProp( "ItemIcon", "tone", "a semantic tone or palette for a named colour", ["green", "orange", "red", "blue", "violet"].includes(tone), ); return ( {children} ); } export default Item; a1:Tee9,@layer properties, theme, base, components, utilities; @layer components { /* Keycaps: each key is a small raised control (the control role), so it reads as a key in every look. */ .keys { display: inline-flex; align-items: center; gap: var(--pui-space-0-5); vertical-align: middle; /* a key combination is a fixed sequence: it reads Ctrl K in any page direction, isolated as one unit while the page keeps its own direction around it */ direction: ltr; unicode-bidi: isolate; } .cap { display: inline-flex; height: 22px; min-width: 22px; align-items: center; justify-content: center; padding-inline: var(--pui-space-1-5); /* nesting input (O1 §14.1, as Button): a parent that holds this near its rounded corner sets --pui-nest-radius and --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 applies. --pui-kbd-radius wins over both. */ --_kbd-nest: clamp( calc(var(--pui-radius-chip) / 2), calc(var(--pui-nest-radius) - var(--pui-nest-inset, 0px)), var(--pui-nest-ceiling, var(--pui-radius-chip)) ); border-radius: var(--pui-kbd-radius, var(--_kbd-nest, calc(var(--pui-radius-chip) - 1px))); color: var(--pui-ink-2); font-size: var(--pui-text-2xs); font-weight: var(--pui-weight-medium); transition: translate var(--pui-motion-out) var(--pui-ease-default), color var(--pui-motion-out) var(--pui-ease-default), var(--m-transition); } /* live: a held key presses its cap down at once (the look's own press light) and lets it up over the leave duration; with every key of the combination held, the caps ink in the accent and take an accent ring */ .cap[data-pressed] { --pui-m-press: 1; translate: 0 1px; color: var(--pui-ink); transition-duration: 0ms; } .keys[data-complete] .cap { color: var(--pui-accent-ink); box-shadow: var(--m-control-edge), 0 0 0 1px var(--pui-accent); } /* a finished step of a sequence keeps its caps inked while the next is awaited */ .cap[data-done] { color: var(--pui-accent-ink); } /* "then" between the steps of a sequence: a word, seen and spoken, so G then A never reads as G and A held together. While the next step is awaited a line under it runs out over the time it has (SEQUENCE_MS in kbd.tsx): a timer, so reduced motion keeps it, as HoldToConfirm keeps its fill. */ .then { position: relative; padding-inline: var(--pui-space-0-5); color: var(--pui-ink-3); font-size: var(--pui-text-2xs); font-weight: var(--pui-weight-normal); transition: color var(--pui-motion-out) var(--pui-ease-default); } .then[data-waiting] { color: var(--pui-ink-2); transition-duration: 0ms; } .then[data-waiting]::after { content: ""; position: absolute; inset-inline: var(--pui-space-0-5); bottom: -2px; height: 1px; background: var(--pui-accent); transform-origin: left; /* the same wait the sequence listener keeps (SEQUENCE_MS), passed in so the line and the timeout never drift */ animation: kbd-wait var(--_wait) linear forwards; } @keyframes kbd-wait { from { scale: 1 1; } to { scale: 0 1; } } .sm { height: 18px; min-width: 18px; padding-inline: var(--pui-space-1); font-size: var(--pui-text-2xs); } .lg { height: 28px; min-width: 28px; padding-inline: var(--pui-space-2); font-size: var(--pui-text-sm); } } /* CSS-module composition only; visual rules stay in the component layer. */ .cap { composes: m-control from global; } a2:T2bcf,"use client"; import { useMessages, type Translator } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useComponentDefaults } from "../../runtime/appearance"; import type { KbdDefaults } from "./defaults"; export type { KbdDefaults } from "./defaults"; import { Fragment, useEffect, useReducer } from "react"; import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from "react"; import { cn } from "../../lib/utils"; import { useApplePlatform } from "../../hooks/use-apple-platform"; import styles from "./kbd.module.css"; const MAP_MAC = (i18n: Translator): Record => ({ mod: "⌘", cmd: "⌘", ctrl: "⌃", alt: "⌥", option: "⌥", shift: "⇧", enter: "↵", backspace: "⌫", esc: i18n("escapeShort"), tab: "⇥", up: "↑", down: "↓", left: "←", right: "→", space: i18n("space"), }); const MAP_PC = (i18n: Translator): Record => ({ mod: i18n("controlShort"), cmd: i18n("controlShort"), ctrl: i18n("controlShort"), alt: i18n("alt"), option: i18n("alt"), shift: i18n("shift"), enter: i18n("enter"), backspace: i18n("backspace"), esc: i18n("escapeShort"), tab: i18n("tab"), up: "↑", down: "↓", left: "←", right: "→", space: i18n("space"), }); const SPOKEN = (i18n: Translator): Record => ({ "⌘": i18n("command"), "⌃": i18n("control"), "⌥": i18n("option"), "⇧": i18n("shift"), "↵": i18n("enter"), "⌫": i18n("backspace"), "⇥": i18n("tab"), "↑": i18n("up"), "↓": i18n("down"), "←": i18n("left"), "→": i18n("right"), }); /** The KeyboardEvent.key a cap stands for, compared in lower case. */ const EVENT_KEY: Record = { ctrl: "control", alt: "alt", option: "alt", shift: "shift", enter: "enter", backspace: "backspace", esc: "escape", tab: "tab", up: "arrowup", down: "arrowdown", left: "arrowleft", right: "arrowright", space: " ", }; const eventKey = (k: string, mac: boolean) => { const name = k.toLowerCase(); if (name === "mod" || name === "cmd") return mac ? "meta" : "control"; return EVENT_KEY[name] ?? name; }; const NONE: ReadonlySet = new Set(); /** The key between the steps of a sequence: ["g", "then", "a"] is G, then A. */ const THEN = "then"; /** How long a sequence waits for its next step, as apps that bind them do. */ const SEQUENCE_MS = 1500; /** live: the keys of the shortcut held now, the step being waited for, whether the whole shortcut is done, and how * many steps have been done (a step done again, G pressed twice, gives the next one its full time again). */ interface Live { held: ReadonlySet; step: number; complete: boolean; done: number; } type LiveAction = { type: "down"; key: string; steps: string[][] } | { type: "up"; key: string; steps: string[][] } | { type: "reset" }; const REST: Live = { held: NONE, step: 0, complete: false, done: 0 }; /** A step is done by the press that completes it: every key of the step held, the last one just pressed. */ const advance = (live: Live, key: string, steps: string[][]): Live => { const want = steps[live.step]; if (!want.includes(key) || !want.every((k) => live.held.has(k))) return live; return live.step === steps.length - 1 ? { ...live, complete: true } : { ...live, step: live.step + 1, done: live.done + 1 }; }; function track(live: Live, action: LiveAction): Live { if (action.type === "reset") return live === REST ? live : REST; const { key, steps } = action; if (action.type === "down") { // a key outside the shortcut breaks a sequence half-way; a combination simply waits for its own keys if (!steps.some((s) => s.includes(key))) return live.step || live.complete ? { ...REST, held: live.held } : live; const held = live.held.has(key) ? live.held : new Set(live.held).add(key); const next = advance({ ...live, held }, key, steps); if (next.step === live.step && !next.complete && live.step > 0 && !steps[live.step].includes(key)) // a wrong key mid-sequence starts it over, and may itself begin it return advance({ ...live, held, step: 0, complete: false }, key, steps); return next; } // with ⌘ held a Mac sends no keyup for the other keys: letting go of ⌘ lets go of all of them let held = live.held; if (key === "meta") held = NONE; else if (held.has(key)) { const next = new Set(held); next.delete(key); held = next; } // letting go of the last step ends the shortcut; an earlier step stays done while the next is awaited if (live.complete && steps[live.step].some((k) => !held.has(k))) return { ...REST, held }; return held === live.held ? live : { ...live, held }; } /** Typing a letter into a field is typing, not a shortcut. */ const typing = (e: KeyboardEvent) => { const t = e.target as HTMLElement | null; return ( e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && !!t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) ); }; export interface KbdClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the cap part; no override by default. */ cap?: string; /** Classes for the symbol part; no override by default. */ symbol?: string; /** Classes for the spoken part; no override by default. */ spoken?: string; /** The word between the steps of a sequence. */ then?: string; } export interface KbdProps extends HTMLAttributes { /** Keys in order; held together they make a combination: `["mod", "K"]` renders ⌘K on Mac and Ctrl K elsewhere. * `"then"` between keys makes a sequence: `["g", "then", "a"]` is G, then A. */ keys?: string[]; /** The caps answer the keyboard: each presses down while the viewer holds its key, and the combination lights when * all are held; in a sequence each finished step stays lit while the next is awaited (1.5 s). For teaching a * shortcut where it is shown; it listens only while mounted with `live`. */ live?: boolean; /** Platform used to name modifier keys; defaults to the viewer's detected platform. */ platform?: "mac" | "other"; /** Control size within the supported size steps. Defaults to "md". */ size?: "sm" | "md" | "lg"; /** Receives the documented root element; no ref by default. */ ref?: Ref; /** Classes for the named visual parts; no part overrides by default. */ classNames?: KbdClassNames; } /** * Keyboard keys as keycaps, for combinations (⌘K) and sequences (G then A). `mod` resolves to ⌘ or Ctrl for the * viewer's platform; symbols are spoken as words for screen readers. Pass `children` for a single literal key. */ export function Kbd({ keys, live = false, platform, size: sizeProp, className, classNames, children, ref, ...props }: KbdProps) { const i18n = useMessages("kbd", englishMessages); const scopeDefaults = useComponentDefaults("kbd", ["size"]); const size = sizeProp ?? scopeDefaults.size ?? "md"; const detectedMac = useApplePlatform(); const mac = platform === undefined ? detectedMac : platform === "mac"; const map = mac ? MAP_MAC(i18n) : MAP_PC(i18n); const spoken = SPOKEN(i18n); // the steps: one for a combination, one per "then" for a sequence (a stray "then" at either end is no step) const parts: string[][] = [[]]; for (const k of keys ?? []) { if (k.toLowerCase() === THEN) parts.push([]); else parts[parts.length - 1].push(k); } const steps = parts.filter((s) => s.length > 0); // live: which of the caps' keys the viewer holds now, and how far through the sequence they are const [state, dispatch] = useReducer(track, REST); const wanted = live && keys ? steps.map((s) => s.map((k) => eventKey(k, mac)).join("\u0000")).join("\u0001") : ""; useEffect(() => { if (!wanted) return; const events = wanted.split("\u0001").map((s) => s.split("\u0000")); const press = (e: KeyboardEvent) => { if (e.repeat || typing(e)) return; dispatch({ type: "down", key: e.key.toLowerCase(), steps: events }); }; const release = (e: KeyboardEvent) => dispatch({ type: "up", key: e.key.toLowerCase(), steps: events }); const clear = () => dispatch({ type: "reset" }); window.addEventListener("keydown", press); window.addEventListener("keyup", release); window.addEventListener("blur", clear); return () => { window.removeEventListener("keydown", press); window.removeEventListener("keyup", release); window.removeEventListener("blur", clear); dispatch({ type: "reset" }); }; }, [wanted]); // a sequence waits for its next step a moment, then starts over const waiting = state.step > 0 && !state.complete; useEffect(() => { if (!waiting) return; const t = window.setTimeout(() => dispatch({ type: "reset" }), SEQUENCE_MS); return () => window.clearTimeout(t); }, [waiting, state.done]); const label = (k: string) => map[k.toLowerCase()] ?? (k.length === 1 ? k.toUpperCase() : k); const cap = cn(styles.cap, "font-sans", size !== "md" && styles[size], classNames?.cap); const face = (k: ReactNode) => // a label on a plain span is not read; the symbol is hidden and its word is spoken instead typeof k === "string" && spoken[k] ? ( <> {k} {spoken[k]} ) : ( k ); return ( {keys ? ( steps.map((step, s) => ( {s > 0 && ( {i18n("then")} )} {step.map((k, i) => { const event = eventKey(k, mac); return ( {face(label(k))} ); })} )) ) : ( {face(children)} )} ); } export default Kbd; a3:T649,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import type { ComponentProps } from "react"; import * as RadixLabel from "@radix-ui/react-label"; import { cn } from "../../lib/utils"; export interface LabelProps extends ComponentProps { /** Shows the marker and announces "required". */ required?: boolean; /** The control says "required" itself (a native required input, a radiogroup with aria-required): the label shows * the marker only, so the control's name stays the label's words and the state is announced once. */ requiredOnControl?: boolean; } /** The text label tied to a form control. It dims with a disabled control next to it (peer) or inside it (group). */ export function Label({ required = false, requiredOnControl = false, className, children, ...props }: LabelProps) { const i18n = useMessages("label", englishMessages); return ( {children} {required && ( <> * {!requiredOnControl && {i18n("required")}} )} ); } export default Label; a4:T2c72,"use client"; import { useListWindow } from "../_shared/list-state"; import { useMessages, numberFormatter } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useLocale } from "../../runtime/localization"; import { useRef, type CSSProperties, type Ref } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { Button } from "../button/button"; import { cn } from "../../lib/utils"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useWidthAs } from "../../hooks/use-content-width"; import { useFlip } from "../../hooks/use-flip"; import { useIndicator } from "../../hooks/use-indicator"; import { useContour } from "../../hooks/use-contour"; export interface PaginationClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the summary part; no override by default. */ summary?: string; /** Classes for the controls part; no override by default. */ controls?: string; /** Classes for the previous part; no override by default. */ previous?: string; /** Classes for the list part; no override by default. */ list?: string; /** Classes for the gap part; no override by default. */ gap?: string; /** Classes for the item part; no override by default. */ item?: string; /** Classes for the page part; no override by default. */ page?: string; /** Classes for the compact part; no override by default. */ compact?: string; /** Classes for the next part; no override by default. */ next?: string; } export interface PaginationProps { /** Controlled current page, counted from 1; omit to use defaultPage. */ page?: number; /** Initial page when uncontrolled, counted from 1. Defaults to 1. */ defaultPage?: number; /** Number of pages for existing callers; omit when rowCount is supplied. */ pageCount?: number; /** Total matching rows; null is unknown. Overrides deprecated total. */ rowCount?: number | null; /** Initial rows per page. Default 25 when rowCount is supplied. */ defaultPageSize?: number; onPageSizeChange?: (pageSize: number) => void; /** Unknown totals: false disables Next. */ hasMore?: boolean; /** Reports page number after a change; no callback by default. */ onPageChange?: (page: number) => void; /** Pages shown on each side of the current one. Default 1. */ siblings?: number; /** With both, a line like "41–60 of 468" sits before the pages. */ pageSize?: number; /** @deprecated Use rowCount. */ total?: number | null; /** The landmark's name. Default "Pagination". */ label?: string; /** Classes on the documented visual root; no override by default. */ className?: string; /** Classes for the named visual parts; no part overrides by default. */ classNames?: PaginationClassNames; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Receives the documented root element; no ref by default. */ ref?: Ref; } /** The page numbers to show: always the same number of slots (first, last, the current with its siblings, and an * ellipsis for each gap), so Next and Previous never move under the pointer while paging. With few enough pages every * page shows; an ellipsis always stands for at least two pages. */ export function pageWindow(page: number, count: number, siblings = 1): (number | "gap")[] { const range = (a: number, b: number) => Array.from({ length: Math.max(0, b - a + 1) }, (_, i) => a + i); const slots = 2 * siblings + 5; if (count <= slots) return range(1, count); const left = Math.max(page - siblings, 1); const right = Math.min(page + siblings, count); if (left <= 3) return [...range(1, slots - 2), "gap", count]; if (right >= count - 2) return [1, "gap", ...range(count - (slots - 3), count)]; return [1, "gap", ...range(left, right), "gap", count]; } /** From this room (2xl, 42rem) one more neighbour shows on each side of the current page. */ const WIDE = 672; /** Moves through pages of a known length. It answers to its own room, not the window: narrow, the numbers give way to * "Page 6 of 24" and the summary keeps to one line; wide, one more neighbour shows on each side of the current page. */ export function Pagination({ page: pageProp, defaultPage = 1, pageCount: pageCountProp, onPageChange, siblings = 1, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, rowCount, hasMore, total: totalProp, label: labelProp, className, classNames, style, ref, }: PaginationProps) { const i18n = useMessages("pagination", englishMessages); const label = labelProp === undefined ? i18n("label") : labelProp; const locale = useLocale(); const paging = useListWindow({ page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, rowCount, total: totalProp, }); const total = paging.rowCount; const pageSize = pageSizeProp ?? (rowCount !== undefined || defaultPageSize !== undefined ? paging.pageSize : undefined); const pageCount = total === null ? null : total != null && pageSize ? Math.max(1, Math.ceil(total / pageSize)) : (pageCountProp ?? null); const page = pageProp === undefined ? Math.min(Math.max(1, pageCount ?? Infinity), paging.page) : paging.page; const root = useRef(null); const attach = useComposedRef(root, ref); const wide = useWidthAs(root, (w) => w >= WIDE, false); // the numbers show while the room holds them: every slot of the window and the two arrows at the arrows' own size // (so the type and spacing scales count), and the range summary's words when there is one; else "Page 6 of 24" const prev = useRef(null); const summary = useRef(null); const slots = pageWindow(page, Math.max(pageCount ?? page, 1), siblings + (wide ? 1 : 0)).length; const fits = useWidthAs( root, (w) => { const unit = (prev.current?.offsetWidth || 32) + 2; const words = summary.current ? summary.current.scrollWidth + 12 : 0; return w === 0 || w >= (slots + 2) * unit + words; }, true, `${slots}:${pageSize ?? ""}:${total ?? ""}`, ); // the current page's plate travels to the new page as matter (ui/lib/contour.ts) instead of one button lighting up const [list, current] = useIndicator("[aria-current=page]", `${page}:${pageCount}:${wide}`); const plate = useContour(current); // the numbers keep their path: when the window moves along, the ones that stay slide to their new slot under the // plate, which stays in the middle, and the one arriving grows in. While the room shows "Page 6 of 24" the numbers // are not laid out: nothing is read, so they never slide in from nowhere when the room grows back useFlip(() => (list.current?.offsetWidth ? list.current : null), { ghost: false }); if (pageCount !== null && pageCount < 1) return null; const go = (p: number) => { const next = Math.min(pageCount ?? Infinity, Math.max(1, p)); paging.setPage(next); }; const from = pageSize && total != null ? (page - 1) * pageSize + 1 : null; return (

{from !== null && total != null && ( {total === 0 ? i18n("noResults") : i18n("of", { value: numberFormatter(locale).format(from), value2: numberFormatter(locale).format(Math.min(total, page * (pageSize ?? 0))), value3: numberFormatter(locale).format(total), })} )}

)} {pageWindow(page, pageCount ?? page, siblings + (wide ? 1 : 0)).map((p, i) => p === "gap" ? (
…

{i18n("page2")} {pageCount === null ? i18n("pageTotalUnknown", { page }) : i18n("of2", { page, pageCount })}

); } export default Pagination; a5:T1551,@layer properties, theme, base, components, utilities; @layer components { /* Radio cards: raised option cards (the control role) with one accent ring that slides to the chosen card. */ /* the grid takes the columns its room allows (radio-cards.tsx arranges: one row, a balanced grid, or a list) */ .group { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--pui-radio-cards-card-width, 180px), 100%), 1fr)); gap: var(--pui-space-2); } .group[data-columns] { grid-template-columns: repeat(var(--_cols), minmax(0, 1fr)); } .list { grid-template-columns: 1fr; } .row { display: flex; flex-wrap: nowrap; overflow-x: auto; /* Keep a full focus outline inside the scroller without changing the cards' layout footprint. */ margin: calc(var(--pui-space-1) * -1); padding: var(--pui-space-1); } .row .card { flex: 0 0 var(--pui-radio-cards-card-width, 180px); } /* placed and moved by glide (utilities.css), on both axes: it stretches toward the chosen card and gathers there */ .ring { position: absolute; z-index: 1; border-radius: var(--pui-radius-card); box-shadow: inset 0 0 0 1.5px var(--pui-accent); pointer-events: none; } /* the ring before it is first placed (a page drawn on a server): the chosen card wears it */ .placing::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--pui-accent); pointer-events: none; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; gap: var(--pui-space-3); padding: var(--pui-space-3); border-radius: var(--pui-radius-card); text-align: start; transition: var(--m-transition); } .card:hover { transition-duration: 0ms; } /* a wide thing presses shallower than a small one: a third of the small-control depth, at once */ .card:active:not(:disabled) { scale: calc(1 - (1 - var(--pui-press-scale)) / 3); transition-duration: 0ms; } .card:disabled { opacity: var(--pui-opacity-disabled); pointer-events: none; } .list .card { flex-direction: row; align-items: center; } .media { display: block; width: 100%; aspect-ratio: 16 / 9; flex-shrink: 0; overflow: hidden; border-radius: var(--pui-radius-control); } .media :where(img, video, canvas) { display: block; width: 100%; height: 100%; object-fit: cover; } .head { display: flex; width: 100%; align-items: flex-start; gap: var(--pui-space-3); } .list .media { width: min(32%, 120px); } .list .head { flex: 1; min-width: 0; align-items: center; } .icon { display: grid; width: 32px; height: 32px; flex-shrink: 0; place-items: center; /* nested in the card: the chip radius, or the card radius minus the padding when that is rounder (roundness 200%) */ --_r: max(0px, var(--pui-radius-card) - var(--pui-space-3) - var(--pui-radius-chip)); border-radius: calc(var(--pui-radius-chip) + var(--_r)); background: var(--pui-hover-2); color: var(--pui-ink-2); } .icon :where(svg) { width: var(--pui-icon-md); height: var(--pui-icon-md); } .text { display: grid; min-width: 0; flex: 1; gap: var(--pui-space-0-5); } .label { color: var(--pui-ink); font-size: var(--pui-text-base); font-weight: var(--pui-weight-medium); } .detail { color: var(--pui-ink-3); font-size: var(--pui-text-xs); line-height: 1.375; } /* the radio mark is RadioGroup's own: the toggle role's well, filled with a dot when chosen */ .mark { --m-color: var(--pui-control-on); --m-toggle-off: var(--pui-field); --m-toggle-off-hover: var(--pui-field); --m-toggle-ring: var(--pui-edge-control); --m-toggle-ring-hover: color-mix(in oklab, var(--pui-edge-control) 60%, var(--pui-ink)); display: grid; width: 16px; height: 16px; flex-shrink: 0; place-items: center; border-radius: 50%; transition: var(--m-transition); } .card:hover .mark { --m-toggle-ring: var(--m-toggle-ring-hover); transition-duration: 0ms; } .mark[data-state="checked"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pui-control-glyph); animation: mark-in var(--pui-duration-fast) var(--pui-ease-enter); } @keyframes mark-in { from { scale: 0.2; } } /* the figure people compare (a price, a size) closes the card under a seam, in the body face with even digits */ .figure { margin-top: auto; padding-top: var(--pui-space-2-5); border-top: 1px solid var(--pui-line-soft); color: var(--pui-ink); font-size: var(--pui-text-base); font-weight: var(--pui-weight-medium); font-variant-numeric: tabular-nums; } /* in a row the figure stays whole on one line ("$24 / seat"); the detail beside it gives way instead */ .list .figure { margin-top: 0; padding-top: 0; border-top: 0; margin-inline-start: auto; font-size: var(--pui-text-sm); white-space: nowrap; } } /* CSS-module composition only; visual rules stay in the component layer. */ .ring { composes: glide glide-2d from global; } .card { composes: m-control from global; } .mark { composes: m-toggle from global; } a6:T28a3,"use client"; import { useDeprecatedProp } from "../../hooks/use-deprecated-prop"; import { useState, type CSSProperties, type ReactNode, type Ref } from "react"; import { useComposedRef } from "../../hooks/use-composed-ref"; import * as RadioGroup from "@radix-ui/react-radio-group"; import { useWidthAs } from "../../hooks/use-content-width"; import { glideProps, useIndicator } from "../../hooks/use-indicator"; import { cn } from "../../lib/utils"; import { ChoiceField, choiceIsField, type ChoiceFieldAria } from "../_shared/field"; import styles from "./radio-cards.module.css"; export interface RadioCard { /** Value represented by this item. Required. */ value: string; /** Text displayed for this item. Required. */ label: ReactNode; /** One or two lines under the label. */ detail?: ReactNode; /** The figure people compare: a price, a size. */ figure?: ReactNode; /** An image or other preview. Keep interactive controls outside the radio card. */ media?: ReactNode; /** Icon element displayed with this item. Omitted by default. */ icon?: ReactNode; /** Whether this option is unavailable for selection. Omitted by default. */ disabled?: boolean; } export type RadioCardsLayout = "grid" | "stacked" | "row"; /** How a grid of cards uses its room: all in one row, a balanced grid, or rows of a list when cards side by side would * be a single column of tall cards (or three cards would leave one alone on a second line). */ function arrange( width: number, cards: number, card: number, gap: number, ): { kind: "row" | "grid" | "list"; cols: number } { const fit = Math.max(1, Math.floor((width + gap) / (card + gap))); if (fit >= cards) return { kind: "row", cols: cards }; if (fit < 2) return { kind: "list", cols: 1 }; const rows = Math.ceil(cards / fit); const cols = Math.ceil(cards / rows); if (cards <= 3 && cards % cols === 1) return { kind: "list", cols: 1 }; return { kind: "grid", cols }; } export type RadioCardsClassNames = Partial< Record< | "root" | "item" | "media" | "head" | "icon" | "text" | "label" | "detail" | "mark" | "figure" | "ring" | "field" | "fieldLabel" | "description" | "error", string > >; export interface RadioCardsProps { /** Stable choices with optional media, detail, figure and icon. */ cards: RadioCard[]; /** Controlled value of the chosen card; omit to use defaultValue. */ value?: string; /** Initial value of the chosen card when uncontrolled. Defaults to no selected card. */ defaultValue?: string; /** Reports value of the chosen card after an edit; no callback by default. */ onValueChange?: (value: string) => void; /** Stack the cards as rows instead of setting them side by side. */ stacked?: boolean; /** Grid by default; row keeps one nonwrapping horizontal row. Overrides the stacked shorthand. */ layout?: RadioCardsLayout; /** Grid minimum or row card width, in px. Defaults to inherited --pui-radio-cards-card-width, then 180. */ cardWidth?: number; /** The group's name or question (e.g. "Plan"), shown above it like every field's label; `hideLabel` keeps it for * assistive tech only. */ label: string; /** Lay it out as a form field (label above, description or error below). On unless the label is hidden and there is * no description, error or required mark. */ field?: boolean; /** Shows the label visually while keeping its accessible name; defaults to true. Takes precedence over hideLabel. */ showLabel?: boolean; /** Hides the label; defaults to false. @deprecated Use showLabel={false} instead. */ hideLabel?: boolean; /** One line of help under the cards (makes it a field). */ description?: ReactNode; /** The problem and its fix, e.g. a required choice not made (makes it a field and marks the group invalid). */ error?: ReactNode; /** Field name used in native form submission. Defaults to no form field name. */ name?: string; /** Marks the field as required for form submission. Defaults to false. */ required?: boolean; /** Prevents interaction with the control. Defaults to false. */ disabled?: boolean; /** Classes on the documented visual root; no override by default. */ className?: string; /** Classes for the documented visual parts; keyboard behavior and measured ring remain owned by the control. */ classNames?: RadioCardsClassNames; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Receives the radio group, preserving its measurement and selection refs; omitted by default. */ ref?: Ref; } /** * One choice among a few rich options: plans, regions, instance sizes. A single selection ring slides to the chosen * card; arrows move and choose, like any radio group. */ export function RadioCards({ cards, value, defaultValue, onValueChange, stacked = false, layout: layoutProp, cardWidth, label, field, hideLabel: hideLabelProp, showLabel, description, error, name, required, disabled, className, classNames, style, ref, }: RadioCardsProps) { useDeprecatedProp("RadioCards", "hideLabel", "showLabel={false}", hideLabelProp !== undefined); const hideLabel = showLabel === undefined ? hideLabelProp : !showLabel; const layout = layoutProp ?? (stacked ? "stacked" : "grid"); const [current, setCurrent] = useState(value ?? defaultValue ?? null); const chosen = value !== undefined ? value : current; const [group, ring] = useIndicator( "[role=radio][data-state=checked]", `${chosen}:${layout}:${cards.length}`, ); const attach = useComposedRef(group, ref); // a grid answers to its room: the card width (prop, inherited token, or 180) and the gap are read from the group const fitted = useWidthAs( group, (w) => { const el = group.current; const cs = el ? getComputedStyle(el) : null; const card = cardWidth ?? (parseFloat(cs?.getPropertyValue("--pui-radio-cards-card-width") ?? "") || 180); const gap = parseFloat(cs?.columnGap ?? "") || 8; const a = arrange(w, cards.length, card, gap); return `${a.kind}:${a.cols}`; }, // before it is measured (a page drawn on a server) the grid's own CSS fits the cards to the room "grid:", // a different number of cards or card width is a different question `${cards.length}:${cardWidth ?? ""}`, ); const [arrangement, cols] = fitted.split(":") as ["row" | "grid" | "list", string]; const listed = layout === "stacked" || (layout === "grid" && arrangement === "list"); const geometry = cardWidth === undefined ? undefined : ({ "--pui-radio-cards-card-width": `${cardWidth}px` } as CSSProperties); const asField = choiceIsField(field, label, hideLabel, description != null || error != null || !!required); const control = (aria?: ChoiceFieldAria) => ( { setCurrent(v); onValueChange?.(v); }} name={name} required={required} disabled={disabled} aria-label={aria ? undefined : label} {...aria} className={cn( styles.group, listed && styles.list, layout === "row" && styles.row, classNames?.root, !asField && className, )} style={{ ...geometry, ...(layout === "grid" && !listed && cols ? ({ "--_cols": cols } as CSSProperties) : null), ...(asField ? null : style), }} > {ring && ( )} {cards.map((o) => ( {o.media != null && ( {o.media} )} {o.icon && ( {o.icon} )} {o.label} {o.detail && ( {o.detail} )} {o.figure && ( {o.figure} )} ))} ); if (!asField) return control(); return ( {control} ); } export default RadioCards; a7:T1cea,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useWidthAs } from "../../hooks/use-content-width"; import { useComponentDefaults } from "../../runtime/appearance"; import type { SearchFieldDefaults } from "./defaults"; export type { SearchFieldDefaults } from "./defaults"; import { useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode, type Ref } from "react"; import { Search, X } from "lucide-react"; import { cn } from "../../lib/utils"; import { useControllable } from "../../hooks/use-controllable"; import { IconAction } from "../_shared/icon-action"; import { Field, FieldFrame, fieldControlClass, useFieldIds, type FieldClassNames, type FieldSize, } from "../_shared/field"; import { Glow } from "../glow/glow"; import { Kbd } from "../kbd/kbd"; import { Spinner } from "../spinner/spinner"; export interface SearchFieldProps extends Omit< InputHTMLAttributes, "type" | "size" | "value" | "defaultValue" > { /** Accessible name; hidden by default (the magnifier and placeholder say what the field is). */ label: ReactNode; /** Show the label above the field. */ showLabel?: boolean; /** Controlled search text; omit to use defaultValue. */ value?: string; /** Initial search text when uncontrolled. Defaults to an empty string. */ defaultValue?: string; /** Reports search text after an edit; no callback by default. */ onValueChange?: (value: string) => void; /** Control size within the supported size steps. Defaults to "md". */ size?: FieldSize; /** A shortcut hint shown while the field is empty, e.g. "/" or "⌘K". A one-key shortcut ("/") is the field's own: pressed * anywhere but in a text field, it focuses the search. A chord ("⌘K") is shown only; the app binds it. */ shortcut?: string; /** A band of light rides the border: "focus" while focused, true while results are on their way. */ beam?: boolean | "focus"; /** Results are on their way: the magnifier turns into a spinner (aria-busy); typing goes on. */ loading?: boolean; /** Classes on the documented visual root; no override by default. */ className?: string; /** Classes for documented field parts; root style does not replace native behavior. */ classNames?: FieldClassNames & Partial>; /** Receives the native input; no ref by default. */ ref?: Ref; } /** The search entry point: magnifier, clear button, Escape to clear, an optional shortcut hint and a live beam. */ export function SearchField({ label, showLabel = false, value, defaultValue = "", onValueChange, onChange, size: sizeProp, shortcut, beam, loading, id, className, classNames, style, disabled, onKeyDown, onFocus, onBlur, ref, ...props }: SearchFieldProps) { const i18n = useMessages("search-field", englishMessages); const scopeDefaults = useComponentDefaults("search-field", ["size"]); const size = sizeProp ?? scopeDefaults.size ?? "md"; const { controlId, aria } = useFieldIds(id); const [text, set] = useControllable(value, defaultValue, onValueChange); const [focused, setFocused] = useState(false); const input = useRef(null); const attach = useComposedRef(input, ref); const frameRef = useRef(null); // the shortcut hint is the first thing to go when the field is narrow: the words typed matter more const roomy = useWidthAs(frameRef, (w) => w >= 200, true); // a one-key shortcut works where it is shown: pressed outside a text field, it brings the person here useEffect(() => { if (!shortcut || [...shortcut].length !== 1 || disabled) return; const down = (e: KeyboardEvent) => { if (e.key !== shortcut || e.metaKey || e.ctrlKey || e.altKey || e.defaultPrevented) return; const at = e.target instanceof HTMLElement ? e.target : null; if (at?.isContentEditable || at?.closest("input, textarea, select")) return; e.preventDefault(); input.current?.focus(); }; window.addEventListener("keydown", down); return () => window.removeEventListener("keydown", down); }, [shortcut, disabled]); // the magnifier comes back scaled in after a search, never on the first paint const [searched, setSearched] = useState(false); if (loading && !searched) setSearched(true); const trailing = text ? ( { set(""); input.current?.focus(); }} className={cn("-me-1 animate-enter-scale", classNames?.clear)} > ) : shortcut && !focused && roomy ? ( {shortcut} ) : null; const frame = ( ) : ( ) } trailing={trailing} // nesting input (O1 §14.1): the shortcut keycap (22px) rounds concentric with the field — a pill in a pill field className="[--pui-nest-inset:calc((var(--_field-height)-1.375rem)/2)] [--pui-nest-radius:var(--pui-field-radius,var(--pui-radius-control))]" > {" "} { set(e.target.value); onChange?.(e); }} onKeyDown={(e) => { // Escape clears; on an empty field it lets go of the field if (e.key === "Escape" && text) { e.preventDefault(); set(""); } else if (e.key === "Escape") e.currentTarget.blur(); onKeyDown?.(e); }} onFocus={(e) => { setFocused(true); onFocus?.(e); }} onBlur={(e) => { setFocused(false); onBlur?.(e); }} {...props} /> ); const active = beam === "focus" ? focused : !!beam; return ( {/* the wrapper stays while a beam is wanted at all, even off: swapping it in and out would remount the input and drop focus */} {beam !== undefined ? ( {frame} ) : ( frame )} ); } export default SearchField; a8:T1812,@layer properties, theme, base, components, utilities; @layer components { /* Segmented control: a well (the inset role of the look in force) with one raised thumb (the control role) that slides to the chosen segment. The segments themselves are transparent text buttons on top. */ .root { --pui-segment-height: 32px; --pui-segment-pad: 12px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--pui-space-0-5); /* the well's inset is size, not spacing: a control keeps its height when the Spacing parameter changes (O1 §14.2) */ padding: var(--pui-size-0-5, 0.125rem); border-radius: var(--pui-radius-control); /* never wider than its room: what does not fit folds (segmented-control.tsx tries full, compact, icons, scroll) */ max-width: 100%; min-width: 0; } .fill { display: flex; width: 100%; } /* As a form field the well carries the field's 1px ring (3:1 in every look), so an unanswered choice reads as a control beside the inputs, and turns red with the field's error like they do. */ .root[data-field] { box-shadow: inset 0 0 0 1px var(--m-field-ring), var(--m-inset-edge, 0 0 transparent); } .root[data-field][aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--pui-red), var(--m-inset-edge, 0 0 transparent); } .sm { --pui-segment-height: 28px; --pui-segment-pad: 10px; } /* placed and moved by the contour engine (ui/lib/contour.ts), which sets its box and, while it travels, its outline */ .thumb { position: absolute; z-index: -1; top: 0; left: 0; border-radius: calc(var(--pui-radius-control) - 2px); } .segment { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--pui-space-1-5); height: var(--pui-segment-height); padding-inline: var(--pui-segment-pad); border-radius: calc(var(--pui-radius-control) - 2px); color: var(--pui-ink-3); font-size: var(--pui-text-sm); font-weight: var(--pui-weight-medium); white-space: nowrap; transition: color var(--pui-motion-out) var(--pui-ease-default), scale var(--pui-motion-out) var(--pui-ease-default); } .sm .segment { font-size: var(--pui-text-xs); } .fill .segment { flex: 1; } /* compact: tighter segments, and accessories (a "New" badge) fold first */ .root[data-fold="compact"], .root[data-fold="words"], .root[data-fold="icons"], .root[data-fold="scroll"] { --pui-segment-pad: var(--pui-space-2); } .sm[data-fold="compact"], .sm[data-fold="words"], .sm[data-fold="icons"], .sm[data-fold="scroll"] { --pui-segment-pad: var(--pui-space-1-5); } .root:is([data-fold="compact"], [data-fold="words"], [data-fold="icons"], [data-fold="scroll"]) .accessory { display: none; } /* words: the icons give way before the words, which carry the meaning (an icon is the segment's one unnamed part) */ .root[data-fold="words"] .segment > :not([data-slot]) { display: none; } /* icons: each segment a square; its words stay as its name for assistive tech and its tooltip */ .root[data-fold="icons"] .segment { width: var(--pui-segment-height); padding-inline: 0; } .root[data-fold="icons"] .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* scroll: the row scrolls under soft edges (no bar), and the choice is kept in view; only an edge with more past it fades (data-edge, kept by segmented-control.tsx), so the row says which way the rest lies */ .root[data-fold="scroll"] { --_fade-start: 0px; --_fade-end: 0px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; /* organism-allow: paint-recipe-copy -- a state selector cannot compose */ mask-image: linear-gradient( to right, transparent, currentColor var(--_fade-start), currentColor calc(100% - var(--_fade-end)), transparent ); } .root[data-fold="scroll"][data-edge~="start"] { --_fade-start: var(--pui-space-6); } .root[data-fold="scroll"][data-edge~="end"] { --_fade-end: var(--pui-space-6); } .root[data-fold="scroll"]:dir(rtl) { --_fade-start: 0px; --_fade-end: 0px; } .root[data-fold="scroll"]:dir(rtl)[data-edge~="start"] { --_fade-end: var(--pui-space-6); } .root[data-fold="scroll"]:dir(rtl)[data-edge~="end"] { --_fade-start: var(--pui-space-6); } .root[data-fold="scroll"]::-webkit-scrollbar { display: none; } /* select (a form field at its narrowest): the select below takes over; the segments stay laid out but unseen and take no room (no height, and their gap given back), so a wider room can be measured and bring them back */ .root[data-fold="select"] { height: 0; min-height: 0; margin-block-start: calc(var(--pui-field-gap, 0px) * -1); padding-block: 0; overflow: hidden; visibility: hidden; box-shadow: none; } .label, .accessory { display: inline-flex; align-items: center; } .segment:hover:not(:disabled), .segment[aria-checked="true"] { color: var(--pui-ink); transition-duration: 0ms; } /* a press is acknowledged at once on the words; the choice (and the thumb) follows on release */ .segment:active:not(:disabled) { scale: var(--pui-press-scale); transition-duration: 0ms; } .segment:disabled { opacity: var(--pui-opacity-disabled); pointer-events: none; } /* the whole group off: the well and its thumb dim once, as one control, with the choice still readable */ .root[data-disabled] { opacity: var(--pui-opacity-disabled); } .root[data-disabled] .segment:disabled { opacity: 1; } .segment :where(svg) { width: var(--pui-icon-md); height: var(--pui-icon-md); flex-shrink: 0; } } /* CSS-module composition only; visual rules stay in the component layer. */ .root { composes: m-inset from global; } .thumb { composes: m-control from global; } a9:T40b9,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useDeprecatedProp } from "../../hooks/use-deprecated-prop"; import { useComponentDefaults } from "../../runtime/appearance"; import type { SegmentedControlDefaults } from "./defaults"; export type { SegmentedControlDefaults } from "./defaults"; import { Fragment, useLayoutEffect, useRef, useState, type CSSProperties, type Ref, type KeyboardEvent, type ReactNode, } from "react"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useIndicator } from "../../hooks/use-indicator"; import { useContour } from "../../hooks/use-contour"; import { cn } from "../../lib/utils"; import { useControllable } from "../../hooks/use-controllable"; import { ChoiceField, choiceIsField, type ChoiceFieldAria } from "../_shared/field"; import { Select } from "../select/select"; import { TextMorph } from "../text-morph/text-morph"; import { Tooltip } from "../tooltip/tooltip"; import styles from "./segmented-control.module.css"; export interface Segment { /** Value represented by this item. Required. */ value: string; /** Text displayed for this item. Required. */ label: string; /** Icon element displayed with this item. Omitted by default. */ icon?: ReactNode; /** Content after the label, such as a badge. */ accessory?: ReactNode; /** A short note beside the label in a tinted chip, such as a saving ("−20%"); it folds with the accessories in a * narrow room. */ note?: string; /** The note while this segment is chosen ("Saving 20%"): the letters it shares with `note` stay and the rest arrive, * so the choice reads as what it gains (a billing period: Monthly · Yearly −20%). */ activeNote?: string; /** Whether this option is unavailable for selection. Omitted by default. */ disabled?: boolean; } export type SegmentedControlClassNames = Partial< Record<"root" | "thumb" | "segment" | "note" | "field" | "label" | "description" | "error", string> >; /** How the segments meet a room narrower than they are: full, compact (tighter, accessories folded), words (the icons * give way, the words carry the meaning), icons only (when every segment has one), then, as a form field, a select listing every choice (a view switch in a toolbar scrolls * instead, keeping the choice in view). The thumb travels in every fold but the select. */ type Fold = "full" | "compact" | "words" | "icons" | "scroll" | "select"; const segmentFor = (root: HTMLElement | null, value: string) => [...(root?.querySelectorAll("[data-slot=segmented-item]") ?? [])].find( (item) => item.getAttribute("data-value") === value, ); export interface SegmentedControlProps { /** Available choices with their labels and values. Required. */ options: Segment[]; /** Controlled value of the chosen segment; omit to use defaultValue. */ value?: string; /** Initial value of the chosen segment when uncontrolled. Defaults to the first option value. */ defaultValue?: string; /** Reports value of the chosen segment after an edit; no callback by default. */ onValueChange?: (value: string) => void; /** The group's name or question ("Range", "View", "Gender"), shown above it like every field's label; `hideLabel` keeps it for * assistive tech only (a view switch). */ label: string; /** Lay it out as a form field (label above, description or error below). On unless the label is hidden and there is * no description, error or required mark. */ field?: boolean; /** Shows the label visually while keeping its accessible name; defaults to true. Takes precedence over hideLabel. */ showLabel?: boolean; /** Hides the label; defaults to false. @deprecated Use showLabel={false} instead. */ hideLabel?: boolean; /** One line of help under the segments (makes it a field). */ description?: ReactNode; /** The problem and its fix, e.g. a required choice not made (makes it a field and marks the group invalid). */ error?: ReactNode; /** Marks the field's label as required (makes it a field). */ required?: boolean; /** Submitted with a native form as name=value. */ name?: string; /** Prevents interaction with every segment; the choice stays shown. Defaults to false. */ disabled?: boolean; /** Runs when a segment is pointed at or focused, before it is chosen: prefetch its data. */ onOptionIntent?: (value: string) => void; /** Control size within the supported size steps. Defaults to "md". */ size?: "sm" | "md"; /** Stretch to the container and share the width equally. */ fill?: boolean; /** Show each segment's icon alone, as a square; its label stays the accessible name and the tooltip. */ iconOnly?: boolean; /** Classes on the documented visual root; no override by default. */ className?: string; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Reading direction; inherits the surrounding direction when omitted. Defaults to the surrounding reading direction. */ dir?: "ltr" | "rtl"; /** Receives the documented root element; no ref by default. */ ref?: Ref; /** Classes for the named visual parts; no part overrides by default. */ classNames?: SegmentedControlClassNames; } /** * Two to five views or ranges of the same content: 1D / 1W / 1M, List / Board. One raised thumb slides to the chosen * segment as matter (ui/lib/contour.ts, shaped by the look): it leads, rounds its front and gathers, never bouncing. It is * a radio group: Tab enters at the chosen one, arrows move and choose; the choice is made at once, only the thumb settles. */ export function SegmentedControl({ options, value: valueProp, defaultValue, onValueChange, label, field, hideLabel: hideLabelProp, showLabel, description, error, required, name, disabled = false, onOptionIntent, size: sizeProp, fill = false, iconOnly = false, className, style, dir, ref, classNames, }: SegmentedControlProps) { const i18n = useMessages("segmented-control", englishMessages); useDeprecatedProp("SegmentedControl", "hideLabel", "showLabel={false}", hideLabelProp !== undefined); const hideLabel = showLabel === undefined ? hideLabelProp : !showLabel; const scopeDefaults = useComponentDefaults("segmented-control", ["size"]); const size = sizeProp ?? scopeDefaults.size ?? "md"; const [value, choose] = useControllable(valueProp, defaultValue ?? options[0]?.value, onValueChange); const [root, thumb] = useIndicator("[role=radio][aria-checked=true]", `${value}:${options.length}`); const thumbRef = useContour(thumb); const rootRef = useComposedRef(root, ref); // the room decides how much of each segment shows: every fold is tried in order on the control itself (an attribute, // read before paint) and the first that fits is kept; a change of the room tries again from full, so it comes back const [fold, setFold] = useState(iconOnly ? "icons" : "full"); const refocus = useRef(undefined); const withTips = useRef(false); useLayoutEffect(() => { withTips.current = fold === "icons"; const el = root.current; if (!el) return; const v = refocus.current; refocus.current = undefined; if (v !== undefined) segmentFor(el, v)?.focus({ preventScroll: true }); }, [fold, root]); const asField = choiceIsField(field, label, hideLabel, description != null || error != null || !!required); const allIcons = options.length > 0 && options.every((o) => o.icon != null); const someIcons = options.some((o) => o.icon != null); const optionSet = options.map((o) => `${o.value}\u0000${o.label}`).join("\u0001"); useLayoutEffect(() => { const el = root.current; if (!el) return; const folds: Fold[] = iconOnly ? ["icons"] : allIcons ? ["full", "compact", "words", "icons"] : someIcons ? ["full", "compact", "words"] : ["full", "compact"]; const pick = () => { // the thumb still stands where the last fold put it: out of the measure, so only the segments decide const thumbEl = el.querySelector("[data-slot=segmented-thumb]"); if (thumbEl) thumbEl.style.display = "none"; let chosen: Fold = asField ? "select" : "scroll"; for (const f of folds) { el.dataset.fold = f; if (el.scrollWidth <= el.clientWidth + 1) { chosen = f; break; } } el.dataset.fold = chosen; if (thumbEl) thumbEl.style.display = ""; // into or out of the icon fold the segments are mounted again (only there do they carry a tooltip): the one // holding focus is noted, to be focused again where it now stands const held = el.contains(document.activeElement) ? (document.activeElement as HTMLElement).dataset.value : undefined; if (held !== undefined && (chosen === "icons") !== withTips.current) refocus.current = held; setFold((f) => (f === chosen ? f : chosen)); }; // a scrolling row fades only the edges that have more past them, so the row says which way it goes on const edges = () => { const start = Math.abs(el.scrollLeft) > 1; const end = Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - 1; const v = el.dataset.fold === "scroll" ? [start && "start", end && "end"].filter(Boolean).join(" ") : ""; if ((el.dataset.edge ?? "") !== v) el.dataset.edge = v; }; const pickAndEdge = () => { pick(); edges(); }; pickAndEdge(); el.addEventListener("scroll", edges, { passive: true }); if (typeof ResizeObserver === "undefined") return () => el.removeEventListener("scroll", edges); // the room is the parent's; a pass waits for the next frame so its own change of width never loops back let frame = 0; const observer = new ResizeObserver(() => { cancelAnimationFrame(frame); frame = requestAnimationFrame(pickAndEdge); }); if (el.parentElement) observer.observe(el.parentElement); return () => { observer.disconnect(); cancelAnimationFrame(frame); el.removeEventListener("scroll", edges); }; }, [root, optionSet, iconOnly, allIcons, someIcons, size, fill, asField]); // folded into a scrolling row, the choice is kept in view useLayoutEffect(() => { const el = root.current; if (fold !== "scroll" || !el) return; const on = el.querySelector("[role=radio][aria-checked=true]"); if (!on) return; // by how far its centre is from the row's centre, which reads the same in a right-to-left row const a = on.getBoundingClientRect(); const b = el.getBoundingClientRect(); el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: "instant" as ScrollBehavior }); }, [fold, value, root]); const enabled = disabled ? [] : options.filter((o) => !o.disabled); const onKey = (e: KeyboardEvent) => { const rtl = getComputedStyle(e.currentTarget).direction === "rtl"; const dir = { ArrowRight: rtl ? -1 : 1, ArrowDown: 1, ArrowLeft: rtl ? 1 : -1, ArrowUp: -1 }[e.key]; let next: Segment | undefined; if (dir) { const i = enabled.findIndex((o) => o.value === value); next = enabled[(i + dir + enabled.length) % enabled.length]; } else if (e.key === "Home") next = enabled[0]; else if (e.key === "End") next = enabled.at(-1); if (!next) return; e.preventDefault(); choose(next.value); segmentFor(root.current, next.value)?.focus(); }; const chosenAny = options.some((o) => o.value === value); const control = (aria?: ChoiceFieldAria) => (

{name && } {thumb && ( )} {options.map((o) => { const on = o.value === value; const segment = ( ); // folded to icons, a segment names itself in the system tooltip; in every other fold it carries none, since a // closed tooltip on each segment re-rendered with the control (on the landing: 689 renders more at load) return fold === "icons" ? ( {segment} ) : ( {segment} ); })}

); if (!asField) return control(); // the select comes first, so in a split form it takes the control's place beside the label; the measured segments // keep their position among the children (and their state) in every fold const narrowest = (aria: ChoiceFieldAria) => ( <> {fold === "select" && ( { setDraft(e.target.value); setMarked(false); if (note) setNote(undefined); }} onKeyDown={onKey} onPaste={onPaste} onFocus={() => setFocused(true)} onBlur={() => { setFocused(false); setMarked(false); if (draft.trim()) add([draft]); }} // the typing area is one chip tall, so chips and text share one centred row and the frame keeps the field height className={cn(fieldControlClass, styles.input, classNames?.input)} /> {i18n("count", { count: tags.length })} {hidden > 0 ? i18n("foldedUntilTheFieldHasFocus", { hidden: hidden }) : ""} {marked ? i18n("backspaceAgainRemoves", { value: tags.at(-1) ?? "" }) : ""} ); } export default TagInput; b7:T10de,"use client"; import { useMemo, useRef, type CSSProperties, type Ref } from "react"; import { AnimatePresence, LayoutGroup, motion } from "motion/react"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { useReducedMotionSafe } from "../../hooks/use-reduced-motion-safe"; import { useWidthMorph } from "../../hooks/use-width-morph"; import { cn } from "../../lib/utils"; export interface TextMorphClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the letter part; no override by default. */ letter?: string; } export interface TextMorphProps { /** A short label; when it changes, letters it shares with the old one slide into place and the rest fade. */ children: string; /** HTML element used for the text or container. Defaults to "span". */ as?: "span" | "div" | "p" | "strong" | "h1" | "h2" | "h3"; /** Classes on the documented visual root; no override by default. */ className?: string; /** DOM id on the animated text root; omitted by default. */ id?: string; /** Classes for the named visual parts; no part overrides by default. */ classNames?: TextMorphClassNames; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Receives the documented root element; no ref by default. */ ref?: Ref; } /** A short label that becomes its next state letter by letter: shared letters glide, new ones arrive, old ones leave, * and the label's width eases with them, so whatever sits after it (a button, a counter) glides instead of jumping. * Reduced motion swaps the text. Assistive tech reads the label once, not the letters. */ export function TextMorph({ children, as = "span", className, classNames, style, ref, id }: TextMorphProps) { const host = useRef(null); const attach = useComposedRef(host, ref); const motionTokens = useMotionTokens(host); const managedReduced = useReducedMotionSafe(); const reduced = motionTokens.reduced || managedReduced; const Tag = motion[as]; useWidthMorph(host, reduced ? null : children); // key each letter by its character and how many times it has appeared so far, so repeats map in order const letters = useMemo(() => { const seen: Record = {}; return [...children].map((ch) => { seen[ch] = (seen[ch] ?? 0) + 1; return { ch, key: `${ch}-${seen[ch]}` }; }); }, [children]); // a script written right to left is joined letter to letter and can't be split into glyphs: it swaps whole, like // reduced motion; everything else keeps its own left-to-right letter order even on a right-to-left page const rtlScript = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/.test(children); if (reduced || rtlScript) return ( {children} ); return ( {letters.map(({ ch, key }) => ( {ch === " " ? " " : ch} ))} ); } export default TextMorph; b8:T13a1,@layer properties, theme, base, components, utilities; @layer components { /* The toast stack. Collapsed, the newest card sits at the edge and up to two older ones peek behind it as clipped edges; pointing at or focusing the stack fans every card out at its own height. Cards arrive from the edge on --pui-ease-drawer and leave by fading over --pui-motion-out; reduced motion makes both instant. */ .stack { z-index: var(--pui-z-toast); width: min(360px, calc(100% - 2 * var(--pui-space-4))); outline: none; } .stack[data-reduced] :is(.list, .toast, .body, .close) { transition: none; } .fixed { position: fixed; } .contained { position: absolute; } .stack[data-position="bottom-right"] { right: var(--pui-space-4); bottom: var(--pui-space-4); } .stack[data-position="bottom-left"] { left: var(--pui-space-4); bottom: var(--pui-space-4); } .stack[data-position="bottom-center"] { left: 50%; bottom: var(--pui-space-4); translate: -50% 0; } .stack[data-position="top-right"] { right: var(--pui-space-4); top: var(--pui-space-4); } .stack[data-position="top-left"] { left: var(--pui-space-4); top: var(--pui-space-4); } .stack[data-position="top-center"] { left: 50%; top: var(--pui-space-4); translate: -50% 0; } .list { position: relative; margin: 0; padding: 0; list-style: none; transition: height var(--pui-duration-considered) var(--pui-ease-drawer); } .toast { position: absolute; inset-inline: 0; bottom: 0; transform-origin: 50% 0; transition: transform var(--pui-duration-considered) var(--pui-ease-drawer), opacity var(--pui-duration-standard) var(--pui-ease-default), height var(--pui-duration-considered) var(--pui-ease-drawer); touch-action: pan-y; outline: none; } .stack[data-position^="top"] .toast { bottom: auto; top: 0; transform-origin: 50% 100%; } .toast[data-leaving] { opacity: 0; transition-duration: var(--pui-motion-out); pointer-events: none; } .toast[data-hidden] { opacity: 0; pointer-events: none; } .toast[data-dragging] { transition: none; } .card { /* the card answers to its own width: narrow, the action moves under the text */ container-type: inline-size; position: relative; overflow: hidden; height: 100%; border-radius: var(--pui-radius-card); color: var(--pui-ink); } .toast:focus-visible .card { outline: var(--pui-focus-width) var(--pui-focus-style) var(--pui-focus-ring); outline-offset: 2px; } .body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--pui-space-2-5); padding: var(--pui-space-3); transition: opacity var(--pui-duration-standard) var(--pui-ease-default); } .toast[data-behind] .body { opacity: 0; } /* the type's mark; an update (loading → success) brings the new one in from the middle */ .icon { display: grid; place-items: center; width: var(--pui-size-4-5); height: 1lh; font-size: var(--pui-text-sm); line-height: var(--pui-leading-body); animation: mark-in var(--pui-motion-in) var(--pui-ease-out-strong); } .icon :where(svg) { width: var(--pui-icon-md); height: var(--pui-icon-md); } .action { margin-block: calc(-1 * var(--pui-space-0-5)); } /* new words after an update fade in where the old ones stood */ .content { min-width: 0; animation: words-in var(--pui-fade-in) var(--pui-ease-default); } @container (width < 18rem) { .body { grid-template-columns: auto minmax(0, 1fr); } .action { grid-column: 2; justify-self: start; margin-block: 0; } } .title { font-size: var(--pui-text-sm); font-weight: var(--pui-weight-medium); line-height: var(--pui-leading-body); } .description { margin-top: var(--pui-space-px); color: var(--pui-ink-2); font-size: var(--pui-text-xs); line-height: 1.45; } /* dismiss: a small round button on the card's leading top corner, a shared reveal: shown while the card is pointed at or focused, always on touch and under data-reveal="always" */ .close { position: absolute; top: calc(-1 * var(--pui-space-1-5)); inset-inline-start: calc(-1 * var(--pui-space-1-5)); z-index: 1; display: grid; place-items: center; width: var(--pui-size-5); height: var(--pui-size-5); border-radius: 50%; color: var(--pui-ink-3); } .close:hover { color: var(--pui-ink); } .toast[data-behind] .close { display: none; } } @keyframes mark-in { from { opacity: 0; scale: calc(1 - 0.4 * var(--pui-motion-travel, 1)); } } @keyframes words-in { from { opacity: 0; } } /* CSS-module composition only; visual rules stay in the component layer. */ .card { composes: m-overlay from global; } .close { composes: m-control from global; } b9:T3f60,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type Ref, type ReactNode, } from "react"; import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react"; import { Button } from "../button/button"; import { Spinner } from "../spinner/spinner"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useDrag } from "../../hooks/use-drag"; import { useReducedMotionSafe } from "../../hooks/use-reduced-motion-safe"; import { useAppearanceRoot } from "../../runtime/appearance"; import { resolveCssTime } from "../../lib/css-values"; import { focusAfterRemoval } from "../../lib/focus"; import { cn } from "../../lib/utils"; import { localId } from "../../lib/id"; import styles from "./toast.module.css"; export type ToastType = "success" | "error" | "warning" | "info" | "loading"; export type ToastPosition = "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center"; export interface ToastInput { /** Reuse an id to replace a toast instead of adding one. */ id?: string; type?: ToastType; title: ReactNode; description?: ReactNode; /** One follow-up, e.g. Undo or Retry. Running it dismisses the toast. */ action?: { label: string; onClick: () => void }; /** ms on screen; Infinity keeps it until dismissed. Defaults: 4 s, warnings 6 s, errors 8 s, loading until updated. */ duration?: number; } interface ToastRecord extends ToastInput { id: string; type: ToastType; version: number; leaving?: boolean; } const DURATION: Record = { success: 4000, info: 4000, warning: 6000, error: 8000, loading: Infinity, }; const EXIT_MS = 200; const PEEK = 10; const GAP = 8; interface ToastApi { toasts: ToastRecord[]; /** Shows a toast and returns its id. */ toast: (input: ToastInput) => string; /** Changes a toast in place (loading → success); its timer restarts. */ update: (id: string, patch: Partial) => void; /** Dismisses one toast, or all when no id is given. */ dismiss: (id?: string) => void; } type ToastContext = ToastApi & { registerCard: (id: string, node: HTMLLIElement | null) => void }; const Ctx = createContext(null); /** Holds the toasts for everything inside it; put one ToastStack inside to show them. */ export function ToastStackProvider({ children, max = 20 }: { children: ReactNode; max?: number }) { const [toasts, setToasts] = useState([]); const cards = useRef(new Map()); const timers = useRef(new Set>()); const scope = useAppearanceRoot(); const reduced = useReducedMotionSafe(); const registerCard = useCallback((id: string, node: HTMLLIElement | null) => { if (node) cards.current.set(id, node); else cards.current.delete(id); }, []); useEffect( () => () => { for (const timer of timers.current) clearTimeout(timer); timers.current.clear(); }, [], ); const toast = useCallback( (input: ToastInput) => { const id = input.id ?? localId("toast"); setToasts((list) => [...list.filter((t) => t.id !== id), { type: "info" as ToastType, ...input, id, version: 0 }].slice(-max), ); return id; }, [max], ); const update = useCallback( (id: string, patch: Partial) => setToasts((list) => list.map((t) => (t.id === id ? { ...t, ...patch, version: t.version + 1 } : t))), [], ); const dismiss = useCallback( (id?: string) => { const nodes = id ? [cards.current.get(id)].filter((node): node is HTMLLIElement => !!node) : [...cards.current.values()]; const delay = nodes.length ? Math.max( ...nodes.map((node) => node.closest("[data-slot=toast-stack]")?.hasAttribute("data-reduced") ? 0 : resolveCssTime(node, "--pui-motion-out", EXIT_MS / 1000) * 1000, ), ) : reduced ? 0 : scope ? resolveCssTime(scope, "--pui-motion-out", EXIT_MS / 1000) * 1000 : EXIT_MS; for (const node of nodes) { const stack = node.closest("[data-slot=toast-stack]"); focusAfterRemoval(node, { scope: stack, fallback: stack }); } setToasts((list) => list.map((t) => (!id || t.id === id ? { ...t, leaving: true } : t))); const timer = setTimeout(() => { timers.current.delete(timer); setToasts((list) => list.filter((t) => !(t.leaving && (!id || t.id === id)))); }, delay); timers.current.add(timer); }, [scope, reduced], ); const api = useMemo( () => ({ toasts, toast, update, dismiss, registerCard }), [toasts, toast, update, dismiss, registerCard], ); return {children}; } /** toast(), update() and dismiss() for the nearest ToastStackProvider. */ export function useToastStack(): ToastApi { const api = useContext(Ctx); if (!api) throw new Error("useToastStack needs a above it."); return api; } export type ToastStackClassNames = Partial< Record< "root" | "list" | "toast" | "card" | "body" | "icon" | "content" | "title" | "description" | "action" | "close", string > >; export interface ToastStackProps { classNames?: ToastStackClassNames; ref?: Ref; style?: CSSProperties; /** The region's name for assistive tech. */ label?: string; position?: ToastPosition; /** Position inside the nearest positioned parent instead of the viewport (a panel, a demo). */ contained?: boolean; /** Cards visible while collapsed: the newest and the ones peeking behind it. */ visibleToasts?: number; /** Alt+T moves focus to the newest toast. */ hotkey?: boolean; className?: string; } /** * Short results of an action (saved, sent, failed with retry, undo), stacked at an edge. Pointing at or focusing the * stack fans the cards out and pauses their timers; Escape dismisses the focused one; a card can be swiped away. */ export function ToastStack({ label: labelProp, position = "bottom-right", contained = false, visibleToasts = 3, hotkey = true, className, classNames, ref, style, }: ToastStackProps) { const i18n = useMessages("toast", englishMessages); const label = labelProp === undefined ? i18n("label") : labelProp; const { toasts, dismiss } = useToastStack(); const { registerCard } = useContext(Ctx)!; const reduced = useReducedMotionSafe(); const [expanded, setExpanded] = useState(false); const [heights, setHeights] = useState>({}); const [docHidden, setDocHidden] = useState(false); const region = useRef(null); const regionRef = useComposedRef(region, ref); const top = position.startsWith("top"); useEffect(() => { const on = () => setDocHidden(document.hidden); document.addEventListener("visibilitychange", on); return () => document.removeEventListener("visibilitychange", on); }, []); useEffect(() => { if (!hotkey) return; const on = (e: KeyboardEvent) => { if (e.altKey && e.code === "KeyT") { e.preventDefault(); region.current?.querySelector("[data-slot=toast]:not([data-leaving])")?.focus(); } }; window.addEventListener("keydown", on); return () => window.removeEventListener("keydown", on); }, [hotkey]); const live = toasts.filter((t) => !t.leaving).reverse(); // newest first useEffect(() => { if (!live.length) setExpanded(false); }, [live.length]); const onHeight = useCallback((id: string, h: number) => setHeights((m) => (m[id] === h ? m : { ...m, [id]: h })), []); const frontHeight = heights[live[0]?.id] ?? 0; const offsets: Record = {}; let sum = 0; for (const t of live) { offsets[t.id] = sum; sum += (heights[t.id] ?? 0) + GAP; } const listHeight = !live.length ? 0 : expanded ? sum - GAP : frontHeight + (Math.min(live.length, visibleToasts) - 1) * PEEK; return (

{ if (e.pointerType === "mouse") setExpanded(true); }} onPointerLeave={() => setExpanded(false)} onFocus={() => setExpanded(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setExpanded(false); }} >

0 ? frontHeight : undefined} behind={!expanded && index > 0} hidden={index >= visibleToasts && !expanded} paused={expanded || docHidden} onHeight={onHeight} onDismiss={dismiss} /> ); })}

); } const ICON: Record = { success: , error: , warning: , info: , loading: , }; function ToastCard({ classNames, registerCard, reduced, toast: t, index, top, y, scale, height, behind, hidden, paused, onHeight, onDismiss, }: { classNames?: ToastStackClassNames; registerCard: ToastContext["registerCard"]; reduced: boolean; toast: ToastRecord; index: number; top: boolean; y: number; scale: number; height?: number; behind: boolean; hidden: boolean; paused: boolean; onHeight: (id: string, h: number) => void; onDismiss: (id: string) => void; }) { const i18n = useMessages("toast", englishMessages); const registered = useCallback((node: HTMLLIElement | null) => registerCard(t.id, node), [t.id, registerCard]); const card = useRef(null); const cardRef = useComposedRef(card, registered); const body = useRef(null); const [entered, setEntered] = useState(false); const [drag, setDrag] = useState(null); // a card swiped away keeps going the way it was thrown while it fades, instead of springing back to its slot const [flung, setFlung] = useState(0); const remaining = useRef(null); const version = useRef(t.version); useLayoutEffect(() => { const el = body.current; if (!el) return; const measure = () => onHeight(t.id, el.offsetHeight); measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, [t.id, onHeight]); useEffect(() => { const raf = requestAnimationFrame(() => setEntered(true)); return () => cancelAnimationFrame(raf); }, []); // the timer runs only while the stack is collapsed and the page visible; an update restarts it useEffect(() => { if (version.current !== t.version) { version.current = t.version; remaining.current = null; } const total = t.duration ?? DURATION[t.type]; if (!Number.isFinite(total) || t.leaving || paused) return; remaining.current ??= total; const began = Date.now(); const timer = setTimeout(() => onDismiss(t.id), remaining.current); return () => { clearTimeout(timer); if (remaining.current !== null) remaining.current = Math.max(0, remaining.current - (Date.now() - began)); }; }, [paused, t.version, t.leaving, t.type, t.duration, t.id, onDismiss]); // swiped sideways through the shared drag (BUILDING §7): past 64 px or thrown, it carries on and leaves; Escape mid- // swipe puts it back (and does not dismiss it); a finger that starts vertically scrolls the page useDrag( card, { onPress: (_, e) => ((e.target as HTMLElement).closest("button, a") ? false : undefined), onStart: (p) => setDrag(p.dx), onMove: (p) => setDrag(p.dx), onEnd: (p) => { const thrown = Math.abs(p.vx) > 800 && Math.sign(p.vx) === Math.sign(p.dx) && Math.abs(p.dx) > 16; if (Math.abs(p.dx) > 64 || thrown) { setFlung(Math.sign(p.dx) * ((card.current?.offsetWidth ?? 0) + 32)); onDismiss(t.id); } setDrag(null); }, onCancel: () => setDrag(null), }, { axis: "x" }, ); const offscreen = top ? -110 : 110; // leaving on its own (timer, ×, Escape) it sinks a little as it fades; thrown, it carries on sideways const leave = t.leaving && !flung && !reduced ? 0.96 : 1; const transform = !entered && !reduced ? `translateY(${offscreen}%)` : `translate(${drag ?? flung}px, ${y}px) scale(${scale * leave})`; return (

{ if (e.key === "Escape") { e.stopPropagation(); onDismiss(t.id); } }} >

{ICON[t.type]}

{t.title}

{t.description && (

{t.description}

)}

{t.action && ( )}

{/* organism-allow: raw-control -- a round badge that overhangs the toast's corner */}

); } export default ToastStack; ba:T819,@layer properties, theme, base, components, utilities; @layer components { /* A tooltip arrives from its control: it starts a step toward the control on the side it opens on and moves away into place as it fades in (--pui-motion-in), so on any side it reads as coming out of what it explains. Inside a group, the next one opens at once where the last one stood and travels to its own control (--pui-duration-fast), while the last one goes in the arrival time: one tooltip moving along the toolbar, not two blinking. It leaves over the departure fade. Reduced motion keeps the fades and drops the travel (--pui-motion-travel is 0). */ .tip { --_dx: 0px; --_dy: 0px; --_tx: 0px; --_ty: 0px; z-index: var(--pui-z-tooltip); transform-origin: var(--radix-tooltip-content-transform-origin); } .tip[data-side="top"] { --_dy: var(--pui-space-1); } .tip[data-side="bottom"] { --_dy: calc(-1 * var(--pui-space-1)); } .tip[data-side="left"] { --_dx: var(--pui-space-1); } .tip[data-side="right"] { --_dx: calc(-1 * var(--pui-space-1)); } .tip[data-state="delayed-open"] { animation: tip-in var(--pui-motion-in) var(--pui-ease-default); } .tip[data-state="instant-open"] { animation: tip-fade var(--pui-fade-in) var(--pui-ease-default); } .tip[data-state="instant-open"][data-travel] { animation: tip-travel var(--pui-duration-fast) var(--pui-ease-standard); } .tip[data-state="closed"] { animation: tip-out var(--pui-fade-out) var(--pui-ease-default) forwards; } .tip[data-grouped][data-state="closed"] { animation-duration: var(--pui-fade-in); } } @keyframes tip-in { from { opacity: 0; translate: calc(var(--_dx) * var(--pui-motion-travel, 1)) calc(var(--_dy) * var(--pui-motion-travel, 1)); } } @keyframes tip-fade { from { opacity: 0; } } @keyframes tip-travel { from { translate: calc(var(--_tx) * var(--pui-motion-travel, 1)) calc(var(--_ty) * var(--pui-motion-travel, 1)); } } @keyframes tip-out { to { opacity: 0; } } bb:T18d5,"use client"; import { useComponentDefaults } from "../../runtime/appearance"; import type { TooltipDefaults } from "./defaults"; export type { TooltipDefaults } from "./defaults"; import { createContext, useContext, useRef, useState, type CSSProperties, type Ref, type ReactElement, type ReactNode, type RefObject, } from "react"; import * as RadixTooltip from "@radix-ui/react-tooltip"; import { usePortalContainer } from "../../runtime/appearance"; import { cn } from "../../lib/utils"; import styles from "./tooltip.module.css"; /** How long after one tooltip of a group closes the next opens at once (and travels from where the last one was). */ const SKIP = 400; /** The last control of a group whose tooltip showed: its centre and when its tooltip opened or closed. */ type Last = { el: Element; x: number; y: number; at: number }; const Grouped = createContext | null>(null); /** Tooltips inside a group open instantly one after another (a toolbar): only the first waits, and each next one * travels from where the last one stood. */ export function TooltipGroup({ children, delay = 500, }: { /** Content rendered inside the component. Required. */ children: ReactNode; /** Milliseconds before the first tooltip in the group opens. Defaults to 500. */ delay?: number; }) { const last = useRef(null); return ( {children} ); } export interface TooltipClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the trigger part; no override by default. */ trigger?: string; /** Classes for the shortcut part; no override by default. */ shortcut?: string; } export interface TooltipProps { /** What the control does; a few words. */ content: ReactNode; /** A keyboard shortcut shown after the text, e.g. "⌘B". */ shortcut?: string; /** The control: one element that can take a ref (a button). */ children: ReactElement; /** Edge from which the panel or anchored content opens. Defaults to "top". */ side?: "top" | "right" | "bottom" | "left"; /** Alignment within the available space. Defaults to "center". */ align?: "start" | "center" | "end"; /** Open state, controlled or uncontrolled; the tooltip opens on hover and on keyboard focus either way. */ open?: boolean; /** Initial open state when uncontrolled. Defaults to false. */ defaultOpen?: boolean; /** Reports open state after a change; no callback by default. */ onOpenChange?: (open: boolean) => void; /** Classes on the documented visual root; no override by default. */ className?: string; /** Classes for the named visual parts; no part overrides by default. */ classNames?: TooltipClassNames; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Receives the documented root element; no ref by default. */ ref?: Ref; } /** * Short supporting text for a control: it opens on hover after a moment and at once on keyboard focus, and closes on * Escape. It arrives out of its control on whichever side it opens. Inside a TooltipGroup the next one opens instantly * and travels from where the last one stood. Never put essential information or anything clickable in a tooltip. */ export function Tooltip({ content, shortcut, children, side = "top", align: alignProp, open, defaultOpen, onOpenChange, className, classNames, style, ref, }: TooltipProps) { const scopeDefaults = useComponentDefaults("tooltip", ["align"]); const align = alignProp ?? scopeDefaults.align ?? "center"; const group = useContext(Grouped); const container = usePortalContainer(); const trigger = useRef(null); // the control, whatever element it is (Radix types it as a button) // in a group, how far this tooltip is from the last one, so it can start there and travel to its own control const [travel, setTravel] = useState<{ x: number; y: number } | null>(null); const change = (next: boolean) => { const el = trigger.current; if (group && el) { const r = el.getBoundingClientRect(); const x = r.left + r.width / 2; const y = r.top + r.height / 2; const last = group.current; if (next) { const near = last && last.el !== el && performance.now() - last.at < SKIP; setTravel(near ? { x: last.x - x, y: last.y - y } : null); group.current = { el, x, y, at: Infinity }; } else if (last?.el === el) last.at = performance.now(); } onOpenChange?.(next); }; const tip = ( {children} {container !== null && ( {content} {shortcut && ( {shortcut} )} )} ); return group ? tip : {tip}; } export default Tooltip; bc:T962,@layer properties, theme, base, components, utilities; @layer components { /* A size container (never collapsing when left content-sized): from 28rem the header adds the share of the allowance used, a narrower meter keeps the amounts. */ .root { container-type: inline-size; min-width: min(16rem, 100%); } .share { display: none; } @container (width >= 28rem) { .share { display: inline; } } /* The bar is the allowance: a well (inset role, like Progress) that the sources fill in order. Past the limit a second, shorter well holds the overflow in solid red, separated by a notch: the limit is a break in the bar, never a hatch (hatching means "not measured"). */ .bar { display: flex; gap: var(--pui-space-1); height: 8px; } .track { --m-inset-fill: var(--pui-control-track); position: relative; display: flex; gap: 1px; min-width: 0; overflow: hidden; border-radius: var(--pui-radius-pill); } /* A source's part of the bar, in its series colour. Pointing at it or at its legend entry keeps it and fades the others toward the card (never through transparency); the change arrives at once and eases back over --pui-motion-out. */ .segment { position: relative; height: 100%; background: var(--_c); transition: width var(--pui-duration-standard) var(--pui-ease-default), background-color var(--pui-motion-out) var(--pui-ease-default); } .segment[data-dim] { background: color-mix(in oklab, var(--_c) 30%, var(--pui-surface)); transition-duration: var(--pui-duration-standard), 0ms; } .item { transition: color var(--pui-motion-out) var(--pui-ease-default); } .item[data-focus] { color: var(--pui-ink); transition-duration: 0ms; } .item[data-dim] { color: var(--pui-ink-3); transition-duration: 0ms; } .over { width: 100%; background: var(--pui-red); } .swatch { flex: none; width: var(--pui-space-2); height: var(--pui-space-2); border-radius: calc(var(--pui-radius-chip) / 3); background: var(--_c); } .swatchFree { background: var(--pui-control-track); box-shadow: inset 0 0 0 1px var(--pui-line); } } /* CSS-module composition only; visual rules stay in the component layer. */ .track { composes: m-inset meter from global; } .swatchFree { composes: swatch; } bd:T23df,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useState, type CSSProperties, type Ref } from "react"; import { AlertCircle, AlertTriangle } from "lucide-react"; import { cn } from "../../lib/utils"; import { formatNumber } from "../../lib/number"; import { SlotText } from "../slot-text/slot-text"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { DeltaGhost, useDeltaGhost } from "../_shared/delta-ghost"; import styles from "./usage-meter.module.css"; export interface UsageMeterSegment { id: string; label: string; value: number; } export interface UsageMeterClassNames { root?: string; header?: string; label?: string; value?: string; bar?: string; track?: string; segment?: string; overflow?: string; over?: string; legend?: string; legendItem?: string; swatch?: string; amount?: string; remainder?: string; } export interface UsageMeterProps { /** What is metered: "Storage", "Seats". */ label: string; /** What fills the allowance, in order. */ segments: UsageMeterSegment[]; limit: number; /** After each number: "GB", "k". */ unit?: string; decimals?: number; /** Write the numbers with Intl options instead (`{ style: "currency", currency: "USD" }` gives "$7.50"); `unit`, if * given, still follows. Serializable, so a server component can pass it. */ formatOptions?: Intl.NumberFormatOptions; /** The locale the numbers are written in. Defaults to the enclosing UIRoot locale. */ locale?: string; /** Words for what is left. Default "left". */ freeLabel?: string; /** Words for going past the limit. Default "over". */ overLabel?: string; /** How the sources are told apart: series colours (default), or quiet ink steps, darkest first, for money and other * amounts where a series colour (red in Pop) would read as an alarm; the overflow keeps its tone either way. */ palette?: "series" | "quiet"; /** Share of the limit (0–1) where it turns to a warning. Default 0.9. */ warnAt?: number; className?: string; style?: CSSProperties; classNames?: UsageMeterClassNames; ref?: Ref; } /** An allowance and what fills it: one bar split by source, the remaining room, a warning near the limit and the * overflow in its own red well past a notch at the limit; a change to the total leaves its ghost for a moment. Colour is never the only signal: every number is written in the legend. */ /** The quiet palette: one ink, darkest first, each step still told apart from the next and from the empty well. */ const QUIET = [78, 52, 32, 20]; export function UsageMeter({ label, segments, limit, unit = "", decimals = 0, formatOptions, locale, freeLabel: freeLabelProp, overLabel: overLabelProp, warnAt = 0.9, palette = "series", className, style, classNames, ref, }: UsageMeterProps) { const i18n = useMessages("usage-meter", englishMessages); const freeLabel = freeLabelProp === undefined ? i18n("freeLabel") : freeLabelProp; const overLabel = overLabelProp === undefined ? i18n("overLabel") : overLabelProp; const total = segments.reduce((n, s) => n + s.value, 0); const over = total > limit; const fmt = (n: number) => `${formatNumber(n, { locale: locale ?? i18n.locale, formatOptions: formatOptions ?? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } })}${unit ? (unit.length > 2 ? ` ${unit}` : unit) : ""}`; const state = over ? "over" : total >= limit * warnAt ? "warn" : "ok"; // the allowance well shows each source up to the limit; whatever lies past it goes to the overflow well let room = limit; const shown = segments.map((s) => { const v = Math.max(0, Math.min(s.value, room)); room -= v; return v; }); // the total's last change stays a moment as a ghost (_shared/delta-ghost): freed room drains, new use arrives lit const [ghost, clearGhost] = useDeltaGhost(Math.min(total, limit) / limit); const swatch = (i: number) => ({ "--_c": palette === "quiet" ? `color-mix(in oklab, var(--pui-ink) ${QUIET[i % QUIET.length]}%, transparent)` : `var(--pui-series-${(i % 8) + 1})`, }) as CSSProperties; // one source in focus (its legend entry or its part of the bar pointed at): the others fade toward the card const [focus, setFocus] = useState(null); const tokens = useMotionTokens(); const lit = (id: string) => ({ "data-focus": focus === id ? "" : undefined, "data-dim": focus !== null && focus !== id ? "" : undefined, onPointerEnter: () => setFocus(id), onPointerLeave: () => setFocus((f) => (f === id ? null : f)), }); return (

{label} {state === "over" && } {state === "warn" && } {" "} {i18n("of", { value: fmt(limit) })} {" · "} {i18n.number(total / limit, { style: "percent", maximumFractionDigits: 0 })}

{segments.map((s, i) => ( ))} {over && ( )}

{s.label} {fmt(s.value)}
{over ? ( <> {fmt(total - limit)} {overLabel} ) : ( <> {fmt(limit - total)} {freeLabel} )}

); } export default UsageMeter; be:T6a5,"use client"; import { useContext, useEffect, useState, type RefObject } from "react"; import { ActivityContext } from "../runtime/activity"; /** * Whether an animated element should be doing work: it is (nearly) on screen and the tab is visible. Every * continuously animated component gates its loop, shader or CSS animation on this, so an effect scrolled out of view, * behind another tab, or in a collapsed panel costs nothing. One IntersectionObserver per element; no polling. */ export function useActive( ref: RefObject, { margin = "120px", key, idle = true, }: { margin?: string; /** Re-attach when this changes (an element that mounts later). */ key?: unknown; /** Pause continuous work at the host idle boundary. Finite sequences set false so they finish. */ idle?: boolean; } = {}, ) { const active = useContext(ActivityContext); const [inView, setInView] = useState(false); const [visible, setVisible] = useState( () => typeof document === "undefined" || document.visibilityState === "visible", ); useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === "undefined") { setInView(true); return; } const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { rootMargin: margin }); io.observe(el); return () => io.disconnect(); }, [ref, margin, key]); useEffect(() => { const on = () => setVisible(document.visibilityState === "visible"); document.addEventListener("visibilitychange", on); return () => document.removeEventListener("visibilitychange", on); }, []); return (!idle || active) && inView && visible; } bf:Tb66,"use client"; import { useLayoutEffect, useRef, useState, type RefObject } from "react"; const same = (width: number) => width; /** * The width of an element's content box, kept current with a ResizeObserver. It is first read in a layout effect, so * a layout chosen by width (a narrow mode, a chart's scale) is right in the first frame instead of jumping a frame * later. `fallback` stands in on the server and until the element exists; `key` re-measures when the element is * replaced (one that exists only in one view). */ export function useContentWidth(ref: RefObject, fallback: number, key?: unknown): number { return useWidthAs(ref, same, fallback, key); } /** * The same width, kept as what a part needs from it (`(w) => w < 640` for a narrow mode): the part renders again only * when that changes, not at every pixel. */ export function useWidthAs( ref: RefObject, read: (width: number) => T, fallback: T, key?: unknown, ): T { const [value, setValue] = useState(fallback); const latest = useRef(read); latest.current = read; useLayoutEffect(() => { const el = ref.current; if (!el) return; // the computed width is fractional and ignores transforms, like the observer's content box const s = getComputedStyle(el); const edges = ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"] as const; const box = parseFloat(s.width); const outer = Number.isFinite(box) ? box : el.offsetWidth; const inner = Number.isFinite(box) && s.boxSizing !== "border-box" ? 0 : edges.reduce((w, k) => w + parseFloat(s[k]), 0); setValue(latest.current(outer - inner)); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => setValue(latest.current(e.contentRect.width))); ro.observe(el); return () => ro.disconnect(); }, [ref, key]); return value; } /** * The height of an element's content box, kept current like `useContentWidth`: for parts that lay out at whatever * height their parent gives them (a chart, a map or a book that fills its panel). Read in a layout effect, so the first * frame is right; with `enabled` false nothing is measured and the fallback stands. */ export function useContentHeight( ref: RefObject, fallback: number, key?: unknown, enabled = true, ): number { const [value, setValue] = useState(fallback); useLayoutEffect(() => { const el = ref.current; if (!enabled || !el) return; const s = getComputedStyle(el); setValue(el.clientHeight - (parseFloat(s.paddingTop) || 0) - (parseFloat(s.paddingBottom) || 0)); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => setValue(e.contentRect.height)); ro.observe(el); return () => ro.disconnect(); }, [ref, key, enabled]); return enabled ? value : fallback; } c0:T427,"use client"; import { useCallback, useLayoutEffect, useRef } from "react"; import { createContour, type Contour } from "../lib/contour"; import type { IndicatorBox } from "./use-indicator"; /** * Puts a decorative surface (a segmented thumb, a tab's pill or line) on the contour engine and moves it to `box` * whenever the box changes: the first placement is instant, later ones travel as matter (ui/lib/contour.ts). Returns a * ref for the surface. The surface stays aria-hidden; the control's own state has already changed by the time it moves. */ export function useContour(box: IndicatorBox | null) { const contour = useRef(null); const ref = useCallback((el: T | null) => { contour.current?.destroy(); contour.current = el ? createContour(el) : null; }, []); useLayoutEffect(() => { // a choice travels; the first placement and a reflow of the same choice are simply there if (box) contour.current?.to(box, { instant: !box.ready || box.cause === "layout" }); }, [box]); return ref; } c1:T4cd,"use client"; import { useCallback, useRef, useState } from "react"; /** * One value in both forms (rules/CONVENTIONS.md): the prop while it is passed, otherwise the element's own copy that * starts at `initial` (a value, or a function that makes it once). The setter takes a value or an updater; an updater * reads the latest value even twice in one event, and every change reaches `onChange`, controlled or not. * `Next` is what a change can carry when it is narrower than the state: a range that starts empty (null) but is only * ever changed to a range. */ export function useControllable( value: T | undefined, initial: T | (() => T), onChange?: (next: Next) => void, ) { const [own, setOwn] = useState(initial); const current = value !== undefined ? value : own; const latest = useRef(current); latest.current = current; const set = useCallback( (next: Next | ((was: T) => Next)) => { const resolved = typeof next === "function" ? (next as (was: T) => Next)(latest.current) : next; latest.current = resolved; if (value === undefined) setOwn(resolved); onChange?.(resolved); }, [value, onChange], ); return [current, set] as const; } c2:T20fd,"use client"; import { useEffect, useRef, useState, type RefObject } from "react"; import { VelocityTracker } from "../lib/gesture"; /** Where the pointer is during a drag, relative to where it was pressed, with its velocity (px/s) over the last 100 ms. */ export interface DragPoint { /** Pointer position in client coordinates. */ x: number; y: number; /** Distance from the press. */ dx: number; dy: number; /** Velocity in px/s (read from the last 100 ms, so a release carries the flick, not the whole drag). */ vx: number; vy: number; pointerType: string; /** Shift was held (a part may offer a second mode on it: move one task alone, a finer step). */ shift: boolean; } export interface DragHandlers { /** A press landed on the element. Return false to leave it alone (a press on a nested button or link). */ onPress?: (point: DragPoint, event: PointerEvent) => boolean | void; /** The pointer moved past the threshold: the drag begins (the press point is in `point.x - point.dx`). */ onStart?: (point: DragPoint) => void; /** The pointer moved during a drag. `event` is the browser's own, for what a point does not carry: a pen's pressure, * the coalesced samples a fast stroke packs into one event (a drawing surface). */ onMove?: (point: DragPoint, event: PointerEvent) => void; /** Released after a drag, with the release velocity. */ onEnd?: (point: DragPoint) => void; /** Released without moving past the threshold: a tap or click (the part's tap route, WCAG 2.5.7). */ onTap?: (point: DragPoint) => void; /** Escape, a lost pointer or the browser taking the gesture (a page scroll): put things back as they were. */ onCancel?: () => void; /** A press that ended as neither a drag nor a tap: a finger that went on to scroll the page, or a pointer the browser * took before the threshold. Undo whatever `onPress` prepared. */ onAbandon?: () => void; } export interface DragOptions { /** The axis the part moves on. On touch, a drag that starts mostly across it is left to the page (a scroll). */ axis?: "x" | "y" | "both"; /** Pixels before a press becomes a drag: 3 for a mouse, 8 for a finger or pen unless given. */ threshold?: number; disabled?: boolean; } /** * The pointer side of a hand on a part, shared by everything dragged, thrown or pulled (a thumb, a puck, a stub, a * task, a cable). It listens natively on the element, so moves never render React: the part writes positions in its * handlers (a spring, a transform, a custom property) and only `dragging`, which changes at the start and end, is * state (for `data-state`). * * A press becomes a drag past a small threshold, then the pointer is captured so the drag continues outside the * element; a release without moving is a tap (`onTap`), the route every drag needs for people who cannot drag. Escape, * `pointercancel` and a lost capture call `onCancel`, and the part restores what it showed before the press. On touch the * element needs a `touch-action` that leaves the other axis to the page (`pan-y` for a part dragged sideways; never * `none` on more than the dragged surface, which would block zoom), and a drag that starts across its axis is dropped * so the page can scroll. */ export function useDrag( ref: RefObject, handlers: DragHandlers, { axis = "both", threshold, disabled = false }: DragOptions = {}, ): { dragging: boolean } { const [dragging, setDragging] = useState(false); const latest = useRef(handlers); latest.current = handlers; useEffect(() => { // an SVG part (a chart's brush) is dragged the same way; its pointer events are typed as an HTML element's const el = ref.current as HTMLElement | null; if (!el || disabled) return; const doc = el.ownerDocument; // Escape during a drag belongs to the drag: listened on the window's capture phase, it runs before any dialog or // popover listening on the document, which would otherwise also close around the cancelled drag const win = doc.defaultView ?? window; let active: { id: number; x0: number; y0: number; type: string; started: boolean; tracker: VelocityTracker; } | null = null; const point = (e: PointerEvent): DragPoint => { const a = active!; const [vx, vy] = a.tracker.velocity(e.timeStamp); return { x: e.clientX, y: e.clientY, dx: e.clientX - a.x0, dy: e.clientY - a.y0, vx, vy, pointerType: e.pointerType, shift: e.shiftKey, }; }; const finish = () => { if (active?.started && el.hasPointerCapture?.(active.id)) el.releasePointerCapture(active.id); active = null; doc.removeEventListener("pointermove", move); doc.removeEventListener("pointerup", up); doc.removeEventListener("pointercancel", cancel); win.removeEventListener("keydown", key, true); doc.removeEventListener("selectstart", hold, true); doc.removeEventListener("dragstart", hold, true); el.removeEventListener("lostpointercapture", lost); setDragging(false); }; const cancel = () => { if (!active) return; const started = active.started; finish(); if (started) latest.current.onCancel?.(); else latest.current.onAbandon?.(); }; // only the part's own capture ending cancels: a finger's press is captured by the child it landed on, and moving // the capture to the part fires lostpointercapture on that child, which bubbles here const lost = (e: PointerEvent) => { if (e.target === el && active?.started && e.pointerId === active.id) cancel(); }; const key = (e: KeyboardEvent) => { if (e.key !== "Escape" || !active?.started) return; e.preventDefault(); e.stopImmediatePropagation(); cancel(); }; // while the hand holds the part, the page neither selects text nor starts its own drag and drop (a selection left // by an earlier drag would otherwise be dragged, and the browser cancels the pointer) const hold = (e: Event) => e.preventDefault(); const move = (e: PointerEvent) => { if (!active || e.pointerId !== active.id) return; active.tracker.add(e.timeStamp, e.clientX, e.clientY); const p = point(e); if (!active.started) { const limit = threshold ?? (active.type === "mouse" ? 3 : 8); if (Math.hypot(p.dx, p.dy) < limit) return; // a finger that starts across the part's axis is scrolling the page const across = axis === "x" ? Math.abs(p.dy) > Math.abs(p.dx) : axis === "y" && Math.abs(p.dx) > Math.abs(p.dy); if (active.type !== "mouse" && across) { finish(); latest.current.onAbandon?.(); return; } active.started = true; doc.getSelection()?.removeAllRanges(); el.setPointerCapture?.(active.id); el.addEventListener("lostpointercapture", lost); setDragging(true); latest.current.onStart?.(p); } latest.current.onMove?.(p, e); }; const up = (e: PointerEvent) => { if (!active || e.pointerId !== active.id) return; active.tracker.add(e.timeStamp, e.clientX, e.clientY); const p = point(e); const started = active.started; finish(); if (started) latest.current.onEnd?.(p); else latest.current.onTap?.(p); }; const down = (e: PointerEvent) => { if (active || !e.isPrimary || (e.pointerType === "mouse" && e.button !== 0)) return; const tracker = new VelocityTracker(); tracker.add(e.timeStamp, e.clientX, e.clientY); active = { id: e.pointerId, x0: e.clientX, y0: e.clientY, type: e.pointerType, started: false, tracker }; if (latest.current.onPress?.(point(e), e) === false) { active = null; return; } doc.addEventListener("pointermove", move); doc.addEventListener("pointerup", up); doc.addEventListener("pointercancel", cancel); win.addEventListener("keydown", key, true); doc.addEventListener("selectstart", hold, true); doc.addEventListener("dragstart", hold, true); }; el.addEventListener("pointerdown", down); return () => { el.removeEventListener("pointerdown", down); if (active) finish(); }; }, [ref, axis, threshold, disabled]); return { dragging }; } c3:T217f,"use client"; import { useLayoutEffect, useRef, useState, type RefObject } from "react"; /** * How many of a row's items fit its room: the one fold every element that lists things in a line uses (chips, * avatars, breadcrumbs, filters, tags, actions), so a narrow panel shows fewer and a "+N" for the rest, and the rest * come back as the room grows. Content-sized items keep their natural width; the row decides how many. Items never * change order (a fold that reshuffles breaks the reader's memory of where things are): the last ones fold first. * * Mark each item `data-fit-item` (direct children of the row) and the overflow control (the "+N") `data-fit-more`. * Every item is measured once at its natural width — all of them render on the first pass and again whenever `items` * or `key` changes, read in a layout effect, so nothing is painted half-measured — and then each change of the row's * width lays the widths out with the row's own column gap into `lines` lines, keeping room on the last line for the * overflow control. Nothing runs at rest: one ResizeObserver on the row. * * `key` names the item set and must be a stable primitive (a string of the items' ids and labels), never an array or * object built during render: a new identity each render would measure again each render, for ever. * `keep[i]` marks items that always show (a chosen chip, the current crumb); room for them is taken first. * Returns how many of the other items show, in order (all of them while measuring, when off, and when they fit). */ export function useFit( row: RefObject, { items, lines = 1, enabled = true, min = 1, keep, from = "start", }: { /** How many items there are; a change (or a different `key`) measures them again. */ items: number; /** Lines the row may take before it folds. */ lines?: number; enabled?: boolean; /** Never show fewer than this many of the other items. */ min?: number; keep?: readonly boolean[]; /** Which of the other items the room shows: the first that fit (start, the default: the last fold first), or the * last that fit (end: a breadcrumb folds the levels nearest the top and keeps the parent). The count returned is * how many show either way; the caller shows them from its end. */ from?: "start" | "end"; }, key?: string | number, ): number { const free = keep ? keep.filter((k) => !k).length : items; const [count, setCount] = useState(free); const widths = useRef(null); const moreWidth = useRef(0); const measuring = useRef(true); const kept = useRef(keep); kept.current = keep; const end = useRef(from === "end"); end.current = from === "end"; const recent = useRef([]); const last = useRef(free); // a new set of items: show them all for one (unpainted) pass so their natural widths can be read useLayoutEffect(() => { widths.current = null; measuring.current = true; setCount(free); }, [items, key, enabled, free]); useLayoutEffect(() => { const el = row.current; if (!el || !enabled || typeof ResizeObserver === "undefined") return; const layout = () => { if (!widths.current) return; const cs = getComputedStyle(el); const gap = parseFloat(cs.columnGap) || 0; const room = roomOf(el, cs) - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0); // counted from the end, the same placement is read backwards: the last items are the ones that stay const w = end.current ? [...widths.current].reverse() : widths.current; const k = end.current && kept.current ? [...kept.current].reverse() : kept.current; let next = fit(w, room, gap, moreWidth.current, lines, min, k); // a backstop: a row whose room still moves with its own fold (a layout the room reading can't see) settles on // the folded side instead of flipping every frame const now = performance.now(); const flips = recent.current.filter((t) => now - t < 500); if (flips.length >= 6) next = Math.min(next, last.current); if (next !== last.current) recent.current = [...flips, now]; last.current = next; setCount((c) => (c === next ? c : next)); }; if (measuring.current) { const found = [...el.querySelectorAll(":scope > [data-fit-item]")]; if (found.length >= items) { widths.current = found.slice(0, items).map((n) => n.getBoundingClientRect().width); const more = el.querySelector(":scope > [data-fit-more]"); // the "+N" is not on screen while everything fits: assume a short chip until it has been seen moreWidth.current = more ? more.getBoundingClientRect().width : Math.max(moreWidth.current, 56); measuring.current = false; } } layout(); const observer = new ResizeObserver(() => { const more = el.querySelector(":scope > [data-fit-more]"); if (more) moreWidth.current = more.getBoundingClientRect().width; layout(); }); observer.observe(el); // the room is the parent's line as much as the row's own box: a content-sized row only learns it can grow there if (el.parentElement) observer.observe(el.parentElement); return () => observer.disconnect(); }); return enabled ? count : free; } /** * The width a row may take: its own box, or, when it sits content-sized in a flex row (a tab row beside a title in a * space-between bar), the line's width less what shares that line with it. Read this way the room never depends on * how many items the row shows, so folding can't change the room it was decided by (and flip back). */ function roomOf(el: HTMLElement, cs: CSSStyleDeclaration) { const own = el.clientWidth; const parent = el.parentElement; if (!parent) return own; const ps = getComputedStyle(parent); if (!ps.display.includes("flex") || !ps.flexDirection.startsWith("row")) return own; const box = el.getBoundingClientRect(); let others = 0; let count = 0; for (const sib of parent.children) { if (sib === el || !(sib instanceof HTMLElement)) continue; const ss = getComputedStyle(sib); if (ss.position === "absolute" || ss.position === "fixed" || ss.display === "none") continue; const r = sib.getBoundingClientRect(); // on the row's own line (a wrapped bar puts the others above or below) if (r.bottom <= box.top + 0.5 || r.top >= box.bottom - 0.5) continue; others += r.width + (parseFloat(ss.marginLeft) || 0) + (parseFloat(ss.marginRight) || 0); count++; } const line = parent.clientWidth - (parseFloat(ps.paddingLeft) || 0) - (parseFloat(ps.paddingRight) || 0) - others - count * (parseFloat(ps.columnGap) || 0) - (parseFloat(cs.marginLeft) || 0) - (parseFloat(cs.marginRight) || 0) - // the line is measured outside the row's border; clientWidth is inside it (parseFloat(cs.borderLeftWidth) || 0) - (parseFloat(cs.borderRightWidth) || 0); const cap = cs.maxWidth.endsWith("px") ? parseFloat(cs.maxWidth) : Infinity; return Math.max(own, Math.min(line, cap)); } /** * How many of the items not kept fit, in order, when the shown ones are laid into `lines` lines of `room` with `gap` * between them and `more` kept free on the last line whenever something folds. */ export function fit( widths: readonly number[], room: number, gap: number, more: number, lines: number, min: number, keep?: readonly boolean[], ) { const fits = (show: (i: number) => boolean, reserve: number) => { let line = 1; let x = 0; for (let i = 0; i < widths.length; i++) { if (!show(i)) continue; const w = widths[i]; const cap = line === lines ? room - reserve : room; const need = x === 0 ? w : x + gap + w; if (need <= cap + 0.5) { x = need; continue; } if (x === 0 || line === lines) return false; line++; if (w > (line === lines ? room - reserve : room) + 0.5) return false; x = w; } return true; }; const rank: number[] = []; let free = 0; for (let i = 0; i < widths.length; i++) rank.push(keep?.[i] ? -1 : free++); if (fits(() => true, 0)) return free; // with items that always show, the floor is none of the others (they are what keeps the row from being empty) const floor = keep?.some(Boolean) ? 0 : Math.min(min, free); for (let n = free - 1; n > floor; n--) if (fits((i) => rank[i] < 0 || rank[i] < n, more + gap)) return n; return floor; } c4:T2933,"use client"; import { useLayoutEffect, useRef, type RefObject } from "react"; import { useMotionTokens } from "./use-motion-tokens"; import { cssEase } from "../lib/motion-tokens"; type Seen = { el: HTMLElement; x: number; y: number; w: number; h: number }; /** * Items of a collection keep their path (the morph grammar's "changes keep their size and their path"): mark each item * with `data-flip=""` inside `container`. After a change, an item that is new grows in, items that moved * slide from where they were, and an item that left fades out as a ghost where it stood (a still copy, inert and * hidden from assistive tech, removed when it has faded). The data and focus change at once; only the picture * settles. Nothing runs at rest; reduced motion places at once. Positions are kept in the container's own content * (relative to it, plus its scroll) and read at rest, so neither a scroll of the page, nor a scroll of the container * itself, nor an item still settling reads as movement. * * `resize`: an item whose box changed size also scales from its old box (for marks without text, a bar or a segment, so a * new value glides on transforms instead of laying out every frame). `origin(key)`: an element a new item grows out of * (a ribbon's segment becoming a column, a shared chip dividing into pieces); with `originFirst` it applies on the * container's first render too, so a panel that opens unfolds its items from what was already on screen. `inner`: items * inside another item that lies outside the container (a merge's rows inside a card that moves itself) are this * container's own; nesting is judged inside the container only. */ export function useFlip( container: RefObject | (() => HTMLElement | null), { ghost = true, enter = true, resize = false, origin, originFirst = false, inner = false, }: { ghost?: boolean; enter?: boolean; resize?: boolean; origin?: (key: string) => Element | null | undefined; originFirst?: boolean; inner?: boolean; } = {}, ) { const get = typeof container === "function" ? container : () => container.current; // timing read at the container itself, found when the commit has attached it (a function container has no ref of its // own; without a host the timing stayed unresolved where no UIRoot is around, then rendered again to say so) const host = typeof container === "function" ? { get current() { return container(); }, } : container; const motion = useMotionTokens(host); const last = useRef | null>(null); const lastWidth = useRef(0); const flying = useRef(new Set()); // where every item stands, in the container's own content (relative to it, plus its scroll): a list scrolled since the // last render has moved nothing (a row that slid back by the scroll would leave the finger that is tapping it). The // items' own grow-ins and slides still in flight are lifted while they are read, so each box is where the layout puts // it: a render mid-flight (a live price ticking while a new row grows in) is not a move. const read = (root: HTMLElement) => { const lifted = [...flying.current].map((a) => a.effect as KeyframeEffect).map((e) => [e, e.target] as const); for (const [effect] of lifted) effect.target = null; const box = root.getBoundingClientRect(); const now = new Map(); for (const el of root.querySelectorAll("[data-flip]")) { // only the outermost items move (with `inner`, outermost inside this container) const outer = el.parentElement?.closest("[data-flip]"); if (outer && (!inner || (outer !== root && root.contains(outer)))) continue; const r = el.getBoundingClientRect(); now.set(el.dataset.flip!, { el, x: r.left - box.left + root.scrollLeft, y: r.top - box.top + root.scrollTop, w: r.width, h: r.height, }); } for (const [effect, target] of lifted) effect.target = target; return { box, now }; }; // a container that changes size at rest, with no render (fonts arriving, a scrollbar appearing, a window resized), has // its places read again then: else the first change after it would take the new width for a reflow and move nothing const watched = useRef<{ el: HTMLElement; observer: ResizeObserver } | null>(null); useLayoutEffect(() => () => watched.current?.observer.disconnect(), []); // every render on purpose: a collection changes through its parent's state, not through anything we can depend on useLayoutEffect(() => { const root = get(); // a container that is gone (a panel folded) starts over when it comes back: its items are new, not moved if (!root) { last.current = null; return; } if (watched.current?.el !== root && typeof ResizeObserver !== "undefined") { watched.current?.observer.disconnect(); const observer = new ResizeObserver(() => { if (flying.current.size || !last.current || !root.isConnected) return; const seen = read(root); last.current = seen.now; lastWidth.current = seen.box.width; }); observer.observe(root); watched.current = { el: root, observer }; } const { box, now } = read(root); // a container that changed width since the last render reflowed its items by itself (a panel resized, a room // step crossed): that is placement, not a change a person made, so this render records the new places and moves // nothing (a reflow places, only a choice travels) const reflowed = Math.abs(box.width - lastWidth.current) > 0.5; lastWidth.current = box.width; const before = reflowed ? null : last.current; last.current = now; const ms = motion.duration.standard * 1000; // the first render moves nothing, except items that grow out of an origin already on screen if ((!before && !(origin && originFirst)) || motion.reduced || ms < 2) return; const easing = cssEase(motion.ease.standard, "ease-out"); // an item in flight says so (`data-flip-flight`: "far" when it crosses more than its own size, a slide between groups or // a share growing out of another item; "near" for a neighbour's step), so a part can lift what travels over other // text onto a surface of its own instead of drawing words over words const fly = (el: HTMLElement, keyframes: Keyframe[], far = false) => { const flight = el.animate(keyframes, { duration: ms, easing }); flying.current.add(flight); if (far || el.dataset.flipFlight !== "far") el.dataset.flipFlight = far ? "far" : "near"; const land = () => { flying.current.delete(flight); if (![...flying.current].some((a) => (a.effect as KeyframeEffect | null)?.target === el)) delete el.dataset.flipFlight; }; flight.finished.then(land, land); }; const boxOf = (key: string) => { const from = origin?.(key); if (!from || !from.isConnected) return null; const r = from.getBoundingClientRect(); return { x: r.left - box.left + root.scrollLeft, y: r.top - box.top + root.scrollTop, w: r.width, h: r.height }; }; // from a box to where the item stands: translate and scale about the top-left corner const morph = (was: { x: number; y: number; w: number; h: number }, at: Seen): Keyframe[] => [ { transformOrigin: "0 0", transform: `translate(${was.x - at.x}px, ${was.y - at.y}px) scale(${was.w / Math.max(at.w, 0.5)}, ${was.h / Math.max(at.h, 0.5)})`, }, { transformOrigin: "0 0", transform: "none" }, ]; for (const [key, at] of now) { const was = before?.get(key); if (!was) { const from = boxOf(key); if (from) fly(at.el, morph(from, at), true); else if (enter && before) fly(at.el, [ { opacity: 0, transform: "scale(0.86)" }, { opacity: 1, transform: "none" }, ]); continue; } const dx = was.x - at.x, dy = was.y - at.y; const resized = resize && (Math.abs(was.w - at.w) > 0.5 || Math.abs(was.h - at.h) > 0.5); const far = Math.abs(dx) > at.w * 0.5 || Math.abs(dy) > at.h * 1.5; if (resized) fly(at.el, morph(was, at), far); else if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) fly(at.el, [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], far); } if (!ghost || !before) return; for (const [key, was] of before) { if (now.has(key) || was.el.isConnected) continue; const copy = was.el.cloneNode(true) as HTMLElement; copy.removeAttribute("data-flip"); // the ghost is a picture of the item, not the item: nothing that finds parts by slot or id may find it for (const n of [copy, ...copy.querySelectorAll("[id], [data-slot]")]) { n.removeAttribute("id"); n.removeAttribute("data-slot"); } copy.setAttribute("data-ghost", ""); copy.setAttribute("aria-hidden", "true"); copy.inert = true; if (getComputedStyle(root).position === "static") root.style.position = "relative"; Object.assign(copy.style, { position: "absolute", left: `${was.x}px`, top: `${was.y}px`, width: `${was.w}px`, height: `${was.h}px`, margin: "0", pointerEvents: "none", }); root.appendChild(copy); // the ghost is gone by the time a neighbour slides into its place, so their texts never mix. The clock runs // straight and an even curve shapes only the fade: the front-loaded standard curve on the whole timeline passed // 0.45 inside the first frame, so what left read as a pop instead of a fade const fade = copy.animate( [ { opacity: 1, transform: "none", easing: cssEase(motion.ease.default, "ease-in-out") }, { opacity: 0, transform: "scale(0.9)", offset: 0.6 }, { opacity: 0, transform: "scale(0.86)" }, ], { duration: motion.duration.standard * 1000, easing: "linear", }, ); const drop = () => copy.remove(); fade.finished.then(drop, drop); // and by the clock as well: a fade that never reports its end (the page hidden, an animation cancelled from // outside) must not leave a copy behind for a person or a test to find setTimeout(drop, motion.duration.standard * 1000 + 250); } }); } c5:Tf90,"use client"; import { useLayoutEffect, useRef, type RefObject } from "react"; import { useMotionTokens } from "./use-motion-tokens"; import { cssEase } from "../lib/motion-tokens"; /** * The step tray: a card whose content is replaced (a sign-in step, the sign-up card, a form step) keeps its path. When * `key` changes, the element's height eases from what it was to what the new content needs, so the card's edge and * everything under it glide instead of jumping (the morph grammar's "modes change size in place"). The element clips * while it eases, with room for focus rings, unless `clip` is false (a slot whose ease only moves what is around it, like * the auth page re-centring its card, shows its content whole). Nothing runs at rest; reduced motion, motion "none" and a card off screen * switch at once; a change mid-way starts from where the card is. The height twin of hooks/use-width-morph; any element whose * content is replaced in place uses it (the auth cards, the step form, a dialog's stepped tray, the command menu's pages). */ export function useHeightMorph( ref: RefObject, key: unknown, { clip = true, duration = "morph", reduced: reducedOverride = false, }: { clip?: boolean; /** The semantic duration the ease takes: a mode change morphs, a content swap (a skeleton) takes the standard. */ duration?: "morph" | "standard"; /** Also place at once when the caller knows motion is reduced by its own policy. */ reduced?: boolean; } = {}, ) { const motion = useMotionTokens(ref); const last = useRef(null); const easing = useRef(null); // the height it last rested at, kept current when it changes on its own (an error line, a bot check) so the next ease // starts where the card really is; the ease's own frames are not a resting height useLayoutEffect(() => { const el = ref.current; if (!el || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(() => { if (!easing.current) last.current = el.getBoundingClientRect().height; }); observer.observe(el); return () => observer.disconnect(); }, [ref]); useLayoutEffect(() => { const el = ref.current; if (!el) return; const from = easing.current ? el.getBoundingClientRect().height : last.current; easing.current?.cancel(); easing.current = null; const box = el.getBoundingClientRect(); const to = box.height; last.current = to; const ms = motion.duration[duration] * 1000; if (from === null || Math.abs(from - to) < 0.5 || motion.reduced || reducedOverride || ms < 2) return; // off screen nobody sees the glide: the card takes its height at once and no frame is spent on it if (box.bottom < 0 || box.top > innerHeight) return; // the ease runs between measured heights: a keyframe to "auto" (even with interpolate-size, or calc-size) does not // interpolate in Chromium's Web Animations, it jumps at once; at the end the element is back on its own height // the clip below leaves room for a focus ring or a control's shadow at the content's edge (inert at rest); a plain // length, because Chromium computes any calc() here (and so the space tokens) as 0 el.style.setProperty("overflow-clip-margin", "8px"); const ease = motion.ease.default; const overflow = clip ? "clip" : "visible"; const animation = el.animate( [ { height: `${from}px`, overflow }, { height: `${to}px`, overflow }, ], { duration: ms, easing: cssEase(ease, "ease-in-out") }, ); easing.current = animation; void animation.finished.then( () => { if (easing.current !== animation) return; easing.current = null; last.current = el.getBoundingClientRect().height; }, () => {}, ); }, [key]); // eslint-disable-line react-hooks/exhaustive-deps -- eases on a change of the step it stands for } c6:T1800,"use client"; import { APPEARANCE_EVENT } from "../lib/motion-tokens"; import { useLayoutEffect, useRef, useState, type CSSProperties, type RefObject } from "react"; export interface IndicatorBox { x: number; y: number; w: number; h: number; /** False on the first placement, so the indicator appears in place instead of sliding in from the corner. */ ready: boolean; /** Which way the last move went on each axis (-1 left or up, 1 right or down, 0 still), for the edge that leads. */ dx: -1 | 0 | 1; dy: -1 | 0 | 1; /** choice: a selection changed; layout: the same choice moved because the page reflowed (a resize, a font, a * type scale). A surface may travel for a choice and should simply be there after a reflow. */ cause: "choice" | "layout"; } type Box = Pick; const same = (a: IndicatorBox | null, b: Box) => a !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h; /** * Follows the chosen item inside a container: the thumb of a segmented control, the pill or line of tabs, the ring of * radio cards. Returns a ref for the container and the box of the first element matching `selector` in it, relative * to the container (null when nothing matches). It measures before paint whenever `key` changes, and again when the * container resizes or a selection attribute changes inside it (for parts whose choice lives in a library, like tabs). */ export function useIndicator( selector: string, key?: unknown, onPlace?: (item: HTMLElement, container: T) => void, /** offset (default): the item's offset box, for items whose offset parent is the container. rect: measured on screen * relative to the container, for items nested in positioned cells (a calendar day in its table cell). */ measure: "offset" | "rect" = "offset", ): [RefObject, IndicatorBox | null] { const ref = useRef(null); const [box, setBox] = useState(null); const placed = useRef(onPlace); useLayoutEffect(() => { placed.current = onPlace; }); useLayoutEffect(() => { const container = ref.current; if (!container) return; const place = (cause: IndicatorBox["cause"] = "choice") => { const item = container.querySelector(selector); if (!item) { setBox(null); return; } let next = { x: item.offsetLeft, y: item.offsetTop, w: item.offsetWidth, h: item.offsetHeight }; if (measure === "rect") { const a = item.getBoundingClientRect(); const c = container.getBoundingClientRect(); next = { x: Math.round(a.left - c.left - container.clientLeft + container.scrollLeft), y: Math.round(a.top - c.top - container.clientTop + container.scrollTop), w: item.offsetWidth, h: item.offsetHeight, }; } setBox((b) => same(b, next) ? b : { ...next, cause, ready: b !== null, dx: b ? (Math.sign(next.x - b.x) as IndicatorBox["dx"]) : 0, dy: b ? (Math.sign(next.y - b.y) as IndicatorBox["dy"]) : 0, }, ); placed.current?.(item, container); }; const resizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => place("layout")); resizes?.observe(container); const observed = new Set(); const observeItems = () => { // A full-width fixed-height list can stay the same size while its tabs/radio choices grow with type or labels. // Ignore the decorative indicator itself, whose own dimensions are the output of this measurement. const items = new Set([...container.children].filter((child) => child.getAttribute("aria-hidden") !== "true")); for (const old of observed) if (!items.has(old)) { resizes?.unobserve(old); observed.delete(old); } for (const item of items) if (!observed.has(item)) { resizes?.observe(item); observed.add(item); } }; observeItems(); place(); const mutations = new MutationObserver(() => { observeItems(); place("choice"); }); mutations.observe(container, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-state", "aria-checked", "aria-selected", "aria-current", "data-active", "data-open"], }); const reflow = () => place("layout"); container.ownerDocument.addEventListener(APPEARANCE_EVENT, reflow); container.ownerDocument.fonts?.addEventListener("loadingdone", reflow); return () => { mutations.disconnect(); resizes?.disconnect(); container.ownerDocument.removeEventListener(APPEARANCE_EVENT, reflow); container.ownerDocument.fonts?.removeEventListener("loadingdone", reflow); }; }, [selector, key, measure]); return [ref, box]; } /** The box as custom properties, for a stylesheet to place the indicator with: --pui-indicator-x/-y/-w/-h, and its * four edges --pui-glide-l/-r/-t/-b, which the `glide` class moves one at a time. */ export function indicatorStyle(box: IndicatorBox): CSSProperties { return { "--pui-indicator-x": `${box.x}px`, "--pui-indicator-y": `${box.y}px`, "--pui-indicator-w": `${box.w}px`, "--pui-indicator-h": `${box.h}px`, "--pui-glide-l": `${box.x}px`, "--pui-glide-r": `${box.x + box.w}px`, "--pui-glide-t": `${box.y}px`, "--pui-glide-b": `${box.y + box.h}px`, } as CSSProperties; } const AXIS = { x: ["left", undefined, "right"], y: ["up", undefined, "down"] } as const; /** Everything an indicator wearing the `glide` class needs (utilities.css): its place, whether it may move yet, and * which way it is going, so the edge on that side leads and the other follows: it stretches toward the new choice and * gathers there. */ export function glideProps(box: IndicatorBox) { return { style: indicatorStyle(box), "data-ready": box.ready ? "" : undefined, "data-glide-x": AXIS.x[box.dx + 1], "data-glide-y": AXIS.y[box.dy + 1], }; } c7:T443,"use client"; import { useSyncExternalStore } from "react"; // one MediaQueryList per query: React reads the snapshot on every render, and a part that renders thirty times a // second (a playing audio player's clock) would otherwise ask the browser for a new list each time const lists = new Map(); const list = (query: string) => { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined; let m = lists.get(query); if (!m) lists.set(query, (m = window.matchMedia(query))); return m; }; /** True while the media query matches; false on the server and in the first client render of SSR output. */ export function useMediaQuery(query: string): boolean { return useSyncExternalStore( (notify) => { const m = list(query); m?.addEventListener("change", notify); return () => m?.removeEventListener("change", notify); }, () => list(query)?.matches ?? false, () => false, ); } /** Phone-width layouts: below 768px. */ export const usePhone = () => useMediaQuery("(max-width: 767px)"); c8:T114e,"use client"; import { useMemo, type RefObject } from "react"; import { useAppearanceRoot } from "../runtime/appearance"; import { useResolvedAppearance } from "./use-resolved-appearance"; import { motionAt, motionEase, motionTokens, type MotionTokens } from "../lib/motion-tokens"; import { semanticMotion } from "../lib/motion-source"; const durationToken = (name: string) => name === "exit" ? "motion-out" : name === "in" || name === "out" ? `motion-${name}` : `duration-${name}`; const easeToken = (name: string) => `ease-${name === "inOut" ? "in-out" : name}`; const REQUEST = { times: [ ...Object.keys(semanticMotion.duration).map(durationToken), ...Object.keys(semanticMotion.spring).map((name) => `spring-${name}`), ...Object.keys(semanticMotion.stagger).map((name) => `stagger-${name}`), "fade-in", "fade-out", ], easings: [...Object.keys(semanticMotion.ease).map(easeToken), "ease-spring", "ease-spring-bounce", "ease-overshoot"], numbers: ["motion-scale", "motion-look", "press-scale"], // timing only: the host's own type would make every control resolve differently from the page around it typography: false, }; /** * Resolve each timing at the actual host; omitted host uses the nearest managed root. The first/server snapshot is * the pure foundation default. Local CSS values, scope changes, font readiness, OS preference and explicit refresh * update the same consumer; no document-wide first-root fallback or persistent global listener. */ export function useMotionTokens(hostRef?: RefObject): MotionTokens & { ready: boolean; /** Reduced or none: movement, springs and staggers are instant. */ reduced: boolean; mode: "full" | "reduced" | "none"; /** Opacity-only arrival and departure (seconds): kept under reduced, instant under none (APPEARANCE A06). */ fade: { in: number; out: number }; } { const root = useAppearanceRoot(); const scopeRef = useMemo(() => ({ current: root }), [root]); const resolved = useResolvedAppearance(hostRef ?? scopeRef, REQUEST); return useMemo(() => { if (!resolved.ready) return { ...motionTokens, ready: false, reduced: false, mode: "full" as const, fade: { in: motionTokens.duration.in, out: motionTokens.duration.out }, }; const reduced = resolved.reducedMotion; const speed = (resolved.numbers["motion-scale"] ?? 1) * (resolved.numbers["motion-look"] ?? 1); const fade = resolved.motionMode === "none" ? { in: 0.001, out: 0.001 } : { in: resolved.times["fade-in"] ?? semanticMotion.duration.in * speed, out: resolved.times["fade-out"] ?? semanticMotion.duration.out * speed, }; const factor = reduced ? 0.001 / semanticMotion.duration.standard : speed; const base = motionAt(factor); const duration = Object.fromEntries( Object.entries(base.duration).map(([name, fallback]) => [ name, reduced ? 0.001 : (resolved.times[durationToken(name)] ?? fallback), ]), ) as MotionTokens["duration"]; const stagger = Object.fromEntries( Object.entries(base.stagger).map(([name, fallback]) => [ name, reduced ? 0 : (resolved.times[`stagger-${name}`] ?? fallback), ]), ) as MotionTokens["stagger"]; const ease = Object.fromEntries( Object.entries(base.ease).map(([name, fallback]) => [ name, motionEase(resolved.easings[easeToken(name)], fallback), ]), ) as MotionTokens["ease"]; const spring = { ...base.spring }; for (const name of Object.keys(semanticMotion.spring) as (keyof typeof semanticMotion.spring)[]) spring[name] = { ...base.spring[name], visualDuration: reduced ? 0.001 : (resolved.times[`spring-${name}`] ?? base.spring[name].visualDuration), bounce: reduced ? 0 : base.spring[name].bounce, }; return { ...base, ready: true, reduced, mode: resolved.motionMode, fade, duration, stagger, ease, spring, pressScale: resolved.numbers["press-scale"] ?? base.pressScale, css: { spring: resolved.easings["ease-spring"] ?? base.css.spring, springBounce: resolved.easings["ease-spring-bounce"] ?? base.css.springBounce, overshoot: resolved.easings["ease-overshoot"] ?? base.css.overshoot, }, }; }, [resolved]); } c9:T128e,"use client"; import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from "react"; /** How a hold ended: let go on purpose, or taken away (Escape, the pointer lost, the window or the focus gone). */ export type PressEnd = "release" | "cancel"; export interface PressHoldOptions { /** The hold began: a press, a finger, Space or Enter on the element (or `start()` from a shortcut). */ onStart: () => void; /** The hold ended. A part that commits at the end (push to talk) commits on "release"; a part that commits while * held (hold to confirm) treats both as letting go before it committed. */ onEnd?: (how: PressEnd) => void; /** No hold begins, and one in progress is cancelled. */ disabled?: boolean; } /** * Press and hold on one element, the same way everywhere (hold to confirm, push to talk): a mouse button, a finger or a * pen held on it, or Space or Enter while it has focus. The pointer is captured, so a hand that slides off still lets * go where it lifts; a long press opens no menu over the hold. Escape cancels a hold before it commits (rule 8), and * the element losing focus, the window losing focus or the tab hiding end it, since the release would never arrive. * Spread `handlers` on the element; `start` and `end` serve a keyboard shortcut held elsewhere. */ export function usePressHold({ onStart, onEnd, disabled = false }: PressHoldOptions) { const [pressing, setPressing] = useState(false); const active = useRef(false); const latest = useRef({ onStart, onEnd, disabled }); latest.current = { onStart, onEnd, disabled }; const control = useRef({ start() { if (active.current || latest.current.disabled) return; active.current = true; setPressing(true); latest.current.onStart(); }, end(how: PressEnd) { if (!active.current) return; active.current = false; setPressing(false); latest.current.onEnd?.(how); }, }).current; // the window or the tab going away ends a hold whose release will never arrive; unmounting ends it too useEffect(() => { const cancel = () => control.end("cancel"); const hide = () => { if (document.hidden) cancel(); }; window.addEventListener("blur", cancel); document.addEventListener("visibilitychange", hide); return () => { window.removeEventListener("blur", cancel); document.removeEventListener("visibilitychange", hide); cancel(); }; }, [control]); useEffect(() => { if (disabled) control.end("cancel"); }, [disabled, control]); // Escape during a hold belongs to the hold: on the window's capture phase it runs before a dialog around the part, // which would otherwise close as well (the same order as useDrag) useEffect(() => { if (!pressing) return; const key = (e: globalThis.KeyboardEvent) => { if (e.key !== "Escape") return; e.preventDefault(); e.stopImmediatePropagation(); control.end("cancel"); }; window.addEventListener("keydown", key, true); return () => window.removeEventListener("keydown", key, true); }, [pressing, control]); // the pointer that holds: a second finger landing on or lifting off the part is not the hand that holds it const holder = useRef(null); const mine = (e: PointerEvent) => holder.current === e.pointerId; const handlers = { onPointerDown: (e: PointerEvent) => { if (e.button !== 0 || !e.isPrimary) return; holder.current = e.pointerId; e.currentTarget.setPointerCapture?.(e.pointerId); control.start(); }, onPointerUp: (e: PointerEvent) => { if (!mine(e)) return; holder.current = null; control.end("release"); }, onPointerCancel: (e: PointerEvent) => { if (!mine(e)) return; holder.current = null; control.end("cancel"); }, // after a release the capture goes too, and the hold has already ended; before one, the browser took the pointer onLostPointerCapture: (e: PointerEvent) => { if (!mine(e)) return; holder.current = null; control.end("cancel"); }, onKeyDown: (e: KeyboardEvent) => { if ((e.key === " " || e.key === "Enter") && !e.repeat) { e.preventDefault(); control.start(); } }, onKeyUp: (e: KeyboardEvent) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); control.end("release"); } }, onBlur: () => control.end("cancel"), onContextMenu: (e: { preventDefault(): void }) => e.preventDefault(), }; return { pressing, handlers, start: control.start, end: control.end }; } ca:Tbe4,"use client"; import { useLayoutEffect, useRef, type RefObject } from "react"; import { useMotionTokens } from "./use-motion-tokens"; import { cssEase } from "../lib/motion-tokens"; /** * A label whose text changes keeps its path: when `key` changes, the element's width eases from what it was to what the * new text needs, so whatever sits after it (a chevron, a counter) glides instead of jumping. The element clips while it * eases (give it `overflow-clip whitespace-nowrap`). Nothing runs at rest; reduced motion and motion "none" switch at * once, and so does a label off screen. */ export function useWidthMorph(ref: RefObject, key: unknown) { const motion = useMotionTokens(ref); const last = useRef(null); const easing = useRef(null); // the width it last rested at, kept current when it changes on its own (a web font arriving) so the next ease starts // where the label really is; the ease's own frames are not a resting width useLayoutEffect(() => { const el = ref.current; if (!el || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(() => { if (!easing.current) last.current = el.getBoundingClientRect().width; }); observer.observe(el); return () => observer.disconnect(); }, [ref]); useLayoutEffect(() => { const el = ref.current; if (!el) return; // mid-way through an earlier change, it starts from where it is now, not from where that change was going const from = easing.current ? el.getBoundingClientRect().width : last.current; easing.current?.cancel(); easing.current = null; const box = el.getBoundingClientRect(); const to = box.width; last.current = to; const ms = motion.duration.morph * 1000; if (from === null || Math.abs(from - to) < 0.5 || motion.reduced || ms < 2) return; // off screen nobody sees the glide: the label takes its width at once and no frame is spent on it if (box.bottom < 0 || box.top > innerHeight || box.right < 0 || box.left > innerWidth) return; const ease = motion.ease.default; // pixel to pixel: a Web Animations keyframe to "auto" (with interpolate-size, or calc-size) jumps straight to the // end in Chromium 153 instead of easing (measured: 537 of 537 px at 300 of 1000 ms); a late change of the natural // width is caught by the observer above when the ease ends const animation = el.animate([{ width: `${from}px` }, { width: `${to}px` }], { duration: ms, // even in and out: the glide never moves a neighbour more than a pixel or two in one frame easing: cssEase(ease, "ease-in-out"), }); easing.current = animation; void animation.finished.then( () => { if (easing.current !== animation) return; easing.current = null; last.current = el.getBoundingClientRect().width; }, () => {}, ); }, [key]); // eslint-disable-line react-hooks/exhaustive-deps -- eases on a change of the text it stands for } cb:T42a,/** * Copies text to the clipboard and says whether it worked. Uses the async Clipboard API where the page is allowed to * (a secure context with focus), and falls back to a hidden textarea and execCommand elsewhere (http previews, * embedded frames). */ export async function copyText(text: string): Promise { try { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); return true; } } catch { /* fall through to the textarea */ } if (typeof document === "undefined") return false; const area = document.createElement("textarea"); const previous = document.activeElement as HTMLElement | null; try { area.value = text; area.setAttribute("readonly", ""); area.style.cssText = "position:fixed;top:0;left:0;opacity:0;pointer-events:none"; document.body.appendChild(area); area.select(); return document.execCommand?.("copy") ?? false; } catch { return false; } finally { area.remove(); previous?.focus({ preventScroll: true }); } } cc:T3828,import { readMotionFactor } from "./motion-tokens"; /** * Contour: a surface whose outline moves like matter instead of a box that resizes. Beamline's own model (research/ * morphing-interfaces-2026-10-04): a rounded quadrilateral whose four corners each follow their target on a critically * damped spring. The corner facing the way it travels answers fastest and the far one slowest, so it leads and gathers; * each edge's midpoint heads for where its edge will be a little ahead of its corners and may only bulge outward (the * leading edge rounds out like the front of a drop, the tail stays smooth), and while the shape is longer than its target the long edges * pinch toward the centre, so a fast move draws a neck; while it is stretched its corners round toward a capsule, as a moving drop does. No spring overshoots: the elasticity is the parts arriving at * different moments, never bounce. At rest the surface is its plain CSS box with no clip and no frames. * * The look decides the material through four inputs on the element (preset-source.css): --m-morph-spread (how unevenly * the corners answer; 0 is rigid travel), --m-morph-front (px the leading edge may round out), --m-morph-waist (how much * a stretch pinches) and --m-morph-weight (a multiplier on the response time). */ export interface ContourBox { x: number; y: number; w: number; h: number; } export interface Contour { /** Move the surface to `box` (in its offset parent's coordinates). `instant` places it with no motion. */ to(box: ContourBox, options?: { instant?: boolean }): void; /** Stop and leave the surface at its target. */ destroy(): void; } type Point = [number, number]; type Corner = "tl" | "tr" | "br" | "bl"; type Edge = "t" | "r" | "b" | "l"; const CORNERS: Corner[] = ["tl", "tr", "br", "bl"]; const EDGES: Edge[] = ["t", "r", "b", "l"]; /** Outward direction of each corner, for deciding which one leads. */ const OUT: Record = { tl: [-1, -1], tr: [1, -1], br: [1, 1], bl: [-1, 1] }; /** Outward direction of each edge. */ const NORMAL: Record = { t: [0, -1], r: [1, 0], b: [0, 1], l: [-1, 0] }; /** Settles at the motion-token morph spring at the foundation default. */ const BASE_RESPONSE = 0.26; interface Mechanics { spread: number; front: number; waist: number; weight: number; /** The colour of the edge drawn along a non-rectangular outline (the look's hairline, which a clip would cut off). */ rim: string; rimWidth: number; } /** One step of a critically damped spring with response time `t` (s), in closed form so a long frame cannot explode. */ function step(x: number, v: number, target: number, t: number, dt: number): [number, number] { const w = (2 * Math.PI) / (t * 1.2); const d = x - target; const e = Math.exp(-w * dt); return [target + (d + (v + w * d) * dt) * e, (v - w * (v + w * d) * dt) * e]; } const cornersOf = (b: ContourBox): Record => ({ tl: [b.x, b.y], tr: [b.x + b.w, b.y], br: [b.x + b.w, b.y + b.h], bl: [b.x, b.y + b.h], }); const midsOf = (c: Record): Record => ({ t: [(c.tl[0] + c.tr[0]) / 2, (c.tl[1] + c.tr[1]) / 2], r: [(c.tr[0] + c.br[0]) / 2, (c.tr[1] + c.br[1]) / 2], b: [(c.br[0] + c.bl[0]) / 2, (c.br[1] + c.bl[1]) / 2], l: [(c.bl[0] + c.tl[0]) / 2, (c.bl[1] + c.tl[1]) / 2], }); const zero = (keys: K[]) => Object.fromEntries(keys.map((k) => [k, [0, 0]])) as Record; const num = (style: CSSStyleDeclaration, name: string, fallback: number) => { const value = Number.parseFloat(style.getPropertyValue(name)); return Number.isFinite(value) ? value : fallback; }; /** All moving contours share one frame loop, which stops when the last one settles. */ const moving = new Set<(dt: number) => boolean>(); let frame = 0; let last = 0; function tick(now: number) { const dt = Math.min(0.032, Math.max(0.001, (now - last) / 1000)); last = now; for (const advance of moving) if (!advance(dt)) moving.delete(advance); frame = moving.size ? requestAnimationFrame(tick) : 0; } function run(advance: (dt: number) => boolean) { moving.add(advance); if (!frame) { last = performance.now(); frame = requestAnimationFrame(tick); } } /** One contour per element, so a remount (or React's development double mount) keeps its place and keeps moving. */ const contours = new WeakMap(); export function createContour(el: HTMLElement): Contour { const existing = contours.get(el); if (existing) return existing; let target: ContourBox | null = null; let pos: Record | null = null; let vel = zero(CORNERS); let mid: Record = { t: [0, 0], r: [0, 0], b: [0, 0], l: [0, 0] }; let midVel = zero(EDGES); let mech: Mechanics = { spread: 0.35, front: 5, waist: 0.16, weight: 1, rim: "none", rimWidth: 1 }; let rimPath: SVGPathElement | null = null; const rim = (d: string | null, w = 0, h = 0) => { if (!d || mech.rim === "none") { if (rimPath) (rimPath.ownerSVGElement as SVGSVGElement).style.display = "none"; return; } if (!rimPath) { const ns = "http://www.w3.org/2000/svg"; const svg = el.ownerDocument.createElementNS(ns, "svg"); svg.setAttribute("aria-hidden", "true"); svg.setAttribute("data-contour-rim", ""); svg.style.cssText = "position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none"; rimPath = el.ownerDocument.createElementNS(ns, "path"); rimPath.setAttribute("fill", "none"); svg.appendChild(rimPath); el.appendChild(svg); } const svg = rimPath.ownerSVGElement as SVGSVGElement; svg.style.display = ""; svg.setAttribute("width", String(w)); svg.setAttribute("height", String(h)); rimPath.setAttribute("d", d); // the clip keeps the inner half of the stroke: an edge of rimWidth inside the outline rimPath.setAttribute("stroke-width", String(mech.rimWidth * 2)); rimPath.style.stroke = mech.rim; }; let response = BASE_RESPONSE; let radius = 0; let running = false; const rest = () => { if (!target) return; el.style.transform = `translate(${target.x}px, ${target.y}px)`; el.style.width = `${target.w}px`; el.style.height = `${target.h}px`; el.style.clipPath = ""; rim(null); delete el.dataset.morphing; }; const draw = () => { if (!pos || !target) return; const c = pos; const w = (c.tr[0] - c.tl[0] + c.br[0] - c.bl[0]) / 2; const h = (c.bl[1] - c.tl[1] + c.br[1] - c.tr[1]) / 2; // the long edges pinch while the shape is longer than its target (area kept, roughly) const pinchY = Math.min(h * mech.waist * 0.5, 4, h * Math.max(0, w / target.w - 1) * mech.waist); const pinchX = Math.min(w * mech.waist * 0.5, 4, w * Math.max(0, h / target.h - 1) * mech.waist); const edges: Record = { t: [mid.t[0], mid.t[1] + pinchY], b: [mid.b[0], mid.b[1] - pinchY], l: [mid.l[0] + pinchX, mid.l[1]], r: [mid.r[0] - pinchX, mid.r[1]], }; // still a rectangle (a rigid look, or a straight move): move the box itself and keep every bit of the look's paint const flat = (a: number, b: number) => Math.abs(a - b) < 0.35; const corners = midsOf(c); if ( flat(c.tl[1], c.tr[1]) && flat(c.bl[1], c.br[1]) && flat(c.tl[0], c.bl[0]) && flat(c.tr[0], c.br[0]) && EDGES.every((k) => flat(edges[k][0], corners[k][0]) && flat(edges[k][1], corners[k][1])) ) { el.style.transform = `translate(${c.tl[0]}px, ${c.tl[1]}px)`; el.style.width = `${c.tr[0] - c.tl[0]}px`; el.style.height = `${c.bl[1] - c.tl[1]}px`; el.style.clipPath = ""; rim(null); return; } const all = [...CORNERS.map((k) => c[k]), ...EDGES.map((k) => edges[k])]; const minX = Math.floor(Math.min(...all.map((p) => p[0]))) - 1; const minY = Math.floor(Math.min(...all.map((p) => p[1]))) - 1; const maxX = Math.ceil(Math.max(...all.map((p) => p[0]))) + 1; const maxY = Math.ceil(Math.max(...all.map((p) => p[1]))) + 1; const local = (p: Point): Point => [p[0] - minX, p[1] - minY]; const C = CORNERS.map((k) => local(c[k])); const E = (["t", "r", "b", "l"] as Edge[]).map((k) => local(edges[k])); const len = (a: Point, b: Point) => Math.hypot(b[0] - a[0], b[1] - a[1]) || 1; const toward = (a: Point, b: Point, d: number): Point => { const l = len(a, b); return [a[0] + ((b[0] - a[0]) / l) * d, a[1] + ((b[1] - a[1]) / l) * d]; }; // each corner backs off its radius along both of its real edges and turns through the corner itself, so a sheared // shape never folds over; each edge bows through its midpoint // a moving drop is round: corners grow toward a capsule while the shape is stretched or far from home const away = Math.max(w / target.w - 1, h / target.h - 1, 0); const round = mech.front > 0 ? Math.min(1, away * 2.5) : 0; const r = radius + (Math.min(w, h) / 2 - radius) * Math.max(0, round); const rr = C.map((p, i) => Math.min(r, len(p, C[(i + 1) % 4]) / 2.2, len(p, C[(i + 3) % 4]) / 2.2)); const into = C.map((p, i) => toward(p, C[(i + 3) % 4], rr[i])); const out = C.map((p, i) => toward(p, C[(i + 1) % 4], rr[i])); const through = (a: Point, m: Point, b: Point): Point => [ 2 * m[0] - (a[0] + b[0]) / 2, 2 * m[1] - (a[1] + b[1]) / 2, ]; const f = (p: Point) => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`; let d = `M${f(out[0])}`; for (let i = 0; i < 4; i++) { const j = (i + 1) % 4; // an edge the rounded corners have nearly used up can only bow a little, or its middle would point const a = out[i]; const b = into[j]; const chord: Point = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]; const bow: Point = [E[i][0] - chord[0], E[i][1] - chord[1]]; const most = len(a, b) * 0.18; const bowLen = Math.hypot(bow[0], bow[1]); const m: Point = bowLen > most ? [chord[0] + (bow[0] / bowLen) * most, chord[1] + (bow[1] / bowLen) * most] : E[i]; d += ` Q${f(through(a, m, b))} ${f(b)} Q${f(C[j])} ${f(out[j])}`; } el.style.transform = `translate(${minX}px, ${minY}px)`; el.style.width = `${maxX - minX}px`; el.style.height = `${maxY - minY}px`; el.style.clipPath = `path("${d}Z")`; rim(`${d}Z`, maxX - minX, maxY - minY); }; const advance = (dt: number) => { if (!pos || !target || !el.isConnected) return (running = false); const goal = cornersOf(target); let busy = false; for (const k of CORNERS) { const p = pos[k]; const v = vel[k]; const g = goal[k]; const dx = g[0] - p[0]; const dy = g[1] - p[1]; const dist = Math.hypot(dx, dy); // -1 … 1: how squarely this corner faces the way it is going const along = dist > 0.5 ? (OUT[k][0] * dx + OUT[k][1] * dy) / (dist * Math.SQRT2) : 0; const t = response * (1 + mech.spread * 0.4 - mech.spread * along); for (const a of [0, 1] as const) { [p[a], v[a]] = step(p[a], v[a], g[a], t, dt); if (Math.abs(p[a] - g[a]) > 0.2 || Math.abs(v[a]) > 4) busy = true; } } const now = midsOf(pos); const aim = midsOf(goal); for (const k of EDGES) { for (const a of [0, 1] as const) [mid[k][a], midVel[k][a]] = step(mid[k][a], midVel[k][a], aim[k][a], response * 0.75, dt); // the lead is a few pixels at most, and never more than a fraction of the edge or of the shape's depth const across = k === "t" || k === "b" ? target.h : target.w; const edge = k === "t" ? [pos.tl, pos.tr] : k === "b" ? [pos.br, pos.bl] : k === "l" ? [pos.bl, pos.tl] : [pos.tr, pos.br]; const limit = Math.min( mech.front, across * 0.3, Math.hypot(edge[1][0] - edge[0][0], edge[1][1] - edge[0][1]) * 0.15, ); // edges only ever bulge outward: the front rounds out, the tail stays smooth instead of curling in let ox = mid[k][0] - now[k][0]; let oy = mid[k][1] - now[k][1]; const [nx, ny] = NORMAL[k]; const inward = ox * nx + oy * ny; if (inward < 0) { ox -= inward * nx; oy -= inward * ny; mid[k][0] = now[k][0] + ox; mid[k][1] = now[k][1] + oy; } const off = Math.hypot(ox, oy); if (off > limit) { mid[k][0] = now[k][0] + (ox / off) * limit; mid[k][1] = now[k][1] + (oy / off) * limit; } if (Math.abs(mid[k][0] - aim[k][0]) > 0.2 || Math.abs(mid[k][1] - aim[k][1]) > 0.2) busy = true; } if (!busy) { pos = goal; vel = zero(CORNERS); mid = midsOf(goal); midVel = zero(EDGES); rest(); return (running = false); } draw(); return true; }; const contour: Contour = { to(box, options) { const same = target && target.x === box.x && target.y === box.y && target.w === box.w && target.h === box.h; if (same && !options?.instant) return; target = { ...box }; const style = getComputedStyle(el); const r = style.borderTopLeftRadius; radius = r.endsWith("%") ? (Number.parseFloat(r) / 100) * Math.min(box.w, box.h) : Number.parseFloat(r) || 0; mech = { spread: num(style, "--m-morph-spread", 0.35), front: num(style, "--m-morph-front", 6), waist: num(style, "--m-morph-waist", 0.18), weight: num(style, "--m-morph-weight", 1), rim: style.getPropertyValue("--m-morph-rim").trim() || "none", rimWidth: num(style, "--m-morph-rim-width", 1), }; const factor = readMotionFactor(el); response = BASE_RESPONSE * mech.weight * factor; // first placement, reduced motion, or a hidden surface: be there, with nothing to watch if (!pos || options?.instant || factor < 0.05 || !el.getClientRects().length) { pos = cornersOf(target); vel = zero(CORNERS); mid = midsOf(pos); midVel = zero(EDGES); moving.delete(advance); running = false; rest(); return; } el.dataset.morphing = ""; if (!running) { running = true; run(advance); } }, destroy() { moving.delete(advance); running = false; if (target) rest(); }, }; contours.set(el, contour); return contour; } cd:T10a7,/** * Keeping a keyboard user's place when something disappears. Removing the element that has focus (a dismissed alert, * a removed chip or file, a deleted row) drops focus on , and the next Tab starts at the top of the page. */ const TABBABLE = "a[href], button, input:not([type=hidden]), select, textarea, [tabindex], [contenteditable=true]"; function tabbables(scope: Element) { // a modal layer (menu, dialog) marks the rest of the page aria-hidden while it is open (data-aria-hidden): that // content is still where focus should land once the layer closes return [...scope.querySelectorAll(TABBABLE)].filter( (e) => e.tabIndex >= 0 && !e.matches(":disabled") && !e.closest("[inert], [aria-hidden=true]:not([data-aria-hidden])") && e.getClientRects().length > 0, ); } /** The control after `item` in reading order (outside it), or the one before it. */ function neighbour(item: Element, scope: Element) { const all = tabbables(scope).filter((e) => !item.contains(e)); return ( all.find((e) => item.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING) ?? all.reverse().find((e) => item.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) ?? null ); } /** * Call just before `item` is removed or hidden: if focus is inside it, focus moves to the next control after it (or * the one before). `scope` keeps the search inside a widget (a toolbar, a field); `fallback` is used when the scope has * nothing else to focus. Does nothing when focus is elsewhere, so a removal the user did not start never steals focus. */ export function focusAfterRemoval( item: Element | null | undefined, { scope, fallback }: { scope?: Element | null; fallback?: HTMLElement | null } = {}, ) { if (!item || !item.contains(document.activeElement)) return; (neighbour(item, scope ?? document.body) ?? fallback)?.focus(); } /** * For an action that may or may not remove its item (the app decides, as with a row's Delete): call before running it. * If the item is gone afterwards and focus fell to the page, focus moves to the control that followed it. */ export function keepPlaceIfRemoved(item: Element | null | undefined, { scope }: { scope?: Element | null } = {}) { if (!item) return; const target = neighbour(item, scope ?? document.body); const check = () => { if ( !item.isConnected && (!document.activeElement || document.activeElement === document.body) && target?.isConnected ) target.focus(); }; setTimeout(check, 0); setTimeout(check, 400); // after an exit animation } /** * A press on a part's surface that hands focus to its control (a slider's well, a mark under its track): call from the * pointerdown. Focus goes to `control` without the keyboard's ring (`focusVisible: false`, so the part does not switch * to its keyboard look after a click). A mouse press is also followed by the browser's own focus step, which moves * focus to the nearest focusable ancestor or the page and leaves the arrow keys dead after the click; that step is * cancelled for this one press (and the press selects no text). Cancelling the pointerdown instead would also hide the * click from the browser, which then reads the focus as the keyboard's. A control a keyboard user already focused keeps * its ring. */ export function focusFromPress( control: HTMLElement | null | undefined, event: PointerEvent | { nativeEvent: PointerEvent }, ) { if (!control) return; const pointer = "nativeEvent" in event ? event.nativeEvent : event; // asserted, not declared globally: shipped source must type-check without this repo's globals.d.ts, on the // TypeScript an app already has (create-next-app installs 5.9, whose DOM lib lacks focusVisible) control.focus({ preventScroll: true, focusVisible: false } as FocusOptions); // the mouse's compatibility events follow the pointerdown in the same task; a finger's arrive only after a tap if (pointer.pointerType !== "mouse") return; const cancel = (e: MouseEvent) => e.preventDefault(); window.addEventListener("mousedown", cancel, { capture: true, once: true }); setTimeout(() => window.removeEventListener("mousedown", cancel, { capture: true }), 0); } ce:T181d,import { readMotionFactor } from "./motion-tokens"; /** * The arithmetic of a hand on a part, shared by every part that is dragged, thrown or pulled (useDrag is the pointer * side). Three pieces, each from how real interfaces feel (Apple, "Designing Fluid Interfaces", WWDC 2018): * * - velocity: read from the last ~100 ms of movement, so the release carries the speed of the flick, not of the whole drag; * - projection: where a thrown thing would come to rest if it slid on with the look's carry (`project`), so a part * can decide on release (the nearest value, step or preset to that point) instead of after an animation; * - give: past a limit the part follows the hand less and less (`rubberband`) instead of stopping dead, and springs back. * * How much a part carries and gives is the look's material, read once per gesture from the element (`readHand`): * `--m-hand-carry`, `--m-hand-give` and `--m-hand-bounce` (preset-source.css), with `--m-morph-weight` scaling how * long things take to settle (times a motion token's duration, which carries the speed setting). Reduced motion * carries nothing, gives nothing and never bounces. */ export interface Hand { /** How far a release carries: 0 stops where the hand let go, 1 slides on freely (see `project`). */ carry: number; /** How much a part follows the hand past a limit: 0 is a hard stop, 0.55 a phone's rubber band. */ give: number; /** Bounce of a released held object (0 critically damped). Only for what the pointer held. */ bounce: number; /** The look's weight (`--m-morph-weight`): multiply a motion token's duration by it. The token already carries the * speed setting, so the weight never does. */ weight: number; /** Reduced or no motion: land at once. */ reduced: boolean; } /** The hand the defaults describe; also what a server or a test without styles gets. */ export const DEFAULT_HAND: Hand = { carry: 0.8, give: 0.45, bounce: 0.14, weight: 1, reduced: false }; const num = (style: CSSStyleDeclaration, name: string, fallback: number) => { const v = Number.parseFloat(style.getPropertyValue(name)); return Number.isFinite(v) ? v : fallback; }; /** The look's physics at `el`, read once at the start of a gesture (never per frame). */ export function readHand(el: Element | null | undefined): Hand { if (!el || typeof getComputedStyle === "undefined") return DEFAULT_HAND; const style = getComputedStyle(el); const factor = readMotionFactor(el); // the motion factor is ~0.005 under reduced motion and 1 at the foundation default const reduced = factor < 0.05; if (reduced) return { carry: 0, give: 0, bounce: 0, weight: 1, reduced: true }; return { carry: num(style, "--m-hand-carry", DEFAULT_HAND.carry), give: num(style, "--m-hand-give", DEFAULT_HAND.give), bounce: num(style, "--m-hand-bounce", DEFAULT_HAND.bounce), weight: num(style, "--m-morph-weight", 1), reduced: false, }; } /** Samples of a pointer's path, kept for the last `window` ms, to read its velocity at release. */ export class VelocityTracker { private samples: { t: number; x: number; y: number }[] = []; // a declared field, not a parameter property: shipped source must also compile under erasableSyntaxOnly (Vite's // TypeScript template turns it on), where TypeScript-only syntax with runtime meaning is refused private readonly window: number; constructor(window = 100) { this.window = window; } add(t: number, x: number, y: number) { this.samples.push({ t, x, y }); const from = t - this.window; while (this.samples.length > 2 && this.samples[0].t < from) this.samples.shift(); } /** Units per second over the kept window; 0 when the hand stopped before letting go (a pause of more than the window). */ velocity(now = this.samples.at(-1)?.t ?? 0): [number, number] { const s = this.samples.filter((p) => p.t >= now - this.window); if (s.length < 2) return [0, 0]; // least squares slope over the window: one jittery last sample does not decide the throw const n = s.length; const mt = s.reduce((a, p) => a + p.t, 0) / n; const mx = s.reduce((a, p) => a + p.x, 0) / n; const my = s.reduce((a, p) => a + p.y, 0) / n; let tt = 0; let tx = 0; let ty = 0; for (const p of s) { tt += (p.t - mt) ** 2; tx += (p.t - mt) * (p.x - mx); ty += (p.t - mt) * (p.y - my); } if (tt === 0) return [0, 0]; return [(tx / tt) * 1000, (ty / tt) * 1000]; } reset() { this.samples = []; } } /** * How far something released at `velocity` (units/s) slides before friction stops it, with the look's carry. `rate` is * the speed kept per millisecond: 0.99 (the default) suits controls on a short scale (a thumb, a puck, a cut), where a * flick should carry a little way; 0.998 is a phone list's deceleration, for long scrolling content. */ export function project(velocity: number, carry: number, rate = 0.99): number { if (carry <= 0) return 0; return (((velocity / 1000) * rate) / (1 - rate)) * carry; } /** * Where a part drawn `overshoot` units past its limit sits, given the room `extent` it moves in: it follows less and * less the further it goes and never reaches `extent`. `give` 0 is a hard stop. */ export function rubberband(overshoot: number, extent: number, give: number): number { if (give <= 0 || extent <= 0) return 0; const sign = Math.sign(overshoot); const x = Math.abs(overshoot); return sign * (1 - 1 / ((x * give) / extent + 1)) * extent; } /** `value` held inside [min, max], with the part's give past either end. */ export function within(value: number, min: number, max: number, extent: number, give: number): number { if (value < min) return min + rubberband(value - min, extent, give); if (value > max) return max + rubberband(value - max, extent, give); return value; } /** The nearest of `stops` to `value` (a projected landing point picks its step or preset this way). */ export function nearest(value: number, stops: readonly number[]): number { let best = stops[0]; for (const s of stops) if (Math.abs(s - value) < Math.abs(best - value)) best = s; return best; } cf:T8af,import type { ReactNode } from "react"; export interface ListWindowProps { /** Enable page controls explicitly. Page-related props also enable them, unless onEndReached is supplied. */ pagination?: boolean; /** One-based requested page. Default 1. */ page?: number; defaultPage?: number; onPageChange?: (page: number) => void; /** Positive rows per page. Default 25. */ pageSize?: number; defaultPageSize?: number; onPageSizeChange?: (pageSize: number) => void; /** Total matching rows on the server. null means unknown. Local grids calculate it before slicing. */ rowCount?: number | null; /** @deprecated Use rowCount. Canonical rowCount wins, including null. */ total?: number | null; /** Append mode: fetch another batch. The app appends it to the supplied rows. */ onEndReached?: () => void | Promise; /** Whether another batch exists; defaults to true with onEndReached. False stops requests. */ hasMore?: boolean; /** An append request is pending; retain every loaded row. */ loadingMore?: boolean; } export type ListSort = { id: string; desc: boolean }[]; export type ListFilters = Record; /** Shared record-list contract. The app owns requests, cancellation and server mutations. */ export interface ListProps extends ListWindowProps { /** Server owns ordering, filters, search and page slicing. Default false. */ manual?: boolean; sort?: ListSort; defaultSort?: ListSort; onSortChange?: (sort: ListSort) => void; filters?: ListFilters; defaultFilters?: ListFilters; onFiltersChange?: (filters: ListFilters) => void; query?: string; defaultQuery?: string; onQueryChange?: (query: string) => void; /** Stable row IDs, retained across server pages. */ selected?: string[]; defaultSelected?: string[]; onSelectedChange?: (ids: string[]) => void; selectable?: boolean; loading?: boolean; /** Errors retain the last completed rows. Error objects are rendered by their message. */ error?: ReactNode | Error; onRetry?: () => void | Promise; emptyLabel?: string; allowSelectAllMatching?: boolean; onSelectAllMatching?: (scope: { rowCount: number; query: string; filters: ListFilters }) => void; } d0:T6f0,import { useContext, useLayoutEffect, useMemo, useState, useSyncExternalStore } from "react"; import { ActivityContext } from "../runtime/activity"; /* * The time, read only in the browser. A component that reads the clock while it renders breaks server rendering: * Next.js refuses to prerender a page that does ("encountered the unstable value `new Date()` in a Client Component", * create-next-app's default since 16), and any server's time differs from the browser's at hydration. These hooks give * null on the server and while hydrating, and the real value in the browser before the first paint. */ const still = () => () => {}; const startOfToday = () => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); }; const onServer = () => null; /** Today at 00:00 local time; null on the server and while hydrating. */ export function useToday(): Date | null { const day = useSyncExternalStore(still, startOfToday, onServer); return useMemo(() => (day === null ? null : new Date(day)), [day]); } /** The time in ms, read before the first paint and again every `every` ms while `ticking`; null on the server. */ export function useNow(ticking = false, every = 1000, until?: number): number | null { const active = useContext(ActivityContext); const [now, setNow] = useState(null); // A finite deadline must reach its completion callback even when the host is idle, then stop ticking. const running = ticking && (until === undefined ? active : now === null || now < until); useLayoutEffect(() => { setNow(Date.now()); if (!running) return; const id = setInterval(() => setNow(Date.now()), every); return () => clearInterval(id); }, [running, every, until]); return now; } d1:Td94,import { createFormatters, FALLBACK_LOCALE } from "../runtime/messages"; /** Reads a number typed in `locale` ("1.234,5" in de, "1,234.5" in en): group separators dropped, the locale's decimal * mark read as the point, currency signs and units ignored. Empty or unreadable text is null; nothing is clamped. */ export function parseLocaleNumber(text: string, locale?: string): number | null { if (!text.trim()) return null; // exponent form: "1e3" is a thousand and "2.5e-3" a fraction (the digits are never run together into 13) const exp = text.trim().match(/^(.*\d)\s*e\s*([+\u2212-]?\d+)$/i); if (exp) { const base = parseLocaleNumber(exp[1], locale); return base === null ? null : Number((base * 10 ** Number(exp[2].replace("\u2212", "-"))).toPrecision(15)); } const parts = new Intl.NumberFormat(locale).formatToParts(12345.6); const group = parts.find((p) => p.type === "group")?.value ?? ","; const decimal = parts.find((p) => p.type === "decimal")?.value ?? "."; let ascii = text; // one grouping mark that cannot group (not three digits after it) and no decimal mark: the decimal was written the // other locale's way ("1,5" in English is one and a half, never fifteen) const marks = text.split(group).length - 1; if (marks === 1 && !text.includes(decimal) && !new RegExp(`\\${group}\\d{3}(?!\\d)`).test(text)) ascii = text.replace(group, decimal); if (/[^\p{ASCII}]/u.test(text)) { const digits = new Intl.NumberFormat(locale, { useGrouping: false }); for (let value = 0; value < 10; value++) ascii = ascii.replaceAll(digits.format(value), String(value)); } const normalized = ascii .replaceAll(group, "") .replaceAll("\u202f", "") .replace(decimal, ".") .replace(/[\u2212\u2013]/g, "-") .replace(/[^\d.-]/g, ""); if (!/\d/.test(normalized)) return null; const n = Number(normalized); return Number.isFinite(n) ? n : null; } const formatters = new Map(); /** A number written from serializable settings, so a server component can pass them where a `format` function cannot * cross: Intl options in a locale, with words before and after ("$" … " / mo"). One Intl.NumberFormat per setting. */ export function formatNumber( value: number, { locale, formatOptions, prefix = "", suffix = "" }: NumberFormatSettings = {}, ): string { const key = `${locale ?? ""}|${JSON.stringify(formatOptions ?? {})}`; let f = formatters.get(key); if (!f) formatters.set(key, (f = new Intl.NumberFormat(locale, formatOptions))); return `${prefix}${f.format(value)}${suffix}`; } export interface NumberFormatSettings { locale?: string; formatOptions?: Intl.NumberFormatOptions; /** Written before the number: "$". */ prefix?: string; /** Written after the number: " ms", " / mo". */ suffix?: string; } /** Binary-scaled file sizes; the digits and unit names follow the supplied locale. */ export function formatByteSize(bytes: number, locale = FALLBACK_LOCALE, maximumUnit = 3, fractionDigits?: number) { const units = ["byte", "kilobyte", "megabyte", "gigabyte"]; let value = bytes, unit = 0; while (value >= 1024 && unit < maximumUnit) { value /= 1024; unit++; } const digits = fractionDigits ?? (value < 10 && unit > 0 ? 1 : 0); return createFormatters(locale).number(value, { style: "unit", unit: units[unit], unitDisplay: "short", minimumFractionDigits: digits, maximumFractionDigits: digits, }); } d2:T63d,import { clsx, type ClassValue } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; /* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other. Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it, and every merged page title lost the look's display face. */ const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-weight": [{ font: ["title"] }], "font-family": [{ font: ["display", "numeric", "figure"] }], "font-size": [ { text: [ "2xs", "display", "title", "heading", "subheading", "body", "body-sm", "reading", "label", "caption", "overline", "numeric", "code", ], }, ], }, }, }); /** Merge class names, letting later Tailwind utilities win over earlier ones. */ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } /** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */ export function rng(seed = 1) { let s = seed >>> 0 || 1; return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32; } export const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); 6e:["$","$L70",null,{"files":[{"path":"beamline/blocks/settings/messages.ts","content":"$71","type":"registry:file","target":"src/ui/beamline/blocks/settings/messages.ts"},{"path":"beamline/blocks/settings/settings.module.css","content":"$72","type":"registry:file","target":"src/ui/beamline/blocks/settings/settings.module.css"},{"path":"beamline/blocks/settings/settings.tsx","content":"$73","type":"registry:file","target":"src/ui/beamline/blocks/settings/settings.tsx"},{"path":"beamline/components/_shared/chip.tsx","content":"$74","type":"registry:file","target":"src/ui/beamline/components/_shared/chip.tsx"},{"path":"beamline/components/_shared/delta-ghost.module.css","content":"$75","type":"registry:file","target":"src/ui/beamline/components/_shared/delta-ghost.module.css"},{"path":"beamline/components/_shared/delta-ghost.tsx","content":"$76","type":"registry:file","target":"src/ui/beamline/components/_shared/delta-ghost.tsx"},{"path":"beamline/components/_shared/field.module.css","content":"$77","type":"registry:file","target":"src/ui/beamline/components/_shared/field.module.css"},{"path":"beamline/components/_shared/field.tsx","content":"$78","type":"registry:file","target":"src/ui/beamline/components/_shared/field.tsx"},{"path":"beamline/components/_shared/fold-more.tsx","content":"$79","type":"registry:file","target":"src/ui/beamline/components/_shared/fold-more.tsx"},{"path":"beamline/components/_shared/glide.tsx","content":"$7a","type":"registry:file","target":"src/ui/beamline/components/_shared/glide.tsx"},{"path":"beamline/components/_shared/icon-action.module.css","content":"$7b","type":"registry:file","target":"src/ui/beamline/components/_shared/icon-action.module.css"},{"path":"beamline/components/_shared/icon-action.tsx","content":"$7c","type":"registry:file","target":"src/ui/beamline/components/_shared/icon-action.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/_shared/list-controls.messages.ts"},{"path":"beamline/components/_shared/list-controls.tsx","content":"$7d","type":"registry:file","target":"src/ui/beamline/components/_shared/list-controls.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/_shared/list-feedback.messages.ts"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/_shared/list-state.messages.ts"},{"path":"beamline/components/_shared/list-state.ts","content":"$7e","type":"registry:file","target":"src/ui/beamline/components/_shared/list-state.ts"},{"path":"beamline/components/_shared/listbox.tsx","content":"$7f","type":"registry:file","target":"src/ui/beamline/components/_shared/listbox.tsx"},{"path":"beamline/components/_shared/match.tsx","content":"$80","type":"registry:file","target":"src/ui/beamline/components/_shared/match.tsx"},{"path":"beamline/components/_shared/menu.tsx","content":"$81","type":"registry:file","target":"src/ui/beamline/components/_shared/menu.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/_shared/messages.ts"},{"path":"beamline/components/_shared/overlay.module.css","content":"$82","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css"},{"path":"beamline/components/_shared/record-list.ts","content":"$83","type":"registry:file","target":"src/ui/beamline/components/_shared/record-list.ts"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/_shared/retained-rows.ts"},{"path":"beamline/components/_shared/roll.ts","content":"$84","type":"registry:file","target":"src/ui/beamline/components/_shared/roll.ts"},{"path":"beamline/components/_shared/use-open-from.ts","content":"$85","type":"registry:file","target":"src/ui/beamline/components/_shared/use-open-from.ts"},{"path":"beamline/components/_shared/use-return-focus.ts","content":"$86","type":"registry:file","target":"src/ui/beamline/components/_shared/use-return-focus.ts"},{"path":"beamline/components/alert-dialog/alert-dialog.tsx","content":"$87","type":"registry:file","target":"src/ui/beamline/components/alert-dialog/alert-dialog.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/alert-dialog/messages.ts"},{"path":"beamline/components/alert/alert.module.css","content":"$88","type":"registry:file","target":"src/ui/beamline/components/alert/alert.module.css"},{"path":"beamline/components/alert/alert.tsx","content":"$89","type":"registry:file","target":"src/ui/beamline/components/alert/alert.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/alert/defaults.ts"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/alert/messages.ts"},{"path":"beamline/components/avatar/avatar.module.css","content":"$8a","type":"registry:file","target":"src/ui/beamline/components/avatar/avatar.module.css"},{"path":"beamline/components/avatar/avatar.tsx","content":"$8b","type":"registry:file","target":"src/ui/beamline/components/avatar/avatar.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/avatar/defaults.ts"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/avatar/messages.ts"},{"path":"beamline/components/badge/badge.module.css","content":"$8c","type":"registry:file","target":"src/ui/beamline/components/badge/badge.module.css"},{"path":"beamline/components/badge/badge.tsx","content":"$8d","type":"registry:file","target":"src/ui/beamline/components/badge/badge.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/badge/defaults.ts"},{"path":"beamline/components/bottom-sheet/bottom-sheet.tsx","content":"$8e","type":"registry:file","target":"src/ui/beamline/components/bottom-sheet/bottom-sheet.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/bottom-sheet/messages.ts"},{"path":"beamline/components/button/button-variants.ts","content":"$8f","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts"},{"path":"beamline/components/button/button.module.css","content":"$90","type":"registry:file","target":"src/ui/beamline/components/button/button.module.css"},{"path":"beamline/components/button/button.tsx","content":"$91","type":"registry:file","target":"src/ui/beamline/components/button/button.tsx"},{"path":"beamline/components/button/defaults.ts","content":"import type { ButtonSize, ButtonTone, ButtonVariant } from \"./button-variants\";\n/** Scoped design choices only; no loading, events or domain state. */\nexport interface ButtonDefaults {\n variant?: ButtonVariant;\n size?: ButtonSize;\n tone?: ButtonTone;\n}\n","type":"registry:file","target":"src/ui/beamline/components/button/defaults.ts"},{"path":"beamline/components/button/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 working: \"Working\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/button/messages.ts"},{"path":"beamline/components/button/motion-features.ts","content":"// REASON: Motion's DOM animation features (tween, spring, presence, press) are loaded after the first paint, so a\n// Button costs a small part of Motion on first load; LazyMotion in button.tsx renders until they arrive.\nimport { domAnimation } from \"motion/react\";\n\nexport default domAnimation;\n","type":"registry:file","target":"src/ui/beamline/components/button/motion-features.ts"},{"path":"beamline/components/checkbox/checkbox.module.css","content":"$92","type":"registry:file","target":"src/ui/beamline/components/checkbox/checkbox.module.css"},{"path":"beamline/components/checkbox/checkbox.tsx","content":"$93","type":"registry:file","target":"src/ui/beamline/components/checkbox/checkbox.tsx"},{"path":"beamline/components/chip-group/chip-group.module.css","content":"$94","type":"registry:file","target":"src/ui/beamline/components/chip-group/chip-group.module.css"},{"path":"beamline/components/chip-group/chip-group.tsx","content":"$95","type":"registry:file","target":"src/ui/beamline/components/chip-group/chip-group.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/chip-group/messages.ts"},{"path":"beamline/components/combobox/combobox.tsx","content":"$96","type":"registry:file","target":"src/ui/beamline/components/combobox/combobox.tsx"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/combobox/defaults.ts"},{"path":"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","type":"registry:file","target":"src/ui/beamline/components/combobox/messages.ts"},{"path":"beamline/components/copy-button/copy-button.tsx","content":"$97","type":"registry:file","target":"src/ui/beamline/components/copy-button/copy-button.tsx"},{"path":"beamline/components/copy-button/defaults.ts","content":"/** Pure allowed presentation defaults for CopyButton; no component or runtime imports. */\nexport interface CopyButtonDefaults {\n variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\" | \"plain\";\n size?: \"sm\" | \"md\" | \"lg\" | \"touch\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/copy-button/defaults.ts"},{"path":"beamline/components/copy-button/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Copy-button English defaults. Instance labels override these namespaced messages. */\nexport const english = {\n label: \"Copy\",\n copied: \"Copied\",\n error: \"Copy failed\",\n copiedDescription: \"Copied to clipboard\",\n errorDescription: \"Could not copy; select the text and copy it yourself\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/copy-button/messages.ts"},{"path":"beamline/components/dialog/defaults.ts","content":"export interface DialogDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/dialog/defaults.ts"},{"path":"beamline/components/dialog/dialog.tsx","content":"$98","type":"registry:file","target":"src/ui/beamline/components/dialog/dialog.tsx"},{"path":"beamline/components/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 dialog: \"Dialog\",\n close: \"Close\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/dialog/messages.ts"},{"path":"beamline/components/dropdown-menu/defaults.ts","content":"/** Pure allowed presentation defaults for DropdownMenu; no component or runtime imports. */\nexport interface DropdownMenuDefaults {\n /** Shared variant setting; omit to inherit the surrounding scope or the component default. */\n variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\" | \"touch\";\n /** Shared align setting; omit to inherit the surrounding scope or the component default. */\n align?: \"start\" | \"center\" | \"end\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/dropdown-menu/defaults.ts"},{"path":"beamline/components/dropdown-menu/dropdown-menu.tsx","content":"$99","type":"registry:file","target":"src/ui/beamline/components/dropdown-menu/dropdown-menu.tsx"},{"path":"beamline/components/glow/defaults.ts","content":"/** Pure allowed presentation defaults for Glow; no component or runtime imports. */\nexport interface GlowDefaults {\n /** Shared effect setting; omit to inherit the component default. Scoped defaults retain the legacy key variant. */\n variant?: \"aurora\" | \"ring\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/glow/defaults.ts"},{"path":"beamline/components/glow/glow.module.css","content":"$9a","type":"registry:file","target":"src/ui/beamline/components/glow/glow.module.css"},{"path":"beamline/components/glow/glow.tsx","content":"$9b","type":"registry:file","target":"src/ui/beamline/components/glow/glow.tsx"},{"path":"beamline/components/hold-to-confirm/defaults.ts","content":"/** Pure allowed presentation defaults for HoldToConfirm; no component or runtime imports. */\nexport interface HoldToConfirmDefaults {\n /** Shared tone setting; omit to inherit the surrounding scope or the component default. */\n tone?: \"danger\" | \"neutral\";\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\" | \"touch\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/hold-to-confirm/defaults.ts"},{"path":"beamline/components/hold-to-confirm/hold-to-confirm.module.css","content":"$9c","type":"registry:file","target":"src/ui/beamline/components/hold-to-confirm/hold-to-confirm.module.css"},{"path":"beamline/components/hold-to-confirm/hold-to-confirm.tsx","content":"$9d","type":"registry:file","target":"src/ui/beamline/components/hold-to-confirm/hold-to-confirm.tsx"},{"path":"beamline/components/hold-to-confirm/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 done: \"Done\",\n holdHint: {\n one: \"Press and hold for {count} second to confirm.\",\n other: \"Press and hold for {count} seconds to confirm.\",\n },\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/hold-to-confirm/messages.ts"},{"path":"beamline/components/input/defaults.ts","content":"export interface InputDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/input/defaults.ts"},{"path":"beamline/components/input/input.tsx","content":"$9e","type":"registry:file","target":"src/ui/beamline/components/input/input.tsx"},{"path":"beamline/components/item/defaults.ts","content":"/** Pure allowed presentation defaults for Item; no component or runtime imports. */\nexport interface ItemDefaults {\n /** Shared visual weight; ghost by default. @deprecated Use ghost for plain, or secondary for card. */\n variant?: \"ghost\" | \"outline\" | \"secondary\" | \"plain\" | \"card\";\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/item/defaults.ts"},{"path":"beamline/components/item/item.module.css","content":"$9f","type":"registry:file","target":"src/ui/beamline/components/item/item.module.css"},{"path":"beamline/components/item/item.tsx","content":"$a0","type":"registry:file","target":"src/ui/beamline/components/item/item.tsx"},{"path":"beamline/components/kbd/defaults.ts","content":"/** Pure allowed presentation defaults for Kbd; no component or runtime imports. */\nexport interface KbdDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/kbd/defaults.ts"},{"path":"beamline/components/kbd/kbd.module.css","content":"$a1","type":"registry:file","target":"src/ui/beamline/components/kbd/kbd.module.css"},{"path":"beamline/components/kbd/kbd.tsx","content":"$a2","type":"registry:file","target":"src/ui/beamline/components/kbd/kbd.tsx"},{"path":"beamline/components/kbd/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 then: \"then\",\n escapeShort: \"Esc\",\n space: \"Space\",\n controlShort: \"Ctrl\",\n alt: \"Alt\",\n shift: \"Shift\",\n enter: \"Enter\",\n backspace: \"Backspace\",\n tab: \"Tab\",\n command: \"Command\",\n control: \"Control\",\n option: \"Option\",\n up: \"Up\",\n down: \"Down\",\n left: \"Left\",\n right: \"Right\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/kbd/messages.ts"},{"path":"beamline/components/label/label.tsx","content":"$a3","type":"registry:file","target":"src/ui/beamline/components/label/label.tsx"},{"path":"beamline/components/label/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 required: \"required\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/label/messages.ts"},{"path":"beamline/components/pagination/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 label: \"Pagination\",\n noResults: \"No results\",\n of: \"{value}–{value2} of {value3}\",\n previousPage: \"Previous page\",\n page: \"Page {p}\",\n of2: \"{page} of {pageCount}\",\n page2: \"Page\",\n nextPage: \"Next page\",\n pageTotalUnknown: \"{page} · total unknown\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/pagination/messages.ts"},{"path":"beamline/components/pagination/pagination.tsx","content":"$a4","type":"registry:file","target":"src/ui/beamline/components/pagination/pagination.tsx"},{"path":"beamline/components/radio-cards/radio-cards.module.css","content":"$a5","type":"registry:file","target":"src/ui/beamline/components/radio-cards/radio-cards.module.css"},{"path":"beamline/components/radio-cards/radio-cards.tsx","content":"$a6","type":"registry:file","target":"src/ui/beamline/components/radio-cards/radio-cards.tsx"},{"path":"beamline/components/search-field/defaults.ts","content":"/** Pure allowed presentation defaults for SearchField; no component or runtime imports. */\nexport interface SearchFieldDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/search-field/defaults.ts"},{"path":"beamline/components/search-field/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 clearSearch: \"Clear search\",\n searching: \"Searching\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/search-field/messages.ts"},{"path":"beamline/components/search-field/search-field.tsx","content":"$a7","type":"registry:file","target":"src/ui/beamline/components/search-field/search-field.tsx"},{"path":"beamline/components/segmented-control/defaults.ts","content":"/** Pure allowed presentation defaults for SegmentedControl; no component or runtime imports. */\nexport interface SegmentedControlDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/segmented-control/defaults.ts"},{"path":"beamline/components/segmented-control/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 chooseOne: \"Choose one\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/segmented-control/messages.ts"},{"path":"beamline/components/segmented-control/segmented-control.module.css","content":"$a8","type":"registry:file","target":"src/ui/beamline/components/segmented-control/segmented-control.module.css"},{"path":"beamline/components/segmented-control/segmented-control.tsx","content":"$a9","type":"registry:file","target":"src/ui/beamline/components/segmented-control/segmented-control.tsx"},{"path":"beamline/components/select/defaults.ts","content":"export interface SelectDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/select/defaults.ts"},{"path":"beamline/components/select/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: \"Select\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/select/messages.ts"},{"path":"beamline/components/select/select.module.css","content":"$aa","type":"registry:file","target":"src/ui/beamline/components/select/select.module.css"},{"path":"beamline/components/select/select.tsx","content":"$ab","type":"registry:file","target":"src/ui/beamline/components/select/select.tsx"},{"path":"beamline/components/slot-text/defaults.ts","content":"/** Pure allowed presentation defaults for SlotText; no component or runtime imports. */\nexport interface SlotTextDefaults {\n /** Shared align setting; omit to inherit the surrounding scope or the component default. */\n align?: \"start\" | \"end\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/slot-text/defaults.ts"},{"path":"beamline/components/slot-text/slot-text.module.css","content":"$ac","type":"registry:file","target":"src/ui/beamline/components/slot-text/slot-text.module.css"},{"path":"beamline/components/slot-text/slot-text.tsx","content":"$ad","type":"registry:file","target":"src/ui/beamline/components/slot-text/slot-text.tsx"},{"path":"beamline/components/spinner/defaults.ts","content":"/** Pure allowed presentation defaults for Spinner; no component or runtime imports. */\nexport interface SpinnerDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/spinner/defaults.ts"},{"path":"beamline/components/spinner/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 label: \"Loading\",\n done: \"Done\",\n error: \"Failed\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/spinner/messages.ts"},{"path":"beamline/components/spinner/spinner.module.css","content":"$ae","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.module.css"},{"path":"beamline/components/spinner/spinner.tsx","content":"$af","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.tsx"},{"path":"beamline/components/switch/defaults.ts","content":"/** Pure allowed presentation defaults for Switch; no component or runtime imports. */\nexport interface SwitchDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/switch/defaults.ts"},{"path":"beamline/components/switch/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 saving: \"Saving\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/switch/messages.ts"},{"path":"beamline/components/switch/switch.module.css","content":"$b0","type":"registry:file","target":"src/ui/beamline/components/switch/switch.module.css"},{"path":"beamline/components/switch/switch.tsx","content":"$b1","type":"registry:file","target":"src/ui/beamline/components/switch/switch.tsx"},{"path":"beamline/components/table/defaults.ts","content":"export type TableDensity = \"compact\" | \"default\" | \"comfortable\";\nexport interface TableDefaults {\n /** Shared density setting; omit to inherit the surrounding scope or the component default. */\n density?: TableDensity;\n}\n","type":"registry:file","target":"src/ui/beamline/components/table/defaults.ts"},{"path":"beamline/components/table/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n label: \"Data\",\n panHint: \"Scroll sideways to compare columns\",\n search: \"Search {label}\",\n selected: \"{count} selected\",\n selectedHidden: \"{count} selected · {hidden} not shown\",\n clearSelection: \"Clear selection\",\n selectAllMatching: \"Select all {count} matching rows\",\n tryAgain: \"Try again\",\n loading: \"Loading…\",\n selectAllVisible: \"Select all visible rows\",\n selectRow: \"Select row {id}\",\n notMeasured: \"Not measured\",\n noRows: \"No rows match\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/table/messages.ts"},{"path":"beamline/components/table/record-table.tsx","content":"$b2","type":"registry:file","target":"src/ui/beamline/components/table/record-table.tsx"},{"path":"beamline/components/table/table.module.css","content":"$b3","type":"registry:file","target":"src/ui/beamline/components/table/table.module.css"},{"path":"beamline/components/table/table.tsx","content":"$b4","type":"registry:file","target":"src/ui/beamline/components/table/table.tsx"},{"path":"beamline/components/tag-input/defaults.ts","content":"/** Pure allowed presentation defaults for TagInput; no component or runtime imports. */\nexport interface TagInputDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/tag-input/defaults.ts"},{"path":"beamline/components/tag-input/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 remove: \"Remove {t}\",\n of: \"{max} of {max2}\",\n foldedUntilTheFieldHasFocus: \", {hidden} folded until the field has focus\",\n backspaceAgainRemoves: \"; Backspace again removes {value}\",\n limit: \"Up to {count} only.\",\n duplicate: \"“{value}” is already added.\",\n count: {\n one: \"{count} tag\",\n other: \"{count} tags\",\n },\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/tag-input/messages.ts"},{"path":"beamline/components/tag-input/tag-input.module.css","content":"$b5","type":"registry:file","target":"src/ui/beamline/components/tag-input/tag-input.module.css"},{"path":"beamline/components/tag-input/tag-input.tsx","content":"$b6","type":"registry:file","target":"src/ui/beamline/components/tag-input/tag-input.tsx"},{"path":"beamline/components/text-morph/text-morph.tsx","content":"$b7","type":"registry:file","target":"src/ui/beamline/components/text-morph/text-morph.tsx"},{"path":"beamline/components/toast/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 label: \"Notifications\",\n altT: \"{label} (Alt+T)\",\n dismiss: \"Dismiss\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/toast/messages.ts"},{"path":"beamline/components/toast/toast.module.css","content":"$b8","type":"registry:file","target":"src/ui/beamline/components/toast/toast.module.css"},{"path":"beamline/components/toast/toast.tsx","content":"$b9","type":"registry:file","target":"src/ui/beamline/components/toast/toast.tsx"},{"path":"beamline/components/tooltip/defaults.ts","content":"/** Pure allowed presentation defaults for Tooltip; no component or runtime imports. */\nexport interface TooltipDefaults {\n /** Shared align setting; omit to inherit the surrounding scope or the component default. */\n align?: \"start\" | \"center\" | \"end\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/tooltip/defaults.ts"},{"path":"beamline/components/tooltip/tooltip.module.css","content":"$ba","type":"registry:file","target":"src/ui/beamline/components/tooltip/tooltip.module.css"},{"path":"beamline/components/tooltip/tooltip.tsx","content":"$bb","type":"registry:file","target":"src/ui/beamline/components/tooltip/tooltip.tsx"},{"path":"beamline/components/usage-meter/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 freeLabel: \"left\",\n overLabel: \"over\",\n of: \"of {value}\",\n valueText: \"{used} of {limit}, {remaining} {label}\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/usage-meter/messages.ts"},{"path":"beamline/components/usage-meter/usage-meter.module.css","content":"$bc","type":"registry:file","target":"src/ui/beamline/components/usage-meter/usage-meter.module.css"},{"path":"beamline/components/usage-meter/usage-meter.tsx","content":"$bd","type":"registry:file","target":"src/ui/beamline/components/usage-meter/usage-meter.tsx"},{"path":"beamline/hooks/use-active.ts","content":"$be","type":"registry:file","target":"src/ui/beamline/hooks/use-active.ts"},{"path":"beamline/hooks/use-apple-platform.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { isApplePlatform } from \"../lib/platform\";\n\nconst never = () => () => {};\n\n/** isApplePlatform() for rendering: false on the server and in the first hydrated paint, the real answer after. */\nexport function useApplePlatform() {\n return useSyncExternalStore(never, isApplePlatform, () => false);\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-apple-platform.ts"},{"path":"beamline/hooks/use-composed-ref.ts","content":"\"use client\";\n\nimport { useCallback, type Ref, type RefObject } from \"react\";\n\n/** Keep a control's measurement/focus ref and the caller's ref, including React 19 callback cleanup. */\nexport function useComposedRef(internal: RefObject, external?: Ref) {\n return useCallback(\n (node: T | null) => {\n internal.current = node;\n if (typeof external === \"function\") {\n const cleanup = external(node);\n if (typeof cleanup === \"function\")\n return () => {\n internal.current = null;\n cleanup();\n };\n } else if (external) external.current = node;\n },\n [internal, external],\n );\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-composed-ref.ts"},{"path":"beamline/hooks/use-content-width.ts","content":"$bf","type":"registry:file","target":"src/ui/beamline/hooks/use-content-width.ts"},{"path":"beamline/hooks/use-contour.ts","content":"$c0","type":"registry:file","target":"src/ui/beamline/hooks/use-contour.ts"},{"path":"beamline/hooks/use-controllable.ts","content":"$c1","type":"registry:file","target":"src/ui/beamline/hooks/use-controllable.ts"},{"path":"beamline/hooks/use-deprecated-prop.ts","content":"\"use client\";\n\nimport { useEffect } from \"react\";\n\n// Bundlers replace NODE_ENV for browser builds; this declaration emits no Node dependency.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nconst warned = new Set();\n\n/** Report a legacy prop once after mount in development; production and server renders stay silent. */\nexport function useDeprecatedProp(component: string, prop: string, replacement: string, supplied: boolean) {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"development\" || !supplied) return;\n const key = `${component}.${prop}`;\n if (warned.has(key)) return;\n warned.add(key);\n console.warn(`[Beamline] ${key} is deprecated. Use ${replacement} instead; the legacy prop still works.`);\n }, [component, prop, replacement, supplied]);\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-deprecated-prop.ts"},{"path":"beamline/hooks/use-drag.ts","content":"$c2","type":"registry:file","target":"src/ui/beamline/hooks/use-drag.ts"},{"path":"beamline/hooks/use-elapsed.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/** Whole seconds since `active` became true (or since `since`, a Date.now() time), ticking each second for \"Saving…\n * 4s\"; 0 while inactive. */\nexport function useElapsed(active: boolean, since?: number) {\n const [seconds, setSeconds] = useState(0);\n useEffect(() => {\n if (!active) return;\n const start = since ?? Date.now();\n const id = setInterval(() => setSeconds(Math.floor((Date.now() - start) / 1000)), 1000);\n return () => {\n clearInterval(id);\n setSeconds(0);\n };\n }, [active, since]);\n return seconds;\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-elapsed.ts"},{"path":"beamline/hooks/use-expiring.ts","content":"\"use client\";\n\nimport { useCallback, useEffect, useRef, useState, type SetStateAction } from \"react\";\n\n/**\n * A value that clears itself: a \"Saved\" note, a hint after a short press, a row lit after a jump, an undo offer. Each\n * set shows the value and restarts the countdown (a second nudge keeps it up `ms` from the last one, not the first);\n * after `ms`, or `forMs` for this one set, it is null again. Setting null clears it at once.\n */\nexport function useExpiring(ms: number) {\n const [value, setValue] = useState(null);\n const timer = useRef>(undefined);\n useEffect(() => () => clearTimeout(timer.current), []);\n const set = useCallback(\n (next: SetStateAction, forMs = ms) => {\n clearTimeout(timer.current);\n setValue(next);\n if (next !== null) timer.current = setTimeout(() => setValue(null), forMs);\n },\n [ms],\n );\n return [value, set] as const;\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-expiring.ts"},{"path":"beamline/hooks/use-fit.ts","content":"$c3","type":"registry:file","target":"src/ui/beamline/hooks/use-fit.ts"},{"path":"beamline/hooks/use-flip.ts","content":"$c4","type":"registry:file","target":"src/ui/beamline/hooks/use-flip.ts"},{"path":"beamline/hooks/use-height-morph.ts","content":"$c5","type":"registry:file","target":"src/ui/beamline/hooks/use-height-morph.ts"},{"path":"beamline/hooks/use-indicator.ts","content":"$c6","type":"registry:file","target":"src/ui/beamline/hooks/use-indicator.ts"},{"path":"beamline/hooks/use-media-query.ts","content":"$c7","type":"registry:file","target":"src/ui/beamline/hooks/use-media-query.ts"},{"path":"beamline/hooks/use-motion-tokens.ts","content":"$c8","type":"registry:file","target":"src/ui/beamline/hooks/use-motion-tokens.ts"},{"path":"beamline/hooks/use-press-hold.ts","content":"$c9","type":"registry:file","target":"src/ui/beamline/hooks/use-press-hold.ts"},{"path":"beamline/hooks/use-reduced-motion-safe.ts","content":"\"use client\";\n\nimport { useMediaQuery } from \"./use-media-query\";\nimport { useScopeMotion } from \"../runtime/appearance\";\n\n/** Managed motion policy plus the OS preference, with a stable server snapshot. */\nexport function useReducedMotionSafe() {\n const requested = useScopeMotion();\n const os = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n return requested !== \"auto\" || os;\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-reduced-motion-safe.ts"},{"path":"beamline/hooks/use-width-morph.ts","content":"$ca","type":"registry:file","target":"src/ui/beamline/hooks/use-width-morph.ts"},{"path":"beamline/lib/clipboard.ts","content":"$cb","type":"registry:file","target":"src/ui/beamline/lib/clipboard.ts"},{"path":"beamline/lib/contour.ts","content":"$cc","type":"registry:file","target":"src/ui/beamline/lib/contour.ts"},{"path":"beamline/lib/focus.ts","content":"$cd","type":"registry:file","target":"src/ui/beamline/lib/focus.ts"},{"path":"beamline/lib/gesture.ts","content":"$ce","type":"registry:file","target":"src/ui/beamline/lib/gesture.ts"},{"path":"beamline/lib/id.ts","content":"let sequence = 0;\n\n/** An id for something made here and now (a sent message, a dropped file, a toast, a new rule): unique within the page\n * and across reloads, short, and safe in a selector. For an id that must match on the server and the client, useId. */\nexport const localId = (prefix: string) => `${prefix}-${Date.now().toString(36)}${(++sequence).toString(36)}`;\n","type":"registry:file","target":"src/ui/beamline/lib/id.ts"},{"path":"beamline/lib/list.ts","content":"$cf","type":"registry:file","target":"src/ui/beamline/lib/list.ts"},{"path":"beamline/lib/now.ts","content":"$d0","type":"registry:file","target":"src/ui/beamline/lib/now.ts"},{"path":"beamline/lib/number.ts","content":"$d1","type":"registry:file","target":"src/ui/beamline/lib/number.ts"},{"path":"beamline/lib/platform.ts","content":"/** Whether the person is on an Apple platform, where `mod` is ⌘ (Mac, iPhone, iPad); false where there is no browser. */\nexport const isApplePlatform = () =>\n typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n","type":"registry:file","target":"src/ui/beamline/lib/platform.ts"},{"path":"beamline/lib/utils.ts","content":"$d2","type":"registry:file","target":"src/ui/beamline/lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]