@panneau/lists 5.0.0-alpha.1 → 5.0.0-alpha.11

package/dist/actions/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","names":[],"sources":["../../src/actions/actions.ts"],"sourcesContent":["import { canRunAction, groupActions } from '@panneau/core';\nimport type { Action, ActionPlacement } from '@panneau/protocol';\n\nimport type { ListItem } from '../types';\n\n/** Actions of a list: a list (grouped by their placements), or already grouped by placement. */\nexport type ListActions = readonly Action[] | Partial<Record<ActionPlacement, readonly Action[]>>;\n\n/**\n * Groups actions by placement, without those the user can't run on the resource\n * (`abilities.run`). Actions already grouped (as `resolveList()` does) are filtered the same way.\n */\nexport function groupListActions(\n    actions: ListActions | undefined,\n): Record<ActionPlacement, Action[]> {\n    if (actions === undefined) {\n        return { row: [], toolbar: [], form: [], menu: [] };\n    }\n    if (isActionList(actions)) {\n        return groupActions(actions);\n    }\n    const pick = (placement: ActionPlacement) => (actions[placement] ?? []).filter(canRunAction);\n    return { row: pick('row'), toolbar: pick('toolbar'), form: pick('form'), menu: pick('menu') };\n}\n\nfunction isActionList(actions: ListActions): actions is readonly Action[] {\n    return Array.isArray(actions);\n}\n\n/**\n * Whether an action is available on an item (decision 0011). Without abilities, the item allows\n * everything and the backend decides. With abilities, a link is allowed unless the item says\n * otherwise, and other actions only when the item lists their id.\n */\nexport function isAllowedOn(action: Action, item: ListItem): boolean {\n    if (!canRunAction(action)) {\n        return false;\n    }\n    if (item.abilities === undefined) {\n        return true;\n    }\n    if (action.kind === 'link') {\n        return item.abilities[action.id] !== false;\n    }\n    return item.abilities[action.id] === true;\n}\n\n/**\n * The link of a `link` action for an item: its `url` template with `{id}` (and other `{field}`\n * values of the item) filled in, or `null` for an action with a `route` or without an item.\n */\nexport function getActionHref(action: Action, item?: ListItem): string | null {\n    if (action.kind !== 'link' || action.url === undefined) {\n        return null;\n    }\n    const { url } = action;\n    return url.replace(/\\{([^}]+)\\}/g, (match, name: string) => {\n        const value = item?.[name];\n        return typeof value === 'string' || typeof value === 'number'\n            ? encodeURIComponent(String(value))\n            : match;\n    });\n}\n\n/** Whether an action's scope includes another one. */\nexport function hasScope(action: Action, scope: Action['scope'][number]): boolean {\n    return action.scope.includes(scope);\n}\n"],"mappings":";;;;;;AAYA,SAAgB,iBACZ,SACiC;CACjC,IAAI,YAAY,KAAA,GACZ,OAAO;EAAE,KAAK,CAAA;EAAI,SAAS,CAAA;EAAI,MAAM,CAAA;EAAI,MAAM,CAAA;CAAG;CAEtD,IAAI,aAAa,OAAO,GACpB,OAAO,aAAa,OAAO;CAE/B,MAAM,QAAQ,eAAgC,QAAQ,cAAc,CAAA,EAAA,CAAI,OAAO,YAAY;CAC3F,OAAO;EAAE,KAAK,KAAK,KAAK;EAAG,SAAS,KAAK,SAAS;EAAG,MAAM,KAAK,MAAM;EAAG,MAAM,KAAK,MAAM;CAAE;AAChG;AAEA,SAAS,aAAa,SAAoD;CACtE,OAAO,MAAM,QAAQ,OAAO;AAChC;;;;;;AAOA,SAAgB,YAAY,QAAgB,MAAyB;CACjE,IAAI,CAAC,aAAa,MAAM,GACpB,OAAO;CAEX,IAAI,KAAK,cAAc,KAAA,GACnB,OAAO;CAEX,IAAI,OAAO,SAAS,QAChB,OAAO,KAAK,UAAU,OAAO,QAAQ;CAEzC,OAAO,KAAK,UAAU,OAAO,QAAQ;AACzC;;;;;AAMA,SAAgB,cAAc,QAAgB,MAAgC;CAC1E,IAAI,OAAO,SAAS,UAAU,OAAO,QAAQ,KAAA,GACzC,OAAO;CAEX,MAAM,EAAE,QAAQ;CAChB,OAAO,IAAI,QAAQ,iBAAiB,OAAO,SAAiB;EACxD,MAAM,QAAQ,OAAO;EACrB,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,WAC/C,mBAAmB,OAAO,KAAK,CAAC,IAChC;CACV,CAAC;AACL;;AAGA,SAAgB,SAAS,QAAgB,OAAyC;CAC9E,OAAO,OAAO,MAAM,SAAS,KAAK;AACtC"}
+{"version":3,"file":"actions.js","names":["canRunAction","fillActionUrl","groupActions","isActionAllowedOn","Action","ActionPlacement","ListItem","ListActions","Partial","Record","groupListActions","actions","undefined","row","toolbar","form","menu","isActionList","pick","placement","filter","Array","isArray","isAllowedOn","action","item","getActionHref","hasScope","scope","includes"],"sources":["../../src/actions/actions.ts"],"sourcesContent":["import { canRunAction, fillActionUrl, groupActions, isActionAllowedOn } from '@panneau/core';\nimport type { Action, ActionPlacement } from '@panneau/protocol';\n\nimport type { ListItem } from '../types';\n\n/** Actions of a list: a list (grouped by their placements), or already grouped by placement. */\nexport type ListActions = readonly Action[] | Partial<Record<ActionPlacement, readonly Action[]>>;\n\n/**\n * Groups actions by placement, without those the user can't run on the resource\n * (`abilities.run`). Actions already grouped (as `resolveList()` does) are filtered the same way.\n */\nexport function groupListActions(\n    actions: ListActions | undefined,\n): Record<ActionPlacement, Action[]> {\n    if (actions === undefined) {\n        return { row: [], toolbar: [], form: [], menu: [] };\n    }\n    if (isActionList(actions)) {\n        return groupActions(actions);\n    }\n    const pick = (placement: ActionPlacement) => (actions[placement] ?? []).filter(canRunAction);\n    return { row: pick('row'), toolbar: pick('toolbar'), form: pick('form'), menu: pick('menu') };\n}\n\nfunction isActionList(actions: ListActions): actions is readonly Action[] {\n    return Array.isArray(actions);\n}\n\n/**\n * Whether an action is available on an item (decisions 0011 and 0040), as `isActionAllowedOn()`\n * of `@panneau/core` says: the built-in item actions need their ability (`view`, `update`,\n * `duplicate`, `delete`), even on an item without abilities. Other links are allowed unless the\n * item says otherwise, and other actions when the item lists their id, or has no abilities.\n */\nexport function isAllowedOn(action: Action, item: ListItem): boolean {\n    return isActionAllowedOn(action, item);\n}\n\n/**\n * The link of a `link` action for an item: its `url` template with `{id}` (and other `{field}`\n * values of the item) filled in, or `null` for an action with a `route` or without an item.\n */\nexport function getActionHref(action: Action, item?: ListItem): string | null {\n    return fillActionUrl(action, item);\n}\n\n/** Whether an action's scope includes another one. */\nexport function hasScope(action: Action, scope: Action['scope'][number]): boolean {\n    return action.scope.includes(scope);\n}\n"],"mappings":";;;;;;AAYA,SAAgBU,iBACZC,SACiC;CACjC,IAAIA,YAAYC,KAAAA,GACZ,OAAO;EAAEC,KAAK,CAAA;EAAIC,SAAS,CAAA;EAAIC,MAAM,CAAA;EAAIC,MAAM,CAAA;CAAG;CAEtD,IAAIC,aAAaN,OAAO,GACpB,OAAOT,aAAaS,OAAO;CAE/B,MAAMO,QAAQC,eAAgCR,QAAQQ,cAAc,CAAA,EAAA,CAAIC,OAAOpB,YAAY;CAC3F,OAAO;EAAEa,KAAKK,KAAK,KAAK;EAAGJ,SAASI,KAAK,SAAS;EAAGH,MAAMG,KAAK,MAAM;EAAGF,MAAME,KAAK,MAAM;CAAE;AAChG;AAEA,SAASD,aAAaN,SAAoD;CACtE,OAAOU,MAAMC,QAAQX,OAAO;AAChC;;;;;;;AAQA,SAAgBY,YAAYC,QAAgBC,MAAyB;CACjE,OAAOtB,kBAAkBqB,QAAQC,IAAI;AACzC;;;;;AAMA,SAAgBC,cAAcF,QAAgBC,MAAgC;CAC1E,OAAOxB,cAAcuB,QAAQC,IAAI;AACrC;;AAGA,SAAgBE,SAASH,QAAgBI,OAAyC;CAC9E,OAAOJ,OAAOI,MAAMC,SAASD,KAAK;AACtC"}

