@purestack/ts-components 1.1.0

package/src/standard/topBar/topBar.ts

@@ -0,0 +1,101 @@
+import type { SiteLogoConfig, TsSsgContext } from '@purestack/ts-common'
+
+import { resolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export interface TopBar {
+  siteLogo: SiteLogoConfig
+  logoComponent?: RefOrValue<string>
+  resolvedLogoComponent?: ComputedRef<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  signInAvatarSrc?: RefOrValue<string>
+  signInAvatarAlt?: RefOrValue<string>
+  classes?: ComputedRef<string>
+  searchEnabled?: boolean
+  signInEnabled?: boolean
+}
+
+const DEFAULT_TOP_BAR_VARIANT: ComponentVariant = 'surfaceAlt'
+const DEFAULT_TOP_BAR_VARIANT_MODE: ComponentVariantMode = 'stateless'
+
+function resolveTopBar(context: TsSsgContext, props: TopBar): TopBar {
+  return {
+    ...props,
+    siteLogo: context.site.logo,
+    resolvedLogoComponent: computed(
+      () =>
+        unref(props.logoComponent) ?? context.site.logo.component ?? 'SiteLogo',
+    ),
+    searchEnabled: context.site.pagefind?.enabled === true,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: DEFAULT_TOP_BAR_VARIANT,
+        defaultVariantMode: DEFAULT_TOP_BAR_VARIANT_MODE,
+      }),
+    ),
+  }
+}
+
+const topBarTemplate = html`<input
+  class="doc-nav-toggle"
+  id="doc-nav-toggle"
+  type="checkbox"
+  autocomplete="off"
+  aria-hidden="true"/>
+<header class="topbar" :class="classes" r-inherit>
+  <Flex align="center">
+    <div :is="resolvedLogoComponent" class="flex-none" :config="siteLogo"></div>
+    <SearchBox
+      r-if="searchEnabled"
+      class="topbar__search flex-auto rounded-md tone-text-surface"
+      variant="none"/>
+    <Flex class="topbar__controls flex-none" align="center" justify="end">
+      <ThemeToggle/>
+      <SignIn
+        r-if="signInEnabled"
+        class="topbar__account"
+        :avatarSrc="signInAvatarSrc"
+        :avatarAlt="signInAvatarAlt"/>
+      <label
+        class="topbar__icon topbar__toggle"
+        for="doc-nav-toggle"
+        role="button"
+        aria-label="Toggle navigation"
+      ></label>
+    </Flex>
+  </Flex>
+</header>`
+
+function defineTopBarComponent() {
+  return defineComponent<TopBar>(topBarTemplate, {
+    props: [
+      'class',
+      'logoComponent',
+      'tone',
+      'variant',
+      'signInAvatarSrc',
+      'signInAvatarAlt',
+      'signInEnabled',
+      'searchEnabled',
+    ],
+    context: (head) => resolveTopBar(resolveTsSsgContext(head), head.props),
+  })
+}
+
+export function defineTopBarComponents() {
+  return { topBar: defineTopBarComponent() }
+}

package/src/standard/topBar/topBarStyle.ts

