npm - @ahrowe/ui - Versions diffs - 0.28.0 → 0.29.0 - Mend

@ahrowe/ui 0.28.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (647) hide show

package/dist/esm/common/optionPicker/optionPicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import { useRef, type ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n const {\n className = undefined,\n style,\n classNames,\n styles: slotStyles,\n options,\n onChange,\n value,\n ...rest\n } = useComponentDefaults('OptionPicker', props);\n\n const optionPickerLeft = options.findIndex((option) => option.key === value) * 100 / options.length;\n\n const itemRefs = useRef<(HTMLDivElement \| null)[]>([]);\n const selectedIndex = options.findIndex((option) => option.key === value);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n function moveTo(step: 1 \| -1, fromIndex: number, event: React.KeyboardEvent<HTMLDivElement>) {\n if (options.length === 0) return;\n const next = (fromIndex + step + options.length) % options.length;\n itemRefs.current[next]?.focus();\n onChange(options[next].key, event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>, index: number) {\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role~~=\"~~radiogroup\"\n className={cx(styles.optionPicker, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n className={cx(styles.optionPickerChip, classNames?.chip)}\n style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n />\n {options.map((option, index) => {\n const checked = option.key === value;\n return (\n <InteractableDiv\n ref={(el) => { itemRefs.current[index] = el; }}\n onClick={(e) => onChange(option.key, e)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n key={option.key}\n role~~=\"~~radio\"\n aria-checked={checked}\n className={cx(\n styles.optionPickerOption~~,\n~~ checked && styles.optionPickerOptionActive~~,\n~~ classNames?.option\n )}\n style={slotStyles?.option}\n tabIndex={index === rovingIndex ? 0 : -1}\n >\n {option.label}\n </InteractableDiv>\n );\n })}\n </div>\n );\n}\n\nexport default OptionPicker;\n"],"mappings":"~~kRASA~~,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,~~EAAmB~~,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,~~IAAM~~,EAAQ,~~OAEvF~~,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAgB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAClE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAO,EAAc,EAAmB,EAA4C,CAC3F,GAAI,EAAQ,SAAW,EAAG,OAC1B,IAAM,GAAQ,EAAY,EAAO,EAAQ,QAAU,EAAQ,OAC3D,EAAS,QAAQ,~~IAAO~~,MAAM,EAC9B,EAAS,EAAQ,~~GAAM~~,IAAK,CAAgE,CAC9F,CAEA,SAAS,EAAc,EAA4C,EAAe,CAChF,OAAQ,EAAM,IAAd,CACE,IAAK,aACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,EAAG,EAAO,CAAK,EACtB,MACF,IAAK,YACL,IAAK,UACH,EAAM,eAAe,EACrB,EAAO,GAAI,EAAO,CAAK,~~EACvB~~,~~MACF,QACE,KACJ,~~CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,aACL,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,~~WAJzC~~,CAME,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,KAAK,EAAQ,IAAU,CAC9B,IAAM,EAAU,EAAO,MAAQ,EAC/B,OACE,EAAC,EAAD,CACE,IAAM,GAAO,~~CAAE~~,EAAS,QAAQ,GAAS,~~CAAI~~,~~EAC7C~~,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EACtC,UAAY,GAAM,EAAc,EAAG,CAAK,EAExC,KAAK,QACL,eAAc,EACd,UAAW,~~EACT~~,EAAO,~~mBACP~~,GAAW,EAAO,~~yBAClB~~,GAAY,~~MACd~~,~~EACA~~,MAAO,GAAY,OACnB,SAAU,IAAU,EAAc,EAAI,~~YAErC~~,EAAO,KACO,~~EAZV~~,EAAO,~~GAYG~~,CAErB,CAAC,CACE,GAET"}
1	+ {"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import { useRef, type ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n const {\n className = undefined,\n style,\n classNames,\n styles: slotStyles,\n options,\n onChange,\n value,\n ...rest\n } = useComponentDefaults('OptionPicker', props);\n\n const optionPickerLeft = (options.findIndex((option) => option.key === value) * 100) / options.length;\n\n const itemRefs = useRef<(HTMLDivElement \| null)[]>([]);\n const selectedIndex = options.findIndex((option) => option.key === value);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n function moveTo(step: 1 \| -1, fromIndex: number, event: React.KeyboardEvent<HTMLDivElement>) {\n if (options.length === 0) return;\n const next = (fromIndex + step + options.length) % options.length;\n itemRefs.current[next]?.focus();\n onChange(options[next].key, event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>, index: number) {\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role='radiogroup'\n className={cx(styles.optionPicker, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n className={cx(styles.optionPickerChip, classNames?.chip)}\n style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n />\n {options.map((option, index) => {\n const checked = option.key === value;\n return (\n <InteractableDiv\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n onClick={(e) => onChange(option.key, e)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n key={option.key}\n role='radio'\n aria-checked={checked}\n className={cx(styles.optionPickerOption, checked && styles.optionPickerOptionActive, classNames?.option)}\n style={slotStyles?.option}\n tabIndex={index === rovingIndex ? 0 : -1}\n >\n {option.label}\n </InteractableDiv>\n );\n })}\n </div>\n );\n}\n\nexport default OptionPicker;\n"],"mappings":"kRAQA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAoB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAO,EAAQ,OAEzF,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAgB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAClE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAO,EAAc,EAAmB,EAA4C,CAC3F,GAAI,EAAQ,SAAW,EAAG,OAC1B,IAAM,GAAQ,EAAY,EAAO,EAAQ,QAAU,EAAQ,OAC3D,EAAS,QAAQ,EAAK,EAAE,MAAM,EAC9B,EAAS,EAAQ,EAAK,CAAC,IAAK,CAAgE,CAC9F,CAEA,SAAS,EAAc,EAA4C,EAAe,CAChF,OAAQ,EAAM,IAAd,CACE,IAAK,aACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,EAAG,EAAO,CAAK,EACtB,MACF,IAAK,YACL,IAAK,UACH,EAAM,eAAe,EACrB,EAAO,GAAI,EAAO,CAAK,CAI3B,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,aACL,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAME,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,KAAK,EAAQ,IAAU,CAC9B,IAAM,EAAU,EAAO,MAAQ,EAC/B,OACE,EAAC,EAAD,CACE,IAAM,GAAO,CACX,EAAS,QAAQ,GAAS,CAC5B,EACA,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EACtC,UAAY,GAAM,EAAc,EAAG,CAAK,EAExC,KAAK,QACL,eAAc,EACd,UAAW,EAAG,EAAO,mBAAoB,GAAW,EAAO,yBAA0B,GAAY,MAAM,EACvG,MAAO,GAAY,OACnB,SAAU,IAAU,EAAc,EAAI,GAErC,SAAA,EAAO,KACO,EARV,EAAO,GAQG,CAErB,CAAC,CACE,GAET"}

package/dist/esm/common/optionPicker/optionPicker.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={optionPicker:`optionPicker_Yx82s`,"optionPicker-chip":`optionPicker-chip_ywtvr`,optionPickerChip:`optionPicker-chip_ywtvr`,"optionPicker-option":`optionPicker-option_uq0vK`,optionPickerOption:`optionPicker-option_uq0vK`,"optionPicker-option-active":`optionPicker-option-active_yUECW`,optionPickerOptionActive:`optionPicker-option-active_yUECW`};export{e as default};
+var e=`optionPicker_Yx82s`,t=`optionPicker-chip_ywtvr`,n=`optionPicker-option_uq0vK`,r=`optionPicker-option-active_yUECW`,i={optionPicker:e,"optionPicker-chip":`optionPicker-chip_ywtvr`,optionPickerChip:t,"optionPicker-option":`optionPicker-option_uq0vK`,optionPickerOption:n,"optionPicker-option-active":`optionPicker-option-active_yUECW`,optionPickerOptionActive:r};export{i as default,e as optionPicker,t as optionPickerChip,n as optionPickerOption,r as optionPickerOptionActive};
 //# sourceMappingURL=optionPicker.module.mjs.map

package/dist/esm/common/optionPicker/optionPicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n display: flex;\n width: 100%;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n transition: border-color 0.15s;\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n keyboard focus — same as the per-option ring below, not on a mouse click. /\n &:has(:focus-visible) {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n align-content: center;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: var(--option-picker-padding, var(--spacing-m));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n box-sizing: border-box;\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n\n / The active option sits on the primary-color chip, so the default\n primary-color outline above is invisible against it — use the\n on-primary color instead, same as the option's own text/icon color. */\n &:focus-visible {\n outline-color: var(--text-on-primary);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker {\n display: flex;\n width: 100%;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n transition: border-color 0.15s;\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n keyboard focus — same as the per-option ring below, not on a mouse click. /\n &:has(:focus-visible) {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition:\n left 0.25s ease-in-out,\n width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n align-content: center;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: var(--option-picker-padding, var(--spacing-m));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n box-sizing: border-box;\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n\n / The active option sits on the primary-color chip, so the default\n primary-color outline above is invisible against it — use the\n on-primary color instead, same as the option's own text/icon color. */\n &:focus-visible {\n outline-color: var(--text-on-primary);\n }\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/otpInput/otpInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"otpInput.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\nimport { useComponentDefaults } from '../configProvider';\n\nimport { OtpInputCharset, type OtpInputProps } from './otpInput.types';\nimport styles from './otpInput.module.pcss';\n\nconst NUMERIC_RE = /[0-9]/g;\nconst ALPHANUMERIC_RE = /[a-zA-Z0-9]/g;\n\nfunction filterChars(raw: string, charset: OtpInputCharset): string {\n const re = charset === OtpInputCharset.Alphanumeric ? ALPHANUMERIC_RE : NUMERIC_RE;\n return (raw.match(re) \|\| []).join('');\n}\n\nfunction OtpInput(props: OtpInputProps): ReactElement {\n const {\n length = 6,\n value,\n onChange = () => {},\n onComplete = () => {},\n formValidator = null,\n charset = OtpInputCharset.Numeric,\n masked = false,\n groupAfter = [],\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n clearOnError = false,\n clearErrorDelay = 900,\n disabled = false,\n autoFocus = false,\n className = '',\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('OtpInput', props);\n\n const currentValue = (formValidator ? (formValidator.value as string) : value) ?? '';\n const [, forceUpdate] = useState(0);\n const [isShaking, setIsShaking] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const inputRefs = useRef<Array<HTMLInputElement \| null>>([]);\n const wasErrorRef = useRef(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n useEffect(() => {\n if (!autoFocus) return;\n const firstEmpty = Math.min(currentValue.length, length - 1);\n inputRefs.current[firstEmpty]?.focus();\n // Only run once, on mount.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const showError = formValidator\n ? formValidator.touched && formValidator.hasError()\n : !isValid \|\| !!errorMessage;\n const displayedErrorMessage = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| '';\n\n useEffect(() => {\n const justErrored = showError && !wasErrorRef.current;\n wasErrorRef.current = showError;\n if (!justErrored) return;\n\n setIsShaking(true);\n const shakeTimeoutId = window.setTimeout(() => setIsShaking(false), 400);\n const clearTimeoutId = clearOnError\n ? window.setTimeout(() => {\n commit('');\n inputRefs.current[0]?.focus();\n }, clearErrorDelay)\n : null;\n\n return () => {\n window.clearTimeout(shakeTimeoutId);\n if (clearTimeoutId != null) window.clearTimeout(clearTimeoutId);\n };\n // Only re-evaluate on an actual error-state or config change, not on every value/render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showError, clearOnError, clearErrorDelay]);\n\n function commit(next: string) {\n const wasComplete = currentValue.length === length;\n const clipped = filterChars(next, charset).slice(0, length);\n if (formValidator) {\n formValidator.set(clipped);\n }\n onChange?.(clipped);\n // Only fire once per genuinely new completion (going from partial to full), not on every\n // keystroke made while correcting an already-full code.\n if (clipped.length === length && !wasComplete) {\n onComplete?.(clipped);\n }\n }\n\n function setCharAt(index: number, char: string) {\n const chars = currentValue.split('');\n chars[index] = char;\n commit(chars.join(''));\n }\n\n function handleChange(index: number, rawInput: string) {\n if (disabled) return;\n if (rawInput === '') {\n // Box was cleared (e.g. select + delete) — Backspace itself is handled in onKeyDown.\n setCharAt(index, '');\n return;\n }\n\n const filtered = filterChars(rawInput, charset);\n if (!filtered) {\n // Typed an invalid/disallowed character — the controlled `value` re-render discards it.\n return;\n }\n\n // Clicking straight into a box past the contiguous filled prefix (skipping ahead of\n // empty boxes) fills the next expected slot instead, rather than leaving a gap before it\n // that setCharAt/distributeFrom can't represent in a plain string and would silently collapse.\n const targetIndex = Math.min(index, currentValue.length);\n\n if (rawInput.length > 1) {\n // Mobile autofill / SMS suggestions can drop the whole code into one box, bypassing maxLength.\n distributeFrom(targetIndex, filtered);\n return;\n }\n\n setCharAt(targetIndex, filtered);\n if (targetIndex < length - 1) {\n inputRefs.current[targetIndex + 1]?.focus();\n } else {\n inputRefs.current[targetIndex]?.blur();\n }\n }\n\n function distributeFrom(startIndex: number, chars: string) {\n const clean = filterChars(chars, charset);\n if (!clean) return;\n const existing = currentValue.padEnd(length, ' ').split('');\n let cursor = startIndex;\n for (const char of clean) {\n if (cursor >= length) break;\n existing[cursor] = char;\n cursor += 1;\n }\n commit(existing.join('').trimEnd());\n const nextFocus = Math.min(cursor, length - 1);\n inputRefs.current[nextFocus]?.focus();\n if (cursor >= length) {\n inputRefs.current[length - 1]?.blur();\n }\n }\n\n function handlePaste(index: number, event: React.ClipboardEvent<HTMLInputElement>) {\n if (disabled) return;\n const pasted = event.clipboardData.getData('text');\n if (!pasted) return;\n event.preventDefault();\n // Same clamp as handleChange — pasting into a box past the filled prefix starts at the\n // next expected slot instead of leaving an unrepresentable gap before it.\n distributeFrom(Math.min(index, currentValue.length), pasted);\n }\n\n function handleKeyDown(index: number, event: React.KeyboardEvent<HTMLInputElement>) {\n if (disabled) return;\n\n // React's controlled-input onChange never fires when the resulting value is identical to\n // what's already rendered (its value tracker sees no change) — so retyping the exact digit\n // already in a box would otherwise silently do nothing. keydown always fires, so handle that\n // one case here and skip the native edit entirely.\n if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n const typed = filterChars(event.key, charset);\n if (typed && currentValue[index] === typed) {\n event.preventDefault();\n setCharAt(index, typed);\n if (index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n } else {\n inputRefs.current[index]?.blur();\n }\n return;\n }\n }\n\n if (event.key === 'Backspace') {\n if (currentValue[index]) {\n setCharAt(index, '');\n return;\n }\n if (index > 0) {\n event.preventDefault();\n setCharAt(index - 1, '');\n inputRefs.current[index - 1]?.focus();\n }\n return;\n }\n if (event.key === 'Delete') {\n if (currentValue[index]) setCharAt(index, '');\n return;\n }\n if (event.key === 'ArrowLeft' && index > 0) {\n event.preventDefault();\n inputRefs.current[index - 1]?.focus();\n return;\n }\n if (event.key === 'ArrowRight' && index < length - 1) {\n event.preventDefault();\n inputRefs.current[index + 1]?.focus();\n }\n }\n\n function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n event.target.select();\n }\n\n function handleGroupFocus() {\n setIsFocused(true);\n }\n\n function handleGroupBlur(event: React.FocusEvent<HTMLDivElement>) {\n // Auto-advance moves focus between boxes constantly while typing — only treat this as\n // leaving the group once focus actually lands outside it, not on the next box.\n if (event.currentTarget.contains(event.relatedTarget as Node \| null)) return;\n setIsFocused(false);\n if (formValidator) formValidator.touched = true;\n }\n\n return (\n <div\n {...rest}\n className={cx(styles.otpInput, disabled && styles.otpInputDisabled, className)}\n style={style}\n >\n {label && (\n <div className={cx(styles.otpInputLabel, classNames?.label)} style={slotStyles?.label}>\n {label}\n {isRequired && <span className={styles.otpInputRequiredMark}> </span>}\n </div>\n )}\n <div\n role=\"group\"\n aria-label={label \|\| 'One-time code'}\n className={cx(styles.otpInputBoxes, isShaking && styles.otpInputBoxesShake, classNames?.inputs)}\n style={slotStyles?.inputs}\n onFocus={handleGroupFocus}\n onBlur={handleGroupBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {Array.from({ length }, (_, index) => {\n const char = currentValue[index] \|\| '';\n return (\n <div key={index} className={styles.otpInputBoxWrapper}>\n <input\n ref={(el) => { inputRefs.current[index] = el; }}\n type={masked ? 'password' : 'text'}\n inputMode={charset === OtpInputCharset.Numeric ? 'numeric' : 'text'}\n pattern={charset === OtpInputCharset.Numeric ? '[0-9]' : undefined}\n autoComplete={index === 0 ? 'one-time-code' : 'off'}\n maxLength={1}\n disabled={disabled}\n value={char}\n aria-label={`Digit ${index + 1} of ${length}`}\n aria-invalid={showError \|\| undefined}\n className={cx(\n styles.otpInputBox,\n showError && styles.otpInputBoxError,\n char && styles.otpInputBoxFilled,\n classNames?.input\n )}\n style={slotStyles?.input}\n onChange={(e) => handleChange(index, e.target.value)}\n onKeyDown={(e) => handleKeyDown(index, e)}\n onPaste={(e) => handlePaste(index, e)}\n onFocus={handleFocus}\n />\n {groupAfter.includes(index + 1) && index < length - 1 && (\n <span className={cx(styles.otpInputSeparator, classNames?.separator)} style={slotStyles?.separator} />\n )}\n </div>\n );\n })}\n </div>\n <Tooltip\n variant=\"error\"\n message={displayedErrorMessage}\n isVisible={showError && (isFocused \|\| isHovered)}\n />\n </div>\n );\n}\n\nexport default OtpInput;\n"],"mappings":"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"}
1	+ {"version":3,"file":"otpInput.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\nimport { useComponentDefaults } from '../configProvider';\n\nimport { OtpInputCharset, type OtpInputProps } from './otpInput.types';\nimport styles from './otpInput.module.pcss';\n\nconst NUMERIC_RE = /[0-9]/g;\nconst ALPHANUMERIC_RE = /[a-zA-Z0-9]/g;\n\nfunction filterChars(raw: string, charset: OtpInputCharset): string {\n const re = charset === OtpInputCharset.Alphanumeric ? ALPHANUMERIC_RE : NUMERIC_RE;\n return (raw.match(re) \|\| []).join('');\n}\n\nfunction OtpInput(props: OtpInputProps): ReactElement {\n const {\n length = 6,\n value,\n onChange = () => {},\n onComplete = () => {},\n formValidator = null,\n charset = OtpInputCharset.Numeric,\n masked = false,\n groupAfter = [],\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n clearOnError = false,\n clearErrorDelay = 900,\n disabled = false,\n autoFocus = false,\n className = '',\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('OtpInput', props);\n\n const currentValue = (formValidator ? (formValidator.value as string) : value) ?? '';\n const [, forceUpdate] = useState(0);\n const [isShaking, setIsShaking] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const inputRefs = useRef<Array<HTMLInputElement \| null>>([]);\n const wasErrorRef = useRef(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n useEffect(() => {\n if (!autoFocus) return;\n const firstEmpty = Math.min(currentValue.length, length - 1);\n inputRefs.current[firstEmpty]?.focus();\n // Only run once, on mount.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const showError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n const displayedErrorMessage = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| '';\n\n useEffect(() => {\n const justErrored = showError && !wasErrorRef.current;\n wasErrorRef.current = showError;\n if (!justErrored) return;\n\n setIsShaking(true);\n const shakeTimeoutId = window.setTimeout(() => setIsShaking(false), 400);\n const clearTimeoutId = clearOnError\n ? window.setTimeout(() => {\n commit('');\n inputRefs.current[0]?.focus();\n }, clearErrorDelay)\n : null;\n\n return () => {\n window.clearTimeout(shakeTimeoutId);\n if (clearTimeoutId != null) window.clearTimeout(clearTimeoutId);\n };\n // Only re-evaluate on an actual error-state or config change, not on every value/render.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showError, clearOnError, clearErrorDelay]);\n\n function commit(next: string) {\n const wasComplete = currentValue.length === length;\n const clipped = filterChars(next, charset).slice(0, length);\n if (formValidator) {\n formValidator.set(clipped);\n }\n onChange?.(clipped);\n // Only fire once per genuinely new completion (going from partial to full), not on every\n // keystroke made while correcting an already-full code.\n if (clipped.length === length && !wasComplete) {\n onComplete?.(clipped);\n }\n }\n\n function setCharAt(index: number, char: string) {\n const chars = currentValue.split('');\n chars[index] = char;\n commit(chars.join(''));\n }\n\n function handleChange(index: number, rawInput: string) {\n if (disabled) return;\n if (rawInput === '') {\n // Box was cleared (e.g. select + delete) — Backspace itself is handled in onKeyDown.\n setCharAt(index, '');\n return;\n }\n\n const filtered = filterChars(rawInput, charset);\n if (!filtered) {\n // Typed an invalid/disallowed character — the controlled `value` re-render discards it.\n return;\n }\n\n // Clicking straight into a box past the contiguous filled prefix (skipping ahead of\n // empty boxes) fills the next expected slot instead, rather than leaving a gap before it\n // that setCharAt/distributeFrom can't represent in a plain string and would silently collapse.\n const targetIndex = Math.min(index, currentValue.length);\n\n if (rawInput.length > 1) {\n // Mobile autofill / SMS suggestions can drop the whole code into one box, bypassing maxLength.\n distributeFrom(targetIndex, filtered);\n return;\n }\n\n setCharAt(targetIndex, filtered);\n if (targetIndex < length - 1) {\n inputRefs.current[targetIndex + 1]?.focus();\n } else {\n inputRefs.current[targetIndex]?.blur();\n }\n }\n\n function distributeFrom(startIndex: number, chars: string) {\n const clean = filterChars(chars, charset);\n if (!clean) return;\n const existing = currentValue.padEnd(length, ' ').split('');\n let cursor = startIndex;\n for (const char of clean) {\n if (cursor >= length) break;\n existing[cursor] = char;\n cursor += 1;\n }\n commit(existing.join('').trimEnd());\n const nextFocus = Math.min(cursor, length - 1);\n inputRefs.current[nextFocus]?.focus();\n if (cursor >= length) {\n inputRefs.current[length - 1]?.blur();\n }\n }\n\n function handlePaste(index: number, event: React.ClipboardEvent<HTMLInputElement>) {\n if (disabled) return;\n const pasted = event.clipboardData.getData('text');\n if (!pasted) return;\n event.preventDefault();\n // Same clamp as handleChange — pasting into a box past the filled prefix starts at the\n // next expected slot instead of leaving an unrepresentable gap before it.\n distributeFrom(Math.min(index, currentValue.length), pasted);\n }\n\n function handleKeyDown(index: number, event: React.KeyboardEvent<HTMLInputElement>) {\n if (disabled) return;\n\n // React's controlled-input onChange never fires when the resulting value is identical to\n // what's already rendered (its value tracker sees no change) — so retyping the exact digit\n // already in a box would otherwise silently do nothing. keydown always fires, so handle that\n // one case here and skip the native edit entirely.\n if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n const typed = filterChars(event.key, charset);\n if (typed && currentValue[index] === typed) {\n event.preventDefault();\n setCharAt(index, typed);\n if (index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n } else {\n inputRefs.current[index]?.blur();\n }\n return;\n }\n }\n\n if (event.key === 'Backspace') {\n if (currentValue[index]) {\n setCharAt(index, '');\n return;\n }\n if (index > 0) {\n event.preventDefault();\n setCharAt(index - 1, '');\n inputRefs.current[index - 1]?.focus();\n }\n return;\n }\n if (event.key === 'Delete') {\n if (currentValue[index]) setCharAt(index, '');\n return;\n }\n if (event.key === 'ArrowLeft' && index > 0) {\n event.preventDefault();\n inputRefs.current[index - 1]?.focus();\n return;\n }\n if (event.key === 'ArrowRight' && index < length - 1) {\n event.preventDefault();\n inputRefs.current[index + 1]?.focus();\n }\n }\n\n function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n event.target.select();\n }\n\n function handleGroupFocus() {\n setIsFocused(true);\n }\n\n function handleGroupBlur(event: React.FocusEvent<HTMLDivElement>) {\n // Auto-advance moves focus between boxes constantly while typing — only treat this as\n // leaving the group once focus actually lands outside it, not on the next box.\n if (event.currentTarget.contains(event.relatedTarget as Node \| null)) return;\n setIsFocused(false);\n if (formValidator) formValidator.touched = true;\n }\n\n return (\n <div {...rest} className={cx(styles.otpInput, disabled && styles.otpInputDisabled, className)} style={style}>\n {label && (\n <div className={cx(styles.otpInputLabel, classNames?.label)} style={slotStyles?.label}>\n {label}\n {isRequired && <span className={styles.otpInputRequiredMark}> </span>}\n </div>\n )}\n <div\n role='group'\n aria-label={label \|\| 'One-time code'}\n className={cx(styles.otpInputBoxes, isShaking && styles.otpInputBoxesShake, classNames?.inputs)}\n style={slotStyles?.inputs}\n onFocus={handleGroupFocus}\n onBlur={handleGroupBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {Array.from({ length }, (_, index) => {\n const char = currentValue[index] \|\| '';\n return (\n <div key={index} className={styles.otpInputBoxWrapper}>\n <input\n ref={(el) => {\n inputRefs.current[index] = el;\n }}\n type={masked ? 'password' : 'text'}\n inputMode={charset === OtpInputCharset.Numeric ? 'numeric' : 'text'}\n pattern={charset === OtpInputCharset.Numeric ? '[0-9]' : undefined}\n autoComplete={index === 0 ? 'one-time-code' : 'off'}\n maxLength={1}\n disabled={disabled}\n value={char}\n aria-label={`Digit ${index + 1} of ${length}`}\n aria-invalid={showError \|\| undefined}\n className={cx(\n styles.otpInputBox,\n showError && styles.otpInputBoxError,\n char && styles.otpInputBoxFilled,\n classNames?.input,\n )}\n style={slotStyles?.input}\n onChange={(e) => handleChange(index, e.target.value)}\n onKeyDown={(e) => handleKeyDown(index, e)}\n onPaste={(e) => handlePaste(index, e)}\n onFocus={handleFocus}\n />\n {groupAfter.includes(index + 1) && index < length - 1 && (\n <span className={cx(styles.otpInputSeparator, classNames?.separator)} style={slotStyles?.separator} />\n )}\n </div>\n );\n })}\n </div>\n <Tooltip variant='error' message={displayedErrorMessage} isVisible={showError && (isFocused \|\| isHovered)} />\n </div>\n );\n}\n\nexport default OtpInput;\n"],"mappings":"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"}

