@ahrowe/ui 0.27.0 → 0.29.0

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

@@ -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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"}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -1,2 +1,2 @@
-import e from"../../hooks/useWindowSize.mjs";import t from"./overscroll.module.mjs";import{useCallback as n,useEffect as r,useRef as i}from"react";import a from"classnames";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l=null,overscrollContent:u=null,overscrollContentDesktop:d=null,centerHeader:f=!0,min:p=10,max:m=80,start:h=30,unit:g=`%`,mobileOnly:_=!0,onScrollChange:v=()=>{},scrollDisabled:y=!1}){let{isMobileSize:b,height:x}=e(),S=i(null),C=i(null),w=i(null),T=i(!1),E=i(null),D=i(v);D.current=v;let O=n(e=>{let t;if(g===`%`){if(!w.current)return;let n=w.current.clientHeight;t=Math.max(n*p/100,n-e)}else t=Math.max(p,m-e);C.current&&(C.current.style.height=`${t}px`)},[p,m,g]),k=n(()=>{let e;if(g===`%`){if(!w.current)return;let t=w.current.clientHeight/m*100;e=w.current.clientHeight-h/100*t}else e=m-h;S.current&&(S.current.scrollTop=e,O(e))},[m,h,g,O]);r(()=>{let e=setTimeout(k,100);return()=>clearTimeout(e)},[k]),r(()=>{S.current&&(S.current.style.overflow=y?`hidden`:`auto`)},[y]);let A=i(b);r(()=>{b&&!A.current&&k(),A.current=b},[b,k]);let j=i(_);r(()=>{!_&&j.current&&k(),j.current=_},[_,k]);let M=i(x);r(()=>{b&&x!==M.current&&S.current&&O(S.current.scrollTop),M.current=x},[x,b,O]);function N(e){O(e.currentTarget.scrollTop),T.current||(T.current=!0,D.current(!0)),E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{E.current=null,T.current=!1,D.current(!1)},500)}if(_&&!b)return d?c(`div`,{children:[d,l]}):s(o,{children:l});let P=g===`%`?`${100-p}%`:`calc(100% - ${p}px)`;return c(`div`,{className:t.overscroll,ref:S,onScroll:N,children:[s(`div`,{className:t.overscrollHeaderContainer,style:{height:`${m}${g}`},ref:w,children:s(`div`,{className:a(t.overscrollHeader,f&&t.overscrollHeaderCentered),ref:C,children:u})}),s(`div`,{style:{minHeight:P},children:l})]})}export{l as default};
+import e from"../../hooks/useWindowSize.mjs";import t from"./overscroll.module.mjs";import{useCallback as n,useEffect as r,useRef as i}from"react";import a from"classnames";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l=null,overscrollContent:u=null,overscrollContentDesktop:d=null,centerHeader:f=!0,min:p=10,max:m=80,start:h=30,unit:g=`%`,mobileOnly:_=!0,onScrollChange:v=()=>{},scrollDisabled:y=!1}){let{isMobileSize:b,height:x}=e(),S=i(null),C=i(null),w=i(null),T=i(!1),E=i(null),D=i(v);r(()=>{D.current=v});let O=n(e=>{let t;if(g===`%`){if(!w.current)return;let n=w.current.clientHeight;t=Math.max(n*p/100,n-e)}else t=Math.max(p,m-e);C.current&&(C.current.style.height=`${t}px`)},[p,m,g]),k=n(()=>{let e;if(g===`%`){if(!w.current)return;let t=w.current.clientHeight/m*100;e=w.current.clientHeight-h/100*t}else e=m-h;S.current&&(S.current.scrollTop=e,O(e))},[m,h,g,O]);r(()=>{let e=setTimeout(k,100);return()=>clearTimeout(e)},[k]),r(()=>{S.current&&(S.current.style.overflow=y?`hidden`:`auto`)},[y]);let A=i(b);r(()=>{b&&!A.current&&k(),A.current=b},[b,k]);let j=i(_);r(()=>{!_&&j.current&&k(),j.current=_},[_,k]);let M=i(x);r(()=>{b&&x!==M.current&&S.current&&O(S.current.scrollTop),M.current=x},[x,b,O]);function N(e){O(e.currentTarget.scrollTop),T.current||(T.current=!0,D.current(!0)),E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{E.current=null,T.current=!1,D.current(!1)},500)}if(_&&!b)return d?c(`div`,{children:[d,l]}):s(o,{children:l});let P=g===`%`?`${100-p}%`:`calc(100% - ${p}px)`;return c(`div`,{className:t.overscroll,ref:S,onScroll:N,children:[s(`div`,{className:t.overscrollHeaderContainer,style:{height:`${m}${g}`},ref:w,children:s(`div`,{className:a(t.overscrollHeader,f&&t.overscrollHeaderCentered),ref:C,children:u})}),s(`div`,{style:{minHeight:P},children:l})]})}export{l as default};
 //# sourceMappingURL=overscroll.mjs.map

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