@@ -0,0 +1,169 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import {
+  BREAKPOINTS,
+  mediaBelow,
+  mediaMax,
+  mediaMin,
+  styleBuilder,
+  type ThemeMode,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerTopBarStyles() {
+  themes.forEach((theme, palette) => {
+    registerTopBarShellStyles(theme, palette)
+    registerTopBarToggleStyles(theme, palette)
+  })
+}
+
+export function getTopBarToggleVisibleSelectors(targetSelector: string) {
+  return [
+    { selector: `.template-doc--nav-drawer ${targetSelector}` },
+    {
+      selector: `.template-doc--has-nav ${targetSelector}`,
+      media: mediaBelow(BREAKPOINTS.lg),
+    },
+  ]
+}
+
+export function getTopBarToggleHiddenSelectors(targetSelector: string) {
+  return [
+    {
+      selector: `body:not(.template-doc--nav-drawer):not(.template-doc--has-nav) ${targetSelector}`,
+    },
+    {
+      selector: `.template-doc--has-nav:not(.template-doc--nav-drawer) ${targetSelector}`,
+      media: mediaMin(BREAKPOINTS.lg),
+    },
+  ]
+}
+
+export function registerTopBarShellStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.topbar', theme)
+    .padding('1rem')
+    .position('sticky')
+    .top('0')
+    .overflowX('clip')
+    .zIndex(40)
+    .backdropFilter('blur(0.625rem)')
+    .borderTopWidth('0 !important')
+    .borderRightWidth('0 !important')
+    .borderBottomWidth('1px !important')
+    .borderBottomStyle('solid !important')
+    .borderLeftWidth('0 !important')
+    .borderRadius('0 !important')
+
+  styleBuilder.select('.topbar__controls', theme).marginLeft('auto')
+  styleBuilder
+    .select('.topbar', theme)
+    .media(mediaBelow(BREAKPOINTS.sm))
+    .padding('0.75rem')
+  styleBuilder
+    .select('.topbar > .flex, .topbar__controls', theme)
+    .media(mediaBelow(BREAKPOINTS.sm))
+    .gap('0.5rem')
+  registerTopBarAccountVisibilityStyles(theme)
+
+  styleBuilder
+    .select('.topbar__icon', theme)
+    .width('2.625rem')
+    .height('2.625rem')
+    .borderRadius(palette.radii.pill)
+    .display('grid')
+    .placeItems('center')
+    .border('1px solid transparent')
+    .background('transparent')
+    .cursor('pointer')
+    .position('relative')
+    .padding('0')
+    .color(palette.current.text.subtle)
+}
+
+function registerTopBarAccountVisibilityStyles(theme: ThemeMode) {
+  styleBuilder.select('.topbar__account', theme).display('none')
+  for (const rule of getTopBarToggleHiddenSelectors('.topbar__account')) {
+    let selector = styleBuilder.select(rule.selector, theme)
+    if (rule.media) selector = selector.media(rule.media)
+    selector.display('inline-block')
+  }
+}
+
+export function registerTopBarToggleStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  registerTopBarToggleVisibilityStyles(theme, palette)
+  registerTopBarToggleGlyphStyles(theme)
+  registerTopBarToggleCheckedStateStyles(theme)
+  registerTopBarResponsiveSearchStyles(theme)
+}
+
+function registerTopBarToggleVisibilityStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.topbar__toggle', theme)
+    .background(palette.current.surface.rest.background)
+    .borderColor(palette.current.border.default)
+    .color(palette.current.text.subtle)
+    .display('none')
+  styleBuilder
+    .select('.template-doc--nav-drawer .topbar__toggle', theme)
+    .display('grid')
+  styleBuilder
+    .select('.template-doc--has-nav .topbar__toggle', theme)
+    .media(mediaBelow(BREAKPOINTS.lg))
+    .display('grid')
+  styleBuilder
+    .select('.topbar__toggle:focus-visible', theme)
+    .outline(`2px solid ${palette.current.border.focus}`)
+}
+
+function registerTopBarToggleGlyphStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.topbar__toggle::before', theme)
+    .content('""')
+    .width('1.125rem')
+    .height('0.125rem')
+    .background('currentColor')
+    .position('absolute')
+    .top('0.875rem')
+    .left('0.75rem')
+    .transition('transform 200ms ease, top 200ms ease')
+    .boxShadow('0 0.375rem 0 0 currentColor')
+  styleBuilder
+    .select('.topbar__toggle::after', theme)
+    .content('""')
+    .width('1.125rem')
+    .height('0.125rem')
+    .background('currentColor')
+    .position('absolute')
+    .top('1.625rem')
+    .left('0.75rem')
+    .transition('transform 200ms ease, top 200ms ease')
+}
+
+function registerTopBarToggleCheckedStateStyles(theme: ThemeMode) {
+  styleBuilder.select('.doc-nav-toggle', theme).display('none')
+  styleBuilder
+    .select('.doc-nav-toggle:checked ~ .topbar .topbar__toggle::before', theme)
+    .top('1.25rem')
+    .transform('rotate(45deg)')
+    .boxShadow('none')
+  styleBuilder
+    .select('.doc-nav-toggle:checked ~ .topbar .topbar__toggle::after', theme)
+    .top('1.25rem')
+    .transform('rotate(-45deg)')
+}
+
+function registerTopBarResponsiveSearchStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.topbar__search', theme)
+    .media(mediaMax(BREAKPOINTS.sm))
+    .display('none')
+}

package/src/standard/virtualList/variableVirtualTable.ts

