@ash-qw/dsh-theme-prts 0.1.91

package/src/client/facility-geometry.js

@@ -0,0 +1,60 @@
+export const FACILITY_GEOMETRY = Object.freeze({
+  stroke: 1,
+  corner: 1,
+  sideDepth: 2,
+  sideOpening: 10,
+  sideInner: 6,
+  topOpening: 50,
+  topInner: 40,
+  topDepth: 10 / 3,
+})
+
+function number(value) {
+  return Number(value.toFixed(3)).toString()
+}
+
+function point(x, y) {
+  return `${number(x)} ${number(y)}`
+}
+
+export function createFacilityPath({ width, height, topNotch = false } = {}) {
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 2 || height <= FACILITY_GEOMETRY.sideOpening + 2) return ''
+
+  const halfStroke = FACILITY_GEOMETRY.stroke / 2
+  const left = halfStroke
+  const right = width - halfStroke
+  const top = halfStroke
+  const bottom = height - halfStroke
+  const centerX = width / 2
+  const centerY = height / 2
+  const points = [point(left + FACILITY_GEOMETRY.corner, top)]
+
+  if (topNotch && width >= FACILITY_GEOMETRY.topOpening + FACILITY_GEOMETRY.corner * 2 + FACILITY_GEOMETRY.stroke) {
+    points.push(
+      point(centerX - FACILITY_GEOMETRY.topOpening / 2, top),
+      point(centerX - FACILITY_GEOMETRY.topInner / 2, top + FACILITY_GEOMETRY.topDepth),
+      point(centerX + FACILITY_GEOMETRY.topInner / 2, top + FACILITY_GEOMETRY.topDepth),
+      point(centerX + FACILITY_GEOMETRY.topOpening / 2, top),
+    )
+  }
+
+  points.push(
+    point(right - FACILITY_GEOMETRY.corner, top),
+    point(right, top + FACILITY_GEOMETRY.corner),
+    point(right, centerY - FACILITY_GEOMETRY.sideOpening / 2),
+    point(right - FACILITY_GEOMETRY.sideDepth, centerY - FACILITY_GEOMETRY.sideInner / 2),
+    point(right - FACILITY_GEOMETRY.sideDepth, centerY + FACILITY_GEOMETRY.sideInner / 2),
+    point(right, centerY + FACILITY_GEOMETRY.sideOpening / 2),
+    point(right, bottom - FACILITY_GEOMETRY.corner),
+    point(right - FACILITY_GEOMETRY.corner, bottom),
+    point(left + FACILITY_GEOMETRY.corner, bottom),
+    point(left, bottom - FACILITY_GEOMETRY.corner),
+    point(left, centerY + FACILITY_GEOMETRY.sideOpening / 2),
+    point(left + FACILITY_GEOMETRY.sideDepth, centerY + FACILITY_GEOMETRY.sideInner / 2),
+    point(left + FACILITY_GEOMETRY.sideDepth, centerY - FACILITY_GEOMETRY.sideInner / 2),
+    point(left, centerY - FACILITY_GEOMETRY.sideOpening / 2),
+    point(left, top + FACILITY_GEOMETRY.corner),
+  )
+
+  return `M ${points.join(' L ')} Z`
+}

package/src/client/facility-vector.js