package/dist/esm/common/otpInput/otpInput.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={otpInput:`otpInput_5-tug`,"otpInput-label":`otpInput-label_T9X7O`,otpInputLabel:`otpInput-label_T9X7O`,"otpInput-requiredMark":`otpInput-requiredMark_FNY2c`,otpInputRequiredMark:`otpInput-requiredMark_FNY2c`,"otpInput-boxes":`otpInput-boxes_FhhIF`,otpInputBoxes:`otpInput-boxes_FhhIF`,"otpInput-boxes-shake":`otpInput-boxes-shake_c50KX`,otpInputBoxesShake:`otpInput-boxes-shake_c50KX`,otpInputShake:`otpInputShake_TljCu`,"otpInput-boxWrapper":`otpInput-boxWrapper_ezHbo`,otpInputBoxWrapper:`otpInput-boxWrapper_ezHbo`,"otpInput-box":`otpInput-box_AB6Kx`,otpInputBox:`otpInput-box_AB6Kx`,"otpInput-box-filled":`otpInput-box-filled_npNOF`,otpInputBoxFilled:`otpInput-box-filled_npNOF`,"otpInput-box-error":`otpInput-box-error_8kLDb`,otpInputBoxError:`otpInput-box-error_8kLDb`,"otpInput-separator":`otpInput-separator_SArCq`,otpInputSeparator:`otpInput-separator_SArCq`,"otpInput-disabled":`otpInput-disabled_bzwE9`,otpInputDisabled:`otpInput-disabled_bzwE9`};export{e as default};
+var e=`otpInput_5-tug`,t=`otpInput-label_T9X7O`,n=`otpInput-requiredMark_FNY2c`,r=`otpInput-boxes_FhhIF`,i=`otpInput-boxes-shake_c50KX`,a=`otpInputShake_TljCu`,o=`otpInput-boxWrapper_ezHbo`,s=`otpInput-box_AB6Kx`,c=`otpInput-box-filled_npNOF`,l=`otpInput-box-error_8kLDb`,u=`otpInput-separator_SArCq`,d=`otpInput-disabled_bzwE9`,f={otpInput:e,"otpInput-label":`otpInput-label_T9X7O`,otpInputLabel:t,"otpInput-requiredMark":`otpInput-requiredMark_FNY2c`,otpInputRequiredMark:n,"otpInput-boxes":`otpInput-boxes_FhhIF`,otpInputBoxes:r,"otpInput-boxes-shake":`otpInput-boxes-shake_c50KX`,otpInputBoxesShake:i,otpInputShake:a,"otpInput-boxWrapper":`otpInput-boxWrapper_ezHbo`,otpInputBoxWrapper:o,"otpInput-box":`otpInput-box_AB6Kx`,otpInputBox:s,"otpInput-box-filled":`otpInput-box-filled_npNOF`,otpInputBoxFilled:c,"otpInput-box-error":`otpInput-box-error_8kLDb`,otpInputBoxError:l,"otpInput-separator":`otpInput-separator_SArCq`,otpInputSeparator:u,"otpInput-disabled":`otpInput-disabled_bzwE9`,otpInputDisabled:d};export{f as default,e as otpInput,s as otpInputBox,l as otpInputBoxError,c as otpInputBoxFilled,o as otpInputBoxWrapper,r as otpInputBoxes,i as otpInputBoxesShake,d as otpInputDisabled,t as otpInputLabel,n as otpInputRequiredMark,u as otpInputSeparator,a as otpInputShake};
 //# sourceMappingURL=otpInput.module.mjs.map

package/dist/esm/common/otpInput/otpInput.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"otpInput.module.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.module.pcss"],"sourcesContent":["@keyframes otpInputShake {\n 10%, 90% { transform: translateX(-1px); }\n 20%, 80% { transform: translateX(2px); }\n 30%, 50%, 70% { transform: translateX(-4px); }\n 40%, 60% { transform: translateX(4px); }\n}\n\n.otpInput {\n display: inline-flex;\n flex-direction: column;\n row-gap: 8px;\n\n &-label {\n font-size: var(--default-font-size);\n color: var(--text-color);\n }\n\n &-requiredMark {\n color: var(--required-mark-color, var(--error-color));\n }\n\n &-boxes {\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n &-shake {\n animation: otpInputShake 0.4s ease-in-out;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n &-boxWrapper {\n display: flex;\n align-items: center;\n column-gap: 8px;\n }\n\n &-box {\n width: 40px;\n height: 48px;\n text-align: center;\n font-size: 1.25rem;\n font-weight: 600;\n font-family: var(--themed-font, inherit);\n color: var(--text-color);\n background: var(--input-background, var(--background));\n border: 1.5px solid var(--border-color);\n border-radius: var(--default-border-radius);\n outline: none;\n transition:\n border-color 0.15s,\n box-shadow 0.15s;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 20%, transparent);\n }\n\n &-filled {\n border-color: var(--primary-lighter, var(--border-color));\n }\n\n &-error {\n border-color: var(--error-color);\n\n &:focus {\n border-color: var(--error-color);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);\n }\n }\n\n &:disabled {\n color: var(--disabled-font-color);\n background: var(--disabled-input-color);\n cursor: not-allowed;\n }\n }\n\n &-separator {\n width: 10px;\n height: 1.5px;\n background: var(--border-color);\n flex-shrink: 0;\n }\n\n &-disabled &-label {\n color: var(--disabled-font-color);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"otpInput.module.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.module.pcss"],"sourcesContent":["@keyframes otpInputShake {\n 10%,\n 90% {\n transform: translateX(-1px);\n }\n\n 20%,\n 80% {\n transform: translateX(2px);\n }\n\n 30%,\n 50%,\n 70% {\n transform: translateX(-4px);\n }\n\n 40%,\n 60% {\n transform: translateX(4px);\n }\n}\n\n.otpInput {\n display: inline-flex;\n flex-direction: column;\n row-gap: 8px;\n\n &-label {\n font-size: var(--default-font-size);\n color: var(--text-color);\n }\n\n &-requiredMark {\n color: var(--required-mark-color, var(--error-color));\n }\n\n &-boxes {\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n &-shake {\n animation: otpInputShake 0.4s ease-in-out;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n &-boxWrapper {\n display: flex;\n align-items: center;\n column-gap: 8px;\n }\n\n &-box {\n width: 40px;\n height: 48px;\n text-align: center;\n font-size: 1.25rem;\n font-weight: 600;\n font-family: var(--themed-font, inherit);\n color: var(--text-color);\n background: var(--input-background, var(--background));\n border: 1.5px solid var(--border-color);\n border-radius: var(--default-border-radius);\n outline: none;\n transition:\n border-color 0.15s,\n box-shadow 0.15s;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 20%, transparent);\n }\n\n &-filled {\n border-color: var(--primary-lighter, var(--border-color));\n }\n\n &-error {\n border-color: var(--error-color);\n\n &:focus {\n border-color: var(--error-color);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);\n }\n }\n\n &:disabled {\n color: var(--disabled-font-color);\n background: var(--disabled-input-color);\n cursor: not-allowed;\n }\n }\n\n &-separator {\n width: 10px;\n height: 1.5px;\n background: var(--border-color);\n flex-shrink: 0;\n }\n\n &-disabled &-label {\n color: var(--disabled-font-color);\n }\n}\n"],"mappings":""}

