@panneau/lists 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/filters/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","names":["label","draft","setDraft","flush","options","placeholder","option","reference","next","resource","references","_c","styles"],"sources":["../../src/filters/controls.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useFieldsContext } from '@panneau/fields';\nimport { DateField } from '@panneau/fields/date';\nimport { RelationField, useRelationReferences } from '@panneau/fields/relation';\nimport type { FilterValue } from '@panneau/protocol';\nimport { isFilterRange } from '@panneau/protocol/runtime';\nimport { Fieldset, type OptionValue, Select, Switch, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { FilterControlProps, FilterEntry } from '../types';\nimport { useDraft } from '../useDraft';\nimport styles from './Filters.module.css';\n\nfunction asStrings(value: unknown): string[] {\n    if (isFilterRange(value)) {\n        return [];\n    }\n    if (Array.isArray(value)) {\n        return value.map(String);\n    }\n    return value === undefined || value === null || value === '' ? [] : [String(value)];\n}\n\n/** A text filter: the list changes once the user stops typing. */\nexport function TextFilter({ label, value, onChange }: FilterControlProps) {\n    const current = typeof value === 'string' || typeof value === 'number' ? String(value) : '';\n    const { draft, setDraft, flush } = useDraft(current, (next) =>\n        onChange(next !== '' ? next : undefined),\n    );\n    return (\n        <TextInput\n            label={label}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                    flush();\n                }\n            }}\n            onBlur={flush}\n            className={styles.control}\n        />\n    );\n}\n\n/** A choice among the options, or several with `multiple`. */\nexport function SelectFilter({ filter, label, options, value, onChange }: FilterControlProps) {\n    const intl = usePanneauIntl();\n    const selected = asStrings(value);\n    // Values from the URL are strings: match them to the options' values.\n    const toOptions = (values: readonly string[]): OptionValue[] =>\n        options\n            .filter((option) => values.includes(String(option.value)))\n            .map((option) => option.value);\n    const placeholder = intl.formatMessage(messages.any);\n    if (filter.multiple === true) {\n        return (\n            <Select\n                multiple\n                label={label}\n                options={options}\n                placeholder={placeholder}\n                value={toOptions(selected)}\n                onChange={(next) => onChange(next.length > 0 ? next : undefined)}\n                className={styles.control}\n            />\n        );\n    }\n    return (\n        <Select\n            label={label}\n            options={options}\n            placeholder={placeholder}\n            value={toOptions(selected)[0] ?? null}\n            onChange={(next) => onChange(next ?? undefined)}\n            className={styles.control}\n        />\n    );\n}\n\n/** On or off: on filters with `true`, off removes the filter. */\nexport function ToggleFilter({ label, value, onChange }: FilterControlProps) {\n    return (\n        <Switch\n            isSelected={String(value) === 'true'}\n            onChange={(checked) => onChange(checked ? true : undefined)}\n            className={styles.toggle}\n        >\n            {label}\n        </Switch>\n    );\n}\n\n/** A day (`2026-10-15`). */\nexport function DateFilter({ label, value, onChange }: FilterControlProps) {\n    return (\n        <DateField\n            label={label}\n            value={typeof value === 'string' && value !== '' ? value : null}\n            onChange={(next) => onChange(next ?? undefined)}\n            className={styles.control}\n        />\n    );\n}\n\n/**\n * A range of days, sent as its bounds (`filter[published_at][from]=2026-01-01&…[to]=…`). Either end\n * can be open: it is left out.\n */\nexport function DateRangeFilter({ label, value, onChange }: FilterControlProps) {\n    const intl = usePanneauIntl();\n    const range = isFilterRange(value) ? value : {};\n    const from = range.from !== undefined ? String(range.from) : '';\n    const to = range.to !== undefined ? String(range.to) : '';\n    const set = (nextFrom: string, nextTo: string) =>\n        onChange(\n            nextFrom === '' && nextTo === ''\n                ? undefined\n                : {\n                      ...(nextFrom !== '' ? { from: nextFrom } : {}),\n                      ...(nextTo !== '' ? { to: nextTo } : {}),\n                  },\n        );\n    return (\n        <Fieldset legend={label} className={styles.range}>\n            <DateField\n                label={intl.formatMessage(messages.from)}\n                value={from !== '' ? from : null}\n                onChange={(next) => set(next ?? '', to)}\n            />\n            <DateField\n                label={intl.formatMessage(messages.to)}\n                value={to !== '' ? to : null}\n                onChange={(next) => set(from, next ?? '')}\n            />\n        </Fieldset>\n    );\n}\n\n/**\n * An item of another resource (`resource`), or several with `multiple`, picked with the relation\n * source of the fields context. The filter keeps their ids; their labels are remembered for the\n * chips.\n */\nexport function RelationFilter({\n    filter,\n    label,\n    value,\n    onChange,\n    onLabel,\n    getValueLabel,\n}: FilterControlProps) {\n    const resource = filter.resource ?? filter.id;\n    // Ids from the URL have no label: the relation source resolves them, for the picker and chips.\n    const references = useRelationReferences(\n        useFieldsContext().relationSource,\n        resource,\n        asStrings(value).map((id) => ({ id, label: getValueLabel(id) ?? id })),\n    );\n    const remember = (next: readonly { id: string; label: string }[]) =>\n        next.forEach((reference) => onLabel(reference.id, reference.label));\n    useEffect(() => {\n        references\n            .filter((reference) => reference.label !== reference.id)\n            .forEach((reference) => onLabel(reference.id, reference.label));\n    }, [references, onLabel]);\n    if (filter.multiple === true) {\n        return (\n            <RelationField\n                multiple\n                label={label}\n                resource={resource}\n                value={references}\n                onChange={(next) => {\n                    remember(next ?? []);\n                    const ids: FilterValue | undefined =\n                        next !== null && next.length > 0\n                            ? next.map((reference) => reference.id)\n                            : undefined;\n                    onChange(ids);\n                }}\n                className={styles.control}\n            />\n        );\n    }\n    return (\n        <RelationField\n            label={label}\n            resource={resource}\n            value={references[0] ?? null}\n            onChange={(next) => {\n                remember(next !== null ? [next] : []);\n                onChange(next?.id);\n            }}\n            className={styles.control}\n        />\n    );\n}\n\n/** The built-in filter controls, by filter type. Unknown types are text filters. */\nexport const builtInFilters: Readonly<Record<string, FilterEntry>> = {\n    text: TextFilter,\n    select: SelectFilter,\n    toggle: ToggleFilter,\n    date: DateFilter,\n    'date-range': DateRangeFilter,\n    relation: RelationFilter,\n};\n"],"mappings":"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"}
+{"version":3,"file":"controls.js","names":["label","draft","setDraft","flush","options","placeholder","option","reference","next","resource","references","_c","styles"],"sources":["../../src/filters/controls.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useFieldsContext } from '@panneau/fields';\nimport { DateField } from '@panneau/fields/date';\nimport { RelationField, useRelationReferences } from '@panneau/fields/relation';\nimport type { FilterValue } from '@panneau/protocol';\nimport { isFilterRange } from '@panneau/protocol/runtime';\nimport { Fieldset, type OptionValue, Select, Switch, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { FilterControlProps, FilterEntry } from '../types';\nimport { useDraft } from '../useDraft';\nimport styles from './Filters.module.css';\n\nfunction asStrings(value: unknown): string[] {\n    if (isFilterRange(value)) {\n        return [];\n    }\n    if (Array.isArray(value)) {\n        return value.map(String);\n    }\n    return value === undefined || value === null || value === '' ? [] : [String(value)];\n}\n\n/** A text filter: the list changes once the user stops typing. */\nexport function TextFilter({ label, value, onChange }: FilterControlProps) {\n    const current = typeof value === 'string' || typeof value === 'number' ? String(value) : '';\n    const { draft, setDraft, flush } = useDraft(current, (next) =>\n        onChange(next !== '' ? next : undefined),\n    );\n    return (\n        <TextInput\n            label={label}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                    flush();\n                }\n            }}\n            onBlur={flush}\n            className={styles.control}\n        />\n    );\n}\n\n/** A choice among the options, or several with `multiple`. */\nexport function SelectFilter({ filter, label, options, value, onChange }: FilterControlProps) {\n    const intl = usePanneauIntl();\n    const selected = asStrings(value);\n    // Values from the URL are strings: match them to the options' values.\n    const toOptions = (values: readonly string[]): OptionValue[] =>\n        options\n            .filter((option) => values.includes(String(option.value)))\n            .map((option) => option.value);\n    const placeholder = intl.formatMessage(messages.any);\n    if (filter.multiple === true) {\n        return (\n            <Select\n                multiple\n                label={label}\n                options={options}\n                placeholder={placeholder}\n                value={toOptions(selected)}\n                onChange={(next) => onChange(next.length > 0 ? next : undefined)}\n                className={styles.control}\n            />\n        );\n    }\n    return (\n        <Select\n            label={label}\n            options={options}\n            placeholder={placeholder}\n            value={toOptions(selected)[0] ?? null}\n            onChange={(next) => onChange(next ?? undefined)}\n            className={styles.control}\n        />\n    );\n}\n\n/** On or off: on filters with `true`, off removes the filter. */\nexport function ToggleFilter({ label, value, onChange }: FilterControlProps) {\n    return (\n        <Switch\n            isSelected={String(value) === 'true'}\n            onChange={(checked) => onChange(checked ? true : undefined)}\n            className={styles.toggle}\n        >\n            {label}\n        </Switch>\n    );\n}\n\n/** A day (`2026-10-15`). */\nexport function DateFilter({ label, value, onChange }: FilterControlProps) {\n    return (\n        <DateField\n            label={label}\n            value={typeof value === 'string' && value !== '' ? value : null}\n            onChange={(next) => onChange(next ?? undefined)}\n            className={styles.control}\n        />\n    );\n}\n\n/**\n * A range of days, sent as its bounds (`filter[published_at][from]=2026-01-01&…[to]=…`). Either end\n * can be open: it is left out.\n */\nexport function DateRangeFilter({ label, value, onChange }: FilterControlProps) {\n    const intl = usePanneauIntl();\n    const range = isFilterRange(value) ? value : {};\n    const from = range.from !== undefined ? String(range.from) : '';\n    const to = range.to !== undefined ? String(range.to) : '';\n    const set = (nextFrom: string, nextTo: string) =>\n        onChange(\n            nextFrom === '' && nextTo === ''\n                ? undefined\n                : {\n                      ...(nextFrom !== '' ? { from: nextFrom } : {}),\n                      ...(nextTo !== '' ? { to: nextTo } : {}),\n                  },\n        );\n    return (\n        <Fieldset legend={label} className={styles.range}>\n            {/* One row, like the other filters: the legend names the range, and each end is named\n                for assistive technologies only. */}\n            <div className={styles.rangeInputs}>\n                <DateField\n                    aria-label={intl.formatMessage(messages.from)}\n                    value={from !== '' ? from : null}\n                    onChange={(next) => set(next ?? '', to)}\n                />\n                <span className={styles.rangeDash} aria-hidden=\"true\">\n                    –\n                </span>\n                <DateField\n                    aria-label={intl.formatMessage(messages.to)}\n                    value={to !== '' ? to : null}\n                    onChange={(next) => set(from, next ?? '')}\n                />\n            </div>\n        </Fieldset>\n    );\n}\n\n/**\n * An item of another resource (`resource`), or several with `multiple`, picked with the relation\n * source of the fields context. The filter keeps their ids; their labels are remembered for the\n * chips.\n */\nexport function RelationFilter({\n    filter,\n    label,\n    value,\n    onChange,\n    onLabel,\n    getValueLabel,\n}: FilterControlProps) {\n    const resource = filter.resource ?? filter.id;\n    // Ids from the URL have no label: the relation source resolves them, for the picker and chips.\n    const references = useRelationReferences(\n        useFieldsContext().relationSource,\n        resource,\n        asStrings(value).map((id) => ({ id, label: getValueLabel(id) ?? id })),\n    );\n    const remember = (next: readonly { id: string; label: string }[]) =>\n        next.forEach((reference) => onLabel(reference.id, reference.label));\n    useEffect(() => {\n        references\n            .filter((reference) => reference.label !== reference.id)\n            .forEach((reference) => onLabel(reference.id, reference.label));\n    }, [references, onLabel]);\n    if (filter.multiple === true) {\n        return (\n            <RelationField\n                multiple\n                label={label}\n                resource={resource}\n                value={references}\n                onChange={(next) => {\n                    remember(next ?? []);\n                    const ids: FilterValue | undefined =\n                        next !== null && next.length > 0\n                            ? next.map((reference) => reference.id)\n                            : undefined;\n                    onChange(ids);\n                }}\n                className={styles.control}\n            />\n        );\n    }\n    return (\n        <RelationField\n            label={label}\n            resource={resource}\n            value={references[0] ?? null}\n            onChange={(next) => {\n                remember(next !== null ? [next] : []);\n                onChange(next?.id);\n            }}\n            className={styles.control}\n        />\n    );\n}\n\n/** The built-in filter controls, by filter type. Unknown types are text filters. */\nexport const builtInFilters: Readonly<Record<string, FilterEntry>> = {\n    text: TextFilter,\n    select: SelectFilter,\n    toggle: ToggleFilter,\n    date: DateFilter,\n    'date-range': DateRangeFilter,\n    relation: RelationFilter,\n};\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 export { type ListActions, getActionHref, groupListActions, isAllowedOn } from './actions/actions';
 export { ConfirmDialog, type ConfirmDialogProps, type ConfirmPreview, } from './actions/ConfirmDialog';
 export { type ActionIcons, getActionIcon } from './actions/icons';
-export { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, EmailDisplay, EmptyValue, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays, } from './displays/displays';
+export { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, JsonDisplay, LocationDisplay, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays, } from './displays/displays';
 export { DateFilter, DateRangeFilter, RelationFilter, SelectFilter, TextFilter, ToggleFilter, builtInFilters, } from './filters/controls';
 export { CardsLayout } from './layouts/CardsLayout';
 export { TableLayout } from './layouts/TableLayout';
 export { builtInLayouts } from './layouts/builtIn';
+export { ItemDetails, type ItemDetailsProps } from './ItemDetails';
 export { List, type ListProps } from './List';
 export { ListView, type ListViewProps } from './ListView';
 export { listsPlugin } from './plugin';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EACH,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACH,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,eAAe,EACf,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,GACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EACR,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,eAAe,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EACH,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACH,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,eAAe,EACf,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,GACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EACR,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,eAAe,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -2,11 +2,12 @@ import { getActionHref, groupListActions, isAllowedOn } from "./actions/actions.
 import { ConfirmDialog } from "./actions/ConfirmDialog.js";
 import { getActionIcon } from "./actions/icons.js";
 import { getLocalizedValue, toText } from "./values.js";
-import { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, EmailDisplay, EmptyValue, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays } from "./displays/displays.js";
+import { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, JsonDisplay, LocationDisplay, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays } from "./displays/displays.js";
 import { DateFilter, DateRangeFilter, RelationFilter, SelectFilter, TextFilter, ToggleFilter, builtInFilters } from "./filters/controls.js";
 import { CardsLayout } from "./layouts/CardsLayout.js";
 import { TableLayout } from "./layouts/TableLayout.js";
 import { builtInLayouts } from "./layouts/builtIn.js";
+import { ItemDetails } from "./ItemDetails.js";
 import { countSelected, getPageSelection, isItemSelected } from "./selection.js";
 import { Pagination } from "./toolbar/Pagination.js";
 import { SearchField } from "./toolbar/SearchField.js";
@@ -15,4 +16,4 @@ import { ListView } from "./ListView.js";
 import { applyListQuery } from "./query.js";
 import { List } from "./List.js";
 import { listsPlugin } from "./plugin.js";
-export { BooleanDisplay, CardsLayout, ColorDisplay, ConfirmDialog, DateDisplay, DateFilter, DateRangeFilter, DateTimeDisplay, EmailDisplay, EmptyValue, List, ListView, MediaDisplay, NumberDisplay, Pagination, RelationDisplay, RelationFilter, RichTextDisplay, SearchField, SelectDisplay, SelectFilter, TableLayout, TextDisplay, TextFilter, TimeDisplay, ToggleFilter, UrlDisplay, applyListQuery, builtInDisplays, builtInFilters, builtInLayouts, countSelected, getActionHref, getActionIcon, getLocalizedValue, getPageSelection, groupListActions, isAllowedOn, isItemSelected, listsPlugin, toText, useListState };
+export { BooleanDisplay, CardsLayout, ColorDisplay, ConfirmDialog, DateDisplay, DateFilter, DateRangeFilter, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, ItemDetails, JsonDisplay, List, ListView, LocationDisplay, MediaDisplay, NumberDisplay, Pagination, RelationDisplay, RelationFilter, RichTextDisplay, SearchField, SelectDisplay, SelectFilter, TableLayout, TagsDisplay, TelDisplay, TextDisplay, TextFilter, TimeDisplay, ToggleFilter, UrlDisplay, applyListQuery, builtInDisplays, builtInFilters, builtInLayouts, countSelected, getActionHref, getActionIcon, getLocalizedValue, getPageSelection, groupListActions, isAllowedOn, isItemSelected, listsPlugin, toText, useListState };

package/dist/layouts/CardsLayout.css

@@ -17,6 +17,11 @@
     border-radius: var(--panneau-radius-lg);
 }
 
+.panneau-cards-layout-card[data-current] {
+    border-color: var(--panneau-color-accent);
+    box-shadow: inset 0 0 0 1px var(--panneau-color-accent);
+}
+
 .panneau-cards-layout-card[data-selected] {
     background-color: var(--panneau-color-accent-subtle);
     border-color: var(--panneau-color-border-control);

package/dist/layouts/CardsLayout.d.ts

@@ -1,4 +1,4 @@
 import type { ListLayoutProps } from '../types';
 /** Items as cards: the first column is the title, the others are listed under it. */
-export declare function CardsLayout({ items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
+export declare function CardsLayout({ items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
 //# sourceMappingURL=CardsLayout.d.ts.map

package/dist/layouts/CardsLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardsLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/CardsLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAqDjB"}
+{"version":3,"file":"CardsLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/CardsLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAuDjB"}

package/dist/layouts/CardsLayout.js

@@ -7,32 +7,34 @@ import { c } from "react/compiler-runtime";
 //#region src/layouts/CardsLayout.tsx
 /** Items as cards: the first column is the title, the others are listed under it. */
 function CardsLayout(t0) {
-	const $ = c(26);
-	const { items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, label, pageSelection } = t0;
+	const $ = c(27);
+	const { items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, label, pageSelection } = t0;
 	const intl = usePanneauIntl();
 	let t1;
 	let t2;
 	let t3;
 	let t4;
-	if ($[0] !== columns || $[1] !== getItemHref || $[2] !== getItemLabel || $[3] !== intl || $[4] !== isSelected || $[5] !== items || $[6] !== label || $[7] !== onToggle || $[8] !== pageSelection || $[9] !== renderActions || $[10] !== renderValue || $[11] !== selectable) {
+	if ($[0] !== columns || $[1] !== getItemHref || $[2] !== getItemLabel || $[3] !== intl || $[4] !== isCurrent || $[5] !== isSelected || $[6] !== items || $[7] !== label || $[8] !== onToggle || $[9] !== pageSelection || $[10] !== renderActions || $[11] !== renderValue || $[12] !== selectable) {
 		const [title, ...others] = columns;
-		if ($[16] !== pageSelection || $[17] !== selectable) {
+		if ($[17] !== pageSelection || $[18] !== selectable) {
 			t4 = selectable ? /* @__PURE__ */ jsx("div", {
 				className: CardsLayout_module_default.pageSelection,
 				children: pageSelection
 			}) : null;
-			$[16] = pageSelection;
-			$[17] = selectable;
-			$[18] = t4;
-		} else t4 = $[18];
+			$[17] = pageSelection;
+			$[18] = selectable;
+			$[19] = t4;
+		} else t4 = $[19];
 		t1 = CardsLayout_module_default.cards;
 		t2 = label;
 		t3 = items.map((item) => {
 			const selected = selectable && isSelected(item);
 			const actions = renderActions(item);
+			const current = isCurrent?.(item) ?? false;
 			return /* @__PURE__ */ jsxs("li", {
 				className: CardsLayout_module_default.card,
 				"data-selected": selected || void 0,
+				"data-current": current || void 0,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: CardsLayout_module_default.header,
@@ -40,6 +42,7 @@ function CardsLayout(t0) {
 							className: CardsLayout_module_default.title,
 							children: /* @__PURE__ */ jsx(ItemTitle, {
 								href: getItemHref?.(item) ?? null,
+								current,
 								children: title !== void 0 ? renderValue(item, title) : getItemLabel(item)
 							})
 						}), selectable ? /* @__PURE__ */ jsx(Checkbox, {
@@ -66,43 +69,44 @@ function CardsLayout(t0) {
 		$[1] = getItemHref;
 		$[2] = getItemLabel;
 		$[3] = intl;
-		$[4] = isSelected;
-		$[5] = items;
-		$[6] = label;
-		$[7] = onToggle;
-		$[8] = pageSelection;
-		$[9] = renderActions;
-		$[10] = renderValue;
-		$[11] = selectable;
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
+		$[4] = isCurrent;
+		$[5] = isSelected;
+		$[6] = items;
+		$[7] = label;
+		$[8] = onToggle;
+		$[9] = pageSelection;
+		$[10] = renderActions;
+		$[11] = renderValue;
+		$[12] = selectable;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
 	} else {
-		t1 = $[12];
-		t2 = $[13];
-		t3 = $[14];
-		t4 = $[15];
+		t1 = $[13];
+		t2 = $[14];
+		t3 = $[15];
+		t4 = $[16];
 	}
 	let t5;
-	if ($[19] !== t1 || $[20] !== t2 || $[21] !== t3) {
+	if ($[20] !== t1 || $[21] !== t2 || $[22] !== t3) {
 		t5 = /* @__PURE__ */ jsx("ul", {
 			className: t1,
 			"aria-label": t2,
 			children: t3
 		});
-		$[19] = t1;
-		$[20] = t2;
-		$[21] = t3;
-		$[22] = t5;
-	} else t5 = $[22];
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t5;
+	} else t5 = $[23];
 	let t6;
-	if ($[23] !== t4 || $[24] !== t5) {
+	if ($[24] !== t4 || $[25] !== t5) {
 		t6 = /* @__PURE__ */ jsxs("div", { children: [t4, t5] });
-		$[23] = t4;
-		$[24] = t5;
-		$[25] = t6;
-	} else t6 = $[25];
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
 	return t6;
 }
 //#endregion

package/dist/layouts/CardsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardsLayout.js","names":["pageSelection","label","selected","actions","_c","styles"],"sources":["../../src/layouts/CardsLayout.tsx"],"sourcesContent":["import { Checkbox, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './CardsLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/** Items as cards: the first column is the title, the others are listed under it. */\nexport function CardsLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title, ...others] = columns;\n    return (\n        <div>\n            {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n            <ul className={styles.cards} aria-label={label}>\n                {items.map((item) => {\n                    const selected = selectable && isSelected(item);\n                    const actions = renderActions(item);\n                    return (\n                        <li\n                            key={item.id}\n                            className={styles.card}\n                            data-selected={selected || undefined}\n                        >\n                            <div className={styles.header}>\n                                <div className={styles.title}>\n                                    <ItemTitle href={getItemHref?.(item) ?? null}>\n                                        {title !== undefined\n                                            ? renderValue(item, title)\n                                            : getItemLabel(item)}\n                                    </ItemTitle>\n                                </div>\n                                {selectable ? (\n                                    <Checkbox\n                                        aria-label={intl.formatMessage(messages.selectItem, {\n                                            item: getItemLabel(item),\n                                        })}\n                                        isSelected={selected}\n                                        onChange={() => onToggle(item)}\n                                    />\n                                ) : null}\n                            </div>\n                            {others.length > 0 ? (\n                                <dl className={styles.values}>\n                                    {others.map((column) => (\n                                        <div key={column.id} className={styles.value}>\n                                            <dt>{column.label ?? column.id}</dt>\n                                            <dd>{renderValue(item, column)}</dd>\n                                        </div>\n                                    ))}\n                                </dl>\n                            ) : null}\n                            {actions !== null ? (\n                                <div className={styles.actions}>{actions}</div>\n                            ) : null}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AAQA,SAAO,YAAA,IAAA;CAAA,MAAA,IAAAI,EAAA,EAAA;CAAqB,MAAA,EAAA,OAAA,SAAA,aAAA,cAAA,aAAA,YAAA,YAAA,UAAA,eAAA,OAAA,kBAAA;CAaxB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,eAAA,EAAA,OAAA,gBAAA,EAAA,OAAA,QAAA,EAAA,OAAA,cAAA,EAAA,OAAA,SAAA,EAAA,OAAA,SAAA,EAAA,OAAA,YAAA,EAAA,OAAA,iBAAA,EAAA,OAAA,iBAAA,EAAA,QAAA,eAAA,EAAA,QAAA,YAAA;EAC9B,MAAA,CAAA,OAAA,GAAA,UAA2B;EAAQ,IAAA,EAAA,QAAA,iBAAA,EAAA,QAAA,YAAA;GAG1B,KAAA,aAAa,oBAAA,OAAA;IAAgB,WAAAC,2BAAM;IAAiB,UAAA;GAAoB,CAAA,IAAxE;GAA+E,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EACjE,KAAAA,2BAAM;EAAoBJ,KAAA;EACpC,KAAA,MAAK,KAAK,SAAA;GACP,MAAA,WAAiB,cAAc,WAAW,IAAI;GAC9C,MAAA,UAAgB,cAAc,IAAI;GAAE,OAEhC,qBAAA,MAAA;IAEe,WAAAI,2BAAM;IACF,iBAAA,YAAA,KAAA;IAHnB,UAAA;KAKI,qBAAA,OAAA;MAAgB,WAAAA,2BAAM;MAAtB,UAAA,CACI,oBAAA,OAAA;OAAgB,WAAAA,2BAAM;OAClB,UAAA,oBAAC,WAAD;QAAiB,MAAA,cAAc,IAAY,KAA1B;QACZ,UAAA,UAAU,KAAA,IACL,YAAY,MAAM,KACD,IAAjB,aAAa,IAAI;OAHjB,CAAA;MAKR,CAAA,GACL,aACG,oBAAC,UAAD;OACgB,cAAA,KAAI,cAAe,SAAQ,YAAa,EAAA,MAC1C,aAAa,IAAI,EAC3B,CAAC;OACWH,YAAA;OACF,gBAAM,SAAS,IAAI;MAAC,CAAA,IANrC,IASC;;KACL,OAAM,SAAU,IACb,oBAAA,MAAA;MAAe,WAAAG,2BAAM;MAChB,UAAA,OAAM,KAAK,WACR,qBAAA,OAAA;OAAgC,WAAAA,2BAAM;OAAtC,UAAA,CACI,oBAAA,MAAA,EAAA,UAAK,OAAM,SAAU,OAAM,GAAS,CAAA,GACpC,oBAAA,MAAA,EAAA,UAAK,YAAY,MAAM,MAAM,EAAO,CAAA,CAClC;MAHI,GAAA,OAAM,EAGV,CACT;KACA,CAAA,IARR;KAUA,YAAY,OACT,oBAAA,OAAA;MAAgB,WAAAA,2BAAM;MAAW,UAAA;KAAc,CAAA,IADlD;IAGA;GAnCI,GAAA,KAAI,EAmCR;EAAA,CAEZ;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EA3CN,KAAA,oBAAA,MAAA;GAAe,WAAA;GAA0BJ,cAAAA;GACpC,UAAA;EA2CA,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EA9CT,KAAA,qBAAA,OAAA,EAAA,UAAA,CACK,IACD,EA6CE,EAAA,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OA/CN;AA+CM"}
+{"version":3,"file":"CardsLayout.js","names":["pageSelection","label","current","selected","actions","_c","styles"],"sources":["../../src/layouts/CardsLayout.tsx"],"sourcesContent":["import { Checkbox, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './CardsLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/** Items as cards: the first column is the title, the others are listed under it. */\nexport function CardsLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title, ...others] = columns;\n    return (\n        <div>\n            {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n            <ul className={styles.cards} aria-label={label}>\n                {items.map((item) => {\n                    const selected = selectable && isSelected(item);\n                    const actions = renderActions(item);\n                    const current = isCurrent?.(item) ?? false;\n                    return (\n                        <li\n                            key={item.id}\n                            className={styles.card}\n                            data-selected={selected || undefined}\n                            data-current={current || undefined}\n                        >\n                            <div className={styles.header}>\n                                <div className={styles.title}>\n                                    <ItemTitle href={getItemHref?.(item) ?? null} current={current}>\n                                        {title !== undefined\n                                            ? renderValue(item, title)\n                                            : getItemLabel(item)}\n                                    </ItemTitle>\n                                </div>\n                                {selectable ? (\n                                    <Checkbox\n                                        aria-label={intl.formatMessage(messages.selectItem, {\n                                            item: getItemLabel(item),\n                                        })}\n                                        isSelected={selected}\n                                        onChange={() => onToggle(item)}\n                                    />\n                                ) : null}\n                            </div>\n                            {others.length > 0 ? (\n                                <dl className={styles.values}>\n                                    {others.map((column) => (\n                                        <div key={column.id} className={styles.value}>\n                                            <dt>{column.label ?? column.id}</dt>\n                                            <dd>{renderValue(item, column)}</dd>\n                                        </div>\n                                    ))}\n                                </dl>\n                            ) : null}\n                            {actions !== null ? (\n                                <div className={styles.actions}>{actions}</div>\n                            ) : null}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/layouts/CardsLayout.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardsLayout.module.js","names":[],"sources":["../../src/layouts/CardsLayout.module.css"],"sourcesContent":[".cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3);\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n}\n\n.card[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n    border-color: var(--panneau-color-border-control);\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n}\n\n.title {\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n}\n\n.values {\n    display: grid;\n    gap: var(--panneau-space-1);\n    margin: 0;\n    font-size: var(--panneau-font-size-md);\n}\n\n.values dt,\n.values dd {\n    margin: 0;\n    font-weight: inherit;\n}\n\n.value {\n    display: grid;\n    grid-template-columns: minmax(5rem, 40%) 1fr;\n    gap: var(--panneau-space-2);\n}\n\n.value dt {\n    color: var(--panneau-color-text-muted);\n}\n\n.value dd {\n    margin: 0;\n    min-width: 0;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n    margin-top: auto;\n    padding-top: var(--panneau-space-1);\n}\n\n.pageSelection {\n    margin-bottom: var(--panneau-space-2);\n}\n"],"mappings":""}
+{"version":3,"file":"CardsLayout.module.js","names":[],"sources":["../../src/layouts/CardsLayout.module.css"],"sourcesContent":[".cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3);\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n}\n\n.card[data-current] {\n    border-color: var(--panneau-color-accent);\n    box-shadow: inset 0 0 0 1px var(--panneau-color-accent);\n}\n\n.card[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n    border-color: var(--panneau-color-border-control);\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n}\n\n.title {\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n}\n\n.values {\n    display: grid;\n    gap: var(--panneau-space-1);\n    margin: 0;\n    font-size: var(--panneau-font-size-md);\n}\n\n.values dt,\n.values dd {\n    margin: 0;\n    font-weight: inherit;\n}\n\n.value {\n    display: grid;\n    grid-template-columns: minmax(5rem, 40%) 1fr;\n    gap: var(--panneau-space-2);\n}\n\n.value dt {\n    color: var(--panneau-color-text-muted);\n}\n\n.value dd {\n    margin: 0;\n    min-width: 0;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n    margin-top: auto;\n    padding-top: var(--panneau-space-1);\n}\n\n.pageSelection {\n    margin-bottom: var(--panneau-space-2);\n}\n"],"mappings":""}

package/dist/layouts/ItemTitle.d.ts

@@ -3,8 +3,10 @@ import type { ReactNode } from 'react';
  * The title of an item, as a link to it when the list has one. Links go through React Aria, so an
  * app's `RouterProvider` handles them with its router.
  */
-export declare function ItemTitle({ href, children }: {
+export declare function ItemTitle({ href, current, children, }: {
     href: string | null;
+    /** The item is the one shown next to the list: its link is the current page. */
+    current?: boolean;
     children: ReactNode;
 }): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 //# sourceMappingURL=ItemTitle.d.ts.map

package/dist/layouts/ItemTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemTitle.d.ts","sourceRoot":"","sources":["../../src/layouts/ItemTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+TASzF"}
+{"version":3,"file":"ItemTitle.d.ts","sourceRoot":"","sources":["../../src/layouts/ItemTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACtB,IAAI,EACJ,OAAe,EACf,QAAQ,GACX,EAAE;IACC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACvB,+TASA"}

package/dist/layouts/ItemTitle.js

@@ -1,28 +1,19 @@
 import link_module_default from "./link.module.js";
 import { jsx } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 import { Link } from "react-aria-components";
 //#region src/layouts/ItemTitle.tsx
 /**
 * The title of an item, as a link to it when the list has one. Links go through React Aria, so an
 * app's `RouterProvider` handles them with its router.
 */
-function ItemTitle(t0) {
-	const $ = c(3);
-	const { href, children } = t0;
+function ItemTitle({ href, current = false, children }) {
 	if (href === null) return children;
-	let t1;
-	if ($[0] !== children || $[1] !== href) {
-		t1 = /* @__PURE__ */ jsx(Link, {
-			className: link_module_default.link,
-			href,
-			children
-		});
-		$[0] = children;
-		$[1] = href;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
+	return /* @__PURE__ */ jsx(Link, {
+		className: link_module_default.link,
+		href,
+		"aria-current": current ? "page" : void 0,
+		children
+	});
 }
 //#endregion
 export { ItemTitle };

package/dist/layouts/ItemTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemTitle.js","names":["href","children","_c","styles"],"sources":["../../src/layouts/ItemTitle.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Link } from 'react-aria-components';\n\nimport styles from './link.module.css';\n\n/**\n * The title of an item, as a link to it when the list has one. Links go through React Aria, so an\n * app's `RouterProvider` handles them with its router.\n */\nexport function ItemTitle({ href, children }: { href: string | null; children: ReactNode }) {\n    if (href === null) {\n        return children;\n    }\n    return (\n        <Link className={styles.link} href={href}>\n            {children}\n        </Link>\n    );\n}\n"],"mappings":";;;;;;;;;AASA,SAAO,UAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,CAAA;CAAmB,MAAA,EAAA,MAAA,aAAA;CACtB,IAAI,SAAS,MAAI,OACN;CACV,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA;EAEG,KAAA,oBAAC,MAAD;GAAiB,WAAAC,oBAAM;GAAa;GAC/B;EADA,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFP;AAEO"}
+{"version":3,"file":"ItemTitle.js","names":["styles"],"sources":["../../src/layouts/ItemTitle.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Link } from 'react-aria-components';\n\nimport styles from './link.module.css';\n\n/**\n * The title of an item, as a link to it when the list has one. Links go through React Aria, so an\n * app's `RouterProvider` handles them with its router.\n */\nexport function ItemTitle({\n    href,\n    current = false,\n    children,\n}: {\n    href: string | null;\n    /** The item is the one shown next to the list: its link is the current page. */\n    current?: boolean;\n    children: ReactNode;\n}) {\n    if (href === null) {\n        return children;\n    }\n    return (\n        <Link className={styles.link} href={href} aria-current={current ? 'page' : undefined}>\n            {children}\n        </Link>\n    );\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,UAAU,EACtB,MACA,UAAU,OACV,YAMD;CACC,IAAI,SAAS,MACT,OAAO;CAEX,OACI,oBAAC,MAAD;EAAM,WAAWA,oBAAO;EAAY;EAAM,gBAAc,UAAU,SAAS,KAAA;EACtE;CACC,CAAA;AAEd"}

package/dist/layouts/TableLayout.css

@@ -27,6 +27,12 @@
     background-color: var(--panneau-color-surface-sunken);
 }
 
+/* The title stays readable in a narrow list, such as next to an item's details: the table
+ * scrolls instead. */
+.panneau-table-layout-table td.panneau-table-layout-title {
+    min-width: 12rem;
+}
+
 .panneau-table-layout-table tbody tr:last-child td {
     border-bottom: 0;
 }
@@ -35,6 +41,15 @@
     background-color: var(--panneau-color-accent-subtle);
 }
 
+/* The item shown next to the list: a bar on its first cell. */
+.panneau-table-layout-table tbody tr[data-current] td:first-child {
+    box-shadow: inset 3px 0 0 var(--panneau-color-accent);
+}
+
+.panneau-table-layout-table tbody tr[data-current] {
+    background-color: var(--panneau-color-hover);
+}
+
 .panneau-table-layout-center {
     text-align: center !important;
 }
@@ -161,6 +176,7 @@
 
     .panneau-table-layout-table td.panneau-table-layout-title {
         display: block;
+        min-width: 0;
         padding-inline-end: var(--panneau-space-10);
         font-weight: var(--panneau-font-weight-medium);
     }

package/dist/layouts/TableLayout.d.ts

@@ -5,5 +5,5 @@ export declare function getSortDirection(sort: readonly string[], column: ListCo
  * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a
  * block that shows the label of each value.
  */
-export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
+export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
 //# sourceMappingURL=TableLayout.d.ts.map

package/dist/layouts/TableLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AASD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAiHjB"}
+{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AASD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAsHjB"}

package/dist/layouts/TableLayout.js

@@ -22,8 +22,8 @@ function alignClass(column) {
 * block that shows the label of each value.
 */
 function TableLayout(t0) {
-	const $ = c(52);
-	const { items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection } = t0;
+	const $ = c(54);
+	const { items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection } = t0;
 	const intl = usePanneauIntl();
 	let actions;
 	let t1;
@@ -116,14 +116,16 @@ function TableLayout(t0) {
 		$[22] = t5;
 	} else t5 = $[22];
 	let t6;
-	if ($[23] !== actions || $[24] !== columns || $[25] !== getItemHref || $[26] !== getItemLabel || $[27] !== hasActions || $[28] !== intl || $[29] !== isSelected || $[30] !== items || $[31] !== onToggle || $[32] !== renderValue || $[33] !== selectable) {
+	if ($[23] !== actions || $[24] !== columns || $[25] !== getItemHref || $[26] !== getItemLabel || $[27] !== hasActions || $[28] !== intl || $[29] !== isCurrent || $[30] !== isSelected || $[31] !== items || $[32] !== onToggle || $[33] !== renderValue || $[34] !== selectable) {
 		let t7;
-		if ($[35] !== actions || $[36] !== columns || $[37] !== getItemHref || $[38] !== getItemLabel || $[39] !== hasActions || $[40] !== intl || $[41] !== isSelected || $[42] !== onToggle || $[43] !== renderValue || $[44] !== selectable) {
+		if ($[36] !== actions || $[37] !== columns || $[38] !== getItemHref || $[39] !== getItemLabel || $[40] !== hasActions || $[41] !== intl || $[42] !== isCurrent || $[43] !== isSelected || $[44] !== onToggle || $[45] !== renderValue || $[46] !== selectable) {
 			t7 = (item_0, row) => {
 				const selected = selectable && isSelected(item_0);
 				const href = getItemHref?.(item_0) ?? null;
+				const current = isCurrent?.(item_0) ?? false;
 				return /* @__PURE__ */ jsxs("tr", {
 					"data-selected": selected || void 0,
+					"data-current": current || void 0,
 					children: [
 						selectable ? /* @__PURE__ */ jsx("td", {
 							className: TableLayout_module_default.check,
@@ -140,6 +142,7 @@ function TableLayout(t0) {
 								children: column_0.label ?? column_0.id
 							}), /* @__PURE__ */ jsx("span", { children: index === 0 ? /* @__PURE__ */ jsx(ItemTitle, {
 								href,
+								current,
 								children: renderValue(item_0, column_0)
 							}) : renderValue(item_0, column_0) })]
 						}, column_0.id)),
@@ -150,18 +153,19 @@ function TableLayout(t0) {
 					]
 				}, item_0.id);
 			};
-			$[35] = actions;
-			$[36] = columns;
-			$[37] = getItemHref;
-			$[38] = getItemLabel;
-			$[39] = hasActions;
-			$[40] = intl;
-			$[41] = isSelected;
-			$[42] = onToggle;
-			$[43] = renderValue;
-			$[44] = selectable;
-			$[45] = t7;
-		} else t7 = $[45];
+			$[36] = actions;
+			$[37] = columns;
+			$[38] = getItemHref;
+			$[39] = getItemLabel;
+			$[40] = hasActions;
+			$[41] = intl;
+			$[42] = isCurrent;
+			$[43] = isSelected;
+			$[44] = onToggle;
+			$[45] = renderValue;
+			$[46] = selectable;
+			$[47] = t7;
+		} else t7 = $[47];
 		t6 = items.map(t7);
 		$[23] = actions;
 		$[24] = columns;
@@ -169,21 +173,22 @@ function TableLayout(t0) {
 		$[26] = getItemLabel;
 		$[27] = hasActions;
 		$[28] = intl;
-		$[29] = isSelected;
-		$[30] = items;
-		$[31] = onToggle;
-		$[32] = renderValue;
-		$[33] = selectable;
-		$[34] = t6;
-	} else t6 = $[34];
+		$[29] = isCurrent;
+		$[30] = isSelected;
+		$[31] = items;
+		$[32] = onToggle;
+		$[33] = renderValue;
+		$[34] = selectable;
+		$[35] = t6;
+	} else t6 = $[35];
 	let t7;
-	if ($[46] !== t6) {
+	if ($[48] !== t6) {
 		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
-		$[46] = t6;
-		$[47] = t7;
-	} else t7 = $[47];
+		$[48] = t6;
+		$[49] = t7;
+	} else t7 = $[49];
 	let t8;
-	if ($[48] !== label || $[49] !== t5 || $[50] !== t7) {
+	if ($[50] !== label || $[51] !== t5 || $[52] !== t7) {
 		t8 = /* @__PURE__ */ jsx("div", {
 			className: TableLayout_module_default.scroller,
 			children: /* @__PURE__ */ jsxs("table", {
@@ -192,11 +197,11 @@ function TableLayout(t0) {
 				children: [t5, t7]
 			})
 		});
-		$[48] = label;
-		$[49] = t5;
-		$[50] = t7;
-		$[51] = t8;
-	} else t8 = $[51];
+		$[50] = label;
+		$[51] = t5;
+		$[52] = t7;
+		$[53] = t8;
+	} else t8 = $[53];
 	return t8;
 }
 function _temp(node) {