@purestack/ts-components 1.1.0

package/src/standard/pageToc/pageToc.ts

@@ -0,0 +1,154 @@
+import type { PageOutlineItem, 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,
+} from 'regor'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export interface PageToc {
+  items?: PageOutlineItem[]
+  title?: string
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  classes?: ComputedRef<string>
+}
+
+const DEFAULT_PAGE_TOC_VARIANT: ComponentVariant = 'flat'
+const DEFAULT_PAGE_TOC_VARIANT_MODE: ComponentVariantMode = 'stateless'
+
+export interface PageTocItem extends PageOutlineItem {
+  href: string
+  children?: PageTocItem[]
+}
+
+const pageTocTemplate = html`<nav
+  class="page-toc"
+  :class="classes"
+  aria-label="On this page"
+>
+  <button
+    class="page-toc__panel-toggle tone-fill-button-all tone-text-button-all tone-border-button-all"
+    type="button"
+    aria-controls="doc-toc"
+    aria-expanded="false"
+  >
+    <span class="page-toc__panel-toggle-label">on this page</span>
+  </button>
+  <div class="page-toc__header-row">
+    <div class="page-toc__header">{{ title }}</div>
+    <button
+      class="page-toc__restore-toggle tone-text-button-all tone-fill-button-hover tone-fill-button-active tone-border-button-hover tone-border-button-active opacity-25 opacity-1-hover"
+      type="button"
+      title="Collapse table of contents"
+      aria-label="Collapse table of contents"
+      data-page-toc-restore
+    >
+      <span
+        class="page-toc__header-toggle-icon page-toc__header-toggle-icon--collapse p-1"
+      >
+        <Icon name="iconoir:pin-slash"/>
+      </span>
+      <span
+        class="page-toc__header-toggle-icon page-toc__header-toggle-icon--restore p-1"
+      >
+        <Icon name="iconoir:pin"/>
+      </span>
+    </button>
+  </div>
+  <ul class="page-toc__list" r-if="items.length > 0">
+    <li r-for="item in items" class="page-toc__item page-toc__item--h2">
+      <BtnLink
+        variant="link"
+        :href="item.href"
+        class="page-toc__link justify-start w-full ws-normal fw-400 fs-sm tone-fill-button-active tone-text-button-active py-1 pl-2"
+      >
+        {{ item.title }}
+      </BtnLink>
+      <ul
+        r-if="item.children && item.children.length > 0"
+        class="page-toc__list page-toc__list--nested"
+      >
+        <li
+          r-for="child in item.children"
+          class="page-toc__item page-toc__item--h3"
+        >
+          <BtnLink
+            variant="link"
+            :href="child.href"
+            class="page-toc__link page-toc__link--sub justify-start w-full ws-normal fw-200 fs-xs tone-fill-button-active tone-text-button-active py-1 pl-2"
+          >
+            {{ child.title }}
+          </BtnLink>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <div class="page-toc__empty" r-else>No sections yet.</div>
+  <script>
+    window.tsSsgPageToc?.hydrate(document.currentScript?.parentElement)
+  </script>
+</nav>`
+
+function toPageTocItems(items: PageOutlineItem[]): PageTocItem[] {
+  return items.map((item) => {
+    const { children, ...rest } = item
+    const mappedChildren = children ? toPageTocItems(children) : undefined
+    return {
+      ...rest,
+      href: `#${item.id}`,
+      ...(mappedChildren ? { children: mappedChildren } : {}),
+    }
+  })
+}
+
+function omitSingleDocumentHeading(items: PageOutlineItem[]) {
+  if (items.length !== 1) return items
+  const [item] = items
+  if (!item || item.depth !== 1) return items
+  return item.children ?? []
+}
+
+function resolveItems(props: PageToc, context: TsSsgContext | undefined) {
+  const items = props.items ?? context?.outline ?? []
+  return toPageTocItems(omitSingleDocumentHeading(items))
+}
+
+function resolveTitle(props: PageToc) {
+  return typeof props.title === 'string' && props.title.trim().length > 0
+    ? props.title.trim()
+    : 'On this page'
+}
+
+function definePageTocComponent() {
+  return defineComponent<PageToc>(pageTocTemplate, {
+    props: ['items', 'title', 'tone', 'variant', 'variantMode'],
+    context: (head) => {
+      const context = resolveTsSsgContext(head)
+      return {
+        title: resolveTitle(head.props),
+        classes: computed(() =>
+          resolveComponentClasses(head.props, {
+            defaultVariant: DEFAULT_PAGE_TOC_VARIANT,
+            defaultVariantMode: DEFAULT_PAGE_TOC_VARIANT_MODE,
+          }),
+        ),
+        items: resolveItems(head.props, context),
+      }
+    },
+  })
+}
+
+export function definePageTocComponents() {
+  const pageToc = definePageTocComponent()
+  return { pageToc }
+}

