themelia-react-ui 2.0.4 → 2.0.6

package/docs/consumer-skills/themelia-composition/SKILL.md

@@ -1,35 +1,34 @@
 ---
 name: themelia-composition
-description: Map responsibilities to exact Themelia components and supported compositions, then build and polish business interfaces, shells, public sites and workflows with verified hierarchy and interactions.
+description: Use when composing or repairing Themelia screens, shells, public sites, data-led domain components and workflows, including owner selection, hierarchy, responsive regions and compound APIs.
 ---
 
 # Themelia composition
 
-## Start from the business task
+Start with the user's decision, representative records, related entities and editable state. Use **themelia-components** for installed identity/APIs, **themelia-tokenization** for shared visual roles and app geometry, and **themelia-design** to read records into a view spec and score the rendered view.
 
-Identify the user, decision/action, essential facts, editable state and supporting history. Prioritize what must be compared together and what can be selected, disclosed or routed. App-specific business components are expected; public owners supply geometry and behavior.
+Before JSX, settle task, reading priority, action scope and inset owners. Read [screen decisions](../../consumer-skill/references/screen-decisions.md) for new screens/repairs. Optional props are capabilities, not reasons to add navigation, cards or commands.
 
-Use the [mapper](../../consumer-skill/references/composition-mapping.md) for executable role selection and supported nesting:
+## Let the data shape the subject
 
-```sh
-node node_modules/themelia-react-ui/docs/consumer-skill/scripts/map-composition.mjs --roles
-node node_modules/themelia-react-ui/docs/consumer-skill/scripts/map-composition.mjs --pattern record-detail --main invoice-lines --aside facts
-```
+Discover task-specific owners before choosing custom markup: product options, variant editing and attached media have different owners from generic controls. Compare their data/state/render seams; use a fitting owner or its parts. Custom JSX shapes additional relationships without requiring an API gap. Read [capability comparison and domain coverage](../../consumer-skill/references/custom-composition.md). More data and a new component name do not establish better composition.
 
-Verify installed/copied guidance with **themelia-components** first. Read coverage, unresolved needs, surface warnings, family peers and focused API/recipe reads. Resolve ambiguity with a specific role or qualified import/symbol. The plan is advisory; unmapped components can still be valid. Inspect unfamiliar APIs before wiring them. Use the [archetype matrix](../../consumer-skill/references/screen-archetypes.md) and matching blueprints as evidence. Prefer a complete feature when its lifecycle fits.
+## Choose the seam
 
-## Assign ownership and build
+A feature coordinates workflows; blocks present subjects; base owns controls/disclosure/structures; layout owns app/page regions; primitives format values. Each can have local interaction. Combine these owners and compound parts.
 
-Use Page for route identity/commands, AuthShell for authentication, Container/Section for content sites. Shell hosts route children; route owns its Page/h1. Page owns gutters and direct-subject gaps; TwoColumnLayout owns column/subject gaps. Stack/Grid arrange nested groups; Card owns framing/insets; features own interactions. Read [composition](../../consumer-skill/references/composition.md) and page/embedded guidance. Give each space, header and command one owner.
+Inspect an existing owner's behavior before replacing it: a badge or retained field does not establish an API limit. Card owns framing; Accordion owns labeled disclosure; Collapsible supports a custom single disclosure. Rich slot content retains the owner's typography role.
 
-Implement the responsibility map with app state. Avoid a Card for every field or automatic KPI rows/tabs/icons. Main/support regions clarify responsibilities. Adapt to parent width, preserve DOM/focus order and constrain scrolling/overflow. Continuous documents are valid; tabs select separate sections.
+Use the [mapper](../../consumer-skill/references/composition-mapping.md) with --roles or a pattern/subject query. Read coverage, unresolved needs and nextReads. Unmapped does not mean unsupported. [Archetypes](../../consumer-skill/references/screen-archetypes.md) are starting responsibilities, not layouts to reproduce; orders and invoices have an [owner map](../../consumer-skill/references/commerce-composition.md).
 
