@santi020k/lumen-astro 3.0.0 → 4.0.0

package/runtime/chart-actions.ts

@@ -0,0 +1,19 @@
+import type { LumenChartDatumActivationDetail, LumenChartLabels } from '@santi020k/lumen-core'
+
+export interface ChartDatumAction {
+  detail: LumenChartDatumActivationDetail
+  label: string
+  serialized: string
+}
+
+export const createChartDatumAction = (
+  detail: LumenChartDatumActivationDetail | null,
+  context: string,
+  labels: Readonly<LumenChartLabels>
+): ChartDatumAction | null => detail ?
+  {
+    detail,
+    label: labels.formatDatumAction(context),
+    serialized: JSON.stringify(detail)
+  } :
+  null

package/runtime/controllers/amount-field.ts

@@ -0,0 +1,12 @@
+import { createLumenAmountFieldController, type LumenAmountFieldController } from '@santi020k/lumen-core'
+
+const enhanced = new WeakMap<HTMLElement, LumenAmountFieldController>()
+
+export const initAmountFields = (scope: ParentNode): void => {
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-amount-field]')) {
+    const controller = enhanced.get(root)
+
+    if (controller) controller.refresh()
+    else enhanced.set(root, createLumenAmountFieldController(root))
+  }
+}

package/runtime/controllers/attachments.ts

@@ -0,0 +1,13 @@
+import { createLumenAttachmentPreviewController } from '@santi020k/lumen-core'
+
+const enhanced = new WeakSet<HTMLElement>()
+
+export const initAttachmentPreviewControllers = (scope: ParentNode): void => {
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-attachment-preview]')) {
+    if (enhanced.has(root)) continue
+
+    createLumenAttachmentPreviewController(root)
+
+    enhanced.add(root)
+  }
+}

package/runtime/controllers/chart-activation.ts

@@ -0,0 +1,33 @@
+import { createLumenChartActivationController } from '@santi020k/lumen-core'
+
+const controllers = new Map<HTMLElement, ReturnType<typeof createLumenChartActivationController>>()
+
+export const initChartActivationControllers = (scope: ParentNode): void => {
+  for (const [root, controller] of controllers) {
+    if (root.isConnected) continue
+
+    controller.destroy()
+
+    root.removeAttribute('data-ui-chart-activation-bound')
+
+    controllers.delete(root)
+  }
+
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-chart-activation]:not([data-ui-chart-adapter="react"]):not([data-ui-chart-adapter="elements"])')) {
+    if (!controllers.has(root)) {
+      controllers.set(root, createLumenChartActivationController(root))
+
+      root.setAttribute('data-ui-chart-activation-bound', 'true')
+    }
+  }
+}
+
+document.addEventListener('astro:before-swap', () => {
+  for (const [root, controller] of controllers) {
+    controller.destroy()
+
+    root.removeAttribute('data-ui-chart-activation-bound')
+  }
+
+  controllers.clear()
+})

package/runtime/controllers/charts.ts

@@ -0,0 +1,33 @@
+import { createLumenChartInteractionController } from '@santi020k/lumen-core'
+
+interface BoundChart {
+  controller: ReturnType<typeof createLumenChartInteractionController>
+  document: Document
+}
+
+const controllers = new Map<HTMLElement, BoundChart>()
+
+export const initChartControllers = (scope: ParentNode): void => {
+  for (const [root, binding] of controllers) {
+    if (!root.isConnected || root.ownerDocument !== binding.document) {
+      binding.controller.destroy()
+
+      controllers.delete(root)
+    }
+  }
+
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-chart-interactive]')) {
+    if (!controllers.has(root)) {
+      controllers.set(root, {
+        controller: createLumenChartInteractionController(root),
+        document: root.ownerDocument
+      })
+    }
+  }
+}
+
+document.addEventListener('astro:before-swap', () => {
+  for (const { controller } of controllers.values()) controller.destroy()
+
+  controllers.clear()
+})