@@ -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  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":"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"}
+{"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":"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,CACd,EAAkB,QAAU,CAC9B,CAAC,EAED,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,KACE,GAAI,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,EAAW,EAA6B,QAAQ,aAA8B,EAAQ,IAAvB,CACjE,KACE,GAAW,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,EAQjB,OAPI,EAEA,EAAC,MAAD,CAAA,SAAA,CACG,EACA,CACE,CAAA,CAAA,EAEF,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,EAAjE,SAAA,CACE,EAAC,MAAD,CACE,UAAW,EAAO,0BAClB,MAAO,CAAE,OAAQ,GAAG,IAAM,GAAO,EACjC,IAAK,EAEL,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAgB,EAAO,wBAAwB,EACtF,IAAK,EAEJ,SAAA,CACE,CAAA,CACF,CAAA,EACL,EAAC,MAAD,CAAK,MAAO,CAAE,UAAW,CAAiB,EAAI,UAAc,CAAA,CACzD,GAET"}

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

@@ -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

@@ -0,0 +1,2 @@
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./pagination.module.mjs";import{useState as r}from"react";import i from"classnames";import{faAnglesLeft as a,faAnglesRight as o,faChevronLeft as s,faChevronRight as c}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d=`dots`;function f(e,t){return t<e?[]:Array.from({length:t-e+1},(t,n)=>e+n)}function p(e,t){return Math.max(1,Math.min(t,Math.round(e)))}function m(e,t,n,r){if(n*2+r*2+3>=t)return f(1,t);let i=f(1,r),a=f(t-r+1,t),o=i.length>0?[d]:[],s=a.length>0?[d]:[],c=Math.max(e-n,r+1),l=Math.min(e+n,t-r),u=c>r+2,p=l<t-r-1;return!u&&p?[...f(1,r+n*2+2),...s,...a]:u&&!p?[...i,...o,...f(t-r-n*2-1,t)]:[...i,...o,...f(c,l),...s,...a]}function h(f){let{total:h,page:g,defaultPage:_=1,onChange:v=()=>{},siblings:y=1,boundaries:b=1,showControls:x=!0,showEdges:S=!1,disabled:C=!1,previousIcon:w=s,nextIcon:T=c,firstIcon:E=a,lastIcon:D=o,"aria-label":O=`Pagination`,className:k,style:A,classNames:j,styles:M,...N}=e(`Pagination`,f),P=g!==void 0,[F,I]=r(_),L=p(P?g:F,h);if(h<1)return null;function R(e){let t=p(e,h);t!==L&&(P||I(t),v(t))}let z=i(n.paginationControl,j?.control);function B(e,n,r,i,a){return l(`button`,{type:`button`,className:z,style:M?.control,"aria-label":n,disabled:C||a,onClick:()=>R(i),children:t(r)},e)}let V=L<=1,H=L>=h;return u(`nav`,{...N,"aria-label":O,className:i(n.pagination,j?.root,k),style:{...A,...M?.root},children:[S&&B(`first`,`Go to first page`,E,1,V),x&&B(`previous`,`Go to previous page`,w,L-1,V),m(L,h,y,b).map((e,t)=>e===d?l(`span`,{"aria-hidden":`true`,className:i(n.paginationEllipsis,j?.ellipsis),style:M?.ellipsis,children:`…`},`dots-${t}`):l(`button`,{type:`button`,className:i(n.paginationItem,e===L&&n.paginationItemActive,j?.item),style:M?.item,"aria-label":`Go to page ${e}`,"aria-current":e===L?`page`:void 0,disabled:C,onClick:()=>R(e),children:e},e)),x&&B(`next`,`Go to next page`,T,L+1,H),S&&B(`last`,`Go to last page`,D,h,H)]})}export{h as default};
+//# sourceMappingURL=pagination.mjs.map

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