@@ -0,0 +1,230 @@
+import { createFacilityPath } from './facility-geometry.js'
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+const SILHOUETTE_TRACK_WIDTH = 512
+const SESSION_PICKUP_HEIGHTS = Object.freeze([5, 11, 7, 17, 11, 20, 13, 7, 15, 9, 5])
+
+const SILHOUETTE_PATHS = Object.freeze({
+  far: [
+    'M0 38V26H14V22H30V25H43V18H60V22H73V15H84V11H89V6H93V2H97V6H101V11H106V20H121V16H138V22H151V13H158V9H163V4H168V9H173V13H180V21H196V17H211V12H226V20H241V23H253V15H270V19H285V11H293V7H297V3H301V7H305V11H313V18H329V21H342V14H360V19H374V22H388V16H401V12H405V8H409V12H413V16H422V20H438V13H454V18H470V24H484V20H499V23H512V26H512V38Z',
+    'M326 19V7H329V19ZM317 7H346V9H317ZM340 9L350 16H347L337 9Z',
+    'M218 12V7H220V12ZM214 7H224V9H214Z',
+  ].join(' '),
+  near: [
+    'M0 38V32H16V29H31V33H48V26H61V31H78V28H94V34H112V30H126V32H141V25H156V29H174V33H191V27H206V31H223V34H240V29H256V26H270V32H289V30H305V34H324V27H340V31H357V29H374V34H392V30H410V26H425V31H443V33H460V28H477V31H494V27H512V32H512V38Z',
+    'M94 28V20H97V28ZM90 20H102V22H90Z',
+    'M203 27V23H219V25H205V27Z',
+    'M267 26V18H270V26ZM263 18H274V20H263Z',
+    'M418 26V21H421V26ZM414 21H425V23H414Z',
+  ].join(' '),
+})
+
+let silhouetteId = 0
+
+export const FACILITY_TEXTURES = Object.freeze(['none', 'grid', 'scanline', 'silhouette', 'pickup'])
+
+function svgNode(document, name, attributes = {}) {
+  const node = document.createElementNS(SVG_NS, name)
+  for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, value)
+  return node
+}
+
+function appendPattern(document, defs, { id, width, height, path }) {
+  const pattern = svgNode(document, 'pattern', {
+    id: `prts-facility-${id}-pattern`,
+    patternUnits: 'userSpaceOnUse',
+    width,
+    height,
+  })
+  pattern.append(svgNode(document, 'path', {
+    d: path,
+    fill: 'none',
+    stroke: '#fff',
+    'stroke-width': '1',
+    opacity: '.72',
+  }))
+  defs.append(pattern)
+
+  const mask = svgNode(document, 'mask', {
+    id: `prts-facility-${id}-mask`,
+    maskUnits: 'userSpaceOnUse',
+    x: '0',
+    y: '0',
+    width: '4096',
+    height: '4096',
+  })
+  mask.append(svgNode(document, 'rect', {
+    x: '0',
+    y: '0',
+    width: '4096',
+    height: '4096',
+    fill: `url(#prts-facility-${id}-pattern)`,
+  }))
+  defs.append(mask)
+}
+
+export function ensureFacilityTextureDefs(document) {
+  let root = document?.querySelector?.('svg[data-prts-facility-defs]')
+  if (root) return root
+  if (!document?.body) return null
+
+  root = svgNode(document, 'svg', {
+    'data-prts-facility-defs': '',
+    'data-prts-owned-facility-defs': '',
+    'aria-hidden': 'true',
+    focusable: 'false',
+    width: '0',
+    height: '0',
+  })
+  const defs = svgNode(document, 'defs')
+  appendPattern(document, defs, { id: 'grid', width: '8', height: '8', path: 'M 0 .5 H 8 M .5 0 V 8' })
+  appendPattern(document, defs, { id: 'scanline', width: '4', height: '4', path: 'M 0 .5 H 4' })
+  root.append(defs)
+  document.body.append(root)
+  return root
+}
+
+function appendSilhouetteScene(document, graphic) {
+  const clipId = `prts-facility-silhouette-clip-${++silhouetteId}`
+  const defs = svgNode(document, 'defs')
+  const clip = svgNode(document, 'clipPath', { id: clipId, clipPathUnits: 'userSpaceOnUse' })
+  clip.append(svgNode(document, 'path', { 'data-prts-facility-clip': '' }))
+  defs.append(clip)
+
+  const scene = svgNode(document, 'g', {
+    'data-prts-facility-silhouette': '',
+    'clip-path': `url(#${clipId})`,
+  })
+  for (const layer of ['far', 'near']) {
+    const track = svgNode(document, 'g', { 'data-prts-silhouette-layer': layer })
+    for (const offset of [0, SILHOUETTE_TRACK_WIDTH]) {
+      track.append(svgNode(document, 'path', {
+        d: SILHOUETTE_PATHS[layer],
+        transform: `translate(${offset} 0)`,
+      }))
+    }
+    scene.append(track)
+  }
+
+  graphic.insertBefore(defs, graphic.firstChild)
+  graphic.insertBefore(scene, graphic.querySelector('[data-prts-facility-layer="outline"]'))
+}
+
+function appendSessionPickup(document, graphic) {
+  const clipId = `prts-facility-pickup-clip-${++silhouetteId}`
+  const defs = svgNode(document, 'defs')
+  const clip = svgNode(document, 'clipPath', { id: clipId, clipPathUnits: 'userSpaceOnUse' })
+  clip.append(svgNode(document, 'path', { 'data-prts-facility-clip': '' }))
+  defs.append(clip)
+
+  const pickup = svgNode(document, 'g', {
+    'data-prts-session-pickup': '',
+    'clip-path': `url(#${clipId})`,
+  })
+  pickup.append(svgNode(document, 'line', {
+    'data-prts-session-pickup-baseline': '',
+    x1: '60%',
+    x2: '98%',
+    y1: '19',
+    y2: '19',
+  }))
+  pickup.append(svgNode(document, 'circle', {
+    'data-prts-session-pickup-indicator': '',
+    cx: '56%',
+    cy: '19',
+    r: '2.5',
+  }))
+  SESSION_PICKUP_HEIGHTS.forEach((height, index) => {
+    pickup.append(svgNode(document, 'rect', {
+      'data-prts-session-pickup-bar': '',
+      x: `${76 + index * 2.15}%`,
+      y: String((38 - height) / 2),
+      width: '1.7',
+      height: String(height),
+      rx: '.4',
+    }))
+  })
+
+  graphic.insertBefore(defs, graphic.firstChild)
+  graphic.insertBefore(pickup, graphic.querySelector('[data-prts-facility-layer="outline"]'))
+}
+
+export function ensureFacilityGraphic(document, owner, { kind, topNotch = false, texture = 'none' } = {}) {
+  if (!owner) return null
+  let graphic = owner.querySelector?.(':scope > svg[data-prts-facility-svg]')
+  if (!graphic) {
+    graphic = svgNode(document, 'svg', {
+      'data-prts-facility-svg': kind,
+      'data-prts-owned-facility-vector': '',
+      'aria-hidden': 'true',
+      focusable: 'false',
+      preserveAspectRatio: 'none',
+    })
+    for (const layer of ['surface', 'texture', 'outline']) {
+      const path = svgNode(document, 'path', { 'data-prts-facility-layer': layer })
+      if (layer === 'outline') {
+        path.setAttribute('fill', 'none')
+        path.setAttribute('stroke-width', '1')
+        path.setAttribute('stroke-linejoin', 'miter')
+        path.setAttribute('stroke-miterlimit', '2')
+        path.setAttribute('vector-effect', 'non-scaling-stroke')
+        path.setAttribute('shape-rendering', 'geometricPrecision')
+      }
+      graphic.append(path)
+    }
+    owner.insertBefore(graphic, owner.firstChild)
+  }
+  if (texture === 'silhouette' && !graphic.querySelector('[data-prts-facility-silhouette]')) appendSilhouetteScene(document, graphic)
+  if (texture === 'pickup' && !graphic.querySelector('[data-prts-session-pickup]')) appendSessionPickup(document, graphic)
+  graphic.setAttribute('data-prts-facility-svg', kind)
+  graphic.toggleAttribute('data-prts-top-notch', Boolean(topNotch))
+  if (!owner.hasAttribute('data-prts-facility-texture')) owner.setAttribute('data-prts-facility-texture', texture)
+  return graphic
+}
+
+function setReady(owner, ready) {
+  owner.toggleAttribute('data-prts-facility-vector', ready)
+  if (owner.hasAttribute('data-prts-facility-spine')) {
+    owner.parentElement?.toggleAttribute('data-prts-spine-vector', ready)
+  }
+}
+
+export function renderFacilityGraphic(owner, { width, height } = {}) {
+  const graphic = owner?.querySelector?.(':scope > svg[data-prts-facility-svg]')
+  const topNotch = graphic?.hasAttribute('data-prts-top-notch')
+  const path = createFacilityPath({ width, height, topNotch })
+  if (!graphic || !path) {
+    owner?.removeAttribute?.('data-prts-facility-size')
+    setReady(owner, false)
+    return false
+  }
+
+  const size = `${Number(width.toFixed(3))}x${Number(height.toFixed(3))}`
+  if (owner.getAttribute('data-prts-facility-size') !== size) {
+    graphic.setAttribute('viewBox', `0 0 ${Number(width.toFixed(3))} ${Number(height.toFixed(3))}`)
+    for (const layer of graphic.querySelectorAll('[data-prts-facility-layer], [data-prts-facility-clip]')) layer.setAttribute('d', path)
+    const silhouette = graphic.querySelector('[data-prts-facility-silhouette]')
+    if (silhouette) {
+      const availableHeight = Math.max(1, height - 2)
+      silhouette.setAttribute('transform', `translate(0 1) scale(1 ${Number((availableHeight / 38).toFixed(5))})`)
+    }
+    const pickup = graphic.querySelector('[data-prts-session-pickup]')
+    if (pickup) {
+      const center = Number((height / 2).toFixed(3))
+      for (const baseline of pickup.querySelectorAll('[data-prts-session-pickup-baseline]')) {
+        baseline.setAttribute('y1', String(center))
+        baseline.setAttribute('y2', String(center))
+      }
+      for (const indicator of pickup.querySelectorAll('[data-prts-session-pickup-indicator]')) {
+        indicator.setAttribute('cy', String(center))
+      }
+      for (const bar of pickup.querySelectorAll('[data-prts-session-pickup-bar]')) {
+        const barHeight = Number(bar.getAttribute('height')) || 0
+        bar.setAttribute('y', String(Number((center - barHeight / 2).toFixed(3))))
+      }
+    }
+    owner.setAttribute('data-prts-facility-size', size)
+  }
+  setReady(owner, true)
+  return true
+}