package/dist/esm/common/overscroll/overscroll.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overscroll.mjs","names":[],"sources":["../../../../package/common/overscroll/overscroll.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport cx from 'classnames';\nimport type { UIEvent } from 'react';\nimport useWindowSize from '../../hooks/useWindowSize';\nimport styles from './overscroll.module.pcss';\nimport type { OverscrollProps } from './overscroll.types';\n\nexport default function Overscroll({\n children = null,\n overscrollContent = null,\n overscrollContentDesktop = null,\n centerHeader = true,\n min = 10,\n max = 80,\n start = 30,\n unit = '%',\n mobileOnly = true,\n onScrollChange = () => {},\n scrollDisabled = false,\n}: OverscrollProps) {\n const { isMobileSize, height } = useWindowSize();\n\n const overscrollRef = useRef<HTMLDivElement>(null);\n const overscrollHeaderRef = useRef<HTMLDivElement>(null);\n const overscrollHeaderContainerRef = useRef<HTMLDivElement>(null);\n const isScrollingRef = useRef(false);\n const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const onScrollChangeRef = useRef(onScrollChange);\n useEffect(() => { onScrollChangeRef.current = onScrollChange; });\n\n const updateHeaderHeight = useCallback(\n (scrollTop: number) => {\n let h: number;\n if (unit === '%') {\n if (!overscrollHeaderContainerRef.current) return;\n const containerH = overscrollHeaderContainerRef.current.clientHeight;\n h = Math.max((containerH * min) / 100, containerH - scrollTop);\n } else {\n h = Math.max(min, max - scrollTop);\n }\n if (overscrollHeaderRef.current) {\n overscrollHeaderRef.current.style.height = `${h}px`;\n }\n },\n [min, max, unit],\n );\n\n const scrollToInitialPosition = useCallback(() => {\n let toScroll: number;\n if (unit === '%') {\n if (!overscrollHeaderContainerRef.current) return;\n const hundredPerc = (overscrollHeaderContainerRef.current.clientHeight / max) * 100;\n toScroll ~~=\n~~ overscrollHeaderContainerRef.current.clientHeight - hundredPerc * (start / 100);\n } else {\n toScroll = max - start;\n }\n if (overscrollRef.current) {\n overscrollRef.current.scrollTop = toScroll;\n updateHeaderHeight(toScroll);\n }\n }, [max, start, unit, updateHeaderHeight]);\n\n // Initial scroll position on mount (and if scroll-related props change)\n useEffect(() => {\n const id = setTimeout(scrollToInitialPosition, 100);\n return () => clearTimeout(id);\n }, [scrollToInitialPosition]);\n\n // Toggle overflow when scrollDisabled changes\n useEffect(() => {\n if (overscrollRef.current) {\n overscrollRef.current.style.overflow = scrollDisabled ? 'hidden' : 'auto';\n }\n }, [scrollDisabled]);\n\n // Scroll to initial position when entering mobile view\n const prevIsMobileRef = useRef(isMobileSize);\n useEffect(() => {\n if (isMobileSize && !prevIsMobileRef.current) scrollToInitialPosition();\n prevIsMobileRef.current = isMobileSize;\n }, [isMobileSize, scrollToInitialPosition]);\n\n // Scroll to initial position when mobileOnly is turned off (full overscroll DOM just mounted)\n const prevMobileOnlyRef = useRef(mobileOnly);\n useEffect(() => {\n if (!mobileOnly && prevMobileOnlyRef.current) scrollToInitialPosition();\n prevMobileOnlyRef.current = mobileOnly;\n }, [mobileOnly, scrollToInitialPosition]);\n\n // Update header height on window resize while in mobile view\n const prevHeightRef = useRef(height);\n useEffect(() => {\n if (isMobileSize && height !== prevHeightRef.current && overscrollRef.current) {\n updateHeaderHeight(overscrollRef.current.scrollTop);\n }\n prevHeightRef.current = height;\n }, [height, isMobileSize, updateHeaderHeight]);\n\n function handleScroll(e: UIEvent<HTMLDivElement>) {\n updateHeaderHeight(e.currentTarget.scrollTop);\n if (!isScrollingRef.current) {\n isScrollingRef.current = true;\n onScrollChangeRef.current(true);\n }\n if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n scrollTimeoutRef.current = setTimeout(() => {\n scrollTimeoutRef.current = null;\n isScrollingRef.current = false;\n onScrollChangeRef.current(false);\n }, 500);\n }\n\n if (mobileOnly && !isMobileSize) {\n if (overscrollContentDesktop) return <div>{overscrollContentDesktop}{children}</div~~>;\~~n return <>{children}</>;\n }\n\n const contentMinHeight = unit === '%' ? `${100 - min}%` : `calc(100% - ${min}px)`;\n\n return (\n <div className={styles.overscroll} ref={overscrollRef} onScroll={handleScroll}>\n <div\n className={styles.overscrollHeaderContainer}\n style={{ height: `${max}${unit}` }}\n ref={overscrollHeaderContainerRef}\n >\n <div\n className={cx(styles.overscrollHeader, centerHeader && styles.overscrollHeaderCentered)}\n ref={overscrollHeaderRef}\n >\n {overscrollContent}\n </div>\n </div>\n <div style={{ minHeight: contentMinHeight }}>{children}</div>\n </div>\n );\n}\n"],"mappings":"6OAOA,SAAwB,EAAW,CACjC,WAAW,KACX,oBAAoB,KACpB,2BAA2B,KAC3B,eAAe,GACf,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,IACP,aAAa,GACb,qBAAuB,CAAC,EACxB,iBAAiB,IACC,CAClB,GAAM,CAAE,eAAc,UAAW,EAAc,EAEzC,EAAgB,EAAuB,IAAI,EAC3C,EAAsB,EAAuB,IAAI,EACjD,EAA+B,EAAuB,IAAI,EAC1D,EAAiB,EAAO,EAAK,EAC7B,EAAmB,EAA6C,IAAI,EACpE,EAAoB,EAAO,CAAc,EAC/C,MAAgB,~~CAAE~~,EAAkB,QAAU,~~CAAgB~~,CAAC,~~EAE/D~~,IAAM,EAAqB,EACxB,GAAsB,CACrB,IAAI,EACJ,GAAI,IAAS,IAAK,CAChB,GAAI,CAAC,EAA6B,QAAS,OAC3C,IAAM,EAAa,EAA6B,QAAQ,aACxD,EAAI,KAAK,IAAK,EAAa,EAAO,IAAK,EAAa,CAAS,CAC/D,~~MACE~~,~~EAAI~~,KAAK,IAAI,EAAK,EAAM,CAAS,EAE/B,EAAoB,UACtB,EAAoB,QAAQ,MAAM,OAAS,GAAG,EAAE,IAEpD,EACA,CAAC,EAAK,EAAK,CAAI,CACjB,EAEM,EAA0B,MAAkB,CAChD,IAAI,EACJ,GAAI,IAAS,IAAK,CAChB,GAAI,CAAC,EAA6B,QAAS,OAC3C,IAAM,EAAe,EAA6B,QAAQ,aAAe,EAAO,IAChF,~~EACE~~,EAA6B,QAAQ,aAA8B,EAAQ,IAAvB,~~CACxD~~,~~MACE~~,~~EAAW~~,EAAM,EAEf,EAAc,UAChB,EAAc,QAAQ,UAAY,EAClC,EAAmB,CAAQ,EAE/B,EAAG,CAAC,EAAK,EAAO,EAAM,CAAkB,CAAC,EAGzC,MAAgB,CACd,IAAM,EAAK,WAAW,EAAyB,GAAG,EAClD,UAAa,aAAa,CAAE,CAC9B,EAAG,CAAC,CAAuB,CAAC,EAG5B,MAAgB,CACV,EAAc,UAChB,EAAc,QAAQ,MAAM,SAAW,EAAiB,SAAW,OAEvE,EAAG,CAAC,CAAc,CAAC,EAGnB,IAAM,EAAkB,EAAO,CAAY,EAC3C,MAAgB,CACV,GAAgB,CAAC,EAAgB,SAAS,EAAwB,EACtE,EAAgB,QAAU,CAC5B,EAAG,CAAC,EAAc,CAAuB,CAAC,EAG1C,IAAM,EAAoB,EAAO,CAAU,EAC3C,MAAgB,CACV,CAAC,GAAc,EAAkB,SAAS,EAAwB,EACtE,EAAkB,QAAU,CAC9B,EAAG,CAAC,EAAY,CAAuB,CAAC,EAGxC,IAAM,EAAgB,EAAO,CAAM,EACnC,MAAgB,CACV,GAAgB,IAAW,EAAc,SAAW,EAAc,SACpE,EAAmB,EAAc,QAAQ,SAAS,EAEpD,EAAc,QAAU,CAC1B,EAAG,CAAC,EAAQ,EAAc,CAAkB,CAAC,EAE7C,SAAS,EAAa,EAA4B,CAChD,EAAmB,EAAE,cAAc,SAAS,EACvC,EAAe,UAClB,EAAe,QAAU,GACzB,EAAkB,QAAQ,EAAI,GAE5B,EAAiB,SAAS,aAAa,EAAiB,OAAO,EACnE,EAAiB,QAAU,eAAiB,CAC1C,EAAiB,QAAU,KAC3B,EAAe,QAAU,GACzB,EAAkB,QAAQ,EAAK,CACjC,EAAG,GAAG,CACR,CAEA,GAAI,GAAc,CAAC,~~EAEjB~~,~~OADI~~,~~EAAiC~~,EAAC,MAAD,CAAA,SAAA,~~CAAM~~,~~EAA0B~~,~~CAAc~~,CAAA,CAAA,~~EAC5E~~,EAAA,EAAA,CAAG,UAAW,CAAA,EAGvB,IAAM,EAAmB,IAAS,IAAM,GAAG,IAAM,EAAI,GAAK,eAAe,EAAI,KAE7E,OACE,EAAC,MAAD,CAAK,UAAW,EAAO,WAAY,IAAK,EAAe,SAAU,~~WAAjE~~,CACE,EAAC,MAAD,CACE,UAAW,EAAO,0BAClB,MAAO,CAAE,OAAQ,GAAG,IAAM,GAAO,EACjC,IAAK,~~WAEL~~,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAgB,EAAO,wBAAwB,EACtF,IAAK,~~WAEJ~~,CACE,CAAA,CACF,CAAA,EACL,EAAC,MAAD,CAAK,MAAO,CAAE,UAAW,CAAiB,EAAI,UAAc,CAAA,CACzD,GAET"}
1	+ {"version":3,"file":"overscroll.mjs","names":[],"sources":["../../../../package/common/overscroll/overscroll.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport cx from 'classnames';\nimport type { UIEvent } from 'react';\nimport useWindowSize from '../../hooks/useWindowSize';\nimport styles from './overscroll.module.pcss';\nimport type { OverscrollProps } from './overscroll.types';\n\nexport default function Overscroll({\n children = null,\n overscrollContent = null,\n overscrollContentDesktop = null,\n centerHeader = true,\n min = 10,\n max = 80,\n start = 30,\n unit = '%',\n mobileOnly = true,\n onScrollChange = () => {},\n scrollDisabled = false,\n}: OverscrollProps) {\n const { isMobileSize, height } = useWindowSize();\n\n const overscrollRef = useRef<HTMLDivElement>(null);\n const overscrollHeaderRef = useRef<HTMLDivElement>(null);\n const overscrollHeaderContainerRef = useRef<HTMLDivElement>(null);\n const isScrollingRef = useRef(false);\n const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const onScrollChangeRef = useRef(onScrollChange);\n useEffect(() => {\n onScrollChangeRef.current = onScrollChange;\n });\n\n const updateHeaderHeight = useCallback(\n (scrollTop: number) => {\n let h: number;\n if (unit === '%') {\n if (!overscrollHeaderContainerRef.current) return;\n const containerH = overscrollHeaderContainerRef.current.clientHeight;\n h = Math.max((containerH * min) / 100, containerH - scrollTop);\n } else {\n h = Math.max(min, max - scrollTop);\n }\n if (overscrollHeaderRef.current) {\n overscrollHeaderRef.current.style.height = `${h}px`;\n }\n },\n [min, max, unit],\n );\n\n const scrollToInitialPosition = useCallback(() => {\n let toScroll: number;\n if (unit === '%') {\n if (!overscrollHeaderContainerRef.current) return;\n const hundredPerc = (overscrollHeaderContainerRef.current.clientHeight / max) * 100;\n toScroll = overscrollHeaderContainerRef.current.clientHeight - hundredPerc * (start / 100);\n } else {\n toScroll = max - start;\n }\n if (overscrollRef.current) {\n overscrollRef.current.scrollTop = toScroll;\n updateHeaderHeight(toScroll);\n }\n }, [max, start, unit, updateHeaderHeight]);\n\n // Initial scroll position on mount (and if scroll-related props change)\n useEffect(() => {\n const id = setTimeout(scrollToInitialPosition, 100);\n return () => clearTimeout(id);\n }, [scrollToInitialPosition]);\n\n // Toggle overflow when scrollDisabled changes\n useEffect(() => {\n if (overscrollRef.current) {\n overscrollRef.current.style.overflow = scrollDisabled ? 'hidden' : 'auto';\n }\n }, [scrollDisabled]);\n\n // Scroll to initial position when entering mobile view\n const prevIsMobileRef = useRef(isMobileSize);\n useEffect(() => {\n if (isMobileSize && !prevIsMobileRef.current) scrollToInitialPosition();\n prevIsMobileRef.current = isMobileSize;\n }, [isMobileSize, scrollToInitialPosition]);\n\n // Scroll to initial position when mobileOnly is turned off (full overscroll DOM just mounted)\n const prevMobileOnlyRef = useRef(mobileOnly);\n useEffect(() => {\n if (!mobileOnly && prevMobileOnlyRef.current) scrollToInitialPosition();\n prevMobileOnlyRef.current = mobileOnly;\n }, [mobileOnly, scrollToInitialPosition]);\n\n // Update header height on window resize while in mobile view\n const prevHeightRef = useRef(height);\n useEffect(() => {\n if (isMobileSize && height !== prevHeightRef.current && overscrollRef.current) {\n updateHeaderHeight(overscrollRef.current.scrollTop);\n }\n prevHeightRef.current = height;\n }, [height, isMobileSize, updateHeaderHeight]);\n\n function handleScroll(e: UIEvent<HTMLDivElement>) {\n updateHeaderHeight(e.currentTarget.scrollTop);\n if (!isScrollingRef.current) {\n isScrollingRef.current = true;\n onScrollChangeRef.current(true);\n }\n if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n scrollTimeoutRef.current = setTimeout(() => {\n scrollTimeoutRef.current = null;\n isScrollingRef.current = false;\n onScrollChangeRef.current(false);\n }, 500);\n }\n\n if (mobileOnly && !isMobileSize) {\n if (overscrollContentDesktop)\n return (\n <div>\n {overscrollContentDesktop}\n {children}\n </div>\n );\n return <>{children}</>;\n }\n\n const contentMinHeight = unit === '%' ? `${100 - min}%` : `calc(100% - ${min}px)`;\n\n return (\n <div className={styles.overscroll} ref={overscrollRef} onScroll={handleScroll}>\n <div\n className={styles.overscrollHeaderContainer}\n style={{ height: `${max}${unit}` }}\n ref={overscrollHeaderContainerRef}\n >\n <div\n className={cx(styles.overscrollHeader, centerHeader && styles.overscrollHeaderCentered)}\n ref={overscrollHeaderRef}\n >\n {overscrollContent}\n </div>\n </div>\n <div style={{ minHeight: contentMinHeight }}>{children}</div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/esm/common/overscroll/overscroll.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={overscroll:`overscroll_Ij750`,"overscroll-header":`overscroll-header_S6vYc`,overscrollHeader:`overscroll-header_S6vYc`,"overscroll-header-centered":`overscroll-header-centered_8VlsP`,overscrollHeaderCentered:`overscroll-header-centered_8VlsP`,"overscroll-header-container":`overscroll-header-container_iignp`,overscrollHeaderContainer:`overscroll-header-container_iignp`};export{e as default};
+var e=`overscroll_Ij750`,t=`overscroll-header_S6vYc`,n=`overscroll-header-centered_8VlsP`,r=`overscroll-header-container_iignp`,i={overscroll:e,"overscroll-header":`overscroll-header_S6vYc`,overscrollHeader:t,"overscroll-header-centered":`overscroll-header-centered_8VlsP`,overscrollHeaderCentered:n,"overscroll-header-container":`overscroll-header-container_iignp`,overscrollHeaderContainer:r};export{i as default,e as overscroll,t as overscrollHeader,n as overscrollHeaderCentered,r as overscrollHeaderContainer};
 //# sourceMappingURL=overscroll.module.mjs.map

package/dist/esm/common/pagination/pagination.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport {\n faAnglesLeft~~,\n~~ faAnglesRight~~,\n~~ faChevronLeft~~,\n~~ faChevronRight~~,\n~~} from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { IconContent } from '../types/icon.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport type { PaginationProps } from './pagination.types';\n\nimport styles from './pagination.module.pcss';\n\nconst DOTS = 'dots';\n\ntype PaginationEntry = number \| typeof DOTS;\n\nfunction range(start: number, end: number): number[] {\n if (end < start) return [];\n return Array.from({ length: end - start + 1 }, (_, index) => start + index);\n}\n\nfunction clampPage(page: number, total: number): number {\n return Math.max(1, Math.min(total, Math.round(page)));\n}\n\nfunction getEntries(page: number, total: number, siblings: number, boundaries: number): PaginationEntry[] {\n const maxEntries = siblings * 2 + boundaries * 2 + 3;\n if (maxEntries >= total) return range(1, total);\n\n const leftBoundary = range(1, boundaries);\n const rightBoundary = range(total - boundaries + 1, total);\n const leftGap: PaginationEntry[] = leftBoundary.length > 0 ? [DOTS] : [];\n const rightGap: PaginationEntry[] = rightBoundary.length > 0 ? [DOTS] : [];\n\n const leftSibling = Math.max(page - siblings, boundaries + 1);\n const rightSibling = Math.min(page + siblings, total - boundaries);\n\n const hasLeftDots = leftSibling > boundaries + 2;\n const hasRightDots = rightSibling < total - boundaries - 1;\n\n if (!hasLeftDots && hasRightDots) {\n return [...range(1, boundaries + siblings * 2 + 2), ...rightGap, ...rightBoundary];\n }\n\n if (hasLeftDots && !hasRightDots) {\n return [...leftBoundary, ...leftGap, ...range(total - boundaries - siblings * 2 - 1, total)];\n }\n\n return [\n ...leftBoundary~~,\n~~ ...leftGap~~,\n~~ ...range(leftSibling, rightSibling)~~,\n~~ ...rightGap~~,\n~~ ...rightBoundary~~,\n~~ ];\n}\n\nfunction Pagination(props: PaginationProps): ReactElement \| null {\n const {\n total,\n page: controlledPage,\n defaultPage = 1,\n onChange = () => {},\n siblings = 1,\n boundaries = 1,\n showControls = true,\n showEdges = false,\n disabled = false,\n previousIcon = faChevronLeft,\n nextIcon = faChevronRight,\n firstIcon = faAnglesLeft,\n lastIcon = faAnglesRight,\n 'aria-label': ariaLabel = 'Pagination',\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Pagination', props);\n\n const isControlled = controlledPage !== undefined;\n const [internalPage, setInternalPage] = useState(defaultPage);\n const page = clampPage(isControlled ? controlledPage! : internalPage, total);\n\n if (total < 1) return null;\n\n function goTo(next: number) {\n const clamped = clampPage(next, total);\n if (clamped === page) return;\n if (!isControlled) setInternalPage(clamped);\n onChange(clamped);\n }\n\n const controlClassName = cx(styles.paginationControl, classNames?.control);\n\n function renderControl(key: string, label: string, icon: IconContent, target: number, isDisabled: boolean) {\n return (\n <button\n key={key}\n type~~=\"~~button\"\n className={controlClassName}\n style={slotStyles?.control}\n aria-label={label}\n disabled={disabled \|\| isDisabled}\n onClick={() => goTo(target)}\n >\n {renderIcon(icon)}\n </button>\n );\n }\n\n const isFirst = page <= 1;\n const isLast = page >= total;\n\n return (\n <nav\n {...rest}\n aria-label={ariaLabel}\n className={cx(styles.pagination, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {showEdges && renderControl('first', 'Go to first page', firstIcon, 1, isFirst)}\n {showControls && renderControl('previous', 'Go to previous page', previousIcon, page - 1, isFirst)}\n\n {getEntries(page, total, siblings, boundaries).map((entry, index) =>\n entry === DOTS ? (\n <span\n key={`dots-${index}`}\n aria-hidden~~=\"~~true\"\n className={cx(styles.paginationEllipsis, classNames?.ellipsis)}\n style={slotStyles?.ellipsis}\n >\n …\n </span>\n ) : (\n <button\n key={entry}\n type~~=\"~~button\"\n className={cx(\n styles.paginationItem~~,\n~~ entry === page && styles.paginationItemActive~~,\n~~ classNames?.item\n )}\n style={slotStyles?.item}\n aria-label={`Go to page ${entry}`}\n aria-current={entry === page ? 'page' : undefined}\n disabled={disabled}\n onClick={() => goTo(entry)}\n >\n {entry}\n </button>\n )\n )}\n\n {showControls && renderControl('next', 'Go to next page', nextIcon, page + 1, isLast)}\n {showEdges && renderControl('last', 'Go to last page', lastIcon, total, isLast)}\n </nav>\n );\n}\n\nexport default Pagination;\n"],"mappings":"~~sZAiBA~~,IAAM,EAAO,OAIb,SAAS,EAAM,EAAe,EAAuB,CAEnD,OADI,EAAM,EAAc,CAAC,EAClB,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAQ,CAAE,GAAI,EAAG,IAAU,EAAQ,CAAK,CAC5E,CAEA,SAAS,EAAU,EAAc,EAAuB,CACtD,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,EAAO,KAAK,MAAM,CAAI,CAAC,CAAC,CACtD,CAEA,SAAS,EAAW,EAAc,EAAe,EAAkB,EAAuC,CAExG,GADmB,EAAW,EAAI,EAAa,EAAI,GACjC,EAAO,OAAO,EAAM,EAAG,CAAK,EAE9C,IAAM,EAAe,EAAM,EAAG,CAAU,EAClC,EAAgB,EAAM,EAAQ,EAAa,EAAG,CAAK,EACnD,EAA6B,EAAa,OAAS,EAAI,CAAC,CAAI,EAAI,CAAC,EACjE,EAA8B,EAAc,OAAS,EAAI,CAAC,CAAI,EAAI,CAAC,EAEnE,EAAc,KAAK,IAAI,EAAO,EAAU,EAAa,CAAC,EACtD,EAAe,KAAK,IAAI,EAAO,EAAU,EAAQ,CAAU,EAE3D,EAAc,EAAc,EAAa,EACzC,EAAe,EAAe,EAAQ,EAAa,EAUzD,MARI,CAAC,GAAe,EACX,CAAC,GAAG,EAAM,EAAG,EAAa,EAAW,EAAI,CAAC,EAAG,GAAG,EAAU,GAAG,CAAa,EAG/E,GAAe,CAAC,EACX,CAAC,GAAG,EAAc,GAAG,EAAS,GAAG,EAAM,EAAQ,EAAa,EAAW,EAAI,EAAG,CAAK,CAAC,EAGtF,~~CACL~~,GAAG,~~EACH~~,GAAG,~~EACH~~,GAAG,EAAM,EAAa,CAAY,~~EAClC~~,GAAG,~~EACH~~,GAAG,~~CACL~~,~~CACF~~,CAEA,SAAS,EAAW,EAA6C,CAC/D,GAAM,CACJ,QACA,KAAM,EACN,cAAc,EACd,eAAiB,CAAC,EAClB,WAAW,EACX,aAAa,EACb,eAAe,GACf,YAAY,GACZ,WAAW,GACX,eAAe,EACf,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAc,EAAY,aAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EAEtC,EAAe,IAAmB,IAAA,GAClC,CAAC,EAAc,GAAmB,EAAS,CAAW,EACtD,EAAO,EAAU,EAAe,EAAkB,EAAc,CAAK,EAE3E,GAAI,EAAQ,EAAG,OAAO,KAEtB,SAAS,EAAK,EAAc,CAC1B,IAAM,EAAU,EAAU,EAAM,CAAK,EACjC,IAAY,IACX,GAAc,EAAgB,CAAO,EAC1C,EAAS,CAAO,EAClB,CAEA,IAAM,EAAmB,EAAG,EAAO,kBAAmB,GAAY,OAAO,EAEzE,SAAS,EAAc,EAAa,EAAe,EAAmB,EAAgB,EAAqB,CACzG,OACE,EAAC,SAAD,CAEE,KAAK,SACL,UAAW,EACX,MAAO,GAAY,QACnB,aAAY,EACZ,SAAU,GAAY,EACtB,YAAe,EAAK,CAAM,~~WAEzB~~,EAAW,CAAI,CACV,EATD,CASC,CAEZ,CAEA,IAAM,EAAU,GAAQ,EAClB,EAAS,GAAQ,EAEvB,OACE,EAAC,MAAD,CACE,GAAI,EACJ,aAAY,EACZ,UAAW,EAAG,EAAO,WAAY,GAAY,KAAM,CAAS,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,~~WAJzC~~,CAMG,GAAa,EAAc,QAAS,mBAAoB,EAAW,EAAG,CAAO,EAC7E,GAAgB,EAAc,WAAY,sBAAuB,EAAc,EAAO,EAAG,CAAO,EAEhG,EAAW,EAAM,EAAO,EAAU,CAAU,~~EAAE~~,KAAK,EAAO,IACzD,IAAU,EACR,EAAC,OAAD,CAEE,cAAY,OACZ,UAAW,EAAG,EAAO,mBAAoB,GAAY,QAAQ,EAC7D,MAAO,GAAY,~~kBACpB~~,GAEK,EANC,QAAQ,GAMT,EAEN,EAAC,SAAD,CAEE,KAAK,SACL,UAAW,~~EACT~~,EAAO,~~eACP~~,IAAU,GAAQ,EAAO,~~qBACzB~~,GAAY,~~IACd~~,~~EACA~~,MAAO,GAAY,KACnB,aAAY,cAAc,IAC1B,eAAc,IAAU,EAAO,OAAS,IAAA,GAC9B,WACV,YAAe,EAAK,CAAK,~~WAExB~~,CACK,~~EAdD~~,~~CAcC~~,CAEZ,EAEC,GAAgB,EAAc,OAAQ,kBAAmB,EAAU,EAAO,EAAG,CAAM,EACnF,GAAa,EAAc,OAAQ,kBAAmB,EAAU,EAAO,CAAM,CAC3E,GAET"}
1	+ {"version":3,"file":"pagination.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faAnglesLeft, faAnglesRight, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { IconContent } from '../types/icon.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport type { PaginationProps } from './pagination.types';\n\nimport styles from './pagination.module.pcss';\n\nconst DOTS = 'dots';\n\ntype PaginationEntry = number \| typeof DOTS;\n\nfunction range(start: number, end: number): number[] {\n if (end < start) return [];\n return Array.from({ length: end - start + 1 }, (_, index) => start + index);\n}\n\nfunction clampPage(page: number, total: number): number {\n return Math.max(1, Math.min(total, Math.round(page)));\n}\n\nfunction getEntries(page: number, total: number, siblings: number, boundaries: number): PaginationEntry[] {\n const maxEntries = siblings * 2 + boundaries * 2 + 3;\n if (maxEntries >= total) return range(1, total);\n\n const leftBoundary = range(1, boundaries);\n const rightBoundary = range(total - boundaries + 1, total);\n const leftGap: PaginationEntry[] = leftBoundary.length > 0 ? [DOTS] : [];\n const rightGap: PaginationEntry[] = rightBoundary.length > 0 ? [DOTS] : [];\n\n const leftSibling = Math.max(page - siblings, boundaries + 1);\n const rightSibling = Math.min(page + siblings, total - boundaries);\n\n const hasLeftDots = leftSibling > boundaries + 2;\n const hasRightDots = rightSibling < total - boundaries - 1;\n\n if (!hasLeftDots && hasRightDots) {\n return [...range(1, boundaries + siblings * 2 + 2), ...rightGap, ...rightBoundary];\n }\n\n if (hasLeftDots && !hasRightDots) {\n return [...leftBoundary, ...leftGap, ...range(total - boundaries - siblings * 2 - 1, total)];\n }\n\n return [...leftBoundary, ...leftGap, ...range(leftSibling, rightSibling), ...rightGap, ...rightBoundary];\n}\n\nfunction Pagination(props: PaginationProps): ReactElement \| null {\n const {\n total,\n page: controlledPage,\n defaultPage = 1,\n onChange = () => {},\n siblings = 1,\n boundaries = 1,\n showControls = true,\n showEdges = false,\n disabled = false,\n previousIcon = faChevronLeft,\n nextIcon = faChevronRight,\n firstIcon = faAnglesLeft,\n lastIcon = faAnglesRight,\n 'aria-label': ariaLabel = 'Pagination',\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Pagination', props);\n\n const isControlled = controlledPage !== undefined;\n const [internalPage, setInternalPage] = useState(defaultPage);\n const page = clampPage(isControlled ? controlledPage! : internalPage, total);\n\n if (total < 1) return null;\n\n function goTo(next: number) {\n const clamped = clampPage(next, total);\n if (clamped === page) return;\n if (!isControlled) setInternalPage(clamped);\n onChange(clamped);\n }\n\n const controlClassName = cx(styles.paginationControl, classNames?.control);\n\n function renderControl(key: string, label: string, icon: IconContent, target: number, isDisabled: boolean) {\n return (\n <button\n key={key}\n type='button'\n className={controlClassName}\n style={slotStyles?.control}\n aria-label={label}\n disabled={disabled \|\| isDisabled}\n onClick={() => goTo(target)}\n >\n {renderIcon(icon)}\n </button>\n );\n }\n\n const isFirst = page <= 1;\n const isLast = page >= total;\n\n return (\n <nav\n {...rest}\n aria-label={ariaLabel}\n className={cx(styles.pagination, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {showEdges && renderControl('first', 'Go to first page', firstIcon, 1, isFirst)}\n {showControls && renderControl('previous', 'Go to previous page', previousIcon, page - 1, isFirst)}\n\n {getEntries(page, total, siblings, boundaries).map((entry, index) =>\n entry === DOTS ? (\n <span\n key={`dots-${index}`}\n aria-hidden='true'\n className={cx(styles.paginationEllipsis, classNames?.ellipsis)}\n style={slotStyles?.ellipsis}\n >\n …\n </span>\n ) : (\n <button\n key={entry}\n type='button'\n className={cx(styles.paginationItem, entry === page && styles.paginationItemActive, classNames?.item)}\n style={slotStyles?.item}\n aria-label={`Go to page ${entry}`}\n aria-current={entry === page ? 'page' : undefined}\n disabled={disabled}\n onClick={() => goTo(entry)}\n >\n {entry}\n </button>\n ),\n )}\n\n {showControls && renderControl('next', 'Go to next page', nextIcon, page + 1, isLast)}\n {showEdges && renderControl('last', 'Go to last page', lastIcon, total, isLast)}\n </nav>\n );\n}\n\nexport default Pagination;\n"],"mappings":"sZAYA,IAAM,EAAO,OAIb,SAAS,EAAM,EAAe,EAAuB,CAEnD,OADI,EAAM,EAAc,CAAC,EAClB,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAQ,CAAE,GAAI,EAAG,IAAU,EAAQ,CAAK,CAC5E,CAEA,SAAS,EAAU,EAAc,EAAuB,CACtD,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,EAAO,KAAK,MAAM,CAAI,CAAC,CAAC,CACtD,CAEA,SAAS,EAAW,EAAc,EAAe,EAAkB,EAAuC,CAExG,GADmB,EAAW,EAAI,EAAa,EAAI,GACjC,EAAO,OAAO,EAAM,EAAG,CAAK,EAE9C,IAAM,EAAe,EAAM,EAAG,CAAU,EAClC,EAAgB,EAAM,EAAQ,EAAa,EAAG,CAAK,EACnD,EAA6B,EAAa,OAAS,EAAI,CAAC,CAAI,EAAI,CAAC,EACjE,EAA8B,EAAc,OAAS,EAAI,CAAC,CAAI,EAAI,CAAC,EAEnE,EAAc,KAAK,IAAI,EAAO,EAAU,EAAa,CAAC,EACtD,EAAe,KAAK,IAAI,EAAO,EAAU,EAAQ,CAAU,EAE3D,EAAc,EAAc,EAAa,EACzC,EAAe,EAAe,EAAQ,EAAa,EAUzD,MARI,CAAC,GAAe,EACX,CAAC,GAAG,EAAM,EAAG,EAAa,EAAW,EAAI,CAAC,EAAG,GAAG,EAAU,GAAG,CAAa,EAG/E,GAAe,CAAC,EACX,CAAC,GAAG,EAAc,GAAG,EAAS,GAAG,EAAM,EAAQ,EAAa,EAAW,EAAI,EAAG,CAAK,CAAC,EAGtF,CAAC,GAAG,EAAc,GAAG,EAAS,GAAG,EAAM,EAAa,CAAY,EAAG,GAAG,EAAU,GAAG,CAAa,CACzG,CAEA,SAAS,EAAW,EAA6C,CAC/D,GAAM,CACJ,QACA,KAAM,EACN,cAAc,EACd,eAAiB,CAAC,EAClB,WAAW,EACX,aAAa,EACb,eAAe,GACf,YAAY,GACZ,WAAW,GACX,eAAe,EACf,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAc,EAAY,aAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EAEtC,EAAe,IAAmB,IAAA,GAClC,CAAC,EAAc,GAAmB,EAAS,CAAW,EACtD,EAAO,EAAU,EAAe,EAAkB,EAAc,CAAK,EAE3E,GAAI,EAAQ,EAAG,OAAO,KAEtB,SAAS,EAAK,EAAc,CAC1B,IAAM,EAAU,EAAU,EAAM,CAAK,EACjC,IAAY,IACX,GAAc,EAAgB,CAAO,EAC1C,EAAS,CAAO,EAClB,CAEA,IAAM,EAAmB,EAAG,EAAO,kBAAmB,GAAY,OAAO,EAEzE,SAAS,EAAc,EAAa,EAAe,EAAmB,EAAgB,EAAqB,CACzG,OACE,EAAC,SAAD,CAEE,KAAK,SACL,UAAW,EACX,MAAO,GAAY,QACnB,aAAY,EACZ,SAAU,GAAY,EACtB,YAAe,EAAK,CAAM,EAEzB,SAAA,EAAW,CAAI,CACV,EATD,CASC,CAEZ,CAEA,IAAM,EAAU,GAAQ,EAClB,EAAS,GAAQ,EAEvB,OACE,EAAC,MAAD,CACE,GAAI,EACJ,aAAY,EACZ,UAAW,EAAG,EAAO,WAAY,GAAY,KAAM,CAAS,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,GAAa,EAAc,QAAS,mBAAoB,EAAW,EAAG,CAAO,EAC7E,GAAgB,EAAc,WAAY,sBAAuB,EAAc,EAAO,EAAG,CAAO,EAEhG,EAAW,EAAM,EAAO,EAAU,CAAU,CAAC,CAAC,KAAK,EAAO,IACzD,IAAU,EACR,EAAC,OAAD,CAEE,cAAY,OACZ,UAAW,EAAG,EAAO,mBAAoB,GAAY,QAAQ,EAC7D,MAAO,GAAY,SACpB,SAAA,GAEK,EANC,QAAQ,GAMT,EAEN,EAAC,SAAD,CAEE,KAAK,SACL,UAAW,EAAG,EAAO,eAAgB,IAAU,GAAQ,EAAO,qBAAsB,GAAY,IAAI,EACpG,MAAO,GAAY,KACnB,aAAY,cAAc,IAC1B,eAAc,IAAU,EAAO,OAAS,IAAA,GAC9B,WACV,YAAe,EAAK,CAAK,EAExB,SAAA,CACK,EAVD,CAUC,CAEZ,EAEC,GAAgB,EAAc,OAAQ,kBAAmB,EAAU,EAAO,EAAG,CAAM,EACnF,GAAa,EAAc,OAAQ,kBAAmB,EAAU,EAAO,CAAM,CAC3E,GAET"}

package/dist/esm/common/pagination/pagination.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={pagination:`pagination_Pbz1I`,"pagination-item":`pagination-item_2SyYK`,paginationItem:`pagination-item_2SyYK`,"pagination-control":`pagination-control_T0gUc`,paginationControl:`pagination-control_T0gUc`,"pagination-item-active":`pagination-item-active_MgtgT`,paginationItemActive:`pagination-item-active_MgtgT`,"pagination-ellipsis":`pagination-ellipsis_jU--t`,paginationEllipsis:`pagination-ellipsis_jU--t`};export{e as default};
+var e=`pagination_Pbz1I`,t=`pagination-item_2SyYK`,n=`pagination-control_T0gUc`,r=`pagination-item-active_MgtgT`,i=`pagination-ellipsis_jU--t`,a={pagination:e,"pagination-item":`pagination-item_2SyYK`,paginationItem:t,"pagination-control":`pagination-control_T0gUc`,paginationControl:n,"pagination-item-active":`pagination-item-active_MgtgT`,paginationItemActive:r,"pagination-ellipsis":`pagination-ellipsis_jU--t`,paginationEllipsis:i};export{a as default,e as pagination,n as paginationControl,i as paginationEllipsis,t as paginationItem,r as paginationItemActive};
 //# sourceMappingURL=pagination.module.mjs.map

package/dist/esm/common/pagination/pagination.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.module.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.module.pcss"],"sourcesContent":[".pagination {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--pagination-gap, 4px);\n\n &-item,\n &-control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n padding: 0 6px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-color);\n font: inherit;\n font-size: var(--default-font-size);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n\n &:hover:not(:disabled) {\n background: var(--background-accent);\n }\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n }\n\n /* Ties on specificity with the shared `&-item` rule above and wins on source order, so the\n active page keeps its fill through hover too rather than falling back to the hover surface. /\n &-item-active {\n border-color: var(--pagination-active-background, var(--primary-color));\n background: var(--pagination-active-background, var(--primary-color));\n color: var(--pagination-active-color, var(--text-on-primary));\n\n &:hover:not(:disabled) {\n background: var(--pagination-active-background, var(--primary-color));\n }\n\n / The active item sits on the primary fill, where the default primary-color focus ring is\n invisible — same swap OptionPicker makes for its selected option. */\n &:focus-visible {\n outline-color: var(--pagination-active-color, var(--text-on-primary));\n }\n }\n\n &-ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n color: var(--text-dark);\n user-select: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"pagination.module.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.module.pcss"],"sourcesContent":[".pagination {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--pagination-gap, 4px);\n\n &-item,\n &-control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n padding: 0 6px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-color);\n font: inherit;\n font-size: var(--default-font-size);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition:\n background-color 0.15s,\n color 0.15s,\n border-color 0.15s;\n\n &:hover:not(:disabled) {\n background: var(--background-accent);\n }\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n }\n\n /* Ties on specificity with the shared `&-item` rule above and wins on source order, so the\n active page keeps its fill through hover too rather than falling back to the hover surface. /\n &-item-active {\n border-color: var(--pagination-active-background, var(--primary-color));\n background: var(--pagination-active-background, var(--primary-color));\n color: var(--pagination-active-color, var(--text-on-primary));\n\n &:hover:not(:disabled) {\n background: var(--pagination-active-background, var(--primary-color));\n }\n\n / The active item sits on the primary fill, where the default primary-color focus ring is\n invisible — same swap OptionPicker makes for its selected option. */\n &:focus-visible {\n outline-color: var(--pagination-active-color, var(--text-on-primary));\n }\n }\n\n &-ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n color: var(--text-dark);\n user-select: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/planCanvas/planCanvas.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{OpeningKind as e}from"../floorPlan/floorPlan.types.mjs";import{buildWallPaths as t,openingGeometry as n}from"../floorPlan/floorPlan.path.mjs";import r from"./planCanvas.module.mjs";import{forwardRef as i,useMemo as a}from"react";import o from"classnames";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u=1,d=[];function f(e){let t=e/1e6;return`${t.toFixed(+(t<10))} m²`}function p(e){return e.length===0?``:`${e.map((e,t)=>`${t===0?`M`:`L`} ${e.x},${e.y}`).join(` `)} Z`}function m(e){return[p(e.outer),...e.holes.map(p)].filter(Boolean).join(` `)}var h=i(function(i,p){let{floor:h,underlay:g,rooms:_,view:v,selection:y=d,hovered:b=null,interactiveRooms:x=!1,interactiveOpenings:S=!1,showGrid:C=!1,gridSize:w=100,showRoomLabels:T=!0,showOpeningSymbols:E=!0,getRoomColor:D,renderRoomLabel:O,getRoomLabel:k,formatArea:A=f,onRoomActivate:j,onOpeningActivate:M,onBackgroundActivate:N,onHoverChange:P,overlay:F,worldOverlay:I,size:L,className:R,style:z,classNames:B,styles:V,"aria-label":H}=i,U=v.zoom>0?1/v.zoom:1,W=u*U,G=a(()=>t(h),[h]),K=a(()=>g?Object.values(g.walls).flatMap(e=>{let t=g.nodes[e.a],n=g.nodes[e.b];return t&&n?[{id:e.id,x1:t.x,y1:t.y,x2:n.x,y2:n.y}]:[]}):[],[g]),q=e=>({x:(e.x-v.x)*v.zoom,y:(e.y-v.y)*v.zoom}),J=a(()=>{if(!C||w<=0)return null;let e=L.width*U,t=L.height*U,n=w*Math.max(1,10**Math.ceil(Math.log10(e/w/60))),r=Math.floor(v.x/n)*n,i=Math.floor(v.y/n)*n,a=[],o=[];for(let t=r;t<=v.x+e;t+=n)a.push(t);for(let e=i;e<=v.y+t;e+=n)o.push(e);return{verticals:a,horizontals:o,step:n,worldW:e,worldH:t}},[C,w,L.width,L.height,U,v.x,v.y]),Y=(e,t)=>y.some(n=>n.type===e&&n.id===t),X=(e,t)=>b?.type===e&&b.id===t,Z=a(()=>{let e=new Set(y.filter(e=>e.type===`room`).map(e=>e.id)),t=new Set;for(let n of _)if(n.roomId&&e.has(n.roomId))for(let e of n.wallIds)t.add(e);return t},[_,y]),Q=a(()=>Z.size>0?t(h,{wallIds:Z}):{groups:[],caps:[]},[h,Z]);function $(t){let i=n(h,t);if(!i)return null;let a=h.walls[t.wallId],s=a?a.thickness/2:50,{p1:u,p2:d,normal:f,dir:p,centre:m}=i,g=Y(`opening`,t.id),_=X(`opening`,t.id),v=Math.hypot(d.x-u.x,d.y-u.y),y=[];if(E&&t.kind===e.Door){let e=t.swing!==`endLeft`&&t.swing!==`endRight`,n=e?u:d,i=e?1:-1,a={x:n.x+f.x*v,y:n.y+f.y*v},o={x:n.x+p.x*v*i,y:n.y+p.y*v*i};y.push(c(`path`,{className:r.planCanvasDoorLeaf,d:`M ${n.x},${n.y} L ${a.x},${a.y}`,strokeWidth:W},`leaf`),c(`path`,{className:r.planCanvasDoorSwing,d:`M ${a.x},${a.y} A ${v},${v} 0 0,${+!e} ${o.x},${o.y}`,strokeWidth:W},`swing`))}E&&t.kind===e.Window&&y.push(c(`path`,{className:r.planCanvasWindowPane,d:`M ${u.x},${u.y} L ${d.x},${d.y}`,strokeWidth:W*2},`pane`));let b=`M ${u.x+f.x*s},${u.y+f.y*s} L ${d.x+f.x*s},${d.y+f.y*s} L ${d.x-f.x*s},${d.y-f.y*s} L ${u.x-f.x*s},${u.y-f.y*s} Z`;return l(`g`,{className:o(g&&r.planCanvasOpeningSelected,_&&r.planCanvasOpeningHovered,B?.opening),style:V?.opening,"data-opening-kind":t.kind,children:[y,c(`path`,{className:o(r.planCanvasOpeningHit,S&&r.planCanvasOpeningHitInteractive),d:b,onClick:S&&M?e=>{e.stopPropagation(),M(t.id)}:void 0,onPointerEnter:P?()=>P({type:`opening`,id:t.id}):void 0,children:S&&c(`title`,{children:t.kind})}),(g||_)&&c(`path`,{className:r.planCanvasOpeningOutline,d:b,vectorEffect:`non-scaling-stroke`}),c(`path`,{className:o(r.planCanvasJamb,Z.has(t.wallId)&&r.planCanvasJambHighlighted),d:`M ${u.x-f.x*s},${u.y-f.y*s} L ${u.x+f.x*s},${u.y+f.y*s} M ${d.x-f.x*s},${d.y-f.y*s} L ${d.x+f.x*s},${d.y+f.y*s}`,strokeWidth:W}),m&&null]},t.id)}return l(`svg`,{ref:p,className:o(r.planCanvas,R,B?.canvas),style:{...z,...V?.canvas},viewBox:`0 0 ${Math.max(1,L.width)} ${Math.max(1,L.height)}`,width:L.width,height:L.height,role:`img`,"aria-label":H,onClick:N?()=>N():void 0,onPointerLeave:P?()=>P(null):void 0,children:[l(`g`,{transform:`translate(${-v.x*v.zoom} ${-v.y*v.zoom}) scale(${v.zoom})`,children:[J&&l(`g`,{className:o(r.planCanvasGrid,B?.grid),style:V?.grid,"aria-hidden":`true`,children:[J.verticals.map(e=>c(`line`,{x1:e,y1:v.y,x2:e,y2:v.y+J.worldH,strokeWidth:U},`v${e}`)),J.horizontals.map(e=>c(`line`,{x1:v.x,y1:e,x2:v.x+J.worldW,y2:e,strokeWidth:U},`h${e}`))]}),K.length>0&&c(`g`,{className:o(r.planCanvasUnderlay,B?.underlay),style:V?.underlay,"aria-hidden":`true`,children:K.map(e=>c(`line`,{x1:e.x1,y1:e.y1,x2:e.x2,y2:e.y2,strokeWidth:1.5},e.id))}),c(`g`,{className:o(r.planCanvasRooms,B?.rooms),style:V?.rooms,children:_.map(e=>{let t=e.roomId?Y(`room`,e.roomId):!1,n=e.roomId?X(`room`,e.roomId):!1,i=e.meta?D?.(e.meta,e.area):void 0,a=k?.(e.meta,{area:e.area})??`${e.meta?.name??`Unnamed room`}, ${A(e.area)}`;return c(`path`,{className:o(r.planCanvasRoomFill,n&&r.planCanvasRoomFillHovered,x&&r.planCanvasRoomFillInteractive,B?.roomFill),"data-state":t?`selected`:n?`hovered`:void 0,style:{...V?.roomFill,...i?{fill:i}:null},d:m(e),fillRule:`evenodd`,tabIndex:x?0:void 0,role:x?`button`:void 0,"aria-pressed":x?t:void 0,onClick:x&&j&&e.roomId?t=>{t.stopPropagation(),j(e.roomId)}:void 0,onKeyDown:x&&j&&e.roomId?t=>{t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),j(e.roomId))}:void 0,onPointerEnter:P&&e.roomId?()=>P({type:`room`,id:e.roomId}):void 0,children:x&&c(`title`,{children:a})},e.id)})}),l(`g`,{className:o(r.planCanvasWalls,B?.walls),style:V?.walls,"aria-hidden":`true`,children:[c(`g`,{className:r.planCanvasWallOutline,children:G.groups.map(e=>c(`path`,{className:B?.wallBody,style:V?.wallBody,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`))}),c(`g`,{className:r.planCanvasWallFill,children:G.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:c(`path`,{d:e.d,strokeWidth:t},`f${e.thickness}`)})}),l(`g`,{className:r.planCanvasRoomEdgeSelected,children:[Q.groups.map(e=>c(`path`,{className:r.planCanvasRoomEdgeOutline,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`)),Q.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:c(`path`,{className:r.planCanvasRoomEdgeFill,d:e.d,strokeWidth:t},`f${e.thickness}`)})]}),c(`g`,{className:r.planCanvasWallCaps,children:G.caps.filter(e=>!Z.has(e.wallId)).map((e,t)=>c(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))}),c(`g`,{className:r.planCanvasRoomEdgeCaps,children:Q.caps.map((e,t)=>c(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))})]}),c(`g`,{className:o(r.planCanvasOpenings,B?.openings),style:V?.openings,children:Object.values(h.openings).map($)}),l(`g`,{className:r.planCanvasSelection,"aria-hidden":`true`,children:[y.filter(e=>e.type===`wall`).map(e=>{let t=h.walls[e.id];if(!t)return null;let n=h.nodes[t.a],i=h.nodes[t.b];return!n||!i?null:c(`line`,{x1:n.x,y1:n.y,x2:i.x,y2:i.y,strokeWidth:t.thickness,className:r.planCanvasWallSelected},e.id)}),b?.type===`wall`&&!Y(`wall`,b.id)&&(()=>{let e=h.walls[b.id];if(!e)return null;let t=h.nodes[e.a],n=h.nodes[e.b];return!t||!n?null:c(`line`,{x1:t.x,y1:t.y,x2:n.x,y2:n.y,strokeWidth:e.thickness,className:r.planCanvasWallHovered})})()]}),I]}),l(`g`,{className:o(r.planCanvasScreen,B?.overlay),style:V?.overlay,children:[T&&_.map(e=>{let t=q(e.anchor);if(t.x<-200||t.y<-200||t.x>L.width+200||t.y>L.height+200)return null;let n=O?.(e.meta,{area:e.area,faceId:e.id});return n===null?null:c(`g`,{className:o(r.planCanvasRoomLabel,B?.roomLabel),style:V?.roomLabel,transform:`translate(${t.x} ${t.y})`,"aria-hidden":`true`,children:n===void 0?l(s,{children:[c(`text`,{className:r.planCanvasRoomName,textAnchor:`middle`,children:e.meta?.name??``}),c(`text`,{className:r.planCanvasRoomArea,textAnchor:`middle`,dy:`1.2em`,children:A(e.area)})]}):n},e.id)}),F]})]})});export{h as default};
+import{OpeningKind as e}from"../floorPlan/floorPlan.types.mjs";import{buildWallPaths as t,openingGeometry as n}from"../floorPlan/floorPlan.path.mjs";import r from"./planCanvas.module.mjs";import{forwardRef as i,useMemo as a}from"react";import o from"classnames";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u=1,d=[];function f(e){let t=e/1e6;return`${t.toFixed(+(t<10))} m²`}function p(e){return e.length===0?``:`${e.map((e,t)=>`${t===0?`M`:`L`} ${e.x},${e.y}`).join(` `)} Z`}function m(e){return[p(e.outer),...e.holes.map(p)].filter(Boolean).join(` `)}var h=i(function(i,p){let{floor:h,underlay:g,rooms:_,view:v,selection:y=d,hovered:b=null,interactiveRooms:x=!1,interactiveOpenings:S=!1,showGrid:C=!1,gridSize:w=100,showRoomLabels:T=!0,showOpeningSymbols:E=!0,getRoomColor:D,renderRoomLabel:O,getRoomLabel:k,formatArea:A=f,onRoomActivate:j,onOpeningActivate:M,onBackgroundActivate:N,onHoverChange:P,overlay:F,worldOverlay:I,size:L,className:R,style:z,classNames:B,styles:V,"aria-label":H}=i,U=v.zoom>0?1/v.zoom:1,W=u*U,G=a(()=>t(h),[h]),K=a(()=>g?Object.values(g.walls).flatMap(e=>{let t=g.nodes[e.a],n=g.nodes[e.b];return t&&n?[{id:e.id,x1:t.x,y1:t.y,x2:n.x,y2:n.y}]:[]}):[],[g]),q=e=>({x:(e.x-v.x)*v.zoom,y:(e.y-v.y)*v.zoom}),J=a(()=>{if(!C||w<=0)return null;let e=L.width*U,t=L.height*U,n=w*Math.max(1,10**Math.ceil(Math.log10(e/w/60))),r=Math.floor(v.x/n)*n,i=Math.floor(v.y/n)*n,a=[],o=[];for(let t=r;t<=v.x+e;t+=n)a.push(t);for(let e=i;e<=v.y+t;e+=n)o.push(e);return{verticals:a,horizontals:o,step:n,worldW:e,worldH:t}},[C,w,L.width,L.height,U,v.x,v.y]),Y=(e,t)=>y.some(n=>n.type===e&&n.id===t),X=(e,t)=>b?.type===e&&b.id===t,Z=a(()=>{let e=new Set(y.filter(e=>e.type===`room`).map(e=>e.id)),t=new Set;for(let n of _)if(n.roomId&&e.has(n.roomId))for(let e of n.wallIds)t.add(e);return t},[_,y]),Q=a(()=>Z.size>0?t(h,{wallIds:Z}):{groups:[],caps:[]},[h,Z]);function $(t){let i=n(h,t);if(!i)return null;let a=h.walls[t.wallId],s=a?a.thickness/2:50,{p1:u,p2:d,normal:f,dir:p,centre:m}=i,g=Y(`opening`,t.id),_=X(`opening`,t.id),v=Math.hypot(d.x-u.x,d.y-u.y),y=[];if(E&&t.kind===e.Door){let e=t.swing!==`endLeft`&&t.swing!==`endRight`,n=e?u:d,i=e?1:-1,a={x:n.x+f.x*v,y:n.y+f.y*v},o={x:n.x+p.x*v*i,y:n.y+p.y*v*i};y.push(c(`path`,{className:r.planCanvasDoorLeaf,d:`M ${n.x},${n.y} L ${a.x},${a.y}`,strokeWidth:W},`leaf`),c(`path`,{className:r.planCanvasDoorSwing,d:`M ${a.x},${a.y} A ${v},${v} 0 0,${+!e} ${o.x},${o.y}`,strokeWidth:W},`swing`))}E&&t.kind===e.Window&&y.push(c(`path`,{className:r.planCanvasWindowPane,d:`M ${u.x},${u.y} L ${d.x},${d.y}`,strokeWidth:W*2},`pane`));let b=`M ${u.x+f.x*s},${u.y+f.y*s} L ${d.x+f.x*s},${d.y+f.y*s} L ${d.x-f.x*s},${d.y-f.y*s} L ${u.x-f.x*s},${u.y-f.y*s} Z`;return l(`g`,{className:o(g&&r.planCanvasOpeningSelected,_&&r.planCanvasOpeningHovered,B?.opening),style:V?.opening,"data-opening-kind":t.kind,children:[y,c(`path`,{className:o(r.planCanvasOpeningHit,S&&r.planCanvasOpeningHitInteractive),d:b,onClick:S&&M?e=>{e.stopPropagation(),M(t.id)}:void 0,onPointerEnter:P?()=>P({type:`opening`,id:t.id}):void 0,children:S&&c(`title`,{children:t.kind})}),(g||_)&&c(`path`,{className:r.planCanvasOpeningOutline,d:b,vectorEffect:`non-scaling-stroke`}),c(`path`,{className:o(r.planCanvasJamb,Z.has(t.wallId)&&r.planCanvasJambHighlighted),d:`M ${u.x-f.x*s},${u.y-f.y*s} L ${u.x+f.x*s},${u.y+f.y*s} M ${d.x-f.x*s},${d.y-f.y*s} L ${d.x+f.x*s},${d.y+f.y*s}`,strokeWidth:W}),m&&null]},t.id)}return l(`svg`,{ref:p,className:o(r.planCanvas,R,B?.canvas),style:{...z,...V?.canvas},viewBox:`0 0 ${Math.max(1,L.width)} ${Math.max(1,L.height)}`,width:L.width,height:L.height,role:`img`,"aria-label":H,onClick:N?()=>N():void 0,onPointerLeave:P?()=>P(null):void 0,children:[l(`g`,{transform:`translate(${-v.x*v.zoom} ${-v.y*v.zoom}) scale(${v.zoom})`,children:[J&&l(`g`,{className:o(r.planCanvasGrid,B?.grid),style:V?.grid,"aria-hidden":`true`,children:[J.verticals.map(e=>c(`line`,{x1:e,y1:v.y,x2:e,y2:v.y+J.worldH,strokeWidth:U},`v${e}`)),J.horizontals.map(e=>c(`line`,{x1:v.x,y1:e,x2:v.x+J.worldW,y2:e,strokeWidth:U},`h${e}`))]}),K.length>0&&c(`g`,{className:o(r.planCanvasUnderlay,B?.underlay),style:V?.underlay,"aria-hidden":`true`,children:K.map(e=>c(`line`,{x1:e.x1,y1:e.y1,x2:e.x2,y2:e.y2,strokeWidth:1.5},e.id))}),c(`g`,{className:o(r.planCanvasRooms,B?.rooms),style:V?.rooms,children:_.map(e=>{let t=e.roomId?Y(`room`,e.roomId):!1,n=e.roomId?X(`room`,e.roomId):!1,i=e.meta?D?.(e.meta,e.area):void 0,a=k?.(e.meta,{area:e.area})??`${e.meta?.name??`Unnamed room`}, ${A(e.area)}`;return c(`path`,{className:o(r.planCanvasRoomFill,n&&r.planCanvasRoomFillHovered,x&&r.planCanvasRoomFillInteractive,B?.roomFill),"data-state":t?`selected`:n?`hovered`:void 0,style:{...V?.roomFill,...i?{fill:i}:null},d:m(e),fillRule:`evenodd`,tabIndex:x?0:void 0,role:x?`button`:void 0,"aria-pressed":x?t:void 0,onClick:x&&j&&e.roomId?t=>{t.stopPropagation(),j(e.roomId)}:void 0,onKeyDown:x&&j&&e.roomId?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),j(e.roomId))}:void 0,onPointerEnter:P&&e.roomId?()=>P({type:`room`,id:e.roomId}):void 0,children:x&&c(`title`,{children:a})},e.id)})}),l(`g`,{className:o(r.planCanvasWalls,B?.walls),style:V?.walls,"aria-hidden":`true`,children:[c(`g`,{className:r.planCanvasWallOutline,children:G.groups.map(e=>c(`path`,{className:B?.wallBody,style:V?.wallBody,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`))}),c(`g`,{className:r.planCanvasWallFill,children:G.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:c(`path`,{d:e.d,strokeWidth:t},`f${e.thickness}`)})}),l(`g`,{className:r.planCanvasRoomEdgeSelected,children:[Q.groups.map(e=>c(`path`,{className:r.planCanvasRoomEdgeOutline,d:e.d,strokeWidth:e.thickness},`o${e.thickness}`)),Q.groups.map(e=>{let t=e.thickness-2*W;return t<=0?null:c(`path`,{className:r.planCanvasRoomEdgeFill,d:e.d,strokeWidth:t},`f${e.thickness}`)})]}),c(`g`,{className:r.planCanvasWallCaps,children:G.caps.filter(e=>!Z.has(e.wallId)).map((e,t)=>c(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))}),c(`g`,{className:r.planCanvasRoomEdgeCaps,children:Q.caps.map((e,t)=>c(`line`,{x1:e.a.x,y1:e.a.y,x2:e.b.x,y2:e.b.y,strokeWidth:W},`${e.wallId}-${e.reason}-${t}`))})]}),c(`g`,{className:o(r.planCanvasOpenings,B?.openings),style:V?.openings,children:Object.values(h.openings).map($)}),l(`g`,{className:r.planCanvasSelection,"aria-hidden":`true`,children:[y.filter(e=>e.type===`wall`).map(e=>{let t=h.walls[e.id];if(!t)return null;let n=h.nodes[t.a],i=h.nodes[t.b];return!n||!i?null:c(`line`,{x1:n.x,y1:n.y,x2:i.x,y2:i.y,strokeWidth:t.thickness,className:r.planCanvasWallSelected},e.id)}),b?.type===`wall`&&!Y(`wall`,b.id)&&(()=>{let e=h.walls[b.id];if(!e)return null;let t=h.nodes[e.a],n=h.nodes[e.b];return!t||!n?null:c(`line`,{x1:t.x,y1:t.y,x2:n.x,y2:n.y,strokeWidth:e.thickness,className:r.planCanvasWallHovered})})()]}),I]}),l(`g`,{className:o(r.planCanvasScreen,B?.overlay),style:V?.overlay,children:[T&&_.map(e=>{let t=q(e.anchor);if(t.x<-200||t.y<-200||t.x>L.width+200||t.y>L.height+200)return null;let n=O?.(e.meta,{area:e.area,faceId:e.id});return n===null?null:c(`g`,{className:o(r.planCanvasRoomLabel,B?.roomLabel),style:V?.roomLabel,transform:`translate(${t.x} ${t.y})`,"aria-hidden":`true`,children:n===void 0?l(s,{children:[c(`text`,{className:r.planCanvasRoomName,textAnchor:`middle`,children:e.meta?.name??``}),c(`text`,{className:r.planCanvasRoomArea,textAnchor:`middle`,dy:`1.2em`,children:A(e.area)})]}):n},e.id)}),F]})]})});export{h as default};
 //# sourceMappingURL=planCanvas.mjs.map

package/dist/esm/common/planCanvas/planCanvas.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"planCanvas.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.tsx"],"sourcesContent":["import { forwardRef, useMemo, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport {\n OpeningKind,\n buildWallPaths,\n openingGeometry,\n type DerivedRoom,\n type PlanOpening,\n type PlanPoint,\n type PlanSelection,\n} from '../floorPlan';\nimport type { PlanCanvasProps } from './planCanvas.types';\nimport styles from './planCanvas.module.pcss';\n\n/*\n The read-only renderer shared by RoomDrawer and RoomViewer.\n \n It owns the projection, the layer stack, and the accessible room shapes. It owns no\n * editing state: the drawer supplies its handles and previews through `overlay`. Having\n * one renderer is the point, so that a plan cannot look different in the editor than it\n * does in the viewer.\n \n The viewport is a TRANSFORM on a group, not an SVG `viewBox`. That is what lets the\n * screen-space layer draw labels and handles at a fixed pixel size while the drawing\n * itself scales.\n /\n\nconst DEFAULT_OUTLINE_PX = 1;\n\n/* Stable identity, so a default-valued `selection` prop does not re-run memos. /\nconst EMPTY_SELECTION: readonly PlanSelection[] = [];\n\nfunction formatAreaDefault(areaMm2: number): string {\n const m2 = areaMm2 / 1_000_000;\n return `${m2.toFixed(m2 < 10 ? 1 : 0)} m²`;\n}\n\nfunction ringToPath(ring: PlanPoint[]): string {\n if (ring.length === 0) return '';\n return `${ring.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')} Z`;\n}\n\n/* Outer ring plus holes as one path; `fill-rule: evenodd` punches the holes out. /\nfunction faceToPath(face: DerivedRoom): string {\n return [ringToPath(face.outer), ...face.holes.map(ringToPath)].filter(Boolean).join(' ');\n}\n\n/\n The ref lands on the `<svg>` itself, which is what a consumer wants for measuring or\n * screenshotting. Both the drawer and the viewer expose it as `getSvgElement()`.\n /\nconst PlanCanvas = forwardRef<SVGSVGElement, PlanCanvasProps>(function PlanCanvas(props, ref) {\n const {\n floor,\n underlay,\n rooms,\n view,\n selection = EMPTY_SELECTION,\n hovered = null,\n interactiveRooms = false,\n interactiveOpenings = false,\n showGrid = false,\n gridSize = 100,\n showRoomLabels = true,\n showOpeningSymbols = true,\n getRoomColor,\n renderRoomLabel,\n getRoomLabel,\n formatArea = formatAreaDefault,\n onRoomActivate,\n onOpeningActivate,\n onBackgroundActivate,\n onHoverChange,\n overlay,\n worldOverlay,\n size,\n className,\n style,\n classNames,\n styles: slotStyles,\n 'aria-label': ariaLabel,\n } = props;\n\n const pxToWorld = view.zoom > 0 ? 1 / view.zoom : 1;\n const outlineWidth = DEFAULT_OUTLINE_PX pxToWorld;\n\n const wallPaths = useMemo(() => buildWallPaths(floor), [floor]);\n\n /*\n Centrelines only, at one stroke width. The underlay is there to line walls up\n * against, so it wants to read as a tracing rather than compete with the floor being\n * drawn; the two-pass thick-wall treatment would give it equal weight.\n /\n const underlayLines = useMemo(() => {\n if (!underlay) return [];\n return Object.values(underlay.walls).flatMap((wall) => {\n const a = underlay.nodes[wall.a];\n const b = underlay.nodes[wall.b];\n return a && b ? [{ id: wall.id, x1: a.x, y1: a.y, x2: b.x, y2: b.y }] : [];\n });\n }, [underlay]);\n\n /* World point to screen point, for the untransformed layer. /\n const toScreen = (p: PlanPoint) => ({\n x: (p.x - view.x) view.zoom,\n y: (p.y - view.y) * view.zoom,\n });\n\n // Grid lines are generated for the visible rect only. Deliberately not an SVG\n // <pattern>: a pattern needs an id, and two canvases on one page then collide.\n const gridLines = useMemo(() => {\n if (!showGrid \|\| gridSize <= 0) return null;\n const worldW = size.width * pxToWorld;\n const worldH = size.height * pxToWorld;\n // Keep the line count sane when zoomed far out.\n const step = gridSize * Math.max(1, Math.pow(10, Math.ceil(Math.log10(worldW / gridSize / 60))));\n const startX = Math.floor(view.x / step) * step;\n const startY = Math.floor(view.y / step) * step;\n const verticals: number[] = [];\n const horizontals: number[] = [];\n for (let x = startX; x <= view.x + worldW; x += step) verticals.push(x);\n for (let y = startY; y <= view.y + worldH; y += step) horizontals.push(y);\n return { verticals, horizontals, step, worldW, worldH };\n }, [showGrid, gridSize, size.width, size.height, pxToWorld, view.x, view.y]);\n\n const isSelected = (type: string, id: string) =>\n selection.some((entry) => entry.type === type && entry.id === id);\n const isHovered = (type: string, id: string) => hovered?.type === type && hovered.id === id;\n\n /*\n The walls bounding the selected rooms. A SELECTED room is marked by colouring its\n * boundary rather than by flooding its floor, which would bury its doors and its label;\n * hover keeps the faint floor tint instead, since the two say different things.\n /\n const highlightedWalls = useMemo(() => {\n const selectedRooms = new Set(\n selection.filter((entry) => entry.type === 'room').map((entry) => entry.id),\n );\n const ids = new Set<string>();\n for (const room of rooms) {\n if (room.roomId && selectedRooms.has(room.roomId)) {\n // A wall shared by two selected rooms belongs to both; the set draws it once.\n for (const id of room.wallIds) ids.add(id);\n }\n }\n return ids;\n }, [rooms, selection]);\n\n const roomEdge = useMemo(\n () =>\n highlightedWalls.size > 0\n ? buildWallPaths(floor, { wallIds: highlightedWalls })\n : { groups: [], caps: [] },\n [floor, highlightedWalls],\n );\n\n function renderOpening(opening: PlanOpening) {\n const geo = openingGeometry(floor, opening);\n if (!geo) return null;\n const wall = floor.walls[opening.wallId];\n const half = wall ? wall.thickness / 2 : 50;\n const { p1, p2, normal, dir, centre } = geo;\n\n const selected = isSelected('opening', opening.id);\n const hoveredNow = isHovered('opening', opening.id);\n const width = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n\n const parts: ReactElement[] = [];\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Door) {\n // Leaf plus swing arc, drawn on the wall's left side.\n const hingeAtStart = opening.swing !== 'endLeft' && opening.swing !== 'endRight';\n const hinge = hingeAtStart ? p1 : p2;\n const sweepDir = hingeAtStart ? 1 : -1;\n const leafEnd = { x: hinge.x + normal.x width, y: hinge.y + normal.y * width };\n const arcEnd = {\n x: hinge.x + dir.x * width * sweepDir,\n y: hinge.y + dir.y * width * sweepDir,\n };\n parts.push(\n <path\n key=\"leaf\"\n className={styles.planCanvasDoorLeaf}\n d={`M ${hinge.x},${hinge.y} L ${leafEnd.x},${leafEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n <path\n key=\"swing\"\n className={styles.planCanvasDoorSwing}\n d={`M ${leafEnd.x},${leafEnd.y} A ${width},${width} 0 0,${\n hingeAtStart ? 0 : 1\n } ${arcEnd.x},${arcEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n );\n }\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Window) {\n // A pane line down the middle of the wall's thickness.\n parts.push(\n <path\n key=\"pane\"\n className={styles.planCanvasWindowPane}\n d={`M ${p1.x},${p1.y} L ${p2.x},${p2.y}`}\n strokeWidth={outlineWidth * 2}\n />,\n );\n }\n\n const hitPath = `M ${p1.x + normal.x * half},${p1.y + normal.y * half} L ${\n p2.x + normal.x * half\n },${p2.y + normal.y * half} L ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${\n p1.x - normal.x * half\n },${p1.y - normal.y * half} Z`;\n\n return (\n <g\n key={opening.id}\n className={cx(\n selected && styles.planCanvasOpeningSelected,\n hoveredNow && styles.planCanvasOpeningHovered,\n classNames?.opening,\n )}\n style={slotStyles?.opening}\n data-opening-kind={opening.kind}\n >\n {parts}\n <path\n className={cx(\n styles.planCanvasOpeningHit,\n interactiveOpenings && styles.planCanvasOpeningHitInteractive,\n )}\n d={hitPath}\n onClick={\n interactiveOpenings && onOpeningActivate\n ? (e) => {\n e.stopPropagation();\n onOpeningActivate(opening.id);\n }\n : undefined\n }\n onPointerEnter={onHoverChange ? () => onHoverChange({ type: 'opening', id: opening.id }) : undefined}\n >\n {interactiveOpenings && <title>{opening.kind}</title>}\n </path>\n {(selected \|\| hoveredNow) && (\n <path className={styles.planCanvasOpeningOutline} d={hitPath} vectorEffect=\"non-scaling-stroke\" />\n )}\n {/* The jamb faces, so an opening reads as a hole with sides rather than a blank. /}\n <path\n className={cx(\n styles.planCanvasJamb,\n // The jamb face belongs to the wall it is cut into, so it follows that wall\n // into the highlight rather than staying white against it.\n highlightedWalls.has(opening.wallId) && styles.planCanvasJambHighlighted,\n )}\n d={`M ${p1.x - normal.x half},${p1.y - normal.y * half} L ${p1.x + normal.x * half},${\n p1.y + normal.y * half\n } M ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${p2.x + normal.x * half},${\n p2.y + normal.y * half\n }`}\n strokeWidth={outlineWidth}\n />\n {centre && null}\n </g>\n );\n }\n\n return (\n <svg\n ref={ref}\n className={cx(styles.planCanvas, className, classNames?.canvas)}\n style={{ ...style, ...slotStyles?.canvas }}\n viewBox={`0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`}\n width={size.width}\n height={size.height}\n role=\"img\"\n aria-label={ariaLabel}\n onClick={onBackgroundActivate ? () => onBackgroundActivate() : undefined}\n onPointerLeave={onHoverChange ? () => onHoverChange(null) : undefined}\n >\n <g\n transform={`translate(${-view.x * view.zoom} ${-view.y * view.zoom}) scale(${view.zoom})`}\n >\n {/* 1. Grid /}\n {gridLines && (\n <g className={cx(styles.planCanvasGrid, classNames?.grid)} style={slotStyles?.grid} aria-hidden=\"true\">\n {gridLines.verticals.map((x) => (\n <line\n key={`v${x}`}\n x1={x}\n y1={view.y}\n x2={x}\n y2={view.y + gridLines.worldH}\n strokeWidth={pxToWorld}\n />\n ))}\n {gridLines.horizontals.map((y) => (\n <line\n key={`h${y}`}\n x1={view.x}\n y1={y}\n x2={view.x + gridLines.worldW}\n y2={y}\n strokeWidth={pxToWorld}\n />\n ))}\n </g>\n )}\n\n {/ 1b. The storey below, traced /}\n {underlayLines.length > 0 && (\n <g\n className={cx(styles.planCanvasUnderlay, classNames?.underlay)}\n style={slotStyles?.underlay}\n aria-hidden=\"true\"\n >\n {/ Screen units: the rule sets vector-effect: non-scaling-stroke, so the width\n is read in screen pixels rather than world millimetres. /}\n {underlayLines.map((line) => (\n <line\n key={line.id}\n x1={line.x1}\n y1={line.y1}\n x2={line.x2}\n y2={line.y2}\n strokeWidth={1.5}\n />\n ))}\n </g>\n )}\n\n {/ 2. Room fills — the only hit target for room selection /}\n <g className={cx(styles.planCanvasRooms, classNames?.rooms)} style={slotStyles?.rooms}>\n {rooms.map((room) => {\n const selected = room.roomId ? isSelected('room', room.roomId) : false;\n const hoveredNow = room.roomId ? isHovered('room', room.roomId) : false;\n const colour = room.meta ? getRoomColor?.(room.meta, room.area) : undefined;\n const label =\n getRoomLabel?.(room.meta, { area: room.area }) ??\n `${room.meta?.name ?? 'Unnamed room'}, ${formatArea(room.area)}`;\n\n return (\n <path\n key={room.id}\n className={cx(\n styles.planCanvasRoomFill,\n hoveredNow && styles.planCanvasRoomFillHovered,\n interactiveRooms && styles.planCanvasRoomFillInteractive,\n classNames?.roomFill,\n )}\n data-state={selected ? 'selected' : hoveredNow ? 'hovered' : undefined}\n style={{ ...slotStyles?.roomFill, ...(colour ? { fill: colour } : null) }}\n d={faceToPath(room)}\n fillRule=\"evenodd\"\n tabIndex={interactiveRooms ? 0 : undefined}\n role={interactiveRooms ? 'button' : undefined}\n aria-pressed={interactiveRooms ? selected : undefined}\n onClick={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n e.stopPropagation();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onKeyDown={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n e.preventDefault();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onPointerEnter={\n onHoverChange && room.roomId\n ? () => onHoverChange({ type: 'room', id: room.roomId! })\n : undefined\n }\n >\n {/ Both a <title> and the aria-label: aria-label on SVG shapes is\n unreliable in older Safari/VoiceOver, and <title> doubles as the\n native tooltip. /}\n {interactiveRooms && <title>{label}</title>}\n </path>\n );\n })}\n </g>\n\n {/ 3. Wall bodies — outline pass, then fill pass. Never interleaved: the visible\n outline is what is left of the first pass after the second covers its middle. /}\n <g className={cx(styles.planCanvasWalls, classNames?.walls)} style={slotStyles?.walls} aria-hidden=\"true\">\n <g className={styles.planCanvasWallOutline}>\n {wallPaths.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={classNames?.wallBody}\n style={slotStyles?.wallBody}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n </g>\n <g className={styles.planCanvasWallFill}>\n {wallPaths.groups.map((group) => {\n const fillWidth = group.thickness - 2 outlineWidth;\n // Zoomed far out the fill would invert; walls collapsing to solid lines is\n // the right look at that scale.\n if (fillWidth <= 0) return null;\n return <path key={`f${group.thickness}`} d={group.d} strokeWidth={fillWidth} />;\n })}\n </g>\n <g className={styles.planCanvasRoomEdgeSelected}>\n {/* The same two passes the walls themselves use, on the same path data: an\n outline at full thickness, then a fill inside it. Recolouring only the body\n left the wall edged in its normal colour, so it did not read as one object. /}\n {roomEdge.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={styles.planCanvasRoomEdgeOutline}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n {roomEdge.groups.map((group) => {\n const fillWidth = group.thickness - 2 outlineWidth;\n if (fillWidth <= 0) return null;\n return (\n <path\n key={`f${group.thickness}`}\n className={styles.planCanvasRoomEdgeFill}\n d={group.d}\n strokeWidth={fillWidth}\n />\n );\n })}\n </g>\n\n <g className={styles.planCanvasWallCaps}>\n {/* A highlighted wall's caps are drawn below in the highlight colour. Skipped\n here rather than painted over: an antialiased hairline is never fully\n covered, and the two would blend into a pale seam. /}\n {wallPaths.caps\n .filter((cap) => !highlightedWalls.has(cap.wallId))\n .map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n <g className={styles.planCanvasRoomEdgeCaps}>\n {roomEdge.caps.map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n </g>\n\n {/ 4. Openings /}\n <g className={cx(styles.planCanvasOpenings, classNames?.openings)} style={slotStyles?.openings}>\n {Object.values(floor.openings).map(renderOpening)}\n </g>\n\n {/ 5. Selection / hover outlines for walls and nodes /}\n <g className={styles.planCanvasSelection} aria-hidden=\"true\">\n {selection\n .filter((entry) => entry.type === 'wall')\n .map((entry) => {\n const wall = floor.walls[entry.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a \|\| !b) return null;\n return (\n <line\n key={entry.id}\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallSelected}\n />\n );\n })}\n {hovered?.type === 'wall' &&\n !isSelected('wall', hovered.id) &&\n (() => {\n const wall = floor.walls[hovered.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a \|\| !b) return null;\n return (\n <line\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallHovered}\n />\n );\n })()}\n </g>\n\n {worldOverlay}\n </g>\n\n {/ Screen space: sized in pixels, so labels and handles stay constant under zoom */}\n <g className={cx(styles.planCanvasScreen, classNames?.overlay)} style={slotStyles?.overlay}>\n {showRoomLabels &&\n rooms.map((room) => {\n const at = toScreen(room.anchor);\n if (at.x < -200 \|\| at.y < -200 \|\| at.x > size.width + 200 \|\| at.y > size.height + 200) {\n return null;\n }\n const custom = renderRoomLabel?.(room.meta, { area: room.area, faceId: room.id });\n if (custom === null) return null;\n\n return (\n <g\n key={room.id}\n className={cx(styles.planCanvasRoomLabel, classNames?.roomLabel)}\n style={slotStyles?.roomLabel}\n transform={`translate(${at.x} ${at.y})`}\n aria-hidden=\"true\"\n >\n {custom !== undefined ? (\n custom\n ) : (\n <>\n <text className={styles.planCanvasRoomName} textAnchor=\"middle\">\n {room.meta?.name ?? ''}\n </text>\n <text className={styles.planCanvasRoomArea} textAnchor=\"middle\" dy=\"1.2em\">\n {formatArea(room.area)}\n </text>\n </>\n )}\n </g>\n );\n })}\n {overlay}\n </g>\n </svg>\n );\n});\n\nexport default PlanCanvas;\n"],"mappings":"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"}
1	+ {"version":3,"file":"planCanvas.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.tsx"],"sourcesContent":["import { forwardRef, useMemo, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport {\n OpeningKind,\n buildWallPaths,\n openingGeometry,\n type DerivedRoom,\n type PlanOpening,\n type PlanPoint,\n type PlanSelection,\n} from '../floorPlan';\nimport type { PlanCanvasProps } from './planCanvas.types';\nimport styles from './planCanvas.module.pcss';\n\n/*\n The read-only renderer shared by RoomDrawer and RoomViewer.\n \n It owns the projection, the layer stack, and the accessible room shapes. It owns no\n * editing state: the drawer supplies its handles and previews through `overlay`. Having\n * one renderer is the point, so that a plan cannot look different in the editor than it\n * does in the viewer.\n \n The viewport is a TRANSFORM on a group, not an SVG `viewBox`. That is what lets the\n * screen-space layer draw labels and handles at a fixed pixel size while the drawing\n * itself scales.\n /\n\nconst DEFAULT_OUTLINE_PX = 1;\n\n/* Stable identity, so a default-valued `selection` prop does not re-run memos. /\nconst EMPTY_SELECTION: readonly PlanSelection[] = [];\n\nfunction formatAreaDefault(areaMm2: number): string {\n const m2 = areaMm2 / 1_000_000;\n return `${m2.toFixed(m2 < 10 ? 1 : 0)} m²`;\n}\n\nfunction ringToPath(ring: PlanPoint[]): string {\n if (ring.length === 0) return '';\n return `${ring.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')} Z`;\n}\n\n/* Outer ring plus holes as one path; `fill-rule: evenodd` punches the holes out. /\nfunction faceToPath(face: DerivedRoom): string {\n return [ringToPath(face.outer), ...face.holes.map(ringToPath)].filter(Boolean).join(' ');\n}\n\n/\n The ref lands on the `<svg>` itself, which is what a consumer wants for measuring or\n * screenshotting. Both the drawer and the viewer expose it as `getSvgElement()`.\n /\nconst PlanCanvas = forwardRef<SVGSVGElement, PlanCanvasProps>(function PlanCanvas(props, ref) {\n const {\n floor,\n underlay,\n rooms,\n view,\n selection = EMPTY_SELECTION,\n hovered = null,\n interactiveRooms = false,\n interactiveOpenings = false,\n showGrid = false,\n gridSize = 100,\n showRoomLabels = true,\n showOpeningSymbols = true,\n getRoomColor,\n renderRoomLabel,\n getRoomLabel,\n formatArea = formatAreaDefault,\n onRoomActivate,\n onOpeningActivate,\n onBackgroundActivate,\n onHoverChange,\n overlay,\n worldOverlay,\n size,\n className,\n style,\n classNames,\n styles: slotStyles,\n 'aria-label': ariaLabel,\n } = props;\n\n const pxToWorld = view.zoom > 0 ? 1 / view.zoom : 1;\n const outlineWidth = DEFAULT_OUTLINE_PX pxToWorld;\n\n const wallPaths = useMemo(() => buildWallPaths(floor), [floor]);\n\n /*\n Centrelines only, at one stroke width. The underlay is there to line walls up\n * against, so it wants to read as a tracing rather than compete with the floor being\n * drawn; the two-pass thick-wall treatment would give it equal weight.\n /\n const underlayLines = useMemo(() => {\n if (!underlay) return [];\n return Object.values(underlay.walls).flatMap((wall) => {\n const a = underlay.nodes[wall.a];\n const b = underlay.nodes[wall.b];\n return a && b ? [{ id: wall.id, x1: a.x, y1: a.y, x2: b.x, y2: b.y }] : [];\n });\n }, [underlay]);\n\n /* World point to screen point, for the untransformed layer. /\n const toScreen = (p: PlanPoint) => ({\n x: (p.x - view.x) view.zoom,\n y: (p.y - view.y) * view.zoom,\n });\n\n // Grid lines are generated for the visible rect only. Deliberately not an SVG\n // <pattern>: a pattern needs an id, and two canvases on one page then collide.\n const gridLines = useMemo(() => {\n if (!showGrid \|\| gridSize <= 0) return null;\n const worldW = size.width * pxToWorld;\n const worldH = size.height * pxToWorld;\n // Keep the line count sane when zoomed far out.\n const step = gridSize * Math.max(1, Math.pow(10, Math.ceil(Math.log10(worldW / gridSize / 60))));\n const startX = Math.floor(view.x / step) * step;\n const startY = Math.floor(view.y / step) * step;\n const verticals: number[] = [];\n const horizontals: number[] = [];\n for (let x = startX; x <= view.x + worldW; x += step) verticals.push(x);\n for (let y = startY; y <= view.y + worldH; y += step) horizontals.push(y);\n return { verticals, horizontals, step, worldW, worldH };\n }, [showGrid, gridSize, size.width, size.height, pxToWorld, view.x, view.y]);\n\n const isSelected = (type: string, id: string) => selection.some((entry) => entry.type === type && entry.id === id);\n const isHovered = (type: string, id: string) => hovered?.type === type && hovered.id === id;\n\n /*\n The walls bounding the selected rooms. A SELECTED room is marked by colouring its\n * boundary rather than by flooding its floor, which would bury its doors and its label;\n * hover keeps the faint floor tint instead, since the two say different things.\n /\n const highlightedWalls = useMemo(() => {\n const selectedRooms = new Set(selection.filter((entry) => entry.type === 'room').map((entry) => entry.id));\n const ids = new Set<string>();\n for (const room of rooms) {\n if (room.roomId && selectedRooms.has(room.roomId)) {\n // A wall shared by two selected rooms belongs to both; the set draws it once.\n for (const id of room.wallIds) ids.add(id);\n }\n }\n return ids;\n }, [rooms, selection]);\n\n const roomEdge = useMemo(\n () => (highlightedWalls.size > 0 ? buildWallPaths(floor, { wallIds: highlightedWalls }) : { groups: [], caps: [] }),\n [floor, highlightedWalls],\n );\n\n function renderOpening(opening: PlanOpening) {\n const geo = openingGeometry(floor, opening);\n if (!geo) return null;\n const wall = floor.walls[opening.wallId];\n const half = wall ? wall.thickness / 2 : 50;\n const { p1, p2, normal, dir, centre } = geo;\n\n const selected = isSelected('opening', opening.id);\n const hoveredNow = isHovered('opening', opening.id);\n const width = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n\n const parts: ReactElement[] = [];\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Door) {\n // Leaf plus swing arc, drawn on the wall's left side.\n const hingeAtStart = opening.swing !== 'endLeft' && opening.swing !== 'endRight';\n const hinge = hingeAtStart ? p1 : p2;\n const sweepDir = hingeAtStart ? 1 : -1;\n const leafEnd = { x: hinge.x + normal.x width, y: hinge.y + normal.y * width };\n const arcEnd = {\n x: hinge.x + dir.x * width * sweepDir,\n y: hinge.y + dir.y * width * sweepDir,\n };\n parts.push(\n <path\n key='leaf'\n className={styles.planCanvasDoorLeaf}\n d={`M ${hinge.x},${hinge.y} L ${leafEnd.x},${leafEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n <path\n key='swing'\n className={styles.planCanvasDoorSwing}\n d={`M ${leafEnd.x},${leafEnd.y} A ${width},${width} 0 0,${hingeAtStart ? 0 : 1} ${arcEnd.x},${arcEnd.y}`}\n strokeWidth={outlineWidth}\n />,\n );\n }\n\n if (showOpeningSymbols && opening.kind === OpeningKind.Window) {\n // A pane line down the middle of the wall's thickness.\n parts.push(\n <path\n key='pane'\n className={styles.planCanvasWindowPane}\n d={`M ${p1.x},${p1.y} L ${p2.x},${p2.y}`}\n strokeWidth={outlineWidth * 2}\n />,\n );\n }\n\n const hitPath = `M ${p1.x + normal.x * half},${p1.y + normal.y * half} L ${\n p2.x + normal.x * half\n },${p2.y + normal.y * half} L ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${\n p1.x - normal.x * half\n },${p1.y - normal.y * half} Z`;\n\n return (\n <g\n key={opening.id}\n className={cx(\n selected && styles.planCanvasOpeningSelected,\n hoveredNow && styles.planCanvasOpeningHovered,\n classNames?.opening,\n )}\n style={slotStyles?.opening}\n data-opening-kind={opening.kind}\n >\n {parts}\n <path\n className={cx(styles.planCanvasOpeningHit, interactiveOpenings && styles.planCanvasOpeningHitInteractive)}\n d={hitPath}\n onClick={\n interactiveOpenings && onOpeningActivate\n ? (e) => {\n e.stopPropagation();\n onOpeningActivate(opening.id);\n }\n : undefined\n }\n onPointerEnter={onHoverChange ? () => onHoverChange({ type: 'opening', id: opening.id }) : undefined}\n >\n {interactiveOpenings && <title>{opening.kind}</title>}\n </path>\n {(selected \|\| hoveredNow) && (\n <path className={styles.planCanvasOpeningOutline} d={hitPath} vectorEffect='non-scaling-stroke' />\n )}\n {/* The jamb faces, so an opening reads as a hole with sides rather than a blank. /}\n <path\n className={cx(\n styles.planCanvasJamb,\n // The jamb face belongs to the wall it is cut into, so it follows that wall\n // into the highlight rather than staying white against it.\n highlightedWalls.has(opening.wallId) && styles.planCanvasJambHighlighted,\n )}\n d={`M ${p1.x - normal.x half},${p1.y - normal.y * half} L ${p1.x + normal.x * half},${\n p1.y + normal.y * half\n } M ${p2.x - normal.x * half},${p2.y - normal.y * half} L ${p2.x + normal.x * half},${\n p2.y + normal.y * half\n }`}\n strokeWidth={outlineWidth}\n />\n {centre && null}\n </g>\n );\n }\n\n return (\n <svg\n ref={ref}\n className={cx(styles.planCanvas, className, classNames?.canvas)}\n style={{ ...style, ...slotStyles?.canvas }}\n viewBox={`0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`}\n width={size.width}\n height={size.height}\n role='img'\n aria-label={ariaLabel}\n onClick={onBackgroundActivate ? () => onBackgroundActivate() : undefined}\n onPointerLeave={onHoverChange ? () => onHoverChange(null) : undefined}\n >\n <g transform={`translate(${-view.x * view.zoom} ${-view.y * view.zoom}) scale(${view.zoom})`}>\n {/* 1. Grid /}\n {gridLines && (\n <g className={cx(styles.planCanvasGrid, classNames?.grid)} style={slotStyles?.grid} aria-hidden='true'>\n {gridLines.verticals.map((x) => (\n <line key={`v${x}`} x1={x} y1={view.y} x2={x} y2={view.y + gridLines.worldH} strokeWidth={pxToWorld} />\n ))}\n {gridLines.horizontals.map((y) => (\n <line key={`h${y}`} x1={view.x} y1={y} x2={view.x + gridLines.worldW} y2={y} strokeWidth={pxToWorld} />\n ))}\n </g>\n )}\n\n {/ 1b. The storey below, traced /}\n {underlayLines.length > 0 && (\n <g\n className={cx(styles.planCanvasUnderlay, classNames?.underlay)}\n style={slotStyles?.underlay}\n aria-hidden='true'\n >\n {/ Screen units: the rule sets vector-effect: non-scaling-stroke, so the width\n is read in screen pixels rather than world millimetres. /}\n {underlayLines.map((line) => (\n <line key={line.id} x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} strokeWidth={1.5} />\n ))}\n </g>\n )}\n\n {/ 2. Room fills — the only hit target for room selection /}\n <g className={cx(styles.planCanvasRooms, classNames?.rooms)} style={slotStyles?.rooms}>\n {rooms.map((room) => {\n const selected = room.roomId ? isSelected('room', room.roomId) : false;\n const hoveredNow = room.roomId ? isHovered('room', room.roomId) : false;\n const colour = room.meta ? getRoomColor?.(room.meta, room.area) : undefined;\n const label =\n getRoomLabel?.(room.meta, { area: room.area }) ??\n `${room.meta?.name ?? 'Unnamed room'}, ${formatArea(room.area)}`;\n\n return (\n <path\n key={room.id}\n className={cx(\n styles.planCanvasRoomFill,\n hoveredNow && styles.planCanvasRoomFillHovered,\n interactiveRooms && styles.planCanvasRoomFillInteractive,\n classNames?.roomFill,\n )}\n data-state={selected ? 'selected' : hoveredNow ? 'hovered' : undefined}\n style={{ ...slotStyles?.roomFill, ...(colour ? { fill: colour } : null) }}\n d={faceToPath(room)}\n fillRule='evenodd'\n tabIndex={interactiveRooms ? 0 : undefined}\n role={interactiveRooms ? 'button' : undefined}\n aria-pressed={interactiveRooms ? selected : undefined}\n onClick={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n e.stopPropagation();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onKeyDown={\n interactiveRooms && onRoomActivate && room.roomId\n ? (e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n e.preventDefault();\n onRoomActivate(room.roomId!);\n }\n : undefined\n }\n onPointerEnter={\n onHoverChange && room.roomId ? () => onHoverChange({ type: 'room', id: room.roomId! }) : undefined\n }\n >\n {/ Both a <title> and the aria-label: aria-label on SVG shapes is\n unreliable in older Safari/VoiceOver, and <title> doubles as the\n native tooltip. /}\n {interactiveRooms && <title>{label}</title>}\n </path>\n );\n })}\n </g>\n\n {/ 3. Wall bodies — outline pass, then fill pass. Never interleaved: the visible\n outline is what is left of the first pass after the second covers its middle. /}\n <g className={cx(styles.planCanvasWalls, classNames?.walls)} style={slotStyles?.walls} aria-hidden='true'>\n <g className={styles.planCanvasWallOutline}>\n {wallPaths.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={classNames?.wallBody}\n style={slotStyles?.wallBody}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n </g>\n <g className={styles.planCanvasWallFill}>\n {wallPaths.groups.map((group) => {\n const fillWidth = group.thickness - 2 outlineWidth;\n // Zoomed far out the fill would invert; walls collapsing to solid lines is\n // the right look at that scale.\n if (fillWidth <= 0) return null;\n return <path key={`f${group.thickness}`} d={group.d} strokeWidth={fillWidth} />;\n })}\n </g>\n <g className={styles.planCanvasRoomEdgeSelected}>\n {/* The same two passes the walls themselves use, on the same path data: an\n outline at full thickness, then a fill inside it. Recolouring only the body\n left the wall edged in its normal colour, so it did not read as one object. /}\n {roomEdge.groups.map((group) => (\n <path\n key={`o${group.thickness}`}\n className={styles.planCanvasRoomEdgeOutline}\n d={group.d}\n strokeWidth={group.thickness}\n />\n ))}\n {roomEdge.groups.map((group) => {\n const fillWidth = group.thickness - 2 outlineWidth;\n if (fillWidth <= 0) return null;\n return (\n <path\n key={`f${group.thickness}`}\n className={styles.planCanvasRoomEdgeFill}\n d={group.d}\n strokeWidth={fillWidth}\n />\n );\n })}\n </g>\n\n <g className={styles.planCanvasWallCaps}>\n {/* A highlighted wall's caps are drawn below in the highlight colour. Skipped\n here rather than painted over: an antialiased hairline is never fully\n covered, and the two would blend into a pale seam. /}\n {wallPaths.caps\n .filter((cap) => !highlightedWalls.has(cap.wallId))\n .map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n <g className={styles.planCanvasRoomEdgeCaps}>\n {roomEdge.caps.map((cap, i) => (\n <line\n key={`${cap.wallId}-${cap.reason}-${i}`}\n x1={cap.a.x}\n y1={cap.a.y}\n x2={cap.b.x}\n y2={cap.b.y}\n strokeWidth={outlineWidth}\n />\n ))}\n </g>\n </g>\n\n {/ 4. Openings /}\n <g className={cx(styles.planCanvasOpenings, classNames?.openings)} style={slotStyles?.openings}>\n {Object.values(floor.openings).map(renderOpening)}\n </g>\n\n {/ 5. Selection / hover outlines for walls and nodes /}\n <g className={styles.planCanvasSelection} aria-hidden='true'>\n {selection\n .filter((entry) => entry.type === 'wall')\n .map((entry) => {\n const wall = floor.walls[entry.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a \|\| !b) return null;\n return (\n <line\n key={entry.id}\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallSelected}\n />\n );\n })}\n {hovered?.type === 'wall' &&\n !isSelected('wall', hovered.id) &&\n (() => {\n const wall = floor.walls[hovered.id];\n if (!wall) return null;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a \|\| !b) return null;\n return (\n <line\n x1={a.x}\n y1={a.y}\n x2={b.x}\n y2={b.y}\n strokeWidth={wall.thickness}\n className={styles.planCanvasWallHovered}\n />\n );\n })()}\n </g>\n\n {worldOverlay}\n </g>\n\n {/ Screen space: sized in pixels, so labels and handles stay constant under zoom */}\n <g className={cx(styles.planCanvasScreen, classNames?.overlay)} style={slotStyles?.overlay}>\n {showRoomLabels &&\n rooms.map((room) => {\n const at = toScreen(room.anchor);\n if (at.x < -200 \|\| at.y < -200 \|\| at.x > size.width + 200 \|\| at.y > size.height + 200) {\n return null;\n }\n const custom = renderRoomLabel?.(room.meta, { area: room.area, faceId: room.id });\n if (custom === null) return null;\n\n return (\n <g\n key={room.id}\n className={cx(styles.planCanvasRoomLabel, classNames?.roomLabel)}\n style={slotStyles?.roomLabel}\n transform={`translate(${at.x} ${at.y})`}\n aria-hidden='true'\n >\n {custom !== undefined ? (\n custom\n ) : (\n <>\n <text className={styles.planCanvasRoomName} textAnchor='middle'>\n {room.meta?.name ?? ''}\n </text>\n <text className={styles.planCanvasRoomArea} textAnchor='middle' dy='1.2em'>\n {formatArea(room.area)}\n </text>\n </>\n )}\n </g>\n );\n })}\n {overlay}\n </g>\n </svg>\n );\n});\n\nexport default PlanCanvas;\n"],"mappings":"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"}

package/dist/esm/common/planCanvas/planCanvas.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={planCanvas:`planCanvas_7XTdG`,"planCanvas-screen":`planCanvas-screen_lk83X`,planCanvasScreen:`planCanvas-screen_lk83X`,"planCanvas-underlay":`planCanvas-underlay_rpzSl`,planCanvasUnderlay:`planCanvas-underlay_rpzSl`,"planCanvas-grid":`planCanvas-grid_49CmH`,planCanvasGrid:`planCanvas-grid_49CmH`,"planCanvas-rooms":`planCanvas-rooms_UyjEC`,planCanvasRooms:`planCanvas-rooms_UyjEC`,"planCanvas-roomFill":`planCanvas-roomFill_LXlOf`,planCanvasRoomFill:`planCanvas-roomFill_LXlOf`,"planCanvas-roomFill-interactive":`planCanvas-roomFill-interactive_JSU1E`,planCanvasRoomFillInteractive:`planCanvas-roomFill-interactive_JSU1E`,"planCanvas-roomFill-hovered":`planCanvas-roomFill-hovered_7ZXgf`,planCanvasRoomFillHovered:`planCanvas-roomFill-hovered_7ZXgf`,"planCanvas-roomLabel":`planCanvas-roomLabel_GrzE3`,planCanvasRoomLabel:`planCanvas-roomLabel_GrzE3`,"planCanvas-roomName":`planCanvas-roomName_kHAtD`,planCanvasRoomName:`planCanvas-roomName_kHAtD`,"planCanvas-roomArea":`planCanvas-roomArea_X1Tal`,planCanvasRoomArea:`planCanvas-roomArea_X1Tal`,"planCanvas-walls":`planCanvas-walls_G9vXB`,planCanvasWalls:`planCanvas-walls_G9vXB`,"planCanvas-wallOutline":`planCanvas-wallOutline_eWEN-`,planCanvasWallOutline:`planCanvas-wallOutline_eWEN-`,"planCanvas-wallFill":`planCanvas-wallFill_iKHyE`,planCanvasWallFill:`planCanvas-wallFill_iKHyE`,"planCanvas-wallCaps":`planCanvas-wallCaps_ZpLG4`,planCanvasWallCaps:`planCanvas-wallCaps_ZpLG4`,"planCanvas-roomEdgeCaps":`planCanvas-roomEdgeCaps_5Y7lq`,planCanvasRoomEdgeCaps:`planCanvas-roomEdgeCaps_5Y7lq`,"planCanvas-roomEdgeSelected":`planCanvas-roomEdgeSelected_wQk6B`,planCanvasRoomEdgeSelected:`planCanvas-roomEdgeSelected_wQk6B`,"planCanvas-roomEdgeOutline":`planCanvas-roomEdgeOutline_Y1ZwL`,planCanvasRoomEdgeOutline:`planCanvas-roomEdgeOutline_Y1ZwL`,"planCanvas-roomEdgeFill":`planCanvas-roomEdgeFill_Qr9p-`,planCanvasRoomEdgeFill:`planCanvas-roomEdgeFill_Qr9p-`,"planCanvas-wallSelected":`planCanvas-wallSelected_vFNw8`,planCanvasWallSelected:`planCanvas-wallSelected_vFNw8`,"planCanvas-wallHovered":`planCanvas-wallHovered_CFIAR`,planCanvasWallHovered:`planCanvas-wallHovered_CFIAR`,"planCanvas-openings":`planCanvas-openings_1fyX4`,planCanvasOpenings:`planCanvas-openings_1fyX4`,"planCanvas-opening-selected":`planCanvas-opening-selected_Wgl4r`,planCanvasOpeningSelected:`planCanvas-opening-selected_Wgl4r`,"planCanvas-doorLeaf":`planCanvas-doorLeaf_1BEkI`,planCanvasDoorLeaf:`planCanvas-doorLeaf_1BEkI`,"planCanvas-doorSwing":`planCanvas-doorSwing_QCc5i`,planCanvasDoorSwing:`planCanvas-doorSwing_QCc5i`,"planCanvas-windowPane":`planCanvas-windowPane_5q9oQ`,planCanvasWindowPane:`planCanvas-windowPane_5q9oQ`,"planCanvas-opening-hovered":`planCanvas-opening-hovered_NGK0O`,planCanvasOpeningHovered:`planCanvas-opening-hovered_NGK0O`,"planCanvas-opening-hit":`planCanvas-opening-hit_frRch`,planCanvasOpeningHit:`planCanvas-opening-hit_frRch`,"planCanvas-opening-hit-interactive":`planCanvas-opening-hit-interactive_D4ZUY`,planCanvasOpeningHitInteractive:`planCanvas-opening-hit-interactive_D4ZUY`,"planCanvas-opening-outline":`planCanvas-opening-outline_HS2wY`,planCanvasOpeningOutline:`planCanvas-opening-outline_HS2wY`,"planCanvas-jamb":`planCanvas-jamb_e-I9r`,planCanvasJamb:`planCanvas-jamb_e-I9r`,"planCanvas-jamb-highlighted":`planCanvas-jamb-highlighted_rWYxZ`,planCanvasJambHighlighted:`planCanvas-jamb-highlighted_rWYxZ`,"planCanvas-selection":`planCanvas-selection_0a31R`,planCanvasSelection:`planCanvas-selection_0a31R`};export{e as default};
+var e=`planCanvas_7XTdG`,t=`planCanvas-screen_lk83X`,n=`planCanvas-underlay_rpzSl`,r=`planCanvas-grid_49CmH`,i=`planCanvas-rooms_UyjEC`,a=`planCanvas-roomFill_LXlOf`,o=`planCanvas-roomFill-interactive_JSU1E`,s=`planCanvas-roomFill-hovered_7ZXgf`,c=`planCanvas-roomLabel_GrzE3`,l=`planCanvas-roomName_kHAtD`,u=`planCanvas-roomArea_X1Tal`,d=`planCanvas-walls_G9vXB`,f=`planCanvas-wallOutline_eWEN-`,p=`planCanvas-wallFill_iKHyE`,m=`planCanvas-wallCaps_ZpLG4`,h=`planCanvas-roomEdgeCaps_5Y7lq`,g=`planCanvas-roomEdgeSelected_wQk6B`,_=`planCanvas-roomEdgeOutline_Y1ZwL`,v=`planCanvas-roomEdgeFill_Qr9p-`,y=`planCanvas-wallSelected_vFNw8`,b=`planCanvas-wallHovered_CFIAR`,x=`planCanvas-openings_1fyX4`,S=`planCanvas-opening-selected_Wgl4r`,C=`planCanvas-doorLeaf_1BEkI`,w=`planCanvas-doorSwing_QCc5i`,T=`planCanvas-windowPane_5q9oQ`,E=`planCanvas-opening-hovered_NGK0O`,D=`planCanvas-opening-hit_frRch`,O=`planCanvas-opening-hit-interactive_D4ZUY`,k=`planCanvas-opening-outline_HS2wY`,A=`planCanvas-jamb_e-I9r`,j=`planCanvas-jamb-highlighted_rWYxZ`,M=`planCanvas-selection_0a31R`,N={planCanvas:e,"planCanvas-screen":`planCanvas-screen_lk83X`,planCanvasScreen:t,"planCanvas-underlay":`planCanvas-underlay_rpzSl`,planCanvasUnderlay:n,"planCanvas-grid":`planCanvas-grid_49CmH`,planCanvasGrid:r,"planCanvas-rooms":`planCanvas-rooms_UyjEC`,planCanvasRooms:i,"planCanvas-roomFill":`planCanvas-roomFill_LXlOf`,planCanvasRoomFill:a,"planCanvas-roomFill-interactive":`planCanvas-roomFill-interactive_JSU1E`,planCanvasRoomFillInteractive:o,"planCanvas-roomFill-hovered":`planCanvas-roomFill-hovered_7ZXgf`,planCanvasRoomFillHovered:s,"planCanvas-roomLabel":`planCanvas-roomLabel_GrzE3`,planCanvasRoomLabel:c,"planCanvas-roomName":`planCanvas-roomName_kHAtD`,planCanvasRoomName:l,"planCanvas-roomArea":`planCanvas-roomArea_X1Tal`,planCanvasRoomArea:u,"planCanvas-walls":`planCanvas-walls_G9vXB`,planCanvasWalls:d,"planCanvas-wallOutline":`planCanvas-wallOutline_eWEN-`,planCanvasWallOutline:f,"planCanvas-wallFill":`planCanvas-wallFill_iKHyE`,planCanvasWallFill:p,"planCanvas-wallCaps":`planCanvas-wallCaps_ZpLG4`,planCanvasWallCaps:m,"planCanvas-roomEdgeCaps":`planCanvas-roomEdgeCaps_5Y7lq`,planCanvasRoomEdgeCaps:h,"planCanvas-roomEdgeSelected":`planCanvas-roomEdgeSelected_wQk6B`,planCanvasRoomEdgeSelected:g,"planCanvas-roomEdgeOutline":`planCanvas-roomEdgeOutline_Y1ZwL`,planCanvasRoomEdgeOutline:_,"planCanvas-roomEdgeFill":`planCanvas-roomEdgeFill_Qr9p-`,planCanvasRoomEdgeFill:v,"planCanvas-wallSelected":`planCanvas-wallSelected_vFNw8`,planCanvasWallSelected:y,"planCanvas-wallHovered":`planCanvas-wallHovered_CFIAR`,planCanvasWallHovered:b,"planCanvas-openings":`planCanvas-openings_1fyX4`,planCanvasOpenings:x,"planCanvas-opening-selected":`planCanvas-opening-selected_Wgl4r`,planCanvasOpeningSelected:S,"planCanvas-doorLeaf":`planCanvas-doorLeaf_1BEkI`,planCanvasDoorLeaf:C,"planCanvas-doorSwing":`planCanvas-doorSwing_QCc5i`,planCanvasDoorSwing:w,"planCanvas-windowPane":`planCanvas-windowPane_5q9oQ`,planCanvasWindowPane:T,"planCanvas-opening-hovered":`planCanvas-opening-hovered_NGK0O`,planCanvasOpeningHovered:E,"planCanvas-opening-hit":`planCanvas-opening-hit_frRch`,planCanvasOpeningHit:D,"planCanvas-opening-hit-interactive":`planCanvas-opening-hit-interactive_D4ZUY`,planCanvasOpeningHitInteractive:O,"planCanvas-opening-outline":`planCanvas-opening-outline_HS2wY`,planCanvasOpeningOutline:k,"planCanvas-jamb":`planCanvas-jamb_e-I9r`,planCanvasJamb:A,"planCanvas-jamb-highlighted":`planCanvas-jamb-highlighted_rWYxZ`,planCanvasJambHighlighted:j,"planCanvas-selection":`planCanvas-selection_0a31R`,planCanvasSelection:M};export{N as default,e as planCanvas,C as planCanvasDoorLeaf,w as planCanvasDoorSwing,r as planCanvasGrid,A as planCanvasJamb,j as planCanvasJambHighlighted,D as planCanvasOpeningHit,O as planCanvasOpeningHitInteractive,E as planCanvasOpeningHovered,k as planCanvasOpeningOutline,S as planCanvasOpeningSelected,x as planCanvasOpenings,u as planCanvasRoomArea,h as planCanvasRoomEdgeCaps,v as planCanvasRoomEdgeFill,_ as planCanvasRoomEdgeOutline,g as planCanvasRoomEdgeSelected,a as planCanvasRoomFill,s as planCanvasRoomFillHovered,o as planCanvasRoomFillInteractive,c as planCanvasRoomLabel,l as planCanvasRoomName,i as planCanvasRooms,t as planCanvasScreen,M as planCanvasSelection,n as planCanvasUnderlay,m as planCanvasWallCaps,p as planCanvasWallFill,b as planCanvasWallHovered,f as planCanvasWallOutline,y as planCanvasWallSelected,d as planCanvasWalls,T as planCanvasWindowPane};
 //# sourceMappingURL=planCanvas.module.mjs.map

package/dist/esm/common/planCanvas/planCanvas.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"planCanvas.module.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.module.pcss"],"sourcesContent":["/*\n Every colour comes from a theme variable. The wall fill/outline pair in particular\n * must stay two distinct surfaces, or the two-pass stroke has nothing to reveal.\n /\n\n.planCanvas {\n display: block;\n touch-action: none;\n user-select: none;\n background: var(--plan-canvas-background, var(--background));\n\n &-screen {\n pointer-events: none;\n }\n\n / The storey below, for lining walls up between floors. Faint and dashed so it reads\n as a tracing under the drawing rather than as part of it, and never picks up a\n pointer: it is not this floor's geometry. /\n &-underlay {\n pointer-events: none;\n\n line {\n stroke: var(--plan-underlay-color, var(--text-dark));\n opacity: 0.28;\n stroke-dasharray: 6 5;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n }\n }\n\n &-grid {\n pointer-events: none;\n\n line {\n stroke: var(--plan-grid-color, var(--text-color));\n opacity: 0.1;\n }\n }\n\n / ── Rooms ── /\n\n &-rooms {\n pointer-events: auto;\n }\n\n &-roomFill {\n fill: var(--plan-room-fill, var(--background-accent));\n stroke: none;\n transition: fill 0.12s ease-out, opacity 0.12s ease-out;\n\n &-interactive {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:focus-visible {\n outline: none;\n stroke: var(--focus-border-color, var(--primary-color));\n stroke-width: 2;\n vector-effect: non-scaling-stroke;\n }\n }\n\n / Hover tints the floor, selection colours the walls: two channels, so both can be\n read at once. A fill answers \"which room\" instantly, where a shared wall is\n ambiguous between the rooms either side of it. /\n &-hovered {\n fill: var(--plan-room-fill-hover, var(--background-accent-light));\n }\n }\n\n &-roomLabel {\n pointer-events: none;\n }\n\n &-roomName {\n fill: var(--text-color);\n font-size: 13px;\n font-weight: 600;\n / A halo, so a label stays legible over any room colour a consumer sets. /\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n &-roomArea {\n fill: var(--text-dark);\n font-size: 11px;\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n / ── Walls ── /\n\n &-walls {\n pointer-events: none;\n }\n\n /\n * A mitred corner runs to 1 / sin(angle / 2) times the stroke width, so an acute one\n * grows without bound and reads as a spike. 4 keeps a true point down to about 29\n * degrees and caps it at twice the wall thickness, which covers every angle a building\n * plausibly has; SVG bevels anything sharper.\n /\n &-wallOutline path {\n fill: none;\n stroke: var(--plan-wall-outline, var(--text-color));\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n / Must match the outline pass exactly: the two are the same shape, and the visible\n outline is what is left of the first after this one covers its middle. /\n &-wallFill path {\n fill: none;\n stroke: var(--plan-wall-fill, var(--text-dark));\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n &-wallCaps line {\n stroke: var(--plan-wall-outline, var(--text-color));\n stroke-linecap: butt;\n }\n\n / Drawn from the same geometry as the walls, so it inherits their corners and their\n gaps at doors. /\n &-roomEdgeCaps line {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n stroke-linecap: butt;\n }\n\n &-roomEdgeSelected path {\n fill: none;\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n / Edge darker than body, so the wall keeps the crisp outline every other wall has\n rather than turning into a flat slab, and reads as one highlighted object. /\n &-roomEdgeSelected {\n .planCanvas-roomEdgeOutline {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n\n .planCanvas-roomEdgeFill {\n stroke: var(--plan-room-edge-selected-fill, var(--primary-lighter));\n }\n }\n\n &-wallSelected {\n stroke: var(--primary-color);\n opacity: 0.45;\n stroke-linecap: butt;\n }\n\n &-wallHovered {\n stroke: var(--primary-lighter);\n opacity: 0.35;\n stroke-linecap: butt;\n }\n\n / ── Openings ── /\n\n &-openings {\n pointer-events: auto;\n }\n\n &-opening {\n /\n * State lives on the group so the whole symbol responds, not just the box drawn round\n * it by `-outline`: a door reads as selected when its leaf and swing do, the way the\n * room fill does, rather than by acquiring a rectangle.\n */\n &-selected {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-color);\n }\n\n .planCanvas-doorSwing {\n opacity: 0.9;\n }\n }\n\n &-hovered {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-lighter, var(--primary-color));\n }\n }\n\n &-hit {\n fill: transparent;\n stroke: none;\n pointer-events: none;\n\n &-interactive {\n pointer-events: auto;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-outline {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 2;\n }\n }\n\n &-jamb {\n stroke: var(--plan-wall-outline, var(--text-color));\n stroke-linecap: butt;\n\n &-highlighted {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n }\n\n &-doorLeaf {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-linecap: butt;\n }\n\n &-doorSwing {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-dasharray: 6 4;\n opacity: 0.6;\n }\n\n &-windowPane {\n stroke: var(--plan-window-color, var(--info-color));\n stroke-linecap: butt;\n }\n\n &-selection {\n pointer-events: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"planCanvas.module.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.module.pcss"],"sourcesContent":["/*\n Every colour comes from a theme variable. The wall fill/outline pair in particular\n * must stay two distinct surfaces, or the two-pass stroke has nothing to reveal.\n /\n\n.planCanvas {\n display: block;\n touch-action: none;\n user-select: none;\n background: var(--plan-canvas-background, var(--background));\n\n &-screen {\n pointer-events: none;\n }\n\n / The storey below, for lining walls up between floors. Faint and dashed so it reads\n as a tracing under the drawing rather than as part of it, and never picks up a\n pointer: it is not this floor's geometry. /\n &-underlay {\n pointer-events: none;\n\n line {\n stroke: var(--plan-underlay-color, var(--text-dark));\n opacity: 0.28;\n stroke-dasharray: 6 5;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n }\n }\n\n &-grid {\n pointer-events: none;\n\n line {\n stroke: var(--plan-grid-color, var(--text-color));\n opacity: 0.1;\n }\n }\n\n / ── Rooms ── /\n\n &-rooms {\n pointer-events: auto;\n }\n\n &-roomFill {\n fill: var(--plan-room-fill, var(--background-accent));\n stroke: none;\n transition:\n fill 0.12s ease-out,\n opacity 0.12s ease-out;\n\n &-interactive {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:focus-visible {\n outline: none;\n stroke: var(--focus-border-color, var(--primary-color));\n stroke-width: 2;\n vector-effect: non-scaling-stroke;\n }\n }\n\n / Hover tints the floor, selection colours the walls: two channels, so both can be\n read at once. A fill answers \"which room\" instantly, where a shared wall is\n ambiguous between the rooms either side of it. /\n &-hovered {\n fill: var(--plan-room-fill-hover, var(--background-accent-light));\n }\n }\n\n &-roomLabel {\n pointer-events: none;\n }\n\n &-roomName {\n fill: var(--text-color);\n font-size: 13px;\n font-weight: 600;\n\n / A halo, so a label stays legible over any room colour a consumer sets. /\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n &-roomArea {\n fill: var(--text-dark);\n font-size: 11px;\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n / ── Walls ── /\n\n &-walls {\n pointer-events: none;\n }\n\n /\n * A mitred corner runs to 1 / sin(angle / 2) times the stroke width, so an acute one\n * grows without bound and reads as a spike. 4 keeps a true point down to about 29\n * degrees and caps it at twice the wall thickness, which covers every angle a building\n * plausibly has; SVG bevels anything sharper.\n /\n &-wallOutline path {\n fill: none;\n stroke: var(--plan-wall-outline, var(--text-color));\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n / Must match the outline pass exactly: the two are the same shape, and the visible\n outline is what is left of the first after this one covers its middle. /\n &-wallFill path {\n fill: none;\n stroke: var(--plan-wall-fill, var(--text-dark));\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n &-wallCaps line {\n stroke: var(--plan-wall-outline, var(--text-color));\n stroke-linecap: butt;\n }\n\n / Drawn from the same geometry as the walls, so it inherits their corners and their\n gaps at doors. /\n &-roomEdgeCaps line {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n stroke-linecap: butt;\n }\n\n &-roomEdgeSelected path {\n fill: none;\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n / Edge darker than body, so the wall keeps the crisp outline every other wall has\n rather than turning into a flat slab, and reads as one highlighted object. /\n &-roomEdgeSelected {\n .planCanvas-roomEdgeOutline {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n\n .planCanvas-roomEdgeFill {\n stroke: var(--plan-room-edge-selected-fill, var(--primary-lighter));\n }\n }\n\n &-wallSelected {\n stroke: var(--primary-color);\n opacity: 0.45;\n stroke-linecap: butt;\n }\n\n &-wallHovered {\n stroke: var(--primary-lighter);\n opacity: 0.35;\n stroke-linecap: butt;\n }\n\n / ── Openings ── /\n\n &-openings {\n pointer-events: auto;\n }\n\n &-opening {\n /\n * State lives on the group so the whole symbol responds, not just the box drawn round\n * it by `-outline`: a door reads as selected when its leaf and swing do, the way the\n * room fill does, rather than by acquiring a rectangle.\n */\n &-selected {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-color);\n }\n\n .planCanvas-doorSwing {\n opacity: 0.9;\n }\n }\n\n &-hovered {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-lighter, var(--primary-color));\n }\n }\n\n &-hit {\n fill: transparent;\n stroke: none;\n pointer-events: none;\n\n &-interactive {\n pointer-events: auto;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-outline {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 2;\n }\n }\n\n &-jamb {\n stroke: var(--plan-wall-outline, var(--text-color));\n stroke-linecap: butt;\n\n &-highlighted {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n }\n\n &-doorLeaf {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-linecap: butt;\n }\n\n &-doorSwing {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-dasharray: 6 4;\n opacity: 0.6;\n }\n\n &-windowPane {\n stroke: var(--plan-window-color, var(--info-color));\n stroke-linecap: butt;\n }\n\n &-selection {\n pointer-events: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/popover/popover.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import n from"../bodyEnd/bodyEnd.mjs";import r from"../styles/sheet.module.mjs";import i from"../sheetBackdrop/sheetBackdrop.mjs";import{tabbablesIn as a,useFocusBoundary as o}from"../hooks/useFocusBoundary.mjs";import{Presentation as s}from"../floatingMenu/floatingMenu.types.mjs";import ee from"../hooks/useSheet.mjs";import{useOverlay as c}from"../hooks/useOverlay.mjs";import l from"./popover.module.mjs";import{PopoverAlign as u,PopoverPlacement as d,PopoverTrigger as f}from"./popover.types.mjs";import{usePopoverPosition as p}from"./usePopoverPosition.mjs";import{useCallback as m,useEffect as h,useRef as g,useState as te}from"react";import _ from"classnames";import{jsx as v,jsxs as y}from"react/jsx-runtime";function b(b){let{children:x=null,content:S=null,placement:C=d.Bottom,align:w=u.Center,trigger:T=f.Click,isOpen:E,defaultOpen:D=!1,onOpenChange:O=()=>{},offset:ne=10,withArrow:k=!0,closeOnOutsideClick:A=!0,closeOnEscape:j=!0,openDelay:M=100,closeDelay:N=120,disabled:P=!1,presentation:F,className:I,style:L,classNames:R,styles:z,...B}=e(`Popover`,b),V=g(null),H=g(null),U=g(null),W=g(null),G=g(void 0),K=E!==void 0,[q,J]=te(D),Y=K?E:q,X=g(O);h(()=>{X.current=O});let Z=m(e=>{P&&e||(K||J(e),X.current(e))},[P,K]),re=t(),{isSheet:ie,sheetStyle:ae}=ee(F??re??s.Default),Q=ie&&T===f.Click;p({isOpen:!!Y&&!Q,placement:C,align:w,offset:ne,triggerRef:V,floatingRef:H,panelRef:U,arrowRef:k?W:{current:null}}),c({isActive:!!Y,containerRef:U,onEscape:j?()=>{H.current?.contains(document.activeElement)&&(a(V.current)[0]??V.current)?.focus(),Z(!1)}:void 0,trapFocus:!1,lockScroll:Q});let{restoreFocusToTrigger:oe,focusAfterTrigger:se}=o({triggerRef:V,contentRef:H});h(()=>{if(!Y||T!==f.Click)return;let e=a(U.current);e.length!==0&&(H.current?.setAttribute(`role`,`dialog`),e[0].focus())},[Y,T]);function ce(e){if(e.key!==`Tab`||T!==f.Click)return;let t=a(U.current);if(t.length===0)return;let n=document.activeElement;!e.shiftKey&&n===t[t.length-1]?(e.preventDefault(),se(),Z(!1)):e.shiftKey&&n===t[0]&&(e.preventDefault(),oe(),Z(!1))}h(()=>{if(!Y)return;function e(e){let t=e.target,n=H.current?.contains(t),r=V.current?.contains(t);!n&&!r&&Z(!1)}function t(e){let t=e.target,n=H.current?.contains(t),r=V.current?.contains(t);!n&&!r&&Z(!1)}return A&&T!==f.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,t)),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,t)}},[Y,A,T,Z]),h(()=>()=>clearTimeout(G.current),[]);function $(e){clearTimeout(G.current),G.current=setTimeout(()=>Z(e),e?M:N)}let le=T===f.Click?{onClick:()=>Z(!Y)}:T===f.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{onFocus:()=>Z(!0),onBlur:()=>Z(!1)},ue=T===f.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{};return y(`div`,{...B,className:_(l.popover,I,R?.root),style:{...L,...z?.root},children:[v(`div`,{ref:V,className:_(l.popoverTrigger,R?.trigger),style:z?.trigger,...le,children:x}),Y&&y(n,{children:[Q&&v(i,{onClose:()=>{A&&Z(!1)},className:R?.backdrop,style:z?.backdrop}),y(`div`,{ref:H,className:_(Q?r.sheet:l.popoverFloating,R?.floating),style:{...Q?ae:void 0,...z?.floating},"data-placement":C,onKeyDown:ce,...ue,children:[v(`div`,{ref:U,className:_(l.popoverPanel,Q&&r.sheetPanel,R?.panel),style:z?.panel,children:S}),k&&!Q&&v(`div`,{ref:W,className:_(l.popoverArrow,R?.arrow),style:z?.arrow})]})]})]})}export{b as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import n from"../bodyEnd/bodyEnd.mjs";import r from"../styles/sheet.module.mjs";import i from"../sheetBackdrop/sheetBackdrop.mjs";import{tabbablesIn as a,useFocusBoundary as o}from"../hooks/useFocusBoundary.mjs";import{Presentation as s}from"../floatingMenu/floatingMenu.types.mjs";import ee from"../hooks/useSheet.mjs";import{useOverlay as c}from"../hooks/useOverlay.mjs";import l from"./popover.module.mjs";import{PopoverAlign as u,PopoverPlacement as d,PopoverTrigger as f}from"./popover.types.mjs";import{usePopoverPosition as p}from"./usePopoverPosition.mjs";import{useCallback as m,useEffect as h,useRef as g,useState as te}from"react";import _ from"classnames";import{jsx as v,jsxs as y}from"react/jsx-runtime";function b(b){let{children:x=null,content:S=null,placement:C=d.Bottom,align:w=u.Center,trigger:T=f.Click,isOpen:E,defaultOpen:D=!1,onOpenChange:O=()=>{},offset:ne=10,withArrow:k=!0,closeOnOutsideClick:A=!0,closeOnEscape:j=!0,openDelay:M=100,closeDelay:N=120,disabled:P=!1,presentation:F,className:I,style:L,classNames:R,styles:z,...B}=e(`Popover`,b),V=g(null),H=g(null),U=g(null),W=g(null),G=g(void 0),K=E!==void 0,[q,J]=te(D),Y=K?E:q,X=g(O);h(()=>{X.current=O});let Z=m(e=>{P&&e||(K||J(e),X.current(e))},[P,K]),re=t(),ie=F??re??s.Default,{isSheet:ae,sheetStyle:oe}=ee(ie),Q=ae&&T===f.Click;p({isOpen:!!Y&&!Q,placement:C,align:w,offset:ne,triggerRef:V,floatingRef:H,panelRef:U,arrowRef:k?W:{current:null}}),c({isActive:!!Y,containerRef:U,onEscape:j?()=>{H.current?.contains(document.activeElement)&&(a(V.current)[0]??V.current)?.focus(),Z(!1)}:void 0,trapFocus:!1,lockScroll:Q});let{restoreFocusToTrigger:se,focusAfterTrigger:ce}=o({triggerRef:V,contentRef:H});h(()=>{if(!Y||T!==f.Click)return;let e=a(U.current);e.length!==0&&(H.current?.setAttribute(`role`,`dialog`),e[0].focus())},[Y,T]);function le(e){if(e.key!==`Tab`||T!==f.Click)return;let t=a(U.current);if(t.length===0)return;let n=document.activeElement;!e.shiftKey&&n===t[t.length-1]?(e.preventDefault(),ce(),Z(!1)):e.shiftKey&&n===t[0]&&(e.preventDefault(),se(),Z(!1))}h(()=>{if(!Y)return;function e(e){let t=e.target,n=H.current?.contains(t),r=V.current?.contains(t);!n&&!r&&Z(!1)}function t(e){let t=e.target,n=H.current?.contains(t),r=V.current?.contains(t);!n&&!r&&Z(!1)}return A&&T!==f.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,t)),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,t)}},[Y,A,T,Z]),h(()=>()=>clearTimeout(G.current),[]);function $(e){clearTimeout(G.current),G.current=setTimeout(()=>Z(e),e?M:N)}let ue=T===f.Click?{onClick:()=>Z(!Y)}:T===f.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{onFocus:()=>Z(!0),onBlur:()=>Z(!1)},de=T===f.Hover?{onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1)}:{};return y(`div`,{...B,className:_(l.popover,I,R?.root),style:{...L,...z?.root},children:[v(`div`,{ref:V,className:_(l.popoverTrigger,R?.trigger),style:z?.trigger,...ue,children:x}),Y&&y(n,{children:[Q&&v(i,{onClose:()=>{A&&Z(!1)},className:R?.backdrop,style:z?.backdrop}),y(`div`,{ref:H,className:_(Q?r.sheet:l.popoverFloating,R?.floating),style:{...Q?oe:void 0,...z?.floating},"data-placement":C,onKeyDown:le,...de,children:[v(`div`,{ref:U,className:_(l.popoverPanel,Q&&r.sheetPanel,R?.panel),style:z?.panel,children:S}),k&&!Q&&v(`div`,{ref:W,className:_(l.popoverArrow,R?.arrow),style:z?.arrow})]})]})]})}export{b as default};
 //# sourceMappingURL=popover.mjs.map