package/dist/actions/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","names":[],"sources":["../../src/actions/icons.ts"],"sourcesContent":["import {\n    Copy,\n    Download,\n    Eye,\n    type LucideIcon,\n    Pencil,\n    RotateCcw,\n    Trash2,\n    Upload,\n} from 'lucide-react';\n\nimport type { Action } from '@panneau/protocol';\nimport { type IconComponent, getNamedIcon } from '@panneau/ui';\n\n/** Icons of actions by action id, for actions written in code (`{ archive: Archive }`). */\nexport type ActionIcons = Readonly<Record<string, IconComponent>>;\n\n/** Icons of the built-in actions, when they don't name one. */\nconst BUILT_IN_ICONS: Record<string, LucideIcon> = {\n    show: Eye,\n    edit: Pencil,\n    duplicate: Copy,\n    delete: Trash2,\n    restore: RotateCcw,\n    export: Download,\n    import: Upload,\n};\n\n/**\n * The icon of an action: the one given for its id in `icons`, then the Lucide icon its `icon`\n * names (`\"send\"`, loaded when it first renders), then the icon of a built-in action.\n */\nexport function getActionIcon(action: Action, icons?: ActionIcons): IconComponent | undefined {\n    const given =\n        icons !== undefined && Object.hasOwn(icons, action.id) ? icons[action.id] : undefined;\n    if (given !== undefined) {\n        return given;\n    }\n    if (action.icon !== undefined && action.icon !== '') {\n        return getNamedIcon(action.icon);\n    }\n    return Object.hasOwn(BUILT_IN_ICONS, action.id) ? BUILT_IN_ICONS[action.id] : undefined;\n}\n"],"mappings":";;;;AAkBA,IAAM,iBAA6C;CAC/C,MAAM;CACN,MAAM;CACN,WAAW;CACX,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,QAAQ;AACZ;;;;;AAMA,SAAgB,cAAc,QAAgB,OAAgD;CAC1F,MAAM,QACF,UAAU,KAAA,KAAa,OAAO,OAAO,OAAO,OAAO,EAAE,IAAI,MAAM,OAAO,MAAM,KAAA;CAChF,IAAI,UAAU,KAAA,GACV,OAAO;CAEX,IAAI,OAAO,SAAS,KAAA,KAAa,OAAO,SAAS,IAC7C,OAAO,aAAa,OAAO,IAAI;CAEnC,OAAO,OAAO,OAAO,gBAAgB,OAAO,EAAE,IAAI,eAAe,OAAO,MAAM,KAAA;AAClF"}
+{"version":3,"file":"icons.js","names":["Copy","Download","Eye","LucideIcon","Pencil","RotateCcw","Trash2","Upload","Action","IconComponent","getNamedIcon","ActionIcons","Readonly","Record","BUILT_IN_ICONS","show","edit","duplicate","delete","restore","export","import","getActionIcon","action","icons","given","undefined","Object","hasOwn","id","icon"],"sources":["../../src/actions/icons.ts"],"sourcesContent":["import {\n    Copy,\n    Download,\n    Eye,\n    type LucideIcon,\n    Pencil,\n    RotateCcw,\n    Trash2,\n    Upload,\n} from 'lucide-react';\n\nimport type { Action } from '@panneau/protocol';\nimport { type IconComponent, getNamedIcon } from '@panneau/ui';\n\n/** Icons of actions by action id, for actions written in code (`{ archive: Archive }`). */\nexport type ActionIcons = Readonly<Record<string, IconComponent>>;\n\n/** Icons of the built-in actions, when they don't name one. */\nconst BUILT_IN_ICONS: Record<string, LucideIcon> = {\n    show: Eye,\n    edit: Pencil,\n    duplicate: Copy,\n    delete: Trash2,\n    restore: RotateCcw,\n    export: Download,\n    import: Upload,\n};\n\n/**\n * The icon of an action: the one given for its id in `icons`, then the Lucide icon its `icon`\n * names (`\"send\"`, loaded when it first renders), then the icon of a built-in action.\n */\nexport function getActionIcon(action: Action, icons?: ActionIcons): IconComponent | undefined {\n    const given =\n        icons !== undefined && Object.hasOwn(icons, action.id) ? icons[action.id] : undefined;\n    if (given !== undefined) {\n        return given;\n    }\n    if (action.icon !== undefined && action.icon !== '') {\n        return getNamedIcon(action.icon);\n    }\n    return Object.hasOwn(BUILT_IN_ICONS, action.id) ? BUILT_IN_ICONS[action.id] : undefined;\n}\n"],"mappings":";;;;AAkBA,IAAMc,iBAA6C;CAC/CC,MAAMb;CACNc,MAAMZ;CACNa,WAAWjB;CACXkB,QAAQZ;CACRa,SAASd;CACTe,QAAQnB;CACRoB,QAAQd;AACZ;;;;;AAMA,SAAgBe,cAAcC,QAAgBC,OAAgD;CAC1F,MAAMC,QACFD,UAAUE,KAAAA,KAAaC,OAAOC,OAAOJ,OAAOD,OAAOM,EAAE,IAAIL,MAAMD,OAAOM,MAAMH,KAAAA;CAChF,IAAID,UAAUC,KAAAA,GACV,OAAOD;CAEX,IAAIF,OAAOO,SAASJ,KAAAA,KAAaH,OAAOO,SAAS,IAC7C,OAAOpB,aAAaa,OAAOO,IAAI;CAEnC,OAAOH,OAAOC,OAAOd,gBAAgBS,OAAOM,EAAE,IAAIf,eAAeS,OAAOM,MAAMH,KAAAA;AAClF"}