package/runtime/controllers/combobox.ts

@@ -0,0 +1,39 @@
+import { createLumenComboboxController, type LumenComboboxController } from '@santi020k/lumen-core'
+
+interface BoundCombobox {
+  controller: LumenComboboxController
+  document: Document
+  eventRoot: Node
+}
+
+const controllers = new Map<HTMLElement, BoundCombobox>()
+
+export const closeCombobox = (root: HTMLElement): void => {
+  controllers.get(root)?.controller.close()
+}
+
+export const clearComboboxes = (): void => {
+  for (const { controller } of controllers.values()) controller.destroy()
+
+  controllers.clear()
+}
+
+export const initComboboxes = (scope: ParentNode): void => {
+  for (const [root, binding] of controllers) {
+    if (!root.isConnected || root.ownerDocument !== binding.document || root.getRootNode() !== binding.eventRoot) {
+      binding.controller.destroy()
+
+      controllers.delete(root)
+    }
+  }
+
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-combobox]')) {
+    if (!controllers.has(root)) {
+      controllers.set(root, {
+        controller: createLumenComboboxController(root),
+        document: root.ownerDocument,
+        eventRoot: root.getRootNode()
+      })
+    }
+  }
+}

package/runtime/controllers/comparison-reset.ts

@@ -0,0 +1,20 @@
+const roots = new WeakSet<Node>()
+const isRoot = (node: Node): node is ParentNode => 'querySelectorAll' in node
+
+export const bindComparisonReset = (node: Node, syncs: WeakMap<HTMLInputElement, () => number>): void => {
+  const scope = node.getRootNode()
+
+  if (!isRoot(scope) || roots.has(scope)) return
+
+  roots.add(scope)
+
+  scope.addEventListener('reset', event => {
+    setTimeout(() => {
+      if (event.defaultPrevented) return
+
+      for (const input of scope.querySelectorAll<HTMLInputElement>('[data-ui-image-comparison-input]')) {
+        if (input.isConnected && input.form === event.target) syncs.get(input)?.()
+      }
+    })
+  }, true)
+}

package/runtime/controllers/data-table.ts