package/src/client/floating-glass-adapter.js

@@ -0,0 +1,177 @@
+const FLOATING_GLASS_OWNED_ATTRIBUTES = [
+  'data-prts-floating-glass',
+  'data-prts-floating-kind',
+  'data-prts-floating-item',
+  'data-prts-floating-input',
+  'data-prts-floating-danger',
+  'data-prts-floating-scrim',
+  'data-prts-floating-nested',
+  'data-prts-floating-preserved',
+]
+const FLOATING_GLASS_OWNED_SELECTOR = FLOATING_GLASS_OWNED_ATTRIBUTES.map(attribute => `[${attribute}]`).join(', ')
+
+const FLOATING_GLASS_POPUP_SELECTOR = [
+  '[role="menu"]',
+  '[role="listbox"]',
+  '[role="dialog"][aria-modal="true"]',
+  '[popover]',
+].join(', ')
+
+const FLOATING_GLASS_PORTAL_ROOT_SELECTOR = [
+  '[role="presentation"]',
+  '[class*="_portal_"]',
+  '[data-floating-ui-portal]',
+  '[data-radix-portal]',
+].join(', ')
+
+function markFloatingGlass(node, attribute, value = '') {
+  if (!node?.setAttribute) return
+  node.setAttribute(attribute, value)
+}
+
+function floatingClassHas(node, fragment) {
+  return [...(node?.classList ?? [])].some(token => token.includes(fragment))
+}
+
+function floatingPopupKind(node) {
+  if (node.matches('[role="dialog"]')) return 'dialog'
+  if (node.matches('[role="listbox"]')) return 'listbox'
+  if (node.matches('[role="menu"]')) return 'menu'
+  return 'popover'
+}
+
+function floatingVisible(node) {
+  return !node.hidden
+    && node.getAttribute('aria-hidden') !== 'true'
+    && node.style?.display !== 'none'
+}
+
+function floatingForeignPluginOwner(node) {
+  const owner = node.closest?.('[data-plugin]')
+  if (!owner) return null
+  const id = owner.getAttribute('data-plugin')
+  return id && id !== 'dsh-theme-prts' ? owner : null
+}
+
+function floatingHasCompleteCustomMaterial(window, node) {
+  let style
+  try {
+    style = window.getComputedStyle(node)
+  } catch {
+    return false
+  }
+  const radius = Number.parseFloat(style.borderRadius) || 0
+  const hasDepth = style.boxShadow !== 'none'
+    || style.backdropFilter !== 'none'
+    || style.webkitBackdropFilter !== 'none'
+    || style.backgroundImage !== 'none'
+  return radius >= 10 && hasDepth
+}
+
+function floatingCandidatesForBodyChild(node, body) {
+  if (node?.nodeType !== 1 || node.parentElement !== body) return []
+  if (node.matches(FLOATING_GLASS_POPUP_SELECTOR)) return [node]
+  if (!node.matches(FLOATING_GLASS_PORTAL_ROOT_SELECTOR)) return []
+  return [...node.querySelectorAll(FLOATING_GLASS_POPUP_SELECTOR)]
+}
+
+export function createFloatingGlassAdapter({ document, window }) {
+  let observer
+  const owned = new Set()
+  const classified = new WeakSet()
+
+  function own(node, attribute, value = '') {
+    markFloatingGlass(node, attribute, value)
+    owned.add(node)
+  }
+
+  function preserveThirdParty(node) {
+    if (node.closest?.('[data-prts-preserve-popup-style]')) return true
+    if (!floatingForeignPluginOwner(node) || !floatingHasCompleteCustomMaterial(window, node)) return false
+    own(node, 'data-prts-floating-preserved', 'custom')
+    return true
+  }
+
+  function classify(node) {
+    if (!floatingVisible(node) || classified.has(node)) return
+    classified.add(node)
+    if (preserveThirdParty(node)) return
+
+    const kind = floatingPopupKind(node)
+    own(node, 'data-prts-floating-glass', kind)
+    own(node, 'data-prts-floating-kind', kind)
+    if (node.parentElement?.closest?.(FLOATING_GLASS_POPUP_SELECTOR)) own(node, 'data-prts-floating-nested')
+
+    for (const item of node.querySelectorAll('[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"]')) {
+      own(item, 'data-prts-floating-item')
+      if (floatingClassHas(item, '_danger_') || item.matches('[data-variant="danger"], [data-danger="true"]')) {
+        own(item, 'data-prts-floating-danger')
+      }
+    }
+
+    if (kind === 'dialog') {
+      const scrim = node.parentElement?.matches?.('[role="presentation"]') ? node.parentElement : null
+      if (scrim) own(scrim, 'data-prts-floating-scrim')
+      for (const input of node.querySelectorAll('input, textarea, select, [contenteditable="true"]')) {
+        own(input, 'data-prts-floating-input')
+      }
+      for (const danger of node.querySelectorAll('[class*="_danger_"], [class*="_deleteAction"], [data-variant="danger"], [data-danger="true"]')) {
+        own(danger, 'data-prts-floating-danger')
+      }
+    } else {
+      for (const input of node.querySelectorAll('input, textarea, select, [contenteditable="true"]')) {
+        own(input, 'data-prts-floating-input')
+      }
+    }
+  }
+
+  function scanBodyChild(node) {
+    for (const candidate of floatingCandidatesForBodyChild(node, document.body)) classify(candidate)
+  }
+
+  function scan() {
+    for (const child of document?.body?.children ?? []) scanBodyChild(child)
+  }
+
+  function releaseTree(node) {
+    if (node?.nodeType !== 1) return
+    const candidates = [
+      node,
+      ...(node.querySelectorAll?.(FLOATING_GLASS_OWNED_SELECTOR) ?? []),
+    ]
+    for (const candidate of candidates) {
+      if (!owned.has(candidate)) continue
+      for (const attribute of FLOATING_GLASS_OWNED_ATTRIBUTES) candidate.removeAttribute?.(attribute)
+      owned.delete(candidate)
+      classified.delete(candidate)
+    }
+  }
+
+  function clear() {
+    for (const node of owned) {
+      for (const attribute of FLOATING_GLASS_OWNED_ATTRIBUTES) node.removeAttribute?.(attribute)
+    }
+    owned.clear()
+  }
+
+  return {
+    start() {
+      if (!document?.body || observer) return
+      scan()
+      const Observer = window?.MutationObserver
+      if (!Observer) return
+      observer = new Observer(records => {
+        for (const record of records) {
+          for (const node of record.removedNodes) releaseTree(node)
+          for (const node of record.addedNodes) scanBodyChild(node)
+        }
+      })
+      observer.observe(document.body, { childList: true })
+    },
+    dispose() {
+      observer?.disconnect()
+      observer = undefined
+      clear()
+    },
+  }
+}