-Choose gaps by [shared relationships](../../consumer-skill/references/design-contract.md#semantic-roles), not whichever utility fits one screenshot. Page/subject/copy/action rhythm differs from surface insets and row density. Use Heading/Text and semantic value primitives; title badges use titleSuffix. Reusable content stays card-free until its boundary. Supported flat/none anatomy prevents doubled insets inside a padded host. Use **themelia-tokenization** for coherent theme changes.
+## Assign geometry once
 
-See [template boundaries](../../../templates/README.md) for domain blueprints and [typed form workflows](../../consumer-skill/references/rhf-workflows.md) for editing. Transport, permissions, routing and translations belong to the app. Dialogs/drawers/confirmations use `features/overlays` at the composing app/feature boundary.
+Page narrow centers one-column forms/details at 48rem; aside infers xl/80rem. Explicit TwoColumnLayout needs Page maxWidth="xl". Collections default to lg/64rem. Settings use Page → SettingsShell → FormSection.
 
-## Inspect, repair and deliver
+Explicit maxWidth wins, then narrow, then aside width. Page owns h1, commands, lifecycle, gutters and subject gaps. AuthShell owns auth; Container/Section own sites. Header actions defaultContent preserves responsive commands. Loading precedes error then empty; supply copy/onRetry. Resource shells are migration APIs.
 
-Run the [composition checker](../../consumer-skill/references/review.md) and app type/lint/test checks. Fix errors; judge warnings in context rather than removing valid composition to silence them. Open the actual screen at narrow/wide parent widths and both themes. Inspect hierarchy, wrapping, alignment, corners, control consistency and quiet space; repair the highest-impact weakness at its owner.
+Stack/Grid/AdaptiveGrid own peer relationships; Card owns frame/insets. Card flat removes chrome, not padding; use none under an existing inset owner. Blocks stay card-free unless their purpose is a card. Tailwind owns app-specific tracks/queries/overflow; read [domain structures](../../consumer-skill/references/domain-structures.md).
 
-Execute relevant keyboard/focus, selection, validation, failure/retry, cancellation and accepted-save paths. Report source, inspected appearance and interactions separately. A renderable route or clean checker does not establish a useful screen. For requested publication use the app's actual build/deploy configuration and target; no Themelia publish CLI exists. Library npm release is maintainer work. Hand back the working result and verified limits.
+Indexes use DataView or FilterProvider → DataTable with FilterLayout in topbarContent; exports in topbarEnd, selection in bulkActions, record commands in rowActions. Table owns its surface. Keep fixed scope distinct from filters. Apps own transport, permissions, routing and translations; read [forms](../../consumer-skill/references/rhf-workflows.md).
+
+Rank commands by scope/frequency/consequence; use overflow for secondary item actions when visible buttons compete with identity. Add back navigation only for a real return journey. Preserve narrow DOM priority, not just column stacking. Run app checks and [review](../../consumer-skill/references/review.md); inspect actual narrow/wide appearance and opened/error/accepted states. Valid API usage is not product quality.

package/docs/consumer-skills/themelia-design/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: themelia-design
+description: Use when designing or redesigning a Themelia view from real records, or when a screen works but reads poorly; reads the data for what matters, ranks information, chooses encodings and emphasis, and critiques rendered screens with a scored rubric. Not for component APIs or theme tokens.
+---
+
+# Themelia design
+
+Correct owners and passing checks make a view valid, not clear. This skill adds
+the designer's part: what the view shows, what the eye reaches first, and
+whether the rendered result lets the user decide quickly. Use
+**themelia-composition** for owner selection, surfaces and inset ownership,
+**themelia-components** for installed APIs and **themelia-tokenization** for
+themes and density.
+
+## Work in this order
+
+1. **Read the data.** Read a typical, a large, an exceptional and an empty
+   record, then write the data brief: the decision, three facts that matter, the
+   anomaly, and states to show or omit. See
+   [data reading](../../consumer-skill/references/data-reading.md).
+2. **Write the view spec.** Rank information as must, should, could and omit;
+   name the focal point; sketch 390 and 1440 wireframes in text; choose an
+   encoding per fact. See [view spec](../../consumer-skill/references/view-spec.md)
+   and [screen decisions](../../consumer-skill/references/screen-decisions.md).
+3. **Find owners.** Map regions to owners with the finder, mapper and inspector
+   described in [discovery](../../consumer-skill/references/discovery.md);
+   [archetypes](../../consumer-skill/references/screen-archetypes.md) and
+   [metrics](../../consumer-skill/references/analytics.md) give starting points.
+4. **Build one representative subject**, then the rest of the view.
+5. **Render and critique.** Screenshot 390×844 and 1440×900 in light and dark
+   with the opened, error and accepted states the task touches. Run the census
+   and score the [critique rubric](../../consumer-skill/references/critique-rubric.md).
+6. **Fix and repeat** at most three rounds, then report scores, decisions and
+   what stayed unverified.
+
+## Taste, briefly
+
+[View craft](../../consumer-skill/references/view-craft.md) holds the detail:
+
+- One focal point per view and per region.
+- One solid primary command per surface; at most three text levels per region;
+  tones only for status that changes the action.
+- Encode by the fact's shape: a figure with its baseline, a trend where shape
+  matters, a table for comparable rows, a list for rows that differ.
+- Label only ambiguous values; omit zero and not-applicable counters.
+- Gaps grow outward; few edges; one frame per independent subject.
+- Most improvements remove something. Never add decoration, colours, tokens or
+  anatomy overrides to make a view look designed.
+
+## Delegate to the designer agent
+
+For a whole view or a redesign, run the
+[themelia-ui-designer agent](../../consumer-skill/agents/themelia-ui-designer.md):
+`design` mode builds and self-critiques; `review` mode, in a fresh agent, gives
+an independent read-only score.

package/docs/consumer-skills/themelia-foundation/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: themelia-foundation
-description: Compatibility route for older Themelia instructions naming themelia-foundation; use the current components, tokenization and composition capabilities for new work.
+description: Compatibility route for older Themelia instructions naming themelia-foundation; use the current components, tokenization, composition and design capabilities for new work.
 ---
 
 # Themelia foundation compatibility route
@@ -10,5 +10,6 @@ The canonical capability split is now:
 - [themelia-components](../themelia-components/SKILL.md): installed setup, owner discovery, exact API inspection and framework integration.
 - [themelia-tokenization](../themelia-tokenization/SKILL.md): CSS/theme setup, semantic roots, typography and scoped themes.
 - [themelia-composition](../themelia-composition/SKILL.md): shell/route ownership, screen hierarchy and delivery.
+- [themelia-design](../themelia-design/SKILL.md): data briefs, view specs and rubric-scored critique of rendered views.
 
 Follow the matching capability. [Installation](../../consumer-skill/references/installation.md) explains the complete current bundle. This package path is retained for existing instructions; separately installed skills are not replaced automatically.

package/docs/consumer-skills/themelia-tokenization/SKILL.md

@@ -1,35 +1,42 @@
 ---
 name: themelia-tokenization
-description: Theme and polish themelia-react-ui apps through semantic colors, typography, structural roots, density and scoped portal themes; inspect supported tokens and correct visual drift without restyling component anatomy.
+description: Build consistent domain structures with Themelia base/layout components, semantic JSX and token-backed Tailwind; also theme shared spacing, density, typography, colors and portals. Not library maintenance.
 ---
 
 # Themelia tokenization
 
-Translate the intended visual change into a shared responsibility before changing CSS. Use the installed version's [design contract](../../consumer-skill/references/design-contract.md), [theme guide](../../consumer-skill/references/theming.md) and generated token metadata. **themelia-components** owns API integration; **themelia-composition** owns task hierarchy and region placement.
+Use mostly public base components and layout blocks. When a domain needs a particular structure, compose their content with semantic JSX and token-backed Tailwind on app-owned elements. **themelia-components** verifies APIs; **themelia-composition** decides hierarchy; **themelia-design** judges the rendered view. Read [domain structures](../../consumer-skill/references/domain-structures.md) and its executable allocation example; the [design contract](../../consumer-skill/references/design-contract.md) owns shared roles.
 
-## Inspect the customization surface
+## Inspect before applying
 
-Resolve package identity and the active CSS path through [installation](../../consumer-skill/references/installation.md). Compiled component CSS and app-authored semantic Tailwind utilities have different setup requirements. Keep overrides in one app stylesheet after package styles, or at a real ThemeScope boundary.
+Resolve installed identity and active CSS through [installation](../../consumer-skill/references/installation.md). Shipped component CSS and app-authored Tailwind compilation are separate setup paths. Override after package styles or inside ThemeScope.
 
 ```sh
-node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-tokens.mjs surface --limit 8
-node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-tokens.mjs radius --limit 5
+node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-tokens.mjs gap-space-xl
+node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-tokens.mjs --space-scale
 ```
 
-Lookup distinguishes structural roots, advanced settings and derived utility spellings. Only supported settings are overrides. Generated `--spacing-*`, `--radius-*` or `--container-*` aliases are not public knobs. If a query lacks a semantic color value, read the installed theme and guide; do not invent a root or claim an unreported light/dark default.
+Read overrideRoot and exact spelling. Roots are settings; derived --spacing-*, --radius-* and --container-* aliases are not. Do not read those aliases in scoped calc expressions. The lookup does not index semantic colors; follow its stylesheet/theme reads.
 
-## Choose the role
+## Compose without drift
 
-- Brand/surface changes use existing shadcn semantic surface/foreground pairs. State uses success/info/warning/destructive pairs; categories and counts stay neutral. Keep input boundaries, dividers and focus distinct.
-- Typography changes use supported text/font roles and provider defaults. Visual size stays separate from heading level. Density does not reduce primary copy to compact metadata.
-- `--space-scale` changes gaps/insets; `--density-scale` changes control/row heights. Action/control sizes, row density, copy gaps and surface insets remain independent. Use the [relationship table](../../consumer-skill/references/design-contract.md#semantic-roles) to select public gaps.
-- Surface insets belong to Card/overlay anatomy; page gutters belong to layout. Change the appropriate owner/root instead of accumulating wrappers or padding resets.
-- The single radius root drives outer shells and height-bounded inner controls. Physical nesting does not choose the role. Icons, avatars and shell dimensions have their own existing roots.
+Public props/parts own controls, rows, text and surfaces. Stack/Grid/AdaptiveGrid own routine sibling layout. Tailwind owns specialized tracks, parent queries, alignment, overflow and drawing on app markup. A valid token on the wrong owner still drifts: do not repad a public panel/menu or redraw its states. Use fitting domain owners; custom JSX shapes additional relationships.
 
-Apply the smallest coherent theme change to related owners. Preserve supported variants and app placement; do not compensate for one control with a copied implementation, raw palette, extra opacity scale, local focus treatment or per-component token.
+| Relationship | Public gap / shipped default |
+| --- | --- |
+| Title + description | dense / normal: 2 / 4px |
+| Compact affordances | xs: 4px |
+| Commands | md: 8px |
+| Related fields/content | xl: 16px |
+| Independent subjects/columns | 2xl: 24px |
+| Major page regions | 3xl: 32px |
 
-## Verify the effect
+Page owns gutters, Card owns insets, structures own peer gaps. Card flat removes paint, not its md inset (24px). Use padding none when an ancestor owns that room; align flat/painted peer content edges. A block inside adds no second Card/inset. Read [semantic roles](../../consumer-skill/references/design-contract.md#semantic-roles), not a screenshot's measurements.
+
+Use Heading/Text props for copy roles and primitives for Money/Date/Number/contact/missing values. Semantic tag is separate from visual size. Rich trigger/slot labels can override inherited typography: preserve the owner's label scale, reserving larger headings for the actual subject. Density does not shrink primary content into metadata.
 
-Check both themes on actual surfaces, including primary/secondary/status text, boundaries and focused/invalid/disabled states. Open a real picker/menu/overlay in a scoped theme and verify its portal shares the scope. Change spacing and density independently with other roots held fixed; inspect adjoining heights, baselines, corners and clipping as well as computed values. A capture before popup presence settles is not open-state proof.
+Pair shadcn surfaces/foregrounds. Badges are neutral for categories/counts; status tones communicate status. Numbers use UI sans/tabular figures; MonoValue is for codes. Existing action/control, row, surface, icon/avatar and shell roots cover geometry. --space-scale changes gaps/insets; --density-scale changes controls/rows. First repair duplicated padding and priorities before proposing mobile root changes. Use [theme boundaries](../../consumer-skill/references/theming.md); avoid private recipes, local focus scales, raw palettes and per-component tokens.
+
+## Verify the effect
 
-Use available browser/contrast tooling and the [review contract](../../consumer-skill/references/review.md); do not invent a Themelia theme-publishing or audit CLI. Run app checks and execute keyboard use. Deliver the stylesheet, affected role explanation, inspected widths/themes and behavior evidence. Report unexercised states as unverified.
+Vary spacing/density independently. Inspect both themes, narrow/wide parents, text hierarchy, adjoining heights, corners and clipping. Open a real menu/picker/overlay in the scoped theme and verify portal inheritance. Run app checks and [review](../../consumer-skill/references/review.md), execute keyboard/focus and relevant invalid/disabled states, and report source, inspected appearance and behavior separately. No Themelia theme-publishing CLI exists.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "themelia-react-ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "A composable React UI library for modern admin applications, built on Base UI and Tailwind with shadcn-compatible themes, shared design tokens, reusable layouts, blocks and workflows.",
   "publishConfig": {
     "access": "public",
@@ -29,6 +29,7 @@
     "dist",
     "README.md",
     "CHANGELOG.md",
+    "MIGRATION.md",
     "docs/consumer-skill",
     "docs/consumer-skills",
     "templates",
@@ -462,7 +463,7 @@
     "test:browser": "npm run build:preview && node scripts/run-browser.mjs",
     "check:package": "node scripts/check-package.mjs",
     "check": "npm run check:contract && npm run check:preview && npm run check:docs && npm run lint && npm run check:design-lint && npm run typecheck && npm test && npm run build && npm run check:skill && npm run check:maps && npm run check:package && npm run build:preview",
-    "check:contract": "node --test scripts/test-runtime-ownership.mjs scripts/test-primitive-geometry.mjs scripts/test-source-entrypoints.mjs scripts/test-utility-vocabulary.mjs scripts/test-theme-contrast.mjs scripts/test-theme-modes.mjs && node scripts/check-contract.mjs",
+    "check:contract": "node --test scripts/test-runtime-ownership.mjs scripts/test-primitive-geometry.mjs scripts/test-source-entrypoints.mjs scripts/test-utility-vocabulary.mjs scripts/test-example-utilities.mjs scripts/test-theme-contrast.mjs scripts/test-theme-modes.mjs && node scripts/check-contract.mjs",
     "lint": "node scripts/generate-utilities.mjs && oxlint src/components src/lib src/preview docs/consumer-skill/examples templates --deny-warnings",
     "check:design-lint": "node scripts/generate-utilities.mjs && node scripts/check-design-lint.mjs",
     "check:preview": "node scripts/check-preview.mjs",
@@ -521,6 +522,7 @@
     "hast-util-sanitize": "^5.0.2",
     "hast-util-to-html": "^9.0.5",
     "react-resizable-panels": "^4.11.2",
+    "style-to-js": "^1.1.21",
     "tailwind-merge": "^3.5.0",
     "zustand": "^5.0.12"
   },

package/templates/admin-shell-template.tsx

@@ -201,13 +201,12 @@ export interface AdminStarterShellProps {
 }
 
 function TemplateLink({ href, children, active, disabled, external, target, rel, onClick, onNavigate, ...props }: LayoutLinkRenderProps & { onNavigate: (id: AdminTemplateId) => void }) {
-	const { setOpenMobile } = useSidebar();
 	return <a {...props} href={disabled ? undefined : href} target={target ?? (external ? '_blank' : undefined)} rel={rel ?? (external ? 'noopener noreferrer' : undefined)} aria-current={active ? 'page' : undefined} aria-disabled={disabled || undefined} onClick={(event) => {
 		onClick?.(event);
 		if (disabled) { event.preventDefault(); return; }
 		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || external || (target && target !== '_self')) return;
 		const route = Object.values(TEMPLATE_ROUTES).find((item) => item.url === href);
-		if (route) { event.preventDefault(); onNavigate(route.id); setOpenMobile(false); }
+		if (route) { event.preventDefault(); onNavigate(route.id); }
 	}}>{children}</a>;
 }
 

package/templates/customers-template.tsx

@@ -25,7 +25,7 @@ import { DataTable } from 'themelia-react-ui/features/table';
 import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
 import { Page } from 'themelia-react-ui/layout/page';
 import { Date as DateValue, Money, useMoneyFormatter } from 'themelia-react-ui/primitives';
-import { Text } from 'themelia-react-ui/typography';
+import { Heading, Text } from 'themelia-react-ui/typography';
 
 interface CustomerOrderSummary {
 	id: string;
@@ -282,19 +282,21 @@ export function CustomersAdminTemplate() {
 					stickyAside
 					main={
 						<Stack gap="2xl">
-							<Card
-								title="Orders placed"
-								titleSuffix={<Badge tone="neutral">{CUSTOMER_ORDERS.length}</Badge>}
-								description="Orders placed across Online Store and SoHo POS."
-							>
-								<DataTable<CustomerOrderSummary>
-									columns={orderColumns}
-									data={CUSTOMER_ORDERS}
-									surface="flat"
-									enableSorting
-									getRowId={(order) => order.id}
-								/>
-							</Card>
+							<DataTable<CustomerOrderSummary>
+								columns={orderColumns}
+								data={CUSTOMER_ORDERS}
+								topbarContent={
+									<Stack gap="dense">
+										<Stack direction="horizontal" align="center" gap="md" wrap>
+											<Heading tag="h2" size="base" className="text-inherit">Orders placed</Heading>
+											<Badge tone="neutral">{CUSTOMER_ORDERS.length}</Badge>
+										</Stack>
+										<Text size="xs" type="secondary">Orders placed across Online Store and SoHo POS.</Text>
+									</Stack>
+								}
+								enableSorting
+								getRowId={(order) => order.id}
+							/>
 
 							<Card
 								title="Timeline"
@@ -418,7 +420,7 @@ export function CustomersAdminTemplate() {
 			>
 				<form id={contactFormId} onSubmit={(event) => { event.preventDefault(); saveContact(); }}>
 				<Stack gap="xl">
-					<FormSection title="Contact information">
+					<FormSection title="Contact information" surface="flat" padding="none">
 						<Grid columns={{ base: 1, sm: 2 }} gap="lg">
 							<FormField label="Full name" required>
 								<Input
@@ -477,7 +479,7 @@ export function CustomersAdminTemplate() {
 				formId={creditFormId}
 			>
 				<form id={creditFormId} onSubmit={(event) => { event.preventDefault(); handleIssueStoreCredit(); }}>
-				<FormSection title="Store credit adjustment">
+				<FormSection title="Store credit adjustment" surface="flat" padding="none">
 					<FormField
 						label="Credit amount (USD)"
 						required

package/dist/accordion-96o0pN62.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-96o0pN62.js","names":["Accordion","AccordionPrimitive","AccordionItem","AccordionTrigger","AccordionContent","Accordion","React","PrimitiveAccordion","PrimitiveAccordionItem","PrimitiveAccordionTrigger","PrimitiveAccordionContent","Accordion","Text","focusRecipes","motionRecipes","Stack","interactionRecipes","DisclosurePanelElement","IconBadge","React$1","Accordion$2","props","Accordion","cn","className","AccordionItem$1","AccordionTrigger$1","children","ChevronDownIcon","AccordionContent$1","panelProps","Accordion$1","AccordionItem","AccordionTrigger","isSimpleText","AccordionContent","ACCORDION_ROOT_VARIANT_CLASS","ACCORDION_ITEM_VARIANT_CLASS","ACCORDION_TRIGGER_BASE","ACCORDION_CONTENT_PADDING","defaultSmartAccordionStrings","SmartAccordion","forwardRef","stringsProp","strings","useStrings","hasIconColumn","iconStyle","items","item","contentPadding","triggerGridClass","onValueChange","next","variant","itemClassName","triggerClassName","SmartAccordionIcon","isSimpleContent","contentClassName","content","reserveSpace","icon"],"sources":["../src/components/ui/accordion.tsx","../src/components/base/accordion/accordion.tsx","../src/components/base/accordion/accordion-variants.ts","../src/components/base/accordion/accordion.strings.ts","../src/components/base/accordion/smart-accordion.tsx"],"sourcesContent":["import { DisclosurePanelElement } from './disclosure-panel';\nimport { motionRecipes } from '../../lib/motion-recipes';\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"../../lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"border-border accordion--component flex w-full flex-col border box-border overflow-hidden\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-border accordion-item--component border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"accordion-header m-0\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\"accordion-trigger--component flex w-full items-center justify-between border-0 bg-transparent outline-none cursor-pointer box-border\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className={cn(\"accordion-trigger--icon size-icon text-muted-foreground shrink-0 [[aria-expanded=true]_&]:rotate-180\", motionRecipes.chevron)} />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  render,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className={cn(\"accordion-content--component box-border text-inherit h-(--accordion-panel-height)\", motionRecipes.disclosure, className)}\n      {...props}\n      render={(panelProps, state) => <DisclosurePanelElement props={panelProps} state={state} render={render} heightVariable=\"--accordion-panel-height\" />}\n    >\n      {children}\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n\n","/**\n * Accordion — tokenized base wrapper around the shadcn/Base UI primitive.\n *\n * The internal primitive intentionally keeps shadcn's roomy defaults. This\n * public layer calibrates them for admin surfaces: radius tokens, 12px row\n * insets, density-aware vertical rhythm, quiet hover/focus treatments, and\n * matching trigger/content columns. Consumers retain the complete compound\n * API and can override any treatment with `className`.\n */\nimport * as React from 'react';\n\nimport {\n\tAccordion as PrimitiveAccordion,\n\tAccordionContent as PrimitiveAccordionContent,\n\tAccordionItem as PrimitiveAccordionItem,\n\tAccordionTrigger as PrimitiveAccordionTrigger,\n} from '../../ui/accordion';\nimport { Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\nimport { focusRecipes } from '../../../lib/focus-recipes';\nimport { interactionRecipes } from '../../../lib/interaction-recipes';\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordion>;\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionItem>;\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionTrigger>;\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionContent>;\n\nconst Accordion = React.forwardRef<React.ElementRef<typeof PrimitiveAccordion>, AccordionProps>(\n\tfunction Accordion({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordion\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion--component rounded-radius border-border bg-card text-card-foreground',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionItem>, AccordionItemProps>(\n\tfunction AccordionItem({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordionItem\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-item--component border-border',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionTrigger>, AccordionTriggerProps>(\n\tfunction AccordionTrigger({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionTrigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-trigger--component min-h-action items-center gap-space-lg px-row-x py-row-y',\n\t\t\t\t\t`text-start text-inherit text-sm font-medium transition-colors ${interactionRecipes.rowHover} hover:no-underline`,\n\t\t\t\t\t// Inset: the shell clips its rounded corners, so an outer ring was cut off.\n\t\t\t\t\t`focus-visible:z-10 ${focusRecipes.inset}`,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionTrigger>\n\t\t);\n\t},\n);\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nconst AccordionContent = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionContent>, AccordionContentProps>(\n\tfunction AccordionContent({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionContent\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-content--component px-row-x pb-space-lg text-sm',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"div\" size=\"inherit\" lineHeight=\"relaxed\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionContent>\n\t\t);\n\t},\n);\nAccordionContent.displayName = 'AccordionContent';\n\nexport {\n\tAccordion,\n\tAccordionItem,\n\tAccordionTrigger,\n\tAccordionContent,\n};\n","/**\n * Shared accordion-shell variant classes — used by both `SmartAccordion`\n * and any blocks surface that builds on `base/accordion` directly\n * (e.g. `blocks/onboarding/checklist`).\n *\n * Exported because two consumers already keep it in lockstep; a third\n * one will copy this exact map. Centralising means a future tweak\n * (e.g. tighten `card` items to `border-border/70`) propagates.\n *\n * Padding tokens for trigger / content live alongside so the rhythm\n * is shared too:\n *\n * - Trigger: `gap-space-lg px-row-x py-row-y` — density-driven,\n *   `<UIProvider>`\n *   override flows through.\n * - Content padding accounts for the base panel's `px-row-x`.\n *   Medallion and inline rows use shared media/spacing tokens, and\n *   no-icon rows add no extra left padding so body copy tracks the\n *   trigger text column instead of drifting.\n */\nimport type { DisclosureSurface } from '../../../lib/component-vocabulary';\n\nexport type AccordionShellVariant = DisclosureSurface;\n\nexport const ACCORDION_ROOT_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'gap-space-md border-0 rounded-none bg-transparent text-inherit overflow-visible',\n\tbordered: 'rounded-radius border border-border bg-card text-card-foreground overflow-hidden',\n\tflat: 'border-0 rounded-none bg-transparent text-inherit overflow-visible',\n};\n\n// The chevron and the revealed panel carry the open state; an open item is not\n// tinted into a box. Rounded items clip their trigger so its inset focus ring and\n// hover fill follow the item's corners.\nexport const ACCORDION_ITEM_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'border border-border bg-card text-card-foreground rounded-radius overflow-hidden',\n\tbordered: 'bg-transparent not-last:border-b border-border',\n\tflat: 'border-0 not-last:border-b-0 bg-transparent rounded-radius overflow-hidden',\n};\n\nexport const ACCORDION_TRIGGER_BASE =\n\t'items-center gap-space-lg px-row-x py-row-y text-start hover:no-underline';\n\n/**\n * Content-padding presets keyed off the leading-icon width. Use\n * `withMedallion` when the trigger renders a default `IconBadge`\n * plus the shared row gap so body text aligns under the title at every\n * consumer density.\n */\nexport const ACCORDION_CONTENT_PADDING = {\n\t// Composed from root tokens so a scoped density/space boundary applies (the\n\t// `--spacing-*` aliases resolve once at :root inside arbitrary values).\n\twithMedallion: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--avatar)+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithInline: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--icon)*1.25+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithoutIcon: 'px-row-x pt-0',\n} as const;\n","/**\n * Strings for `SmartAccordion`. There aren't many — Radix handles the\n * trigger ARIA states automatically, so the only library-owned copy is\n * the optional landmark label on the wrapping nav region. Consumers\n * override per-item `title` / `badge` / `content` directly via\n * `SmartAccordionItem` props (the strings live in the data, not here).\n */\nexport interface SmartAccordionStrings {\n\t/**\n\t * Sets `aria-label` on the wrapping element so screen readers can name\n\t * the accordion region. Optional — when absent, no aria-label is set.\n\t */\n\tregionAriaLabel?: string;\n}\n\nexport const defaultSmartAccordionStrings: SmartAccordionStrings = {\n\tregionAriaLabel: undefined,\n};\n","/**\n * SmartAccordion — the canonical \"icon + title + optional badge + body\"\n * accordion pattern, with three visual variants for the surface chrome\n * (`card` | `bordered` | `flat`) and three icon framings (`medallion` |\n * `inline` | `none`).\n *\n * Composes the wrapped `base/accordion` parts (rule 2 — blocks-style\n * convenience built from re-exports, not the raw shadcn primitive).\n *\n * For richer rows (multi-line metadata, custom layouts), drop down to\n * the compound API:\n *\n *     import { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n *       from '.';\n */\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconBadge } from '../display/icon-badge';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';\nimport {\n\tACCORDION_CONTENT_PADDING,\n\tACCORDION_ITEM_VARIANT_CLASS,\n\tACCORDION_ROOT_VARIANT_CLASS,\n\tACCORDION_TRIGGER_BASE,\n} from './accordion-variants';\nimport { defaultSmartAccordionStrings } from './accordion.strings';\nimport type {\n\tSmartAccordionIconStyle,\n\tSmartAccordionProps,\n} from './accordion.types';\n\n/**\n * Bounded accordion composition for repeated icon, title, description, badge,\n * and body sections. Use the compound Accordion parts when row structure or\n * per-item presentation differs.\n */\nexport const SmartAccordion = forwardRef<HTMLDivElement, SmartAccordionProps>(function SmartAccordion({\n\titems,\n\tmultiple = false,\n\tdefaultValue,\n\tvalue,\n\tonValueChange,\n\tvariant = 'bordered',\n\ticonStyle = 'inline',\n\tclassName,\n\titemClassName,\n\ttriggerClassName,\n\tcontentClassName,\n\tstrings: stringsProp,\n}, ref) {\n\tconst strings = useStrings(defaultSmartAccordionStrings, stringsProp);\n\tconst hasIconColumn = iconStyle !== 'none' && items.some((item) => item.icon != null);\n\tconst contentPadding =\n\t\t!hasIconColumn\n\t\t\t? ACCORDION_CONTENT_PADDING.withoutIcon\n\t\t\t: iconStyle === 'medallion'\n\t\t\t? ACCORDION_CONTENT_PADDING.withMedallion\n\t\t\t: ACCORDION_CONTENT_PADDING.withInline;\n\tconst triggerGridClass = !hasIconColumn\n\t\t? 'grid-cols-[minmax(0,1fr)]'\n\t\t: 'grid-cols-[auto_minmax(0,1fr)]';\n\treturn (\n\t\t<Accordion\n\t\t\tref={ref}\n\t\t\tmultiple={multiple}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tvalue={value}\n\t\t\tonValueChange={\n\t\t\t\tonValueChange\n\t\t\t\t\t? (next) => onValueChange(next as string[])\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-label={strings.regionAriaLabel}\n\t\t\tdata-variant={variant}\n\t\t\tdata-icon-style={iconStyle}\n\t\t\tclassName={cn('smart-accordion--component', ACCORDION_ROOT_VARIANT_CLASS[variant], className)}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<AccordionItem\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tvalue={item.value}\n\t\t\t\t\tclassName={cn('smart-accordion--item', ACCORDION_ITEM_VARIANT_CLASS[variant], itemClassName)}\n\t\t\t\t>\n\t\t\t\t\t<AccordionTrigger\n\t\t\t\t\t\tclassName={cn('smart-accordion--trigger', ACCORDION_TRIGGER_BASE, triggerClassName)}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={cn('grid min-w-0 flex-1 items-center gap-x-space-lg', triggerGridClass)}>\n\t\t\t\t\t\t\t<SmartAccordionIcon\n\t\t\t\t\t\t\t\ticonStyle={iconStyle}\n\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\treserveSpace={hasIconColumn}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Stack render={<span />} gap=\"dense\" className=\"smart-accordion--heading flex-1\">\n\t\t\t\t\t\t\t\t<span className=\"flex min-w-0 flex-wrap items-center gap-x-space-md gap-y-space-xs\">\n\t\t\t\t\t\t\t\t\t{isSimpleContent(item.title) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"inherit\" weight=\"semibold\" className=\"smart-accordion--title min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.title}\n\t\t\t\t\t\t\t\t\t{item.badge != null && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"smart-accordion--badge inline-flex shrink-0\">{item.badge}</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{!!item.description && (\n\t\t\t\t\t\t\t\t\tisSimpleContent(item.description) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"secondary\" className=\"smart-accordion--description min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.description\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'smart-accordion--content',\n\t\t\t\t\t\t\tcontentPadding,\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isSimpleContent(item.content) ? (\n\t\t\t\t\t\t\t<Text tag=\"div\" type=\"secondary\" lineHeight=\"relaxed\">\n\t\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : item.content}\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t))}\n\t\t</Accordion>\n\t);\n});\n\nSmartAccordion.displayName = 'SmartAccordion';\n\nfunction isSimpleContent(content: ReactNode): content is string | number | bigint {\n\treturn typeof content === 'string' || typeof content === 'number' || typeof content === 'bigint';\n}\n\nfunction SmartAccordionIcon({\n\ticonStyle,\n\ticon,\n\treserveSpace,\n}: {\n\ticonStyle: SmartAccordionIconStyle;\n\ticon?: ReactNode;\n\treserveSpace: boolean;\n}) {\n\tif (iconStyle === 'none' || !reserveSpace) return null;\n\tif (!icon) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'smart-accordion--icon inline-flex shrink-0',\n\t\t\t\t\ticonStyle === 'inline' ? 'size-icon-lg' : 'size-avatar',\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t}\n\tif (iconStyle === 'inline') {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"smart-accordion--icon inline-flex size-icon-lg shrink-0 self-center text-muted-foreground [&>svg]:size-icon\"\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t</span>\n\t\t);\n\t}\n\treturn (\n\t\t<IconBadge size=\"md\" tone=\"neutral\" shape=\"circle\" aria-hidden=\"true\" className=\"smart-accordion--icon self-center\">\n\t\t\t{icon}\n\t\t</IconBadge>\n\t);\n}\n"],"mappings":"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"}

package/dist/action-menu-CHgs8vmj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-menu-CHgs8vmj.js","names":["Icon","_Fragment","_jsx","useDensityConfig","resolveComponentScale","cn","Button","Text","compositionClasses","popoverWidthRecipes","collectionRecipes","CollectionContent","DropdownMenuItem","DropdownMenuTrigger","DropdownMenuGroup","DropdownMenuCheckboxItem","DropdownMenuLabel","DropdownMenuContent","DropdownMenuLinkItem","DropdownMenu","React","Fragment$1","overflowTriggerRecipes","MoreHorizontal","defaultActionMenuStrings","isDestructiveAction","action","resolveActions","visible","actions","preserveOrder","standard","destructive","getActionKey","index","renderActionIcon","icon","isValidElement","renderActionLabel","label","className","toMenuVariant","tone","toButtonPresentation","buttonStyle","renderMenuAction","key","shouldCloseOnSelect","closeOnSelect","content","density","href","renderLink","props","renderGroupedActions","nodes","currentGroup","args","nextGroup","groupChanged","DropdownMenuSeparator","assignRef","ref","node","ActionMenu","stringsProp","open","setOpen","strings","useStrings","resolvedSrText","srText","resolvedActions","hasVisibleLabel","labelVisibility","hasResponsiveLabel","recipe","context","requestedSize","buttonProps","defaultScale","squareClass","defaultButtonProps","triggerClassName","triggerProps","labelClassName","triggerIcon","buttonContent","renderTrigger","baseTriggerRef","dropdownTriggerProps","composedRef","width","contentClassName","ActionButtons","visibleActions","resolved","children","size","buttonClassName","buttonRenderProps"],"sources":["../src/components/base/action-menu/action-menu.recipes.ts","../src/components/base/action-menu/action-menu.strings.ts","../src/components/base/action-menu/action-menu.tsx"],"sourcesContent":["/**\n * Overflow trigger recipe — the one `⋯` square every overflow menu shares.\n *\n * The glyph and the default \"More actions\" name are fixed. `context` picks the\n * treatment for where the menu sits, and the square takes the size of the\n * controls beside it (`buttonProps.size`) or the provider scale, like every\n * other Button. A menu that shares a row with a primary command ends that row.\n */\nimport { MoreHorizontal } from 'lucide-react';\n\n/**\n * Where an overflow menu sits. `inline` is the quiet ghost square for rows,\n * cards, list items and footers; `commands` is the outline square that ends a\n * row of outline commands, such as a page header or toolbar.\n */\nexport type ActionMenuContext = 'inline' | 'commands';\n\nexport const overflowTriggerRecipes = {\n\ticon: MoreHorizontal,\n\tcontext: {\n\t\t// No fill until hover, and a muted glyph that does not compete with the content.\n\t\tinline: { tone: 'secondary', buttonStyle: 'ghost', glyph: 'text-muted-foreground' },\n\t\t// The commands' own boundary and ink.\n\t\tcommands: { tone: 'secondary', buttonStyle: 'outline', glyph: undefined },\n\t},\n} as const;\n","export interface ActionMenuStrings {\n\topenMenuLabel: string;\n}\n\nexport const defaultActionMenuStrings: ActionMenuStrings = {\n\topenMenuLabel: 'More actions',\n};\n","/**\n * ActionMenu — centralized action chrome for page, card, table, and row\n * overflow menus.\n *\n * Primary API is definition-driven: pass `actions={[...]}` and the component\n * renders the trigger, menu surface, grouping, checkbox rows, destructive\n * separation, links, disabled state, and density. `ActionButtons` renders the\n * same definitions as inline buttons for page/toolbars that need visible\n * actions plus an overflow menu.\n *\n * Without a visible `label` the trigger is the shared overflow square from\n * `action-menu.recipes.ts`: a `⋯` glyph named \"More actions\", ghost `inline`\n * or outline `commands`, at the size of the controls beside it or the\n * provider scale.\n */\nimport type { LucideIcon } from 'lucide-react';\nimport React, { isValidElement, type ComponentType, type ElementType, type ReactElement, type ReactNode } from 'react';\n\nimport { Button, type ButtonSize, type ButtonStyle } from '../buttons';\nimport { compositionClasses } from '../structure/composition.recipes';\nimport { collectionRecipes, popoverWidthRecipes, type CollectionDensity } from '../popover/popover.recipes';\nimport { CollectionContent } from '../popover/collection-content';\nimport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuLinkItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from '../navigation/dropdown-menu';\nimport { Text } from '../../typography';\nimport type { ActionButtonStyle, ActionPresentation } from '../../../lib/action-presentation';\nimport { resolveComponentScale, useDensityConfig } from '../../../lib/ui-provider';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { overflowTriggerRecipes, type ActionMenuContext } from './action-menu.recipes';\nimport {\n\tdefaultActionMenuStrings,\n\ttype ActionMenuStrings,\n} from './action-menu.strings';\n\ntype ActionMenuButtonProps = Partial<React.ComponentPropsWithoutRef<typeof Button>> & {\n\t[key: `data-${string}`]: string | boolean | undefined;\n\t'aria-label'?: string;\n\tonPointerDown?: React.PointerEventHandler<HTMLButtonElement>;\n};\nexport type ActionMenuDensity = CollectionDensity | 'table';\nexport type ActionMenuLabelVisibility = 'visible' | 'responsive' | 'hidden';\nexport interface ActionMenuLinkRenderProps extends React.ComponentPropsWithoutRef<'a'> {\n\thref: string;\n\tdisabled?: boolean;\n\texternal?: boolean;\n}\n\nexport type ActionMenuIcon = LucideIcon | ComponentType<{ className?: string }> | ReactNode;\n\nexport interface ActionMenuAction extends ActionPresentation {\n\t/** Stable React key. Falls back to a string `label`, then the index. */\n\tid?: string;\n\t/** Visible label for the entry. */\n\tlabel: ReactNode;\n\t/** Leading glyph. Accepts a Lucide icon, a component, or a rendered node. */\n\ticon?: ActionMenuIcon;\n\t/** `'checkbox'` renders a toggle driven by `checked`/`onCheckedChange`. Defaults to `'item'`. */\n\ttype?: 'item' | 'checkbox';\n\t/**\n\t * Renders the entry as a link. By default this is a native `<a href>`, so it\n\t * performs a full page navigation; pass `renderLink` on `ActionMenu` to route\n\t * it through your framework's router instead.\n\t */\n\thref?: string;\n\t/** Anchor target forwarded to the rendered link. Requires `href`. */\n\ttarget?: string;\n\t/** Anchor rel forwarded to the rendered link. Requires `href`. */\n\trel?: string;\n\t/** Marks the destination as leaving the app; forwarded to `renderLink`. */\n\texternal?: boolean;\n\t/** Runs when the entry is chosen. This is the handler for a normal item. */\n\tonClick?: () => void;\n\t/** Checked state for a `'checkbox'` entry. */\n\tchecked?: boolean;\n\t/** Fires with the next checked state for a `'checkbox'` entry. */\n\tonCheckedChange?: (checked: boolean) => void;\n\t/**\n\t * Starts a new group, drawing a separator above this entry. A string also\n\t * captions the group; `true` rules off without a heading, for the common\n\t * case of holding one entry apart (a sign-out, a delete) with no label to\n\t * write.\n\t */\n\tgroup?: string | true;\n\t/** Class merged onto this group's starting separator/caption, for example a responsive boundary. Does not style or hide the action rows. */\n\tgroupClassName?: string;\n\t/** Overrides the button size when the action renders as a button. */\n\tbuttonSize?: ButtonSize;\n\t/** Escape hatch merged onto the entry root. */\n\tclassName?: string;\n\t/** Escape hatch merged onto the entry's inner content. */\n\tcontentClassName?: string;\n\t/** Overrides the menu's `closeOnSelect` for this entry. */\n\tcloseOnSelect?: boolean;\n\t/** Replaces the rendered entry, e.g. to emit a framework `<Link>`. */\n\trender?: ReactNode;\n}\n\nexport interface ActionMenuProps {\n\t/**\n\t * Commands to offer. Destructive entries are moved last unless\n\t * `preserveOrder` is set.\n\t */\n\tactions: readonly ActionMenuAction[];\n\t/** Trigger text. Omit for the shared icon-only overflow trigger, and set `srText` to name it. */\n\tlabel?: string;\n\t/** Trigger glyph. Defaults to the horizontal ellipsis (`MoreHorizontal`) every overflow menu shares. */\n\ticon?: ActionMenuIcon;\n\t/** Accessible name when the trigger shows no visible `label`. Defaults to `strings.openMenuLabel`, \"More actions\". */\n\tsrText?: string;\n\t/**\n\t * Where the menu sits, which picks the trigger treatment. `inline` (the\n\t * default) is the quiet ghost square for rows, cards and footers; `commands`\n\t * is the outline square that ends a row of outline commands. Place the menu\n\t * after any primary command in the same row.\n\t */\n\tcontext?: ActionMenuContext;\n\t/**\n\t * Escape hatch forwarded to the trigger button. An icon-only trigger takes\n\t * `size` from here to match the controls beside it, otherwise the provider\n\t * scale.\n\t */\n\tbuttonProps?: ActionMenuButtonProps;\n\t/** Menu alignment against the trigger. Defaults to `end`. */\n\talign?: 'center' | 'start' | 'end';\n\t/** Which edge of the trigger the menu opens from. Defaults to `bottom`. */\n\tside?: 'top' | 'right' | 'bottom' | 'left';\n\t/** Merged onto the menu surface. */\n\tcontentClassName?: string;\n\t/** Fixed menu width. Defaults to sizing from the widest item. */\n\twidth?: string;\n\t/** Closes the menu after an action runs. Defaults to `true`. */\n\tcloseOnSelect?: boolean;\n\t/** Vertical row rhythm; table preserves the legacy tight action spacing. Inline room stays stable. */\n\tdensity?: ActionMenuDensity;\n\t/** Whether the trigger's `label` is visible, hidden, or responsive. */\n\tlabelVisibility?: ActionMenuLabelVisibility;\n\t/** Preserve incoming action order instead of moving destructive items last. */\n\tpreserveOrder?: boolean;\n\t/**\n\t * Renders actions carrying an `href` through the consumer's router, keeping\n\t * this component framework-agnostic. Without it, such actions render as\n\t * plain anchors.\n\t */\n\trenderLink?: (props: ActionMenuLinkRenderProps) => ReactElement;\n\t/**\n\t * Replaces the default trigger button entirely, so a menu can hang off a\n\t * shape that is not a button with a glyph — an account block, a sidebar\n\t * row, a tab that has to match its siblings.\n\t *\n\t * Takes Base UI's `render` contract: either an element, whose props are\n\t * merged for you, or a function receiving the props to spread. Either way\n\t * the ARIA wiring, the open/close handlers and the popup's anchor ref reach\n\t * a real DOM node without anyone cloning anything.\n\t *\n\t * For a plain button that just needs different words or a different glyph,\n\t * `label`, `icon` and `buttonProps` are the smaller tools; reach for this\n\t * only when the trigger is a different thing.\n\t */\n\trenderTrigger?: React.ComponentProps<typeof DropdownMenuTrigger>['render'];\n\t/** Overrides the menu's own copy (the default trigger label). */\n\tstrings?: StringsProp<ActionMenuStrings>;\n}\n\nexport interface ActionButtonsProps {\n\t/**\n\t * Commands to render side by side rather than collapsed into a menu. Each\n\t * resolves like `Button`: untoned actions are the default outline button and\n\t * a `tone` without `buttonStyle` is solid, so mark the main command\n\t * `tone: 'primary'`.\n\t */\n\tactions: readonly ActionMenuAction[];\n\t/** Merged onto the button group. */\n\tclassName?: string;\n\t/** Merged onto every button in the group. */\n\tbuttonClassName?: string;\n\t/** Height preset applied to each button. */\n\tsize?: ButtonSize;\n\t/** Renders actions carrying an `href` through the consumer's router. */\n\trenderLink?: (props: ActionMenuLinkRenderProps) => ReactElement;\n}\n\nfunction isDestructiveAction(action: ActionMenuAction) {\n\treturn action.tone === 'destructive';\n}\n\nfunction resolveActions(actions: readonly ActionMenuAction[], preserveOrder = false) {\n\tconst visible = actions.filter((action) => action.visible !== false);\n\tif (preserveOrder) return visible;\n\n\tconst standard = visible.filter((action) => !isDestructiveAction(action));\n\tconst destructive = visible.filter(isDestructiveAction);\n\treturn [...standard, ...destructive];\n}\n\nfunction getActionKey(action: ActionMenuAction, index: number) {\n\treturn action.id ?? (typeof action.label === 'string' ? action.label : `action-${index}`);\n}\n\nfunction renderActionIcon(icon: ActionMenuAction['icon']) {\n\tif (!icon) return null;\n\tif (isValidElement(icon)) return icon;\n\tif (typeof icon === 'function') {\n\t\tconst Icon = icon as LucideIcon;\n\t\treturn <Icon className=\"size-icon-sm\" aria-hidden=\"true\" />;\n\t}\n\tif (typeof icon === 'object' && icon !== null && '$$typeof' in icon) {\n\t\tconst Icon = icon as unknown as ElementType<{ className?: string; 'aria-hidden'?: boolean }>;\n\t\treturn <Icon className=\"size-icon-sm\" aria-hidden />;\n\t}\n\treturn icon;\n}\n\nfunction renderActionLabel(label: ReactNode, className?: string) {\n\tif (typeof label === 'string' || typeof label === 'number' || typeof label === 'bigint') {\n\t\t// Same label recipe as Button: inherited size, medium weight.\n\t\treturn <Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className={cn('text-inherit', className)}>{label}</Text>;\n\t}\n\treturn className ? <span className={className}>{label}</span> : label;\n}\n\nfunction toMenuVariant(tone: ActionMenuAction['tone']): 'default' | 'destructive' {\n\treturn tone === 'destructive' ? 'destructive' : 'default';\n}\n\n/**\n * Inline actions resolve exactly like `Button`: an untoned action is the neutral\n * default button, and a tone without a style asks for that tone's solid treatment.\n * Mark the one main command with `tone: 'primary'`.\n */\nfunction toButtonPresentation(action: Pick<ActionMenuAction, 'tone' | 'buttonStyle'>): {\n\ttone?: ActionMenuAction['tone'];\n\tbuttonStyle?: ButtonStyle;\n\tclassName?: string;\n} {\n\tconst buttonStyle: ActionButtonStyle | undefined = action.buttonStyle;\n\tif (buttonStyle === 'link') {\n\t\treturn {\n\t\t\ttone: action.tone,\n\t\t\tbuttonStyle: 'ghost',\n\t\t\tclassName: 'underline underline-offset-[0.2em]',\n\t\t};\n\t}\n\treturn { tone: action.tone, buttonStyle };\n}\n\nfunction renderMenuAction({\n\taction,\n\tindex,\n\tdensity,\n\tcloseOnSelect,\n\trenderLink,\n}: {\n\taction: ActionMenuAction;\n\tindex: number;\n\tdensity: ActionMenuDensity;\n\tcloseOnSelect: boolean;\n\trenderLink?: (props: ActionMenuLinkRenderProps) => ReactElement;\n}) {\n\tconst key = getActionKey(action, index);\n\tconst shouldCloseOnSelect = action.closeOnSelect ?? closeOnSelect;\n\tif (action.render) {\n\t\treturn <div key={key} className=\"action-menu--item\">{action.render}</div>;\n\t}\n\n\tconst icon = renderActionIcon(action.icon);\n\tconst content = (\n\t\t<CollectionContent label={action.label} leading={icon} wrap\n\t\t className={cn('action-menu--item-content w-full',action.contentClassName)}\n\t\t leadingClassName=\"action-menu--item-icon text-inherit\" labelClassName=\"action-menu--item-label\"/>\n\t);\n\tconst className = cn(\n\t\t'action-menu--item',\n\t\tdensity === 'table' && collectionRecipes.tableRow,\n\t\taction.className,\n\t);\n\tif (action.type === 'checkbox') {\n\t\treturn (\n\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\tkey={key}\n\t\t\t\tchecked={!!action.checked}\n\t\t\t\tdisabled={action.disabled}\n\t\t\t\tcloseOnClick={shouldCloseOnSelect}\n\t\t\t\tonCheckedChange={action.onCheckedChange}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</DropdownMenuCheckboxItem>\n\t\t);\n\t}\n\n\tif (action.href && !action.disabled) {\n\t\tconst href = action.href;\n\t\treturn (\n\t\t\t<DropdownMenuLinkItem\n\t\t\t\tkey={key}\n\t\t\t\thref={href}\n\t\t\t\tvariant={toMenuVariant(action.tone)}\n\t\t\t\tcloseOnClick={shouldCloseOnSelect}\n\t\t\t\tonClick={action.onClick}\n\t\t\t\t// Element form, not a function, when the consumer supplies a link\n\t\t\t\t// renderer. The function form hands the menu-item props to the\n\t\t\t\t// consumer and trusts them to spread — and the renderer people\n\t\t\t\t// actually write destructures href/children/className and drops the\n\t\t\t\t// rest, which silently costs the row its `role=\"menuitem\"`. Handing\n\t\t\t\t// back an element lets the menu merge its own props on afterwards,\n\t\t\t\t// so a narrow renderer stays accessible.\n\t\t\t\trender={\n\t\t\t\t\trenderLink\n\t\t\t\t\t\t? (renderLink({\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t\t\ttarget: action.target,\n\t\t\t\t\t\t\trel: action.rel,\n\t\t\t\t\t\t\texternal: action.external,\n\t\t\t\t\t\t\tdisabled: action.disabled,\n\t\t\t\t\t\t}) as ReactElement)\n\t\t\t\t\t\t: (props) => (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\thref={href}\n\t\t\t\t\t\t\t\ttarget={action.target}\n\t\t\t\t\t\t\t\trel={action.rel}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</DropdownMenuLinkItem>\n\t\t);\n\t}\n\n\treturn (\n\t\t<DropdownMenuItem\n\t\tkey={key}\n\t\tdisabled={action.disabled}\n\t\tvariant={toMenuVariant(action.tone)}\n\t\tcloseOnClick={shouldCloseOnSelect}\n\t\tonClick={action.onClick}\n\t\tclassName={className}\n\t\t>\n\t\t\t{content}\n\t\t</DropdownMenuItem>\n\t);\n}\n\nfunction renderGroupedActions(args: {\n\tactions: readonly ActionMenuAction[];\n\tdensity: ActionMenuDensity;\n\tcloseOnSelect: boolean;\n\trenderLink?: (props: ActionMenuLinkRenderProps) => ReactElement;\n}) {\n\tconst nodes: ReactNode[] = [];\n\tlet currentGroup: string | true | null = null;\n\n\targs.actions.forEach((action, index) => {\n\t\tconst nextGroup = action.group ?? null;\n\t\tconst groupChanged = nextGroup !== currentGroup;\n\n\t\tif (nodes.length > 0 && groupChanged) {\n\t\t\tnodes.push(<DropdownMenuSeparator key={`sep-${currentGroup ?? 'root'}-${nextGroup ?? 'root'}-${index}`} className={action.groupClassName} />);\n\t\t}\n\n\t\tif (groupChanged) {\n\t\t\tcurrentGroup = nextGroup;\n\t\t\tif (typeof nextGroup === 'string') {\n\t\t\t\tnodes.push(\n\t\t\t\t\t<DropdownMenuLabel\n\t\t\t\t\t\tkey={`group-${nextGroup}-${index}`}\n\t\t\t\t\t\tclassName={cn('normal-case', action.groupClassName)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{nextGroup}\n\t\t\t\t\t</DropdownMenuLabel>,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tnodes.push(renderMenuAction({ ...args, action, index }));\n\t});\n\n\treturn nodes;\n}\n\n/**\n * Writes a node into a ref of either shape. `ActionMenu` has two claims on its\n * trigger — Base UI's own anchor ref and the consumer's — so neither may\n * overwrite the other.\n */\nfunction assignRef<T>(ref: React.Ref<T> | undefined, node: T | null) {\n\tif (typeof ref === 'function') {\n\t\tref(node);\n\t} else if (ref) {\n\t\t(ref as React.RefObject<T | null>).current = node;\n\t}\n}\n\nexport const ActionMenu = React.forwardRef<HTMLButtonElement, ActionMenuProps>(function ActionMenu({\n\tactions,\n\tlabel,\n\ticon = overflowTriggerRecipes.icon,\n\tsrText,\n\tcontext = 'inline',\n\tbuttonProps,\n\talign = 'end',\n\tside = 'bottom',\n\tcontentClassName = '',\n\twidth = 'w-auto',\n\tcloseOnSelect = true,\n\tdensity = 'default',\n\tlabelVisibility = 'visible',\n\tpreserveOrder = false,\n\trenderLink,\n\trenderTrigger,\n\tstrings: stringsProp,\n}: ActionMenuProps, ref) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst { defaultScale } = useDensityConfig();\n\tconst strings = useStrings(defaultActionMenuStrings, stringsProp);\n\tconst resolvedSrText = srText ?? strings.openMenuLabel;\n\tconst resolvedActions = React.useMemo(\n\t\t() => resolveActions(actions, preserveOrder),\n\t\t[actions, preserveOrder],\n\t);\n\n\tif (resolvedActions.length === 0) return null;\n\tconst hasVisibleLabel = Boolean(label) && labelVisibility === 'visible';\n\tconst hasResponsiveLabel = Boolean(label) && labelVisibility === 'responsive';\n\n\t// The icon-only square takes the size of the controls beside it\n\t// (`buttonProps.size`), otherwise the provider scale like every other Button.\n\tconst recipe = overflowTriggerRecipes.context[context] ?? overflowTriggerRecipes.context.inline;\n\tconst requestedSize = hasVisibleLabel ? buttonProps?.size ?? 'sm' : resolveComponentScale(buttonProps?.size, defaultScale);\n\tconst squareClass = requestedSize === 'sm' ? 'size-action-sm' : requestedSize === 'lg' ? 'size-action-lg' : 'size-action';\n\tconst defaultButtonProps: ActionMenuButtonProps = {\n\t\ttone: recipe.tone,\n\t\tbuttonStyle: recipe.buttonStyle,\n\t\tsize: requestedSize,\n\t\ticonOnly: !hasVisibleLabel,\n\t\tclassName: hasVisibleLabel\n\t\t\t? undefined\n\t\t\t: hasResponsiveLabel\n\t\t\t\t? `${squareClass} p-0 sm:w-auto sm:gap-space-sm sm:px-control-sm`\n\t\t\t\t: cn(`${squareClass} p-0`, recipe.glyph),\n\t};\n\n\tconst mergedButtonProps = {\n\t\t...defaultButtonProps,\n\t\t...buttonProps,\n\t\tclassName: cn(defaultButtonProps.className, buttonProps?.className),\n\t};\n\n\tconst {\n\t\ttone = recipe.tone,\n\t\tbuttonStyle = recipe.buttonStyle,\n\t\tsize = requestedSize,\n\t\ticonOnly = !hasVisibleLabel,\n\t\tclassName: triggerClassName,\n\t\t...triggerProps\n\t} = mergedButtonProps;\n\n\tconst labelClassName =\n\t\tlabelVisibility === 'hidden'\n\t\t\t? 'sr-only'\n\t\t\t: labelVisibility === 'responsive'\n\t\t\t\t? 'sr-only sm:not-sr-only'\n\t\t\t\t: undefined;\n\n\tconst triggerIcon = renderActionIcon(icon);\n\n\tconst buttonContent = label ? (\n\t\t<>\n\t\t\t{triggerIcon}\n\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className={cn('whitespace-nowrap text-inherit', labelClassName)}>\n\t\t\t\t{label}\n\t\t\t</Text>\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{triggerIcon}\n\t\t\t<Text tag=\"span\" size=\"inherit\" className=\"sr-only\">{resolvedSrText}</Text>\n\t\t</>\n\t);\n\n\treturn (\n\t\t<DropdownMenu open={open} onOpenChange={setOpen}>\n\t\t\t<DropdownMenuTrigger\n\t\t\t\trender={renderTrigger ?? ((dropdownTriggerProps) => {\n\t\t\t\t\t// Base UI supplies its own trigger ref through `render`. Composing\n\t\t\t\t\t// rather than overwriting keeps the popup anchored while still\n\t\t\t\t\t// handing the consumer the trigger element.\n\t\t\t\t\tconst { ref: baseTriggerRef } = dropdownTriggerProps as {\n\t\t\t\t\t\tref?: React.Ref<HTMLButtonElement>;\n\t\t\t\t\t};\n\n\t\t\t\t\tconst composedRef = (node: HTMLButtonElement | null) => {\n\t\t\t\t\t\tassignRef(baseTriggerRef, node);\n\t\t\t\t\t\tassignRef(ref, node);\n\t\t\t\t\t};\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t{...triggerProps}\n\t\t\t\t\t\t\t{...dropdownTriggerProps}\n\t\t\t\t\t\t\tref={composedRef}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttone={tone}\n\t\t\t\t\t\t\tbuttonStyle={buttonStyle}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\ticonOnly={iconOnly}\n\t\t\t\t\t\t\tdata-context={context}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'action-menu--component',\n\t\t\t\t\t\t\t\ttriggerClassName,\n\t\t\t\t\t\t\t\t(dropdownTriggerProps as { className?: string }).className,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonContent}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t/>\n\t\t\t<DropdownMenuContent\n\t\t\t\tdensity={density === 'table' ? 'compact' : density}\n\t\t\t\talign={align}\n\t\t\t\tside={side}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'action-menu--content',\n\t\t\t\t\twidth,\n\t\t\t\t\tpopoverWidthRecipes.menuMin,\n\t\t\t\t\tcontentClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<DropdownMenuGroup className=\"action-menu--group\">\n\t\t\t\t\t{renderGroupedActions({\n\t\t\t\t\t\tactions: resolvedActions,\n\t\t\t\t\t\tdensity,\n\t\t\t\t\t\tcloseOnSelect,\n\t\t\t\t\t\trenderLink,\n\t\t\t\t\t})}\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n});\n\nActionMenu.displayName = 'ActionMenu';\n\nexport const ActionButtons = React.forwardRef<HTMLDivElement, ActionButtonsProps>(function ActionButtons({\n\tactions,\n\tclassName,\n\tbuttonClassName,\n\tsize = 'sm',\n\trenderLink,\n}: ActionButtonsProps, ref) {\n\tconst visibleActions = resolveActions(actions, true);\n\tif (visibleActions.length === 0) return null;\n\n\treturn (\n\t\t<div ref={ref} className={cn('action-buttons--component flex flex-wrap items-center', compositionClasses.commands, className)}>\n\t\t\t{visibleActions.map((action, index) => {\n\t\t\t\tconst key = getActionKey(action, index);\n\t\t\t\tif (action.render) {\n\t\t\t\t\treturn <React.Fragment key={key}>{action.render}</React.Fragment>;\n\t\t\t\t}\n\n\t\t\t\tconst icon = renderActionIcon(action.icon);\n\t\t\t\tconst resolved = toButtonPresentation(action);\n\t\t\t\tconst children = (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!!icon && <span className=\"action-buttons--icon inline-flex shrink-0 items-center\">{icon}</span>}\n\t\t\t\t\t\t{renderActionLabel(action.label, 'action-buttons--label')}\n\t\t\t\t\t</>\n\t\t\t\t);\n\n\t\t\t\tif (action.href && !action.disabled && renderLink) {\n\t\t\t\t\tconst href = action.href;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttone={resolved.tone}\n\t\t\t\t\t\t\tbuttonStyle={resolved.buttonStyle}\n\t\t\t\t\t\t\tsize={action.buttonSize ?? size}\n\t\t\t\t\t\t\tnativeButton={false}\n\t\t\t\t\t\t\tclassName={cn('action-buttons--item', resolved.className, buttonClassName, action.className)}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\taction.onClick?.();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\trender={(buttonRenderProps) =>\n\t\t\t\t\t\t\t\trenderLink({\n\t\t\t\t\t\t\t\t\t...buttonRenderProps,\n\t\t\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\t\t\tchildren: buttonRenderProps.children,\n\t\t\t\t\t\t\t\t\ttarget: action.target,\n\t\t\t\t\t\t\t\t\trel: action.rel,\n\t\t\t\t\t\t\t\t\texternal: action.external,\n\t\t\t\t\t\t\t\t\tdisabled: action.disabled,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (action.href && !action.disabled) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button key={key} href={action.href} target={action.target} rel={action.rel} tone={resolved.tone} buttonStyle={resolved.buttonStyle} size={action.buttonSize ?? size} className={cn('action-buttons--item', resolved.className, buttonClassName, action.className)} onClick={action.onClick}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst button = (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\ttone={resolved.tone}\n\t\t\t\t\t\tbuttonStyle={resolved.buttonStyle}\n\t\t\t\t\t\tsize={action.buttonSize ?? size}\n\t\t\t\t\t\tclassName={cn('action-buttons--item', resolved.className, buttonClassName, action.className)}\n\t\t\t\t\t\tdisabled={!!action.disabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\taction.onClick?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\n\t\t\t\treturn button;\n\t\t\t})}\n\t\t</div>\n\t);\n});\n\nActionButtons.displayName = 'ActionButtons';\n\nexport {\n\tdefaultActionMenuStrings,\n\ttype ActionMenuStrings,\n} from './action-menu.strings';\n"],"mappings":"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"}

package/dist/affordance-geometry.generated-B8yGOr8-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"affordance-geometry.generated-B8yGOr8-.js","names":["affordanceGeometry","\"surfaceGap\"","\"xs\"","\"sm\"","\"md\"","\"lg\"","\"inlineEditColumns\"","\"single\"","\"multiline\"","\"avatarOverlap\"","\"navigationGuideStart\"","\"clearEnd\"","\"clearPadding\"","\"pairedClearPadding\"","\"pairedIconPadding\"","\"pairedAddonPadding\"","\"pairedCountPadding\"","\"measuredPadding\"","\"measuredStartPadding\"","\"textareaCountPadding\"","\"togglePadding\"","\"largeIconStart\"","\"largeIconEnd\"","\"buttonBlockPadding\"","\"controlTextMinHeight\"","\"controlBlockPadding\"","\"fileField\"","\"minHeight\"","\"buttonMinHeight\"","\"blockPadding\"","\"rawFileField\"","\"overlayClose\"","\"overlayHeader\"","\"selectToggleTrack\"","\"selectTogglePadding\"","\"textareaBlockPadding\"","\"textareaClearTop\"","\"textareaIconTop\"","\"clearTargetBleed\"","\"actionGutter\"","\"start\"","\"end\"","\"menuActionReserve\"","\"item\"","\"subItem\"","\"toastCloseReserve\"","\"calendarCell\"","\"calendarCompactCell\"","\"overlayHeaderCentered\""],"sources":["../src/lib/affordance-geometry.generated.ts"],"sourcesContent":["/* Generated by scripts/primitive-geometry.mjs; recipes, not theme roots. */\nexport const affordanceGeometry = {\n  \"surfaceGap\": {\n    \"xs\": \"gap-[calc(var(--surface-y)*0.5*var(--space-scale))]\",\n    \"sm\": \"gap-[calc(var(--surface-y)*2/3*var(--space-scale))]\",\n    \"md\": \"gap-[calc(var(--surface-y)*var(--space-scale))]\",\n    \"lg\": \"gap-[calc(var(--surface-y)*4/3*var(--space-scale))]\"\n  },\n  \"inlineEditColumns\": {\n    \"single\": \"grid-cols-[minmax(0,1fr)_calc(var(--height-action)*8/9*var(--density-scale)*2+0.25rem*var(--space-scale))]\",\n    \"multiline\": \"grid-cols-[minmax(0,1fr)_calc(var(--height-action)*8/9*var(--density-scale))]\"\n  },\n  \"avatarOverlap\": {\n    \"sm\": \"has-data-[scale=sm]:-space-x-[calc(var(--avatar)*0.75/4)]\",\n    \"md\": \"-space-x-[calc(var(--avatar)/4)]\",\n    \"lg\": \"has-data-[scale=lg]:-space-x-[calc(var(--avatar)*1.25/4)]\"\n  },\n  \"navigationGuideStart\": \"ms-[calc(var(--control-x)*0.8333333*var(--space-scale)+var(--icon)*0.75/2)]\",\n  \"clearEnd\": {\n    \"sm\": \"end-[calc(var(--control-x)*0.8333333*var(--space-scale))]\",\n    \"md\": \"end-[calc(var(--control-x)*var(--space-scale))]\",\n    \"lg\": \"end-[calc(var(--control-x)*var(--space-scale))]\"\n  },\n  \"clearPadding\": {\n    \"sm\": \"pe-[calc(var(--control-x)*0.8333333*var(--space-scale)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"md\": \"pe-[calc(var(--control-x)*var(--space-scale)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"lg\": \"pe-[calc(var(--control-x)*var(--space-scale)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\"\n  },\n  \"pairedClearPadding\": {\n    \"sm\": \"pe-[calc(var(--control-x)*0.8333333*var(--space-scale)+2.75rem*var(--density-scale)+0.75rem*var(--space-scale))]\",\n    \"md\": \"pe-[calc(var(--control-x)*var(--space-scale)+2.75rem*var(--density-scale)+0.75rem*var(--space-scale))]\",\n    \"lg\": \"pe-[calc(var(--control-x)*var(--space-scale)+2.75rem*var(--density-scale)+0.75rem*var(--space-scale))]\"\n  },\n  \"pairedIconPadding\": {\n    \"sm\": \"pe-[calc((var(--control-x)*0.8333333+0.375rem)*var(--space-scale)+var(--icon)*0.75+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"md\": \"pe-[calc((var(--control-x)+0.5rem)*var(--space-scale)+var(--icon)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"lg\": \"pe-[calc((var(--control-x)+0.5rem)*var(--space-scale)+var(--icon)*1.25+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\"\n  },\n  \"pairedAddonPadding\": {\n    \"sm\": \"pe-[calc(var(--control-x)*0.8333333*var(--space-scale)+1.25rem+0.375rem*var(--space-scale)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"md\": \"pe-[calc(var(--control-x)*var(--space-scale)+1.5rem+0.375rem*var(--space-scale)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"lg\": \"pe-[calc(var(--control-x)*var(--space-scale)+1.5rem+0.375rem*var(--space-scale)+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\"\n  },\n  \"pairedCountPadding\": {\n    \"sm\": \"pe-[calc(var(--control-x)*0.8333333*var(--space-scale)+2.25rem+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"md\": \"pe-[calc(var(--control-x)*var(--space-scale)+2.5rem+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\",\n    \"lg\": \"pe-[calc(var(--control-x)*var(--space-scale)+2.5rem+1.375rem*var(--density-scale)+0.375rem*var(--space-scale))]\"\n  },\n  \"measuredPadding\": {\n    \"sm\": \"pe-[calc(var(--control-x)*0.8333333*var(--space-scale)+var(--field-trailing-width)+0.375rem*var(--space-scale))]\",\n    \"md\": \"pe-[calc(var(--control-x)*var(--space-scale)+var(--field-trailing-width)+0.375rem*var(--space-scale))]\",\n    \"lg\": \"pe-[calc(var(--control-x)*var(--space-scale)+var(--field-trailing-width)+0.375rem*var(--space-scale))]\"\n  },\n  \"measuredStartPadding\": {\n    \"sm\": \"ps-[calc(var(--control-x)*0.8333333*var(--space-scale)+var(--field-leading-width)+0.375rem*var(--space-scale))]\",\n    \"md\": \"ps-[calc(var(--control-x)*var(--space-scale)+var(--field-leading-width)+0.375rem*var(--space-scale))]\",\n    \"lg\": \"ps-[calc(var(--control-x)*var(--space-scale)+var(--field-leading-width)+0.375rem*var(--space-scale))]\"\n  },\n  \"textareaCountPadding\": \"pb-[calc(var(--text-xs)*var(--leading-normal)+0.625rem*var(--space-scale))]\",\n  \"togglePadding\": \"pe-[calc(1.375rem*var(--density-scale)+0.625rem*var(--space-scale))]\",\n  \"largeIconStart\": \"ps-[calc((var(--control-x)+0.5rem)*var(--space-scale)+var(--icon)*1.25)]\",\n  \"largeIconEnd\": \"pe-[calc((var(--control-x)+0.5rem)*var(--space-scale)+var(--icon)*1.25)]\",\n  \"buttonBlockPadding\": {\n    \"sm\": \"py-[min(calc(0.25rem*var(--space-scale)),calc((var(--height-action)*8/9*var(--density-scale)-1lh)/2-1px))]\",\n    \"md\": \"py-[min(calc(0.25rem*var(--space-scale)),calc((var(--height-action)*var(--density-scale)-1lh)/2-1px))]\",\n    \"lg\": \"py-[min(calc(0.25rem*var(--space-scale)),calc((var(--height-action)*10/9*var(--density-scale)-1lh)/2-1px))]\"\n  },\n  \"controlTextMinHeight\": \"min-h-[calc(1lh+2px)]\",\n  \"controlBlockPadding\": {\n    \"sm\": \"py-[max(0px,min(calc(0.25rem*var(--space-scale)),calc((var(--height-control)*8/9*var(--density-scale)-1lh)/2-1px)))]\",\n    \"md\": \"py-[max(0px,min(calc(0.25rem*var(--space-scale)),calc((var(--height-control)*var(--density-scale)-1lh)/2-1px)))]\",\n    \"lg\": \"py-[max(0px,min(calc(0.375rem*var(--space-scale)),calc((var(--height-control)*10/9*var(--density-scale)-1lh)/2-1px)))]\"\n  },\n  \"fileField\": {\n    \"minHeight\": \"min-h-[calc(max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-pxs)*var(--text-pxs--line-height)+2px)))+2px)]\",\n    \"buttonMinHeight\": \"file:min-h-[calc(1lh+2px)]\",\n    \"blockPadding\": {\n      \"sm\": \"py-[max(0px,min(calc(0.25rem*var(--space-scale)),calc((var(--height-control)*8/9*var(--density-scale)-max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-pxs)*var(--text-pxs--line-height)+2px))))/2-1px)))]\",\n      \"md\": \"py-[max(0px,min(calc(0.25rem*var(--space-scale)),calc((var(--height-control)*var(--density-scale)-max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-pxs)*var(--text-pxs--line-height)+2px))))/2-1px)))]\",\n      \"lg\": \"py-[max(0px,min(calc(0.375rem*var(--space-scale)),calc((var(--height-control)*10/9*var(--density-scale)-max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-pxs)*var(--text-pxs--line-height)+2px))))/2-1px)))]\"\n    }\n  },\n  \"rawFileField\": {\n    \"minHeight\": \"min-h-[calc(max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-sm)*var(--text-sm--line-height)+0px)))+2px)]\",\n    \"buttonMinHeight\": \"file:min-h-[calc(1lh+0px)]\",\n    \"blockPadding\": {\n      \"sm\": \"py-[max(0px,min(calc(0.25rem*var(--space-scale)),calc((var(--height-control)*8/9*var(--density-scale)-max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-sm)*var(--text-sm--line-height)+0px))))/2-1px)))]\",\n      \"md\": \"py-[max(0px,min(calc(0.25rem*var(--space-scale)),calc((var(--height-control)*var(--density-scale)-max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-sm)*var(--text-sm--line-height)+0px))))/2-1px)))]\",\n      \"lg\": \"py-[max(0px,min(calc(0.375rem*var(--space-scale)),calc((var(--height-control)*10/9*var(--density-scale)-max(1lh,max(calc(1.75rem*var(--density-scale)),calc(var(--text-sm)*var(--text-sm--line-height)+0px))))/2-1px)))]\"\n    }\n  },\n  \"overlayClose\": \"absolute top-[calc(var(--surface-y)*var(--space-scale)+(var(--text-base)*var(--leading-snug)-var(--height-action)*8/9*var(--density-scale))/2)] end-[calc(var(--surface-x)*var(--space-scale))]\",\n  \"overlayHeader\": \"[[data-slot$=-content]:has(>[data-overlay-close])>&]:pe-[calc(var(--surface-x)*var(--space-scale)+var(--height-action)*8/9*var(--density-scale)+0.5rem*var(--space-scale))]\",\n  \"selectToggleTrack\": {\n    \"sm\": \"end-[calc(var(--control-x)*0.8333333*var(--space-scale)+1px-(1.375rem*var(--density-scale)-var(--icon)*0.75)/2)]\",\n    \"md\": \"end-[calc(var(--control-x)*var(--space-scale)+1px-(1.375rem*var(--density-scale)-var(--icon))/2)]\",\n    \"lg\": \"end-[calc(var(--control-x)*var(--space-scale)+1px-(1.375rem*var(--density-scale)-var(--icon)*1.25)/2)]\"\n  },\n  \"selectTogglePadding\": {\n    \"sm\": \"pe-[calc((var(--control-x)*0.8333333+0.375rem)*var(--space-scale)+1px+(1.375rem*var(--density-scale)+var(--icon)*0.75)/2)]\",\n    \"md\": \"pe-[calc((var(--control-x)+0.375rem)*var(--space-scale)+1px+(1.375rem*var(--density-scale)+var(--icon))/2)]\",\n    \"lg\": \"pe-[calc((var(--control-x)+0.375rem)*var(--space-scale)+1px+(1.375rem*var(--density-scale)+var(--icon)*1.25)/2)]\"\n  },\n  \"textareaBlockPadding\": {\n    \"sm\": \"py-[calc((var(--height-control)*8/9*var(--density-scale)-1lh)/2-1px)]\",\n    \"md\": \"py-[calc((var(--height-control)*var(--density-scale)-1lh)/2-1px)]\",\n    \"lg\": \"py-[calc((var(--height-control)*10/9*var(--density-scale)-1lh)/2-1px)]\"\n  },\n  \"textareaClearTop\": {\n    \"sm\": \"top-[calc((var(--height-control)*8/9-1.375rem)*var(--density-scale)/2)]\",\n    \"md\": \"top-[calc((var(--height-control)-1.375rem)*var(--density-scale)/2)]\",\n    \"lg\": \"top-[calc((var(--height-control)*10/9-1.375rem)*var(--density-scale)/2)]\"\n  },\n  \"textareaIconTop\": {\n    \"sm\": \"top-[calc((var(--height-control)*8/9*var(--density-scale)-var(--icon))/2)]\",\n    \"md\": \"top-[calc((var(--height-control)*var(--density-scale)-var(--icon))/2)]\",\n    \"lg\": \"top-[calc((var(--height-control)*10/9*var(--density-scale)-var(--icon))/2)]\"\n  },\n  \"clearTargetBleed\": \"-my-[calc((1.375rem*var(--density-scale)-var(--icon)*0.75)/2)]\",\n  \"actionGutter\": {\n    \"sm\": {\n      \"start\": \"ps-[calc(var(--height-action)*8/9*var(--density-scale)+0.5rem*var(--space-scale))]\",\n      \"end\": \"pe-[calc(var(--height-action)*8/9*var(--density-scale)+0.5rem*var(--space-scale))]\"\n    },\n    \"md\": {\n      \"start\": \"ps-[calc(var(--height-action)*var(--density-scale)+0.5rem*var(--space-scale))]\",\n      \"end\": \"pe-[calc(var(--height-action)*var(--density-scale)+0.5rem*var(--space-scale))]\"\n    },\n    \"lg\": {\n      \"start\": \"ps-[calc(var(--height-action)*10/9*var(--density-scale)+0.5rem*var(--space-scale))]\",\n      \"end\": \"pe-[calc(var(--height-action)*10/9*var(--density-scale)+0.5rem*var(--space-scale))]\"\n    }\n  },\n  \"menuActionReserve\": {\n    \"item\": \"group-has-[>[data-sidebar=menu-action]]/menu-item:pe-[calc(var(--height-action)*7/9*var(--density-scale)+var(--control-x)*var(--space-scale))]!\",\n    \"subItem\": \"group-has-[>[data-sidebar=menu-action]]/menu-sub-item:pe-[calc(var(--height-action)*7/9*var(--density-scale)+var(--control-x)*var(--space-scale))]!\"\n  },\n  \"toastCloseReserve\": \"has-[[data-close-button]]:!pe-[calc(var(--height-action)*8/9*var(--density-scale)+0.75rem*var(--space-scale))]\",\n  \"calendarCell\": \"[--cell-size:calc(var(--height-action)*8/9*var(--density-scale))] [--cell-radius:min(calc(var(--radius)*0.75),calc(min(var(--height-action),var(--height-control))*var(--density-scale)/4))]\",\n  \"calendarCompactCell\": \"[--cell-size:calc(1.875rem*var(--density-scale))] sm:[--cell-size:calc(var(--height-action)*8/9*var(--density-scale))]\",\n  \"overlayHeaderCentered\": \"[[data-slot$=-content]:has(>[data-overlay-close])>&]:ps-[calc(var(--surface-x)*var(--space-scale)+var(--height-action)*8/9*var(--density-scale)+0.5rem*var(--space-scale))]\"\n} as const;\n"],"mappings":";AACA,IAAaA,IAAqB;CAChCC,YAAc;EACZC,IAAM;EACNC,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAC,mBAAqB;EACnBC,QAAU;EACVC,WAAa;CACf;CACAC,eAAiB;EACfN,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAK,sBAAwB;CACxBC,UAAY;EACVR,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAO,cAAgB;EACdT,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAQ,oBAAsB;EACpBV,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAS,mBAAqB;EACnBX,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAU,oBAAsB;EACpBZ,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAW,oBAAsB;EACpBb,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAY,iBAAmB;EACjBd,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAa,sBAAwB;EACtBf,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAc,sBAAwB;CACxBC,eAAiB;CACjBC,gBAAkB;CAClBC,cAAgB;CAChBC,oBAAsB;EACpBpB,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAmB,sBAAwB;CACxBC,qBAAuB;EACrBtB,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAqB,WAAa;EACXC,WAAa;EACbC,iBAAmB;EACnBC,cAAgB;GACd1B,IAAM;GACNC,IAAM;GACNC,IAAM;EACR;CACF;CACAyB,cAAgB;EACdH,WAAa;EACbC,iBAAmB;EACnBC,cAAgB;GACd1B,IAAM;GACNC,IAAM;GACNC,IAAM;EACR;CACF;CACA0B,cAAgB;CAChBC,eAAiB;CACjBC,mBAAqB;EACnB9B,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACA6B,qBAAuB;EACrB/B,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACA8B,sBAAwB;EACtBhC,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACA+B,kBAAoB;EAClBjC,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAgC,iBAAmB;EACjBlC,IAAM;EACNC,IAAM;EACNC,IAAM;CACR;CACAiC,kBAAoB;CACpBC,cAAgB;EACdpC,IAAM;GACJqC,OAAS;GACTC,KAAO;EACT;EACArC,IAAM;GACJoC,OAAS;GACTC,KAAO;EACT;EACApC,IAAM;GACJmC,OAAS;GACTC,KAAO;EACT;CACF;CACAC,mBAAqB;EACnBC,MAAQ;EACRC,SAAW;CACb;CACAC,mBAAqB;CACrBC,cAAgB;CAChBC,qBAAuB;CACvBC,uBAAyB;AAC3B"}