@ntbjs/react-components 2.0.18 → 2.0.20-rc.1

package/README.md

@@ -98,27 +98,54 @@ You can build the library with:
 npm run build  
 ```  
 
-### 🧪 Installing the package locally (for testing only)
+### 🧪 Testing locally with yalc
 
-Let's say you have another project (`test-app`) on your machine that you want to try installing the component library
-into without having to first publish the component library. In the `test-app` directory, you can run:
+[yalc](https://github.com/wclr/yalc) simulates publishing the package to a local store, avoiding the duplicate-React
+and symlink issues that `npm link` / `file:` installs often cause.
 
-```  
-npm i --save ../path/to/react-components  
-```  
-
-which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency
-in `package.json` like:
+Install yalc globally once:
 
-```JSON  
-"dependencies": {
-  ...
-  "@ntbjs/react-components": "file:../path/to/react-components",
-  ...
-}
-```  
+```
+npm i -g yalc
+```
 
-The library with its utilities and components can then be imported and used in that project.
+#### In `@ntbjs/react-components` (this repo)
+
+1. Build the library:
+   ```
+   npm run build
+   ```
+2. Publish it to the local yalc store:
+   ```
+   yalc publish
+   ```
+3. After making further changes, rebuild and push the update to every consumer app that uses it:
+   ```
+   npm run build && yalc push
+   ```
+
+#### In the consumer app
+
+1. Add the locally published package:
+   ```
+   yalc add @ntbjs/react-components
+   ```
+   This copies the package into `.yalc/` and updates `package.json` to
+   `"@ntbjs/react-components": "file:.yalc/@ntbjs/react-components"`.
+2. Install dependencies:
+   ```
+   npm install
+   ```
+3. Start the app as usual. Updates sent with `yalc push` from the library are picked up automatically (restart the dev
+   server or clear its cache if changes don't show up).
+4. When done testing, restore the registry version and clean up:
+   ```
+   yalc remove @ntbjs/react-components
+   npm install
+   ```
+
+**Note:** Don't commit `.yalc/`, `yalc.lock` or the `file:.yalc/...` change in `package.json` — consider adding `.yalc`
+and `yalc.lock` to the consumer app's `.gitignore`.
 
 ### 📦 Publishing
 

package/build/icons/arrow-drop-down.svg.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgArrowDropDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 8 4"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M4 4L0 0h8L4 4z"
+  })));
+}
+
+export { SvgArrowDropDown as ReactComponent };
+//# sourceMappingURL=arrow-drop-down.svg.js.map

package/build/icons/arrow-drop-down.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-drop-down.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/widgets/Filmstrip/Cell/Cell.js

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Cell as Cell$1 } from './Cell.styled.js';
+
+const Cell = React__default.memo(function Cell({
+  itemId,
+  isActive = false,
+  isTabStop = false,
+  label,
+  onSelect,
+  children
+}) {
+  return React__default.createElement(Cell$1, {
+    type: "button",
+    role: "option",
+    "aria-selected": isActive,
+    "aria-label": label,
+    tabIndex: isTabStop ? 0 : -1,
+    "data-item-id": itemId,
+    $isActive: isActive,
+    onClick: () => onSelect?.(itemId)
+  }, children);
+});
+Cell.propTypes = process.env.NODE_ENV !== "production" ? {
+  itemId: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  isTabStop: PropTypes.bool,
+  label: PropTypes.string,
+  onSelect: PropTypes.func,
+  children: PropTypes.node
+} : {};
+
+export { Cell as default };
+//# sourceMappingURL=Cell.js.map

package/build/widgets/Filmstrip/Cell/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../../src/components/widgets/Filmstrip/Cell/Cell.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './Cell.styled';\n\n/**\n * One slot in the Filmstrip. Internal: it only knows whether it is active\n * and reports when it is chosen.\n */\n// No forwardRef: nothing outside needs a ref to a single cell yet.\n// memo: a cell re-renders only when its own props change, not on every selection.\nconst Cell = React.memo(function Cell({\n  itemId,\n  isActive = false,\n  isTabStop = false,\n  label,\n  onSelect,\n  children\n}) {\n  return (\n    <S.Cell\n      type=\"button\"\n      role=\"option\"\n      aria-selected={isActive}\n      // Named by the item's label, not by its content, so every option has a name\n      aria-label={label}\n      // Roving tabindex: only one cell is in the Tab order; arrows move between cells\n      tabIndex={isTabStop ? 0 : -1}\n      data-item-id={itemId}\n      $isActive={isActive}\n      onClick={() => onSelect?.(itemId)}\n    >\n      {children}\n    </S.Cell>\n  );\n});\n\nCell.propTypes = {\n  itemId: PropTypes.string.isRequired,\n  isActive: PropTypes.bool,\n  isTabStop: PropTypes.bool,\n  label: PropTypes.string,\n  onSelect: PropTypes.func,\n  children: PropTypes.node\n};\n\nexport default Cell;\n"],"names":["Cell","React","memo","itemId","isActive","isTabStop","label","onSelect","children","createElement","S","type","role","tabIndex","$isActive","onClick","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","bool","func","node"],"mappings":";;;;AAUMA,MAAAA,IAAI,GAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,IAAIA,CAAC;EACpCG,MAAM;AACNC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,KAAK;EACLC,QAAQ;AACRC,EAAAA,QAAAA;AACF,CAAC,EAAE;AACD,EAAA,OACEP,cAAA,CAAAQ,aAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAeR,QAAS;AAExB,IAAA,YAAA,EAAYE,KAAM;AAElBO,IAAAA,QAAQ,EAAER,SAAS,GAAG,CAAC,GAAG,CAAC,CAAE;AAC7B,IAAA,cAAA,EAAcF,MAAO;AACrBW,IAAAA,SAAS,EAAEV,QAAS;AACpBW,IAAAA,OAAO,EAAEA,MAAMR,QAAQ,GAAGJ,MAAM,CAAA;AAAE,GAAA,EAEjCK,QACK,CAAC,CAAA;AAEb,CAAC,EAAC;AAEFR,IAAI,CAACgB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AACfhB,EAAAA,MAAM,EAAEiB,SAAS,CAACC,MAAM,CAACC,UAAU;EACnClB,QAAQ,EAAEgB,SAAS,CAACG,IAAI;EACxBlB,SAAS,EAAEe,SAAS,CAACG,IAAI;EACzBjB,KAAK,EAAEc,SAAS,CAACC,MAAM;EACvBd,QAAQ,EAAEa,SAAS,CAACI,IAAI;EACxBhB,QAAQ,EAAEY,SAAS,CAACK,IAAAA;AACtB,CAAC,GAAA,EAAA;;;;"}

package/build/widgets/Filmstrip/Cell/Cell.styled.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+const Cell = styled.button.attrs(applyDefaultTheme)`
+  /* anchor for the ring layer below */
+  position: relative;
+  flex: none;
+  width: 96px;
+  height: 72px;
+  padding: 0;
+  border: none;
+  background: ${props => props.theme.colors.neutral10};
+  cursor: pointer;
+
+  /* Orange, not the theme's primary green: green reads as "success / action done",
+     while this ring only marks where you are. Lighter shade in dark mode for contrast. */
+  ${props => props.theme.themeProp('--filmstrip-ring-color', props.theme.getColor('orange-400'), props.theme.getColor('orange-500'))}
+
+  /* The active ring is its own layer on top of the content. An outline on the button
+     itself gets covered by positioned children (Thumbnail is position: relative for the
+     play pill), so any renderItem could hide it. An inset box-shadow never changes
+     the cell size, and pointer-events: none keeps clicks going to the button. */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    box-shadow: ${props => props.$isActive ? 'inset 0 0 0 4px var(--filmstrip-ring-color)' : 'none'};
+  }
+
+  /* Keyboard navigation moves focus with the selection, so the browser's default focus
+     ring would draw a second line around the active ring. The ring layer shows focus. */
+  &:focus {
+    outline: none;
+  }
+
+  /* A focused cell that isn't active yet (e.g. tabbing in with nothing selected)
+     still needs a visible indicator for keyboard users. */
+  &:focus-visible::after {
+    box-shadow: inset 0 0 0 4px var(--filmstrip-ring-color);
+  }
+`;
+
+export { Cell };
+//# sourceMappingURL=Cell.styled.js.map

package/build/widgets/Filmstrip/Cell/Cell.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.styled.js","sources":["../../../../src/components/widgets/Filmstrip/Cell/Cell.styled.js"],"sourcesContent":["import styled from 'styled-components';\n// Fix: Cell/ is one folder deeper than Filmstrip/, so it needs one more `../`.\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\n// Was `styled.p`. A button is focusable and clickable by default.\n// `$isActive` is a transient prop, so it never reaches the DOM.\nexport const Cell = styled.button.attrs(applyDefaultTheme)`\n  /* anchor for the ring layer below */\n  position: relative;\n  flex: none;\n  width: 96px;\n  height: 72px;\n  padding: 0;\n  border: none;\n  background: ${props => props.theme.colors.neutral10};\n  cursor: pointer;\n\n  /* Orange, not the theme's primary green: green reads as \"success / action done\",\n     while this ring only marks where you are. Lighter shade in dark mode for contrast. */\n  ${props =>\n    props.theme.themeProp(\n      '--filmstrip-ring-color',\n      props.theme.getColor('orange-400'),\n      props.theme.getColor('orange-500')\n    )}\n\n  /* The active ring is its own layer on top of the content. An outline on the button\n     itself gets covered by positioned children (Thumbnail is position: relative for the\n     play pill), so any renderItem could hide it. An inset box-shadow never changes\n     the cell size, and pointer-events: none keeps clicks going to the button. */\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    box-shadow: ${props =>\n      props.$isActive ? 'inset 0 0 0 4px var(--filmstrip-ring-color)' : 'none'};\n  }\n\n  /* Keyboard navigation moves focus with the selection, so the browser's default focus\n     ring would draw a second line around the active ring. The ring layer shows focus. */\n  &:focus {\n    outline: none;\n  }\n\n  /* A focused cell that isn't active yet (e.g. tabbing in with nothing selected)\n     still needs a visible indicator for keyboard users. */\n  &:focus-visible::after {\n    box-shadow: inset 0 0 0 4px var(--filmstrip-ring-color);\n  }\n`;\n"],"names":["Cell","styled","button","attrs","applyDefaultTheme","props","theme","colors","neutral10","themeProp","getColor","$isActive"],"mappings":";;;AAMO,MAAMA,IAAI,GAAGC,MAAM,CAACC,MAAM,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAgBC,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,MAAM,CAACC,SAAS,CAAA;AACrD;AACA;AACA;AACA;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACG,SAAS,CACnB,wBAAwB,EACxBJ,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,YAAY,CAAC,EAClCL,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,YAAY,CACnC,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAkBL,EAAAA,KAAK,IACjBA,KAAK,CAACM,SAAS,GAAG,6CAA6C,GAAG,MAAM,CAAA;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/build/widgets/Filmstrip/Filmstrip.js

@@ -0,0 +1,240 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useCallback, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ReactComponent as SvgArrowDropDown } from '../../icons/arrow-drop-down.svg.js';
+import { Wrapper, ToggleBar, ToggleButton, ToggleIcon, Collapse, CollapseContent, Row, ScrollButton, Filmstrip as Filmstrip$1, LoadingCell, Spinner, LoadMoreSentinel } from './Filmstrip.styled.js';
+import Cell from './Cell/Cell.js';
+import Thumbnail from './Thumbnail/Thumbnail.js';
+
+const defaultRenderItem = item => React__default.createElement(Thumbnail, {
+  thumbnailUrl: item.thumbnailUrl,
+  alt: item.alt,
+  fileType: item.fileType,
+  duration: item.duration
+});
+const EMPTY_ITEMS = [];
+let idCounter = 0;
+const useFallbackId = () => {
+  const idRef = useRef(null);
+  if (idRef.current === null) {
+    idCounter += 1;
+    idRef.current = `filmstrip-${idCounter}`;
+  }
+  return idRef.current;
+};
+const useStripId = React__default.useId || useFallbackId;
+const Filmstrip = React__default.forwardRef(function Filmstrip({
+  items = EMPTY_ITEMS,
+  activeId,
+  onActiveChange,
+  renderItem = defaultRenderItem,
+  collapsible = false,
+  expanded,
+  defaultExpanded = true,
+  onExpandedChange,
+  onLoadMore,
+  hasMore = false,
+  isLoading = false,
+  loadMoreThreshold = 300,
+  showScrollButtons = false,
+  onKeyDown: onKeyDownProp,
+  id,
+  ...props
+}, forwardedRef) {
+  const generatedId = useStripId();
+  const stripId = id ?? generatedId;
+  const stripRef = useRef(null);
+  const setStripRef = useCallback(node => {
+    stripRef.current = node;
+    if (typeof forwardedRef === 'function') forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  const sentinelRef = useRef(null);
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isControlled = expanded !== undefined;
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const isVisible = !collapsible || isExpanded;
+  const onToggle = () => {
+    const nextExpanded = !isExpanded;
+    if (!isControlled) setInternalExpanded(nextExpanded);
+    onExpandedChange?.(nextExpanded);
+  };
+  useEffect(() => {
+    const root = stripRef.current;
+    const sentinel = sentinelRef.current;
+    if (!onLoadMore || !hasMore || isLoading || !isVisible || !root || !sentinel) {
+      return undefined;
+    }
+    if (typeof IntersectionObserver === 'undefined') return undefined;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) onLoadMore();
+    }, {
+      root,
+      rootMargin: `0px ${loadMoreThreshold}px 0px 0px`
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [items.length, onLoadMore, hasMore, isLoading, isVisible, loadMoreThreshold]);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!showScrollButtons || !isVisible || !strip) return undefined;
+    const updateEdges = () => {
+      setCanScrollLeft(strip.scrollLeft > 1);
+      setCanScrollRight(strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1);
+    };
+    updateEdges();
+    strip.addEventListener('scroll', updateEdges, {
+      passive: true
+    });
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateEdges);
+    resizeObserver?.observe(strip);
+    return () => {
+      strip.removeEventListener('scroll', updateEdges);
+      resizeObserver?.disconnect();
+    };
+  }, [showScrollButtons, isVisible, items.length, isLoading]);
+  const scrollPage = direction => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const view = strip.getBoundingClientRect();
+    const cells = Array.from(strip.querySelectorAll('[data-item-id]'));
+    let target;
+    if (direction === 'right') {
+      const edgeCell = [...cells].reverse().find(cell => cell.getBoundingClientRect().left < view.right - 1);
+      const offset = edgeCell ? edgeCell.getBoundingClientRect().left - view.left : 0;
+      target = strip.scrollLeft + (offset > 1 ? offset : strip.clientWidth);
+    } else {
+      const edgeCell = cells.find(cell => cell.getBoundingClientRect().right > view.left + 1);
+      const offset = edgeCell ? view.right - edgeCell.getBoundingClientRect().right : 0;
+      target = strip.scrollLeft - (offset > 1 ? offset : strip.clientWidth);
+    }
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    strip.scrollTo({
+      left: target,
+      behavior: reduceMotion ? 'auto' : 'smooth'
+    });
+  };
+  const onKeyDown = event => {
+    onKeyDownProp?.(event);
+    if (event.defaultPrevented || !items.length) return;
+    const currentIndex = items.findIndex(item => item.id === activeId);
+    let nextIndex;
+    switch (event.key) {
+      case 'ArrowRight':
+        nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, items.length - 1);
+        break;
+      case 'ArrowLeft':
+        nextIndex = currentIndex < 0 ? 0 : Math.max(currentIndex - 1, 0);
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (nextIndex === currentIndex) return;
+    const nextId = items[nextIndex].id;
+    onActiveChange?.(nextId);
+    const cell = stripRef.current?.querySelector(`[data-item-id="${CSS.escape(nextId)}"]`);
+    if (cell) {
+      cell.focus({
+        preventScroll: true
+      });
+      cell.scrollIntoView?.({
+        block: 'nearest',
+        inline: 'nearest',
+        behavior: 'smooth'
+      });
+    }
+  };
+  const hasActiveItem = items.some(item => item.id === activeId);
+  return (React__default.createElement(Wrapper, null, collapsible && React__default.createElement(ToggleBar, null, React__default.createElement(ToggleButton, {
+      type: "button",
+      "aria-expanded": isExpanded,
+      "aria-controls": stripId,
+      "aria-label": isExpanded ? 'Hide filmstrip' : 'Show filmstrip',
+      onClick: onToggle
+    }, React__default.createElement(ToggleIcon, {
+      $isExpanded: isExpanded
+    }, React__default.createElement(SvgArrowDropDown, {
+      "aria-hidden": "true"
+    })))), React__default.createElement(Collapse, {
+      $isExpanded: isVisible
+    }, React__default.createElement(CollapseContent, null, React__default.createElement(Row, null, showScrollButtons && React__default.createElement(ScrollButton, {
+      type: "button",
+      $direction: "left",
+      "aria-label": "Scroll filmstrip left",
+      "aria-controls": stripId,
+      disabled: !canScrollLeft,
+      onClick: () => scrollPage('left')
+    }, React__default.createElement(SvgArrowDropDown, {
+      "aria-hidden": "true"
+    })), React__default.createElement(Filmstrip$1, _extends({
+      ref: setStripRef,
+      id: stripId,
+      role: "listbox",
+      "aria-orientation": "horizontal",
+      "aria-busy": isLoading
+    }, props, {
+      onKeyDown: onKeyDown
+    }), items.map((item, index) => {
+      const isActive = item.id === activeId;
+      return (React__default.createElement(Cell, {
+          key: item.id,
+          itemId: item.id,
+          isActive: isActive,
+          isTabStop: hasActiveItem ? isActive : index === 0,
+          label: item.alt || `Asset ${index + 1}`,
+          onSelect: onActiveChange
+        }, renderItem(item, {
+          isActive
+        }))
+      );
+    }), isLoading && React__default.createElement(LoadingCell, {
+      "aria-hidden": "true"
+    }, React__default.createElement(Spinner, null)), onLoadMore && hasMore && React__default.createElement(LoadMoreSentinel, {
+      ref: sentinelRef,
+      "aria-hidden": "true"
+    })), showScrollButtons && React__default.createElement(ScrollButton, {
+      type: "button",
+      $direction: "right",
+      "aria-label": "Scroll filmstrip right",
+      "aria-controls": stripId,
+      disabled: !canScrollRight,
+      onClick: () => scrollPage('right')
+    }, React__default.createElement(SvgArrowDropDown, {
+      "aria-hidden": "true"
+    }))))))
+  );
+});
+Filmstrip.propTypes = process.env.NODE_ENV !== "production" ? {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    thumbnailUrl: PropTypes.string,
+    alt: PropTypes.string.isRequired,
+    fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']),
+    duration: PropTypes.number
+  })),
+  activeId: PropTypes.string,
+  onActiveChange: PropTypes.func,
+  renderItem: PropTypes.func,
+  collapsible: PropTypes.bool,
+  expanded: PropTypes.bool,
+  defaultExpanded: PropTypes.bool,
+  onExpandedChange: PropTypes.func,
+  onLoadMore: PropTypes.func,
+  hasMore: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  loadMoreThreshold: PropTypes.number,
+  showScrollButtons: PropTypes.bool,
+  id: PropTypes.string,
+  onKeyDown: PropTypes.func
+} : {};
+
+export { Filmstrip as default };
+//# sourceMappingURL=Filmstrip.js.map

package/build/widgets/Filmstrip/Filmstrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filmstrip.js","sources":["../../../src/components/widgets/Filmstrip/Filmstrip.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { ArrowDropDownIcon } from '../../../icons';\nimport * as S from './Filmstrip.styled';\nimport Cell from './Cell';\nimport Thumbnail from './Thumbnail';\n\nconst defaultRenderItem = item => (\n  <Thumbnail\n    thumbnailUrl={item.thumbnailUrl}\n    alt={item.alt}\n    fileType={item.fileType}\n    duration={item.duration}\n  />\n);\n\nconst EMPTY_ITEMS = [];\n\n// The toggle button needs the strip's id for aria-controls. React.useId only exists from\n// React 18, and this library supports 16.8+, so older versions fall back to a counter.\n// Picking the hook once, at module level, keeps the hook order the same on every render.\nlet idCounter = 0;\nconst useFallbackId = () => {\n  const idRef = useRef(null);\n  if (idRef.current === null) {\n    idCounter += 1;\n    idRef.current = `filmstrip-${idCounter}`;\n  }\n  return idRef.current;\n};\nconst useStripId = React.useId || useFallbackId;\n\n/**\n * Horizontal strip of thumbnails. Controlled: the parent owns `activeId`\n * and updates it from `onActiveChange`.\n *\n * With `collapsible`, a bar with a centered arrow above the strip hides and shows it.\n * The expanded state works both ways:\n * - controlled: pass `expanded` and update it from `onExpandedChange` (e.g. keep it in Redux)\n * - uncontrolled: leave `expanded` out; the Filmstrip keeps its own state, starting at `defaultExpanded`\n *\n * Loading more: the Filmstrip never fetches. When the user scrolls near the end it calls\n * `onLoadMore`; the parent fetches the next page and appends it to `items`. `hasMore={false}`\n * stops further calls, and `isLoading` prevents duplicate requests while a fetch runs.\n */\nconst Filmstrip = React.forwardRef(function Filmstrip(\n  {\n    items = EMPTY_ITEMS,\n    activeId,\n    onActiveChange,\n    renderItem = defaultRenderItem,\n    collapsible = false,\n    expanded,\n    defaultExpanded = true,\n    onExpandedChange,\n    onLoadMore,\n    hasMore = false,\n    isLoading = false,\n    loadMoreThreshold = 300,\n    showScrollButtons = false,\n    onKeyDown: onKeyDownProp,\n    id,\n    ...props\n  },\n  forwardedRef\n) {\n  // Always call the hook (hook order), but a parent's `id` wins. The toggle and page\n  // buttons use the same value for aria-controls, so they keep pointing at the strip.\n  const generatedId = useStripId();\n  const stripId = id ?? generatedId;\n\n  // The Filmstrip needs its own ref to the scroll container (as the observer's root),\n  // but the parent may also pass a ref. An element takes only one `ref`, so this\n  // callback ref fills both: ours, and the parent's (function or object ref).\n  const stripRef = useRef(null);\n  const setStripRef = useCallback(\n    node => {\n      stripRef.current = node;\n      if (typeof forwardedRef === 'function') forwardedRef(node);\n      else if (forwardedRef) forwardedRef.current = node;\n    },\n    [forwardedRef]\n  );\n\n  // An invisible element after the last cell. When it scrolls into view, the end is near.\n  const sentinelRef = useRef(null);\n\n  // Own state, only used when the parent doesn't control `expanded`\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  // `expanded` given (true or false) = controlled. Left out (undefined) = uncontrolled.\n  const isControlled = expanded !== undefined;\n  const isExpanded = isControlled ? expanded : internalExpanded;\n  // A strip that can't collapse is always visible, whatever `expanded` says\n  const isVisible = !collapsible || isExpanded;\n\n  const onToggle = () => {\n    const nextExpanded = !isExpanded;\n    // Uncontrolled: update our own state. Controlled: only report, the parent decides.\n    if (!isControlled) setInternalExpanded(nextExpanded);\n    onExpandedChange?.(nextExpanded);\n  };\n\n  // Asks the parent for more items when the sentinel comes within `loadMoreThreshold`\n  // pixels of the strip's right edge. IntersectionObserver lets the browser do the\n  // watching, so there's no scroll listener running on every scroll event.\n  useEffect(() => {\n    const root = stripRef.current;\n    const sentinel = sentinelRef.current;\n    // Nothing to do: no callback, no more pages, a fetch already running, or collapsed\n    if (!onLoadMore || !hasMore || isLoading || !isVisible || !root || !sentinel) {\n      return undefined;\n    }\n    // Not available in old browsers or in jsdom (Jest)\n    if (typeof IntersectionObserver === 'undefined') return undefined;\n\n    const observer = new IntersectionObserver(\n      entries => {\n        if (entries[0].isIntersecting) onLoadMore();\n      },\n      // A positive right margin grows the root, so loading starts before the real end\n      { root, rootMargin: `0px ${loadMoreThreshold}px 0px 0px` }\n    );\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n    // items.length: a new observer after each page checks again right away. If the new\n    // page didn't fill the strip, the sentinel is still in view and the next page loads.\n  }, [items.length, onLoadMore, hasMore, isLoading, isVisible, loadMoreThreshold]);\n\n  // Page buttons: whether there is anything left to scroll on each side. Updated on\n  // scroll, on resize (ResizeObserver) and when items are added.\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!showScrollButtons || !isVisible || !strip) return undefined;\n\n    const updateEdges = () => {\n      // 1px tolerance: scrollLeft can be fractional on zoomed or high-DPI screens\n      setCanScrollLeft(strip.scrollLeft > 1);\n      setCanScrollRight(strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1);\n    };\n    updateEdges();\n\n    strip.addEventListener('scroll', updateEdges, { passive: true });\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateEdges);\n    resizeObserver?.observe(strip);\n    return () => {\n      strip.removeEventListener('scroll', updateEdges);\n      resizeObserver?.disconnect();\n    };\n  }, [showScrollButtons, isVisible, items.length, isLoading]);\n\n  // Scrolls one page. Right: the last (even partly) visible cell becomes the first one.\n  // Left: the first visible cell becomes the last one. The selection doesn't change.\n  const scrollPage = direction => {\n    const strip = stripRef.current;\n    if (!strip) return;\n    const view = strip.getBoundingClientRect();\n    const cells = Array.from(strip.querySelectorAll('[data-item-id]'));\n    // Rectangles instead of offsetLeft: the strip has no CSS position, so offsetLeft\n    // would be measured from some ancestor instead of the strip.\n    let target;\n    if (direction === 'right') {\n      // Last cell that starts before the right edge\n      const edgeCell = [...cells]\n        .reverse()\n        .find(cell => cell.getBoundingClientRect().left < view.right - 1);\n      const offset = edgeCell ? edgeCell.getBoundingClientRect().left - view.left : 0;\n      // A cell already at the left edge (or none found) would mean no movement: page by width\n      target = strip.scrollLeft + (offset > 1 ? offset : strip.clientWidth);\n    } else {\n      // First cell that ends after the left edge\n      const edgeCell = cells.find(cell => cell.getBoundingClientRect().right > view.left + 1);\n      const offset = edgeCell ? view.right - edgeCell.getBoundingClientRect().right : 0;\n      target = strip.scrollLeft - (offset > 1 ? offset : strip.clientWidth);\n    }\n    // The browser clamps at both ends, so the last page simply stops at the end\n    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n    strip.scrollTo({ left: target, behavior: reduceMotion ? 'auto' : 'smooth' });\n  };\n\n  // Keyboard navigation: with a cell focused (e.g. after clicking it), the arrow keys\n  // select the previous/next asset, Home/End jump to the first/last. Focus follows the\n  // selection so the next key press continues from there, and the cell scrolls into view.\n  const onKeyDown = event => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented || !items.length) return;\n\n    const currentIndex = items.findIndex(item => item.id === activeId);\n    let nextIndex;\n    switch (event.key) {\n      case 'ArrowRight':\n        nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, items.length - 1);\n        break;\n      case 'ArrowLeft':\n        nextIndex = currentIndex < 0 ? 0 : Math.max(currentIndex - 1, 0);\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = items.length - 1;\n        break;\n      default:\n        return;\n    }\n    // Stop the browser from scrolling the strip/page with the arrow keys\n    event.preventDefault();\n    if (nextIndex === currentIndex) return;\n\n    const nextId = items[nextIndex].id;\n    onActiveChange?.(nextId);\n\n    const cell = stripRef.current?.querySelector(`[data-item-id=\"${CSS.escape(nextId)}\"]`);\n    if (cell) {\n      cell.focus({ preventScroll: true });\n      cell.scrollIntoView?.({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });\n    }\n  };\n\n  // The Tab stop: the active cell, or the first one when nothing is active yet\n  const hasActiveItem = items.some(item => item.id === activeId);\n\n  return (\n    // The wrapper holds the toggle bar and the strip. The toggle can't live inside the\n    // strip: it would scroll away with the thumbnails and sit inside the listbox.\n    <S.Wrapper>\n      {collapsible && (\n        <S.ToggleBar>\n          {/* A real button: focusable, works with Enter/Space. aria-expanded tells screen\n              readers the current state, aria-controls which element it shows and hides. */}\n          <S.ToggleButton\n            type=\"button\"\n            aria-expanded={isExpanded}\n            aria-controls={stripId}\n            aria-label={isExpanded ? 'Hide filmstrip' : 'Show filmstrip'}\n            onClick={onToggle}\n          >\n            {/* One icon, rotated with CSS: down = \"hide\", up = \"show\". */}\n            <S.ToggleIcon $isExpanded={isExpanded}>\n              <ArrowDropDownIcon aria-hidden=\"true\" />\n            </S.ToggleIcon>\n          </S.ToggleButton>\n        </S.ToggleBar>\n      )}\n\n      {/* Collapse animates the height and slides the strip down (see Filmstrip.styled.js).\n          When collapsed it also sets visibility: hidden, so hidden cells can't be tabbed\n          to. A non-collapsible strip is always expanded, so this changes nothing for it. */}\n      <S.Collapse $isExpanded={isVisible}>\n        <S.CollapseContent>\n          {/* The ref and rest props (aria-label, ...) stay on the strip, as before, so the\n              listbox keeps its label and a parent's ref still points to the scroll container. */}\n          <S.Row>\n            {showScrollButtons && (\n              // Outside the listbox: a button can't be an option. aria-controls links it to the strip.\n              <S.ScrollButton\n                type=\"button\"\n                $direction=\"left\"\n                aria-label=\"Scroll filmstrip left\"\n                aria-controls={stripId}\n                disabled={!canScrollLeft}\n                onClick={() => scrollPage('left')}\n              >\n                <ArrowDropDownIcon aria-hidden=\"true\" />\n              </S.ScrollButton>\n            )}\n            <S.Filmstrip\n              ref={setStripRef}\n              id={stripId}\n              role=\"listbox\"\n              aria-orientation=\"horizontal\"\n              // Tells assistive technology the list is being updated while a page loads\n              aria-busy={isLoading}\n              {...props}\n              onKeyDown={onKeyDown}\n            >\n              {items.map((item, index) => {\n                const isActive = item.id === activeId;\n\n                return (\n                  // Fix: every element in a mapped list needs a stable `key`.\n                  <Cell\n                    key={item.id}\n                    itemId={item.id}\n                    isActive={isActive}\n                    isTabStop={hasActiveItem ? isActive : index === 0}\n                    // The option's accessible name. It must not depend on the thumbnail:\n                    // audio and image-less items have no <img> to take a name from.\n                    label={item.alt || `Asset ${index + 1}`}\n                    onSelect={onActiveChange}\n                  >\n                    {/* The Filmstrip calls renderItem and hands the result to Cell as children.\n                      No file-type logic here: that lives in Thumbnail (or the parent's renderItem). */}\n                    {renderItem(item, { isActive })}\n                  </Cell>\n                );\n              })}\n              {/* A spinner cell at the end while the parent fetches the next page. It fades in\n                after a short delay (see Filmstrip.styled.js), so a fast response never\n                flashes it. aria-hidden: screen readers get aria-busy on the listbox instead. */}\n              {isLoading && (\n                <S.LoadingCell aria-hidden=\"true\">\n                  <S.Spinner />\n                </S.LoadingCell>\n              )}\n              {/* Only rendered while there's something left to load. aria-hidden: it's not an\n                option, so screen readers skip it inside the listbox. */}\n              {onLoadMore && hasMore && <S.LoadMoreSentinel ref={sentinelRef} aria-hidden=\"true\" />}\n            </S.Filmstrip>\n            {showScrollButtons && (\n              <S.ScrollButton\n                type=\"button\"\n                $direction=\"right\"\n                aria-label=\"Scroll filmstrip right\"\n                aria-controls={stripId}\n                disabled={!canScrollRight}\n                onClick={() => scrollPage('right')}\n              >\n                <ArrowDropDownIcon aria-hidden=\"true\" />\n              </S.ScrollButton>\n            )}\n          </S.Row>\n        </S.CollapseContent>\n      </S.Collapse>\n    </S.Wrapper>\n  );\n});\n\nFilmstrip.propTypes = {\n  /** The assets to show, in order. */\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      /** Still image. For videos, the poster image, never the video file. */\n      thumbnailUrl: PropTypes.string,\n      /** Required: the cell's accessible name (screen readers announce it for each option). */\n      alt: PropTypes.string.isRequired,\n      /** Used by the default renderer: audio shows an icon, video shows a play pill. */\n      fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']),\n      /** Video duration in milliseconds, shown in the play pill. */\n      duration: PropTypes.number\n    })\n  ),\n  /** Id of the active item. Owned by the parent (controlled). */\n  activeId: PropTypes.string,\n  /** Called with the id of the item the user chose. */\n  onActiveChange: PropTypes.func,\n  /** Renders the content of one cell: (item, { isActive }) => node. Defaults to the thumbnail image. */\n  renderItem: PropTypes.func,\n  /** Shows a bar with an arrow above the strip that hides and shows it. */\n  collapsible: PropTypes.bool,\n  /** Controlled: whether the strip is shown. Leave out to let the Filmstrip manage it. */\n  expanded: PropTypes.bool,\n  /** Uncontrolled: whether the strip starts shown. Ignored when `expanded` is passed. */\n  defaultExpanded: PropTypes.bool,\n  /** Called with the new value when the user hides or shows the strip. */\n  onExpandedChange: PropTypes.func,\n  /** Called when the user scrolls near the end. Fetch the next page and append it to `items`. */\n  onLoadMore: PropTypes.func,\n  /** Whether more items can be loaded. Set to false when the last page came back. */\n  hasMore: PropTypes.bool,\n  /** True while a page is being fetched, so `onLoadMore` isn't called twice. */\n  isLoading: PropTypes.bool,\n  /** How many pixels before the end `onLoadMore` is called. */\n  loadMoreThreshold: PropTypes.number,\n  /** Shows a button on each side that scrolls the strip one page. Doesn't change the selection. */\n  showScrollButtons: PropTypes.bool,\n  /** Id of the scroll container. Generated when left out. */\n  id: PropTypes.string,\n  /** Called before the built-in arrow-key handling; call preventDefault() to skip it. */\n  onKeyDown: PropTypes.func\n};\n\nexport default Filmstrip;\n"],"names":["defaultRenderItem","item","React","createElement","Thumbnail","thumbnailUrl","alt","fileType","duration","EMPTY_ITEMS","idCounter","useFallbackId","idRef","useRef","current","useStripId","useId","Filmstrip","forwardRef","items","activeId","onActiveChange","renderItem","collapsible","expanded","defaultExpanded","onExpandedChange","onLoadMore","hasMore","isLoading","loadMoreThreshold","showScrollButtons","onKeyDown","onKeyDownProp","id","props","forwardedRef","generatedId","stripId","stripRef","setStripRef","useCallback","node","sentinelRef","internalExpanded","setInternalExpanded","useState","isControlled","undefined","isExpanded","isVisible","onToggle","nextExpanded","useEffect","root","sentinel","IntersectionObserver","observer","entries","isIntersecting","rootMargin","observe","disconnect","length","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","strip","updateEdges","scrollLeft","clientWidth","scrollWidth","addEventListener","passive","resizeObserver","ResizeObserver","removeEventListener","scrollPage","direction","view","getBoundingClientRect","cells","Array","from","querySelectorAll","target","edgeCell","reverse","find","cell","left","right","offset","reduceMotion","window","matchMedia","matches","scrollTo","behavior","event","defaultPrevented","currentIndex","findIndex","nextIndex","key","Math","min","max","preventDefault","nextId","querySelector","CSS","escape","focus","preventScroll","scrollIntoView","block","inline","hasActiveItem","some","S","type","onClick","$isExpanded","ArrowDropDownIcon","$direction","disabled","_extends","ref","role","map","index","isActive","Cell","itemId","isTabStop","label","onSelect","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","string","isRequired","oneOf","number","func","bool"],"mappings":";;;;;;;;AAOA,MAAMA,iBAAiB,GAAGC,IAAI,IAC5BC,cAAA,CAAAC,aAAA,CAACC,SAAS,EAAA;EACRC,YAAY,EAAEJ,IAAI,CAACI,YAAa;EAChCC,GAAG,EAAEL,IAAI,CAACK,GAAI;EACdC,QAAQ,EAAEN,IAAI,CAACM,QAAS;EACxBC,QAAQ,EAAEP,IAAI,CAACO,QAAAA;AAAS,CACzB,CACF,CAAA;AAED,MAAMC,WAAW,GAAG,EAAE,CAAA;AAKtB,IAAIC,SAAS,GAAG,CAAC,CAAA;AACjB,MAAMC,aAAa,GAAGA,MAAM;AAC1B,EAAA,MAAMC,KAAK,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AAC1B,EAAA,IAAID,KAAK,CAACE,OAAO,KAAK,IAAI,EAAE;AAC1BJ,IAAAA,SAAS,IAAI,CAAC,CAAA;AACdE,IAAAA,KAAK,CAACE,OAAO,GAAG,CAAA,UAAA,EAAaJ,SAAS,CAAE,CAAA,CAAA;AAC1C,GAAA;EACA,OAAOE,KAAK,CAACE,OAAO,CAAA;AACtB,CAAC,CAAA;AACD,MAAMC,UAAU,GAAGb,cAAK,CAACc,KAAK,IAAIL,aAAa,CAAA;AAezCM,MAAAA,SAAS,GAAGf,cAAK,CAACgB,UAAU,CAAC,SAASD,SAASA,CACnD;AACEE,EAAAA,KAAK,GAAGV,WAAW;EACnBW,QAAQ;EACRC,cAAc;AACdC,EAAAA,UAAU,GAAGtB,iBAAiB;AAC9BuB,EAAAA,WAAW,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,eAAe,GAAG,IAAI;EACtBC,gBAAgB;EAChBC,UAAU;AACVC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,iBAAiB,GAAG,GAAG;AACvBC,EAAAA,iBAAiB,GAAG,KAAK;AACzBC,EAAAA,SAAS,EAAEC,aAAa;EACxBC,EAAE;EACF,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AAGA,EAAA,MAAMC,WAAW,GAAGtB,UAAU,EAAE,CAAA;AAChC,EAAA,MAAMuB,OAAO,GAAGJ,EAAE,IAAIG,WAAW,CAAA;AAKjC,EAAA,MAAME,QAAQ,GAAG1B,MAAM,CAAC,IAAI,CAAC,CAAA;AAC7B,EAAA,MAAM2B,WAAW,GAAGC,WAAW,CAC7BC,IAAI,IAAI;IACNH,QAAQ,CAACzB,OAAO,GAAG4B,IAAI,CAAA;AACvB,IAAA,IAAI,OAAON,YAAY,KAAK,UAAU,EAAEA,YAAY,CAACM,IAAI,CAAC,CAAC,KACtD,IAAIN,YAAY,EAAEA,YAAY,CAACtB,OAAO,GAAG4B,IAAI,CAAA;AACpD,GAAC,EACD,CAACN,YAAY,CACf,CAAC,CAAA;AAGD,EAAA,MAAMO,WAAW,GAAG9B,MAAM,CAAC,IAAI,CAAC,CAAA;EAGhC,MAAM,CAAC+B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,QAAQ,CAACrB,eAAe,CAAC,CAAA;AAEzE,EAAA,MAAMsB,YAAY,GAAGvB,QAAQ,KAAKwB,SAAS,CAAA;AAC3C,EAAA,MAAMC,UAAU,GAAGF,YAAY,GAAGvB,QAAQ,GAAGoB,gBAAgB,CAAA;AAE7D,EAAA,MAAMM,SAAS,GAAG,CAAC3B,WAAW,IAAI0B,UAAU,CAAA;EAE5C,MAAME,QAAQ,GAAGA,MAAM;IACrB,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAA;AAEhC,IAAA,IAAI,CAACF,YAAY,EAAEF,mBAAmB,CAACO,YAAY,CAAC,CAAA;IACpD1B,gBAAgB,GAAG0B,YAAY,CAAC,CAAA;GACjC,CAAA;AAKDC,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,MAAMC,IAAI,GAAGf,QAAQ,CAACzB,OAAO,CAAA;AAC7B,IAAA,MAAMyC,QAAQ,GAAGZ,WAAW,CAAC7B,OAAO,CAAA;AAEpC,IAAA,IAAI,CAACa,UAAU,IAAI,CAACC,OAAO,IAAIC,SAAS,IAAI,CAACqB,SAAS,IAAI,CAACI,IAAI,IAAI,CAACC,QAAQ,EAAE;AAC5E,MAAA,OAAOP,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,IAAI,OAAOQ,oBAAoB,KAAK,WAAW,EAAE,OAAOR,SAAS,CAAA;AAEjE,IAAA,MAAMS,QAAQ,GAAG,IAAID,oBAAoB,CACvCE,OAAO,IAAI;MACT,IAAIA,OAAO,CAAC,CAAC,CAAC,CAACC,cAAc,EAAEhC,UAAU,EAAE,CAAA;AAC7C,KAAC,EAED;MAAE2B,IAAI;MAAEM,UAAU,EAAE,OAAO9B,iBAAiB,CAAA,UAAA,CAAA;AAAa,KAC3D,CAAC,CAAA;AACD2B,IAAAA,QAAQ,CAACI,OAAO,CAACN,QAAQ,CAAC,CAAA;AAC1B,IAAA,OAAO,MAAME,QAAQ,CAACK,UAAU,EAAE,CAAA;AAGpC,GAAC,EAAE,CAAC3C,KAAK,CAAC4C,MAAM,EAAEpC,UAAU,EAAEC,OAAO,EAAEC,SAAS,EAAEqB,SAAS,EAAEpB,iBAAiB,CAAC,CAAC,CAAA;EAIhF,MAAM,CAACkC,aAAa,EAAEC,gBAAgB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzD,MAAM,CAACoB,cAAc,EAAEC,iBAAiB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE3DO,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,MAAMe,KAAK,GAAG7B,QAAQ,CAACzB,OAAO,CAAA;IAC9B,IAAI,CAACiB,iBAAiB,IAAI,CAACmB,SAAS,IAAI,CAACkB,KAAK,EAAE,OAAOpB,SAAS,CAAA;IAEhE,MAAMqB,WAAW,GAAGA,MAAM;AAExBJ,MAAAA,gBAAgB,CAACG,KAAK,CAACE,UAAU,GAAG,CAAC,CAAC,CAAA;AACtCH,MAAAA,iBAAiB,CAACC,KAAK,CAACE,UAAU,GAAGF,KAAK,CAACG,WAAW,GAAGH,KAAK,CAACI,WAAW,GAAG,CAAC,CAAC,CAAA;KAChF,CAAA;AACDH,IAAAA,WAAW,EAAE,CAAA;AAEbD,IAAAA,KAAK,CAACK,gBAAgB,CAAC,QAAQ,EAAEJ,WAAW,EAAE;AAAEK,MAAAA,OAAO,EAAE,IAAA;AAAK,KAAC,CAAC,CAAA;AAChE,IAAA,MAAMC,cAAc,GAClB,OAAOC,cAAc,KAAK,WAAW,GAAG,IAAI,GAAG,IAAIA,cAAc,CAACP,WAAW,CAAC,CAAA;AAChFM,IAAAA,cAAc,EAAEd,OAAO,CAACO,KAAK,CAAC,CAAA;AAC9B,IAAA,OAAO,MAAM;AACXA,MAAAA,KAAK,CAACS,mBAAmB,CAAC,QAAQ,EAAER,WAAW,CAAC,CAAA;MAChDM,cAAc,EAAEb,UAAU,EAAE,CAAA;KAC7B,CAAA;AACH,GAAC,EAAE,CAAC/B,iBAAiB,EAAEmB,SAAS,EAAE/B,KAAK,CAAC4C,MAAM,EAAElC,SAAS,CAAC,CAAC,CAAA;EAI3D,MAAMiD,UAAU,GAAGC,SAAS,IAAI;AAC9B,IAAA,MAAMX,KAAK,GAAG7B,QAAQ,CAACzB,OAAO,CAAA;IAC9B,IAAI,CAACsD,KAAK,EAAE,OAAA;AACZ,IAAA,MAAMY,IAAI,GAAGZ,KAAK,CAACa,qBAAqB,EAAE,CAAA;AAC1C,IAAA,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAI,CAAChB,KAAK,CAACiB,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAA;AAGlE,IAAA,IAAIC,MAAM,CAAA;IACV,IAAIP,SAAS,KAAK,OAAO,EAAE;AAEzB,MAAA,MAAMQ,QAAQ,GAAG,CAAC,GAAGL,KAAK,CAAC,CACxBM,OAAO,EAAE,CACTC,IAAI,CAACC,IAAI,IAAIA,IAAI,CAACT,qBAAqB,EAAE,CAACU,IAAI,GAAGX,IAAI,CAACY,KAAK,GAAG,CAAC,CAAC,CAAA;AACnE,MAAA,MAAMC,MAAM,GAAGN,QAAQ,GAAGA,QAAQ,CAACN,qBAAqB,EAAE,CAACU,IAAI,GAAGX,IAAI,CAACW,IAAI,GAAG,CAAC,CAAA;AAE/EL,MAAAA,MAAM,GAAGlB,KAAK,CAACE,UAAU,IAAIuB,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAGzB,KAAK,CAACG,WAAW,CAAC,CAAA;AACvE,KAAC,MAAM;MAEL,MAAMgB,QAAQ,GAAGL,KAAK,CAACO,IAAI,CAACC,IAAI,IAAIA,IAAI,CAACT,qBAAqB,EAAE,CAACW,KAAK,GAAGZ,IAAI,CAACW,IAAI,GAAG,CAAC,CAAC,CAAA;AACvF,MAAA,MAAME,MAAM,GAAGN,QAAQ,GAAGP,IAAI,CAACY,KAAK,GAAGL,QAAQ,CAACN,qBAAqB,EAAE,CAACW,KAAK,GAAG,CAAC,CAAA;AACjFN,MAAAA,MAAM,GAAGlB,KAAK,CAACE,UAAU,IAAIuB,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAGzB,KAAK,CAACG,WAAW,CAAC,CAAA;AACvE,KAAA;IAEA,MAAMuB,YAAY,GAAGC,MAAM,CAACC,UAAU,GAAG,kCAAkC,CAAC,CAACC,OAAO,CAAA;IACpF7B,KAAK,CAAC8B,QAAQ,CAAC;AAAEP,MAAAA,IAAI,EAAEL,MAAM;AAAEa,MAAAA,QAAQ,EAAEL,YAAY,GAAG,MAAM,GAAG,QAAA;AAAS,KAAC,CAAC,CAAA;GAC7E,CAAA;EAKD,MAAM9D,SAAS,GAAGoE,KAAK,IAAI;IACzBnE,aAAa,GAAGmE,KAAK,CAAC,CAAA;IACtB,IAAIA,KAAK,CAACC,gBAAgB,IAAI,CAAClF,KAAK,CAAC4C,MAAM,EAAE,OAAA;AAE7C,IAAA,MAAMuC,YAAY,GAAGnF,KAAK,CAACoF,SAAS,CAACtG,IAAI,IAAIA,IAAI,CAACiC,EAAE,KAAKd,QAAQ,CAAC,CAAA;AAClE,IAAA,IAAIoF,SAAS,CAAA;IACb,QAAQJ,KAAK,CAACK,GAAG;AACf,MAAA,KAAK,YAAY;QACfD,SAAS,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,GAAGI,IAAI,CAACC,GAAG,CAACL,YAAY,GAAG,CAAC,EAAEnF,KAAK,CAAC4C,MAAM,GAAG,CAAC,CAAC,CAAA;AAC/E,QAAA,MAAA;AACF,MAAA,KAAK,WAAW;AACdyC,QAAAA,SAAS,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,GAAGI,IAAI,CAACE,GAAG,CAACN,YAAY,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AAChE,QAAA,MAAA;AACF,MAAA,KAAK,MAAM;AACTE,QAAAA,SAAS,GAAG,CAAC,CAAA;AACb,QAAA,MAAA;AACF,MAAA,KAAK,KAAK;AACRA,QAAAA,SAAS,GAAGrF,KAAK,CAAC4C,MAAM,GAAG,CAAC,CAAA;AAC5B,QAAA,MAAA;AACF,MAAA;AACE,QAAA,OAAA;AACJ,KAAA;IAEAqC,KAAK,CAACS,cAAc,EAAE,CAAA;IACtB,IAAIL,SAAS,KAAKF,YAAY,EAAE,OAAA;AAEhC,IAAA,MAAMQ,MAAM,GAAG3F,KAAK,CAACqF,SAAS,CAAC,CAACtE,EAAE,CAAA;IAClCb,cAAc,GAAGyF,MAAM,CAAC,CAAA;AAExB,IAAA,MAAMpB,IAAI,GAAGnD,QAAQ,CAACzB,OAAO,EAAEiG,aAAa,CAAC,CAAkBC,eAAAA,EAAAA,GAAG,CAACC,MAAM,CAACH,MAAM,CAAC,IAAI,CAAC,CAAA;AACtF,IAAA,IAAIpB,IAAI,EAAE;MACRA,IAAI,CAACwB,KAAK,CAAC;AAAEC,QAAAA,aAAa,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;MACnCzB,IAAI,CAAC0B,cAAc,GAAG;AAAEC,QAAAA,KAAK,EAAE,SAAS;AAAEC,QAAAA,MAAM,EAAE,SAAS;AAAEnB,QAAAA,QAAQ,EAAE,QAAA;AAAS,OAAC,CAAC,CAAA;AACpF,KAAA;GACD,CAAA;AAGD,EAAA,MAAMoB,aAAa,GAAGpG,KAAK,CAACqG,IAAI,CAACvH,IAAI,IAAIA,IAAI,CAACiC,EAAE,KAAKd,QAAQ,CAAC,CAAA;EAE9D,QAGElB,cAAA,CAAAC,aAAA,CAACsH,OAAS,EAAA,IAAA,EACPlG,WAAW,IACVrB,cAAA,CAAAC,aAAA,CAACsH,SAAW,EAGVvH,IAAAA,EAAAA,cAAA,CAAAC,aAAA,CAACsH,YAAc,EAAA;AACbC,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,eAAA,EAAezE,UAAW;AAC1B,MAAA,eAAA,EAAeX,OAAQ;AACvB,MAAA,YAAA,EAAYW,UAAU,GAAG,gBAAgB,GAAG,gBAAiB;AAC7D0E,MAAAA,OAAO,EAAExE,QAAAA;AAAS,KAAA,EAGlBjD,cAAA,CAAAC,aAAA,CAACsH,UAAY,EAAA;AAACG,MAAAA,WAAW,EAAE3E,UAAAA;AAAW,KAAA,EACpC/C,cAAA,CAAAC,aAAA,CAAC0H,gBAAiB,EAAA;MAAC,aAAY,EAAA,MAAA;KAAQ,CAC3B,CACA,CACL,CACd,EAKD3H,cAAA,CAAAC,aAAA,CAACsH,QAAU,EAAA;AAACG,MAAAA,WAAW,EAAE1E,SAAAA;KACvBhD,EAAAA,cAAA,CAAAC,aAAA,CAACsH,eAAiB,EAAA,IAAA,EAGhBvH,cAAA,CAAAC,aAAA,CAACsH,GAAK,EACH1F,IAAAA,EAAAA,iBAAiB,IAEhB7B,cAAA,CAAAC,aAAA,CAACsH,YAAc,EAAA;AACbC,MAAAA,IAAI,EAAC,QAAQ;AACbI,MAAAA,UAAU,EAAC,MAAM;AACjB,MAAA,YAAA,EAAW,uBAAuB;AAClC,MAAA,eAAA,EAAexF,OAAQ;MACvByF,QAAQ,EAAE,CAAC/D,aAAc;AACzB2D,MAAAA,OAAO,EAAEA,MAAM7C,UAAU,CAAC,MAAM,CAAA;AAAE,KAAA,EAElC5E,cAAA,CAAAC,aAAA,CAAC0H,gBAAiB,EAAA;MAAC,aAAY,EAAA,MAAA;KAAQ,CACzB,CACjB,EACD3H,cAAA,CAAAC,aAAA,CAACsH,WAAW,EAAAO,QAAA,CAAA;AACVC,MAAAA,GAAG,EAAEzF,WAAY;AACjBN,MAAAA,EAAE,EAAEI,OAAQ;AACZ4F,MAAAA,IAAI,EAAC,SAAS;AACd,MAAA,kBAAA,EAAiB,YAAY;MAE7B,WAAWrG,EAAAA,SAAAA;AAAU,KAAA,EACjBM,KAAK,EAAA;AACTH,MAAAA,SAAS,EAAEA,SAAAA;KAEVb,CAAAA,EAAAA,KAAK,CAACgH,GAAG,CAAC,CAAClI,IAAI,EAAEmI,KAAK,KAAK;AAC1B,MAAA,MAAMC,QAAQ,GAAGpI,IAAI,CAACiC,EAAE,KAAKd,QAAQ,CAAA;AAErC,MAAA,QAEElB,cAAA,CAAAC,aAAA,CAACmI,IAAI,EAAA;UACH7B,GAAG,EAAExG,IAAI,CAACiC,EAAG;UACbqG,MAAM,EAAEtI,IAAI,CAACiC,EAAG;AAChBmG,UAAAA,QAAQ,EAAEA,QAAS;AACnBG,UAAAA,SAAS,EAAEjB,aAAa,GAAGc,QAAQ,GAAGD,KAAK,KAAK,CAAE;UAGlDK,KAAK,EAAExI,IAAI,CAACK,GAAG,IAAI,CAAS8H,MAAAA,EAAAA,KAAK,GAAG,CAAC,CAAG,CAAA;AACxCM,UAAAA,QAAQ,EAAErH,cAAAA;SAITC,EAAAA,UAAU,CAACrB,IAAI,EAAE;AAAEoI,UAAAA,QAAAA;AAAS,SAAC,CAC1B,CAAA;AAAC,QAAA;KAEV,CAAC,EAIDxG,SAAS,IACR3B,cAAA,CAAAC,aAAA,CAACsH,WAAa,EAAA;MAAC,aAAY,EAAA,MAAA;KACzBvH,EAAAA,cAAA,CAAAC,aAAA,CAACsH,OAAS,MAAE,CACC,CAChB,EAGA9F,UAAU,IAAIC,OAAO,IAAI1B,cAAA,CAAAC,aAAA,CAACsH,gBAAkB,EAAA;AAACQ,MAAAA,GAAG,EAAEtF,WAAY;MAAC,aAAY,EAAA,MAAA;KAAQ,CACzE,CAAC,EACbZ,iBAAiB,IAChB7B,cAAA,CAAAC,aAAA,CAACsH,YAAc,EAAA;AACbC,MAAAA,IAAI,EAAC,QAAQ;AACbI,MAAAA,UAAU,EAAC,OAAO;AAClB,MAAA,YAAA,EAAW,wBAAwB;AACnC,MAAA,eAAA,EAAexF,OAAQ;MACvByF,QAAQ,EAAE,CAAC7D,cAAe;AAC1ByD,MAAAA,OAAO,EAAEA,MAAM7C,UAAU,CAAC,OAAO,CAAA;AAAE,KAAA,EAEnC5E,cAAA,CAAAC,aAAA,CAAC0H,gBAAiB,EAAA;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CACzB,CAEb,CACU,CACT,CACH,CAAA;AAAC,IAAA;AAEhB,CAAC,EAAC;AAEF5G,SAAS,CAAC0H,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAEpB3H,KAAK,EAAE4H,SAAS,CAACC,OAAO,CACtBD,SAAS,CAACE,KAAK,CAAC;AACd/G,IAAAA,EAAE,EAAE6G,SAAS,CAACG,MAAM,CAACC,UAAU;IAE/B9I,YAAY,EAAE0I,SAAS,CAACG,MAAM;AAE9B5I,IAAAA,GAAG,EAAEyI,SAAS,CAACG,MAAM,CAACC,UAAU;AAEhC5I,IAAAA,QAAQ,EAAEwI,SAAS,CAACK,KAAK,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IAErE5I,QAAQ,EAAEuI,SAAS,CAACM,MAAAA;AACtB,GAAC,CACH,CAAC;EAEDjI,QAAQ,EAAE2H,SAAS,CAACG,MAAM;EAE1B7H,cAAc,EAAE0H,SAAS,CAACO,IAAI;EAE9BhI,UAAU,EAAEyH,SAAS,CAACO,IAAI;EAE1B/H,WAAW,EAAEwH,SAAS,CAACQ,IAAI;EAE3B/H,QAAQ,EAAEuH,SAAS,CAACQ,IAAI;EAExB9H,eAAe,EAAEsH,SAAS,CAACQ,IAAI;EAE/B7H,gBAAgB,EAAEqH,SAAS,CAACO,IAAI;EAEhC3H,UAAU,EAAEoH,SAAS,CAACO,IAAI;EAE1B1H,OAAO,EAAEmH,SAAS,CAACQ,IAAI;EAEvB1H,SAAS,EAAEkH,SAAS,CAACQ,IAAI;EAEzBzH,iBAAiB,EAAEiH,SAAS,CAACM,MAAM;EAEnCtH,iBAAiB,EAAEgH,SAAS,CAACQ,IAAI;EAEjCrH,EAAE,EAAE6G,SAAS,CAACG,MAAM;EAEpBlH,SAAS,EAAE+G,SAAS,CAACO,IAAAA;AACvB,CAAC,GAAA,EAAA;;;;"}