@@ -0,0 +1,142 @@
+/* cspell:ignore Datatable datatable */
+const nextSortDirection = (current: string | null): 'ascending' | 'descending' | 'none' => {
+  if (current === 'ascending') return 'descending'
+
+  if (current === 'descending') return 'none'
+
+  return 'ascending'
+}
+
+const getDataTableSortValue = (
+  cell: HTMLTableCellElement | undefined
+): string => cell?.dataset.sortValue ?? cell?.textContent.trim() ?? ''
+
+const compareDataTableValues = (value: string, other: string, sortType: string | undefined): number => {
+  const numericValue = Number(value.replaceAll(',', ''))
+  const numericOther = Number(other.replaceAll(',', ''))
+
+  const useNumeric = sortType === 'number' || (
+    sortType !== 'string' &&
+    value.trim() !== '' &&
+    other.trim() !== '' &&
+    Number.isFinite(numericValue) &&
+    Number.isFinite(numericOther)
+  )
+
+  if (useNumeric) {
+    return numericValue - numericOther
+  }
+
+  return value.localeCompare(other, undefined, { numeric: true, sensitivity: 'base' })
+}
+
+const sortDataTableRows = (
+  table: HTMLTableElement,
+  header: HTMLTableCellElement,
+  columnIndex: number,
+  direction: 'ascending' | 'descending' | 'none'
+): void => {
+  const body = table.tBodies[0]
+
+  if (!body) return
+
+  const rows = [...body.rows]
+  const sortType = header.dataset.uiDatatableSortType
+
+  rows.sort((row, other) => {
+    if (direction === 'none') {
+      return Number(row.dataset.uiDatatableIndex ?? '0') - Number(other.dataset.uiDatatableIndex ?? '0')
+    }
+
+    const result = compareDataTableValues(
+      getDataTableSortValue(row.cells[columnIndex]), getDataTableSortValue(other.cells[columnIndex]), sortType
+    )
+
+    return (direction === 'ascending' ? result : -result) ||
+      Number(row.dataset.uiDatatableIndex ?? '0') - Number(other.dataset.uiDatatableIndex ?? '0')
+  })
+
+  rows.forEach(row => {
+    body.append(row)
+  })
+}
+
+const updateDataTableSort = (
+  root: HTMLElement,
+  table: HTMLTableElement,
+  header: HTMLTableCellElement,
+  direction: 'ascending' | 'descending' | 'none'
+): void => {
+  for (const item of table.querySelectorAll<HTMLTableCellElement>('thead th[aria-sort]')) {
+    item.setAttribute('aria-sort', item === header ? direction : 'none')
+
+    item.dataset.sort = item === header ? direction : 'none'
+  }
+
+  root.dataset.uiDatatableSortDirection = direction
+
+  if (direction === 'none') {
+    delete root.dataset.uiDatatableSortColumn
+  } else {
+    root.dataset.uiDatatableSortColumn = header.dataset.uiDatatableColumn ?? ''
+  }
+}
+
+export const initDataTableSorting = (root: HTMLElement, table: HTMLTableElement): void => {
+  const headers = [...table.querySelectorAll<HTMLTableCellElement>('thead th')].filter(
+    header => header.dataset.uiDatatableSortable === 'true' ||
+      header.dataset.sortable === 'true' ||
+      header.hasAttribute('data-sortable')
+  )
+
+  for (const header of headers) {
+    if (header.dataset.uiDatatableSortBound === 'true') continue
+
+    const row = header.parentElement
+    const columnIndex = row ? [...row.children].indexOf(header) : -1
+
+    if (columnIndex < 0) continue
+
+    header.dataset.uiDatatableSortBound = 'true'
+
+    header.dataset.uiDatatableColumn = String(columnIndex)
+
+    header.setAttribute('aria-sort', header.getAttribute('aria-sort') ?? 'none')
+
+    const button = document.createElement('button')
+
+    button.type = 'button'
+
+    button.className = 'ui-data-table__sort'
+
+    button.dataset.uiDatatableSort = ''
+
+    while (header.firstChild) {
+      button.append(header.firstChild)
+    }
+
+    header.append(button)
+
+    button.addEventListener('click', () => {
+      const currentDirection = header.getAttribute('aria-sort')
+      const nextDirection = nextSortDirection(currentDirection)
+
+      updateDataTableSort(root, table, header, nextDirection)
+
+      if (root.dataset.uiDatatableSortMode !== 'manual') sortDataTableRows(table, header, columnIndex, nextDirection)
+
+      root.dispatchEvent(new CustomEvent('ui:data-table-sort-change', {
+        bubbles: true,
+        detail: { key: header.dataset.uiDatatableSortKey ?? String(columnIndex), columnIndex, direction: nextDirection }
+      }))
+    })
+  }
+
+  const body = table.tBodies[0]
+
+  if (!body) return
+
+  ;[...body.rows].forEach((row, index) => {
+    row.dataset.uiDatatableIndex = row.dataset.uiDatatableIndex ?? String(index)
+  })
+}

package/runtime/controllers/dialogs.ts