package/src/standard/pageToc/pageTocStyle.ts

@@ -0,0 +1,372 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import {
+  BREAKPOINTS,
+  docLayoutVar,
+  mediaAbove,
+  mediaBelow,
+  mediaMax,
+  styleBuilder,
+  type ThemeMode,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerPageTocStyles() {
+  themes.forEach((theme, palette) => {
+    registerPageTocShellStyles(theme, palette)
+    registerPageTocLinkStyles(theme)
+    registerPageTocTargetStyles(theme, palette)
+    registerPageTocLayoutStyles(theme, palette)
+  })
+}
+
+export function registerPageTocShellStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.page-toc', theme)
+    .display('block')
+    .marginLeft(docLayoutVar('activeShellPaddingInlineEnd'))
+    .padding('1em')
+    .borderRadius(`${palette.radii.lg} !important`)
+    .border('1px solid transparent')
+    .apply(palette.applyFont(palette.font.size.body))
+    .maxHeight(`calc(100vh - ${docLayoutVar('sidebarTop')} - 1.5625rem)`)
+    .overflowY('auto')
+    .overflowX('hidden')
+  styleBuilder
+    .select('.page-toc__header-row', theme)
+    .display('flex')
+    .alignItems('center')
+    .justifyContent('space-between')
+    .gap('0.5em')
+  styleBuilder
+    .select('.page-toc__header', theme)
+    .apply(palette.applyFont(palette.font.size.xxs, palette.font.weight.w700))
+    .textTransform('uppercase')
+    .color(palette.current.text.subtle)
+    .opacity('0.5')
+  styleBuilder
+    .select('.page-toc__restore-toggle', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .padding('0.25em')
+    .background('transparent')
+    .border('transparent')
+    .borderRadius(palette.radii.md)
+    .cursor('pointer')
+    .transition('background 160ms ease, color 160ms ease')
+    .apply(palette.applyFont(palette.font.size.xxxs))
+  styleBuilder
+    .select('.page-toc__header-toggle-icon', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+  styleBuilder
+    .select('.page-toc__header-toggle-icon--restore', theme)
+    .display('none')
+  styleBuilder
+    .select(
+      '.template-doc--toc-collapsed .page-toc__header-toggle-icon--collapse',
+      theme,
+    )
+    .display('none')
+  styleBuilder
+    .select(
+      '.template-doc--toc-collapsed .page-toc__header-toggle-icon--restore',
+      theme,
+    )
+    .display('inline-flex')
+  styleBuilder
+    .select('.page-toc__header-toggle-icon svg', theme)
+    .display('block')
+    .fill('none')
+    .stroke('currentColor')
+    .strokeWidth('1.9')
+    .strokeLinecap('round')
+    .strokeLinejoin('round')
+  styleBuilder
+    .select('.page-toc__list', theme)
+    .listStyle('none')
+    .margin('0')
+    .padding('0')
+    .display('grid')
+    .gap('0.25em')
+    .overflow('hidden')
+  styleBuilder
+    .select('.page-toc__list--nested', theme)
+    .paddingLeft('0.75em')
+    .borderLeft(`1px solid ${palette.current.border.subtle}`)
+  styleBuilder.select('.page-toc__item', theme).display('grid')
+  styleBuilder
+    .select('.page-toc__empty', theme)
+    .apply(palette.applyFont(palette.font.size.xs, palette.font.weight.w600))
+    .color(palette.current.text.subtle)
+  styleBuilder.select('.page-toc__panel-toggle', theme).display('none')
+  styleBuilder
+    .select('.page-toc__restore-toggle', theme)
+    .media(mediaMax(BREAKPOINTS.toc))
+    .display('none')
+}
+
+export function registerPageTocLinkStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.page-toc__link', theme)
+    .transition('background 160ms ease, color 160ms ease')
+
+  styleBuilder.select('.page-toc__link--sub', theme).fontWeight('500')
+}
+
+export function registerPageTocTargetStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.doc-content .page-toc__target', theme)
+    .scrollMarginTop('6rem')
+    .padding('0')
+    .borderRadius('0')
+    .transition('background 200ms ease, color 200ms ease')
+  styleBuilder
+    .select('.doc-content .page-toc__target', theme)
+    .boxShadow(`0 2px 0 0 ${palette.current.tone}`)
+}
+
+export function registerPageTocLayoutStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  registerPageTocShellGridStyles(theme)
+  registerPageTocSidebarBaseStyles(theme)
+  registerPageTocMobileOverlayStyles(theme, palette)
+  registerPageTocDesktopCollapsedStyles(theme)
+}
+
+function registerPageTocShellGridStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.doc-shell--toc', theme)
+    .gridTemplateColumns(
+      `${docLayoutVar('activeNavWidth')} minmax(0, 1fr) ${docLayoutVar('activeTocWidth')}`,
+    )
+  styleBuilder
+    .select('.doc-shell--toc-only', theme)
+    .gridTemplateColumns(`minmax(0, 1fr) ${docLayoutVar('activeTocWidth')}`)
+  styleBuilder
+    .select('.doc-shell--nav-drawer.doc-shell--toc', theme)
+    .gridTemplateColumns(`minmax(0, 1fr) ${docLayoutVar('activeTocWidth')}`)
+  styleBuilder
+    .select('.doc-shell--toc', theme)
+    .media(mediaMax(BREAKPOINTS.toc))
+    .gridTemplateColumns(`${docLayoutVar('activeNavWidth')} minmax(0, 1fr)`)
+  styleBuilder
+    .select(
+      '.doc-shell--toc-only, .doc-shell--nav-drawer.doc-shell--toc',
+      theme,
+    )
+    .media(mediaMax(BREAKPOINTS.toc))
+    .gridTemplateColumns('1fr')
+  styleBuilder
+    .select(
+      '.doc-shell--toc, .template-doc--toc-collapsed .doc-shell--toc',
+      theme,
+    )
+    .media(mediaBelow(BREAKPOINTS.lg))
+    .gridTemplateColumns('1fr !important')
+
+  styleBuilder
+    .select('.template-doc--toc-collapsed .doc-shell--toc', theme)
+    .gridTemplateColumns(`${docLayoutVar('activeNavWidth')} minmax(0, 1fr)`)
+  styleBuilder
+    .select('.template-doc--toc-collapsed .doc-shell--toc-only', theme)
+    .gridTemplateColumns('1fr')
+  styleBuilder
+    .select(
+      '.template-doc--toc-collapsed .doc-shell--nav-drawer.doc-shell--toc',
+      theme,
+    )
+    .gridTemplateColumns('1fr')
+}
+
+function registerPageTocSidebarBaseStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.doc-toc', theme)
+    .position('sticky')
+    .top(docLayoutVar('sidebarTop'))
+    .zIndex(30)
+    .alignSelf('start')
+    .maxHeight(`calc(100vh - ${docLayoutVar('sidebarTop')} - 1.5625rem)`)
+    .overflow('auto')
+    .userSelect('none')
+
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc', theme)
+    .media(mediaAbove(BREAKPOINTS.toc))
+    .overflow('visible')
+    .transformOrigin('right center')
+    .transform('translateX(0)')
+    .zIndex(30)
+  styleBuilder
+    .select(
+      '.template-doc.template-doc--nav-ready.template-doc--has-toc .doc-toc',
+      theme,
+    )
+    .transition('transform 260ms ease')
+}
+
+function registerPageTocMobileOverlayStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc', theme)
+    .media(mediaMax(BREAKPOINTS.lg))
+    .top(docLayoutVar('sidebarTopMobile'))
+    .height(`calc(100dvh - ${docLayoutVar('sidebarTopMobile')})`)
+    .maxHeight('none')
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc .page-toc', theme)
+    .media(mediaMax(BREAKPOINTS.lg))
+    .maxHeight(`calc(100dvh - ${docLayoutVar('sidebarTopMobile')})`)
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc', theme)
+    .media(mediaMax(BREAKPOINTS.toc))
+    .position('fixed')
+    .right('0')
+    .maxWidth('none')
+    .zIndex(140)
+    .overflow('hidden')
+    .background('transparent')
+    .boxShadow('none')
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc', theme)
+    .media(mediaMax(BREAKPOINTS.sm))
+    .width('100%')
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc.doc-toc--open', theme)
+    .media(mediaMax(BREAKPOINTS.toc))
+    .transform('translateX(0)')
+    .overflowY('auto')
+    .overflowX('hidden')
+    .webkitOverflowScrolling('touch')
+  styleBuilder
+    .select('.template-doc--has-toc .doc-toc:not(.doc-toc--open)', theme)
+    .media(mediaMax(BREAKPOINTS.toc))
+    .width(docLayoutVar('activeRailWidth'))
+    .right('0')
+    .left('auto')
+    .transform(`translateX(calc(100% - ${docLayoutVar('activeRailWidth')}))`)
+    .background('transparent')
+    .boxShadow('none')
+    .pointerEvents('none')
+  styleBuilder
+    .select('.template-doc--has-toc.doc-toc-open', theme)
+    .media(mediaMax(BREAKPOINTS.sm))
+    .overflow('hidden')
+
+  styleBuilder
+    .select('.template-doc--has-toc.doc-toc-open', theme)
+    .media(mediaMax(BREAKPOINTS.sm))
+    .overflow('hidden')
+
+  styleBuilder
+    .select(
+      '.template-doc--has-toc .doc-toc:not(.doc-toc--open) .page-toc',
+      theme,
+    )
+    .media(mediaMax(BREAKPOINTS.toc))
+    .background('transparent')
+    .border('none !important')
+    .boxShadow('none')
+
+  styleBuilder
+    .select('.template-doc--has-toc .page-toc__panel-toggle', theme)
+    .media(mediaMax(BREAKPOINTS.toc))
+    .position('absolute')
+    .left('0')
+    .right('auto')
+  styleBuilder
+    .select('.page-toc__panel-toggle', theme)
+    .height('7.5rem')
+    .writingMode('vertical-rl')
+    .textOrientation('mixed')
+    .width(docLayoutVar('activeRailWidth'))
+    .transform('rotate(180deg)')
+    .bottom('5rem')
+    .apply(palette.applyFont(palette.font.size.xxxs, palette.font.weight.w700))
+    .border(`1px solid ${palette.current.border.default}`)
+    .borderLeft('none')
+    .borderRadius(`0 ${palette.radii.md} ${palette.radii.md} 0`)
+    .pointerEvents('auto')
+    .zIndex(2)
+    .userSelect('none')
+    .cursor('pointer')
+    .display('flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .textTransform('uppercase')
+    .position('fixed')
+
+  styleBuilder
+    .select(
+      '.template-doc--has-toc .doc-toc:not(.doc-toc--open) .page-toc > :not(.page-toc__panel-toggle)',
+      theme,
+    )
+    .media(mediaMax(BREAKPOINTS.toc))
+    .visibility('hidden')
+  styleBuilder
+    .select(
+      '.template-doc--has-toc .doc-toc.doc-toc--open .page-toc__panel-toggle',
+      theme,
+    )
+    .display('none')
+}
+
+function registerPageTocDesktopCollapsedStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.template-doc--toc-collapsed .doc-toc', theme)
+    .media(mediaAbove(BREAKPOINTS.toc))
+    .width(docLayoutVar('activeRailWidth'))
+    .position('fixed')
+    .top(docLayoutVar('sidebarTop'))
+    .right('0')
+    .left('auto')
+    .height(`calc(100dvh - ${docLayoutVar('sidebarTop')})`)
+    .maxHeight('none')
+    .background('transparent')
+    .boxShadow('none')
+    .overflow('visible')
+    .transform(`translateX(calc(100% - ${docLayoutVar('activeRailWidth')}))`)
+    .zIndex(140)
+  styleBuilder
+    .select('.doc-toc.doc-toc--open', theme)
+    .media(mediaAbove(BREAKPOINTS.md))
+    .width(docLayoutVar('preferredTocWidth'))
+    .background('transparent')
+    .boxShadow('none')
+    .transform('translateX(0)')
+  styleBuilder
+    .select('.page-toc', theme)
+    .media(mediaBelow(BREAKPOINTS.md))
+    .marginInlineStart('0')
+    .borderRadius('0 !important')
+  styleBuilder
+    .select(
+      '.template-doc--toc-collapsed .doc-toc:not(.doc-toc--open) .page-toc__header, .template-doc--toc-collapsed .doc-toc:not(.doc-toc--open) .page-toc__restore-toggle, .template-doc--toc-collapsed .doc-toc:not(.doc-toc--open) .page-toc__list, .template-doc--toc-collapsed .doc-toc:not(.doc-toc--open) .page-toc__empty',
+      theme,
+    )
+    .media(mediaAbove(BREAKPOINTS.toc))
+    .display('none')
+  styleBuilder
+    .select(
+      '.template-doc--toc-collapsed .doc-toc:not(.doc-toc--open) .page-toc',
+      theme,
+    )
+    .width(docLayoutVar('activeRailWidth'))
+    .marginLeft('0')
+    .padding('0')
+    .background('transparent')
+    .border('none !important')
+    .borderRadius('0 !important')
+    .overflow('visible')
+}