package/build/widgets/Filmstrip/Filmstrip.styled.js

@@ -0,0 +1,160 @@
+import styled, { css, keyframes } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const COLLAPSE_DURATION = '350ms';
+const EASE_OUT = 'cubic-bezier(0.22, 1, 0.36, 1)';
+const noMotion = css`
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const Wrapper = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const ToggleBar = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+const ToggleButton = styled.button.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  /* The arrow svg uses currentColor, so setting color is enough.
+     themeProp(property, dark, light) is the repo's dark mode pattern: it covers the
+     body.dark-theme / body.light-theme classes from Storybook's toggle and falls back
+     to the system's prefers-color-scheme when neither is set. */
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
+
+  /* Specificity 1 nests the theme selectors under :hover (same as AssetGalleryGridCard). */
+  &:hover {
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'), 1)}
+  }
+`;
+const ToggleIcon = styled.span`
+  display: flex;
+  transform: rotate(${props => props.$isExpanded ? '0deg' : '180deg'});
+  transition: transform ${COLLAPSE_DURATION} ${EASE_OUT};
+  ${noMotion}
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+const Collapse = styled.div`
+  display: grid;
+  grid-template-rows: ${props => props.$isExpanded ? '1fr' : '0fr'};
+  /* visibility: hidden removes collapsed cells from the Tab order and screen readers.
+     When collapsing it waits until the slide has finished (the delay); when expanding
+     it switches back to visible immediately, so the strip is visible while it slides in. */
+  visibility: ${props => props.$isExpanded ? 'visible' : 'hidden'};
+  transition:
+    grid-template-rows ${COLLAPSE_DURATION} ${EASE_OUT},
+    visibility 0s linear ${props => props.$isExpanded ? '0s' : COLLAPSE_DURATION};
+  ${noMotion}
+`;
+const CollapseContent = styled.div`
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+const Row = styled.div`
+  display: flex;
+  min-width: 0;
+`;
+const ScrollButton = styled.button.attrs(applyDefaultTheme)`
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 72px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
+
+  &:hover:not(:disabled) {
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'), 1)}
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  /* The drop-down triangle, turned to point left or right */
+  svg {
+    width: 24px;
+    height: 24px;
+    transform: rotate(${props => props.$direction === 'left' ? '90deg' : '-90deg'});
+  }
+`;
+const Filmstrip = styled.div.attrs(applyDefaultTheme)`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  /* Thin bar with a transparent track instead of the OS default (white track).
+     Kept visible on purpose: mouse users need it to know the strip scrolls. */
+  scrollbar-width: thin;
+  scrollbar-color: ${props => props.theme.colors.neutral30} transparent;
+  /* Room for the bar below the cells. Overlay scrollbars (macOS default) take no space
+     and would otherwise sit on top of the thumbnails. */
+  padding-bottom: 12px;
+`;
+const spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+const LoadingCell = styled.div`
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 72px;
+  animation: ${fadeIn} 200ms ease-out 300ms backwards;
+`;
+const Spinner = styled.div.attrs(applyDefaultTheme)`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 3px solid;
+  ${props => props.theme.themeProp('border-color', `${props.theme.getColor('gray-600')} ${props.theme.getColor('gray-600')} ${props.theme.getColor('gray-600')} ${props.theme.getColor('gray-100')}`, `${props.theme.getColor('gray-300')} ${props.theme.getColor('gray-300')} ${props.theme.getColor('gray-300')} ${props.theme.getColor('gray-600')}`)}
+  animation: ${spin} 800ms linear infinite;
+
+  /* Reduced motion: no spinning; the static ring still shows that something is pending */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const LoadMoreSentinel = styled.div`
+  flex: none;
+  width: 1px;
+`;
+
+export { Collapse, CollapseContent, Filmstrip, LoadMoreSentinel, LoadingCell, Row, ScrollButton, Spinner, ToggleBar, ToggleButton, ToggleIcon, Wrapper };
+//# sourceMappingURL=Filmstrip.styled.js.map

package/build/widgets/Filmstrip/Filmstrip.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filmstrip.styled.js","sources":["../../../src/components/widgets/Filmstrip/Filmstrip.styled.js"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// One duration and one ease-out curve for both the strip and the arrow, so they move\n// together. Ease-out starts fast and settles gently, which feels responsive.\nconst COLLAPSE_DURATION = '350ms';\nconst EASE_OUT = 'cubic-bezier(0.22, 1, 0.36, 1)';\n\nconst noMotion = css`\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\n// Holds the optional toggle bar and the strip, stacked.\nexport const Wrapper = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\n\n// Full-width bar above the strip; the arrow button sits in the middle.\nexport const ToggleBar = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n\nexport const ToggleButton = styled.button.attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n\n  /* The arrow svg uses currentColor, so setting color is enough.\n     themeProp(property, dark, light) is the repo's dark mode pattern: it covers the\n     body.dark-theme / body.light-theme classes from Storybook's toggle and falls back\n     to the system's prefers-color-scheme when neither is set. */\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}\n\n  /* Specificity 1 nests the theme selectors under :hover (same as AssetGalleryGridCard). */\n  &:hover {\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900'),\n        1\n      )}\n  }\n`;\n\n// Rotates the arrow: pointing down while expanded (click to hide),\n// pointing up while collapsed (click to show).\nexport const ToggleIcon = styled.span`\n  display: flex;\n  transform: rotate(${props => (props.$isExpanded ? '0deg' : '180deg')});\n  transition: transform ${COLLAPSE_DURATION} ${EASE_OUT};\n  ${noMotion}\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\n// Animates the strip's height. CSS can't transition `height: auto`, but it can\n// transition a grid row between 1fr (full content height) and 0fr (nothing).\nexport const Collapse = styled.div`\n  display: grid;\n  grid-template-rows: ${props => (props.$isExpanded ? '1fr' : '0fr')};\n  /* visibility: hidden removes collapsed cells from the Tab order and screen readers.\n     When collapsing it waits until the slide has finished (the delay); when expanding\n     it switches back to visible immediately, so the strip is visible while it slides in. */\n  visibility: ${props => (props.$isExpanded ? 'visible' : 'hidden')};\n  transition:\n    grid-template-rows ${COLLAPSE_DURATION} ${EASE_OUT},\n    visibility 0s linear ${props => (props.$isExpanded ? '0s' : COLLAPSE_DURATION)};\n  ${noMotion}\n`;\n\n// The grid row's only child. min-height: 0 lets it shrink below its content height,\n// and overflow: hidden clips what doesn't fit. Aligning the content to the bottom\n// (flex-end) means the top gets clipped first, so the strip looks like it slides down.\nexport const CollapseContent = styled.div`\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n`;\n\n// Puts the optional page buttons on either side of the strip.\nexport const Row = styled.div`\n  display: flex;\n  min-width: 0;\n`;\n\n// One page button. Same height as a cell (the strip adds 12px of scrollbar room below).\nexport const ScrollButton = styled.button.attrs(applyDefaultTheme)`\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 72px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )}\n\n  &:hover:not(:disabled) {\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900'),\n        1\n      )}\n  }\n\n  &:disabled {\n    opacity: 0.3;\n    cursor: default;\n  }\n\n  /* The drop-down triangle, turned to point left or right */\n  svg {\n    width: 24px;\n    height: 24px;\n    transform: rotate(${props => (props.$direction === 'left' ? '90deg' : '-90deg')});\n  }\n`;\n\n// Was `styled.p`: a paragraph cannot contain buttons.\n// The outer element scrolls; the cells sit in one row that never wraps.\nexport const Filmstrip = styled.div.attrs(applyDefaultTheme)`\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  gap: 4px;\n  overflow-x: auto;\n  /* Thin bar with a transparent track instead of the OS default (white track).\n     Kept visible on purpose: mouse users need it to know the strip scrolls. */\n  scrollbar-width: thin;\n  scrollbar-color: ${props => props.theme.colors.neutral30} transparent;\n  /* Room for the bar below the cells. Overlay scrollbars (macOS default) take no space\n     and would otherwise sit on top of the thumbnails. */\n  padding-bottom: 12px;\n`;\n\nconst spin = keyframes`\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\n// Same size as a Cell, so the spinner takes the place where the next thumbnails will appear.\n// The fade-in waits 300ms (animation delay + `backwards`, which applies opacity 0 during the\n// wait). If the page arrives sooner, the cell is removed before anyone sees it.\nexport const LoadingCell = styled.div`\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 96px;\n  height: 72px;\n  animation: ${fadeIn} 200ms ease-out 300ms backwards;\n`;\n\n// A ring with one colored side, rotating. Colors follow the repo's dark mode pattern.\nexport const Spinner = styled.div.attrs(applyDefaultTheme)`\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 3px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      `${props.theme.getColor('gray-600')} ${props.theme.getColor('gray-600')} ${props.theme.getColor('gray-600')} ${props.theme.getColor('gray-100')}`,\n      `${props.theme.getColor('gray-300')} ${props.theme.getColor('gray-300')} ${props.theme.getColor('gray-300')} ${props.theme.getColor('gray-600')}`\n    )}\n  animation: ${spin} 800ms linear infinite;\n\n  /* Reduced motion: no spinning; the static ring still shows that something is pending */\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n`;\n\n// Invisible marker after the last cell; see the load-more effect in Filmstrip.js.\n// It needs a width so the browser can tell when it is in view.\nexport const LoadMoreSentinel = styled.div`\n  flex: none;\n  width: 1px;\n`;\n"],"names":["COLLAPSE_DURATION","EASE_OUT","noMotion","css","Wrapper","styled","div","attrs","applyDefaultTheme","props","theme","primaryFontFamily","ToggleBar","ToggleButton","button","themeProp","getColor","ToggleIcon","span","$isExpanded","Collapse","CollapseContent","Row","ScrollButton","$direction","Filmstrip","colors","neutral30","spin","keyframes","fadeIn","LoadingCell","Spinner","LoadMoreSentinel"],"mappings":"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"}