@@ -1,21 +1,13 @@
-const focusableSelector = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])'
-].join(',')
-
-const isElementVisible = (element: HTMLElement): boolean => (
-  typeof element.checkVisibility === 'function' ?
-    element.checkVisibility() :
-    element.offsetParent !== null
-)
-
-const getFocusable = (root: ParentNode): HTMLElement[] => [
-  ...root.querySelectorAll<HTMLElement>(focusableSelector)
-].filter(element => !element.hasAttribute('hidden') && isElementVisible(element))
+const dialogTriggers = new WeakMap<HTMLDialogElement, HTMLElement>()
+
+const isBackdropPoint = (dialog: HTMLDialogElement, event: MouseEvent): boolean => {
+  if (event.target !== dialog) return false
+
+  const rect = dialog.getBoundingClientRect()
+
+  return event.clientX < rect.left || event.clientX > rect.right ||
+    event.clientY < rect.top || event.clientY > rect.bottom
+}
 
 export const initDialogControllers = (scope: ParentNode): void => {
   const dialogSelector =
@@ -32,17 +24,27 @@ export const initDialogControllers = (scope: ParentNode): void => {
       'role', dialog.hasAttribute('data-ui-alert-dialog') ? 'alertdialog' : 'dialog'
     )
 
+    let pressStartedOutside = false
+
+    dialog.addEventListener('pointerdown', event => {
+      pressStartedOutside = isBackdropPoint(dialog, event)
+    })
+
     dialog.addEventListener('click', event => {
-      if (event.target === dialog && !dialog.hasAttribute('data-ui-alert-dialog')) {
+      const dismiss = pressStartedOutside && event.detail > 0 &&
+        !event.defaultPrevented && isBackdropPoint(dialog, event)
+
+      pressStartedOutside = false
+
+      if (dismiss && !dialog.hasAttribute('data-ui-alert-dialog')) {
         dialog.close()
       }
     })
 
     dialog.addEventListener('close', () => {
-      const triggerId = dialog.dataset.uiLastTrigger
-      const trigger = triggerId ? document.getElementById(triggerId) : null
+      const trigger = dialogTriggers.get(dialog)
 
-      if (trigger instanceof HTMLElement) {
+      if (trigger?.isConnected) {
         trigger.focus({ preventScroll: true })
       }
     })
@@ -62,7 +64,9 @@ export const initDialogControllers = (scope: ParentNode): void => {
 
     trigger.setAttribute('aria-haspopup', 'dialog')
 
-    trigger.addEventListener('click', () => {
+    trigger.addEventListener('click', event => {
+      if (event.defaultPrevented || trigger.matches(':disabled, [aria-disabled="true"]')) return
+
       const targetId =
         trigger.dataset.uiDialogTrigger ??
         trigger.dataset.uiAlertDialogTrigger ??
@@ -73,17 +77,11 @@ export const initDialogControllers = (scope: ParentNode): void => {
 
       const dialog = document.getElementById(targetId)
 
-      if (!(dialog instanceof HTMLDialogElement)) return
-
-      if (!trigger.id) {
-        trigger.id = `ui-trigger-${crypto.randomUUID()}`
-      }
-
-      dialog.dataset.uiLastTrigger = trigger.id
+      if (!(dialog instanceof HTMLDialogElement) || dialog.open) return
 
       dialog.showModal()
 
-      getFocusable(dialog)[0]?.focus({ preventScroll: true })
+      if (dialog.hasAttribute('open')) dialogTriggers.set(dialog, trigger)
     })
   }
 
@@ -99,7 +97,9 @@ export const initDialogControllers = (scope: ParentNode): void => {
 
     closeButton.dataset.uiBound = 'true'
 
-    closeButton.addEventListener('click', () => {
+    closeButton.addEventListener('click', event => {
+      if (event.defaultPrevented || closeButton.matches(':disabled, [aria-disabled="true"]')) return
+
       closeButton.closest<HTMLDialogElement>('dialog')?.close()
     })
   }

package/runtime/controllers/document-navigation.ts

@@ -1,15 +1,63 @@
+const decodeFragment = (fragment: string): string => {
+  try {
+    return decodeURIComponent(fragment)
+  } catch {
+    // A literal percent sign can still identify a section; isolate malformed escapes.
+    return fragment
+  }
+}
+
+interface AnchorDispatcher {
+  callbacks: WeakMap<HTMLElement, () => void>
+  frame: number
+}
+
+const anchorDispatchers = new WeakMap<Document, AnchorDispatcher>()
+
+const getAnchorDispatcher = (ownerDocument: Document): AnchorDispatcher => {
+  const existing = anchorDispatchers.get(ownerDocument)
+
+  if (existing) return existing
+
+  const dispatcher: AnchorDispatcher = { callbacks: new WeakMap(), frame: 0 }
+
+  const runUpdates = (): void => {
+    dispatcher.frame = 0
+
+    for (const root of ownerDocument.querySelectorAll<HTMLElement>('[data-ui-anchor]')) {
+      dispatcher.callbacks.get(root)?.()
+    }
+  }
+
+  const requestUpdates = (): void => {
+    if (dispatcher.frame) return
+
+    dispatcher.frame = requestAnimationFrame(runUpdates)
+  }
+
+  ownerDocument.defaultView?.addEventListener('resize', requestUpdates, { passive: true })
+
+  ownerDocument.defaultView?.addEventListener('scroll', requestUpdates, { passive: true })
+
+  anchorDispatchers.set(ownerDocument, dispatcher)
+
+  return dispatcher
+}
+
 const initAnchors = (scope: ParentNode): void => {
   for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-anchor]')) {
     if (root.dataset.uiBound === 'true') continue
 
     root.dataset.uiBound = 'true'
 
+    const ownerDocument = root.ownerDocument
     const links = [...root.querySelectorAll<HTMLAnchorElement>('a[href^="#"]')]
     const targets: { link: HTMLAnchorElement, target: HTMLElement }[] = []
 
     for (const link of links) {
-      const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '')
-      const target = id ? document.getElementById(id) : null
+      const fragment = link.getAttribute('href')?.slice(1) ?? ''
+      const id = decodeFragment(fragment)
+      const target = id ? ownerDocument.getElementById(id) : null
 
       if (target) {
         targets.push({ link, target })
@@ -33,11 +81,9 @@ const initAnchors = (scope: ParentNode): void => {
     }
 
     const update = (): void => {
-      const scrollingElement = document.scrollingElement ?? document.documentElement
-
-      const atEnd = scrollingElement.scrollTop + scrollingElement.clientHeight >=
-        scrollingElement.scrollHeight - 1
-
+      const scrollingElement = ownerDocument.scrollingElement ?? ownerDocument.documentElement
+      const maximum = scrollingElement.scrollHeight - scrollingElement.clientHeight
+      const atEnd = maximum > 0 && scrollingElement.scrollTop >= maximum - 1
       const offset = Number(root.dataset.uiAnchorOffset) || 0
       let active = targets[0]?.link
 
@@ -54,27 +100,13 @@ const initAnchors = (scope: ParentNode): void => {
       if (active) setActive(active)
     }
 
-    let frame = 0
-
-    const requestUpdate = (): void => {
-      if (frame) return
-
-      frame = requestAnimationFrame(() => {
-        frame = 0
-
-        update()
-      })
-    }
-
     for (const { link } of targets) {
       link.addEventListener('click', () => {
         setActive(link)
       })
     }
 
-    window.addEventListener('resize', requestUpdate, { passive: true })
-
-    window.addEventListener('scroll', requestUpdate, { passive: true })
+    getAnchorDispatcher(ownerDocument).callbacks.set(root, update)
 
     update()
   }

package/runtime/controllers/file-upload.ts

@@ -0,0 +1,89 @@
+const renderers = new WeakMap<HTMLInputElement, () => void>()
+const resetRoots = new WeakSet<Node>()
+
+const isQueryRoot = (root: Node): root is Document | DocumentFragment | Element => (
+  'querySelectorAll' in root && typeof root.querySelectorAll === 'function'
+)
+
+const bindResets = (input: HTMLInputElement): void => {
+  const scope = input.getRootNode()
+
+  if (!isQueryRoot(scope) || resetRoots.has(scope)) return
+
+  resetRoots.add(scope)
+
+  scope.addEventListener('reset', event => {
+    // Wait for the native reset default action.
+    setTimeout(() => {
+      if (event.defaultPrevented) return
+
+      for (const current of scope.querySelectorAll<HTMLInputElement>('[data-ui-file-upload-input]')) {
+        if (current.isConnected && current.form === event.target) renderers.get(current)?.()
+      }
+    })
+  }, { capture: true })
+}
+
+export const initFileUploadControllers = (scope: ParentNode): void => {
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-file-upload]')) {
+    const input = root.querySelector<HTMLInputElement>('[data-ui-file-upload-input]')
+
+    if (!input) continue
+
+    bindResets(input)
+
+    if (root.dataset.uiBound === 'true') continue
+
+    root.dataset.uiBound = 'true'
+
+    const files = root.querySelector<HTMLElement>('[data-ui-file-upload-files]')
+
+    const renderFiles = (): void => {
+      const selectedFiles = input.files ? [...input.files] : []
+
+      root.dataset.state = selectedFiles.length > 0 ? 'selected' : 'idle'
+
+      if (!files) return
+
+      if (selectedFiles.length === 1) {
+        files.textContent = selectedFiles[0]?.name ?? ''
+      } else {
+        files.textContent = selectedFiles.length > 1 ?
+          (root.dataset.uiSelectedFilesLabel ?? '{count} files selected').replaceAll('{count}', String(selectedFiles.length)) :
+          ''
+      }
+    }
+
+    input.addEventListener('change', renderFiles)
+
+    renderers.set(input, renderFiles)
+
+    root.addEventListener('dragover', event => {
+      if (input.matches(':disabled')) return
+
+      event.preventDefault()
+
+      root.dataset.state = 'drag-over'
+    })
+
+    root.addEventListener('dragleave', event => {
+      if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return
+
+      root.dataset.state = input.files?.length ? 'selected' : 'idle'
+    })
+
+    root.addEventListener('drop', event => {
+      if (input.matches(':disabled')) return
+
+      event.preventDefault()
+
+      if (event.dataTransfer) {
+        input.files = event.dataTransfer.files
+
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+    })
+
+    renderFiles()
+  }
+}

package/runtime/controllers/image-comparison.ts

@@ -0,0 +1,53 @@
+import { formatLumenImageComparisonValue, normalizeLumenImageComparisonMode, normalizeLumenImageComparisonValue, syncLumenImageComparisonMode } from '@santi020k/lumen-core'
+
+import { bindComparisonReset } from './comparison-reset.js'
+
+const syncs = new WeakMap<HTMLInputElement, () => number>()
+
+export const initImageComparisonControllers = (scope: ParentNode): void => {
+  for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-image-comparison]')) {
+    const input = root.querySelector<HTMLInputElement>('[data-ui-image-comparison-input]')
+    const frame = root.querySelector<HTMLElement>('.ui-image-comparison__frame')
+
+    if (!input || !frame) continue
+
+    bindComparisonReset(input, syncs)
+
+    if (syncs.has(input)) continue
+
+    const update = () => {
+      syncLumenImageComparisonMode(root, normalizeLumenImageComparisonMode(root.dataset.mode))
+
+      input.disabled = root.dataset.disabled === 'true' || root.dataset.mode !== 'reveal'
+
+      const value = normalizeLumenImageComparisonValue(input.valueAsNumber)
+
+      input.value = `${value}`
+
+      input.ariaValueText = formatLumenImageComparisonValue(value, root.dataset.afterLabel ?? 'After', root.dataset.locale || root.closest('[lang]')?.getAttribute('lang') || undefined)
+
+      frame.style.setProperty('--ui-image-comparison-position', `${value}%`)
+
+      return value
+    }
+
+    input.addEventListener('input', () => {
+      if (input.disabled) return
+
+      root.dispatchEvent(new CustomEvent('ui:image-comparison-change', {
+        bubbles: true,
+        detail: { value: update() }
+      }))
+    })
+
+    input.addEventListener('change', update)
+
+    const observer = new MutationObserver(update)
+
+    observer.observe(root, { attributes: true, attributeFilter: ['data-mode', 'data-disabled'] })
+
+    syncs.set(input, update)
+
+    update()
+  }
+}