package/src/standard/panel/panel.ts

@@ -0,0 +1,55 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+} from 'regor'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export interface Panel {
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  bodyClass?: RefOrValue<string>
+  classes?: ComputedRef<string>
+}
+
+const DEFAULT_PANEL_VARIANT: ComponentVariant = 'surface'
+const DEFAULT_PANEL_VARIANT_MODE: ComponentVariantMode = 'stateless'
+
+const panelTemplate = html`<section class="panel tone-text" :class="classes">
+  <div class="panel__body" :class="bodyClass">
+    <slot></slot>
+  </div>
+</section>`
+
+function definePanelComponent() {
+  return defineComponent<Panel>(panelTemplate, {
+    props: ['tone', 'variant', 'variantMode', 'bodyClass'],
+    context: (head) => resolvePanel(head.props),
+  })
+}
+
+export function definePanelComponents() {
+  return {
+    panel: definePanelComponent(),
+  }
+}
+
+function resolvePanel(props: Panel): Panel {
+  return {
+    ...props,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: DEFAULT_PANEL_VARIANT,
+        defaultVariantMode: DEFAULT_PANEL_VARIANT_MODE,
+      }),
+    ),
+  }
+}

package/src/standard/panel/panelStyle.ts

@@ -0,0 +1,15 @@
+import { styleBuilder, themes } from '@purestack/ts-style'
+
+export function registerPanelStyles() {
+  themes.forEach((theme, palette) => {
+    styleBuilder
+      .select('.panel', theme)
+      .display('grid')
+      .padding('1em')
+      .boxShadow(palette.effect.panelShadow)
+      .overflow('hidden')
+      .transition(
+        'border-color 180ms ease, box-shadow 180ms ease, background 180ms ease',
+      )
+  })
+}