@k2b/ui 0.33.0 → 0.34.0

package/dist/ssr/content/FileGrid.js

@@ -1,21 +1,56 @@
+import { memo as _$memo } from "solid-js/web";
 import { ssrElement as _$ssrElement } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 var _tmpl$ = ["<div class=\"", "\"", " role=\"grid\"", ">", "</div>"],
   _tmpl$2 = ["<div class=\"k2b-file-grid__preview\">", "</div>"],
   _tmpl$3 = ["<div class=\"k2b-file-grid__name\">", "</div>"],
   _tmpl$4 = ["<div class=\"k2b-file-grid__meta\">", "</div>"],
   _tmpl$5 = ["<div class=\"k2b-file-grid__actions\">", "</div>"],
-  _tmpl$6 = ["<div role=\"row\" class=\"k2b-file-grid__row\">", "</div>"];
-import { For } from "solid-js";
+  _tmpl$6 = ["<div role=\"row\" class=\"k2b-file-grid__row\">", "</div>"],
+  _tmpl$7 = ["<div class=\"", "\"", " data-open-items=\"true\" role=\"list\"", ">", "</div>"],
+  _tmpl$8 = ["<button type=\"button\" class=\"k2b-file-grid__open\" aria-labelledby=\"", "\"", "></button>"],
+  _tmpl$9 = ["<div class=\"k2b-file-grid__name\" id=\"", "\">", "</div>"],
+  _tmpl$0 = ["<div class=\"k2b-file-grid__meta\" id=\"", "\">", "</div>"],
+  _tmpl$1 = ["<div role=\"listitem\" class=\"k2b-file-grid__row\">", "</div>"],
+  _tmpl$10 = ["<div class=\"k2b-file-grid-stack__toolbar\">", "</div>"],
+  _tmpl$11 = ["<button type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"true\"><span>", "</span><i class=\"ti ti-chevron-up\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$12 = ["<div class=\"k2b-file-grid-stack\"", ">", "", "", "</div>"],
+  _tmpl$13 = ["<div class=\"k2b-file-grid-stack__group\"><div class=\"k2b-file-grid-stack__label\"", ">", "<span class=\"k2b-file-grid-stack__count\">", "</span></div>", "</div>"],
+  _tmpl$14 = ["<span class=\"k2b-file-grid-stack__more-meta\">", "</span>"],
+  _tmpl$15 = ["<button type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"false\"><span>", "</span><i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i>", "</button>"];
+import { createEffect, createMemo, createSignal, createUniqueId, For, Index, on, Show } from "solid-js";
+import { useFileListMessages } from "./file-list-messages";
+
+/** One part of an open file list, such as its files as rows and its images as tiles. */
+
+/** A browser or picker: items are selected, and Enter or a double click opens them. */
+
+/** A list without selection, as in a details panel: one click on an item opens it. */
+
 /**
  * File presentation only; the host owns data, menus, leases and permissions. Items the selection marks with
  * `isDisabled` stay reachable by keyboard but cannot be selected or opened; say why in `renderMeta`.
  */
 export function FileGrid(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.selection;
+    },
+    get fallback() {
+      return _$createComponent(OpenFileGrid, props);
+    },
+    children: selection => _$createComponent(SelectableFileGrid, _$mergeProps(props, {
+      get selection() {
+        return selection();
+      }
+    }))
+  });
+}
+function SelectableFileGrid(props) {
   let grid;
   // Both clicks of a double-click belong to the item that took the first one. When that click replaced the rows,
   // for example by opening a folder, the item now under the pointer ignores the rest of the gesture.
@@ -26,7 +61,7 @@ export function FileGrid(props) {
   };
   const columns = () => grid ? Math.max(1, getComputedStyle(grid).gridTemplateColumns.split(" ").length) : 1;
   const nested = event => event.target instanceof Element && !!event.target.closest("button,a,input,label,select,textarea,summary,[contenteditable],[role=button],[role=menu]");
-  return _$ssr(_tmpl$, `k2b-file-grid ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-layout", _$escape(props.layout ?? "grid", true), false), _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("aria-multiselectable", _$escape(props.selection.multiple, true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$, `k2b-file-grid ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-layout", _$escape(props.layout ?? "grid", true), false) + _$ssrAttribute("data-action-visibility", _$escape(props.actionVisibility ?? "always", true), false), _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("aria-multiselectable", _$escape(props.selection.multiple, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.rows;
     },
@@ -49,4 +84,96 @@ export function FileGrid(props) {
     }
   })));
 }
