npm - @wildo-ai/saas-frontend-lib - Versions diffs - 1.1.9 → 1.1.11 - Mend

@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1566) hide show

package/dist/esm/components/resources/ResourceListItemRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResourceListItemRenderer.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceListItemRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n ResourceListItemRenderer\n \n Shared item renderer for List and Search presets.\n * Encapsulates schema-aware field rendering (FK, enum, date, array),\n * primary/secondary field split, and per-item operations.\n \n Used by List_Default and Search_Default to ensure parity in how\n * resource items are displayed.\n /\n\nimport React, { useMemo, useCallback } from 'react';\nimport { z } from 'zod';\nimport {\n CoreResourceOperation,\n ResourceOperationDisplayMode,\n ErrorCustomMessageReference,\n} from '@wildo-ai/saas-models';\nimport type { AnyFrontendResourceConfiguration, FrontendResourcesRegistry } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { getEnumValues, DisplayChromeMode, ViewportBreakpoint } from '@wildo-ai/zod-decorators';\nimport { UIContext } from '~wildo-frontend-lib/core/ui/UIContext';\nimport { useLongPress } from '~wildo-frontend-lib/components/resources/useLongPress';\nimport { DisplayField } from '~wildo-frontend-lib/components/data-display/DisplayField';\nimport { DisplayChromeProvider } from '~wildo-frontend-lib/components/data-display/chromes/DisplayChromeContext';\nimport { ResourceSummaryDisplayer } from '~wildo-frontend-lib/components/data-display/ResourceSummaryDisplayer';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { FrontendResourceUtils, frontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { AutomatedLayoutFrontendUtils } from '~wildo-frontend-lib/core/automated-layout/automated-layout.frontend.utils';\nimport { resolveResourceLabelEnumSchema } from '~wildo-frontend-lib/core/resources/resource-label-field-paths.frontend.utils';\nimport type { FrontendResourceOperationContext } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { CheckboxRoot } from '~wildo-frontend-lib/components/form/controls/boolean/checkbox';\nimport {\n CARD_ROW_PADDING_CLASS,\n CARD_SELECTION_RAIL_CLASS,\n CARD_SELECTION_SLOT_CLASS,\n} from '~wildo-frontend-lib/components/resources/collection-card-layout.utils';\nimport type { CardActionPlacement } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { resolveCardActionPlacementClasses } from './card-action-placement.utils';\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\nexport interface ResourceListItemRendererProps {\n /* The data item to render /\n item: Record<string, unknown>;\n /* Resource type /\n resourceType: string;\n /* Resource configuration /\n resourceConfig: AnyFrontendResourceConfiguration;\n /* Resource registry /\n registry: FrontendResourcesRegistry;\n /* Ordered list of summary fields to display /\n summaryFields: string[];\n /* Pre-resolved field labels (from i18n) /\n fieldLabelsMap: Record<string, string>;\n /* Function to resolve enum display values via i18n — `fieldSchema` names the enum the field declares (#966) /\n tResourceFieldEnumValue: (resourceType: string, fieldName: string, enumValue: string, fieldSchema: z.ZodTypeAny \| undefined) => string;\n /\n What a click on the row does — and, by its ABSENCE, that a click does nothing.\n \n Optional since 2026-09-20, and the optionality is the point. The card used to take this\n * REQUIRED and paint itself `cursor-pointer` + `role=\"button\"` + `tabIndex={0}` unconditionally,\n * so every summary row in the product announced itself as a button. Whether the click could act\n * was decided somewhere else entirely — in the host, by whether a READ operation resolves to a\n * view — and the two were never compared. On the audit trail the answer was \"it cannot\", so the\n * row invited a click, took focus, answered Enter and Space, and did nothing at any of them.\n \n A host that cannot open a row now omits this, and the affordance disappears with the behaviour\n * because both are read off the same value.\n /\n onItemClick?: (item: Record<string, unknown>) => void;\n /* Optional operations component to render for this item /\n operationsSlot?: React.ReactNode;\n /\n Where the per-item operations sit within the card (2-axis anchor +\n * orientation). Resolved by the host from `collectionDisplayConfig.cardActionPlacement`.\n * Omitted → the default (inline-end, vertically centered, horizontal row).\n /\n cardActionPlacement?: CardActionPlacement;\n /\n Selection affordance. When `selectable`, a leading checkbox renders and\n * toggles selection via `onToggleSelect` (independent of the row click, which\n * still navigates). `isSelected` drives the checkbox + a selected highlight.\n /\n selectable?: boolean;\n isSelected?: boolean;\n onToggleSelect?: (item: Record<string, unknown>) => void;\n /\n Whether the collection is currently in SELECTION MODE (any item selected).\n * Mobile UX: a long-press enters selection mode, and while active a plain TAP\n * toggles selection instead of navigating (the \"long-press to multi-select\"\n * pattern). Gated to touch/mobile — on desktop a click always navigates and\n * the checkbox is the explicit toggle.\n /\n selectionActive?: boolean;\n /* Accessible label for the selection checkbox (host provides the i18n string). /\n selectAriaLabel?: string;\n /* Optional className for the root container /\n className?: string;\n /* Interactive CSS classes from design system (hover state, transition) /\n interactiveClasses?: {\n hover?: string;\n transition?: string;\n };\n}\n\n// =============================================================================\n// FIELD VALUE RENDERER\n// =============================================================================\n\nexport interface FieldValueRendererProps {\n fieldName: string;\n value: unknown;\n fieldSchema: z.ZodTypeAny \| undefined;\n fieldLabel: string \| undefined;\n resourceType: string;\n tResourceFieldEnumValue: (resourceType: string, fieldName: string, enumValue: string, fieldSchema: z.ZodTypeAny \| undefined) => string;\n /\n The whole record this cell belongs to, forwarded to the dispatcher as `parentData`.\n \n Optional so a caller rendering a bare value is unaffected — but every collection caller passes\n * it, because a field frequently needs a sibling to render correctly and a cell that does not know\n * its row cannot reach one.\n /\n record?: Record<string, unknown>;\n}\n\n/\n Renders a single summary field VALUE through the shared decorator-driven\n * display pipeline (`DisplayField` → `DisplayValueDispatcher` → presets) — the\n * SAME path the detail/read view uses — so the FULL zod-UI display policy is\n * honored in lists/tables by default: enum → badge (+ per-value colors),\n * boolean → checkmark / yes-no, string → truncate / multiline, FK → reference,\n * date → formatted, money/bigdecimal/duration/etc.\n \n Previously this re-implemented a weak subset (enum-as-plain-text, naive array\n * join, `String(value)` fallback) that silently ignored every\n * `{primitive}UI().display` decorator, so listings/tables diverged from the\n * detail view (e.g. a `displayMode: BADGE` enum rendered as plain text). Routing\n * through `DisplayField` removes that divergence and the maintenance burden of a\n * parallel renderer.\n \n The card (\"Label:\" prefix) and the table (column header) own the label, so the\n * value is rendered under COMPACT chrome — a bare value with no framework\n * label/description wrapper. i18n enum labels are threaded explicitly via\n * `enumLabels` because there is no surrounding `DisplayTemplateContext`\n * (which is what supplies them inside `AutomaticDisplayer`).\n /\nexport function FieldValueRenderer({\n fieldName,\n value,\n fieldSchema,\n fieldLabel,\n resourceType,\n record,\n tResourceFieldEnumValue,\n}: FieldValueRendererProps): React.JSX.Element \| null {\n // Build the enum value→label map from the same i18n translator the list\n // already uses, so enum badges show translated labels rather than raw enum\n // values. Hook runs unconditionally, before the null-value early return.\n //\n // The vocabulary is read off the ENUM-BEARING schema — the field, or an array's element — through the\n // resolver the detail views and the labelling planner share. Asking only \"is the field itself an enum\"\n // left every array of an enum raw in a list or a table: a member directory printed `ORG_MEMBER` while\n // the same roles read \"Organization member\" on the member's own page.\n const enumLabels = useMemo<Record<string, string> \| undefined>(() => {\n const enumSchema = fieldSchema ? resolveResourceLabelEnumSchema(fieldSchema) : undefined;\n if (!enumSchema) return undefined;\n const enumValues = getEnumValues(enumSchema);\n if (enumValues.length === 0) return undefined;\n return Object.fromEntries(\n enumValues.map((enumValue) => [enumValue, tResourceFieldEnumValue(resourceType, fieldName, enumValue, fieldSchema)]),\n );\n }, [fieldSchema, resourceType, fieldName, tResourceFieldEnumValue]);\n\n if (value === null \|\| value === undefined) return null;\n\n return (\n <div className=\"flex min-w-0 items-baseline gap-element-sm\">\n {fieldLabel && <span className=\"text-xs text-muted-foreground\">{fieldLabel}:</span>}\n {fieldSchema ? (\n // COMPACT chrome → bare value with the full decorator policy applied.\n <DisplayChromeProvider displayChromeMode={DisplayChromeMode.COMPACT}>\n <DisplayField\n name={fieldName}\n schema={fieldSchema}\n value={value}\n enumLabels={enumLabels}\n // The ROW this cell belongs to. Every other display surface hands the dispatcher its\n // record as `parentData`; a collection cell did not, so anything a field needs from its\n // siblings was unreachable from a list or a table — including a foreign key's\n // `labelFallbackField`, which is why a member directory printed raw ObjectIds.\n parentData={record}\n disableInlineEdit\n className=\"min-w-0 truncate text-sm text-muted-foreground\"\n />\n </DisplayChromeProvider>\n ) : (\n // No schema resolved for this field — `DisplayField` requires a schema,\n // so fall back to a plain string (matches the previous default branch).\n <span className=\"min-w-0 truncate text-sm text-muted-foreground\">{String(value)}</span>\n )}\n </div>\n );\n}\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport function ResourceListItemRenderer({\n item,\n resourceType,\n resourceConfig,\n registry,\n summaryFields,\n fieldLabelsMap,\n tResourceFieldEnumValue,\n onItemClick,\n operationsSlot,\n cardActionPlacement,\n selectable = false,\n isSelected = false,\n onToggleSelect,\n selectionActive = false,\n selectAriaLabel,\n className,\n interactiveClasses,\n}: ResourceListItemRendererProps): React.JSX.Element {\n if (!resourceConfig?.resourceFieldIdentifier) {\n throw FrontendResourceUtils.buildConfigurationError(\n ErrorCustomMessageReference.FRONTEND_RESOURCE_FIELD_IDENTIFIER_NOT_FOUND,\n { resourceType, component: 'ResourceListItemRenderer' }\n );\n }\n const fieldIdentifier = resourceConfig.resourceFieldIdentifier as string;\n // Resolve the record's own id (`_id`), not the cross-resource field-identifier\n // name (`<resource>Id`) which is absent from a plain record — see\n // FrontendResourceUtils.getResourceObjectId.\n const itemId = FrontendResourceUtils.getResourceObjectId(item, fieldIdentifier);\n\n // Primary display: use computeFrontendResourceLabel for the primary value.\n // For a junction this resolves the server-projected instance label (e.g. a\n // `forwardedLabel` virtual field referenced by `getFrontendResourceLabel`).\n /\n * The translator goes to the label callback. Without it `computeFrontendResourceLabel` falls back\n * to an IDENTITY `t`, so a label callback that words its row through the label tree rendered the\n * key — then its own fallback, a ref — on every card, while the same row's page header (which\n * passes `t`) read correctly (#1454: governed documents titled `document-definition:…` in lists).\n /\n const { t: tLabel, formatDate, formatDateTime } = useI18n({ resource: resourceType });\n const primaryLabel = useMemo((): string => {\n const label = FrontendResourceUtils.computeFrontendResourceLabel({\n resourceType,\n registry,\n currentObject: item,\n t: tLabel,\n formatDate,\n formatDateTime,\n });\n return String(label \|\| item[summaryFields[0]] \|\| `${resourceType} #${itemId}`);\n }, [item, resourceType, registry, summaryFields, itemId, tLabel, formatDate, formatDateTime]);\n\n // Secondary fields: every summary field EXCEPT the one already shown as the\n // primary label (title). The title comes from `computeFrontendResourceLabel`\n // — an arbitrary label strategy (a `string[]` join or a function), NOT\n // necessarily `summaryFields[0]`. Excluding the title positionally (`slice(1)`)\n // had two bugs: (a) it REPEATED the title when the label field wasn't first\n // (e.g. a list whose label is `name` but whose first summary field is `status`\n // → \"Name: …\" rendered under the identical title), and (b) it silently DROPPED\n // `summaryFields[0]` whenever that field wasn't the label. Excluding the title\n // by VALUE fixes both: the field whose value equals the title is the label\n // field wherever it sits, and every genuine non-label summary field is kept.\n // (The primary-scope FK is dropped upstream by\n // `ResourceLayoutUtils.detectSummaryFields`, so it never reaches here.)\n const secondaryFields = useMemo(\n () => summaryFields.filter((fieldName) => {\n const value = item[fieldName];\n if (value === null \|\| value === undefined) return false;\n return String(value) !== primaryLabel;\n }),\n [summaryFields, item, primaryLabel],\n );\n\n // Schema shape for field type detection\n const schemaShape = useMemo(() => {\n const mainSchema = resourceConfig?.mainSchema;\n if (!mainSchema) return null;\n // Polymorphic resources feed a discriminated-union schema; resolve the union-aware field shape (else getObjectShape returns null for the union → no field labels).\n return AutomatedLayoutFrontendUtils.getObjectLikeFieldShape(mainSchema, { commonOnly: false }) ?? null;\n }, [resourceConfig]);\n\n // AUTHORED summary template — the `layout.summary` contract promises coverage\n // of \"cards, list items, FK references\". When a resource authors one, the card\n // defers its ENTIRE content region (title + body) to `ResourceSummaryDisplayer`:\n // the title is now a first-class template element (`<SummaryTitle />`, placed by\n // `<SummaryLayout>`), so a status badge can sit inline with the title and the\n // exact same composition renders in the FK popover. We pass the primary label we\n // already computed (correct `t`, junction forwardedLabel) into the displayer's\n // SummaryContext instead of rendering our own title above it.\n //\n // Resources WITHOUT an authored template keep the legacy host-owned title +\n // generic \"Label: value\" body: routing them through the GENERATED default\n // template would restyle every list in every app for no authored reason.\n const authoredSummaryTemplate = resourceConfig?.frontendConfiguration?.layout?.summary;\n\n const hoverClass = interactiveClasses?.hover ?? '';\n const transitionClass = interactiveClasses?.transition ?? '';\n // Resolve where the per-item actions sit (2-axis anchor → flex classes). The\n // content + actions share one flex container so actions never overlap text.\n const placement = resolveCardActionPlacementClasses(cardActionPlacement);\n\n // Mobile multi-select: a long-press ENTERS selection mode (selects this item);\n // while selection mode is active (`selectionActive`), a plain TAP toggles\n // selection instead of navigating. Gated to a mobile viewport — on desktop a\n // click always navigates and the checkbox is the explicit toggle. Long-press\n // is touch-only (the hook binds touch handlers).\n // Optional UIContext read: a rendering leaf shouldn't hard-require the shell's\n // UIProvider just to check the breakpoint — outside a provider (isolated\n // renders/tests) it degrades to desktop behavior (isMobile = false).\n const ui = React.useContext(UIContext);\n const isMobile = ui?.UIConfig?.currentBreakpoint === ViewportBreakpoint.MOBILE;\n const tapTogglesSelection = selectable && selectionActive && isMobile;\n // Long-press ENTERS selection mode — gated to the SAME condition as tap-toggle\n // (selectable + mobile viewport) so the two can't disagree (e.g. enter mode on\n // a tablet where tap-toggle is off, stranding the user mid-multiselect).\n const longPress = useLongPress(\n () => onToggleSelect?.(item),\n { enabled: selectable && !!onToggleSelect && isMobile },\n );\n\n /\n * A row is INTERACTIVE when something can happen on it: the host gave it a click handler, or the\n * view is in mobile multi-select where a tap toggles selection. Everything the card says about\n * itself — the pointer, the button role, the focusability, the key handling — is read off this one\n * value, so the promise and the behaviour cannot drift apart.\n /\n const isActivatable = Boolean(onItemClick) \|\| tapTogglesSelection;\n\n const handleActivate = () => {\n // Swallow the synthetic click that follows a long-press (it already selected).\n if (longPress.consumeLongPress()) return;\n if (tapTogglesSelection) {\n onToggleSelect?.(item);\n return;\n }\n onItemClick?.(item);\n };\n\n /\n * ─── The card is NOT a button; its ACTIVATOR is ────────────────────────────────────────────\n \n The card root used to be `role=\"button\"` with `tabIndex={0}` and Enter/Space handling, and it\n * CONTAINED the row's selection checkbox and its \"More actions\" button. ARIA does not allow\n * interactive descendants inside a button, and assistive technology may flatten the whole card\n * into one control — a screen-reader user could reach \"open this record\" but not reliably\n * \"select it\" or \"its actions\". axe reported it as `nested-interactive`, serious, on every card\n * of the todos list (#1718).\n \n This is the settled card-with-a-primary-action shape: a real `<button>` carries the name and\n * the keyboard activation, and it is a SIBLING of the checkbox and the actions rather than their\n * container. It is laid over the whole card (`absolute inset-0`) so its focus ring outlines the\n * card and a click on empty space lands on it; the rail after it is positioned too, so it stacks\n * above and its controls stay directly clickable. The root keeps its pointer `onClick` and the\n * long-press, so a click on the card's TEXT still opens the record — pointer behaviour is\n * unchanged, and the keyboard path is now a button that needs no hand-written key handling.\n /\n return (\n <div\n className={cn(\n CARD_ROW_PADDING_CLASS, transitionClass,\n isActivatable && 'relative',\n // Both only when a click leads somewhere — see `isActivatable`.\n isActivatable && hoverClass,\n isActivatable && 'cursor-pointer',\n isSelected && 'bg-primary/5',\n // Prevent the browser text-selection that a long-press would start.\n selectable && 'select-none',\n className,\n )}\n onClick={isActivatable ? handleActivate : undefined}\n {...longPress.handlers}\n >\n {isActivatable && (\n <button\n type=\"button\"\n aria-label={String(primaryLabel)}\n // Selection state is conveyed by the row's checkbox; the bg tint is a purely visual\n // reinforcement, and `aria-pressed` would misdescribe a button that OPENS the record.\n className=\"absolute inset-0 rounded-[inherit] focus-ring-inset outline-hidden\"\n onClick={(e) => {\n // The root's own onClick would run the same activation again for this click.\n e.stopPropagation();\n handleActivate();\n }}\n />\n )}\n {/ Leading selection rail (only when the view is selectable). The checkbox\n toggles selection and stops propagation so it never triggers the row's\n navigation — mirrors the table select-cell contract. /}\n <div className={cn(CARD_SELECTION_RAIL_CLASS, isActivatable && 'relative')}>\n {/ stopPropagation on click, keydown AND touchstart: the card opens on a\n click and arms a long-press on a touch hold, so without these guards\n toggling the checkbox would also navigate, and a hold over it would arm\n the row's long-press. */}\n {selectable && (\n <div\n // `pt-0.5` optically centres the box on the first line of text beside it; the\n // HORIZONTAL half comes from the shared constant, which the header rail also reads.\n className={cn(CARD_SELECTION_SLOT_CLASS, 'pt-0.5')}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n <CheckboxRoot\n checked={isSelected}\n onCheckedChange={() => onToggleSelect?.(item)}\n aria-label={selectAriaLabel ?? String(primaryLabel)}\n />\n </div>\n )}\n <div className={cn(placement.containerClass, 'min-w-0 flex-1')}>\n <div className={cn('space-y-item-xs', placement.contentClass)}>\n {authoredSummaryTemplate && resourceConfig?.mainSchema ? (\n // Authored template owns title + body. The title is fed via\n // SummaryContext (primaryLabel) and rendered by `<SummaryTitle />`\n // inside the template, so we do NOT render our own title here. The\n // region stays click-through so the whole card navigates (same as the\n // legacy body); an author who embeds a genuinely interactive control\n // stops propagation within their own template.\n <ResourceSummaryDisplayer\n resourceType={resourceType}\n schema={resourceConfig.mainSchema}\n data={item}\n primaryLabel={primaryLabel}\n />\n ) : (\n <>\n <Text as=\"p\" className=\"font-medium text-foreground\" truncate>{primaryLabel}</Text>\n {secondaryFields.map((fieldName) => {\n const value = item[fieldName];\n if (value === null \|\| value === undefined) return null;\n return (\n <div key={fieldName}>\n <FieldValueRenderer\n fieldName={fieldName}\n value={value}\n fieldSchema={schemaShape?.[fieldName] as z.ZodTypeAny \| undefined}\n fieldLabel={fieldLabelsMap[fieldName]}\n resourceType={resourceType}\n record={item as Record<string, unknown>}\n tResourceFieldEnumValue={tResourceFieldEnumValue}\n />\n </div>\n );\n })}\n </>\n )}\n </div>\n {operationsSlot && (\n // stopPropagation on click, keydown AND touchstart: an action tap or\n // keyboard activation must not also navigate the row, and a hold over\n // an action must not arm the row's long-press selection. (Mirrors the\n // checkbox rail — all three axes.)\n <div\n className={placement.actionsClass}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {operationsSlot}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"ResourceListItemRenderer.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceListItemRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n ResourceListItemRenderer\n \n Shared item renderer for List and Search presets.\n * Encapsulates schema-aware field rendering (FK, enum, date, array),\n * primary/secondary field split, and per-item operations.\n \n Used by List_Default and Search_Default to ensure parity in how\n * resource items are displayed.\n /\n\nimport React, { useMemo, useCallback } from 'react';\nimport { z } from 'zod';\nimport {\n CoreResourceOperation,\n ResourceOperationDisplayMode,\n ErrorCustomMessageReference,\n} from '@wildo-ai/saas-models';\nimport type { AnyFrontendResourceConfiguration, FrontendResourcesRegistry } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { getEnumValues, getFieldUISummaryDisplayConfig, getSchemaType, DisplayChromeMode, ViewportBreakpoint } from '@wildo-ai/zod-decorators';\nimport { UIContext } from '~wildo-frontend-lib/core/ui/UIContext';\nimport { useLongPress } from '~wildo-frontend-lib/components/resources/useLongPress';\nimport { DisplayField } from '~wildo-frontend-lib/components/data-display/DisplayField';\nimport { DisplayChromeProvider } from '~wildo-frontend-lib/components/data-display/chromes/DisplayChromeContext';\nimport { ResourceSummaryDisplayer, buildSummaryRecordIdentifiers } from '~wildo-frontend-lib/components/data-display/ResourceSummaryDisplayer';\nimport { ResourceDisplayContext, useResourceDisplayContext, type ResourceDisplayContextValue } from '~wildo-frontend-lib/components/data-display/automatic-displayer.utils';\nimport { useResourceRegistrySafe } from '~wildo-frontend-lib/core/resources/useResourceRegistry';\nimport { SummaryMeta } from '~wildo-frontend-lib/components/resources/skeleton/SummaryMeta';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { TextSize, TextVariant } from '@wildo-ai/presets-components-models';\nimport { isPresentSummaryValue, summaryValueNamesShown } from '~wildo-frontend-lib/core/automated-layout/summary-value-naming.utils';\nimport { resolveDeclaredDisplayChromeMode } from '~wildo-frontend-lib/components/data-display/chromes/display-chrome-mode-resolution';\nimport { FrontendResourceUtils, frontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { AutomatedLayoutFrontendUtils } from '~wildo-frontend-lib/core/automated-layout/automated-layout.frontend.utils';\nimport { resolveResourceLabelEnumSchema } from '~wildo-frontend-lib/core/resources/resource-label-field-paths.frontend.utils';\nimport type { FrontendResourceOperationContext } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { focusIndicatorClasses, FocusIndicatorShape } from '~wildo-frontend-lib/core/ui/themes/focus-indicator';\nimport { CheckboxRoot } from '~wildo-frontend-lib/components/form/controls/boolean/checkbox';\nimport {\n CARD_ROW_PADDING_CLASS,\n CARD_SELECTION_RAIL_CLASS,\n CARD_SELECTION_REVEAL_CLASS,\n CARD_SELECTION_SLOT_CLASS,\n} from '~wildo-frontend-lib/components/resources/collection-card-layout.utils';\nimport type { CardActionPlacement } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport { resolveCardActionPlacementClasses } from './card-action-placement.utils';\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\nexport interface ResourceListItemRendererProps {\n /* The data item to render /\n item: Record<string, unknown>;\n /* Resource type /\n resourceType: string;\n /* Resource configuration /\n resourceConfig: AnyFrontendResourceConfiguration;\n /* Resource registry /\n registry: FrontendResourcesRegistry;\n /\n The collection's resource identifiers (its route scope and parents). An authored summary template reads its\n * fields in them, with the row and its own primary scope added (`buildSummaryRecordIdentifiers`, #2198).\n /\n collectionContextResourceIdentifiers?: FrontendResourceOperationContext['contextResourceIdentifiers'];\n /* Ordered list of summary fields to display /\n summaryFields: string[];\n /* Pre-resolved field labels (from i18n) /\n fieldLabelsMap: Record<string, string>;\n /* Function to resolve enum display values via i18n — `fieldSchema` names the enum the field declares (#966) /\n tResourceFieldEnumValue: (resourceType: string, fieldName: string, enumValue: string, fieldSchema: z.ZodTypeAny \| undefined) => string;\n /\n What a click on the row does — and, by its ABSENCE, that a click does nothing.\n \n Optional since 2026-09-20, and the optionality is the point. The card used to take this\n * REQUIRED and paint itself `cursor-pointer` + `role=\"button\"` + `tabIndex={0}` unconditionally,\n * so every summary row in the product announced itself as a button. Whether the click could act\n * was decided somewhere else entirely — in the host, by whether a READ operation resolves to a\n * view — and the two were never compared. On the audit trail the answer was \"it cannot\", so the\n * row invited a click, took focus, answered Enter and Space, and did nothing at any of them.\n \n A host that cannot open a row now omits this, and the affordance disappears with the behaviour\n * because both are read off the same value.\n /\n onItemClick?: (item: Record<string, unknown>) => void;\n /* Optional operations component to render for this item /\n operationsSlot?: React.ReactNode;\n /\n Where the per-item operations sit within the card (2-axis anchor +\n * orientation). Resolved by the host from `collectionDisplayConfig.cardActionPlacement`.\n * Omitted → the default (inline-end, vertically centered, horizontal row).\n /\n cardActionPlacement?: CardActionPlacement;\n /\n Selection affordance. When `selectable`, a leading checkbox renders and\n * toggles selection via `onToggleSelect` (independent of the row click, which\n * still navigates). `isSelected` drives the checkbox + a selected highlight.\n /\n selectable?: boolean;\n isSelected?: boolean;\n onToggleSelect?: (item: Record<string, unknown>) => void;\n /\n Whether the collection is currently in SELECTION MODE (any item selected).\n * Mobile UX: a long-press enters selection mode, and while active a plain TAP\n * toggles selection instead of navigating (the \"long-press to multi-select\"\n * pattern). Gated to touch/mobile — on desktop a click always navigates and\n * the checkbox is the explicit toggle.\n /\n selectionActive?: boolean;\n /* Accessible label for the selection checkbox (host provides the i18n string). /\n selectAriaLabel?: string;\n /* Optional className for the root container /\n className?: string;\n /* Interactive CSS classes from design system (hover state, transition) /\n interactiveClasses?: {\n hover?: string;\n transition?: string;\n };\n}\n\n// =============================================================================\n// FIELD VALUE RENDERER\n// =============================================================================\n\n/* A collection cell is read-only: the row's inline edit belongs to the row's own page, never to a cell. /\nconst refuseCellInlineUpdate = async (): Promise<void> => {\n throw new Error('A collection cell does not edit in place.');\n};\n\n/\n The display context a collection CELL reads in: its ROW, in the row's scope (#2347).\n \n A reference display fetches and links its target with the display context's identifiers and parameters. A\n * collection mounts no context, so a cell inherited the page's — none on a list page — and every reference to a\n * scope-junction peer (a user, through organization membership) lost the scope that selects its confined door.\n * The identifiers are built exactly as a summary template's are (`buildSummaryRecordIdentifiers`), so a card's\n * template and a table cell of the same row read a reference the same way.\n \n Everything that is the PAGE's record rather than the row's is dropped: its inline-edit write path, its mutation\n * manager and its upload endpoints would act on the page's record. What describes the surface (the zone, the parent\n * reference posture, the empty-value strategy) is kept. With no registry in reach (an isolated render) the cell\n * keeps the inherited context, as before.\n /\nfunction useRecordScopedDisplayContext(input: {\n resourceType: string;\n record: Record<string, unknown> \| undefined;\n collectionContextResourceIdentifiers: FrontendResourceOperationContext['contextResourceIdentifiers'] \| undefined;\n}): ResourceDisplayContextValue {\n const inherited = useResourceDisplayContext();\n const registryContext = useResourceRegistrySafe();\n const registry = registryContext?.registry;\n const { resourceType, record, collectionContextResourceIdentifiers } = input;\n return useMemo(() => {\n if (!registry \|\| !record) return inherited;\n const identifiers = buildSummaryRecordIdentifiers({\n resourceType,\n resourceConfig: registry.resourceConfigurations[resourceType],\n data: record,\n hostIdentifiers: collectionContextResourceIdentifiers ?? inherited.contextResourceIdentifiers,\n });\n return {\n ...inherited,\n resourceType,\n resourceId: frontendResourceUtils.getResourceId(identifiers[resourceType]) \|\| undefined,\n contextResourceIdentifiers: identifiers,\n contextualParameters: FrontendResourceUtils.buildContextualParameters(identifiers, registry),\n canInlineEdit: false,\n doInlineUpdate: refuseCellInlineUpdate,\n defaultInlineEdit: undefined,\n fileUploadContext: undefined,\n rmm: null,\n };\n }, [inherited, registry, record, resourceType, collectionContextResourceIdentifiers]);\n}\n\nexport interface FieldValueRendererProps {\n fieldName: string;\n value: unknown;\n fieldSchema: z.ZodTypeAny \| undefined;\n fieldLabel: string \| undefined;\n resourceType: string;\n tResourceFieldEnumValue: (resourceType: string, fieldName: string, enumValue: string, fieldSchema: z.ZodTypeAny \| undefined) => string;\n /\n The whole record this cell belongs to, forwarded to the dispatcher as `parentData`.\n \n Optional so a caller rendering a bare value is unaffected — but every collection caller passes\n * it, because a field frequently needs a sibling to render correctly and a cell that does not know\n * its row cannot reach one.\n /\n record?: Record<string, unknown>;\n /\n The COLLECTION's resource identifiers (its route scope and parents), when the caller has them.\n \n With `record`, they decide where the cell's references are fetched and linked: the cell reads in its ROW's\n * identifiers (`buildSummaryRecordIdentifiers` — the host's, then the row's own primary scope, then the row), the\n * shape a summary template already reads in (#2198). A collection mounts no display context of its own, so a cell\n * used to inherit the PAGE's, which on a list page is none: a reference to a user reached the users READ (a user\n * reads only themselves) instead of the organization's people search, and a table of the representatives' activity\n * (retired with that feed, #2592) named its representative by a raw user id (#2347). Absent, the inherited context's identifiers are the host's.\n /\n collectionContextResourceIdentifiers?: FrontendResourceOperationContext['contextResourceIdentifiers'];\n /\n Show `fieldLabel` beside the value: under a declared summary chrome that shows a name, or, when none\n * is declared, for a value that cannot speak for itself on a card (a boolean, a bare number, a second\n * date — `summaryValueNamesShown`). Otherwise the name is for assistive technology only.\n /\n fieldLabelVisible?: boolean;\n}\n\n/\n Renders a single summary field VALUE through the shared decorator-driven\n * display pipeline (`DisplayField` → `DisplayValueDispatcher` → presets) — the\n * SAME path the detail/read view uses — so the FULL zod-UI display policy is\n * honored in lists/tables by default: enum → badge (+ per-value colors),\n * boolean → checkmark / yes-no, string → truncate / multiline, FK → reference,\n * date → formatted, money/bigdecimal/duration/etc.\n \n Previously this re-implemented a weak subset (enum-as-plain-text, naive array\n * join, `String(value)` fallback) that silently ignored every\n * `{primitive}UI().display` decorator, so listings/tables diverged from the\n * detail view (e.g. a `displayMode: BADGE` enum rendered as plain text). Routing\n * through `DisplayField` removes that divergence and the maintenance burden of a\n * parallel renderer.\n \n The card and the table (column header) own the label, so the value is rendered\n * under COMPACT chrome — a bare value with no framework label/description wrapper.\n * The card names a value with a visually hidden name, or a visible one for a value\n * that cannot speak for itself (`fieldLabelVisible`). i18n enum labels are threaded explicitly via\n * `enumLabels` because there is no surrounding `DisplayTemplateContext`\n * (which is what supplies them inside `AutomaticDisplayer`).\n /\nexport function FieldValueRenderer({\n fieldName,\n value,\n fieldSchema,\n fieldLabel,\n resourceType,\n record,\n collectionContextResourceIdentifiers,\n tResourceFieldEnumValue,\n fieldLabelVisible = false,\n}: FieldValueRendererProps): React.JSX.Element \| null {\n const recordDisplayContext = useRecordScopedDisplayContext({ resourceType, record, collectionContextResourceIdentifiers });\n // Build the enum value→label map from the same i18n translator the list\n // already uses, so enum badges show translated labels rather than raw enum\n // values. Hook runs unconditionally, before the null-value early return.\n //\n // The vocabulary is read off the ENUM-BEARING schema — the field, or an array's element — through the\n // resolver the detail views and the labelling planner share. Asking only \"is the field itself an enum\"\n // left every array of an enum raw in a list or a table: a member directory printed `ORG_MEMBER` while\n // the same roles read \"Organization member\" on the member's own page.\n const enumLabels = useMemo<Record<string, string> \| undefined>(() => {\n const enumSchema = fieldSchema ? resolveResourceLabelEnumSchema(fieldSchema) : undefined;\n if (!enumSchema) return undefined;\n const enumValues = getEnumValues(enumSchema);\n if (enumValues.length === 0) return undefined;\n return Object.fromEntries(\n enumValues.map((enumValue) => [enumValue, tResourceFieldEnumValue(resourceType, fieldName, enumValue, fieldSchema)]),\n );\n }, [fieldSchema, resourceType, fieldName, tResourceFieldEnumValue]);\n\n if (value === null \|\| value === undefined) return null;\n\n return (\n <div className=\"flex min-w-0 items-baseline gap-element-sm\">\n {/ A card shows the VALUE; its name is for assistive technology only. A summary is bare,\n self-describing values (the record's own page names its facts), and a visible \"Label:\" on\n every line made each card a form. The table names its columns in its header instead. /}\n {fieldLabel && (fieldLabelVisible\n ? <Text as=\"span\" variant={TextVariant.MUTED} size={TextSize.XS}>{fieldLabel}:</Text>\n : <span className=\"sr-only\">{fieldLabel}: </span>)}\n {fieldSchema ? (\n // COMPACT chrome → bare value with the full decorator policy applied, read in the ROW's scope.\n <ResourceDisplayContext.Provider value={recordDisplayContext}>\n <DisplayChromeProvider displayChromeMode={DisplayChromeMode.COMPACT}>\n <DisplayField\n name={fieldName}\n schema={fieldSchema}\n value={value}\n enumLabels={enumLabels}\n // The ROW this cell belongs to. Every other display surface hands the dispatcher its\n // record as `parentData`; a collection cell did not, so anything a field needs from its\n // siblings was unreachable from a list or a table — including a foreign key's\n // `labelFallbackField`, which is why a member directory printed raw ObjectIds.\n parentData={record}\n disableInlineEdit\n className=\"min-w-0 truncate text-sm text-muted-foreground\"\n />\n </DisplayChromeProvider>\n </ResourceDisplayContext.Provider>\n ) : (\n // No schema resolved for this field — `DisplayField` requires a schema,\n // so fall back to a plain string (matches the previous default branch).\n <span className=\"min-w-0 truncate text-sm text-muted-foreground\">{String(value)}</span>\n )}\n </div>\n );\n}\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport function ResourceListItemRenderer({\n item,\n resourceType,\n resourceConfig,\n registry,\n collectionContextResourceIdentifiers,\n summaryFields,\n fieldLabelsMap,\n tResourceFieldEnumValue,\n onItemClick,\n operationsSlot,\n cardActionPlacement,\n selectable = false,\n isSelected = false,\n onToggleSelect,\n selectionActive = false,\n selectAriaLabel,\n className,\n interactiveClasses,\n}: ResourceListItemRendererProps): React.JSX.Element {\n if (!resourceConfig?.resourceFieldIdentifier) {\n throw FrontendResourceUtils.buildConfigurationError(\n ErrorCustomMessageReference.FRONTEND_RESOURCE_FIELD_IDENTIFIER_NOT_FOUND,\n { resourceType, component: 'ResourceListItemRenderer' }\n );\n }\n const fieldIdentifier = resourceConfig.resourceFieldIdentifier as string;\n // Resolve the record's own id (`_id`), not the cross-resource field-identifier\n // name (`<resource>Id`) which is absent from a plain record — see\n // FrontendResourceUtils.getResourceObjectId.\n const itemId = FrontendResourceUtils.getResourceObjectId(item, fieldIdentifier);\n\n // Primary display: use computeFrontendResourceLabel for the primary value.\n // For a junction this resolves the server-projected instance label (e.g. a\n // `forwardedLabel` virtual field referenced by `getFrontendResourceLabel`).\n /\n * The translator goes to the label callback. Without it `computeFrontendResourceLabel` falls back\n * to an IDENTITY `t`, so a label callback that words its row through the label tree rendered the\n * key — then its own fallback, a ref — on every card, while the same row's page header (which\n * passes `t`) read correctly (#1454: governed documents titled `document-definition:…` in lists).\n /\n const { t: tLabel, formatDate, formatDateTime } = useI18n({ resource: resourceType });\n const primaryLabel = useMemo((): string => {\n const label = FrontendResourceUtils.computeFrontendResourceLabel({\n resourceType,\n registry,\n currentObject: item,\n t: tLabel,\n formatDate,\n formatDateTime,\n });\n return String(label \|\| item[summaryFields[0]] \|\| `${resourceType} #${itemId}`);\n }, [item, resourceType, registry, summaryFields, itemId, tLabel, formatDate, formatDateTime]);\n\n // Secondary fields: every summary field EXCEPT the one already shown as the\n // primary label (title). The title comes from `computeFrontendResourceLabel`\n // — an arbitrary label strategy (a `string[]` join or a function), NOT\n // necessarily `summaryFields[0]`. Excluding the title positionally (`slice(1)`)\n // had two bugs: (a) it REPEATED the title when the label field wasn't first\n // (e.g. a list whose label is `name` but whose first summary field is `status`\n // → \"Name: …\" rendered under the identical title), and (b) it silently DROPPED\n // `summaryFields[0]` whenever that field wasn't the label. Excluding the title\n // by VALUE fixes both: the field whose value equals the title is the label\n // field wherever it sits, and every genuine non-label summary field is kept.\n // (The primary-scope FK is dropped upstream by\n // `ResourceLayoutUtils.detectSummaryFields`, so it never reaches here.)\n const secondaryFields = useMemo(\n () => summaryFields.filter((fieldName) => {\n const value = item[fieldName];\n // A value the record does not hold shows nothing, so it takes no place in the row — and a card whose\n // values are all empty draws no row at all (`secondaryFields.length > 0` below).\n if (!isPresentSummaryValue(value)) return false;\n return String(value) !== primaryLabel;\n }),\n [summaryFields, item, primaryLabel],\n );\n\n // Schema shape for field type detection\n // The row's own schema (#2455): for an inheritance resource, the variant its discriminators name. A family's\n // `mainSchema` is its base object since #2414, not a discriminated union.\n const rowSchema = useMemo(() => FrontendResourceUtils.resolveRowSchema(resourceConfig, item), [resourceConfig, item]);\n const schemaShape = useMemo(() => {\n if (!rowSchema) return null;\n return AutomatedLayoutFrontendUtils.getObjectLikeFieldShape(rowSchema, { commonOnly: false }) ?? null;\n }, [rowSchema]);\n\n // Which shown values keep a VISIBLE name on the card: the FIELD's own declared summary chrome, else the\n // layout's, else the values that cannot speak for themselves (a boolean, a bare number, a second date) —\n // the same rule the generated summary applies (`summaryValueNamesShown`). Every declaration is resolved\n // for the current breakpoint by the chrome's own chain (`resolveDeclaredDisplayChromeMode`), so the card\n // and a summary surface read `{ mobile: HIDDEN }` the same way.\n //\n // Optional UIContext read: a rendering leaf shouldn't hard-require the shell's\n // UIProvider just to check the breakpoint — outside a provider (isolated\n // renders/tests) it degrades to desktop behavior (isMobile = false, the DESKTOP\n // entry of a responsive summary chrome).\n const ui = React.useContext(UIContext);\n const currentBreakpoint = ui?.UIConfig?.currentBreakpoint ?? ViewportBreakpoint.DESKTOP;\n const declaredSummaryChrome = resolveDeclaredDisplayChromeMode(\n resourceConfig?.frontendConfiguration?.layout?.defaultChromeMode?.summary,\n currentBreakpoint,\n );\n const secondaryFieldKeepsName = useMemo(\n () => summaryValueNamesShown(declaredSummaryChrome, secondaryFields.map((fieldName) => {\n const fieldSchema = schemaShape?.[fieldName] as z.ZodTypeAny \| undefined;\n return {\n schemaType: fieldSchema ? getSchemaType(fieldSchema) : undefined,\n present: true, // `secondaryFields` holds only present values\n declaredChrome: fieldSchema ? resolveDeclaredDisplayChromeMode(getFieldUISummaryDisplayConfig(fieldSchema)?.chromeMode, currentBreakpoint) : undefined,\n };\n })),\n [declaredSummaryChrome, secondaryFields, schemaShape, currentBreakpoint],\n );\n\n // AUTHORED summary template — the `layout.summary` contract promises coverage\n // of \"cards, list items, FK references\". When a resource authors one, the card\n // defers its ENTIRE content region (title + body) to `ResourceSummaryDisplayer`:\n // the title is now a first-class template element (`<SummaryTitle />`, placed by\n // `<SummaryLayout>`), so a status badge can sit inline with the title and the\n // exact same composition renders in the FK popover. We pass the primary label we\n // already computed (correct `t`, junction forwardedLabel) into the displayer's\n // SummaryContext instead of rendering our own title above it.\n //\n // Resources WITHOUT an authored template keep the host-owned title + the bare\n // qualifier row below (values in one `SummaryMeta` row, named by the naming rule):\n // routing them through the GENERATED default template would restyle every list in\n // every app for no authored reason.\n const authoredSummaryTemplate = resourceConfig?.frontendConfiguration?.layout?.summary;\n\n const hoverClass = interactiveClasses?.hover ?? '';\n const transitionClass = interactiveClasses?.transition ?? '';\n // Resolve where the per-item actions sit (2-axis anchor → flex classes). The\n // content + actions share one flex container so actions never overlap text.\n const placement = resolveCardActionPlacementClasses(cardActionPlacement);\n\n // Mobile multi-select: a long-press ENTERS selection mode (selects this item);\n // while selection mode is active (`selectionActive`), a plain TAP toggles\n // selection instead of navigating. Gated to a mobile viewport — on desktop a\n // click always navigates and the checkbox is the explicit toggle. Long-press\n // is touch-only (the hook binds touch handlers).\n const isMobile = ui?.UIConfig?.currentBreakpoint === ViewportBreakpoint.MOBILE;\n const tapTogglesSelection = selectable && selectionActive && isMobile;\n // Long-press ENTERS selection mode — gated to the SAME condition as tap-toggle\n // (selectable + mobile viewport) so the two can't disagree (e.g. enter mode on\n // a tablet where tap-toggle is off, stranding the user mid-multiselect).\n const longPress = useLongPress(\n () => onToggleSelect?.(item),\n { enabled: selectable && !!onToggleSelect && isMobile },\n );\n\n /\n * A row is INTERACTIVE when something can happen on it: the host gave it a click handler, or the\n * view is in mobile multi-select where a tap toggles selection. Everything the card says about\n * itself — the pointer, the button role, the focusability, the key handling — is read off this one\n * value, so the promise and the behaviour cannot drift apart.\n /\n const isActivatable = Boolean(onItemClick) \|\| tapTogglesSelection;\n\n const handleActivate = () => {\n // Swallow the synthetic click that follows a long-press (it already selected).\n if (longPress.consumeLongPress()) return;\n if (tapTogglesSelection) {\n onToggleSelect?.(item);\n return;\n }\n onItemClick?.(item);\n };\n\n /\n * ─── The card is NOT a button; its ACTIVATOR is ────────────────────────────────────────────\n \n The card root used to be `role=\"button\"` with `tabIndex={0}` and Enter/Space handling, and it\n * CONTAINED the row's selection checkbox and its \"More actions\" button. ARIA does not allow\n * interactive descendants inside a button, and assistive technology may flatten the whole card\n * into one control — a screen-reader user could reach \"open this record\" but not reliably\n * \"select it\" or \"its actions\". axe reported it as `nested-interactive`, serious, on every card\n * of the todos list (#1718).\n \n This is the settled card-with-a-primary-action shape: a real `<button>` carries the name and\n * the keyboard activation, and it is a SIBLING of the checkbox and the actions rather than their\n * container. It is laid over the whole card (`absolute inset-0`) so its focus ring outlines the\n * card and a click on empty space lands on it; the rail after it is positioned too, so it stacks\n * above and its controls stay directly clickable. The root keeps its pointer `onClick` and the\n * long-press, so a click on the card's TEXT still opens the record — pointer behaviour is\n * unchanged, and the keyboard path is now a button that needs no hand-written key handling.\n /\n return (\n <div\n // One record in a collection, whichever way it is drawn (the table row carries the same marker).\n // Automation (`wildo frontend look`, the browser lanes) finds \"a row\" by it: the card has no other\n // identity in the DOM, and its overlay button's accessible name is the record's label, not a role.\n data-slot=\"resource-list-item\"\n className={cn(\n // `group/list-item`: the row's checkbox reveals itself on this row's hover and focus.\n 'group/list-item',\n CARD_ROW_PADDING_CLASS, transitionClass,\n isActivatable && 'relative',\n // Both only when a click leads somewhere — see `isActivatable`.\n isActivatable && hoverClass,\n isActivatable && 'cursor-pointer',\n isSelected && 'bg-primary/5',\n // Prevent the browser text-selection that a long-press would start.\n selectable && 'select-none',\n className,\n )}\n onClick={isActivatable ? handleActivate : undefined}\n {...longPress.handlers}\n >\n {isActivatable && (\n <button\n type=\"button\"\n aria-label={String(primaryLabel)}\n // Selection state is conveyed by the row's checkbox; the bg tint is a purely visual\n // reinforcement, and `aria-pressed` would misdescribe a button that OPENS the record.\n className={cn(\"absolute inset-0 rounded-[inherit] outline-none\", focusIndicatorClasses(FocusIndicatorShape.INSET))}\n onClick={(e) => {\n // The root's own onClick would run the same activation again for this click.\n e.stopPropagation();\n handleActivate();\n }}\n />\n )}\n {/ Leading selection rail (only when the view is selectable). The checkbox\n toggles selection and stops propagation so it never triggers the row's\n navigation — mirrors the table select-cell contract. /}\n <div className={cn(CARD_SELECTION_RAIL_CLASS, isActivatable && 'relative')}>\n {/ stopPropagation on click, keydown AND touchstart: the card opens on a\n click and arms a long-press on a touch hold, so without these guards\n toggling the checkbox would also navigate, and a hold over it would arm\n the row's long-press. /}\n {selectable && (\n <div\n // `pt-0.5` optically centres the box on the first line of text beside it; its\n // HORIZONTAL place is the row's start padding, which the toolbar's select-all reads too\n // (`CARDS_SELECT_ALL_INSET_CLASS`), so the two stand in one column.\n className={cn(CARD_SELECTION_SLOT_CLASS, 'pt-0.5', !isSelected && !selectionActive && CARD_SELECTION_REVEAL_CLASS)}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n <CheckboxRoot\n checked={isSelected}\n onCheckedChange={() => onToggleSelect?.(item)}\n aria-label={selectAriaLabel ?? String(primaryLabel)}\n />\n </div>\n )}\n <div className={cn(placement.containerClass, 'min-w-0 flex-1')}>\n <div className={cn('space-y-item-xs', placement.contentClass)}>\n {authoredSummaryTemplate && rowSchema ? (\n // Authored template owns title + body. The title is fed via\n // SummaryContext (primaryLabel) and rendered by `<SummaryTitle />`\n // inside the template, so we do NOT render our own title here. The\n // region stays click-through so the whole card navigates (same as the\n // legacy body); an author who embeds a genuinely interactive control\n // stops propagation within their own template.\n <ResourceSummaryDisplayer\n resourceType={resourceType}\n schema={rowSchema}\n data={item}\n primaryLabel={primaryLabel}\n contextResourceIdentifiers={collectionContextResourceIdentifiers}\n />\n ) : (\n <>\n <Text as=\"p\" className=\"font-medium text-foreground\" truncate>{primaryLabel}</Text>\n {/ The qualifier row a summary template would author: the values in ONE wrapping row\n under the title, not one labelled line each. */}\n {secondaryFields.length > 0 && (\n <SummaryMeta>\n {secondaryFields.map((fieldName, index) => {\n const value = item[fieldName];\n return (\n <FieldValueRenderer\n key={fieldName}\n fieldLabelVisible={secondaryFieldKeepsName[index]}\n fieldName={fieldName}\n value={value}\n fieldSchema={schemaShape?.[fieldName] as z.ZodTypeAny \| undefined}\n fieldLabel={fieldLabelsMap[fieldName]}\n resourceType={resourceType}\n record={item as Record<string, unknown>}\n collectionContextResourceIdentifiers={collectionContextResourceIdentifiers}\n tResourceFieldEnumValue={tResourceFieldEnumValue}\n />\n );\n })}\n </SummaryMeta>\n )}\n </>\n )}\n </div>\n {operationsSlot && (\n // stopPropagation on click, keydown AND touchstart: an action tap or\n // keyboard activation must not also navigate the row, and a hold over\n // an action must not arm the row's long-press selection. (Mirrors the\n // checkbox rail — all three axes.)\n <div\n className={placement.actionsClass}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {operationsSlot}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n}\n"]}

package/dist/esm/components/resources/ResourceViewModeToggle.d.ts CHANGED Viewed

@@ -1,7 +1,12 @@
 /**
  * ResourceViewModeToggle — a compact segmented control that switches a resource
  * collection between CARDS and TABLE display. Icon-only (labels via tooltip +
- * accessible name); the active segment is filled.
+ * accessible name).
+ *
+ * It IS the framework's segmented toggle group, icon-only: the theme's track and raised selected
+ * option, the same control as the status filter on the row above. It used to hand-draw joined
+ * outlined segments with hard-coded colours, so the toolbar showed two segmented styles side by
+ * side and no theme could restyle this one.
  *
  * Presentational: it owns no state. The collection host passes the current
  * `viewMode` and an `onViewModeChange` handler (which persists the choice).

package/dist/esm/components/resources/ResourceViewModeToggle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResourceViewModeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceViewModeToggle.tsx"],"names":[],"mappings":"AAAA~~;;;;;;;GAOG~~;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAM1B~~,OAAO,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAC;AAEtG,MAAM,WAAW,2BAA2B;IAC1C,4BAA4B;IAC5B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;~~AAaD~~,eAAO,MAAM,sBAAsB,GAAI,4CAIpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,~~IAuCpD~~,CAAC"}
1	+ {"version":3,"file":"ResourceViewModeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceViewModeToggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAC;AAEtG,MAAM,WAAW,2BAA2B;IAC1C,4BAA4B;IAC5B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,eAAO,MAAM,sBAAsB,GAAI,4CAIpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA8BpD,CAAC"}

package/dist/esm/components/resources/ResourceViewModeToggle.js CHANGED Viewed

@@ -3,25 +3,27 @@ import { useI18n } from '../../core/i18n/useI18n.js';
 import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
 import { StandardIconReference, IconSize } from '../../core/icons/icon-registry.frontend.schemas.js';
 import { cn } from '../../core/ui/cn.js';
-import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { ToggleGroup, ToggleGroupItem, ToggleGroupType } from '../../components/form/controls/enum/toggle-group.js';
+import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
 import { CollectionDisplayMode } from '../../core/resources/resources.frontend.schemas.js';
 const VIEW_MODE_OPTIONS = [
     { mode: CollectionDisplayMode.CARDS, icon: StandardIconReference.VIEW_LIST, labelKey: 'viewCards' },
     { mode: CollectionDisplayMode.TABLE, icon: StandardIconReference.VIEW_TABLE, labelKey: 'viewTable' },
 ];
+const isCollectionDisplayMode = (value) => VIEW_MODE_OPTIONS.some((option) => option.mode === value);
 export const ResourceViewModeToggle = ({ viewMode, onViewModeChange, className, }) => {
     const { tComponent, isReady } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });
     const { renderIcon } = useIconRegistry();
     if (!isReady)
         return null;
     const tc = (key) => tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, key);
-    return (_jsx("div", { role: "group", "aria-label": tc('viewModeLabel'), className: cn('inline-flex shrink-0 rounded-md border border-border overflow-hidden', className), children: VIEW_MODE_OPTIONS.map(({ mode, icon, labelKey }, index) => {
-            const isActive = viewMode === mode;
+    return (_jsx(ToggleGroup, { type: ToggleGroupType.SINGLE, value: viewMode,
+        // A single toggle group emits '' when the active option is pressed again. A collection always has a
+        // view mode, so that press changes nothing.
+        onValueChange: (next) => { if (typeof next === 'string' && isCollectionDisplayMode(next) && next !== viewMode)
+            onViewModeChange(next); }, size: ButtonSize.SM, "aria-label": tc('viewModeLabel'), className: cn('shrink-0', className), "data-slot": "collection-view-mode", children: VIEW_MODE_OPTIONS.map(({ mode, icon, labelKey }) => {
             const label = tc(labelKey);
-            return (_jsx("button", { type: "button", "aria-pressed": isActive, "aria-label": label, title: label, onClick: () => { if (!isActive)
-                    onViewModeChange(mode); }, className: cn('inline-flex items-center justify-center px-element-sm py-element-sm transition-colors', index > 0 && 'border-s border-border', isActive
-                    ? 'bg-muted text-foreground'
-                    : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'), children: _jsx("span", { "aria-hidden": "true", children: renderIcon(icon, { size: IconSize.SM }) }) }, mode));
+            return (_jsx(ToggleGroupItem, { value: mode, size: ButtonSize.SM, "aria-label": label, title: label, children: _jsx("span", { "aria-hidden": "true", children: renderIcon(icon, { size: IconSize.SM }) }) }, mode));
         }) }));
 };
 //# sourceMappingURL=ResourceViewModeToggle.js.map

package/dist/esm/components/resources/ResourceViewModeToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResourceViewModeToggle.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceViewModeToggle.tsx"],"names":[],"mappings":";~~AAUA~~,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,+DAA+D,CAAC;AAChH,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;~~AAC5E~~,OAAO,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAC;AAiBtG,MAAM,iBAAiB,GAA8B;IACnD,EAAE,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,qBAAqB,CAAC,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;IACnG,EAAE,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,qBAAqB,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;CACrG,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,gBAAgB,EAChB,SAAS,GACmB,EAA4B,EAAE;IAC1D,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,sBAAsB,EAAE,CAAC,CAAC;IACrG,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,EAAE,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IAElG,OAAO,CACL,~~cACE~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~gBACA,~~EAAE,~~CAAC,~~eAAe,CAAC,~~EAC/B~~,~~SAAS~~,EAAE,EAAE,CAAC,~~sEAAsE~~,EAAE,~~SAAS~~,~~CAAC~~,~~YAE/F~~,~~iBAAiB~~,~~CAAC~~,~~GAAG~~,CAAC,CAAC,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,EAAE~~;YACzD~~,~~MAAM~~,~~QAAQ~~,~~GAAG~~,~~QAAQ~~,~~KAAK~~,~~IAAI~~,CAAC~~;YACnC~~,~~MAAM~~,~~KAAK~~,~~GAAG~~,EAAE,CAAC,~~QAAQ~~,~~CAAC~~,CAAC~~;YAC3B~~,~~OAAO~~,~~CACL~~,~~iBAEE~~,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~kBACC~~,~~QAAQ~~,~~gBACV~~,~~KAAK~~,~~EACjB~~,~~KAAK~~,EAAE,~~KAAK~~,~~EACZ~~,~~OAAO~~,EAAE,~~GAAG~~,~~EAAE~~,GAAG,~~IAAI~~,CAAC,QAAQ~~;oBAAE~~,~~gBAAgB,~~CAAC,~~IAAI,~~CAAC,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EACzD~~,~~SAAS~~,~~EAAE~~,EAAE,~~CACX~~,~~uFAAuF~~,~~EACvF~~,~~KAAK~~,~~GAAG~~,CAAC,~~IAAI~~,~~wBAAwB~~,~~EACrC~~,~~QAAQ;oBACN~~,~~CAAC~~,~~CAAC~~,~~0BAA0B;oBAC5B~~,~~CAAC~~,~~CAAC,+DAA+D,CACpE,YAED,~~8BAAkB,MAAM,YAAE,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,GAAQ,~~IAdpE~~,IAAI,~~CAeF~~,~~CACV~~,CAAC;QACJ,CAAC,CAAC,~~GACE~~,~~CACP~~,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n ResourceViewModeToggle — a compact segmented control that switches a resource\n * collection between CARDS and TABLE display. Icon-only (labels via tooltip +\n * accessible name); the ~~active~~ ~~segment~~ is ~~filled~~.\n \n Presentational: it owns no state. The collection host passes the current\n * `viewMode` and an `onViewModeChange` handler (which persists the choice).\n /\n\nimport React from 'react';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { StandardIconReference, IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { CollectionDisplayMode } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\n\nexport interface ResourceViewModeToggleProps {\n /* The active view-mode. /\n viewMode: CollectionDisplayMode;\n /* Called with the newly selected mode (the host persists it). /\n onViewModeChange: (mode: CollectionDisplayMode) => void;\n /* Additional CSS classes for the segmented container. */\n className?: string;\n}\n\ninterface ViewModeOption {\n mode: CollectionDisplayMode;\n icon: StandardIconReference;\n labelKey: string;\n}\n\nconst VIEW_MODE_OPTIONS: readonly ViewModeOption[] = [\n { mode: CollectionDisplayMode.CARDS, icon: StandardIconReference.VIEW_LIST, labelKey: 'viewCards' },\n { mode: CollectionDisplayMode.TABLE, icon: StandardIconReference.VIEW_TABLE, labelKey: 'viewTable' },\n];\n\nexport const ResourceViewModeToggle = ({\n viewMode,\n onViewModeChange,\n className,\n}: ResourceViewModeToggleProps): React.JSX.Element \| null => {\n const { tComponent, isReady } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });\n const { renderIcon } = useIconRegistry();\n\n if (!isReady) return null;\n\n const tc = (key: string): string => tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, key);\n\n return (\n <~~div~~\n ~~role=\"~~group\"\n aria-label={tc('viewModeLabel')}\n className={cn('~~inline-flex~~ shrink-0 ~~rounded-md border border-border overflow-hidden~~', className)}\n >\n {VIEW_MODE_OPTIONS.map(({ mode, icon, labelKey }~~, index~~) => {\n const ~~isActive = viewMode === mode;\n const~~ label = tc(labelKey);\n return (\n <~~button\n~~ key={mode}~~\n type=\"button\"\n aria-pressed~~={~~isActive~~}\n aria-label={label}\n title={label}\n onClick={() => { if (!isActive) onViewModeChange(mode); }}\n className={cn(\n 'inline-flex items-center justify-center px-element-sm py-element-sm transition-colors',\n index > 0 && 'border-s border-border',\n isActive\n ? 'bg-muted text-foreground'\n : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground',\n )}\n >\n <span aria-hidden=\"true\">{renderIcon(icon, { size: IconSize.SM })}</span>\n </~~button~~>\n );\n })}\n </~~div~~>\n );\n};\n"]}
1	+ {"version":3,"file":"ResourceViewModeToggle.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceViewModeToggle.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,+DAA+D,CAAC;AAChH,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AAC/H,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAC;AAiBtG,MAAM,iBAAiB,GAA8B;IACnD,EAAE,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,qBAAqB,CAAC,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;IACnG,EAAE,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,qBAAqB,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;CACrG,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAkC,EAAE,CAChF,iBAAiB,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,gBAAgB,EAChB,SAAS,GACmB,EAA4B,EAAE;IAC1D,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,sBAAsB,EAAE,CAAC,CAAC;IACrG,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,EAAE,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,UAAU,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IAElG,OAAO,CACL,KAAC,WAAW,IACV,IAAI,EAAE,eAAe,CAAC,MAAM,EAC5B,KAAK,EAAE,QAAQ;QACf,oGAAoG;QACpG,4CAA4C;QAC5C,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,uBAAuB,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,QAAQ;YAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACxI,IAAI,EAAE,UAAU,CAAC,EAAE,gBACP,EAAE,CAAC,eAAe,CAAC,EAC/B,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,eAC1B,sBAAsB,YAE/B,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;YAClD,MAAM,KAAK,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;YAC3B,OAAO,CACL,KAAC,eAAe,IAAY,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,EAAE,gBAAc,KAAK,EAAE,KAAK,EAAE,KAAK,YAC3F,8BAAkB,MAAM,YAAE,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,GAAQ,IADrD,IAAI,CAER,CACnB,CAAC;QACJ,CAAC,CAAC,GACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n ResourceViewModeToggle — a compact segmented control that switches a resource\n * collection between CARDS and TABLE display. Icon-only (labels via tooltip +\n * accessible name).\n \n It IS the framework's segmented toggle group, icon-only: the theme's track and raised selected\n * option, the same control as the status filter on the row above. It used to hand-draw joined\n * outlined segments with hard-coded colours, so the toolbar showed two segmented styles side by\n * side and no theme could restyle this one.\n \n Presentational: it owns no state. The collection host passes the current\n * `viewMode` and an `onViewModeChange` handler (which persists the choice).\n /\n\nimport React from 'react';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { StandardIconReference, IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { ToggleGroup, ToggleGroupItem, ToggleGroupType } from '~wildo-frontend-lib/components/form/controls/enum/toggle-group';\nimport { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { CollectionDisplayMode } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\n\nexport interface ResourceViewModeToggleProps {\n /* The active view-mode. /\n viewMode: CollectionDisplayMode;\n /* Called with the newly selected mode (the host persists it). /\n onViewModeChange: (mode: CollectionDisplayMode) => void;\n /* Additional CSS classes for the segmented container. */\n className?: string;\n}\n\ninterface ViewModeOption {\n mode: CollectionDisplayMode;\n icon: StandardIconReference;\n labelKey: string;\n}\n\nconst VIEW_MODE_OPTIONS: readonly ViewModeOption[] = [\n { mode: CollectionDisplayMode.CARDS, icon: StandardIconReference.VIEW_LIST, labelKey: 'viewCards' },\n { mode: CollectionDisplayMode.TABLE, icon: StandardIconReference.VIEW_TABLE, labelKey: 'viewTable' },\n];\n\nconst isCollectionDisplayMode = (value: string): value is CollectionDisplayMode =>\n VIEW_MODE_OPTIONS.some((option) => option.mode === value);\n\nexport const ResourceViewModeToggle = ({\n viewMode,\n onViewModeChange,\n className,\n}: ResourceViewModeToggleProps): React.JSX.Element \| null => {\n const { tComponent, isReady } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });\n const { renderIcon } = useIconRegistry();\n\n if (!isReady) return null;\n\n const tc = (key: string): string => tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, key);\n\n return (\n <ToggleGroup\n type={ToggleGroupType.SINGLE}\n value={viewMode}\n // A single toggle group emits '' when the active option is pressed again. A collection always has a\n // view mode, so that press changes nothing.\n onValueChange={(next) => { if (typeof next === 'string' && isCollectionDisplayMode(next) && next !== viewMode) onViewModeChange(next); }}\n size={ButtonSize.SM}\n aria-label={tc('viewModeLabel')}\n className={cn('shrink-0', className)}\n data-slot=\"collection-view-mode\"\n >\n {VIEW_MODE_OPTIONS.map(({ mode, icon, labelKey }) => {\n const label = tc(labelKey);\n return (\n <ToggleGroupItem key={mode} value={mode} size={ButtonSize.SM} aria-label={label} title={label}>\n <span aria-hidden=\"true\">{renderIcon(icon, { size: IconSize.SM })}</span>\n </ToggleGroupItem>\n );\n })}\n </ToggleGroup>\n );\n};\n"]}