@@ -0,0 +1,371 @@
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  observe,
+  type RefOrValue,
+  ref,
+  sref,
+  unref,
+} from 'regor'
+import type { VirtualListRow } from './virtualList'
+import type { VirtualTable } from './virtualTable'
+// known limitation: vertical scroll bar is not synced perfectly to the mouse pointer during scroll. eiter fix it or delete this component!
+export interface VariableVirtualTable extends VirtualTable {
+  estimateHeight?: RefOrValue<number | string>
+  viewportElement?: ReturnType<typeof sref<HTMLElement | null>>
+  unmounted?: () => void
+}
+
+const variableVirtualTableTemplate = html`<div
+  class="virtual-table variable-virtual-table"
+  :style="viewportStyle"
+  :ref="viewportElement"
+  @scroll="handleScroll"
+>
+  <table class="virtual-table__table" :style="tableStyle">
+    <colgroup :is="colGroupComponent" r-if="hasColGroupComponent"></colgroup>
+    <thead :is="headerComponent" r-if="hasHeaderComponent"></thead>
+    <tbody>
+      <tr class="virtual-table__spacer-row">
+        <td :style="topSpacerStyle"></td>
+      </tr>
+      <tr
+        :is="rowComponent"
+        :data-virtual-row-index="row.index"
+        :item="row.item"
+        :index="row.index"
+        r-for="row in visibleRows"
+      ></tr>
+      <tr class="virtual-table__spacer-row">
+        <td :style="bottomSpacerStyle"></td>
+      </tr>
+    </tbody>
+    <tfoot :is="footerComponent" r-if="hasFooterComponent"></tfoot>
+  </table>
+</div>`
+
+function defineVariableVirtualTableComponent() {
+  return defineComponent<VariableVirtualTable>(variableVirtualTableTemplate, {
+    props: [
+      'items',
+      'height',
+      'estimateHeight',
+      'overscan',
+      'rowComponent',
+      'colGroupComponent',
+      'headerComponent',
+      'footerComponent',
+    ],
+    context: (head) => resolveVariableVirtualTable(head),
+  })
+}
+
+export function defineVariableVirtualTableComponents() {
+  return {
+    variableVirtualTable: defineVariableVirtualTableComponent(),
+  }
+}
+
+class VariableVirtualTableContext implements VariableVirtualTable {
+  readonly items?: RefOrValue<unknown[]>
+  readonly height?: RefOrValue<number | string>
+  readonly estimateHeight?: RefOrValue<number | string>
+  readonly overscan?: RefOrValue<number | string>
+  readonly rowComponent?: RefOrValue<string>
+  readonly colGroupComponent?: RefOrValue<string>
+  readonly headerComponent?: RefOrValue<string>
+  readonly footerComponent?: RefOrValue<string>
+  readonly scrollTop = ref(0)
+  readonly viewportElement = sref<HTMLElement | null>(null)
+  readonly visibleRows: ComputedRef<VirtualListRow[]>
+  readonly viewportStyle: ComputedRef<Record<string, string>>
+  readonly tableStyle: ComputedRef<Record<string, string>>
+  readonly topSpacerStyle: ComputedRef<Record<string, string>>
+  readonly bottomSpacerStyle: ComputedRef<Record<string, string>>
+  readonly hasColGroupComponent: ComputedRef<boolean>
+  readonly hasHeaderComponent: ComputedRef<boolean>
+  readonly hasFooterComponent: ComputedRef<boolean>
+  private readonly rowHeights: number[] = []
+  private rowWindow = new Map<number, VirtualListRow>()
+  private readonly rowElements = new Map<number, HTMLElement>()
+  private rowObserver?: ResizeObserver
+  private bodyObserver?: MutationObserver
+  private readonly measurementVersion = ref(0)
+  private measuredHeightTotal = 0
+  private measuredRowCount = 0
+  private pendingFrame = 0
+  private scrollEndTimer: ReturnType<typeof setTimeout> | undefined
+  private isScrolling = false
+  private hasDeferredMeasurements = false
+  private readonly resolvedItems: ComputedRef<unknown[]>
+  private readonly resolvedHeight: ComputedRef<number>
+  private readonly resolvedEstimateHeight: ComputedRef<number>
+  private readonly resolvedOverscan: ComputedRef<number>
+  private readonly offsets: ComputedRef<number[]>
+  private readonly startIndex: ComputedRef<number>
+  private readonly firstVisibleIndex: ComputedRef<number>
+  private readonly endIndex: ComputedRef<number>
+  private readonly pendingIndexes = new Set<number>()
+
+  constructor(props: VariableVirtualTable) {
+    this.items = props.items
+    this.height = props.height
+    this.estimateHeight = props.estimateHeight
+    this.overscan = props.overscan
+    this.rowComponent = props.rowComponent
+    this.colGroupComponent = props.colGroupComponent
+    this.headerComponent = props.headerComponent
+    this.footerComponent = props.footerComponent
+    this.resolvedItems = computed(() => {
+      const value = unref(props.items)
+      return Array.isArray(value) ? value : []
+    })
+    this.resolvedHeight = computed(() =>
+      resolvePositiveNumber(props.height, 560),
+    )
+    this.resolvedEstimateHeight = computed(() =>
+      resolvePositiveNumber(props.estimateHeight ?? props.itemHeight, 56),
+    )
+    this.resolvedOverscan = computed(() =>
+      Math.trunc(resolvePositiveNumber(props.overscan, 6)),
+    )
+    this.offsets = computed(() => {
+      this.measurementVersion()
+      const source = this.resolvedItems()
+      const estimate = this.currentEstimateHeight()
+      const offsets = new Array<number>(source.length + 1)
+      offsets[0] = 0
+      for (let index = 0; index < source.length; index += 1)
+        offsets[index + 1] =
+          (offsets[index] ?? 0) + (this.rowHeights[index] ?? estimate)
+
+      return offsets
+    })
+    this.firstVisibleIndex = computed(() =>
+      findOffsetIndex(this.offsets(), this.scrollTop()),
+    )
+    this.startIndex = computed(() =>
+      Math.max(0, this.firstVisibleIndex() - this.resolvedOverscan()),
+    )
+    this.visibleRows = computed(() => this.resolveVisibleRows())
+    this.endIndex = computed(() => {
+      const rows = this.visibleRows()
+      const last = rows[rows.length - 1]
+      return last ? last.index + 1 : this.startIndex()
+    })
+    this.viewportStyle = computed<Record<string, string>>(() => ({
+      height: `${this.resolvedHeight()}px`,
+      overflow: 'auto',
+      width: '100%',
+      maxWidth: '100%',
+      boxSizing: 'border-box',
+      minWidth: '0',
+    }))
+    this.tableStyle = computed<Record<string, string>>(() => ({
+      width: 'max-content',
+      minWidth: '100%',
+      borderCollapse: 'separate',
+      borderSpacing: '0',
+    }))
+    this.topSpacerStyle = computed<Record<string, string>>(() => ({
+      height: `${this.offsets()[this.startIndex()] ?? 0}px`,
+      padding: '0',
+      border: '0',
+    }))
+    this.bottomSpacerStyle = computed<Record<string, string>>(() => {
+      const offsets = this.offsets()
+      const totalHeight = offsets[offsets.length - 1] ?? 0
+      const visibleBottom = offsets[this.endIndex()] ?? totalHeight
+      return {
+        height: `${Math.max(0, totalHeight - visibleBottom)}px`,
+        padding: '0',
+        border: '0',
+      }
+    })
+    this.hasColGroupComponent = computed(() => !!unref(props.colGroupComponent))
+    this.hasHeaderComponent = computed(() => !!unref(props.headerComponent))
+    this.hasFooterComponent = computed(() => !!unref(props.footerComponent))
+    observe(this.viewportElement, (element) => this.observeViewport(element))
+  }
+
+  handleScroll = (event: Event) => {
+    const target = event.currentTarget
+    if (!(target instanceof HTMLElement)) return
+
+    this.scrollTop(target.scrollTop)
+    this.isScrolling = true
+    if (this.scrollEndTimer !== undefined) clearTimeout(this.scrollEndTimer)
+    this.scrollEndTimer = setTimeout(() => {
+      this.scrollEndTimer = undefined
+      this.isScrolling = false
+      if (!this.hasDeferredMeasurements) return
+
+      this.hasDeferredMeasurements = false
+      this.measurementVersion(this.measurementVersion() + 1)
+    }, 120)
+  }
+
+  unmounted = () => {
+    if (this.pendingFrame) cancelAnimationFrame(this.pendingFrame)
+    if (this.scrollEndTimer !== undefined) clearTimeout(this.scrollEndTimer)
+    this.rowObserver?.disconnect()
+    this.bodyObserver?.disconnect()
+    this.rowElements.clear()
+  }
+
+  private resolveVisibleRows() {
+    const source = this.resolvedItems()
+    const offsets = this.offsets()
+    const scrollTop = this.scrollTop()
+    const overscan = this.resolvedOverscan()
+    // Keep the two boundaries on the same scroll-position snapshot.
+    const start = Math.max(0, findOffsetIndex(offsets, scrollTop) - overscan)
+    const viewportBottom = scrollTop + this.resolvedHeight()
+    let end = findOffsetIndex(offsets, viewportBottom) + overscan + 1
+    end = Math.min(source.length, Math.max(start, end))
+
+    const rows: VirtualListRow[] = []
+    const nextWindow = new Map<number, VirtualListRow>()
+    for (let index = start; index < end; index += 1) {
+      const previous = this.rowWindow.get(index)
+      const row =
+        previous && previous.item === source[index]
+          ? previous
+          : { index, item: source[index] }
+      rows.push(row)
+      nextWindow.set(index, row)
+    }
+    this.rowWindow = nextWindow
+
+    return rows
+  }
+
+  private observeViewport(element: HTMLElement | null) {
+    this.rowObserver?.disconnect()
+    this.bodyObserver?.disconnect()
+    this.rowElements.clear()
+    if (!element) return
+
+    this.rowObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const row = entry.target as HTMLElement
+        const index = Number(row.getAttribute('data-virtual-row-index'))
+        if (this.rowElements.get(index) === row) this.queueMeasurement(index)
+      }
+    })
+    this.bodyObserver = new MutationObserver(() =>
+      this.syncMountedRows(element),
+    )
+    this.bodyObserver.observe(element, { childList: true, subtree: true })
+    this.syncMountedRows(element)
+  }
+
+  private syncMountedRows(viewport: HTMLElement) {
+    const next = new Map<number, HTMLElement>()
+    for (const row of viewport.querySelectorAll<HTMLElement>(
+      ':scope > table > tbody > tr[data-virtual-row-index]',
+    )) {
+      const index = Number(row.getAttribute('data-virtual-row-index'))
+      if (Number.isInteger(index) && index >= 0) next.set(index, row)
+    }
+    for (const [index, element] of this.rowElements) {
+      if (next.get(index) !== element) {
+        this.rowObserver?.unobserve(element)
+        this.rowElements.delete(index)
+      }
+    }
+    for (const [index, element] of next) {
+      if (this.rowElements.get(index) === element) continue
+      this.rowElements.set(index, element)
+      this.rowObserver?.observe(element)
+      this.queueMeasurement(index)
+    }
+  }
+
+  private queueMeasurement(index: number) {
+    this.pendingIndexes.add(index)
+    if (this.pendingFrame) return
+
+    this.pendingFrame = requestAnimationFrame(() => {
+      this.pendingFrame = 0
+      this.flushMeasurements()
+    })
+  }
+
+  private flushMeasurements() {
+    let changed = false
+
+    for (const index of this.pendingIndexes) {
+      const element = this.rowElements.get(index)
+      if (!element) continue
+
+      const previous = this.rowHeights[index] ?? this.currentEstimateHeight()
+      const next = element.getBoundingClientRect().height
+      if (!Number.isFinite(next) || next <= 0) continue
+      if (Math.abs(previous - next) < 0.5) continue
+
+      this.updateMeasuredAverage(index, next)
+      this.rowHeights[index] = next
+      changed = true
+    }
+
+    this.pendingIndexes.clear()
+    if (!changed) return
+
+    if (this.isScrolling) {
+      this.hasDeferredMeasurements = true
+      return
+    }
+
+    this.measurementVersion(this.measurementVersion() + 1)
+  }
+
+  private currentEstimateHeight() {
+    if (this.measuredRowCount === 0) return this.resolvedEstimateHeight()
+    return this.measuredHeightTotal / this.measuredRowCount
+  }
+
+  private updateMeasuredAverage(index: number, next: number) {
+    const previous = this.rowHeights[index]
+    if (previous === undefined) {
+      this.measuredRowCount += 1
+      this.measuredHeightTotal += next
+      return
+    }
+
+    this.measuredHeightTotal += next - previous
+  }
+}
+
+function resolveVariableVirtualTable(
+  head: ComponentHead<VariableVirtualTable>,
+) {
+  head.autoProps = false
+  return new VariableVirtualTableContext(head.props)
+}
+
+function resolvePositiveNumber(
+  value: RefOrValue<number | string> | undefined,
+  fallback: number,
+) {
+  const raw = unref(value)
+  const parsed = typeof raw === 'number' ? raw : Number.parseFloat(String(raw))
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback
+}
+
+function findOffsetIndex(offsets: number[], scrollTop: number) {
+  if (offsets.length <= 1) return 0
+
+  let low = 0
+  let high = offsets.length - 1
+  while (low < high) {
+    const middle = Math.floor((low + high) / 2)
+    if ((offsets[middle] ?? 0) <= scrollTop) low = middle + 1
+    else high = middle
+  }
+
+  return Math.max(0, low - 1)
+}