package/dist/cx.js.map

@@ -1 +1 @@
-{"version":3,"file":"cx.js","names":[],"sources":["../src/cx.ts"],"sourcesContent":["/** Joins class names, skipping empty ones. */\nexport function cx(...classNames: (string | false | null | undefined)[]): string {\n    return classNames.filter(Boolean).join(' ');\n}\n"],"mappings":";;AACA,SAAgB,GAAG,GAAG,YAA2D;CAC7E,OAAO,WAAW,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC9C"}
+{"version":3,"file":"cx.js","names":["cx","classNames","filter","Boolean","join"],"sources":["../src/cx.ts"],"sourcesContent":["/** Joins class names, skipping empty ones. */\nexport function cx(...classNames: (string | false | null | undefined)[]): string {\n    return classNames.filter(Boolean).join(' ');\n}\n"],"mappings":";;AACA,SAAgBA,GAAG,GAAGC,YAA2D;CAC7E,OAAOA,WAAWC,OAAOC,OAAO,CAAC,CAACC,KAAK,GAAG;AAC9C"}

package/dist/displays/Displays.css

@@ -1,8 +1,8 @@
-.panneau-empty-xEtZBq {
+.panneau-displays-empty {
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-text-vty-EA {
+.panneau-displays-text {
     display: -webkit-box;
     overflow: hidden;
     -webkit-line-clamp: 2;
@@ -11,35 +11,35 @@
     overflow-wrap: anywhere;
 }
 
-.panneau-badges-2n5UJa {
+.panneau-displays-badges {
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--panneau-space-1);
 }
 
-.panneau-boolean-vvV7kf {
+.panneau-displays-boolean {
     display: inline-flex;
     align-items: center;
 }
 
-.panneau-true-Iu6Hsd {
+.panneau-displays-true {
     color: var(--panneau-color-success);
 }
 
-.panneau-false-zp5WgH {
+.panneau-displays-false {
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-number-yfICs7 {
-    font-variant-numeric: tabular-nums;
+.panneau-displays-number {
+    font-variant-numeric: var(--panneau-font-numeric);
 }
 
-.panneau-link-nvMTOa {
+.panneau-displays-link {
     color: var(--panneau-color-link);
     overflow-wrap: anywhere;
 }
 
-.panneau-color-kkWQ1L {
+.panneau-displays-color {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-2);
@@ -47,7 +47,7 @@
     font-size: var(--panneau-font-size-sm);
 }
 
-.panneau-swatch-50Qwvv {
+.panneau-displays-swatch {
     flex: none;
     width: 1rem;
     height: 1rem;
@@ -55,13 +55,13 @@
     border-radius: var(--panneau-radius-sm);
 }
 
-.panneau-media-EOUwYg {
+.panneau-displays-media {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-2);
 }
 
-.panneau-thumbnail-WgBzFY {
+.panneau-displays-thumbnail {
     flex: none;
     width: 2.5rem;
     height: 2.5rem;
@@ -69,3 +69,15 @@
     background-color: var(--panneau-color-surface-sunken);
     border-radius: var(--panneau-radius-sm);
 }
+
+.panneau-displays-code {
+    font-family: var(--panneau-font-family-mono);
+    font-size: var(--panneau-font-size-sm);
+    white-space: nowrap;
+}
+
+.panneau-displays-tags {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-1);
+}

package/dist/displays/Displays.module.js

@@ -1,30 +1,34 @@
 import "./Displays.css";
 //#region src/displays/Displays.module.css
-var empty = "panneau-empty-xEtZBq";
-var text = "panneau-text-vty-EA";
-var badges = "panneau-badges-2n5UJa";
-var boolean = "panneau-boolean-vvV7kf";
-var number = "panneau-number-yfICs7";
-var link = "panneau-link-nvMTOa";
-var color = "panneau-color-kkWQ1L";
-var swatch = "panneau-swatch-50Qwvv";
-var media = "panneau-media-EOUwYg";
-var thumbnail = "panneau-thumbnail-WgBzFY";
+var empty = "panneau-displays-empty";
+var text = "panneau-displays-text";
+var badges = "panneau-displays-badges";
+var boolean = "panneau-displays-boolean";
+var number = "panneau-displays-number";
+var link = "panneau-displays-link";
+var color = "panneau-displays-color";
+var swatch = "panneau-displays-swatch";
+var media = "panneau-displays-media";
+var thumbnail = "panneau-displays-thumbnail";
+var code = "panneau-displays-code";
+var tags = "panneau-displays-tags";
 var Displays_module_default = {
 	empty,
 	text,
 	badges,
 	boolean,
-	"true": "panneau-true-Iu6Hsd",
-	"false": "panneau-false-zp5WgH",
+	"true": "panneau-displays-true",
+	"false": "panneau-displays-false",
 	number,
 	link,
 	color,
 	swatch,
 	media,
-	thumbnail
+	thumbnail,
+	code,
+	tags
 };
 //#endregion
-export { badges, boolean, color, Displays_module_default as default, empty, link, media, number, swatch, text, thumbnail };
+export { badges, boolean, code, color, Displays_module_default as default, empty, link, media, number, swatch, tags, text, thumbnail };
 
 //# sourceMappingURL=Displays.module.js.map

package/dist/displays/Displays.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Displays.module.js","names":[],"sources":["../../src/displays/Displays.module.css"],"sourcesContent":[".empty {\n    color: var(--panneau-color-text-muted);\n}\n\n.text {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow-wrap: anywhere;\n}\n\n.badges {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n.boolean {\n    display: inline-flex;\n    align-items: center;\n}\n\n.true {\n    color: var(--panneau-color-success);\n}\n\n.false {\n    color: var(--panneau-color-text-muted);\n}\n\n.number {\n    font-variant-numeric: tabular-nums;\n}\n\n.link {\n    color: var(--panneau-color-link);\n    overflow-wrap: anywhere;\n}\n\n.color {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.swatch {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.media {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.thumbnail {\n    flex: none;\n    width: 2.5rem;\n    height: 2.5rem;\n    object-fit: cover;\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n"],"mappings":""}
+{"version":3,"file":"Displays.module.js","names":[],"sources":["../../src/displays/Displays.module.css"],"sourcesContent":[".empty {\n    color: var(--panneau-color-text-muted);\n}\n\n.text {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow-wrap: anywhere;\n}\n\n.badges {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n.boolean {\n    display: inline-flex;\n    align-items: center;\n}\n\n.true {\n    color: var(--panneau-color-success);\n}\n\n.false {\n    color: var(--panneau-color-text-muted);\n}\n\n.number {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.link {\n    color: var(--panneau-color-link);\n    overflow-wrap: anywhere;\n}\n\n.color {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.swatch {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.media {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.thumbnail {\n    flex: none;\n    width: 2.5rem;\n    height: 2.5rem;\n    object-fit: cover;\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.code {\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n    white-space: nowrap;\n}\n\n.tags {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n"],"mappings":""}

package/dist/displays/displays.d.ts

@@ -1,8 +1,11 @@
-import type { DisplayEntry, DisplayProps } from '../types';
+import type { DisplayEntry, DisplayProps } from '../types.js';
 /** What a cell shows without a value. Hidden from assistive technologies, which skip the cell. */
 export declare function EmptyValue(): import("react").JSX.Element;
-/** Text, on two lines at most. The default display. */
-export declare function TextDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/**
+ * Text, on two lines at most. The default display. The value of a `secret` text field
+ * (`settings.secret`) shows as dots, never in clear.
+ */
+export declare function TextDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
 /** HTML as plain text. */
 export declare function RichTextDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A number, in the format of the locale. */
@@ -23,6 +26,18 @@ export declare function RelationDisplay({ value }: DisplayProps): import("react"
 export declare function UrlDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A link that writes an email. */
 export declare function EmailDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/** A link that calls the phone number. */
+export declare function TelDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/** A duration in seconds, with its units: `1 h 5 min`, to the precision of its field. */
+export declare function DurationDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
+/** JSON on one line, shortened. */
+export declare function JsonDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/** Tags, as badges, with the labels of their options. */
+export declare function TagsDisplay({ value, field }: DisplayProps): import("react").JSX.Element;
+/** What a URL embeds: its thumbnail and title, linked to it. */
+export declare function EmbedDisplay({ value }: DisplayProps): import("react").JSX.Element;
+/** A place: its address, or its coordinates. */
+export declare function LocationDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A swatch, with the color's code. */
 export declare function ColorDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /** A thumbnail and the name of a media item (or of the first one). */

package/dist/displays/displays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"displays.d.ts","sourceRoot":"","sources":["../../src/displays/displays.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,kGAAkG;AAClG,wBAAgB,UAAU,gCAMzB;AAWD,uDAAuD;AACvD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAIlD;AAED,0BAA0B;AAC1B,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAStD;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQpD;AAED,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAcrD;AAkBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOlD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAWtD;AAED,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQlD;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAa3D;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUtD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASnD;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUnD;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAenD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAgBlE,CAAC"}
+{"version":3,"file":"displays.d.ts","sourceRoot":"","sources":["../../src/displays/displays.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,kGAAkG;AAClG,wBAAgB,UAAU,gCAMzB;AAWD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAczD;AAED,0BAA0B;AAC1B,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAStD;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQpD;AAED,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAcrD;AAkBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOlD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAWtD;AAED,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQlD;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkB3D;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUtD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASnD;AAED,0CAA0C;AAC1C,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,yFAAyF;AACzF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAM7D;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUlD;AAED,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAezD;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAuBnD;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkBtD;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUnD;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAenD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAuBlE,CAAC"}

package/dist/displays/displays.js

@@ -1,11 +1,12 @@
 import { messages } from "../messages.js";
-import { getFieldOptions, getOptionLabel, toText } from "../values.js";
+import { findOption, getFieldOptions, toText } from "../values.js";
 import Displays_module_default from "./Displays.module.js";
 import { c } from "react/compiler-runtime";
 import { Badge, Icon, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Minus } from "lucide-react";
 import { toReferences } from "@panneau/fields";
+import { formatDuration } from "@panneau/fields/duration";
 //#region src/displays/displays.tsx
 /** What a cell shows without a value. Hidden from assistive technologies, which skip the cell. */
 function EmptyValue() {
@@ -24,10 +25,13 @@ function EmptyValue() {
 function isEmpty(value) {
 	return value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
 }
-/** Text, on two lines at most. The default display. */
+/**
+* Text, on two lines at most. The default display. The value of a `secret` text field
+* (`settings.secret`) shows as dots, never in clear.
+*/
 function TextDisplay(t0) {
-	const $ = c(5);
-	const { value } = t0;
+	const $ = c(10);
+	const { value, field } = t0;
 	const intl = usePanneauIntl();
 	let t1;
 	if ($[0] !== intl.locale || $[1] !== value) {
@@ -37,15 +41,42 @@ function TextDisplay(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const text = t1;
+	if (text === "") {
+		let t2;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	if (field?.settings?.secret === true) {
+		let t2;
+		if ($[4] !== intl) {
+			t2 = intl.formatMessage(messages.secretValue);
+			$[4] = intl;
+			$[5] = t2;
+		} else t2 = $[5];
+		let t3;
+		if ($[6] !== t2) {
+			t3 = /* @__PURE__ */ jsx("span", {
+				role: "img",
+				"aria-label": t2,
+				children: "••••••••"
+			});
+			$[6] = t2;
+			$[7] = t3;
+		} else t3 = $[7];
+		return t3;
+	}
 	let t2;
-	if ($[3] !== text) {
-		t2 = text === "" ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsx("span", {
+	if ($[8] !== text) {
+		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
 			children: text
 		});
-		$[3] = text;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[8] = text;
+		$[9] = t2;
+	} else t2 = $[9];
 	return t2;
 }
 /** HTML as plain text. */
@@ -324,7 +355,13 @@ function SelectDisplay(t0) {
 				break bb0;
 			}
 			t1 = Displays_module_default.badges;
-			t2 = values.map((entry) => /* @__PURE__ */ jsx(Badge, { children: getOptionLabel(options, entry) ?? String(entry) }, String(entry)));
+			t2 = values.map((entry) => {
+				const option = findOption(options, entry);
+				return /* @__PURE__ */ jsx(Badge, {
+					tone: option?.tone ?? "neutral",
+					children: option?.label ?? String(entry)
+				}, String(entry));
+			});
 		}
 		$[0] = field;
 		$[1] = value;
@@ -461,6 +498,305 @@ function EmailDisplay(t0) {
 	} else t2 = $[3];
 	return t2;
 }
+/** A link that calls the phone number. */
+function TelDisplay(t0) {
+	const $ = c(7);
+	const { value } = t0;
+	if (typeof value !== "string" || value.trim() === "") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	if ($[1] !== value) {
+		let t2;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /[^\d+]/g;
+			$[3] = t2;
+		} else t2 = $[3];
+		t1 = value.replace(t2, "");
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = `tel:${t1}`;
+	let t3;
+	if ($[4] !== t2 || $[5] !== value) {
+		t3 = /* @__PURE__ */ jsx("a", {
+			className: Displays_module_default.link,
+			href: t2,
+			children: value
+		});
+		$[4] = t2;
+		$[5] = value;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/** A duration in seconds, with its units: `1 h 5 min`, to the precision of its field. */
+function DurationDisplay(t0) {
+	const $ = c(6);
+	const { value, field } = t0;
+	if (typeof value !== "number" || Number.isNaN(value)) {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	const precision = field?.settings?.precision === "minutes" ? "minutes" : "seconds";
+	let t1;
+	if ($[1] !== precision || $[2] !== value) {
+		t1 = formatDuration(value, { precision });
+		$[1] = precision;
+		$[2] = value;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.number,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+/** JSON on one line, shortened. */
+function JsonDisplay(t0) {
+	const $ = c(9);
+	const { value } = t0;
+	if (value === null || value === void 0 || typeof value !== "object") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	let t2;
+	let t3;
+	if ($[1] !== value) {
+		const json = JSON.stringify(value);
+		t1 = Displays_module_default.code;
+		t2 = json.length > 80 ? json : void 0;
+		t3 = json.length > 80 ? `${json.slice(0, 79)}…` : json;
+		$[1] = value;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	let t4;
+	if ($[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx("code", {
+			className: t1,
+			title: t2,
+			children: t3
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+/** Tags, as badges, with the labels of their options. */
+function TagsDisplay(t0) {
+	const $ = c(13);
+	const { value, field } = t0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== field?.options || $[1] !== value) {
+		t3 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const tags = Array.isArray(value) ? value.filter(_temp2) : [];
+			if (tags.length === 0) {
+				let t4;
+				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[5] = t4;
+				} else t4 = $[5];
+				t3 = t4;
+				break bb0;
+			}
+			let t4;
+			if ($[6] !== field?.options) {
+				t4 = field?.options ?? [];
+				$[6] = field?.options;
+				$[7] = t4;
+			} else t4 = $[7];
+			const options = t4;
+			t1 = Displays_module_default.tags;
+			let t5;
+			if ($[8] !== options) {
+				t5 = (tag_0) => /* @__PURE__ */ jsx(Badge, { children: options.find((option) => String(option.value) === tag_0)?.label ?? tag_0 }, tag_0);
+				$[8] = options;
+				$[9] = t5;
+			} else t5 = $[9];
+			t2 = tags.map(t5);
+		}
+		$[0] = field?.options;
+		$[1] = value;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
+	let t4;
+	if ($[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t2
+		});
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+/** What a URL embeds: its thumbnail and title, linked to it. */
+function _temp2(tag) {
+	return typeof tag === "string";
+}
+function EmbedDisplay(t0) {
+	const $ = c(12);
+	const { value } = t0;
+	if (value === null || typeof value !== "object" || typeof value.url !== "string") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	const { url, title, thumbnailUrl } = value;
+	let t1;
+	if ($[1] !== thumbnailUrl) {
+		t1 = typeof thumbnailUrl === "string" ? /* @__PURE__ */ jsx("img", {
+			className: Displays_module_default.thumbnail,
+			src: thumbnailUrl,
+			alt: ""
+		}) : null;
+		$[1] = thumbnailUrl;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== title || $[4] !== url) {
+		t2 = typeof title === "string" ? title : url.replace(/^https?:\/\//, "");
+		$[3] = title;
+		$[4] = url;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3 || $[10] !== url) {
+		t4 = /* @__PURE__ */ jsxs("a", {
+			className: `${Displays_module_default.link} ${Displays_module_default.media}`,
+			href: url,
+			target: "_blank",
+			rel: "noreferrer",
+			children: [t1, t3]
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = url;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+/** A place: its address, or its coordinates. */
+function LocationDisplay(t0) {
+	const $ = c(15);
+	const { value } = t0;
+	const intl = usePanneauIntl();
+	if (value === null || typeof value !== "object") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	const { lat, lng, address } = value;
+	if (typeof address === "string" && address !== "") {
+		let t1;
+		if ($[1] !== address) {
+			t1 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				children: address
+			});
+			$[1] = address;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	if (typeof lat !== "number" || typeof lng !== "number") {
+		let t1;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	let t1;
+	if ($[4] !== intl) {
+		t1 = (number) => intl.formatNumber(number, { maximumFractionDigits: 5 });
+		$[4] = intl;
+		$[5] = t1;
+	} else t1 = $[5];
+	const format = t1;
+	let t2;
+	if ($[6] !== format || $[7] !== lat) {
+		t2 = format(lat);
+		$[6] = format;
+		$[7] = lat;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== format || $[10] !== lng) {
+		t3 = format(lng);
+		$[9] = format;
+		$[10] = lng;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.number,
+			children: [
+				t2,
+				", ",
+				t3
+			]
+		});
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+}
 /** A swatch, with the color's code. */
 function ColorDisplay(t0) {
 	const $ = c(6);
@@ -562,9 +898,16 @@ var builtInDisplays = {
 	url: UrlDisplay,
 	email: EmailDisplay,
 	color: ColorDisplay,
-	media: MediaDisplay
+	media: MediaDisplay,
+	tel: TelDisplay,
+	range: NumberDisplay,
+	duration: DurationDisplay,
+	json: JsonDisplay,
+	tags: TagsDisplay,
+	embed: EmbedDisplay,
+	location: LocationDisplay
 };
 //#endregion
-export { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, EmailDisplay, EmptyValue, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
+export { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, JsonDisplay, LocationDisplay, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
 
 //# sourceMappingURL=displays.js.map