package/build/widgets/Filmstrip/Thumbnail/Thumbnail.js

@@ -0,0 +1,66 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { ReactComponent as SvgHeadset } from '../../../icons/headset.svg.js';
+import { ReactComponent as SvgPlay } from '../../../icons/play.svg.js';
+import '../../../data/Alert/Alert.js';
+import Badge from '../../../data/Badge/Badge.js';
+import '../../../data/LiveBadge/LiveBadge.js';
+import '../../../data/Popover/Popover.js';
+import '../../../data/SeverityBadge/SeverityBadge.js';
+import '../../../data/Tab/Tab.js';
+import '../../../data/Tabs/Tabs.js';
+import '../../../data/Tooltip/Tooltip.js';
+import '../../../data/VerificationStatusIcon/VerificationStatusIcon.js';
+import { convertMsToHMS } from '../../../utils/dateTime.js';
+import { Placeholder, Image, Thumbnail as Thumbnail$1, BadgePosition } from './Thumbnail.styled.js';
+
+const Thumbnail = function Thumbnail({
+  thumbnailUrl,
+  alt,
+  fileType,
+  duration
+}) {
+  const type = fileType?.toLowerCase();
+  const isAudio = type === 'audio';
+  const isVideo = type === 'video';
+  let preview;
+  if (isAudio) {
+    preview = React__default.createElement(Placeholder, {
+      "aria-hidden": "true"
+    }, React__default.createElement(SvgHeadset, {
+      "aria-hidden": "true"
+    }));
+  } else if (thumbnailUrl) {
+    preview = React__default.createElement(Image, {
+      src: thumbnailUrl,
+      alt: alt,
+      loading: "lazy"
+    });
+  } else {
+    preview = React__default.createElement(Placeholder, {
+      "aria-hidden": "true"
+    });
+  }
+  return React__default.createElement(Thumbnail$1, null, preview, isVideo && React__default.createElement(BadgePosition, null, React__default.createElement(Badge, {
+    badgeIcon: React__default.createElement(SvgPlay, null),
+    badgeContent: duration ? convertMsToHMS(duration) : null,
+    backgroundColors: ['black', 'black'],
+    colors: ['#f7f8f9', '#f7f8f9'],
+    fontSize: 12,
+    fontWeight: 500,
+    lineHeight: 16,
+    verticalPadding: 4,
+    horizontalPadding: 8,
+    minWidth: 32,
+    height: 24
+  })));
+};
+Thumbnail.propTypes = process.env.NODE_ENV !== "production" ? {
+  thumbnailUrl: PropTypes.string,
+  alt: PropTypes.string,
+  fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']),
+  duration: PropTypes.number
+} : {};
+
+export { Thumbnail as default };
+//# sourceMappingURL=Thumbnail.js.map

