etudes 5.0.0 → 5.2.0

package/components/CoverVideo.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -62,7 +39,8 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoverVideo = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var spase_1 = require("spase");
 var useRect_1 = require("../hooks/useRect");
 var utils_1 = require("../utils");
@@ -88,17 +66,14 @@ exports.CoverVideo = (0, react_1.forwardRef)(function (_a, ref) {
             ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)
             : Math.max(rootRect.height, rootRect.width / aspectRatio),
     ]);
-    return (react_1.default.createElement("div", __assign({}, props, { ref: rootRef, className: className, style: (0, utils_1.styles)(style, FIXED_STYLES.root), "data-component": 'cover-video' }),
-        react_1.default.createElement(Video_1.Video, { style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
-                width: "".concat(videoSize.width, "px"),
-                height: "".concat(videoSize.height, "px"),
-            }), "data-child": 'video', autoLoop: autoLoop, autoPlay: autoPlay, hasControls: hasControls, isMuted: isMuted, playsInline: playsInline, posterSrc: posterSrc, src: src, onCanPlay: onCanPlay, onEnd: onEnd, onFullscreenChange: onFullscreenChange, onLoadMetadata: onLoadMetadata, onLoadMetadataComplete: onLoadMetadataComplete, onLoadMetadataError: onLoadMetadataError, onPause: onPause, onPlay: onPlay, onSizeChange: function (size) { return handleSizeChange(size); } }),
-        renderViewportContent && (react_1.default.createElement("div", { "data-child": 'viewport', style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
-                height: "".concat(videoSize.height, "px"),
-                pointerEvents: 'none',
-                width: "".concat(videoSize.width, "px"),
-            }) }, renderViewportContent())),
-        children));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: rootRef, className: className, "data-component": 'cover-video', style: (0, utils_1.styles)(style, FIXED_STYLES.root), children: [(0, jsx_runtime_1.jsx)(Video_1.Video, { autoLoop: autoLoop, autoPlay: autoPlay, "data-child": 'video', hasControls: hasControls, isMuted: isMuted, playsInline: playsInline, posterSrc: posterSrc, src: src, style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
+                    width: "".concat(videoSize.width, "px"),
+                    height: "".concat(videoSize.height, "px"),
+                }), onCanPlay: onCanPlay, onEnd: onEnd, onFullscreenChange: onFullscreenChange, onLoadMetadata: onLoadMetadata, onLoadMetadataComplete: onLoadMetadataComplete, onLoadMetadataError: onLoadMetadataError, onPause: onPause, onPlay: onPlay, onSizeChange: function (size) { return handleSizeChange(size); } }), renderViewportContent && ((0, jsx_runtime_1.jsx)("div", { "data-child": 'viewport', style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
+                    height: "".concat(videoSize.height, "px"),
+                    pointerEvents: 'none',
+                    width: "".concat(videoSize.width, "px"),
+                }), children: renderViewportContent() })), children] })));
 });
 Object.defineProperty(exports.CoverVideo, 'displayName', { value: 'CoverVideo', writable: false });
 var FIXED_STYLES = (0, utils_1.asStyleDict)({

package/components/CoverVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoverVideo.js","sourceRoot":"/","sources":["components/CoverVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren, type RefObject } from 'react'\nimport { Size } from 'spase'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, styles } from '../utils'\nimport { Video, type VideoProps } from './Video'\n\nexport type CoverVideoProps = HTMLAttributes<HTMLDivElement> & Pick<VideoProps, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'playsInline' | 'posterSrc' | 'src' | 'onPause' | 'onPlay' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onSizeChange'> & PropsWithChildren<{\n  /**\n   * The known aspect ratio of the video, expressed by width / height. If\n   * unprovided, it will be inferred after loading the video.\n   */\n  aspectRatio?: number\n\n  /**\n   * Content to render in the full-sized viewport (same size as the cover\n   * video).\n   */\n  renderViewportContent?: () => JSX.Element\n}>\n\nexport const CoverVideo = forwardRef<HTMLDivElement, CoverVideoProps>(({\n  className,\n  children,\n  style,\n  aspectRatio: externalAspectRatio = NaN,\n  autoLoop,\n  autoPlay,\n  hasControls,\n  isMuted,\n  playsInline,\n  posterSrc,\n  renderViewportContent,\n  src,\n  onCanPlay,\n  onEnd,\n  onFullscreenChange,\n  onLoadMetadata,\n  onLoadMetadataComplete,\n  onLoadMetadataError,\n  onPause,\n  onPlay,\n  onSizeChange,\n  ...props\n}, ref) => {\n  const handleSizeChange = (size?: Size) => {\n    setLocalAspectRatio(size ? size.width / size.height : NaN)\n    onSizeChange?.(size)\n  }\n\n  const localRef = useRef<HTMLDivElement>(null)\n  const rootRef = ref as RefObject<HTMLDivElement> ?? localRef\n  const [localAspectRatio, setLocalAspectRatio] = useState(NaN)\n  const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio\n  const rootRect = useRect(rootRef)\n  const rootAspectRatio = rootRect.width / rootRect.height\n  const videoSize = new Size([\n    rootAspectRatio > 1\n      ? Math.max(rootRect.width, rootRect.height * aspectRatio)\n      : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),\n    rootAspectRatio > 1\n      ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)\n      : Math.max(rootRect.height, rootRect.width / aspectRatio),\n  ])\n\n  return (\n    <div {...props} ref={rootRef} className={className} style={styles(style, FIXED_STYLES.root)} data-component='cover-video'>\n      <Video\n        style={styles(FIXED_STYLES.viewport, {\n          width: `${videoSize.width}px`,\n          height: `${videoSize.height}px`,\n        })}\n        data-child='video'\n        autoLoop={autoLoop}\n        autoPlay={autoPlay}\n        hasControls={hasControls}\n        isMuted={isMuted}\n        playsInline={playsInline}\n        posterSrc={posterSrc}\n        src={src}\n        onCanPlay={onCanPlay}\n        onEnd={onEnd}\n        onFullscreenChange={onFullscreenChange}\n        onLoadMetadata={onLoadMetadata}\n        onLoadMetadataComplete={onLoadMetadataComplete}\n        onLoadMetadataError={onLoadMetadataError}\n        onPause={onPause}\n        onPlay={onPlay}\n        onSizeChange={size => handleSizeChange(size)}\n      />\n      {renderViewportContent && (\n        <div\n          data-child='viewport'\n          style={styles(FIXED_STYLES.viewport, {\n            height: `${videoSize.height}px`,\n            pointerEvents: 'none',\n            width: `${videoSize.width}px`,\n          })}\n        >\n          {renderViewportContent()}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(CoverVideo, 'displayName', { value: 'CoverVideo', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    overflow: 'hidden',\n  },\n  viewport: {\n    fontSize: '0',\n    left: '50%',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translate(-50%, -50%)',\n  },\n  viewportContent: {\n    height: '100%',\n    left: '0',\n    position: 'absolute',\n    top: '0',\n    width: '100%',\n  },\n})\n"]}
+{"version":3,"file":"CoverVideo.js","sourceRoot":"/","sources":["components/CoverVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren, type RefObject } from 'react'\nimport { Size } from 'spase'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, styles } from '../utils'\nimport { Video, type VideoProps } from './Video'\n\nexport type CoverVideoProps = HTMLAttributes<HTMLDivElement> & Pick<VideoProps, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'playsInline' | 'posterSrc' | 'src' | 'onPause' | 'onPlay' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onSizeChange'> & PropsWithChildren<{\n  /**\n   * The known aspect ratio of the video, expressed by width / height. If\n   * unprovided, it will be inferred after loading the video.\n   */\n  aspectRatio?: number\n\n  /**\n   * Content to render in the full-sized viewport (same size as the cover\n   * video).\n   */\n  renderViewportContent?: () => JSX.Element\n}>\n\nexport const CoverVideo = forwardRef<HTMLDivElement, CoverVideoProps>(({\n  className,\n  children,\n  style,\n  aspectRatio: externalAspectRatio = NaN,\n  autoLoop,\n  autoPlay,\n  hasControls,\n  isMuted,\n  playsInline,\n  posterSrc,\n  renderViewportContent,\n  src,\n  onCanPlay,\n  onEnd,\n  onFullscreenChange,\n  onLoadMetadata,\n  onLoadMetadataComplete,\n  onLoadMetadataError,\n  onPause,\n  onPlay,\n  onSizeChange,\n  ...props\n}, ref) => {\n  const handleSizeChange = (size?: Size) => {\n    setLocalAspectRatio(size ? size.width / size.height : NaN)\n    onSizeChange?.(size)\n  }\n\n  const localRef = useRef<HTMLDivElement>(null)\n  const rootRef = ref as RefObject<HTMLDivElement> ?? localRef\n  const [localAspectRatio, setLocalAspectRatio] = useState(NaN)\n  const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio\n  const rootRect = useRect(rootRef)\n  const rootAspectRatio = rootRect.width / rootRect.height\n  const videoSize = new Size([\n    rootAspectRatio > 1\n      ? Math.max(rootRect.width, rootRect.height * aspectRatio)\n      : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),\n    rootAspectRatio > 1\n      ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)\n      : Math.max(rootRect.height, rootRect.width / aspectRatio),\n  ])\n\n  return (\n    <div {...props} ref={rootRef} className={className} data-component='cover-video' style={styles(style, FIXED_STYLES.root)}>\n      <Video\n        autoLoop={autoLoop}\n        autoPlay={autoPlay}\n        data-child='video'\n        hasControls={hasControls}\n        isMuted={isMuted}\n        playsInline={playsInline}\n        posterSrc={posterSrc}\n        src={src}\n        style={styles(FIXED_STYLES.viewport, {\n          width: `${videoSize.width}px`,\n          height: `${videoSize.height}px`,\n        })}\n        onCanPlay={onCanPlay}\n        onEnd={onEnd}\n        onFullscreenChange={onFullscreenChange}\n        onLoadMetadata={onLoadMetadata}\n        onLoadMetadataComplete={onLoadMetadataComplete}\n        onLoadMetadataError={onLoadMetadataError}\n        onPause={onPause}\n        onPlay={onPlay}\n        onSizeChange={size => handleSizeChange(size)}\n      />\n      {renderViewportContent && (\n        <div\n          data-child='viewport'\n          style={styles(FIXED_STYLES.viewport, {\n            height: `${videoSize.height}px`,\n            pointerEvents: 'none',\n            width: `${videoSize.width}px`,\n          })}\n        >\n          {renderViewportContent()}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(CoverVideo, 'displayName', { value: 'CoverVideo', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    overflow: 'hidden',\n  },\n  viewport: {\n    fontSize: '0',\n    left: '50%',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translate(-50%, -50%)',\n  },\n  viewportContent: {\n    height: '100%',\n    left: '0',\n    position: 'absolute',\n    top: '0',\n    width: '100%',\n  },\n})\n"]}