package/dist/esm/components/resources/collection-card-layout.utils.d.ts CHANGED Viewed

@@ -37,30 +37,52 @@ export declare const CARDS_LIST_CONTAINER_CLASS = "border border-border rounded-
  * Alignment here is not a styling preference, it is what makes the control legible: a checkbox
  * above a column of checkboxes means "all of these", and the same checkbox anywhere else means
  * nothing in particular. Two copies of the inset would drift on the first padding change, so the
- * row and the header read the same three constants.
+ * row and the select-all read these constants, and a test holds the row's padding and the select-all's
+ * inset to the same spacing token. (They cannot be COMPUTED from one another: Tailwind generates only
+ * the classes it finds spelled out in source.)
  */
-/** The row's own padding box. Anything that must share a row's horizontal inset uses {@link CARD_ROW_PADDING_INLINE_CLASS}. */
-export declare const CARD_ROW_PADDING_CLASS = "p-card";
-/** The horizontal half of {@link CARD_ROW_PADDING_CLASS} — for a header rail that must be vertically compact. */
-export declare const CARD_ROW_PADDING_INLINE_CLASS = "px-card";
+/**
+ * The row's own padding box: the card spacing token across, its SMALL step down. A summary row is one
+ * line of title and one of qualifiers, and the full card step above and below made each row read as a
+ * separate card (measured 2026-09-30 on the Wonder Todos todo list: 62px for a one-line row). Only the
+ * vertical axis moved: the START padding is the select-all's inset ({@link CARD_ROW_PADDING_START_CLASS}).
+ */
+export declare const CARD_ROW_PADDING_CLASS = "px-card py-card-sm";
+/** The START half of {@link CARD_ROW_PADDING_CLASS}: the inset a row's checkbox sits at from the row's edge. */
+export declare const CARD_ROW_PADDING_START_CLASS = "ps-card";
 /** The leading-rail flex: selection slot, then the row body. */
 export declare const CARD_SELECTION_RAIL_CLASS = "flex items-start gap-element-sm";
 /** The selection slot itself — the checkbox's cell in the rail. */
 export declare const CARD_SELECTION_SLOT_CLASS = "shrink-0";
 /**
- * Wrapper class for the cards-mode selection HEADER rail, which sits ABOVE the cards region.
+ * A row's checkbox, while nothing in the collection is selected: present (it holds its column, and a
+ * keyboard reaches it) but painted only when the row is hovered or holds focus, and always when the
+ * device has ANY touch pointer, where a finger cannot hover. `any-pointer-coarse`, not `pointer-coarse`:
+ * the latter asks only about the PRIMARY pointer, so a laptop with a touchscreen and a trackpad hid the
+ * box from the finger that was about to tap it (audit B-18). A column of empty boxes on every row was the
+ * loudest thing in a list nobody was selecting in. Once anything is selected — or this row is — every box shows.
+ *
+ * Decided by practice, 2026-10-01: list products split here (Gmail and GitHub always show the box,
+ * Linear and Notion reveal it); revealing is the quieter default and one class to reverse. The
+ * collection's select-all is not affected — it stays visible above the column as its anchor.
+ */
+export declare const CARD_SELECTION_REVEAL_CLASS = "opacity-0 group-hover/list-item:opacity-100 group-focus-within/list-item:opacity-100 any-pointer-coarse:opacity-100 motion-safe:transition-opacity";
+/**
+ * The inset that puts the collection's SELECT-ALL checkbox in the rows' own checkbox column.
+ *
+ * The select-all leads the collection toolbar's action row (`CollectionSelectAllCheckbox`), and that
+ * row starts at the same left edge as the cards region. A row's checkbox is inset from that edge by
+ * two things: a 1px border — the bordered `<ul>` in LIST, each cell's own border in GRID — and the
+ * row's start padding ({@link CARD_ROW_PADDING_START_CLASS}). Wearing the same border invisibly and
+ * the same padding lands the select-all exactly above the column it commands, in either arrangement.
  *
- * One answer for both arrangements, and the transparent border is the whole of it: a row's content
- * box is inset by a 1px border in EITHER case — the bordered `<ul>` in LIST, each cell's own border
- * in GRID — so a rail with no border would land its checkbox exactly 1px left of the column it
- * heads. Wearing the same border invisibly is cheaper than two branches and cannot be got wrong
- * when a third arrangement appears.
+ * It used to be a whole band of its own above the cards ("Select all items on this page"), 32px tall
+ * for one control. Measured on Wonder Todos (2026-09-30) it was one of five stacked bands, 172px of
+ * controls before the first row; the toolbar row it now leads already had room for it.
  *
- * Above the region rather than inside it because the select-all is PAGE-wide: a temporally-grouped
- * cards view renders one `<ul>` per day bucket, and a rail inside them would be one select-all per
- * bucket claiming to command the page.
+ * TABLE needs none of this: its `__select` header cell already sits above its own column.
  */
