@k2b/ui 0.45.0 → 0.47.0

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

@@ -1 +1 @@
-{"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":[]}
+{"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  /**\n   * Shows a check box before each item that `checks` returns `true` for, or a circle when only one item may be\n   * selected. The check only mirrors the selection; items without one keep its slot, so names stay in line.\n   */\n  checks?: (row: T) => boolean;\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  checks?: 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      data-checks={props.checks ? \"true\" : undefined}\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                <Show when={props.checks}>\n                  {(checks) => (\n                    <span class=\"k2b-file-grid__check\" aria-hidden=\"true\">\n                      <Show when={checks()(row)}>\n                        <span class=\"k2b-file-grid__check-box\" data-shape={props.selection.multiple ? \"box\" : \"circle\"}>\n                          <i class=\"ti ti-check\" />\n                        </span>\n                      </Show>\n                    </span>\n                  )}\n                </Show>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAY,EAAE,EAAE,IAAI,QAAQ,UAAU;AAEjH,SAAS,mBAAmB,QAAQ,sBAAsB;;AAE1D;;AAgCA;;AAiBA;;AAoBA;AACA;AACA;AACA;AACA,OAAO,SAAS,QAAQ,CAAI,KAAuB,EAAE;EACnD,yBACG,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,SAAS;IAAA;IAAA,IAAE,QAAQ;MAAA,yBAAG,YAAY,EAAM,KAAK;IAAA;IAAA,UAC3D,SAAS,sBAAM,kBAAkB,eAAM,KAAK;MAAA,IAAiC,SAAS;QAAA,OAAE,SAAS,CAAC,CAAC;MAAA;IAAA;EAAI;AAG/G;AAEA,SAAS,kBAAkB,CAAI,KAAiC,EAAE;EAChE,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;IAAA;IAAA,YAES,IAAI;IAAA,mDAAJ,IAAI;IAAA,iCAUR,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,IAAI;MAAA;MAAA,UACjB,GAAG,IAAK;QACR,MAAM,EAAE,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;QACpC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD;UAAA;YAAA;YAAA;YAAA;YAAA;YAAA;YAAA;YAAA;UAAA,MAQY,OAAO,IAAK,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;UAAA,mCALrD,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;YAAA,QACrB,UAAU;YAAA,SACT,qBAAqB;YAAA;cAAA,OACZ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YAAA;YAAA;cAAA,OACpC,QAAQ,CAAC,CAAC,IAAI,SAAS;YAAA;YAAA,IAEtC,QAAQ;cAAA,OAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAAA;YAAA,WAC5C,MAAM,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;YAAA,WACtC,KAAK,IAAK;cAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;gBACrD,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;gBACnC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC;cACzB;YACF,CAAC;YAAA,cACY,KAAK,IAAK;cACrB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;YAC1E,CAAC;YAAA,iBACc,MAAM,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;YAAA,aACnC,KAAK,IAAK;cACpB,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;cACnB,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE;cACrD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBACzB,KAAK,CAAC,cAAc,CAAC,CAAC;gBACtB,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;cACpC;YACF;UAAC;UAAA,kCAEA,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,MAAM;YAAA;YAAA,UACpB,MAAM;cAAA;cAAA,kCAEH,IAAI;gBAAA,IAAC,IAAI;kBAAA,OAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;gBAAA;gBAAA;kBAAA;kBAAA,mDAC4B,KAAK,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,GAAG,QAAQ;kBAAA;gBAAA;cAAA;cAAA;YAAA;UAKnG;UAAA,sBAEkC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;UAAA,sBAC3B,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC;UAAA,sBACtB,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC;UAAA,sBACpB,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;UAAA;UAAA;QAAA;MAIvE;IAAC;IAAA;MAAA,UA7DI,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OAChC,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA,OAChB,KAAK,CAAC,MAAM,IAAI,MAAM;QAAA,OACX,KAAK,CAAC,gBAAgB,IAAI,QAAQ;QAAA,OAC7C,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS;QAAA,OAElC,KAAK,CAAC,KAAK;QAAA,OACD,KAAK,CAAC,SAAS,CAAC,QAAQ;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AA0DpD;AAEA,SAAS,YAAY,CAAI,KAA2B,EAAE;EACpD,MAAM,QAAQ,GAAG,mBAAmB,CAAC,CAAC;EACtC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EACzD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK;EAClF;EACA,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,KAAK,KAAK,SAAS,IAAK,OAAO,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAE;EAChG,IAAI,IAAmC;EACvC,IAAI,IAAmC;EACvC,IAAI,SAAS,GAAG,KAAK;EACrB,MAAM,MAAM,GAAI,IAAa,IAAK;IAChC,SAAS,GAAG,IAAI;IAChB,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC;IACtD,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC;EAChC,CAAC;EACD;EACA;EACA,YAAY,CACV,EAAE,CACA,IAAI,EACH,IAAI,IAAK;IACR,IAAI,CAAC,SAAS,EAAE;IAChB,SAAS,GAAG,KAAK;IACjB,cAAc,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;EACrD,CAAC,EACD;IAAE,KAAK,EAAE;EAAK,CAChB,CACF,CAAC;EACD,MAAM,MAAM,GAAG,UAAU,CAAC,MACxB,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,GAClB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAE,KAAK,IAAK,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,GACjE,CAAC;IAAE,EAAE,EAAE,MAAM;IAAE,KAAK,EAAE,SAAS;IAAE,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK;EAAE,CAAC,CACnH,CAAC;EAED,MAAM,IAAI,GAAG,CAAC,KAA6B,EAAE,OAAgB;IAAA;IAAA,0CASxC,OAAO;IAAA,mCAGvB,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,CAAC,CAAC,IAAI;MAAA;MAAA,UACnB,GAAG,IAAK;QACR,MAAM,EAAE,GAAG,iBAAiB,cAAc,CAAC,CAAC,EAAE;QAC9C;UAAA;YAAA;YAAA;YAAA;YAAA;YAAA;YAAA;UAAA,oCAEa,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;YAAA,SAAQ;UAAqB;UAAA,uBAQzC,MAAM,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;UAAA,iBADtC,MAAM,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;UAAA,0CAFf,GAAG,EAAE,OAAO;UAAA,uBAKM,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;UAAA,6BACxB,GAAG,EAAE,OAAO;UAAA,uBAC9C,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC;UAAA,6BAEY,GAAG,EAAE,OAAO;UAAA,uBAC9C,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC;UAAA,uBAEW,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;UAAA,0DAX3C,KAAK,CAAC,UAAU,GAAG,GAAG,EAAE,OAAO,GAAG,SAAS;UAAA;UAAA;QAAA;MAevE;IAAC;IAAA;MAAA,WApCI,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OAChC,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA,OAChB,KAAK,CAAC,CAAC,CAAC,MAAM,KAAK,OAAO,GAAG,OAAO,GAAI,KAAK,CAAC,MAAM,IAAI,MAAO;QAAA,OACpD,KAAK,CAAC,gBAAgB,IAAI,QAAQ;QAAA,QAG9C,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC,KAAK;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA,IAiChD;EAED;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA,mCAEK,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,mBAAI,CAAC,CAAC,OAAI,KAAK,CAAC,OAAO;MAAA;MAAA;QAAA;QAAA,uBACU,KAAK,CAAC,OAAO;QAAA;MAAA;IAAA;IAAA,mCAGzD,KAAK;MAAA,IAAC,IAAI;QAAA,OAAE,MAAM,CAAC,CAAC;MAAA;MAAA,UACjB,KAAK,IAAK;QACV,MAAM,OAAO,GAAG,uBAAuB,cAAc,CAAC,CAAC,EAAE;QACzD,yBACG,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS;UAAA;UAAA,IAAE,QAAQ;YAAA,OAAE,IAAI,CAAC,KAAK,CAAC;UAAA;UAAA;YAAA;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;YAAA,6BAEd,OAAO;YAAA,uBAChD,KAAK,CAAC,CAAC,CAAC,KAAK;YAAA,uBAC4B,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;YAAA,uBAE9D,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC;YAAA;UAAA;QAAA;MAI7B;IAAC;IAAA,mCAEF,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,OAAO,CAAC,CAAC;MAAA;MAAA;QAAA,yBAClB,IAAI;UAAA,IACH,IAAI;YAAA,OAAE,IAAI,CAAC,CAAC;UAAA;UAAA,IACZ,QAAQ;YAAA;cAAA;gBAAA;gBAAA;gBAAA;gBAAA;cAAA,iBAC4F,MAAM,MAAM,CAAC,IAAI,CAAC;cAAA,aAAvG,IAAI;cAAA,uDAAJ,IAAI;cAAA,uBACR,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;gBAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC;cAAO,CAAC,CAAC;cAAA,mCAEtD,IAAI;gBAAA,IAAC,IAAI;kBAAA,OAAE,KAAK,CAAC,QAAQ;gBAAA;gBAAA;kBAAA;kBAAA,uBACsB,KAAK,CAAC,QAAQ;kBAAA;gBAAA;cAAA;cAAA;cAAA;YAAA;UAAA;UAAA;YAAA;cAAA;YAAA,iBAK+B,MAAM,MAAM,CAAC,KAAK,CAAC;YAAA,aAAvG,IAAI;YAAA,uDAAJ,IAAI;YAAA,uBACR,QAAQ,CAAC,CAAC,CAAC,QAAQ;YAAA;YAAA;UAAA;QAAA;MAAA;IAAA;IAAA,uDAnCc,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;IAAA;EAAA;AA0C/E;AAAC","ignoreList":[]}