+function OpenFileGrid(props) {
+  const messages = useFileListMessages();
+  const [ownExpanded, setOwnExpanded] = createSignal(false);
+  const limited = () => props.limit !== undefined && props.rows.length > props.limit;
+  // Without a limit the list is always complete, so its toolbar and groups always apply.
+  const full = () => props.limit === undefined || limited() && (props.expanded ?? ownExpanded());
+  let more;
+  let less;
+  let moveFocus = false;
+  const toggle = next => {
+    moveFocus = true;
+    if (props.expanded === undefined) setOwnExpanded(next);
+    props.onExpandedChange?.(next);
+  };
+  // The pressed button leaves with the state it showed; once the new state is there, focus moves to its
+  // counterpart, also when a controlling host applies it later.
+  createEffect(on(full, open => {
+    if (!moveFocus) return;
+    moveFocus = false;
+    queueMicrotask(() => (open ? less : more)?.focus());
+  }, {
+    defer: true
+  }));
+  const groups = createMemo(() => full() && props.groups ? props.groups(props.rows).filter(group => group.rows.length > 0) : [{
+    id: "rows",
+    label: undefined,
+    rows: full() || !limited() ? props.rows : props.rows.slice(0, props.limit)
+  }]);
+  const list = (group, labelId) => _$ssr(_tmpl$7, `k2b-file-grid ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-layout", group().layout === "tiles" ? "tiles" : _$escape(props.layout ?? "grid", true), false) + _$ssrAttribute("data-action-visibility", _$escape(props.actionVisibility ?? "always", true), false), _$ssrAttribute("aria-label", labelId ? _$escape(undefined, true) : _$escape(props.label, true), false) + _$ssrAttribute("aria-labelledby", _$escape(labelId, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return group().rows;
+    },
+    children: row => {
+      const id = `k2b-file-grid-${createUniqueId()}`;
+      return _$ssr(_tmpl$1, _$ssrElement("div", _$mergeProps(() => props.itemProps?.(row), {
+        "class": "k2b-file-grid__item"
+      }), [_$ssr(_tmpl$8, `${_$escape(id, true)}-name`, _$ssrAttribute("aria-describedby", props.renderMeta ? `${_$escape(id, true)}-meta` : _$escape(undefined, true), false)), _$ssr(_tmpl$2, _$escape(props.renderPreview(row))), _$ssr(_tmpl$9, `${_$escape(id, true)}-name`, _$escape(props.renderLabel(row))), _$ssr(_tmpl$0, `${_$escape(id, true)}-meta`, _$escape(props.renderMeta?.(row))), _$ssr(_tmpl$5, _$escape(props.renderActions?.(row)))], false));
+    }
+  })));
+  return _$ssr(_tmpl$12, _$ssrAttribute("data-expanded", full() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!full())() && props.toolbar;
+    },
+    get children() {
+      return _$ssr(_tmpl$10, _$escape(props.toolbar));
+    }
+  })), _$escape(_$createComponent(Index, {
+    get each() {
+      return groups();
+    },
+    children: group => {
+      const labelId = `k2b-file-grid-group-${createUniqueId()}`;
+      return _$createComponent(Show, {
+        get when() {
+          return group().label !== undefined;
+        },
+        get fallback() {
+          return list(group);
+        },
+        get children() {
+          return _$ssr(_tmpl$13, _$ssrAttribute("id", _$escape(labelId, true), false), _$escape(group().label), _$escape(group().rows.length), _$escape(list(group, labelId)));
+        }
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return limited();
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return full();
+        },
+        get fallback() {
+          return _$ssr(_tmpl$15, _$escape(messages().showAll({
+            count: props.rows.length
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return props.moreMeta;
+            },
+            get children() {
+              return _$ssr(_tmpl$14, _$escape(props.moreMeta));
+            }
+          })));
+        },
+        get children() {
+          return _$ssr(_tmpl$11, _$escape(messages().showLess));
+        }
+      });
+    }
+  })));
+}
 //# sourceMappingURL=FileGrid.js.map

package/dist/ssr/content/FileGrid.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/FileGrid.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\nimport type { CollectionSelection } from \"./collection-selection\";\n\nexport type FileGridProps<T> = {\n  rows: readonly T[];\n  getRowId: (row: T) => string;\n  selection: CollectionSelection;\n  label: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** `list` shows one compact row per item: preview, name, and meta beside each other. Defaults to `grid`. */\n  layout?: \"grid\" | \"list\";\n  renderPreview: (row: T) => JSX.Element;\n  renderLabel: (row: T) => JSX.Element;\n  renderMeta?: (row: T) => JSX.Element;\n  renderActions?: (row: T) => JSX.Element;\n  onRowClick?: (row: T) => void;\n  onOpen: (row: T) => void;\n  onContextMenu?: (row: T) => void;\n  /** Extra attributes for one tile, for example drag-and-drop handlers or data attributes the host styles. */\n  itemProps?: (row: T) => JSX.HTMLAttributes<HTMLDivElement>;\n  class?: string;\n};\n\n/**\n * File presentation only; the host owns data, menus, leases and permissions. Items the selection marks with\n * `isDisabled` stay reachable by keyboard but cannot be selected or opened; say why in `renderMeta`.\n */\nexport function FileGrid<T>(props: FileGridProps<T>) {\n  let grid: HTMLDivElement | undefined;\n  // Both clicks of a double-click belong to the item that took the first one. When that click replaced the rows,\n  // for example by opening a folder, the item now under the pointer ignores the rest of the gesture.\n  let pressed: EventTarget | null | undefined;\n  const ownsClick = (event: MouseEvent) => {\n    if (event.detail > 1 && pressed !== event.currentTarget) pressed = null;\n    else pressed = event.currentTarget;\n    return pressed !== null;\n  };\n  const columns = () => (grid ? Math.max(1, getComputedStyle(grid).gridTemplateColumns.split(\" \").length) : 1);\n  const nested = (event: Event) =>\n    event.target instanceof Element &&\n    !!event.target.closest(\"button,a,input,label,select,textarea,summary,[contenteditable],[role=button],[role=menu]\");\n  return (\n    <div\n      ref={grid}\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={props.layout ?? \"grid\"}\n      role=\"grid\"\n      aria-label={props.label}\n      aria-multiselectable={props.selection.multiple}\n    >\n      <For each={props.rows}>\n        {(row) => {\n          const id = () => props.getRowId(row);\n          const disabled = () => props.selection.isDisabled(id());\n          return (\n            <div role=\"row\" class=\"k2b-file-grid__row\">\n              <div\n                {...props.itemProps?.(row)}\n                role=\"gridcell\"\n                class=\"k2b-file-grid__item\"\n                aria-selected={props.selection.selected().has(id())}\n                aria-disabled={disabled() || undefined}\n                ref={(element) => props.selection.register(id(), element)}\n                tabIndex={props.selection.focused() === id() ? 0 : -1}\n                onFocus={() => props.selection.markFocused(id())}\n                onClick={(event) => {\n                  if (!nested(event) && ownsClick(event) && !disabled()) {\n                    props.selection.select(id(), event);\n                    props.onRowClick?.(row);\n                  }\n                }}\n                onDblClick={(event) => {\n                  if (!nested(event) && pressed !== null && !disabled()) props.onOpen(row);\n                }}\n                onContextMenu={() => props.onContextMenu?.(row)}\n                onKeyDown={(event) => {\n                  if (nested(event)) return;\n                  if (props.selection.keyDown(event, id(), columns())) return;\n                  if (event.key === \"Enter\") {\n                    event.preventDefault();\n                    if (!disabled()) props.onOpen(row);\n                  }\n                }}\n              >\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\">{props.renderLabel(row)}</div>\n                <div class=\"k2b-file-grid__meta\">{props.renderMeta?.(row)}</div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,GAAG,QAAkB,UAAU;AAuBxC;AACA;AACA;AACA;AACA,OAAO,SAAS,QAAQ,CAAI,KAAuB,EAAE;EACnD,IAAI,IAAgC;EACpC;EACA;EACA,IAAI,OAAuC;EAC3C,MAAM,SAAS,GAAI,KAAiB,IAAK;IACvC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,KAAK,KAAK,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI,CAAC,KACnE,OAAO,GAAG,KAAK,CAAC,aAAa;IAClC,OAAO,OAAO,KAAK,IAAI;EACzB,CAAC;EACD,MAAM,OAAO,GAAG,MAAO,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAE;EAC5G,MAAM,MAAM,GAAI,KAAY,IAC1B,KAAK,CAAC,MAAM,YAAY,OAAO,IAC/B,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,0FAA0F,CAAC;EACpH,qBAGW,0BAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,uCAChC,KAAK,CAAC,IAAI,IAAI,IAAI,yDAChB,KAAK,CAAC,MAAM,IAAI,MAAM,uDAEvB,KAAK,CAAC,KAAK,kEACD,KAAK,CAAC,SAAS,CAAC,QAAQ,4CAE7C,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,UACjB,GAAG,IAAK;MACR,MAAM,EAAE,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;MACpC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;MACvD,6DAGU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;QAC1B,IAAI,EAAC,UAAU;QAAA,SACT,qBAAqB;QAAA;UAAA,OACZ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAAA;QAAA;UAAA,OACpC,QAAQ,CAAC,CAAC,IAAI,SAAS;QAAA;QAAA,IAEtC,QAAQ;UAAA,OAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAAA;MAAA,6BAqBhB,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,4BAC3B,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,4BACtB,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,4BACpB,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;IAIvE;EAAC;AAIT","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/FileGrid.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, For, Index, type JSX, on, Show } from \"solid-js\";\nimport type { CollectionSelection } from \"./collection-selection\";\nimport { useFileListMessages } from \"./file-list-messages\";\n\n/** One part of an open file list, such as its files as rows and its images as tiles. */\nexport type FileGridGroup<T> = {\n  id: string;\n  label: JSX.Element;\n  rows: readonly T[];\n  /** `tiles` fills each item with its preview and lays the name over it. Defaults to `list`. */\n  layout?: \"list\" | \"tiles\";\n};\n\ntype FileGridBaseProps<T> = {\n  rows: readonly T[];\n  getRowId: (row: T) => string;\n  label: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** `list` shows one compact row per item: preview, name, and meta beside each other. Defaults to `grid`. */\n  layout?: \"grid\" | \"list\";\n  renderPreview: (row: T) => JSX.Element;\n  renderLabel: (row: T) => JSX.Element;\n  renderMeta?: (row: T) => JSX.Element;\n  renderActions?: (row: T) => JSX.Element;\n  /**\n   * `progressive` shows the actions on hover, keyboard focus, or an open menu with a mouse or trackpad, and always\n   * on touch. Their slot is reserved in both states, so nothing moves. Defaults to `always`.\n   */\n  actionVisibility?: \"always\" | \"progressive\";\n  onOpen: (row: T) => void;\n  onContextMenu?: (row: T) => void;\n  /** Extra attributes for one tile, for example drag-and-drop handlers or data attributes the host styles. */\n  itemProps?: (row: T) => JSX.HTMLAttributes<HTMLDivElement>;\n  class?: string;\n};\n\n/** A browser or picker: items are selected, and Enter or a double click opens them. */\nexport type FileGridSelectableProps<T> = FileGridBaseProps<T> & {\n  selection: CollectionSelection;\n  onRowClick?: (row: T) => void;\n  limit?: never;\n  expanded?: never;\n  onExpandedChange?: never;\n  moreMeta?: never;\n  toolbar?: never;\n  groups?: never;\n};\n\n/** A list without selection, as in a details panel: one click on an item opens it. */\nexport type FileGridOpenProps<T> = FileGridBaseProps<T> & {\n  selection?: never;\n  onRowClick?: never;\n  /** Shows the first `limit` items, then \"Show all N\", which opens the full list in place. Without it, the list is always full. */\n  limit?: number;\n  /** Controls whether the full list is open. Without it, the list keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** A quiet note at the end of \"Show all N\", such as how many duplicates were merged. */\n  moreMeta?: JSX.Element;\n  /** Shown above the full list, such as a count, an arrangement switch, or \"Download all\"; not in the short list. */\n  toolbar?: JSX.Element;\n  /** How the full list arranges its items, such as files as rows, then images as tiles; the short list stays one list. */\n  groups?: (rows: readonly T[]) => readonly FileGridGroup<T>[];\n};\n\nexport type FileGridProps<T> = FileGridSelectableProps<T> | FileGridOpenProps<T>;\n\n/**\n * File presentation only; the host owns data, menus, leases and permissions. Items the selection marks with\n * `isDisabled` stay reachable by keyboard but cannot be selected or opened; say why in `renderMeta`.\n */\nexport function FileGrid<T>(props: FileGridProps<T>) {\n  return (\n    <Show when={props.selection} fallback={<OpenFileGrid {...(props as FileGridOpenProps<T>)} />}>\n      {(selection) => <SelectableFileGrid {...(props as FileGridSelectableProps<T>)} selection={selection()} />}\n    </Show>\n  );\n}\n\nfunction SelectableFileGrid<T>(props: FileGridSelectableProps<T>) {\n  let grid: HTMLDivElement | undefined;\n  // Both clicks of a double-click belong to the item that took the first one. When that click replaced the rows,\n  // for example by opening a folder, the item now under the pointer ignores the rest of the gesture.\n  let pressed: EventTarget | null | undefined;\n  const ownsClick = (event: MouseEvent) => {\n    if (event.detail > 1 && pressed !== event.currentTarget) pressed = null;\n    else pressed = event.currentTarget;\n    return pressed !== null;\n  };\n  const columns = () => (grid ? Math.max(1, getComputedStyle(grid).gridTemplateColumns.split(\" \").length) : 1);\n  const nested = (event: Event) =>\n    event.target instanceof Element &&\n    !!event.target.closest(\"button,a,input,label,select,textarea,summary,[contenteditable],[role=button],[role=menu]\");\n  return (\n    <div\n      ref={grid}\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={props.layout ?? \"grid\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      role=\"grid\"\n      aria-label={props.label}\n      aria-multiselectable={props.selection.multiple}\n    >\n      <For each={props.rows}>\n        {(row) => {\n          const id = () => props.getRowId(row);\n          const disabled = () => props.selection.isDisabled(id());\n          return (\n            <div role=\"row\" class=\"k2b-file-grid__row\">\n              <div\n                {...props.itemProps?.(row)}\n                role=\"gridcell\"\n                class=\"k2b-file-grid__item\"\n                aria-selected={props.selection.selected().has(id())}\n                aria-disabled={disabled() || undefined}\n                ref={(element) => props.selection.register(id(), element)}\n                tabIndex={props.selection.focused() === id() ? 0 : -1}\n                onFocus={() => props.selection.markFocused(id())}\n                onClick={(event) => {\n                  if (!nested(event) && ownsClick(event) && !disabled()) {\n                    props.selection.select(id(), event);\n                    props.onRowClick?.(row);\n                  }\n                }}\n                onDblClick={(event) => {\n                  if (!nested(event) && pressed !== null && !disabled()) props.onOpen(row);\n                }}\n                onContextMenu={() => props.onContextMenu?.(row)}\n                onKeyDown={(event) => {\n                  if (nested(event)) return;\n                  if (props.selection.keyDown(event, id(), columns())) return;\n                  if (event.key === \"Enter\") {\n                    event.preventDefault();\n                    if (!disabled()) props.onOpen(row);\n                  }\n                }}\n              >\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\">{props.renderLabel(row)}</div>\n                <div class=\"k2b-file-grid__meta\">{props.renderMeta?.(row)}</div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nfunction OpenFileGrid<T>(props: FileGridOpenProps<T>) {\n  const messages = useFileListMessages();\n  const [ownExpanded, setOwnExpanded] = createSignal(false);\n  const limited = () => props.limit !== undefined && props.rows.length > props.limit;\n  // Without a limit the list is always complete, so its toolbar and groups always apply.\n  const full = () => props.limit === undefined || (limited() && (props.expanded ?? ownExpanded()));\n  let more: HTMLButtonElement | undefined;\n  let less: HTMLButtonElement | undefined;\n  let moveFocus = false;\n  const toggle = (next: boolean) => {\n    moveFocus = true;\n    if (props.expanded === undefined) setOwnExpanded(next);\n    props.onExpandedChange?.(next);\n  };\n  // The pressed button leaves with the state it showed; once the new state is there, focus moves to its\n  // counterpart, also when a controlling host applies it later.\n  createEffect(\n    on(\n      full,\n      (open) => {\n        if (!moveFocus) return;\n        moveFocus = false;\n        queueMicrotask(() => (open ? less : more)?.focus());\n      },\n      { defer: true },\n    ),\n  );\n  const groups = createMemo((): readonly FileGridGroup<T>[] =>\n    full() && props.groups\n      ? props.groups(props.rows).filter((group) => group.rows.length > 0)\n      : [{ id: \"rows\", label: undefined, rows: full() || !limited() ? props.rows : props.rows.slice(0, props.limit) }],\n  );\n\n  const list = (group: () => FileGridGroup<T>, labelId?: string) => (\n    <div\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={group().layout === \"tiles\" ? \"tiles\" : (props.layout ?? \"grid\")}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      data-open-items=\"true\"\n      role=\"list\"\n      aria-label={labelId ? undefined : props.label}\n      aria-labelledby={labelId}\n    >\n      {/* Keyed by the row itself: new data keeps every existing item, its focus, and its state. */}\n      <For each={group().rows}>\n        {(row) => {\n          const id = `k2b-file-grid-${createUniqueId()}`;\n          return (\n            <div role=\"listitem\" class=\"k2b-file-grid__row\">\n              <div {...props.itemProps?.(row)} class=\"k2b-file-grid__item\">\n                {/* The whole item opens the file; its actions lie above this layer in their own slot. */}\n                <button\n                  type=\"button\"\n                  class=\"k2b-file-grid__open\"\n                  aria-labelledby={`${id}-name`}\n                  aria-describedby={props.renderMeta ? `${id}-meta` : undefined}\n                  onClick={() => props.onOpen(row)}\n                  onContextMenu={() => props.onContextMenu?.(row)}\n                />\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\" id={`${id}-name`}>\n                  {props.renderLabel(row)}\n                </div>\n                <div class=\"k2b-file-grid__meta\" id={`${id}-meta`}>\n                  {props.renderMeta?.(row)}\n                </div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  return (\n    <div class=\"k2b-file-grid-stack\" data-expanded={full() ? \"true\" : undefined}>\n      <Show when={full() && props.toolbar}>\n        <div class=\"k2b-file-grid-stack__toolbar\">{props.toolbar}</div>\n      </Show>\n      {/* By position: a group that only changes its rows keeps its list, so new data remounts nothing. */}\n      <Index each={groups()}>\n        {(group) => {\n          const labelId = `k2b-file-grid-group-${createUniqueId()}`;\n          return (\n            <Show when={group().label !== undefined} fallback={list(group)}>\n              <div class=\"k2b-file-grid-stack__group\">\n                <div class=\"k2b-file-grid-stack__label\" id={labelId}>\n                  {group().label}\n                  <span class=\"k2b-file-grid-stack__count\">{group().rows.length}</span>\n                </div>\n                {list(group, labelId)}\n              </div>\n            </Show>\n          );\n        }}\n      </Index>\n      <Show when={limited()}>\n        <Show\n          when={full()}\n          fallback={\n            <button ref={more} type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"false\" onClick={() => toggle(true)}>\n              <span>{messages().showAll({ count: props.rows.length })}</span>\n              <i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />\n              <Show when={props.moreMeta}>\n                <span class=\"k2b-file-grid-stack__more-meta\">{props.moreMeta}</span>\n              </Show>\n            </button>\n          }\n        >\n          <button ref={less} type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"true\" onClick={() => toggle(false)}>\n            <span>{messages().showLess}</span>\n            <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/content/FileTypeIcon.js

@@ -3,6 +3,7 @@ import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<span class=\"", "\"", " aria-hidden=\"true\"><i class=\"", "\"></i></span>"];
 import { fileIcons } from "@k2b/stdlib";
+import { resolveFileListMessages } from "./file-list-messages";
 
 /** The colour family a file's icon tile uses. `other` covers code, text, and unknown files. */
 
@@ -23,6 +24,20 @@ export const fileTypeOf = file => {
   return category === "pdf" || category === "image" || category === "video" || category === "audio" || category === "archive" ? category : "other";
 };
 
+/**
+ * The readable kind of a file in `locale`, such as "PDF", "Image", or "Spreadsheet", for a meta line like
+ * "PDF · 4.2 MB" instead of a media type. An unknown kind names the file's extension ("ICC"), and a file without
+ * one reads "File".
+ */
+export const fileKindLabel = (file, locale) => {
+  const t = resolveFileListMessages(locale);
+  const type = fileTypeOf(file);
+  if (type !== "other") return t[type];
+  const dot = file.name.lastIndexOf(".");
+  const extension = dot > 0 ? file.name.slice(dot + 1) : "";
+  return /^[a-z0-9]+$/i.test(extension) ? extension.toUpperCase() : t.file;
+};
+
 /** `fileIcons` adds Tailwind colour utilities that @k2b/ui does not ship; only the `ti-*` glyph is kept. */
 const glyph = props => {
   // `fileIcons` looks names up in plain objects, so a name such as `constructor` returns an inherited member

package/dist/ssr/content/FileTypeIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/FileTypeIcon.tsx"],"sourcesContent":["import { fileIcons } from \"@k2b/stdlib\";\nimport type { JSX } from \"solid-js\";\n\n/** The colour family a file's icon tile uses. `other` covers code, text, and unknown files. */\nexport type FileType = \"folder\" | \"pdf\" | \"image\" | \"sheet\" | \"document\" | \"slides\" | \"video\" | \"audio\" | \"archive\" | \"other\";\n\nexport type FileTypeIconProps = {\n  /** The file or folder name; its extension picks the glyph and the type colour. */\n  name: string;\n  mediaType?: string;\n  folder?: boolean;\n  /** Shows an open folder, for example the folder a list is showing. */\n  open?: boolean;\n  /** A Tabler icon class that replaces the glyph the name picks; the type colour still follows the name. */\n  icon?: string;\n  /** `sm` for tree rows, `md` for list rows, `lg` for grid previews. Defaults to `md`. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  class?: string;\n};\n\n// Known extensions decide first: a generic media type such as `text/plain` or `text/csv` must not hide a sheet,\n// a slide deck, a document, or an archive behind the neutral family.\nconst BY_EXTENSION = new Map<string, FileType>(\n  (\n    [\n      [\"sheet\", [\"xls\", \"xlsx\", \"ods\", \"csv\"]],\n      [\"slides\", [\"ppt\", \"pptx\", \"odp\"]],\n      [\"document\", [\"doc\", \"docx\", \"odt\", \"rtf\"]],\n      [\"archive\", [\"zip\", \"tar\", \"gz\", \"tgz\", \"bz2\", \"xz\", \"7z\", \"rar\"]],\n    ] as const\n  ).flatMap(([type, extensions]) => extensions.map((extension) => [extension, type] as const)),\n);\n\n/** Resolve the colour family for a file or folder from its name and media type. */\nexport const fileTypeOf = (file: { name: string; mediaType?: string; folder?: boolean }): FileType => {\n  if (file.folder) return \"folder\";\n  const known = BY_EXTENSION.get(file.name.split(\".\").pop()?.toLowerCase() ?? \"\");\n  if (known) return known;\n  const category = fileIcons.getFileCategory({ name: file.name, type: \"file\", mimeType: file.mediaType });\n  return category === \"pdf\" || category === \"image\" || category === \"video\" || category === \"audio\" || category === \"archive\"\n    ? category\n    : \"other\";\n};\n\n/** `fileIcons` adds Tailwind colour utilities that @k2b/ui does not ship; only the `ti-*` glyph is kept. */\nconst glyph = (props: FileTypeIconProps): string => {\n  // `fileIcons` looks names up in plain objects, so a name such as `constructor` returns an inherited member\n  // instead of a class string; such names fall back to the generic glyph.\n  const found: unknown =\n    props.icon ?? fileIcons.getFileIcon({ name: props.name, type: props.folder ? \"directory\" : \"file\", mimeType: props.mediaType });\n  const icon =\n    (typeof found === \"string\" ? found : \"\")\n      .split(/\\s+/)\n      .filter((token) => token.startsWith(\"ti-\"))\n      .join(\" \") || (props.folder ? \"ti-folder\" : \"ti-file\");\n  return props.folder && props.open ? icon.replace(/\\bti-folder$/, \"ti-folder-open\") : icon;\n};\n\n/**\n * A file or folder glyph in a soft chip of its type colour. Folders take the app accent hook\n * `--k2b-app-workspace-active`; code, text, and unknown files a neutral ink. The box size is fixed per `size`.\n */\nexport function FileTypeIcon(props: FileTypeIconProps): JSX.Element {\n  return (\n    <span\n      class={`k2b-icon-tile k2b-file-type-icon ${props.class ?? \"\"}`}\n      data-file-type={fileTypeOf({ name: props.name, mediaType: props.mediaType, folder: props.folder })}\n      data-size={props.size ?? \"md\"}\n      aria-hidden=\"true\"\n    >\n      <i class={`ti ${glyph(props)}`} />\n    </span>\n  );\n}\n"],"mappings":";;;;AAAA,SAAS,SAAS,QAAQ,aAAa;;AAGvC;;AAiBA;AACA;AACA,MAAM,YAAY,GAAG,IAAI,GAAG,CAExB,CACE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EACxC,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,EAClC,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EAC3C,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CACnE,CACD,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,KAAK,UAAU,CAAC,GAAG,CAAE,SAAS,IAAK,CAAC,SAAS,EAAE,IAAI,CAAU,CAAC,CAC7F,CAAC;;AAED;AACA,OAAO,MAAM,UAAU,GAAI,IAA4D,IAAe;EACpG,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,QAAQ;EAChC,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,CAAC;EAC/E,IAAI,KAAK,EAAE,OAAO,KAAK;EACvB,MAAM,QAAQ,GAAG,SAAS,CAAC,eAAe,CAAC;IAAE,IAAI,EAAE,IAAI,CAAC,IAAI;IAAE,IAAI,EAAE,MAAM;IAAE,QAAQ,EAAE,IAAI,CAAC;EAAU,CAAC,CAAC;EACvG,OAAO,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,SAAS,GACvH,QAAQ,GACR,OAAO;AACb,CAAC;;AAED;AACA,MAAM,KAAK,GAAI,KAAwB,IAAa;EAClD;EACA;EACA,MAAM,KAAc,GAClB,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC,WAAW,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC,IAAI;IAAE,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,WAAW,GAAG,MAAM;IAAE,QAAQ,EAAE,KAAK,CAAC;EAAU,CAAC,CAAC;EACjI,MAAM,IAAI,GACR,CAAC,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,EAAE,EACpC,KAAK,CAAC,KAAK,CAAC,CACZ,MAAM,CAAE,KAAK,IAAK,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAC1C,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;EAC1D,OAAO,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,IAAI;AAC3F,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,SAAS,YAAY,CAAC,KAAwB,EAAe;EAClE,qBAEW,6CAAoC,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,4CAC9C,UAAU,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC,IAAI;IAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAAE,MAAM,EAAE,KAAK,CAAC;EAAO,CAAC,CAAC,uDACvF,KAAK,CAAC,IAAI,IAAI,IAAI,iBAGnB,eAAM,KAAK,CAAC,KAAK,CAAC,SAAE;AAGpC","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/FileTypeIcon.tsx"],"sourcesContent":["import { fileIcons } from \"@k2b/stdlib\";\nimport type { JSX } from \"solid-js\";\nimport { resolveFileListMessages } from \"./file-list-messages\";\n\n/** The colour family a file's icon tile uses. `other` covers code, text, and unknown files. */\nexport type FileType = \"folder\" | \"pdf\" | \"image\" | \"sheet\" | \"document\" | \"slides\" | \"video\" | \"audio\" | \"archive\" | \"other\";\n\nexport type FileTypeIconProps = {\n  /** The file or folder name; its extension picks the glyph and the type colour. */\n  name: string;\n  mediaType?: string;\n  folder?: boolean;\n  /** Shows an open folder, for example the folder a list is showing. */\n  open?: boolean;\n  /** A Tabler icon class that replaces the glyph the name picks; the type colour still follows the name. */\n  icon?: string;\n  /** `sm` for tree rows, `md` for list rows, `lg` for grid previews. Defaults to `md`. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  class?: string;\n};\n\n// Known extensions decide first: a generic media type such as `text/plain` or `text/csv` must not hide a sheet,\n// a slide deck, a document, or an archive behind the neutral family.\nconst BY_EXTENSION = new Map<string, FileType>(\n  (\n    [\n      [\"sheet\", [\"xls\", \"xlsx\", \"ods\", \"csv\"]],\n      [\"slides\", [\"ppt\", \"pptx\", \"odp\"]],\n      [\"document\", [\"doc\", \"docx\", \"odt\", \"rtf\"]],\n      [\"archive\", [\"zip\", \"tar\", \"gz\", \"tgz\", \"bz2\", \"xz\", \"7z\", \"rar\"]],\n    ] as const\n  ).flatMap(([type, extensions]) => extensions.map((extension) => [extension, type] as const)),\n);\n\n/** Resolve the colour family for a file or folder from its name and media type. */\nexport const fileTypeOf = (file: { name: string; mediaType?: string; folder?: boolean }): FileType => {\n  if (file.folder) return \"folder\";\n  const known = BY_EXTENSION.get(file.name.split(\".\").pop()?.toLowerCase() ?? \"\");\n  if (known) return known;\n  const category = fileIcons.getFileCategory({ name: file.name, type: \"file\", mimeType: file.mediaType });\n  return category === \"pdf\" || category === \"image\" || category === \"video\" || category === \"audio\" || category === \"archive\"\n    ? category\n    : \"other\";\n};\n\n/**\n * The readable kind of a file in `locale`, such as \"PDF\", \"Image\", or \"Spreadsheet\", for a meta line like\n * \"PDF · 4.2 MB\" instead of a media type. An unknown kind names the file's extension (\"ICC\"), and a file without\n * one reads \"File\".\n */\nexport const fileKindLabel = (file: { name: string; mediaType?: string; folder?: boolean }, locale: string): string => {\n  const t = resolveFileListMessages(locale);\n  const type = fileTypeOf(file);\n  if (type !== \"other\") return t[type];\n  const dot = file.name.lastIndexOf(\".\");\n  const extension = dot > 0 ? file.name.slice(dot + 1) : \"\";\n  return /^[a-z0-9]+$/i.test(extension) ? extension.toUpperCase() : t.file;\n};\n\n/** `fileIcons` adds Tailwind colour utilities that @k2b/ui does not ship; only the `ti-*` glyph is kept. */\nconst glyph = (props: FileTypeIconProps): string => {\n  // `fileIcons` looks names up in plain objects, so a name such as `constructor` returns an inherited member\n  // instead of a class string; such names fall back to the generic glyph.\n  const found: unknown =\n    props.icon ?? fileIcons.getFileIcon({ name: props.name, type: props.folder ? \"directory\" : \"file\", mimeType: props.mediaType });\n  const icon =\n    (typeof found === \"string\" ? found : \"\")\n      .split(/\\s+/)\n      .filter((token) => token.startsWith(\"ti-\"))\n      .join(\" \") || (props.folder ? \"ti-folder\" : \"ti-file\");\n  return props.folder && props.open ? icon.replace(/\\bti-folder$/, \"ti-folder-open\") : icon;\n};\n\n/**\n * A file or folder glyph in a soft chip of its type colour. Folders take the app accent hook\n * `--k2b-app-workspace-active`; code, text, and unknown files a neutral ink. The box size is fixed per `size`.\n */\nexport function FileTypeIcon(props: FileTypeIconProps): JSX.Element {\n  return (\n    <span\n      class={`k2b-icon-tile k2b-file-type-icon ${props.class ?? \"\"}`}\n      data-file-type={fileTypeOf({ name: props.name, mediaType: props.mediaType, folder: props.folder })}\n      data-size={props.size ?? \"md\"}\n      aria-hidden=\"true\"\n    >\n      <i class={`ti ${glyph(props)}`} />\n    </span>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/content/FileView.js

@@ -906,10 +906,17 @@ const BUILTIN_RENDERERS = [{
 
 // ── Component ───────────────────────────────────────────────────────────────
 
-export const formatFileViewSize = bytes => {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+/**
+ * A file size such as "4.2 MB". With `locale`, the number follows that language ("4,2 MB") and drops a trailing
+ * zero ("64 KB"); without it, the output stays as before.
+ */
+export const formatFileViewSize = (bytes, locale) => {
+  const [value, unit] = bytes < 1024 ? [bytes, "B"] : bytes < 1024 * 1024 ? [bytes / 1024, "KB"] : [bytes / (1024 * 1024), "MB"];
+  if (unit === "B") return `${bytes} B`;
+  if (!locale) return `${value.toFixed(1)} ${unit}`;
+  return `${new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 1
+  }).format(value)} ${unit}`;
 };
 export default function FileView(props) {
   const messages = useUiMessages();