-export declare const CARDS_SELECTION_RAIL_CLASS = "border border-transparent rounded-lg";
+export declare const CARDS_SELECT_ALL_INSET_CLASS = "border-s border-transparent ps-card";
 /** GRID cell border applied to each `<li>` (the shared border is gone in grid mode). */
 export declare const CARDS_GRID_CELL_CLASS = "border border-border rounded-lg overflow-hidden";
 /**

package/dist/esm/components/resources/collection-card-layout.utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collection-card-layout.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/collection-card-layout.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,oFAAoF;AACpF,eAAO,MAAM,0BAA0B,6EACqC,CAAC;AAE7E~~;;;;;;;;;;;;;;GAcG~~;AAEH~~,+HAA+H~~;~~AAC/H~~,eAAO,MAAM,sBAAsB,~~WAAW~~,CAAC;~~AAE/C~~,~~iHAAiH~~;~~AACjH~~,eAAO,MAAM,~~6BAA6B~~,YAAY,CAAC;~~AAEvD~~,gEAAgE;AAChE,eAAO,MAAM,yBAAyB,oCAAoC,CAAC;AAE3E,mEAAmE;AACnE,eAAO,MAAM,yBAAyB,aAAa,CAAC;AAEpD~~;;;;;;;;;;;;GAYG~~;AACH,eAAO,MAAM,~~0BAA0B~~,~~yCAAyC~~,CAAC;~~AAEjF~~,wFAAwF;AACxF,eAAO,MAAM,qBAAqB,oDAAoD,CAAC;AAKvF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG9E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAO5F"}
1	+ {"version":3,"file":"collection-card-layout.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/collection-card-layout.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,oFAAoF;AACpF,eAAO,MAAM,0BAA0B,6EACqC,CAAC;AAE7E;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAE3D,gHAAgH;AAChH,eAAO,MAAM,4BAA4B,YAAY,CAAC;AAEtD,gEAAgE;AAChE,eAAO,MAAM,yBAAyB,oCAAoC,CAAC;AAE3E,mEAAmE;AACnE,eAAO,MAAM,yBAAyB,aAAa,CAAC;AAEpD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,2BAA2B,uJAC8G,CAAC;AAEvJ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,wCAAgE,CAAC;AAE1G,wFAAwF;AACxF,eAAO,MAAM,qBAAqB,oDAAoD,CAAC;AAKvF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG9E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAO5F"}

package/dist/esm/components/resources/collection-card-layout.utils.js CHANGED Viewed

@@ -42,30 +42,52 @@ export const CARDS_LIST_CONTAINER_CLASS = 'border border-border rounded-lg divid
  * Alignment here is not a styling preference, it is what makes the control legible: a checkbox
  * above a column of checkboxes means "all of these", and the same checkbox anywhere else means
  * nothing in particular. Two copies of the inset would drift on the first padding change, so the
- * row and the header read the same three constants.
+ * row and the select-all read these constants, and a test holds the row's padding and the select-all's
+ * inset to the same spacing token. (They cannot be COMPUTED from one another: Tailwind generates only
+ * the classes it finds spelled out in source.)
  */