@@ -0,0 +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            &hellip;\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":"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"}

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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

package/dist/esm/common/popover/popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport SheetBackdrop from '../sheetBackdrop';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { useFocusBoundary, tabbablesIn } from '../hooks/useFocusBoundary';\nimport { useSheet } from '../hooks/useSheet';\nimport { useOverlay } from '../hooks/useOverlay';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\n\nfunction Popover(props: PopoverProps) {\n  const {\n  children = null,\n  content = null,\n  placement = PopoverPlacement.Bottom,\n  align = PopoverAlign.Center,\n  trigger = PopoverTrigger.Click,\n  isOpen,\n  defaultOpen = false,\n  onOpenChange = () => {},\n  offset = 10,\n  withArrow = true,\n  closeOnOutsideClick = true,\n  closeOnEscape = true,\n  openDelay = 100,\n  closeDelay = 120,\n  disabled = false,\n  presentation: presentationProp,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n  } = useComponentDefaults('Popover', props);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const isControlled = isOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = isControlled ? isOpen : internalOpen;\n\n  // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n  const onOpenChangeRef = useRef(onOpenChange);\n  useEffect(() => { onOpenChangeRef.current = onOpenChange; });\n\n  const setOpen = useCallback((next: boolean) => {\n    if (disabled && next) return;\n    if (!isControlled) setInternalOpen(next);\n    onOpenChangeRef.current(next);\n  }, [disabled, isControlled]);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet: sheetPresentation, sheetStyle } = useSheet(presentation);\n  // Hover and focus are pointer affordances that open something small next to what caused them;\n  // a sheet is a deliberate, screen-owning open. Only a click asks for one.\n  const isSheet = sheetPresentation && trigger === PopoverTrigger.Click;\n\n  // A sheet isn't anchored to anything, so there's nothing to track, flip or clamp.\n  usePopoverPosition({\n    isOpen: !!open && !isSheet,\n    placement,\n    align,\n    offset,\n    triggerRef,\n    floatingRef,\n    panelRef,\n    arrowRef: withArrow ? arrowRef : { current: null },\n  });\n\n  // Registered for as long as it's open, not just as a sheet: this is what puts the popover on\n  // the overlay stack, so an enclosing Modal knows something sits above it and neither drags\n  // focus out of this (portaled, so outside the modal's panel) panel nor closes itself on the\n  // Escape meant for this. Focus isn't trapped: a Popover is deliberately non-modal, and it\n  // already moves focus into the panel on open by itself.\n  useOverlay({\n    isActive: !!open,\n    containerRef: panelRef,\n    onEscape: closeOnEscape ? () => {\n      // Hand focus back to the trigger when it currently sits inside the panel.\n      if (floatingRef.current?.contains(document.activeElement)) {\n        (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n      }\n      setOpen(false);\n    } : undefined,\n    trapFocus: false,\n    lockScroll: isSheet,\n  });\n\n  const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({\n    triggerRef,\n    contentRef: floatingRef,\n  });\n\n  // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n  // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n  // either end, close and continue focus as if the panel sat right after the trigger.\n  useEffect(() => {\n    if (!open || trigger !== PopoverTrigger.Click) return;\n    const focusables = tabbablesIn(panelRef.current);\n    if (focusables.length === 0) return;\n    // Only claim the dialog role when we're actually managing focus for real content.\n    floatingRef.current?.setAttribute('role', 'dialog');\n    focusables[0].focus();\n  }, [open, trigger]);\n\n  function handleFloatingKeyDown(event: React.KeyboardEvent) {\n    if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n    const focusables = tabbablesIn(panelRef.current);\n    if (focusables.length === 0) return;\n    const active = document.activeElement;\n    if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n      event.preventDefault();\n      focusAfterTrigger();\n      setOpen(false);\n    } else if (event.shiftKey && active === focusables[0]) {\n      event.preventDefault();\n      restoreFocusToTrigger();\n      setOpen(false);\n    }\n  }\n\n  // Outside click. Registered only while open and only for the relevant trigger mode; Escape is\n  // handled by `useOverlay` above, which scopes it to the innermost open layer.\n  useEffect(() => {\n    if (!open) return;\n\n    function onMouseUp(event: MouseEvent) {\n      const target = event.target as Node;\n      const inPanel = floatingRef.current?.contains(target);\n      const inTrigger = triggerRef.current?.contains(target);\n      if (!inPanel && !inTrigger) setOpen(false);\n    }\n    // Keyboard counterpart to the outside click: once focus leaves both the trigger\n    // and the (portaled) panel — e.g. tabbing on to the next element — close.\n    function onFocusIn(event: FocusEvent) {\n      const target = event.target as Node;\n      const inPanel = floatingRef.current?.contains(target);\n      const inTrigger = triggerRef.current?.contains(target);\n      if (!inPanel && !inTrigger) setOpen(false);\n    }\n\n    if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n      window.addEventListener('mouseup', onMouseUp);\n      document.addEventListener('focusin', onFocusIn);\n    }\n    return () => {\n      window.removeEventListener('mouseup', onMouseUp);\n      document.removeEventListener('focusin', onFocusIn);\n    };\n  }, [open, closeOnOutsideClick, trigger, setOpen]);\n\n  useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n  function scheduleHover(next: boolean) {\n    clearTimeout(hoverTimer.current);\n    hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n  }\n\n  const triggerHandlers =\n    trigger === PopoverTrigger.Click\n      ? { onClick: () => setOpen(!open) }\n      : trigger === PopoverTrigger.Hover\n        ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n        : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n  const floatingHoverHandlers =\n    trigger === PopoverTrigger.Hover\n      ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n      : {};\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.popover, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        ref={triggerRef}\n        className={cx(styles.popoverTrigger, classNames?.trigger)}\n        style={slotStyles?.trigger}\n        {...triggerHandlers}\n      >\n        {children}\n      </div>\n      {open && (\n        <BodyEnd>\n          {isSheet && (\n            <SheetBackdrop\n              onClose={() => { if (closeOnOutsideClick) setOpen(false); }}\n              className={classNames?.backdrop}\n              style={slotStyles?.backdrop}\n            />\n          )}\n          <div\n            ref={floatingRef}\n            className={cx(isSheet ? sheetStyles.sheet : styles.popoverFloating, classNames?.floating)}\n            style={{ ...(isSheet ? sheetStyle : undefined), ...slotStyles?.floating }}\n            data-placement={placement}\n            onKeyDown={handleFloatingKeyDown}\n            {...floatingHoverHandlers}\n          >\n            <div\n              ref={panelRef}\n              className={cx(styles.popoverPanel, isSheet && sheetStyles.sheetPanel, classNames?.panel)}\n              style={slotStyles?.panel}\n            >\n              {content}\n            </div>\n            {withArrow && !isSheet && (\n              <div\n                ref={arrowRef}\n                className={cx(styles.popoverArrow, classNames?.arrow)}\n                style={slotStyles?.arrow}\n              />\n            )}\n          </div>\n        </BodyEnd>\n      )}\n    </div>\n  );\n}\n\nexport default Popover;\n"],"mappings":"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"}
+{"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport SheetBackdrop from '../sheetBackdrop';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { useFocusBoundary, tabbablesIn } from '../hooks/useFocusBoundary';\nimport { useSheet } from '../hooks/useSheet';\nimport { useOverlay } from '../hooks/useOverlay';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\n\nfunction Popover(props: PopoverProps) {\n  const {\n    children = null,\n    content = null,\n    placement = PopoverPlacement.Bottom,\n    align = PopoverAlign.Center,\n    trigger = PopoverTrigger.Click,\n    isOpen,\n    defaultOpen = false,\n    onOpenChange = () => {},\n    offset = 10,\n    withArrow = true,\n    closeOnOutsideClick = true,\n    closeOnEscape = true,\n    openDelay = 100,\n    closeDelay = 120,\n    disabled = false,\n    presentation: presentationProp,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Popover', props);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const isControlled = isOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = isControlled ? isOpen : internalOpen;\n\n  // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n  const onOpenChangeRef = useRef(onOpenChange);\n  useEffect(() => {\n    onOpenChangeRef.current = onOpenChange;\n  });\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (disabled && next) return;\n      if (!isControlled) setInternalOpen(next);\n      onOpenChangeRef.current(next);\n    },\n    [disabled, isControlled],\n  );\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet: sheetPresentation, sheetStyle } = useSheet(presentation);\n  // Hover and focus are pointer affordances that open something small next to what caused them;\n  // a sheet is a deliberate, screen-owning open. Only a click asks for one.\n  const isSheet = sheetPresentation && trigger === PopoverTrigger.Click;\n\n  // A sheet isn't anchored to anything, so there's nothing to track, flip or clamp.\n  usePopoverPosition({\n    isOpen: !!open && !isSheet,\n    placement,\n    align,\n    offset,\n    triggerRef,\n    floatingRef,\n    panelRef,\n    arrowRef: withArrow ? arrowRef : { current: null },\n  });\n\n  // Registered for as long as it's open, not just as a sheet: this is what puts the popover on\n  // the overlay stack, so an enclosing Modal knows something sits above it and neither drags\n  // focus out of this (portaled, so outside the modal's panel) panel nor closes itself on the\n  // Escape meant for this. Focus isn't trapped: a Popover is deliberately non-modal, and it\n  // already moves focus into the panel on open by itself.\n  useOverlay({\n    isActive: !!open,\n    containerRef: panelRef,\n    onEscape: closeOnEscape\n      ? () => {\n          // Hand focus back to the trigger when it currently sits inside the panel.\n          if (floatingRef.current?.contains(document.activeElement)) {\n            (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n          }\n          setOpen(false);\n        }\n      : undefined,\n    trapFocus: false,\n    lockScroll: isSheet,\n  });\n\n  const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({\n    triggerRef,\n    contentRef: floatingRef,\n  });\n\n  // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n  // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n  // either end, close and continue focus as if the panel sat right after the trigger.\n  useEffect(() => {\n    if (!open || trigger !== PopoverTrigger.Click) return;\n    const focusables = tabbablesIn(panelRef.current);\n    if (focusables.length === 0) return;\n    // Only claim the dialog role when we're actually managing focus for real content.\n    floatingRef.current?.setAttribute('role', 'dialog');\n    focusables[0].focus();\n  }, [open, trigger]);\n\n  function handleFloatingKeyDown(event: React.KeyboardEvent) {\n    if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n    const focusables = tabbablesIn(panelRef.current);\n    if (focusables.length === 0) return;\n    const active = document.activeElement;\n    if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n      event.preventDefault();\n      focusAfterTrigger();\n      setOpen(false);\n    } else if (event.shiftKey && active === focusables[0]) {\n      event.preventDefault();\n      restoreFocusToTrigger();\n      setOpen(false);\n    }\n  }\n\n  // Outside click. Registered only while open and only for the relevant trigger mode; Escape is\n  // handled by `useOverlay` above, which scopes it to the innermost open layer.\n  useEffect(() => {\n    if (!open) return;\n\n    function onMouseUp(event: MouseEvent) {\n      const target = event.target as Node;\n      const inPanel = floatingRef.current?.contains(target);\n      const inTrigger = triggerRef.current?.contains(target);\n      if (!inPanel && !inTrigger) setOpen(false);\n    }\n    // Keyboard counterpart to the outside click: once focus leaves both the trigger\n    // and the (portaled) panel — e.g. tabbing on to the next element — close.\n    function onFocusIn(event: FocusEvent) {\n      const target = event.target as Node;\n      const inPanel = floatingRef.current?.contains(target);\n      const inTrigger = triggerRef.current?.contains(target);\n      if (!inPanel && !inTrigger) setOpen(false);\n    }\n\n    if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n      window.addEventListener('mouseup', onMouseUp);\n      document.addEventListener('focusin', onFocusIn);\n    }\n    return () => {\n      window.removeEventListener('mouseup', onMouseUp);\n      document.removeEventListener('focusin', onFocusIn);\n    };\n  }, [open, closeOnOutsideClick, trigger, setOpen]);\n\n  useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n  function scheduleHover(next: boolean) {\n    clearTimeout(hoverTimer.current);\n    hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n  }\n\n  const triggerHandlers =\n    trigger === PopoverTrigger.Click\n      ? { onClick: () => setOpen(!open) }\n      : trigger === PopoverTrigger.Hover\n        ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n        : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n  const floatingHoverHandlers =\n    trigger === PopoverTrigger.Hover\n      ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n      : {};\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.popover, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        ref={triggerRef}\n        className={cx(styles.popoverTrigger, classNames?.trigger)}\n        style={slotStyles?.trigger}\n        {...triggerHandlers}\n      >\n        {children}\n      </div>\n      {open && (\n        <BodyEnd>\n          {isSheet && (\n            <SheetBackdrop\n              onClose={() => {\n                if (closeOnOutsideClick) setOpen(false);\n              }}\n              className={classNames?.backdrop}\n              style={slotStyles?.backdrop}\n            />\n          )}\n          <div\n            ref={floatingRef}\n            className={cx(isSheet ? sheetStyles.sheet : styles.popoverFloating, classNames?.floating)}\n            style={{ ...(isSheet ? sheetStyle : undefined), ...slotStyles?.floating }}\n            data-placement={placement}\n            onKeyDown={handleFloatingKeyDown}\n            {...floatingHoverHandlers}\n          >\n            <div\n              ref={panelRef}\n              className={cx(styles.popoverPanel, isSheet && sheetStyles.sheetPanel, classNames?.panel)}\n              style={slotStyles?.panel}\n            >\n              {content}\n            </div>\n            {withArrow && !isSheet && (\n              <div ref={arrowRef} className={cx(styles.popoverArrow, classNames?.arrow)} style={slotStyles?.arrow} />\n            )}\n          </div>\n        </BodyEnd>\n      )}\n    </div>\n  );\n}\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/esm/common/popover/popover.module.mjs

@@ -1,2 +1,2 @@
-var e={popover:`popover_hhmvN`,"popover-trigger":`popover-trigger_R4ckf`,popoverTrigger:`popover-trigger_R4ckf`,"popover-floating":`popover-floating_mhXrQ`,popoverFloating:`popover-floating_mhXrQ`,"popover-panel":`popover-panel_tVB2k`,popoverPanel:`popover-panel_tVB2k`,popoverIn:`popoverIn_nKOqX`,"popover-arrow":`popover-arrow_B8kB-`,popoverArrow:`popover-arrow_B8kB-`};export{e as default};
+var e=`popover_hhmvN`,t=`popover-trigger_R4ckf`,n=`popover-floating_mhXrQ`,r=`popover-panel_tVB2k`,i=`popoverIn_nKOqX`,a=`popover-arrow_B8kB-`,o={popover:e,"popover-trigger":`popover-trigger_R4ckf`,popoverTrigger:t,"popover-floating":`popover-floating_mhXrQ`,popoverFloating:n,"popover-panel":`popover-panel_tVB2k`,popoverPanel:r,popoverIn:i,"popover-arrow":`popover-arrow_B8kB-`,popoverArrow:a};export{o as default,e as popover,a as popoverArrow,n as popoverFloating,i as popoverIn,r as popoverPanel,t as popoverTrigger};
 //# sourceMappingURL=popover.module.mjs.map

package/dist/esm/common/popover/popover.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.module.mjs","names":[],"sources":["../../../../package/common/popover/popover.module.pcss"],"sourcesContent":[".popover {\n  position: relative;\n  display: inline-flex;\n\n  &-trigger {\n    display: inline-flex;\n  }\n\n  &-floating {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 1000;\n    /* Hidden until usePopoverPosition writes the first coordinates, to avoid a top-left flash. */\n    visibility: hidden;\n  }\n\n  &-panel {\n    position: relative;\n    /* Above the arrow so the panel background hides the arrow's inner half — only the\n       tip pokes out past the panel edge. */\n    z-index: 1;\n    color: var(--text-color);\n    font-family: var(--default-font);\n    font-size: var(--default-font-size);\n    background: var(--background-modal);\n    box-shadow: var(--card-shadow);\n    border-radius: calc(var(--default-border-radius) + 4px);\n    padding: 12px 14px;\n    max-width: min(320px, calc(100vw - 24px));\n    animation: popoverIn 0.12s ease forwards;\n  }\n\n  &-arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--background-modal);\n    box-shadow: var(--card-shadow);\n    transform: rotate(45deg);\n  }\n\n  /* Arrow sits on the panel edge facing the trigger; --arrow-x / --arrow-y centre it on the trigger. */\n  &-floating[data-placement='bottom'] &-arrow {\n    top: -5px;\n    left: var(--arrow-x, 50%);\n    margin-left: -5px;\n  }\n  &-floating[data-placement='top'] &-arrow {\n    bottom: -5px;\n    left: var(--arrow-x, 50%);\n    margin-left: -5px;\n  }\n  &-floating[data-placement='right'] &-arrow {\n    left: -5px;\n    top: var(--arrow-y, 50%);\n    margin-top: -5px;\n  }\n  &-floating[data-placement='left'] &-arrow {\n    right: -5px;\n    top: var(--arrow-y, 50%);\n    margin-top: -5px;\n  }\n\n  /* Grow from the edge nearest the trigger. */\n  &-floating[data-placement='bottom'] &-panel { transform-origin: top center; }\n  &-floating[data-placement='top'] &-panel { transform-origin: bottom center; }\n  &-floating[data-placement='right'] &-panel { transform-origin: center left; }\n  &-floating[data-placement='left'] &-panel { transform-origin: center right; }\n\n  @keyframes popoverIn {\n    from {\n      opacity: 0;\n      transform: scale(0.94);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"popover.module.mjs","names":[],"sources":["../../../../package/common/popover/popover.module.pcss"],"sourcesContent":[".popover {\n  position: relative;\n  display: inline-flex;\n\n  &-trigger {\n    display: inline-flex;\n  }\n\n  &-floating {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 1000;\n\n    /* Hidden until usePopoverPosition writes the first coordinates, to avoid a top-left flash. */\n    visibility: hidden;\n  }\n\n  &-panel {\n    position: relative;\n\n    /* Above the arrow so the panel background hides the arrow's inner half — only the\n       tip pokes out past the panel edge. */\n    z-index: 1;\n    color: var(--text-color);\n    font-family: var(--default-font);\n    font-size: var(--default-font-size);\n    background: var(--background-modal);\n    box-shadow: var(--card-shadow);\n    border-radius: calc(var(--default-border-radius) + 4px);\n    padding: 12px 14px;\n    max-width: min(320px, calc(100vw - 24px));\n    animation: popoverIn 0.12s ease forwards;\n  }\n\n  &-arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--background-modal);\n    box-shadow: var(--card-shadow);\n    transform: rotate(45deg);\n  }\n\n  /* Arrow sits on the panel edge facing the trigger; --arrow-x / --arrow-y centre it on the trigger. */\n  &-floating[data-placement='bottom'] &-arrow {\n    top: -5px;\n    left: var(--arrow-x, 50%);\n    margin-left: -5px;\n  }\n\n  &-floating[data-placement='top'] &-arrow {\n    bottom: -5px;\n    left: var(--arrow-x, 50%);\n    margin-left: -5px;\n  }\n\n  &-floating[data-placement='right'] &-arrow {\n    left: -5px;\n    top: var(--arrow-y, 50%);\n    margin-top: -5px;\n  }\n\n  &-floating[data-placement='left'] &-arrow {\n    right: -5px;\n    top: var(--arrow-y, 50%);\n    margin-top: -5px;\n  }\n\n  /* Grow from the edge nearest the trigger. */\n  &-floating[data-placement='bottom'] &-panel {\n    transform-origin: top center;\n  }\n\n  &-floating[data-placement='top'] &-panel {\n    transform-origin: bottom center;\n  }\n\n  &-floating[data-placement='right'] &-panel {\n    transform-origin: center left;\n  }\n\n  &-floating[data-placement='left'] &-panel {\n    transform-origin: center right;\n  }\n\n  @keyframes popoverIn {\n    from {\n      opacity: 0;\n      transform: scale(0.94);\n    }\n\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n}\n"],"mappings":""}