package/components/DebugConsole.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
     align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
     margin?: number;
@@ -6,10 +6,10 @@ export type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {
     message?: string;
     title?: string;
 };
-export declare const DebugConsole: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    align?: "br" | "tr" | "tl" | "tc" | "cl" | "cc" | "cr" | "bl" | "bc" | undefined;
-    margin?: number | undefined;
-    maxEntries?: number | undefined;
-    message?: string | undefined;
-    title?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const DebugConsole: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    align?: "tl" | "tc" | "tr" | "cl" | "cc" | "cr" | "bl" | "bc" | "br";
+    margin?: number;
+    maxEntries?: number;
+    message?: string;
+    title?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/DebugConsole.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -71,7 +48,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DebugConsole = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var Each_1 = require("../operators/Each");
 var utils_1 = require("../utils");
 exports.DebugConsole = (0, react_1.forwardRef)(function (_a, ref) {
@@ -95,10 +73,7 @@ exports.DebugConsole = (0, react_1.forwardRef)(function (_a, ref) {
         var _a, _b;
         (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, (_b = messagesRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight);
     }, [messages]);
-    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, style: (0, utils_1.styles)(style, FIXED_STYLES.root, getStyleByAlignment(align, margin)), "data-component": 'debug-console' }),
-        react_1.default.createElement("div", { "data-child": 'header', style: FIXED_STYLES.title }, title !== null && title !== void 0 ? title : 'Untitled'),
-        react_1.default.createElement("div", { "data-child": 'messages', ref: messagesRef, style: FIXED_STYLES.messages },
-            react_1.default.createElement(Each_1.Each, { in: messages, render: function (msg) { return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: msg } }); } }))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: ref, "data-component": 'debug-console', style: (0, utils_1.styles)(style, FIXED_STYLES.root, getStyleByAlignment(align, margin)), children: [(0, jsx_runtime_1.jsx)("div", { "data-child": 'header', style: FIXED_STYLES.title, children: title !== null && title !== void 0 ? title : 'Untitled' }), (0, jsx_runtime_1.jsx)("div", { ref: messagesRef, "data-child": 'messages', style: FIXED_STYLES.messages, children: (0, jsx_runtime_1.jsx)(Each_1.Each, { in: messages, render: function (msg) { return (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: msg } }); } }) })] })));
 });
 Object.defineProperty(exports.DebugConsole, 'displayName', { value: 'DebugConsole', writable: false });
 function getStyleByAlignment(align, margin) {

package/components/DebugConsole.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["components/DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\nexport type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {\n  align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  margin?: number\n  maxEntries?: number\n  message?: string\n  title?: string\n}\n\nexport const DebugConsole = forwardRef<HTMLDivElement, DebugConsoleProps>(({\n  align = 'br',\n  margin = 0,\n  maxEntries = -1,\n  message,\n  style = {},\n  title,\n  ...props\n}, ref) => {\n  const [messages, setMessages] = useState<string[]>([])\n  const messagesRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (message === undefined) {\n      setMessages([])\n    }\n    else {\n      const numMessages = messages.length\n\n      setMessages([\n        ...maxEntries < 0\n          ? messages\n          : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages),\n        message,\n      ])\n    }\n  }, [message])\n\n  useEffect(() => {\n    messagesRef.current?.scrollTo(0, messagesRef.current?.scrollHeight)\n  }, [messages])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      style={styles(style, FIXED_STYLES.root, getStyleByAlignment(align, margin))}\n      data-component='debug-console'\n    >\n      <div data-child='header' style={FIXED_STYLES.title}>{title ?? 'Untitled'}</div>\n      <div data-child='messages' ref={messagesRef} style={FIXED_STYLES.messages}>\n        <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(DebugConsole, 'displayName', { value: 'DebugConsole', writable: false })\n\nfunction getStyleByAlignment(align: DebugConsoleProps['align'], margin: number): CSSProperties {\n  switch (align) {\n    case 'tl': return { top: `${margin}px`, left: `${margin}px` }\n    case 'tc': return { top: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${margin}px`, right: `${margin}px` }\n    case 'cl': return { top: 0, left: `${margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${margin}px`, left: `${margin}px` }\n    case 'bc': return { bottom: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${margin}px`, right: `${margin}px` }\n  }\n}\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    background: '#000',\n    fontFamily: 'monospace',\n    position: 'fixed',\n    width: '300px',\n  },\n  title: {\n    background: '#fff',\n    boxSizing: 'border-box',\n    color: '#000',\n    fontSize: '14px',\n    fontWeight: '700',\n    height: '30px',\n    lineHeight: '30px',\n    overflow: 'hidden',\n    padding: '0 10px',\n    textOverflow: 'ellipsis',\n    textTransform: 'uppercase',\n    whiteSpace: 'nowrap',\n    width: '100%',\n  },\n  messages: {\n    boxSizing: 'border-box',\n    color: '#fff',\n    fontSize: '12px',\n    lineHeight: '150%',\n    maxHeight: '200px',\n    minHeight: '100px',\n    overflowX: 'hidden',\n    overflowY: 'scroll',\n    padding: '10px',\n    WebkitOverflowScrolling: 'touch',\n    width: '100%',\n  },\n})\n"]}
+{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["components/DebugConsole.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAwG;AACxG,0CAAwC;AACxC,kCAA8C;AAUjC,QAAA,YAAY,GAAG,IAAA,kBAAU,EAAoC,UAAC,EAQ1E,EAAE,GAAG;IAPJ,IAAA,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EACZ,cAAU,EAAV,MAAM,mBAAG,CAAC,KAAA,EACV,kBAAe,EAAf,UAAU,mBAAG,CAAC,CAAC,KAAA,EACf,OAAO,aAAA,EACP,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,KAAK,WAAA,EACF,KAAK,cAPiE,8DAQ1E,CADS;IAEF,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAW,EAAE,CAAC,IAAA,EAA/C,QAAQ,QAAA,EAAE,WAAW,QAA0B,CAAA;IACtD,IAAM,WAAW,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAEhD,IAAA,iBAAS,EAAC;QACR,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC1B,WAAW,CAAC,EAAE,CAAC,CAAA;QACjB,CAAC;aACI,CAAC;YACJ,IAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAA;YAEnC,WAAW,wCACN,UAAU,GAAG,CAAC;gBACf,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC;gBAC5E,OAAO;sBACP,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,IAAA,iBAAS,EAAC;;QACR,MAAA,WAAW,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,EAAE,MAAA,WAAW,CAAC,OAAO,0CAAE,YAAY,CAAC,CAAA;IACrE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CACL,4CACM,KAAK,IACT,GAAG,EAAE,GAAG,oBACO,eAAe,EAC9B,KAAK,EAAE,IAAA,cAAM,EAAC,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,aAE3E,8CAAgB,QAAQ,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,YAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,GAAO,EAC/E,gCAAK,GAAG,EAAE,WAAW,gBAAa,UAAU,EAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,YACvE,uBAAC,WAAI,IAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAA,GAAG,IAAI,OAAA,gCAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAhD,CAAgD,GAAG,GAClF,KACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,oBAAY,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAE9F,SAAS,mBAAmB,CAAC,KAAiC,EAAE,MAAc;IAC5E,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,UAAG,MAAM,OAAI,EAAE,IAAI,EAAE,UAAG,MAAM,OAAI,EAAE,CAAA;QAC7D,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,UAAG,MAAM,OAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAA;QAC7E,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,UAAG,MAAM,OAAI,EAAE,KAAK,EAAE,UAAG,MAAM,OAAI,EAAE,CAAA;QAC9D,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,UAAG,MAAM,OAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAA;QAC9E,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAA;QAC1E,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,UAAG,MAAM,OAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAA;QAC/E,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,UAAG,MAAM,OAAI,EAAE,IAAI,EAAE,UAAG,MAAM,OAAI,EAAE,CAAA;QAChE,KAAK,IAAI,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,UAAG,MAAM,OAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAA;QAChF,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,UAAG,MAAM,OAAI,EAAE,KAAK,EAAE,UAAG,MAAM,OAAI,EAAE,CAAA;IACjE,CAAC;AACH,CAAC;AAED,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,WAAW;QACvB,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,OAAO;KACf;IACD,KAAK,EAAE;QACL,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,KAAK;QACjB,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,QAAQ;QACjB,YAAY,EAAE,UAAU;QACxB,aAAa,EAAE,WAAW;QAC1B,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAM;KACd;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,OAAO;QAClB,SAAS,EAAE,OAAO;QAClB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,MAAM;QACf,uBAAuB,EAAE,OAAO;QAChC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA","sourcesContent":["import { forwardRef, useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\nexport type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {\n  align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  margin?: number\n  maxEntries?: number\n  message?: string\n  title?: string\n}\n\nexport const DebugConsole = forwardRef<HTMLDivElement, DebugConsoleProps>(({\n  align = 'br',\n  margin = 0,\n  maxEntries = -1,\n  message,\n  style = {},\n  title,\n  ...props\n}, ref) => {\n  const [messages, setMessages] = useState<string[]>([])\n  const messagesRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (message === undefined) {\n      setMessages([])\n    }\n    else {\n      const numMessages = messages.length\n\n      setMessages([\n        ...maxEntries < 0\n          ? messages\n          : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages),\n        message,\n      ])\n    }\n  }, [message])\n\n  useEffect(() => {\n    messagesRef.current?.scrollTo(0, messagesRef.current?.scrollHeight)\n  }, [messages])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='debug-console'\n      style={styles(style, FIXED_STYLES.root, getStyleByAlignment(align, margin))}\n    >\n      <div data-child='header' style={FIXED_STYLES.title}>{title ?? 'Untitled'}</div>\n      <div ref={messagesRef} data-child='messages' style={FIXED_STYLES.messages}>\n        <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(DebugConsole, 'displayName', { value: 'DebugConsole', writable: false })\n\nfunction getStyleByAlignment(align: DebugConsoleProps['align'], margin: number): CSSProperties {\n  switch (align) {\n    case 'tl': return { top: `${margin}px`, left: `${margin}px` }\n    case 'tc': return { top: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${margin}px`, right: `${margin}px` }\n    case 'cl': return { top: 0, left: `${margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${margin}px`, left: `${margin}px` }\n    case 'bc': return { bottom: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${margin}px`, right: `${margin}px` }\n  }\n}\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    background: '#000',\n    fontFamily: 'monospace',\n    position: 'fixed',\n    width: '300px',\n  },\n  title: {\n    background: '#fff',\n    boxSizing: 'border-box',\n    color: '#000',\n    fontSize: '14px',\n    fontWeight: '700',\n    height: '30px',\n    lineHeight: '30px',\n    overflow: 'hidden',\n    padding: '0 10px',\n    textOverflow: 'ellipsis',\n    textTransform: 'uppercase',\n    whiteSpace: 'nowrap',\n    width: '100%',\n  },\n  messages: {\n    boxSizing: 'border-box',\n    color: '#fff',\n    fontSize: '12px',\n    lineHeight: '150%',\n    maxHeight: '200px',\n    minHeight: '100px',\n    overflowX: 'hidden',\n    overflowY: 'scroll',\n    padding: '10px',\n    WebkitOverflowScrolling: 'touch',\n    width: '100%',\n  },\n})\n"]}

package/components/Dial.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react';
+import { type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react';
 export type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Current angle reading of the compass, between 0.0 - 360.0 degrees,
@@ -39,12 +39,12 @@ export type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
  * @exports DialKnob
  * @exports DialTrack
  */
-export declare const Dial: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const Dial: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
      * Current angle reading of the compass, between 0.0 - 360.0 degrees,
      * inclusive.
      */
-    angle?: number | undefined;
+    angle?: number;
     /**
      * Length of the knob along the track expressed in degrees, between 0.0 and
      * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.
@@ -53,27 +53,27 @@ export declare const Dial: React.ForwardRefExoticComponent<React.HTMLAttributes<
      *          image that is 1000 x 500, and the window size is 500 x 500, that
      *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.
      */
-    knobLength?: number | undefined;
+    knobLength?: number;
     /**
      * Radius of the compass.
      */
-    radius?: number | undefined;
+    radius?: number;
     /**
      * The thickness of the knob, which is equivalent to the `stroke-width` of the
      * `<path>` element.
      */
-    knobThickness?: number | undefined;
+    knobThickness?: number;
     /**
      * The thickness of the circular track, which is equivalent to the
      * `stroke-width` of the `<circle>` element.
      */
-    trackThickness?: number | undefined;
+    trackThickness?: number;
     /**
      * Specifies if the component should use default styles.
      */
-    usesDefaultStyles?: boolean | undefined;
+    usesDefaultStyles?: boolean;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const DialTrack: ({ ...props }: SVGAttributes<SVGCircleElement>) => React.JSX.Element;
-export declare const DialKnob: ({ ...props }: SVGAttributes<SVGPathElement>) => React.JSX.Element;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialTrack: ({ ...props }: SVGAttributes<SVGCircleElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialKnob: ({ ...props }: SVGAttributes<SVGPathElement>) => import("react/jsx-runtime").JSX.Element;

package/components/Dial.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -46,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialKnob = exports.DialTrack = exports.Dial = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var utils_1 = require("../utils");
 /**
  * A circular dial with a knob and a track.
@@ -65,29 +43,25 @@ exports.Dial = (0, react_1.forwardRef)(function (_a, ref) {
     });
     var fixedStyles = getFixedStyles({ angle: angle, diameter: diameter });
     var defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
-    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, style: (0, utils_1.styles)(style, fixedStyles.root), "data-component": 'dial' }),
-        react_1.default.createElement("div", { style: fixedStyles.trackContainer },
-            react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter), style: fixedStyles.svgContainer }, (0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : react_1.default.createElement(exports.DialTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                cx: radius,
-                cy: radius,
-                r: radius - trackThickness / 2,
-                strokeWidth: trackThickness,
-            }))),
-        react_1.default.createElement("div", { style: (0, utils_1.styles)(fixedStyles.knobContainer) },
-            react_1.default.createElement("svg", { viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg', style: fixedStyles.svgContainer }, (0, utils_1.cloneStyledElement)((_c = components.knob) !== null && _c !== void 0 ? _c : react_1.default.createElement(exports.DialKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
-                strokeWidth: knobThickness,
-                d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),
-            })))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: ref, "data-component": 'dial', style: (0, utils_1.styles)(style, fixedStyles.root), children: [(0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackContainer, children: (0, jsx_runtime_1.jsx)("svg", { height: diameter, style: fixedStyles.svgContainer, viewBox: "0 0 ".concat(diameter, " ").concat(diameter), width: diameter, children: (0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(exports.DialTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
+                        cx: radius,
+                        cy: radius,
+                        r: radius - trackThickness / 2,
+                        strokeWidth: trackThickness,
+                    }) }) }), (0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.styles)(fixedStyles.knobContainer), children: (0, jsx_runtime_1.jsx)("svg", { style: fixedStyles.svgContainer, viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg', children: (0, utils_1.cloneStyledElement)((_c = components.knob) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(exports.DialKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
+                        strokeWidth: knobThickness,
+                        d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),
+                    }) }) })] })));
 });
 Object.defineProperty(exports.Dial, 'displayName', { value: 'Dial', writable: false });
 var DialTrack = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("circle", __assign({}, props, { "data-child": 'track' }));
+    return (0, jsx_runtime_1.jsx)("circle", __assign({}, props, { "data-child": 'track' }));
 };
 exports.DialTrack = DialTrack;
 var DialKnob = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("path", __assign({}, props, { "data-child": 'knob' }));
+    return (0, jsx_runtime_1.jsx)("path", __assign({}, props, { "data-child": 'knob' }));
 };
 exports.DialKnob = DialKnob;
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

package/components/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["components/Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react'\nimport { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\nexport type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees,\n   * inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and\n   * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an\n   *          image that is 1000 x 500, and the window size is 500 x 500, that\n   *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the\n   * `<path>` element.\n   */\n  knobThickness?: number\n\n  /**\n   * The thickness of the circular track, which is equivalent to the\n   * `stroke-width` of the `<circle>` element.\n   */\n  trackThickness?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport const Dial = forwardRef<HTMLDivElement, DialProps>(({\n  children,\n  style,\n  angle = 0,\n  knobLength = 30,\n  knobThickness = 10,\n  radius = 50,\n  trackThickness = 2,\n  usesDefaultStyles = false,\n  ...props\n}, ref) => {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  const components = asComponentDict(children, {\n    track: DialTrack,\n    knob: DialKnob,\n  })\n\n  const fixedStyles = getFixedStyles({ angle, diameter })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined\n\n  return (\n    <div {...props} ref={ref} style={styles(style, fixedStyles.root)} data-component='dial'>\n      <div style={fixedStyles.trackContainer}>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`} style={fixedStyles.svgContainer}>\n          {cloneStyledElement(components.track ?? <DialTrack style={defaultStyles?.track}/>, {\n            cx: radius,\n            cy: radius,\n            r: radius - trackThickness / 2,\n            strokeWidth: trackThickness,\n          })}\n        </svg>\n      </div>\n      <div style={styles(fixedStyles.knobContainer)}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg' style={fixedStyles.svgContainer}>\n          {cloneStyledElement(components.knob ?? <DialKnob style={defaultStyles?.knob}/>, {\n            strokeWidth: knobThickness,\n            d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),\n          })}\n        </svg>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(Dial, 'displayName', { value: 'Dial', writable: false })\n\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props} data-child='track'/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props} data-child='knob'/>\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + radius * Math.cos(angleInRadians),\n    y: centerY + radius * Math.sin(angleInRadians),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M',\n    start.x,\n    start.y,\n    'A',\n    radius,\n    radius,\n    0,\n    largeArcFlag,\n    0,\n    end.x,\n    end.y,\n  ]\n\n  return d.join(' ')\n}\n\nfunction getFixedStyles({ diameter = 0, angle = 0 }) {\n  return asStyleDict({\n    root: {\n      height: `${diameter}px`,\n      width: `${diameter}px`,\n    },\n    knobContainer: {\n      backgroundPosition: 'center',\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: '100%',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n      transform: `rotate(${(angle + 360) % 360}deg)`,\n    },\n    trackContainer: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n    },\n    svgContainer: {\n      overflow: 'visible',\n      position: 'absolute',\n      right: '0',\n      top: '0',\n    },\n  })\n}\n\nfunction getDefaultStyles() {\n  return asStyleDict({\n    knob: {\n      stroke: '#fff',\n    },\n    track: {\n      strokeDasharray: '4',\n      stroke: '#fff',\n    },\n  })\n}\n"]}
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["components/Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type HTMLAttributes, type PropsWithChildren, type SVGAttributes } from 'react'\nimport { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\nexport type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees,\n   * inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and\n   * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an\n   *          image that is 1000 x 500, and the window size is 500 x 500, that\n   *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the\n   * `<path>` element.\n   */\n  knobThickness?: number\n\n  /**\n   * The thickness of the circular track, which is equivalent to the\n   * `stroke-width` of the `<circle>` element.\n   */\n  trackThickness?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport const Dial = forwardRef<HTMLDivElement, DialProps>(({\n  children,\n  style,\n  angle = 0,\n  knobLength = 30,\n  knobThickness = 10,\n  radius = 50,\n  trackThickness = 2,\n  usesDefaultStyles = false,\n  ...props\n}, ref) => {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  const components = asComponentDict(children, {\n    track: DialTrack,\n    knob: DialKnob,\n  })\n\n  const fixedStyles = getFixedStyles({ angle, diameter })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined\n\n  return (\n    <div {...props} ref={ref} data-component='dial' style={styles(style, fixedStyles.root)}>\n      <div style={fixedStyles.trackContainer}>\n        <svg height={diameter} style={fixedStyles.svgContainer} viewBox={`0 0 ${diameter} ${diameter}`} width={diameter}>\n          {cloneStyledElement(components.track ?? <DialTrack style={defaultStyles?.track}/>, {\n            cx: radius,\n            cy: radius,\n            r: radius - trackThickness / 2,\n            strokeWidth: trackThickness,\n          })}\n        </svg>\n      </div>\n      <div style={styles(fixedStyles.knobContainer)}>\n        <svg style={fixedStyles.svgContainer} viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          {cloneStyledElement(components.knob ?? <DialKnob style={defaultStyles?.knob}/>, {\n            strokeWidth: knobThickness,\n            d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),\n          })}\n        </svg>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(Dial, 'displayName', { value: 'Dial', writable: false })\n\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props} data-child='track'/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props} data-child='knob'/>\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + radius * Math.cos(angleInRadians),\n    y: centerY + radius * Math.sin(angleInRadians),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M',\n    start.x,\n    start.y,\n    'A',\n    radius,\n    radius,\n    0,\n    largeArcFlag,\n    0,\n    end.x,\n    end.y,\n  ]\n\n  return d.join(' ')\n}\n\nfunction getFixedStyles({ diameter = 0, angle = 0 }) {\n  return asStyleDict({\n    root: {\n      height: `${diameter}px`,\n      width: `${diameter}px`,\n    },\n    knobContainer: {\n      backgroundPosition: 'center',\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: '100%',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n      transform: `rotate(${(angle + 360) % 360}deg)`,\n    },\n    trackContainer: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n    },\n    svgContainer: {\n      overflow: 'visible',\n      position: 'absolute',\n      right: '0',\n      top: '0',\n    },\n  })\n}\n\nfunction getDefaultStyles() {\n  return asStyleDict({\n    knob: {\n      stroke: '#fff',\n    },\n    track: {\n      strokeDasharray: '4',\n      stroke: '#fff',\n    },\n  })\n}\n"]}

package/components/Dropdown.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -49,8 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var useRect_1 = require("../hooks/useRect");
 var utils_1 = require("../utils");
 var Collection_1 = require("./Collection");
@@ -108,8 +86,8 @@ exports.Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
     var menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1);
     var fixedStyles = getFixedStyles({ isCollapsed: isCollapsed, isInverted: isInverted, maxVisibleItems: maxVisibleItems, menuLength: menuLength, numItems: numItems, orientation: orientation });
     var defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation: orientation }) : undefined;
-    var ExpandIcon = expandIconSvg ? react_1.default.createElement(FlatSVG_1.FlatSVG, { svg: expandIconSvg, style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null);
-    var CollapseIcon = collapseIconSvg ? react_1.default.createElement(FlatSVG_1.FlatSVG, { svg: collapseIconSvg, style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collapseIcon }) : ExpandIcon;
+    var ExpandIcon = expandIconSvg ? (0, jsx_runtime_1.jsx)(FlatSVG_1.FlatSVG, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.expandIcon, svg: expandIconSvg }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    var CollapseIcon = collapseIconSvg ? (0, jsx_runtime_1.jsx)(FlatSVG_1.FlatSVG, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collapseIcon, svg: collapseIconSvg }) : ExpandIcon;
     (0, react_1.useEffect)(function () {
         var clickOutsideHandler = function (event) {
             if (isCollapsed)
@@ -136,12 +114,7 @@ exports.Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             window.removeEventListener('click', clickOutsideHandler);
         };
     }, [isCollapsed]);
-    return (react_1.default.createElement("div", __assign({}, props, { "data-component": 'dropdown', ref: ref, className: (0, clsx_1.default)(className, { collapsed: isCollapsed, expanded: !isCollapsed }), style: (0, utils_1.styles)(style, fixedStyles.root) }),
-        react_1.default.createElement("div", { ref: bodyRef, style: (0, utils_1.styles)(fixedStyles.body) },
-            ToggleComponent ? (react_1.default.createElement(ToggleComponent, { "data-child": 'toggle', style: (0, utils_1.styles)(fixedStyles.toggle), onClick: function () { return toggle(); }, onCustomEvent: function (name, info) { return onToggleCustomEvent === null || onToggleCustomEvent === void 0 ? void 0 : onToggleCustomEvent(name, info); } })) : (react_1.default.createElement("button", { "data-child": 'toggle', style: (0, utils_1.styles)(fixedStyles.toggle, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.toggle), onClick: function () { return toggle(); } },
-                react_1.default.createElement("span", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selection)) !== null && _b !== void 0 ? _b : (selection.length > 0 ? selection.map(function (t) { return items[t].label; }).join(', ') : '') } }),
-                (0, utils_1.cloneStyledElement)(isCollapsed ? ExpandIcon : CollapseIcon))),
-            react_1.default.createElement(Collection_1.Collection, { "data-child": 'collection', style: (0, utils_1.styles)(fixedStyles.collection, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collection), isSelectionTogglable: isSelectionTogglable, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler, ItemComponent: ItemComponent }))));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, { collapsed: isCollapsed, expanded: !isCollapsed }), "data-component": 'dropdown', style: (0, utils_1.styles)(style, fixedStyles.root), children: (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, style: (0, utils_1.styles)(fixedStyles.body), children: [ToggleComponent ? ((0, jsx_runtime_1.jsx)(ToggleComponent, { "data-child": 'toggle', style: (0, utils_1.styles)(fixedStyles.toggle), onClick: function () { return toggle(); }, onCustomEvent: function (name, info) { return onToggleCustomEvent === null || onToggleCustomEvent === void 0 ? void 0 : onToggleCustomEvent(name, info); } })) : ((0, jsx_runtime_1.jsxs)("button", { "data-child": 'toggle', style: (0, utils_1.styles)(fixedStyles.toggle, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.toggle), onClick: function () { return toggle(); }, children: [(0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selection)) !== null && _b !== void 0 ? _b : (selection.length > 0 ? selection.map(function (t) { return items[t].label; }).join(', ') : '') }, style: fixedStyles.toggleLabel }), (0, utils_1.cloneStyledElement)(isCollapsed ? ExpandIcon : CollapseIcon)] })), (0, jsx_runtime_1.jsx)(Collection_1.Collection, { "data-child": 'collection', isSelectionTogglable: isSelectionTogglable, ItemComponent: ItemComponent, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, style: (0, utils_1.styles)(fixedStyles.collection, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.collection), onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler })] }) })));
 });
 Object.defineProperty(exports.Dropdown, 'displayName', { value: 'Dropdown', writable: false });
 function sortIndices(indices) {

package/components/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["components/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, cloneStyledElement, styles } from '../utils'\nimport { Collection, type CollectionItemProps, type CollectionProps, type CollectionSelection } from './Collection'\nimport { FlatSVG } from './FlatSVG'\n\n/**\n * Base extendable type describing the data provided to each item in\n * {@link Dropdown}.\n */\nexport type DropdownItemData = {\n  label?: string\n}\n\n/**\n * Type describing the current item selection of {@link Dropdown}, composed of\n * an array of indices of items that are selected. If the selection mode of the\n * {@link Dropdown} is `single`, only one index is expected in this array.\n */\nexport type DropdownSelection = CollectionSelection\n\n/**\n * Type describing the props of `ToggleComponent` provided to {@link Dropdown}.\n */\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info User-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\n/**\n * Type describing the props of `ItemComponent` provided to {@link Dropdown}.\n */\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = CollectionItemProps<T>\n\n/**\n * Type describing the props of {@link Dropdown}.\n */\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & CollectionProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to use as the collapse icon when a toggle button is\n   * automatically generated (when `ToggleComponent` is absent).\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the internal collection collapses when an item is selected.\n   * This only works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * Padding (in pixels) between the toggle button and the internal collection.\n   */\n  collectionPadding?: number\n\n  /**\n   * The label to appear on the toggle button.\n   *\n   * @param selection The current selection.\n   */\n  label?: (selection: DropdownSelection) => string\n\n  /**\n   * SVG markup to use as the expand icon when a toggle button is automatically\n   * generated (when {@link ToggleComponent} is absent).\n   */\n  expandIconSvg?: string\n\n  /**\n   * Specifies if the internal collection is collapsed.\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time and a scrollbar will appear to enable scrolling\n   * to remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when the component is collapsed.\n   */\n  onCollapse?: () => void\n\n  /**\n   * Handler invoked when the component is expanded.\n   */\n  onExpand?: () => void\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName User-defined name of the dispatched custom event.\n   * @param eventInfo Optional user-defined info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void\n\n  /**\n   * React component type to be used for generating the toggle button inside the\n   * component. When absent, one will be generated automatically.\n   */\n  ToggleComponent?: ComponentType<DropdownToggleProps>\n}>\n\n/**\n * A dropdown component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide `items` and\n * `ItemComponent` props to populate.\n */\nexport const Dropdown = forwardRef(({\n  children,\n  className,\n  style,\n  collapseIconSvg,\n  collapsesOnSelect = true,\n  collectionPadding = 0,\n  expandIconSvg,\n  isCollapsed = true,\n  isInverted = false,\n  label,\n  layout,\n  isSelectionTogglable = false,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  items,\n  maxVisibleItems = -1,\n  numSegments,\n  orientation = 'vertical',\n  selection: externalSelection = [],\n  selectionMode = 'single',\n  usesDefaultStyles = false,\n  onActivateAt,\n  onCollapse,\n  onDeselectAt,\n  onExpand,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\n  ItemComponent,\n  ToggleComponent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (isNaN(index)) return true\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizedSelection = (selection: DropdownSelection) => sortIndices(selection).filter(t => !isIndexOutOfRange(t))\n\n  const expand = () => {\n    if (!isCollapsed) return\n\n    onExpand?.()\n  }\n\n  const collapse = () => {\n    if (isCollapsed) return\n\n    onCollapse?.()\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\n  const selectAtHandler = (index: number) => {\n    onSelectAt?.(index)\n\n    if (selectionMode === 'single' && collapsesOnSelect) collapse()\n  }\n\n  const selectionChangeHandler = (value: DropdownSelection) => {\n    onSelectionChange?.(value)\n  }\n\n  const selection = sanitizedSelection(externalSelection)\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const bodyRect = useRect(bodyRef)\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? bodyRect.height : bodyRect.width)\n  const numItems = items.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1)\n\n  const fixedStyles = getFixedStyles({ isCollapsed, isInverted, maxVisibleItems, menuLength, numItems, orientation })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined\n\n  const ExpandIcon = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles?.expandIcon}/> : <></>\n  const CollapseIcon = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles?.collapseIcon}/> : ExpandIcon\n\n  useEffect(() => {\n    const clickOutsideHandler = (event: MouseEvent) => {\n      if (isCollapsed) return\n      if (!(event.target instanceof Node)) return\n\n      let isOutside = true\n      let node = event.target\n\n      while (node) {\n        if (node === bodyRef.current) {\n          isOutside = false\n          break\n        }\n\n        if (!node.parentNode) break\n\n        node = node.parentNode\n      }\n\n      if (!isOutside) return\n\n      collapse()\n    }\n\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  return (\n    <div\n      {...props}\n      data-component='dropdown'\n      ref={ref}\n      className={clsx(className, { collapsed: isCollapsed, expanded: !isCollapsed })}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            data-child='toggle'\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            data-child='toggle'\n            style={styles(fixedStyles.toggle, defaultStyles?.toggle)}\n            onClick={() => toggle()}\n          >\n            <span style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') }}/>\n            {cloneStyledElement(isCollapsed ? ExpandIcon : CollapseIcon)}\n          </button>\n        )}\n        <Collection\n          data-child='collection'\n          style={styles(fixedStyles.collection, defaultStyles?.collection)}\n          isSelectionTogglable={isSelectionTogglable}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          items={items}\n          layout={layout}\n          numSegments={numSegments}\n          orientation={orientation}\n          selection={selection}\n          selectionMode={selectionMode}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n          ItemComponent={ItemComponent}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Dropdown, 'displayName', { value: 'Dropdown', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ isCollapsed = true, isInverted = false, collectionPadding = 0, maxVisibleItems = 0, menuLength = NaN, numItems = 0, orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      height: '100%',\n      left: '0',\n      margin: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n    },\n    collection: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${collectionPadding}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${collectionPadding}px`,\n        },\n      } : {\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${collectionPadding}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${collectionPadding}px`,\n        },\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ orientation = 'vertical' }) {\n  return asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collapseIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collection: {\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n      } : {\n        transition: 'width 100ms ease-out',\n      },\n    },\n  })\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["components/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, cloneStyledElement, styles } from '../utils'\nimport { Collection, type CollectionItemProps, type CollectionProps, type CollectionSelection } from './Collection'\nimport { FlatSVG } from './FlatSVG'\n\n/**\n * Base extendable type describing the data provided to each item in\n * {@link Dropdown}.\n */\nexport type DropdownItemData = {\n  label?: string\n}\n\n/**\n * Type describing the current item selection of {@link Dropdown}, composed of\n * an array of indices of items that are selected. If the selection mode of the\n * {@link Dropdown} is `single`, only one index is expected in this array.\n */\nexport type DropdownSelection = CollectionSelection\n\n/**\n * Type describing the props of `ToggleComponent` provided to {@link Dropdown}.\n */\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info User-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\n/**\n * Type describing the props of `ItemComponent` provided to {@link Dropdown}.\n */\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = CollectionItemProps<T>\n\n/**\n * Type describing the props of {@link Dropdown}.\n */\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & CollectionProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to use as the collapse icon when a toggle button is\n   * automatically generated (when `ToggleComponent` is absent).\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the internal collection collapses when an item is selected.\n   * This only works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * Padding (in pixels) between the toggle button and the internal collection.\n   */\n  collectionPadding?: number\n\n  /**\n   * The label to appear on the toggle button.\n   *\n   * @param selection The current selection.\n   */\n  label?: (selection: DropdownSelection) => string\n\n  /**\n   * SVG markup to use as the expand icon when a toggle button is automatically\n   * generated (when {@link ToggleComponent} is absent).\n   */\n  expandIconSvg?: string\n\n  /**\n   * Specifies if the internal collection is collapsed.\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time and a scrollbar will appear to enable scrolling\n   * to remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when the component is collapsed.\n   */\n  onCollapse?: () => void\n\n  /**\n   * Handler invoked when the component is expanded.\n   */\n  onExpand?: () => void\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName User-defined name of the dispatched custom event.\n   * @param eventInfo Optional user-defined info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void\n\n  /**\n   * React component type to be used for generating the toggle button inside the\n   * component. When absent, one will be generated automatically.\n   */\n  ToggleComponent?: ComponentType<DropdownToggleProps>\n}>\n\n/**\n * A dropdown component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide `items` and\n * `ItemComponent` props to populate.\n */\nexport const Dropdown = forwardRef(({\n  children,\n  className,\n  style,\n  collapseIconSvg,\n  collapsesOnSelect = true,\n  collectionPadding = 0,\n  expandIconSvg,\n  isCollapsed = true,\n  isInverted = false,\n  label,\n  layout,\n  isSelectionTogglable = false,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  items,\n  maxVisibleItems = -1,\n  numSegments,\n  orientation = 'vertical',\n  selection: externalSelection = [],\n  selectionMode = 'single',\n  usesDefaultStyles = false,\n  onActivateAt,\n  onCollapse,\n  onDeselectAt,\n  onExpand,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\n  ItemComponent,\n  ToggleComponent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (isNaN(index)) return true\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizedSelection = (selection: DropdownSelection) => sortIndices(selection).filter(t => !isIndexOutOfRange(t))\n\n  const expand = () => {\n    if (!isCollapsed) return\n\n    onExpand?.()\n  }\n\n  const collapse = () => {\n    if (isCollapsed) return\n\n    onCollapse?.()\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\n  const selectAtHandler = (index: number) => {\n    onSelectAt?.(index)\n\n    if (selectionMode === 'single' && collapsesOnSelect) collapse()\n  }\n\n  const selectionChangeHandler = (value: DropdownSelection) => {\n    onSelectionChange?.(value)\n  }\n\n  const selection = sanitizedSelection(externalSelection)\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const bodyRect = useRect(bodyRef)\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? bodyRect.height : bodyRect.width)\n  const numItems = items.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1)\n\n  const fixedStyles = getFixedStyles({ isCollapsed, isInverted, maxVisibleItems, menuLength, numItems, orientation })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ orientation }) : undefined\n\n  const ExpandIcon = expandIconSvg ? <FlatSVG style={defaultStyles?.expandIcon} svg={expandIconSvg}/> : <></>\n  const CollapseIcon = collapseIconSvg ? <FlatSVG style={defaultStyles?.collapseIcon} svg={collapseIconSvg}/> : ExpandIcon\n\n  useEffect(() => {\n    const clickOutsideHandler = (event: MouseEvent) => {\n      if (isCollapsed) return\n      if (!(event.target instanceof Node)) return\n\n      let isOutside = true\n      let node = event.target\n\n      while (node) {\n        if (node === bodyRef.current) {\n          isOutside = false\n          break\n        }\n\n        if (!node.parentNode) break\n\n        node = node.parentNode\n      }\n\n      if (!isOutside) return\n\n      collapse()\n    }\n\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx(className, { collapsed: isCollapsed, expanded: !isCollapsed })}\n      data-component='dropdown'\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            data-child='toggle'\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            data-child='toggle'\n            style={styles(fixedStyles.toggle, defaultStyles?.toggle)}\n            onClick={() => toggle()}\n          >\n            <span dangerouslySetInnerHTML={{ __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') }} style={fixedStyles.toggleLabel}/>\n            {cloneStyledElement(isCollapsed ? ExpandIcon : CollapseIcon)}\n          </button>\n        )}\n        <Collection\n          data-child='collection'\n          isSelectionTogglable={isSelectionTogglable}\n          ItemComponent={ItemComponent}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          items={items}\n          layout={layout}\n          numSegments={numSegments}\n          orientation={orientation}\n          selection={selection}\n          selectionMode={selectionMode}\n          style={styles(fixedStyles.collection, defaultStyles?.collection)}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Dropdown, 'displayName', { value: 'Dropdown', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ isCollapsed = true, isInverted = false, collectionPadding = 0, maxVisibleItems = 0, menuLength = NaN, numItems = 0, orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      height: '100%',\n      left: '0',\n      margin: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n    },\n    collection: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${collectionPadding}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${collectionPadding}px`,\n        },\n      } : {\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems !== -1 && maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${collectionPadding}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${collectionPadding}px`,\n        },\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ orientation = 'vertical' }) {\n  return asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collapseIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collection: {\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n      } : {\n        transition: 'width 100ms ease-out',\n      },\n    },\n  })\n}\n"]}