@threadlabs/looma 0.28.4 → 0.28.6

package/vue/host.ts

@@ -1,8 +1,12 @@
-// Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit.
 import {
   computed,
+  createTextVNode,
+  defineComponent,
   Fragment,
   getCurrentInstance,
+  h,
+  inject,
   onBeforeUnmount,
   onBeforeUpdate,
   onMounted,
@@ -12,6 +16,7 @@ import {
   watch,
   watchEffect,
 } from 'vue'
+import type { PropType, VNode } from 'vue'
 
 interface ControllerStateAccess {
   readonly get: () => unknown
@@ -22,7 +27,10 @@ interface ControllerNamespaces {
   readonly computed: Readonly<Record<string, () => unknown>>
   readonly data?: Readonly<Record<string, () => unknown>>
   readonly acceptsState?: (name: string, keys: readonly string[], value: unknown) => boolean
-  readonly changed?: (name: string) => void
+  /** A read below a state root, by its path from the root. */
+  readonly read?: (name: string, keys: readonly string[]) => void
+  /** A write below a state root changed the value at this path from the root. */
+  readonly changed?: (name: string, keys: readonly string[]) => void
 }
 
 function controllerNamespaces(options: ControllerNamespaces, source: string): {
@@ -67,6 +75,10 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
     } else apply()
     return true
   }
+  // Each proxy's own object: a value read through host.state and written back is the same value.
+  const plain = new WeakMap<object, unknown>()
+  const unwrap = (value: unknown): unknown =>
+    typeof value === 'object' && value !== null && plain.has(value) ? plain.get(value) : value
   const wrap = (
     value: unknown,
     name: string,
@@ -85,12 +97,24 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
       : value
     if (readonly && Array.isArray(value)) surface.length = value.length
     const proxy = new Proxy(surface, {
-      get: (_target, key) => wrap(Reflect.get(value, key), name, [...keys, String(key)], readonly),
-      set: (_target, key, next) =>
-        write(name, [...keys, String(key)], next, readonly, () => {
+      get: (_target, key) => {
+        if (!readonly) options.read?.(name, [...keys, String(key)])
+        return wrap(Reflect.get(value, key), name, [...keys, String(key)], readonly)
+      },
+      set: (_target, key, written) => {
+        const next = unwrap(written)
+        return write(name, [...keys, String(key)], next, readonly, () => {
           const previous = Reflect.get(value, key)
-          if (Reflect.set(value, key, next) && !Object.is(previous, next)) options.changed?.(name)
-        }),
+          const length = Array.isArray(value) ? value.length : undefined
+          if (Reflect.set(value, key, next) && !Object.is(previous, next)) {
+            options.changed?.(name, [...keys, String(key)])
+          }
+          // Setting an index past the end extends the list before any write of its length.
+          if (length !== undefined && length !== (value as unknown[]).length && key !== 'length') {
+            options.changed?.(name, [...keys, 'length'])
+          }
+        })
+      },
       has: (_target, key) => Reflect.has(value, key),
       ownKeys: () => Reflect.ownKeys(value),
       getOwnPropertyDescriptor: (_target, key) => {
@@ -107,7 +131,9 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
       },
       deleteProperty: (_target, key) =>
         write(name, [...keys, String(key)], undefined, readonly, () => {
-          if (Reflect.has(value, key) && Reflect.deleteProperty(value, key)) options.changed?.(name)
+          if (Reflect.has(value, key) && Reflect.deleteProperty(value, key)) {
+            options.changed?.(name, [...keys, String(key)])
+          }
         }),
       defineProperty: (_target, key, descriptor) => {
         if (
@@ -118,11 +144,12 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
           return false
         }
         const changed = Reflect.defineProperty(value, key, descriptor)
-        if (changed) options.changed?.(name)
+        if (changed) options.changed?.(name, [...keys, String(key)])
         return changed
       },
     })
     paths.set(path, proxy)
+    plain.set(proxy, value)
     return proxy
   }
   const state = new Proxy({} as Record<string, unknown>, {
@@ -140,9 +167,9 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
       write(
         String(name),
         [],
-        value,
+        unwrap(value),
         typeof name !== 'string' || !Object.hasOwn(options.state, name),
-        () => options.state[String(name)]!.set(value),
+        () => options.state[String(name)]!.set(unwrap(value)),
       ),
     deleteProperty: (_target, name) => {
       warn(String(name), true)
@@ -220,6 +247,15 @@ function dataURL(
   return url.href
 }
 
+/** What the from-parameters send, as dataURL writes them: an equal key requests nothing new. */
+function dataKey(values: readonly unknown[]): string {
+  return JSON.stringify(
+    values.map((value) =>
+      value == null ? null : Array.isArray(value) ? value.map(String) : String(value)
+    ),
+  )
+}
+
 /** A Vue-owned declared read; no request is made during SSR. */
 export function useDataRead(state: { value: any }, options: DataReadOptions): void {
   let value: unknown = null
@@ -281,8 +317,13 @@ export function useDataRead(state: { value: any }, options: DataReadOptions): vo
       }
     }
   }
+  let requested: string | undefined
   const update = (sources: readonly unknown[]): void => {
     if (sources.includes(Symbol.for('html-next.invalid-result'))) return
+    // A deep watch fires on any write it reaches; only changed parameters request again.
+    const key = dataKey(sources)
+    if (connected && key === requested) return
+    requested = key
     connected = true
     cancel()
     const current = ++generation
@@ -344,6 +385,36 @@ function observeConnection(element: Element, check: () => void): () => void {
   }
 }
 
+/**
+ * Runs the root's on:connect and on:disconnect handlers each time it joins and leaves a document.
+ * Vue hooks cover mount and unmount; the shared native observer sees the root detached and
+ * reinserted outside Vue.
+ */
+export function useLifecycle(
+  root: Readable<Element | null>,
+  connect?: () => void,
+  disconnect?: () => void,
+): void {
+  let connected = false
+  let stop: (() => void) | undefined
+  const synchronize = (): void => {
+    if ((root.value?.isConnected === true) === connected) return
+    connected = !connected
+    ;(connected ? connect : disconnect)?.()
+  }
+  onMounted(() => {
+    if (root.value !== null) stop = observeConnection(root.value, synchronize)
+    synchronize()
+  })
+  onBeforeUnmount(() => {
+    stop?.()
+    if (connected) {
+      connected = false
+      disconnect?.()
+    }
+  })
+}
+
 /** Keep native focus on the corresponding control when a root-level $match replaces its element. */
 export function preserveRootFocus(root: Readable<Element | null>): void {
   const focusable =
@@ -485,7 +556,7 @@ export function useComponentHost(
     {
       type: string
       callback: (event: Event) => void | (() => void)
-      target?: Element
+      target?: Element | undefined
       cleanup?: void | (() => void)
     }
   >()
@@ -508,9 +579,11 @@ export function useComponentHost(
   const propHandles = Object.create(null) as Record<string, unknown>
   for (const name of propNames) {
     const validity = () => options.propValidity?.(name)
+    // One computed per prop: a reader of this prop does not run again when another prop changes.
+    const value = computed(() => props?.value[name])
     propHandles[name] = Object.freeze({
       get value() {
-        return props?.value[name]
+        return value.value
       },
       get inputValue() {
         return propInputs(name)
@@ -545,7 +618,7 @@ export function useComponentHost(
       data: Object.fromEntries(
         Object.entries(data).map(([name, value]) => [name, () => value.value]),
       ),
-      acceptsState: options.acceptsState,
+      ...(options.acceptsState === undefined ? {} : { acceptsState: options.acceptsState }),
     }, options.controllerSource?.definition ?? '<component>'),
     on(type: string, callback: (event: Event) => void | (() => void)): () => void {
       const entry: Subscription = { type, callback }
@@ -794,3 +867,915 @@ export function createDispatch(
     return root.value?.dispatchEvent(event) ?? true
   }
 }
+
+/**
+ * A consumer's attributes for the root. Vue sets a name that is also an object property, such as
+ * `constructor`, as a DOM property; capitalized, it stays an attribute, which HTML lowercases.
+ */
+export function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
+  const names = Object.keys(attrs)
+  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
+  return Object.fromEntries(names.map((name) => [
+    Object.hasOwn(Object.prototype, name)
+      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
+      : name,
+    attrs[name],
+  ]))
+}
+
+/** Hydrating server markup needs its root to be the element this component renders. */
+export function checkHydratedRoot(expected: string | undefined, tag: string): void {
+  const node = getCurrentInstance()?.vnode.el
+  if (
+    typeof window === 'undefined' || node == null
+    || node instanceof Element && node.localName === expected
+  ) return
+  const message = `Server markup for <${tag}> has an incompatible root.`
+  throw Object.assign(new Error(`HR005: ${message}`), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({ code: 'HR005', message }),
+  })
+}
+
+function diagnostic(code: string, message: string): Error {
+  return Object.assign(new Error(`${code}: ${message}`), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({ code, message }),
+  })
+}
+
+/** A component's context value from the ancestor that provides it; a missing provider is an error. */
+export function injectContext(tag: string, from: string, name: string): any {
+  const value = inject<any>(`html-next:${from}:${name}`)
+  if (value === undefined) {
+    throw diagnostic('HR009', `<${tag}> requires context \`${name}\` from <${from}>.`)
+  }
+  return value
+}
+
+/** Vue may return an in-progress computed value on a cyclic read; guard the public value access instead. */
+export function cycleCheckedComputed<T>(evaluate: () => T) {
+  const value = computed(evaluate)
+  let reading = false
+  return new Proxy(value, {
+    get(target, property) {
+      if (property !== 'value') return Reflect.get(target, property)
+      if (reading) throw diagnostic('HR006', 'A reactive computed value depends on itself.')
+      reading = true
+      try {
+        return target.value
+      } finally {
+        reading = false
+      }
+    },
+  })
+}
+
+/**
+ * A declared prop's reflected root attribute: the authored literal until the consumer passes the
+ * prop, then its value as text, absent for null.
+ */
+export function useReflectedProp() {
+  const instance = getCurrentInstance()
+  return (
+    name: string,
+    kebab: string,
+    value: unknown,
+    fallback: string | undefined,
+    bound: boolean,
+    separator?: string,
+  ): string | undefined => {
+    const incoming = instance?.vnode.props
+    if (
+      !bound
+      && (incoming === null || incoming === undefined
+        || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
+    ) return fallback
+    if (value === null || value === undefined) return undefined
+    return Array.isArray(value) && separator !== undefined
+      ? value.join(separator)
+      : typeof value === 'object'
+      ? JSON.stringify(value)
+      : String(value)
+  }
+}
+
+/** A scoped slot's name, which the consumer must fill with a `<template slot>` rather than plain children. */
+export function useScopedSlotName() {
+  const slots = useSlots()
+  return (value: unknown): string => {
+    const name = value == null ? '' : String(value)
+    if (slots[name] === undefined && slots.default?.().some((node) => node.props?.slot === name)) {
+      throw diagnostic(
+        'HR007',
+        'Scoped slot `' + name + '` requires a consumer <template slot="' + name + '">.',
+      )
+    }
+    return name
+  }
+}
+
+/** An inline text part that keeps its last accepted text while its value is invalid. */
+export type InlineTextSegment = {
+  readonly value: unknown
+  readonly text: string
+  readonly accepted: boolean
+}
+
+export function inlineTextSegment(
+  value: unknown,
+  accepted: boolean,
+  text: (value: any) => string,
+): InlineTextSegment {
+  return {
+    value,
+    accepted,
+    text: accepted && value !== Symbol.for('html-next.invalid-result') ? text(value) ?? '' : '',
+  }
+}
+
+export const RetainedInlineText = /* @__PURE__ */ defineComponent({
+  props: { segments: { type: Array as PropType<InlineTextSegment[]>, required: true } },
+  setup(props) {
+    const previous: string[] = []
+    return () =>
+      createTextVNode(
+        props.segments.map((segment, index) => {
+          if (
+            segment.accepted && segment.value !== Symbol.for('html-next.invalid-result')
+          ) previous[index] = segment.text
+          return previous[index] ?? ''
+        }).join(''),
+      )
+  },
+})
+
+const KeyedFailure = /* @__PURE__ */ defineComponent({
+  props: { error: { type: null, required: true } },
+  setup(props) {
+    return () => {
+      throw props.error
+    }
+  },
+})
+
+/** A keyed list that produces a duplicate key keeps its last rows and reports the error in the browser. */
+export const KeyedBoundary = /* @__PURE__ */ defineComponent({
+  setup(_props, { slots }) {
+    let last: VNode[] = []
+    return () => {
+      try {
+        last = slots.default?.() ?? []
+        return last
+      } catch (error) {
+        if (
+          !(error instanceof Error)
+          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
+        ) throw error
+        if (typeof window === 'undefined') throw error
+        return [...last, h(KeyedFailure, { error })]
+      }
+    }
+  },
+})
+
+const warned = new Set<string>()
+/** An authored value's check: false warns once per authored location. */
+export function warnUnless(accepted: boolean, location: string, message: string): boolean {
+  if (!accepted && !warned.has(location)) {
+    warned.add(location)
+    console.warn(message)
+  }
+  return accepted
+}
+
+/**
+ * A handler's checked write to a ref or through a setter. An invalid result, such as a number that
+ * is not finite, writes nothing. A value neither absent nor of the destination's type warns once for
+ * its authored write (the state `path` in `file`'s `handler`), as the live runtime does, and
+ * leaves the destination as it was.
+ */
+export function write(
+  to: { value: unknown } | ((value: any) => void),
+  value: unknown,
+  check?: (value: any) => boolean,
+  file?: string,
+  handler?: string,
+  path?: string,
+): void {
+  if (
+    value === Symbol.for('html-next.invalid-result')
+    || (typeof value === 'number' && !Number.isFinite(value))
+  ) return
+  if (check !== undefined && value !== undefined && !check(value)) {
+    warnUnless(
+      false,
+      `${file}#${handler}:${path}`,
+      `${file}: HR007: State \`${path}\` does not satisfy its declared type.`,
+    )
+  } else if (typeof to === 'function') to(value)
+  else to.value = value
+}
+
+export const isString = (value: unknown): value is string => typeof value === 'string'
+export const isNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value)
+export const isInteger = (value: unknown): value is number => Number.isInteger(value)
+export const isBoolean = (value: unknown): value is boolean => typeof value === 'boolean'
+
+export function truthy(value: unknown): boolean {
+  if (Array.isArray(value)) return value.length > 0
+  if (value instanceof Error) return true
+  if (value !== null && typeof value === 'object') {
+    if (typeof Event !== 'undefined' && 'type' in value) {
+      try {
+        Object.getOwnPropertyDescriptor(Event.prototype, 'type')!.get!.call(value)
+        return true
+      } catch { /* ordinary objects use their fields */ }
+    }
+    return Object.keys(value).length > 0
+  }
+  return Boolean(value)
+}
+
+export function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+export function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
+
+export function list(value: unknown): any[] {
+  return Array.isArray(value) ? value : []
+}
+
+export function number(value: unknown): number | undefined {
+  return typeof value === 'number' && !Number.isNaN(value) ? value : undefined
+}
+
+// A nonempty scalar call cannot produce the invalid-result sentinel.
+export type ConcatResult<T extends unknown[]> = T extends
+  [
+    string | number | boolean | null | undefined,
+    ...(string | number | boolean | null | undefined)[],
+  ] ? string | undefined
+  : string | symbol | undefined
+export function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
+  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
+  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
+}
+
+export function join(...values: unknown[]): string | symbol | undefined {
+  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result')
+  }
+  if (values.some(value => value === undefined)) return undefined
+  if (values.length !== 2) return Symbol.for('html-next.invalid-result')
+  const [items, separator] = values
+  if (!Array.isArray(items) || typeof separator !== 'string') {
+    return Symbol.for('html-next.invalid-result')
+  }
+  if (items.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result')
+  }
+  if (items.some(value => value === undefined)) return undefined
+  if (items.some(value => typeof value === 'object' && value !== null)) {
+    return Symbol.for('html-next.invalid-result')
+  }
+  if (new Set(items.filter(value => value !== null).map(value => typeof value)).size > 1) {
+    return Symbol.for('html-next.invalid-result')
+  }
+  return items.map(value => value === null ? '' : String(value)).join(separator)
+}
+
+export function math(
+  fn: string,
+  kinds: readonly string[],
+  values: readonly unknown[],
+): number | string | symbol | undefined {
+  if (values.includes(Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result')
+  }
+  if (values.some(value => value === undefined || value === null)) return undefined
+  if (
+    (fn === 'abs' || fn === 'negate') && values.length !== 1
+    || fn === 'round' && (values.length < 1 || values.length > 2)
+    || (fn === 'min' || fn === 'max') && values.length === 0
+    || fn === 'clamp' && values.length !== 3
+  ) return Symbol.for('html-next.invalid-result')
+  const kind = kinds[0]
+  const dimensional = kind === 'length' || kind === 'percentage' || kind === 'duration'
+  if (!dimensional && kind !== 'number') return Symbol.for('html-next.invalid-result')
+  let unit: string | undefined
+  const numbers: number[] = []
+  for (let index = 0; index < values.length; index++) {
+    if (kinds[index] !== kind) return Symbol.for('html-next.invalid-result')
+    const value = values[index]
+    if (!dimensional) {
+      if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return Symbol.for('html-next.invalid-result')
+      }
+      numbers.push(value)
+      continue
+    }
+    if (typeof value !== 'string') return Symbol.for('html-next.invalid-result')
+    const match =
+      /^(-?(?:\d+(?:\.\d+)?|\.\d+))(vmin|vmax|rem|px|em|vw|vh|ch|ex|cm|mm|in|pt|pc|q|ms|s|%)$/.exec(
+        value,
+      )
+    if (match === null || unit !== undefined && match[2] !== unit) {
+      return Symbol.for('html-next.invalid-result')
+    }
+    unit = match[2]
+    if (
+      (unit === '%' ? 'percentage' : unit === 'ms' || unit === 's' ? 'duration' : 'length') !== kind
+    ) return Symbol.for('html-next.invalid-result')
+    const number = Number(match[1])
+    if (!Number.isFinite(number)) return Symbol.for('html-next.invalid-result')
+    numbers.push(number)
+  }
+  let result: number
+  switch (fn) {
+    case 'abs':
+      result = Math.abs(numbers[0]!)
+      break
+    case 'negate':
+      result = -numbers[0]!
+      break
+    case 'round': {
+      const step = Math.abs(numbers[1] ?? 1)
+      if (step === 0) return Symbol.for('html-next.invalid-result')
+      result = Math.round(numbers[0]! / step) * step
+      break
+    }
+    case 'min':
+      result = Math.min(...numbers)
+      break
+    case 'max':
+      result = Math.max(...numbers)
+      break
+    case 'clamp':
+      result = Math.max(numbers[0]!, Math.min(numbers[1]!, numbers[2]!))
+      break
+    default:
+      return Symbol.for('html-next.invalid-result')
+  }
+  return !Number.isFinite(result)
+    ? Symbol.for('html-next.invalid-result')
+    : unit === undefined
+    ? result
+    : String(result) + unit
+}
+
+export function arithmetic(
+  op: string,
+  leftKind: string,
+  rightKind: string,
+  left: unknown,
+  right: unknown,
+  operate: (a: number, b: number) => number,
+): string | symbol | undefined {
+  const invalid = Symbol.for('html-next.invalid-result')
+  if (left === invalid || right === invalid) return invalid
+  if (left === null || left === undefined || right === null || right === undefined) return undefined
+  const isDimension = (kind: string): boolean =>
+    kind === 'length' || kind === 'percentage' || kind === 'duration'
+  const parse = (value: unknown, kind: string): { number: number; unit: string } | undefined => {
+    if (typeof value !== 'string' || !isDimension(kind)) return undefined
+    const match =
+      /^(-?(?:\d+(?:\.\d+)?|\.\d+))(vmin|vmax|rem|px|em|vw|vh|ch|ex|cm|mm|in|pt|pc|q|ms|s|%)$/.exec(
+        value,
+      )
+    if (match === null) return undefined
+    const unit = match[2]!
+    if (
+      (unit === '%' ? 'percentage' : unit === 'ms' || unit === 's' ? 'duration' : 'length') !== kind
+    ) return undefined
+    const number = Number(match[1])
+    return Number.isFinite(number) ? { number, unit } : undefined
+  }
+  const x = parse(left, leftKind), y = parse(right, rightKind)
+  if (isDimension(leftKind) && x === undefined || isDimension(rightKind) && y === undefined) {
+    return invalid
+  }
+  let value: number, unit: string
+  if (op === '+' || op === '-') {
+    if (x === undefined || y === undefined || leftKind !== rightKind || x.unit !== y.unit) {
+      return invalid
+    }
+    value = operate(x.number, y.number)
+    unit = x.unit
+  } else if (op === '*') {
+    const quantity = x ?? y
+    const factor = x === undefined ? left : right
+    if (
+      quantity === undefined || x !== undefined && y !== undefined || typeof factor !== 'number'
+      || !Number.isFinite(factor)
+    ) return invalid
+    value = operate(quantity.number, factor)
+    unit = quantity.unit
+  } else {
+    if (
+      op !== '/' || x === undefined || y !== undefined || typeof right !== 'number'
+      || !Number.isFinite(right) || right === 0
+    ) return invalid
+    value = operate(x.number, right)
+    unit = x.unit
+  }
+  return Number.isFinite(value) ? String(value) + unit : invalid
+}
+
+export function sortBy(items: any[], keys: readonly string[]): any[] {
+  const field = (item: any, path: string): unknown =>
+    path !== '' && item !== null && typeof item === 'object' && !Array.isArray(item)
+      ? path.split('.').reduce((value, key) => value?.[key], item)
+      : item
+  return items.slice().sort((a, b) => {
+    for (const key of keys) {
+      const descending = key.startsWith('-')
+      const path = descending ? key.slice(1) : key
+      const x = field(a, path), y = field(b, path)
+      const order = typeof x === 'number' && typeof y === 'number'
+        ? x - y
+        : text(x).localeCompare(text(y))
+      if (order !== 0) return descending ? -order : order
+    }
+    return 0
+  })
+}
+
+export function eachRows<T>(
+  items: readonly T[],
+): {
+  item: T
+  index: number
+  loop: { index: number; first: boolean; last: boolean; count: number }
+}[] {
+  return items.map((item, index) => ({
+    item,
+    index,
+    loop: { index, first: index === 0, last: index === items.length - 1, count: items.length },
+  }))
+}
+
+export function uniqueKeys<T>(
+  items: readonly T[],
+  keyOf: (
+    item: T,
+    index: number,
+    loop: { index: number; first: boolean; last: boolean; count: number },
+  ) => unknown,
+): readonly T[] {
+  const seen = new Set<unknown>()
+  for (let index = 0; index < items.length; index += 1) {
+    const key = keyOf(items[index]!, index, {
+      index,
+      first: index === 0,
+      last: index === items.length - 1,
+      count: items.length,
+    })
+    if (seen.has(key)) {
+      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
+      throw Object.assign(new Error(`HR004: ${message}`), {
+        name: 'HtmlDiagnosticError',
+        diagnostic: Object.freeze({ code: 'HR004', message }),
+      })
+    }
+    seen.add(key)
+  }
+  return items
+}
+
+/**
+ * Digits after the point in `value`'s shortest round-trip text, as `Number#toString` writes it:
+ * 2 for 1.25, 7 for 1e-7, and 0 for an integer, 1e21, NaN or Infinity. Writing that text made an
+ * addition about ten times slower (200 ns against 20 ns), so up to 22 places, where 10^places is
+ * exact, the fewest places at which `value` survives rounding stand in for it. That count is never
+ * below the text's, and differs only for a value of more than 15 significant digits, which
+ * `decimalResult` leaves as a double either way.
+ */
+export function decimalPlaces(value: number): number {
+  if (Number.isInteger(value)) return 0
+  for (let places = 1; places <= 22; places += 1) {
+    if (Math.round(value * 10 ** places) / 10 ** places === value) return places
+  }
+  const [digits, exponent] = String(value).split('e')
+  const point = digits!.indexOf('.')
+  return Math.max(0, (point < 0 ? 0 : digits!.length - point - 1) - Number(exponent ?? 0))
+}
+
+/**
+ * The double nearest the exact decimal result: `a` and `b` become integers at `left` and `right`
+ * places, `combine` joins them, and the integer is read back at `places`. Every step is exact while
+ * the operands and `result` stay below 10^15 at `places`, the 15 significant digits a double always
+ * holds; past that (or for a non-finite value, or with no places) the double `result` stands.
+ * Dividing by 10^places is exact only up to 10^22, so past 22 places a nonzero integer is read back
+ * by parsing its decimal text, which rounds exactly too. A zero divides, keeping its sign.
+ */
+export function decimalResult(
+  result: number,
+  a: number,
+  b: number,
+  left: number,
+  right: number,
+  places: number,
+  combine: (a: number, b: number) => number,
+): number {
+  if (!(places > 0 && Math.max(Math.abs(a), Math.abs(b), Math.abs(result)) * 10 ** places < 1e15)) {
+    return result
+  }
+  const integer = combine(Math.round(a * 10 ** left), Math.round(b * 10 ** right))
+  return places > 22 && integer !== 0 ? Number(`${integer}e-${places}`) : integer / 10 ** places
+}
+
+/** `a + b` at the larger operand's decimal places: `decimalAdd(0.1, 0.2)` is 0.3. */
+export function decimalAdd(a: number, b: number): number {
+  const places = Math.max(decimalPlaces(a), decimalPlaces(b))
+  return decimalResult(a + b, a, b, places, places, places, (x, y) => x + y)
+}
+
+/** `a - b` at the larger operand's decimal places: `decimalSubtract(0.3, 0.1)` is 0.2. */
+export function decimalSubtract(a: number, b: number): number {
+  const places = Math.max(decimalPlaces(a), decimalPlaces(b))
+  return decimalResult(a - b, a, b, places, places, places, (x, y) => x - y)
+}
+
+/** `a * b` at the sum of the operands' decimal places: `decimalMultiply(0.1, 0.2)` is 0.02. */
+export function decimalMultiply(a: number, b: number): number {
+  const left = decimalPlaces(a)
+  const right = decimalPlaces(b)
+  return decimalResult(a * b, a, b, left, right, left + right, (x, y) => x * y)
+}
+
+/** `a / b` at full double precision: `decimalDivide(1, 3)` is 0.3333333333333333 and `decimalDivide(1, 0)` is Infinity. */
+export function decimalDivide(a: number, b: number): number {
+  return a / b
+}
+
+/**
+ * `a % b` at the larger operand's decimal places, with the dividend's sign as JavaScript's `%`:
+ * `decimalRemainder(0.3, 0.1)` is 0, where JavaScript gives 0.09999999999999998.
+ */
+export function decimalRemainder(a: number, b: number): number {
+  const places = Math.max(decimalPlaces(a), decimalPlaces(b))
+  return decimalResult(a % b, a, b, places, places, places, (x, y) => x % y)
+}
+
+export function createFormatValue(): any {
+  // FIFO bounds native instances and retained keys; only constructor inputs, never values, are cached.
+  const cache = new Map()
+  function formatterFor(name: any, locale: any, options: any) {
+    const constructor = Reflect.get(Intl, name)
+    // There is no cheap native query for changes to the default time zone. Keep native lookup for
+    // instants without an explicit zone; civil HTML values already supply their fixed UTC anchor.
+    if (name === 'DateTimeFormat' && options.timeZone === undefined) {
+      return new constructor(locale, options)
+    }
+    const entries = []
+    for (const key of Object.keys(options).sort()) {
+      const value = options[key]
+      if (value === undefined) {
+        continue
+      }
+      // Native option coercion can observe mutable objects. Bypass caching rather than stringify
+      // them or collapse NaN/infinity into null, which would change validation and side effects.
+      if (
+        value !== null && typeof value !== 'string' && typeof value !== 'boolean'
+          && typeof value !== 'number'
+        || typeof value === 'number' && !Number.isFinite(value)
+      ) {
+        return new constructor(locale, options)
+      }
+      entries.push([key, typeof value, Object.is(value, -0) ? '-0' : value])
+    }
+    const language = locale === undefined && typeof navigator !== 'undefined'
+      ? navigator.language
+      : undefined
+    const key = JSON.stringify([name, locale, language, entries])
+    if (key.length > 4096) {
+      return new constructor(locale, options)
+    }
+    const cached = cache.get(key)
+    if (cached !== undefined && cached.constructor === constructor) {
+      return cached.value
+    }
+    const value = new constructor(locale, options)
+    if (cache.size >= 128 && !cache.has(key)) {
+      cache.delete(cache.keys().next().value)
+    }
+    cache.set(key, { constructor, value })
+    return value
+  }
+  /**
+   * The native Intl adapter. Self-contained so converters emit this same implementation only when
+   * authored expressions use formatting, without importing the live parser or interpreter.
+   * undefined is absence; the shared invalid-result symbol tells each target to retain its output.
+   */
+  return function formatValue(value: any, inputType: any, operation: any, ...args: any[]) {
+    const invalid = Symbol.for('html-next.invalid-result')
+    if (value === invalid || args.includes(invalid)) {
+      return invalid
+    }
+    if (value === undefined || value === null || args.some((arg: any) => arg === undefined)) {
+      return undefined
+    }
+    const end = operation === 'formatRange' ? args.shift() : undefined
+    if (operation === 'formatRange' && (end === null || end === undefined)) {
+      return undefined
+    }
+    const explicit = typeof args[0] === 'string'
+    const defaults = {
+      number: 'number',
+      integer: 'number',
+      percentage: 'percent',
+      date: 'date',
+      time: 'time',
+      datetime: 'dateTime',
+      'datetime-local': 'dateTime',
+      duration: 'duration',
+      list: 'list',
+    }
+    const format = explicit ? args.shift() : Reflect.get(defaults, inputType ?? '')
+    const options = args.length > 0 ? args.shift() : {}
+    const locale = args.shift()
+    if (
+      args.length > 0 || !format || options === null || typeof options !== 'object'
+      || Array.isArray(options) || locale !== undefined && typeof locale !== 'string'
+    ) {
+      return invalid
+    }
+    try {
+      const durationFields = [
+        'years',
+        'months',
+        'weeks',
+        'days',
+        'hours',
+        'minutes',
+        'seconds',
+        'milliseconds',
+        'microseconds',
+        'nanoseconds',
+      ]
+      const settings = { ...options }
+      let formatter
+      let input = value
+      let last = end
+      let zoneFree = false
+      if (['number', 'currency', 'percent', 'unit'].includes(format)) {
+        if (format !== 'number') {
+          if (settings.style !== undefined && settings.style !== format) {
+            return invalid
+          }
+          settings.style = format
+        }
+        const quantity = (candidate: any) => {
+          if (
+            inputType === 'percentage' && typeof candidate === 'string'
+            && /^-?(?:\d+(?:\.\d+)?|\.\d+)%$/.test(candidate)
+          ) {
+            return Number(candidate.slice(0, -1)) / 100
+          }
+          return candidate
+        }
+        input = quantity(input)
+        last = quantity(last)
+        if (
+          typeof input !== 'number' || !Number.isFinite(input)
+          || operation === 'formatRange' && (typeof last !== 'number' || !Number.isFinite(last))
+        ) {
+          return invalid
+        }
+        formatter = formatterFor('NumberFormat', locale, settings)
+      } else if (['date', 'time', 'dateTime'].includes(format)) {
+        const civil = inputType === 'date' || inputType === 'time' || inputType === 'datetime-local'
+          || typeof input === 'string' && !/(?:Z|[+-]\d\d:\d\d)$/.test(input)
+        zoneFree = civil
+        if (civil && (settings.timeZone !== undefined || settings.timeZoneName !== undefined)) {
+          return invalid
+        }
+        if (
+          format === 'date'
+            && (settings.timeStyle !== undefined
+              || ['hour', 'minute', 'second', 'dayPeriod', 'fractionalSecondDigits'].some((
+                key: any,
+              ) => settings[key] !== undefined))
+          || format === 'time'
+            && (settings.dateStyle !== undefined
+              || ['year', 'month', 'day', 'weekday', 'era'].some((key: any) =>
+                settings[key] !== undefined
+              ))
+        ) {
+          return invalid
+        }
+        const fields = [
+          'year',
+          'month',
+          'day',
+          'weekday',
+          'era',
+          'hour',
+          'minute',
+          'second',
+          'dayPeriod',
+          'fractionalSecondDigits',
+        ]
+        if (
+          settings.dateStyle === undefined && settings.timeStyle === undefined
+          && !fields.some((key: any) => settings[key] !== undefined)
+        ) {
+          if (format !== 'time') {
+            settings.dateStyle = 'medium'
+          }
+          if (format !== 'date') {
+            settings.timeStyle = 'medium'
+          }
+        }
+        if (civil) {
+          settings.timeZone = 'UTC'
+        }
+        const asDate = (candidate: any) => {
+          if (typeof candidate === 'number' && Number.isFinite(candidate)) {
+            return new Date(candidate)
+          }
+          if (typeof candidate !== 'string') {
+            return undefined
+          }
+          let written = candidate.replace(' ', 'T')
+          if (/^\d\d:\d\d(?::\d\d(?:\.\d{1,3})?)?$/.test(written)) {
+            if (format !== 'time') {
+              return undefined
+            }
+            written = '1970-01-01T' + written + 'Z'
+          } else if (/^\d{4,}-\d\d-\d\d$/.test(written)) {
+            if (format !== 'date') {
+              return undefined
+            }
+            written += 'T00:00:00Z'
+          } else if (/^\d{4,}-\d\d-\d\dT\d\d:\d\d(?::\d\d(?:\.\d{1,3})?)?$/.test(written)) {
+            written += 'Z'
+          } else if (
+            !/^\d{4,}-\d\d-\d\dT\d\d:\d\d(?::\d\d(?:\.\d{1,3})?)?(?:Z|[+-]\d\d:\d\d)$/.test(written)
+          ) {
+            return undefined
+          }
+          const date = new Date(
+            written.replace(/^(\d{5,})-/, (_match: any, year: any) =>
+              '+' + year.padStart(6, '0') + '-'),
+          )
+          if (!Number.isFinite(date.getTime())) {
+            return undefined
+          }
+          // Native Date normalizes invalid days; authored HTML dates must not roll into another day.
+          const match = /^(\d{4,})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d))?/.exec(written)
+          if (!match) {
+            return undefined
+          }
+          const probe = new Date(0)
+          probe.setUTCFullYear(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+          if (
+            Number(match[1]) === 0 || probe.getUTCMonth() !== Number(match[2]) - 1
+            || probe.getUTCDate() !== Number(match[3]) || Number(match[4]) > 23
+            || Number(match[5]) > 59 || Number(match[6] ?? 0) > 59
+          ) {
+            return undefined
+          }
+          return date
+        }
+        input = asDate(input)
+        last = operation === 'formatRange' ? asDate(last) : undefined
+        if (!input || operation === 'formatRange' && !last) {
+          return invalid
+        }
+        formatter = formatterFor('DateTimeFormat', locale, settings)
+      } else {
+        if (operation === 'formatRange') {
+          return invalid
+        }
+        if (format === 'relativeTime') {
+          if (
+            typeof input !== 'number' || !Number.isFinite(input)
+            || typeof settings.unit !== 'string'
+          ) {
+            return invalid
+          }
+          const unit = settings.unit
+          delete settings.unit
+          formatter = formatterFor('RelativeTimeFormat', locale, settings)
+          return operation === 'formatParts'
+            ? formatter.formatToParts(input, unit)
+            : formatter.format(input, unit)
+        }
+        if (format === 'list') {
+          if (!Array.isArray(input) || input.some((item: any) => typeof item !== 'string')) {
+            return invalid
+          }
+          formatter = formatterFor('ListFormat', locale, settings)
+        } else if (format === 'duration') {
+          if (inputType === 'duration' && typeof input === 'string') {
+            const match = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(ms|s)$/.exec(input)
+            if (!match) {
+              return invalid
+            }
+            const milliseconds = Number(match[1]) * (match[2] === 's' ? 1000 : 1)
+            if (!Number.isFinite(milliseconds)) {
+              return invalid
+            }
+            const hours = Math.trunc(milliseconds / 3600000)
+            const minutes = Math.trunc((milliseconds % 3600000) / 60000)
+            const seconds = Math.trunc((milliseconds % 60000) / 1000)
+            input = {
+              hours,
+              minutes,
+              seconds,
+              milliseconds: Math.trunc(milliseconds % 1000),
+              microseconds: Math.trunc((milliseconds - Math.trunc(milliseconds)) * 1000),
+              nanoseconds: Math.round(
+                (milliseconds * 1000 - Math.trunc(milliseconds * 1000)) * 1000,
+              ),
+            }
+          }
+          if (
+            input === null || typeof input !== 'object' || Array.isArray(input)
+            || Object.keys(input).some((key: any) => !durationFields.includes(key))
+          ) {
+            return invalid
+          }
+          const DurationFormat = Reflect.get(Intl, 'DurationFormat')
+          if (!DurationFormat) {
+            return invalid
+          }
+          formatter = formatterFor('DurationFormat', locale, settings)
+        } else if (format === 'displayName') {
+          if (typeof input !== 'string' || operation === 'formatParts') {
+            return invalid
+          }
+          return formatterFor('DisplayNames', locale, settings).of(input)
+        } else if (format === 'plural') {
+          if (typeof input !== 'number' || !Number.isFinite(input) || operation === 'formatParts') {
+            return invalid
+          }
+          const forms = settings.forms
+          if (
+            !forms || typeof forms !== 'object' || Array.isArray(forms)
+            || typeof forms.other !== 'string' || Object.entries(forms).some(([key, entry]: any) =>
+              !['zero', 'one', 'two', 'few', 'many', 'other'].includes(key)
+              || typeof entry !== 'string'
+            )
+          ) {
+            return invalid
+          }
+          delete settings.forms
+          const category = formatterFor('PluralRules', locale, settings).select(input)
+          const message = forms[category] ?? forms.other
+          const numberOptions = { ...settings }
+          delete numberOptions.type
+          delete numberOptions.forms
+          const number = formatterFor('NumberFormat', locale, numberOptions).format(input)
+          return message.replace(/#/g, () => number)
+        }
+      }
+      if (!zoneFree && operation !== 'formatParts') {
+        return operation === 'formatRange'
+          ? formatter.formatRange(input, last)
+          : formatter.format(input)
+      }
+      const parts = operation === 'formatRange'
+        ? formatter.formatRangeToParts(input, last)
+        : formatter.formatToParts(input)
+      if (
+        zoneFree && operation !== 'formatParts'
+        && !parts.some((part: any) => part.type === 'timeZoneName')
+      ) {
+        return operation === 'formatRange'
+          ? formatter.formatRange(input, last)
+          : formatter.format(input)
+      }
+      const visible = zoneFree
+        ? parts.filter((part: any, index: any) =>
+          part.type !== 'timeZoneName'
+          && !(part.type === 'literal' && /^[\s(),]*$/.test(part.value)
+            && (parts[index - 1]?.type === 'timeZoneName'
+              || parts[index + 1]?.type === 'timeZoneName'))
+        )
+        : parts
+      return operation === 'formatParts' ? visible : visible.map((part: any) => part.value).join('')
+    } catch {
+      return invalid
+    }
+  }
+}
+
+export const formatValue = /* @__PURE__ */ createFormatValue()