package/build/widgets/Filmstrip/Thumbnail/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sources":["../../../../src/components/widgets/Filmstrip/Thumbnail/Thumbnail.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { HeadsetIcon, PlayIcon } from '../../../../icons';\nimport { Badge } from '../../../data';\nimport { convertMsToHMS } from '../../../../utils/dateTime';\nimport * as S from './Thumbnail.styled';\n\n/**\n * What one Filmstrip cell shows: the image, an audio icon, or a video still with a play pill.\n * This is the content layer. Cell (the slot) and Filmstrip (the list) never look at fileType.\n */\nconst Thumbnail = function Thumbnail({ thumbnailUrl, alt, fileType, duration }) {\n  const type = fileType?.toLowerCase();\n  const isAudio = type === 'audio';\n  const isVideo = type === 'video';\n\n  // The placeholders are decoration: the Cell (the option) carries the accessible name\n  // through aria-label, so they don't need a role or a name of their own.\n  let preview;\n  if (isAudio) {\n    preview = (\n      <S.Placeholder aria-hidden=\"true\">\n        <HeadsetIcon aria-hidden=\"true\" />\n      </S.Placeholder>\n    );\n  } else if (thumbnailUrl) {\n    preview = <S.Image src={thumbnailUrl} alt={alt} loading=\"lazy\" />;\n  } else {\n    preview = <S.Placeholder aria-hidden=\"true\" />;\n  }\n\n  return (\n    <S.Thumbnail>\n      {preview}\n      {isVideo && (\n        <S.BadgePosition>\n          <Badge\n            badgeIcon={<PlayIcon />}\n            badgeContent={duration ? convertMsToHMS(duration) : null}\n            backgroundColors={['black', 'black']}\n            colors={['#f7f8f9', '#f7f8f9']}\n            fontSize={12}\n            fontWeight={500}\n            lineHeight={16}\n            verticalPadding={4}\n            horizontalPadding={8}\n            minWidth={32}\n            height={24}\n          />\n        </S.BadgePosition>\n      )}\n    </S.Thumbnail>\n  );\n};\n\nThumbnail.propTypes = {\n  thumbnailUrl: PropTypes.string,\n  alt: PropTypes.string,\n  fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']),\n  duration: PropTypes.number\n};\n\nexport default Thumbnail;\n"],"names":["Thumbnail","thumbnailUrl","alt","fileType","duration","type","toLowerCase","isAudio","isVideo","preview","React","createElement","S","HeadsetIcon","src","loading","Badge","badgeIcon","PlayIcon","badgeContent","convertMsToHMS","backgroundColors","colors","fontSize","fontWeight","lineHeight","verticalPadding","horizontalPadding","minWidth","height","propTypes","process","env","NODE_ENV","PropTypes","string","oneOf","number"],"mappings":";;;;;;;;;;;;;;;;AAWA,MAAMA,SAAS,GAAG,SAASA,SAASA,CAAC;EAAEC,YAAY;EAAEC,GAAG;EAAEC,QAAQ;AAAEC,EAAAA,QAAAA;AAAS,CAAC,EAAE;AAC9E,EAAA,MAAMC,IAAI,GAAGF,QAAQ,EAAEG,WAAW,EAAE,CAAA;AACpC,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,OAAO,CAAA;AAChC,EAAA,MAAMG,OAAO,GAAGH,IAAI,KAAK,OAAO,CAAA;AAIhC,EAAA,IAAII,OAAO,CAAA;AACX,EAAA,IAAIF,OAAO,EAAE;AACXE,IAAAA,OAAO,GACLC,cAAA,CAAAC,aAAA,CAACC,WAAa,EAAA;MAAC,aAAY,EAAA,MAAA;AAAM,KAAA,EAC/BF,cAAA,CAAAC,aAAA,CAACE,UAAW,EAAA;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CACpB,CAChB,CAAA;GACF,MAAM,IAAIZ,YAAY,EAAE;AACvBQ,IAAAA,OAAO,GAAGC,cAAA,CAAAC,aAAA,CAACC,KAAO,EAAA;AAACE,MAAAA,GAAG,EAAEb,YAAa;AAACC,MAAAA,GAAG,EAAEA,GAAI;AAACa,MAAAA,OAAO,EAAC,MAAA;AAAM,KAAE,CAAC,CAAA;AACnE,GAAC,MAAM;AACLN,IAAAA,OAAO,GAAGC,cAAA,CAAAC,aAAA,CAACC,WAAa,EAAA;MAAC,aAAY,EAAA,MAAA;AAAM,KAAE,CAAC,CAAA;AAChD,GAAA;EAEA,OACEF,cAAA,CAAAC,aAAA,CAACC,WAAW,EAAA,IAAA,EACTH,OAAO,EACPD,OAAO,IACNE,cAAA,CAAAC,aAAA,CAACC,aAAe,QACdF,cAAA,CAAAC,aAAA,CAACK,KAAK,EAAA;AACJC,IAAAA,SAAS,EAAEP,cAAA,CAAAC,aAAA,CAACO,OAAQ,MAAE,CAAE;IACxBC,YAAY,EAAEf,QAAQ,GAAGgB,cAAc,CAAChB,QAAQ,CAAC,GAAG,IAAK;AACzDiB,IAAAA,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAE;AACrCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;AAC/BC,IAAAA,QAAQ,EAAE,EAAG;AACbC,IAAAA,UAAU,EAAE,GAAI;AAChBC,IAAAA,UAAU,EAAE,EAAG;AACfC,IAAAA,eAAe,EAAE,CAAE;AACnBC,IAAAA,iBAAiB,EAAE,CAAE;AACrBC,IAAAA,QAAQ,EAAE,EAAG;AACbC,IAAAA,MAAM,EAAE,EAAA;GACT,CACc,CAER,CAAC,CAAA;AAElB,EAAC;AAED7B,SAAS,CAAC8B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACpBhC,YAAY,EAAEiC,SAAS,CAACC,MAAM;EAC9BjC,GAAG,EAAEgC,SAAS,CAACC,MAAM;AACrBhC,EAAAA,QAAQ,EAAE+B,SAAS,CAACE,KAAK,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EACrEhC,QAAQ,EAAE8B,SAAS,CAACG,MAAAA;AACtB,CAAC,GAAA,EAAA;;;;"}

package/build/widgets/Filmstrip/Thumbnail/Thumbnail.styled.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+const Thumbnail = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const Image = styled.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const Placeholder = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: ${props => props.theme.colors.neutral20};
+  color: ${props => props.theme.colors.neutral60};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+const BadgePosition = styled.div`
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  pointer-events: none;
+`;
+
+export { BadgePosition, Image, Placeholder, Thumbnail };
+//# sourceMappingURL=Thumbnail.styled.js.map

package/build/widgets/Filmstrip/Thumbnail/Thumbnail.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.styled.js","sources":["../../../../src/components/widgets/Filmstrip/Thumbnail/Thumbnail.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\n// Fills the cell; `position: relative` is the anchor for the play pill.\nexport const Thumbnail = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const Image = styled.img`\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nexport const Placeholder = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background: ${props => props.theme.colors.neutral20};\n  color: ${props => props.theme.colors.neutral60};\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const BadgePosition = styled.div`\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  pointer-events: none;\n`;\n"],"names":["Thumbnail","styled","div","Image","img","Placeholder","attrs","applyDefaultTheme","props","theme","colors","neutral20","neutral60","BadgePosition"],"mappings":";;;AAIaA,MAAAA,SAAS,GAAGC,MAAM,CAACC,GAAG,CAAA;AACnC;AACA;AACA;AACA,EAAC;AAEYC,MAAAA,KAAK,GAAGF,MAAM,CAACG,GAAG,CAAA;AAC/B;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMC,WAAW,GAAGJ,MAAM,CAACC,GAAG,CAACI,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA,cAAgBC,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,MAAM,CAACC,SAAS,CAAA;AACrD,SAAWH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,MAAM,CAACE,SAAS,CAAA;AAChD;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYC,MAAAA,aAAa,GAAGZ,MAAM,CAACC,GAAG,CAAA;AACvC;AACA;AACA;AACA;AACA;;;;"}

package/build/widgets/Filmstrip/index.js

@@ -0,0 +1,2 @@
+export { default } from './Filmstrip.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/Filmstrip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/widgets/index.js

@@ -9,4 +9,5 @@ export { default as AssetAction } from './AssetAction/AssetAction.js';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.js';
 export { default as InfoCard } from './InfoCard/InfoCard.js';
 export { default as InstructionSeverityDisplay } from './InstructionSeverityDisplay/InstructionSeverityDisplay.js';
+export { default as Filmstrip } from './Filmstrip/Filmstrip.js';
 //# sourceMappingURL=index.js.map

package/build/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.18",
+  "version": "2.0.20-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -65,10 +65,10 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
-    "@storybook/react-webpack5": "^10.1.11",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/addon-links": "^10.6.5",
+    "@storybook/addon-themes": "^10.6.5",
+    "@storybook/react-webpack5": "^10.6.5",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.12.0",
@@ -97,14 +97,13 @@
     "rollup-plugin-url": "^3.0.1",
     "sass": "^1.97.2",
     "sass-loader": "^10.1.1",
-    "storybook": "^10.1.11",
+    "storybook": "^10.6.5",
     "styled-components": "^6.1.19",
     "url-loader": "^4.1.1"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
     "@restart/hooks": "^0.6.2",
-    "@storybook/cli": "^10.1.11",
     "@tippyjs/react": "^4.2.6",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.8",