package/dist/browser/content/VirtualFeed.js

@@ -128,6 +128,7 @@ export function VirtualFeed(props) {
   let focusIndex = -1;
   let fresh = [];
   let restoring = false;
+  let restoreVersion = 0;
   let restoreAgain = false;
   let pendingAnnouncement = [];
   let announceTimer;
@@ -206,30 +207,30 @@ export function VirtualFeed(props) {
    * not: rows moved down would show empty space above the first item, and rows moved up would put the first items
    * out of the scroll range's reach. The margin is the overscan, so the write lands before the engine draws there.
    */
-  const mayDefer = top => deferring() && Math.min(viewport.scrollTop, top) > OVERSCAN;
+  const mayDefer = (top, physicalTop) => deferring() && Math.min(physicalTop ?? viewport.scrollTop, top) > OVERSCAN;
   /** Scrolls to `target`, within what the layout can reach, and returns the position the reader gets. */
-  const writeTop = (target, immediate) => {
-    const next = Math.min(Math.max(0, total() - viewport.clientHeight), Math.max(0, target));
-    if (!immediate && mayDefer(next)) {
+  const writeTop = (target, immediate, height) => {
+    const next = Math.min(Math.max(0, total() - height), Math.max(0, target));
+    const from = viewport.scrollTop;
+    if (!immediate && mayDefer(next, from)) {
       // The rows move instead; the scroll range stays the same, so the engine clamps nothing.
-      lastTop = viewport.scrollTop;
+      lastTop = from;
       deferred = next - lastTop;
       feed.style.height = `${total() - deferred}px`;
       return next;
     }
     deferred = 0;
     feed.style.height = `${total()}px`;
-    const from = viewport.scrollTop;
     if (Math.abs(from - next) > 0.5) viewport.scrollTop = next;
     lastTop = viewport.scrollTop;
     if (Math.abs(lastTop - from) > 0.5) owedUntil = performance.now() + END_WAIT_MS;
     return next;
   };
   let visibleKeys;
-  const reportVisible = () => {
+  const reportVisible = (top, height) => {
     if (!props.onVisibleChange) return;
-    const top = logicalTop();
-    const bottom = top + viewport.clientHeight;
+    top ??= logicalTop();
+    const bottom = top + (height ?? viewport.clientHeight);
     let first = -1;
     let last = -1;
     if (bottom > top && hi > lo) for (let index = indexAt(top); index < hi && offsetOf(index) < bottom; index++) {
@@ -252,9 +253,7 @@ export function VirtualFeed(props) {
       last: list[last]
     });
   };
-  const updateRange = () => {
-    const top = logicalTop();
-    const height = viewport.clientHeight;
+  const updateRange = (top = logicalTop(), height = viewport.clientHeight) => {
     const indices = [];
     if (hi > lo) {
       const start = indexAt(top - OVERSCAN);
@@ -268,7 +267,7 @@ export function VirtualFeed(props) {
     renderRows(indices);
     setTabStop(focusIndex >= lo && focusIndex < hi ? focusIndex : hi > lo ? indexAt(top + height - 1) : -1);
     // Newly mounted rows still have estimates; report only after their heights are measured.
-    if (!restoring && !fresh.some(node => node.isConnected)) reportVisible();
+    if (!restoring && !fresh.some(node => node.isConnected)) reportVisible(top, height);
   };
   const measure = measured => {
     let changed = false;
@@ -422,6 +421,8 @@ export function VirtualFeed(props) {
       return;
     }
     restoring = true;
+    const restored = ++restoreVersion;
+    const height = viewport.clientHeight;
     let target = 0;
     let top = 0;
     // Following the end shows the end of all items from now on, so later moves are judged against it.
@@ -431,9 +432,10 @@ export function VirtualFeed(props) {
         restoreAgain = false;
         recompute();
         target = stick ? total() : offsetOf(anchor.index) - anchor.delta;
-        top = writeTop(target, immediate);
-        updateRange();
-        setVersion(value => value + 1);
+        top = Math.min(Math.max(0, total() - height), Math.max(0, target));
+        // Row heights do not depend on their translation or the feed's scroll position. Mount and measure the
+        // logical range first; writing the final geometry once avoids a layout flush on every correction pass.
+        updateRange(top, height);
         if (pass === MEASURE_PASSES) break;
         // Rows mounted here reach the ResizeObserver only next frame (its loop limit), so measure them now.
         const mounted = fresh.filter(node => node.isConnected);
@@ -441,6 +443,8 @@ export function VirtualFeed(props) {
         if (measure(mounted.map(node => [node, node.getBoundingClientRect().height]))) restoreAgain = true;
         if (!restoreAgain) break;
       }
+      top = writeTop(target, immediate, height);
+      setVersion(value => value + 1);
       // A position the layout cannot reach, above its start or past its end, becomes the one the reader sees, so a
       // page that loads there later keeps it instead of moving to it.
       if (!stick && Math.abs(top - target) > 0.5) anchor = {
@@ -450,8 +454,9 @@ export function VirtualFeed(props) {
     } finally {
       restoring = false;
     }
-    checkEdges();
-    reportVisible();
+    checkEdges(lastTop + deferred, height);
+    // A synchronous edge load can restore another window; that restore already reports its final geometry.
+    if (restored === restoreVersion) reportVisible(lastTop + deferred, height);
   };
 
   /**
@@ -623,10 +628,10 @@ export function VirtualFeed(props) {
   };
 
   /** Grows the window or asks for more items when the reader nears an edge. */
-  const checkEdges = () => {
+  const checkEdges = (top, height) => {
     if (hi <= lo || restoring) return;
-    const top = logicalTop();
-    const height = viewport.clientHeight;
+    top ??= logicalTop();
+    height ??= viewport.clientHeight;
     // Rows measured taller than estimated can grow the window past the cap without any edge moving.
     if (total() > MAX_WINDOW && trimWindow(top + height / 2 > total() / 2 ? "start" : "end")) {
       restore(true);