package/src/client/host-geometry-adapter.js

@@ -0,0 +1,123 @@
+const TOP_INSET_PROPERTY = '--prts-host-top-inset'
+const RESIZE_SETTLE_DELAY = 160
+
+function finiteInset(value, viewportHeight) {
+  const next = Number(value)
+  if (!Number.isFinite(next)) return 0
+  const limit = Math.max(0, Number(viewportHeight) || 0)
+  return Math.min(Math.max(0, next), limit)
+}
+
+function cssPixels(value) {
+  const rounded = Math.round(value * 100) / 100
+  return `${Object.is(rounded, -0) ? 0 : rounded}px`
+}
+
+export function createHostGeometryAdapter({ document, window }) {
+  const root = document?.documentElement
+  let frame
+  let resizeObserver
+  let frameRequest
+  let resizeSettleTimer
+  let observedFrameHeight
+  let previousValue
+  let previousPriority
+  let started = false
+
+  function measure() {
+    if (!started || !root || !frame?.isConnected) return 0
+    const top = finiteInset(frame.getBoundingClientRect?.().top, window?.innerHeight)
+    const value = cssPixels(top)
+    if (root.style.getPropertyValue(TOP_INSET_PROPERTY) !== value) {
+      root.style.setProperty(TOP_INSET_PROPERTY, value)
+    }
+    return top
+  }
+
+  function scheduleMeasure() {
+    if (!started || frameRequest !== undefined) return
+    if (typeof window?.requestAnimationFrame !== 'function') {
+      measure()
+      return
+    }
+    frameRequest = window.requestAnimationFrame(() => {
+      frameRequest = undefined
+      measure()
+    })
+  }
+
+  function scheduleSettledMeasure() {
+    scheduleMeasure()
+  }
+
+  function onWindowResize() {
+    if (!started) return
+    if (resizeSettleTimer !== undefined) window?.clearTimeout?.(resizeSettleTimer)
+    resizeSettleTimer = window?.setTimeout?.(() => {
+      resizeSettleTimer = undefined
+      scheduleMeasure()
+    }, RESIZE_SETTLE_DELAY)
+  }
+
+  function onGeometryResize(entries = []) {
+    let shouldMeasure = false
+    for (const entry of entries) {
+      if (entry.target !== frame) continue
+      const height = Number(entry.contentRect?.height)
+      if (!Number.isFinite(height) || height <= 0) {
+        shouldMeasure = true
+      } else if (height !== observedFrameHeight) {
+        observedFrameHeight = height
+        shouldMeasure = true
+      }
+    }
+    if (shouldMeasure || !entries.length) scheduleMeasure()
+  }
+
+  function stopObservation() {
+    resizeObserver?.disconnect?.()
+    resizeObserver = undefined
+    window?.removeEventListener?.('resize', onWindowResize)
+    if (resizeSettleTimer !== undefined) window?.clearTimeout?.(resizeSettleTimer)
+    resizeSettleTimer = undefined
+    if (frameRequest !== undefined) window?.cancelAnimationFrame?.(frameRequest)
+    frameRequest = undefined
+  }
+
+  function dispose() {
+    if (!started) return
+    stopObservation()
+    if (previousValue) root.style.setProperty(TOP_INSET_PROPERTY, previousValue, previousPriority)
+    else root.style.removeProperty(TOP_INSET_PROPERTY)
+    previousValue = undefined
+    previousPriority = undefined
+    frame = undefined
+    observedFrameHeight = undefined
+    started = false
+  }
+
+  return {
+    start(nextFrame) {
+      if (!root || !nextFrame) return false
+      if (started && frame === nextFrame) {
+        scheduleSettledMeasure()
+        return true
+      }
+      if (started) dispose()
+      frame = nextFrame
+      previousValue = root.style.getPropertyValue(TOP_INSET_PROPERTY)
+      previousPriority = root.style.getPropertyPriority(TOP_INSET_PROPERTY)
+      started = true
+      measure()
+      if (typeof window?.ResizeObserver === 'function') {
+        resizeObserver = new window.ResizeObserver(onGeometryResize)
+        resizeObserver.observe(frame)
+      }
+      window?.addEventListener?.('resize', onWindowResize, { passive: true })
+      scheduleSettledMeasure()
+      return true
+    },
+    refresh: measure,
+    dispose,
+  }
+}