-/** The row's own padding box. Anything that must share a row's horizontal inset uses {@link CARD_ROW_PADDING_INLINE_CLASS}. */
-export const CARD_ROW_PADDING_CLASS = 'p-card';
-/** The horizontal half of {@link CARD_ROW_PADDING_CLASS} — for a header rail that must be vertically compact. */
-export const CARD_ROW_PADDING_INLINE_CLASS = 'px-card';
+/**
+ * The row's own padding box: the card spacing token across, its SMALL step down. A summary row is one
+ * line of title and one of qualifiers, and the full card step above and below made each row read as a
+ * separate card (measured 2026-09-30 on the Wonder Todos todo list: 62px for a one-line row). Only the
+ * vertical axis moved: the START padding is the select-all's inset ({@link CARD_ROW_PADDING_START_CLASS}).
+ */
+export const CARD_ROW_PADDING_CLASS = 'px-card py-card-sm';
+/** The START half of {@link CARD_ROW_PADDING_CLASS}: the inset a row's checkbox sits at from the row's edge. */
+export const CARD_ROW_PADDING_START_CLASS = 'ps-card';
 /** The leading-rail flex: selection slot, then the row body. */
 export const CARD_SELECTION_RAIL_CLASS = 'flex items-start gap-element-sm';
 /** The selection slot itself — the checkbox's cell in the rail. */
 export const CARD_SELECTION_SLOT_CLASS = 'shrink-0';
 /**
- * Wrapper class for the cards-mode selection HEADER rail, which sits ABOVE the cards region.
+ * A row's checkbox, while nothing in the collection is selected: present (it holds its column, and a
+ * keyboard reaches it) but painted only when the row is hovered or holds focus, and always when the
+ * device has ANY touch pointer, where a finger cannot hover. `any-pointer-coarse`, not `pointer-coarse`:
+ * the latter asks only about the PRIMARY pointer, so a laptop with a touchscreen and a trackpad hid the
+ * box from the finger that was about to tap it (audit B-18). A column of empty boxes on every row was the
+ * loudest thing in a list nobody was selecting in. Once anything is selected — or this row is — every box shows.
+ *
+ * Decided by practice, 2026-10-01: list products split here (Gmail and GitHub always show the box,
+ * Linear and Notion reveal it); revealing is the quieter default and one class to reverse. The
+ * collection's select-all is not affected — it stays visible above the column as its anchor.
+ */
+export const CARD_SELECTION_REVEAL_CLASS = 'opacity-0 group-hover/list-item:opacity-100 group-focus-within/list-item:opacity-100 any-pointer-coarse:opacity-100 motion-safe:transition-opacity';
+/**
+ * The inset that puts the collection's SELECT-ALL checkbox in the rows' own checkbox column.
+ *
+ * The select-all leads the collection toolbar's action row (`CollectionSelectAllCheckbox`), and that
+ * row starts at the same left edge as the cards region. A row's checkbox is inset from that edge by
+ * two things: a 1px border — the bordered `<ul>` in LIST, each cell's own border in GRID — and the
+ * row's start padding ({@link CARD_ROW_PADDING_START_CLASS}). Wearing the same border invisibly and
+ * the same padding lands the select-all exactly above the column it commands, in either arrangement.
  *
- * One answer for both arrangements, and the transparent border is the whole of it: a row's content
- * box is inset by a 1px border in EITHER case — the bordered `<ul>` in LIST, each cell's own border
- * in GRID — so a rail with no border would land its checkbox exactly 1px left of the column it
- * heads. Wearing the same border invisibly is cheaper than two branches and cannot be got wrong
- * when a third arrangement appears.
+ * It used to be a whole band of its own above the cards ("Select all items on this page"), 32px tall
+ * for one control. Measured on Wonder Todos (2026-09-30) it was one of five stacked bands, 172px of
+ * controls before the first row; the toolbar row it now leads already had room for it.
  *
- * Above the region rather than inside it because the select-all is PAGE-wide: a temporally-grouped
- * cards view renders one `<ul>` per day bucket, and a rail inside them would be one select-all per
- * bucket claiming to command the page.
+ * TABLE needs none of this: its `__select` header cell already sits above its own column.
  */
-export const CARDS_SELECTION_RAIL_CLASS = 'border border-transparent rounded-lg';
+export const CARDS_SELECT_ALL_INSET_CLASS = `border-s border-transparent ${CARD_ROW_PADDING_START_CLASS}`;
 /** GRID cell border applied to each `<li>` (the shared border is gone in grid mode). */
 export const CARDS_GRID_CELL_CLASS = 'border border-border rounded-lg overflow-hidden';
 /** GRID container base classes (column tracks come from {@link resolveCardsGridStyle}). */

package/dist/esm/components/resources/collection-card-layout.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collection-card-layout.utils.js","sourceRoot":"","sources":["../../../../../src/components/resources/collection-card-layout.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AAEpD;;;GAGG;AACH,MAAM,mBAAmB,GAAG,OAAO,CAAC;AAEpC,oFAAoF;AACpF,MAAM,CAAC,MAAM,0BAA0B,GACrC,0EAA0E,CAAC;AAE7E~~;;;;;;;;;;;;;;GAcG~~;AAEH~~,+HAA+H~~;~~AAC/H~~,MAAM,CAAC,MAAM,sBAAsB,GAAG,~~QAAQ~~,CAAC;~~AAE/C~~,~~iHAAiH~~;~~AACjH~~,MAAM,CAAC,MAAM,~~6BAA6B~~,GAAG,SAAS,CAAC;~~AAEvD~~,gEAAgE;AAChE,MAAM,CAAC,MAAM,yBAAyB,GAAG,iCAAiC,CAAC;AAE3E,mEAAmE;AACnE,MAAM,CAAC,MAAM,yBAAyB,GAAG,UAAU,CAAC;AAEpD~~;;;;;;;;;;;;GAYG~~;AACH,MAAM,CAAC,MAAM,~~0BAA0B~~,GAAG,~~sCAAsC~~,CAAC;~~AAEjF~~,wFAAwF;AACxF,MAAM,CAAC,MAAM,qBAAqB,GAAG,iDAAiD,CAAC;AAEvF,2FAA2F;AAC3F,MAAM,0BAA0B,GAAG,oCAAoC,CAAC;AAExE;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAC,OAA2B;IACpE,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,0BAA0B,CAAC;IAC7D,OAAO,EAAE,CAAC,0BAA0B,CAAC,CAAC;AACxC,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAA2B;IAC/D,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC5C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,gCAAgC,CAAC,GAAG,CAAC;IACzE,OAAO;QACL,mBAAmB,EAAE,gCAAgC,mBAAmB,KAAK,MAAM,UAAU;KAC9F,CAAC;AACJ,CAAC","sourcesContent":["/*\n Cards-mode collection layout — resolves the `<ul>` container className (and,\n * for GRID, an inline `grid-template-columns`) for the two CARDS arrangements\n * (see `CardLayoutStyle`):\n \n - LIST: one bordered container whose rows are separated by `divide-y`.\n * - GRID: a responsive N-column grid; the shared `divide-y` border is\n * dropped, so each card CELL owns its own border (the host adds it on the\n * `<li>`). `columns` is the wide TARGET; the grid steps DOWN to fewer columns\n * as space narrows.\n \n Container-responsive, not viewport-responsive. The column count is an\n * intrinsic `repeat(auto-fill, minmax(max(<minCard>, <target>), 1fr))` track\n * spec that reacts to the GRID's OWN available width — so a cards grid embedded\n * in a narrow pane (split view, composite panel, sidebar) collapses correctly\n * even on a wide viewport. This needs no `@container` ancestor and no media\n * breakpoints. Emitted as an inline style (not a Tailwind class) because the\n * track formula is parameterised by N and the design-token gap, and because\n * `cn`/twMerge cannot reason about design-token utilities anyway.\n \n Shared by `ResourceLayout_List` and `ResourceLayout_Search` so the two card\n * surfaces can never drift.\n /\n\nimport type { CSSProperties } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\n\n/\n Minimum card track width before a column is dropped (~240px). Below this, the\n * grid fits fewer columns than the authored target; at/above it, up to N.\n /\nconst CARD_GRID_MIN_TRACK = '15rem';\n\n/* LIST container: bordered box with `divide-y` rows (the classic stacked list). /\nexport const CARDS_LIST_CONTAINER_CLASS =\n 'border border-border rounded-lg divide-y divide-border list-none m-0 p-0';\n\n/\n ── The cards-mode SELECTION RAIL geometry, authored ONCE ──\n \n A collection's select-all checkbox and its per-row checkboxes must sit in the same column, and\n * until these constants existed they could not: the row's leading rail was written inline in\n * `ResourceListItemRenderer` while the select-all lived in the toolbar's own flex row, several\n * unrelated controls to its right. Measured on the Wonder Todos todo list, the two were ~200px\n * apart, so the header checkbox read as belonging to the toolbar rather than to the list it\n * commands — and in TABLE mode it was a SECOND select-all beside the table header's own.\n \n Alignment here is not a styling preference, it is what makes the control legible: a checkbox\n * above a column of checkboxes means \"all of these\", and the same checkbox anywhere else means\n * nothing in particular. Two copies of the inset would drift on the first padding change, so the\n * row and the ~~header~~ read the same ~~three~~ ~~constants.\~~n /\n\n/* The row's own padding box. ~~Anything~~ ~~that~~ ~~must~~ ~~share~~ a row's ~~horizontal~~ inset ~~uses~~ {@link ~~CARD_ROW_PADDING_INLINE_CLASS~~}. /\nexport const CARD_ROW_PADDING_CLASS = 'p-card';\n\n/* The ~~horizontal~~ half of {@link CARD_ROW_PADDING_CLASS} — ~~for~~ a ~~header~~ ~~rail~~ ~~that~~ ~~must~~ be ~~vertically~~ ~~compact~~. /\nexport const ~~CARD_ROW_PADDING_INLINE_CLASS~~ = 'px-card';\n\n/* The leading-rail flex: selection slot, then the row body. /\nexport const CARD_SELECTION_RAIL_CLASS = 'flex items-start gap-element-sm';\n\n/* The selection slot itself — the checkbox's cell in the rail. /\nexport const CARD_SELECTION_SLOT_CLASS = 'shrink-0';\n\n/\n ~~Wrapper~~ ~~class~~ ~~for~~ the ~~cards~~-~~mode~~ ~~selection~~ ~~HEADER~~ ~~rail~~, ~~which~~ ~~sits~~ ~~ABOVE~~ the ~~cards~~ ~~region~~.\n \n ~~One~~ ~~answer~~ ~~for~~ ~~both~~ ~~arrangements,~~ and the ~~transparent~~ ~~border~~ is the ~~whole~~ of it: a ~~row~~'s ~~content~~\n * ~~box~~ is inset by a 1px border ~~in EITHER case~~ — the bordered `<ul>` in LIST, each cell's own border\n * in ~~GRID~~ — so a ~~rail~~ ~~with~~ no border ~~would~~ ~~land~~ ~~its~~ ~~checkbox~~ ~~exactly~~ ~~1px~~ ~~left~~ of the column it\n * ~~heads.~~ ~~Wearing~~ ~~the~~ ~~same~~ ~~border~~ ~~invisibly~~ is ~~cheaper~~ ~~than~~ ~~two~~ ~~branches~~ ~~and~~ ~~cannot~~ ~~be got wrong~~\n * ~~when~~ a ~~third~~ ~~arrangement~~ ~~appears.\n~~ \n ~~Above~~ ~~the~~ ~~region~~ ~~rather~~ ~~than~~ ~~inside~~ it ~~because~~ ~~the~~ ~~select-all~~ is ~~PAGE-wide:~~ a ~~temporally-grouped~~\n * ~~cards~~ ~~view~~ ~~renders~~ ~~one~~ ~~`<ul>`~~ ~~per~~ ~~day~~ ~~bucket,~~ ~~and~~ a ~~rail~~ ~~inside~~ ~~them~~ ~~would~~ be ~~one~~ ~~select-all per\~~n * ~~bucket~~ ~~claiming~~ to ~~command~~ ~~the~~ ~~page~~.\n /\nexport const ~~CARDS_SELECTION_RAIL_CLASS~~ = 'border border-transparent ~~rounded-lg';\~~n\n/* GRID cell border applied to each `<li>` (the shared border is gone in grid mode). /\nexport const CARDS_GRID_CELL_CLASS = 'border border-border rounded-lg overflow-hidden';\n\n/* GRID container base classes (column tracks come from {@link resolveCardsGridStyle}). /\nconst CARDS_GRID_CONTAINER_CLASS = 'grid gap-element list-none m-0 p-0';\n\n/\n Container `<ul>` className. Pass the target column count for a GRID, or\n * `undefined` for the single-column LIST. Pair a GRID with\n * {@link resolveCardsGridStyle} for the column tracks.\n /\nexport function resolveCardsContainerClass(columns: number \| undefined): string {\n if (columns === undefined) return CARDS_LIST_CONTAINER_CLASS;\n return cn(CARDS_GRID_CONTAINER_CLASS);\n}\n\n/\n Inline `grid-template-columns` for a GRID, or `undefined` for LIST.\n \n `repeat(auto-fill, minmax(max(<minCard>, (100% − (N−1)·gap) / N), 1fr))`:\n * - On WIDE space `(100% − gaps)/N ≥ <minCard>`, so the track min is the target\n * share → exactly N columns (caps at the authored count).\n * - On NARROW space `(100% − gaps)/N < <minCard>`, so the track min is the\n * absolute `<minCard>` → `auto-fill` fits fewer than N → the grid steps down.\n * Reacts to the `<ul>`'s own width, so embedded narrow hosts collapse without a\n * viewport breakpoint or `@container` wrapper.\n /\nexport function resolveCardsGridStyle(columns: number \| undefined): CSSProperties \| undefined {\n if (columns === undefined) return undefined;\n const n = Math.min(Math.max(Math.trunc(columns), 1), 6);\n const target = `calc((100% - ${n - 1} var(--spacing-element)) / ${n})`;\n return {\n gridTemplateColumns: `repeat(auto-fill, minmax(max(${CARD_GRID_MIN_TRACK}, ${target}), 1fr))`,\n };\n}\n"]}
1	+ {"version":3,"file":"collection-card-layout.utils.js","sourceRoot":"","sources":["../../../../../src/components/resources/collection-card-layout.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AAEpD;;;GAGG;AACH,MAAM,mBAAmB,GAAG,OAAO,CAAC;AAEpC,oFAAoF;AACpF,MAAM,CAAC,MAAM,0BAA0B,GACrC,0EAA0E,CAAC;AAE7E;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AAE3D,gHAAgH;AAChH,MAAM,CAAC,MAAM,4BAA4B,GAAG,SAAS,CAAC;AAEtD,gEAAgE;AAChE,MAAM,CAAC,MAAM,yBAAyB,GAAG,iCAAiC,CAAC;AAE3E,mEAAmE;AACnE,MAAM,CAAC,MAAM,yBAAyB,GAAG,UAAU,CAAC;AAEpD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,2BAA2B,GACtC,oJAAoJ,CAAC;AAEvJ;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,+BAA+B,4BAA4B,EAAE,CAAC;AAE1G,wFAAwF;AACxF,MAAM,CAAC,MAAM,qBAAqB,GAAG,iDAAiD,CAAC;AAEvF,2FAA2F;AAC3F,MAAM,0BAA0B,GAAG,oCAAoC,CAAC;AAExE;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAC,OAA2B;IACpE,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,0BAA0B,CAAC;IAC7D,OAAO,EAAE,CAAC,0BAA0B,CAAC,CAAC;AACxC,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAA2B;IAC/D,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC5C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,gCAAgC,CAAC,GAAG,CAAC;IACzE,OAAO;QACL,mBAAmB,EAAE,gCAAgC,mBAAmB,KAAK,MAAM,UAAU;KAC9F,CAAC;AACJ,CAAC","sourcesContent":["/*\n Cards-mode collection layout — resolves the `<ul>` container className (and,\n * for GRID, an inline `grid-template-columns`) for the two CARDS arrangements\n * (see `CardLayoutStyle`):\n \n - LIST: one bordered container whose rows are separated by `divide-y`.\n * - GRID: a responsive N-column grid; the shared `divide-y` border is\n * dropped, so each card CELL owns its own border (the host adds it on the\n * `<li>`). `columns` is the wide TARGET; the grid steps DOWN to fewer columns\n * as space narrows.\n \n Container-responsive, not viewport-responsive. The column count is an\n * intrinsic `repeat(auto-fill, minmax(max(<minCard>, <target>), 1fr))` track\n * spec that reacts to the GRID's OWN available width — so a cards grid embedded\n * in a narrow pane (split view, composite panel, sidebar) collapses correctly\n * even on a wide viewport. This needs no `@container` ancestor and no media\n * breakpoints. Emitted as an inline style (not a Tailwind class) because the\n * track formula is parameterised by N and the design-token gap, and because\n * `cn`/twMerge cannot reason about design-token utilities anyway.\n \n Shared by `ResourceLayout_List` and `ResourceLayout_Search` so the two card\n * surfaces can never drift.\n /\n\nimport type { CSSProperties } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\n\n/\n Minimum card track width before a column is dropped (~240px). Below this, the\n * grid fits fewer columns than the authored target; at/above it, up to N.\n /\nconst CARD_GRID_MIN_TRACK = '15rem';\n\n/* LIST container: bordered box with `divide-y` rows (the classic stacked list). /\nexport const CARDS_LIST_CONTAINER_CLASS =\n 'border border-border rounded-lg divide-y divide-border list-none m-0 p-0';\n\n/\n ── The cards-mode SELECTION RAIL geometry, authored ONCE ──\n \n A collection's select-all checkbox and its per-row checkboxes must sit in the same column, and\n * until these constants existed they could not: the row's leading rail was written inline in\n * `ResourceListItemRenderer` while the select-all lived in the toolbar's own flex row, several\n * unrelated controls to its right. Measured on the Wonder Todos todo list, the two were ~200px\n * apart, so the header checkbox read as belonging to the toolbar rather than to the list it\n * commands — and in TABLE mode it was a SECOND select-all beside the table header's own.\n \n Alignment here is not a styling preference, it is what makes the control legible: a checkbox\n * above a column of checkboxes means \"all of these\", and the same checkbox anywhere else means\n * nothing in particular. Two copies of the inset would drift on the first padding change, so the\n * row and the select-all read these constants, and a test holds the row's padding and the select-all's\n * inset to the same spacing token. (They cannot be COMPUTED from one another: Tailwind generates only\n * the classes it finds spelled out in source.)\n /\n\n/\n The row's own padding box: the card spacing token across, its SMALL step down. A summary row is one\n * line of title and one of qualifiers, and the full card step above and below made each row read as a\n * separate card (measured 2026-09-30 on the Wonder Todos todo list: 62px for a one-line row). Only the\n * vertical axis moved: the START padding is the select-all's inset ({@link CARD_ROW_PADDING_START_CLASS}).\n /\nexport const CARD_ROW_PADDING_CLASS = 'px-card py-card-sm';\n\n/* The START half of {@link CARD_ROW_PADDING_CLASS}: the inset a row's checkbox sits at from the row's edge. /\nexport const CARD_ROW_PADDING_START_CLASS = 'ps-card';\n\n/* The leading-rail flex: selection slot, then the row body. /\nexport const CARD_SELECTION_RAIL_CLASS = 'flex items-start gap-element-sm';\n\n/* The selection slot itself — the checkbox's cell in the rail. /\nexport const CARD_SELECTION_SLOT_CLASS = 'shrink-0';\n\n/\n A row's checkbox, while nothing in the collection is selected: present (it holds its column, and a\n * keyboard reaches it) but painted only when the row is hovered or holds focus, and always when the\n * device has ANY touch pointer, where a finger cannot hover. `any-pointer-coarse`, not `pointer-coarse`:\n * the latter asks only about the PRIMARY pointer, so a laptop with a touchscreen and a trackpad hid the\n * box from the finger that was about to tap it (audit B-18). A column of empty boxes on every row was the\n * loudest thing in a list nobody was selecting in. Once anything is selected — or this row is — every box shows.\n \n Decided by practice, 2026-10-01: list products split here (Gmail and GitHub always show the box,\n * Linear and Notion reveal it); revealing is the quieter default and one class to reverse. The\n * collection's select-all is not affected — it stays visible above the column as its anchor.\n /\nexport const CARD_SELECTION_REVEAL_CLASS =\n 'opacity-0 group-hover/list-item:opacity-100 group-focus-within/list-item:opacity-100 any-pointer-coarse:opacity-100 motion-safe:transition-opacity';\n\n/\n The inset that puts the collection's SELECT-ALL checkbox in the rows' own checkbox column.\n \n The select-all leads the collection toolbar's action row (`CollectionSelectAllCheckbox`), and that\n * row starts at the same left edge as the cards region. A row's checkbox is inset from that edge by\n * two things: a 1px border — the bordered `<ul>` in LIST, each cell's own border in GRID — and the\n * row's start padding ({@link CARD_ROW_PADDING_START_CLASS}). Wearing the same border invisibly and\n * the same padding lands the select-all exactly above the column it commands, in either arrangement.\n \n It used to be a whole band of its own above the cards (\"Select all items on this page\"), 32px tall\n * for one control. Measured on Wonder Todos (2026-09-30) it was one of five stacked bands, 172px of\n * controls before the first row; the toolbar row it now leads already had room for it.\n \n TABLE needs none of this: its `__select` header cell already sits above its own column.\n /\nexport const CARDS_SELECT_ALL_INSET_CLASS = `border-s border-transparent ${CARD_ROW_PADDING_START_CLASS}`;\n\n/* GRID cell border applied to each `<li>` (the shared border is gone in grid mode). /\nexport const CARDS_GRID_CELL_CLASS = 'border border-border rounded-lg overflow-hidden';\n\n/* GRID container base classes (column tracks come from {@link resolveCardsGridStyle}). /\nconst CARDS_GRID_CONTAINER_CLASS = 'grid gap-element list-none m-0 p-0';\n\n/\n Container `<ul>` className. Pass the target column count for a GRID, or\n * `undefined` for the single-column LIST. Pair a GRID with\n * {@link resolveCardsGridStyle} for the column tracks.\n /\nexport function resolveCardsContainerClass(columns: number \| undefined): string {\n if (columns === undefined) return CARDS_LIST_CONTAINER_CLASS;\n return cn(CARDS_GRID_CONTAINER_CLASS);\n}\n\n/\n Inline `grid-template-columns` for a GRID, or `undefined` for LIST.\n \n `repeat(auto-fill, minmax(max(<minCard>, (100% − (N−1)·gap) / N), 1fr))`:\n * - On WIDE space `(100% − gaps)/N ≥ <minCard>`, so the track min is the target\n * share → exactly N columns (caps at the authored count).\n * - On NARROW space `(100% − gaps)/N < <minCard>`, so the track min is the\n * absolute `<minCard>` → `auto-fill` fits fewer than N → the grid steps down.\n * Reacts to the `<ul>`'s own width, so embedded narrow hosts collapse without a\n * viewport breakpoint or `@container` wrapper.\n /\nexport function resolveCardsGridStyle(columns: number \| undefined): CSSProperties \| undefined {\n if (columns === undefined) return undefined;\n const n = Math.min(Math.max(Math.trunc(columns), 1), 6);\n const target = `calc((100% - ${n - 1} var(--spacing-element)) / ${n})`;\n return {\n gridTemplateColumns: `repeat(auto-fill, minmax(max(${CARD_GRID_MIN_TRACK}, ${target}), 1fr))`,\n };\n}\n"]}