basalt-ui 1.30.2 → 1.31.0

package/src/common/use-measured-widths.ts

@@ -0,0 +1,88 @@
+import { useRef } from 'react'
+import type { MutableRefObject } from 'react'
+import { useIsomorphicLayoutEffect } from './isomorphic-layout-effect'
+
+/** One measured element's box, cached while it was still visible (a folded child is gone from the DOM). */
+export type MeasuredBox = { width: number; height: number }
+
+export interface UseMeasuredWidthsOptions {
+  /** The box to observe, resolved on each effect run. */
+  resolveRoot: () => HTMLElement | null
+  /** Change this string to drop every cached box — a folded child cannot report its unfolded width. */
+  signature: string
+  /** Skip measuring entirely (the feature is off). Default true. */
+  enabled?: boolean
+  /** Bump to re-measure on demand beyond a resize (a post-reset commit). */
+  nonce?: number
+  /** Extra descendants to observe besides the root (an inner table whose min-content can move). */
+  extra?: (root: HTMLElement) => (Element | null)[]
+  /** Read the current boxes from `root`, fill the cache, and plan — runs on every measure. */
+  onMeasure: (root: HTMLElement, boxes: MutableRefObject<Map<string, MeasuredBox>>) => void
+}
+
+export interface UseMeasuredWidthsResult {
+  boxes: MutableRefObject<Map<string, MeasuredBox>>
+  /** Re-run the measurement by hand (a web font settling changes every width without a resize). */
+  remeasure: () => void
+}
+
+/**
+ * The measured-fold core every fold planner shares: caches each measured box while it is visible,
+ * re-reads on a `ResizeObserver` of the root (plus {@link UseMeasuredWidthsOptions.extra}), and
+ * clears the cache when the {@link UseMeasuredWidthsOptions.signature} changes. The caller keeps its
+ * own element reading and pure plan function in `onMeasure`.
+ *
+ * A folded child is gone from the DOM but its cached box survives, so a resize never needs it back
+ * on screen; the caller's `onMeasure` decides which boxes to cache (e.g. skip an item that is
+ * currently folded, whose painted width is the collapsed one).
+ */
+export function useMeasuredWidths(options: UseMeasuredWidthsOptions): UseMeasuredWidthsResult {
+  const { resolveRoot, signature, enabled = true, nonce = 0, extra, onMeasure } = options
+  const boxes = useRef<Map<string, MeasuredBox>>(new Map())
+  const signatureRef = useRef(signature)
+  const remeasureRef = useRef<() => void>(() => {})
+
+  // Read through refs so a fresh closure each render does not re-run the effect.
+  const resolveRef = useRef(resolveRoot)
+  resolveRef.current = resolveRoot
+  const extraRef = useRef(extra)
+  extraRef.current = extra
+  const onMeasureRef = useRef(onMeasure)
+  onMeasureRef.current = onMeasure
+
+  useIsomorphicLayoutEffect(() => {
+    if (signatureRef.current !== signature) {
+      signatureRef.current = signature
+      boxes.current.clear()
+    }
+    if (!enabled) {
+      // A disabled/detached root leaves no `measure` to re-run — without this a stale closure over
+      // the PREVIOUS root's `onMeasure` survives on `remeasureRef` and a later `remeasure()` call
+      // (the web-font effect in `controls/actions.tsx`) would measure a root that is no longer live.
+      remeasureRef.current = () => {}
+      return
+    }
+    const root = resolveRef.current()
+    if (root === null) {
+      remeasureRef.current = () => {}
+      return
+    }
+    const measure = (): void => {
+      onMeasureRef.current(root, boxes)
+    }
+    remeasureRef.current = measure
+    if (typeof ResizeObserver === 'undefined') {
+      measure()
+      return
+    }
+    const observer = new ResizeObserver(measure)
+    observer.observe(root)
+    for (const el of extraRef.current?.(root) ?? []) {
+      if (el !== null) observer.observe(el)
+    }
+    measure()
+    return () => observer.disconnect()
+  }, [enabled, signature, nonce])
+
+  return { boxes, remeasure: () => remeasureRef.current() }
+}

package/src/common/use-media-query.ts

@@ -0,0 +1,56 @@
+/**
+ * `useMediaQuery` — the one sanctioned raw `window.matchMedia` read
+ * (`basalt/raw-breakpoint`'s `RAW_BREAKPOINT_EXEMPT_FILE`). Every other breakpoint/pointer-tier
+ * hook (`useSizeClass`, `useCoarsePointer`, the shell's own min-width dock check) is built on this
+ * one primitive instead of allocating its own `MediaQueryList`.
+ *
+ * `useSyncExternalStore`, so SSR and the hydration pass read `serverFallback` and the real match
+ * lands one commit later — never a mismatch mid-hydration. One `MediaQueryList` PER QUERY STRING,
+ * shared module-wide: `useSizeClass`'s two boundaries and a chart's coarse-pointer read resolve
+ * through the same handful of live objects rather than each allocating their own.
+ */
+import { useCallback, useSyncExternalStore } from 'react'
+
+// Keyed by the LIVE `window.matchMedia` function, not just the query string: a test that swaps in
+// its own stub (a real pattern in this repo — `provider/host.test.tsx`) gets a fresh inner cache
+// for free, rather than reading a `MediaQueryList` a previous test's stub produced.
+const cache = new WeakMap<typeof window.matchMedia, Map<string, MediaQueryList>>()
+
+function mediaQueryList(query: string): MediaQueryList | null {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return null
+  let byQuery = cache.get(window.matchMedia)
+  if (byQuery === undefined) {
+    byQuery = new Map()
+    cache.set(window.matchMedia, byQuery)
+  }
+  const cached = byQuery.get(query)
+  if (cached !== undefined) return cached
+  const list = window.matchMedia(query)
+  byQuery.set(query, list)
+  return list
+}
+
+/** A one-off, non-reactive read — for a dev-only check that runs once inside an effect/callback
+ * rather than subscribing for the component's lifetime. Prefer `useMediaQuery` for anything that
+ * should re-render on a match change. */
+export function readMediaQuery(query: string, fallback: boolean): boolean {
+  return mediaQueryList(query)?.matches ?? fallback
+}
+
+export function useMediaQuery(query: string, serverFallback: boolean): boolean {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const list = mediaQueryList(query)
+      if (list === null) return () => {}
+      list.addEventListener('change', onStoreChange)
+      return () => list.removeEventListener('change', onStoreChange)
+    },
+    [query],
+  )
+  const getSnapshot = useCallback(
+    () => mediaQueryList(query)?.matches ?? serverFallback,
+    [query, serverFallback],
+  )
+  const getServerSnapshot = useCallback(() => serverFallback, [serverFallback])
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/common/validate.ts

@@ -51,16 +51,29 @@ export function useValidateProps(
     const messages = Array.isArray(result) ? result : [result]
     for (const raw of messages) {
       if (raw === null || raw === undefined) continue
-      const key = `${component} ${raw}`
-      if (reported.has(key)) continue
-      reported.add(key)
-      console.error(raw)
+      reportOnce(component, raw)
     }
     // The deps ARE the caller's contract: this hook cannot know what `check` closes over.
     // oxlint-disable-next-line react-hooks/exhaustive-deps -- the caller owns the dep list
   }, deps)
 }
 
+/**
+ * The same once-per-`(component, message)` dev diagnostic {@link useValidateProps} logs, for a
+ * caller that already owns the effect a check would otherwise race — a decision made synchronously
+ * inside a `useLayoutEffect` (e.g. `ChartFrame`'s header-slot claim, P2-9) has no business waiting a
+ * further render for a REACTIVE check on state that effect itself just set: that state update lags
+ * one commit behind the decision, and a passive-effect check racing it warns about instances that
+ * are about to win in the very next render.
+ */
+export function reportOnce(component: string, message: string): void {
+  if (!isDev()) return
+  const key = `${component} ${message}`
+  if (reported.has(key)) return
+  reported.add(key)
+  console.error(message)
+}
+
 /** Test seam. The once-per-message Set is module state, so a suite has to be able to clear it. */
 export function resetValidatedProps(): void {
   reported.clear()

package/src/content/article-layout.module.css

@@ -17,12 +17,19 @@
   grid-template-columns: minmax(0, var(--vx-prose-measure));
 }
 
-/* The literal below MUST equal `BREAKPOINTS.article` (src/tokens/index.ts) — a `@media`
+/* The literal below MUST equal `BREAKPOINTS.article - 0.1` (src/tokens/index.ts) — a `@media`
  * condition is resolved before custom properties exist, so `max-width: var(--x)` is invalid CSS
- * and a stylesheet with a responsive rule has no choice but to write the number. The token is the
- * readable half; `article-layout.breakpoint.test.ts` asserts the two agree, the same
+ * and a stylesheet with a responsive rule has no choice but to write the number. The 0.1px offset
+ * is `tokens/size-classes.ts`' own `sizeClassMaxEm` convention (Mantine's own): the JS side
+ * (`article-layout.tsx`'s `useSizeClass() === 'expanded'`) reads a plain `min-width: 1200px`,
+ * inclusive AT 1200 — writing this query as a bare `max-width: 1200px` would ALSO be inclusive at
+ * exactly 1200px, so at that one width both conditions would fire at once: JS renders the rail,
+ * and this rule then hides it with `display: none`, leaving neither the rail nor the trigger
+ * visible. `1199.9px` makes the two conditions strict complements with no such gap. The token is
+ * the readable half; `article-layout.breakpoint.test.ts` asserts the two agree, the same
  * "literal must match the token" idiom as `styles.floor.test.ts`. Change both or neither. */
-@media (max-width: 1200px) {
+/* theme-allow raw-media-query — deliberate literal pinned to BREAKPOINTS.article, outside shell/** */
+@media (max-width: 1199.9px) {
   .root {
     grid-template-columns: minmax(0, var(--vx-prose-measure));
   }
@@ -34,6 +41,7 @@
 
 .header {
   grid-column: 1;
+  grid-row: 1;
   display: flex;
   flex-direction: column;
   gap: var(--vx-space-article-header-gap);
@@ -71,11 +79,13 @@
 
 .content {
   grid-column: 1;
+  grid-row: 2;
   min-width: 0;
 }
 
 .tocRail {
   grid-column: 2;
+  grid-row: 2;
   position: sticky;
   /* The rail sticks inside whatever scrolls it — `AppShell.Main` in a shell, the document without
    * one — and NOTHING overhangs that box: the app header and `PageBar` row 2's band are both shell
@@ -87,8 +97,39 @@
   align-self: start;
 }
 
+/* The rail's below-breakpoint replacement (docs/CONTENT-SPEC.md §7): a small sticky trigger that
+ * opens the SAME `TableOfContents` in a `Popover` instead of the rail vanishing. Rendered by JS
+ * (`useSizeClass() !== 'expanded'`), never both at once with `.tocRail` — no media query needed
+ * here, only the sticky/alignment behaviour for whenever it IS mounted. `grid-row: 2` is EXPLICIT,
+ * not left to auto-placement: `.content` also being `grid-column: 1` moves the auto-placement
+ * cursor's row on past row 2 by the time this item (also column 1) is placed, landing it in its
+ * own row BELOW the content instead of at its top — the whole point of this trigger. */
+.tocTrigger {
+  grid-column: 1;
+  grid-row: 2;
+  justify-self: end;
+  align-self: start;
+  position: sticky;
+  top: var(--vx-space-sticky-header-clearance);
+  z-index: 1;
+}
+
+.tocTriggerLabel {
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-micro);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vx-faint);
+}
+
+.tocDropdown {
+  min-width: 220px;
+  max-width: min(320px, calc(100vw - 32px));
+}
+
 .footer {
   grid-column: 1;
+  grid-row: 3;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--vx-space-article-footer-gap);

package/src/content/article-layout.module.css.d.ts

@@ -11,6 +11,9 @@ declare const classes: {
   readonly metaRow: string
   readonly content: string
   readonly tocRail: string
+  readonly tocTrigger: string
+  readonly tocTriggerLabel: string
+  readonly tocDropdown: string
   readonly footer: string
   readonly navCell: string
   readonly navCellNext: string

package/src/content/article-layout.tsx

@@ -5,8 +5,10 @@
  * `ReadingProgress`) — it does not reimplement them.
  *
  * The header/content/footer all align to the SAME grid column, so the article body reads as one
- * consistent width whether or not the TOC rail is visible (hidden below the 1200px breakpoint,
- * where the content column takes the full centered width instead).
+ * consistent width whether or not the TOC rail is visible. Below the 1200px breakpoint the rail
+ * is replaced, not dropped: a sticky "On this page" trigger opens the same `TableOfContents` in a
+ * `Popover` (docs/CONTENT-SPEC.md §7's originally-documented behavior, `useSizeClass() !==
+ * 'expanded'` — the same numeric threshold, resolved in JS instead of `@media`).
  *
  * @example
  * import { ArticleLayout } from 'basalt-ui/content'
@@ -23,8 +25,9 @@
  * </ArticleLayout>
  */
 import type { CSSProperties, ReactNode } from 'react'
-import { useRef } from 'react'
-import { ScrollArea } from '@mantine/core'
+import { useRef, useState } from 'react'
+import { Button, Popover, ScrollArea } from '@mantine/core'
+import { useSizeClass } from '../shell/use-size-class'
 import classes from './article-layout.module.css'
 import { formatArticleDate } from './article-model'
 import type { ProseDensity } from './prose'
@@ -115,6 +118,22 @@ export function ArticleLayout({
   const articleRef = useRef<HTMLDivElement>(null)
   const rootClass = [classes.root, !toc && classes.noToc, className].filter(Boolean).join(' ')
   const hasMetaRow = meta?.date !== undefined || meta?.readingTime !== undefined
+  // `useSizeClass()` is the JS-side twin of the `@media (max-width: 1200px)` rule below — both read
+  // `BREAKPOINTS.article`/`SIZE_CLASSES.expanded`, the same 1200 number (`article-layout.module.css`'s
+  // own comment). Below it the rail is replaced by a trigger, never both at once — a CSS-only swap
+  // has no hook to open a `Popover` from, so this is one of the JS reads that breakpoint doctrine
+  // reserves `useSizeClass()` for, not a second raw media query.
+  const showTocRail = useSizeClass() === 'expanded'
+  const [tocOpen, setTocOpen] = useState(false)
+  // Resizing across the breakpoint unmounts the `Popover` without closing it — `tocOpen` lives on
+  // THIS component, not the Popover, so crossing back below the breakpoint would otherwise remount
+  // it already open with no user action. Adjusted during render (React's own pattern for resetting
+  // state when a derived value changes), not an effect, so there is no open-then-close flash.
+  const prevShowTocRailRef = useRef(showTocRail)
+  if (prevShowTocRailRef.current !== showTocRail) {
+    prevShowTocRailRef.current = showTocRail
+    if (tocOpen) setTocOpen(false)
+  }
 
   return (
     <div className={rootClass} {...(style !== undefined && { style })}>
@@ -140,7 +159,7 @@ export function ArticleLayout({
         <Prose density={density}>{children}</Prose>
       </div>
 
-      {toc && (
+      {toc && showTocRail && (
         <div className={classes.tocRail}>
           <ScrollArea.Autosize mah="calc(100vh - 108px)" type="hover">
             <TableOfContents containerRef={articleRef} />
@@ -148,6 +167,42 @@ export function ArticleLayout({
         </div>
       )}
 
+      {toc &&
+        !showTocRail && (
+          // `.tocTrigger`'s `grid-row: 2` (article-layout.module.css) is EXPLICIT, matching
+          // `.content`'s own row — not left to CSS Grid's auto-placement, which used to land this
+          // in its own row below the content instead of at its top (both are `grid-column: 1`, and
+          // the auto-placement cursor moves past row 2 once `.content` claims it).
+          <Popover
+            opened={tocOpen}
+            onChange={setTocOpen}
+            onDismiss={() => setTocOpen(false)}
+            position="bottom-end"
+            withinPortal
+            shadow="md"
+            radius="sm"
+            trapFocus
+          >
+            <Popover.Target>
+              <Button
+                variant="subtle"
+                color="gray"
+                size="compact-xs"
+                className={classes.tocTrigger}
+                classNames={{ label: classes.tocTriggerLabel }}
+                onClick={() => setTocOpen((current) => !current)}
+              >
+                On this page
+              </Button>
+            </Popover.Target>
+            <Popover.Dropdown className={classes.tocDropdown}>
+              <ScrollArea.Autosize mah="calc(100vh - 108px)" type="hover">
+                <TableOfContents containerRef={articleRef} onNavigate={() => setTocOpen(false)} />
+              </ScrollArea.Autosize>
+            </Popover.Dropdown>
+          </Popover>
+        )}
+
       {(prev !== undefined || next !== undefined) && (
         <footer className={classes.footer}>
           {prev !== undefined ? (

package/src/content/code-block.module.css

@@ -56,6 +56,27 @@
   overflow-x: auto;
 }
 
+/* Trailing-edge overflow fade (docs/MATURATION-LEDGER.md) — `code-block.tsx` toggles this
+ * attribute from a scroll/resize measurement (`scrollWidth > clientWidth`, not yet at the end), so
+ * it never decorates a block that already fits and never lingers once scrolled to the end. The mask
+ * fades to TRANSPARENT, not to a solid color — what shows through is `.container`'s own translucent
+ * background, already identical to what borders the block everywhere else, so the fade reads as a
+ * soft edge rather than a hard cut. Reuses the content inset token rather than a new literal; LTR
+ * only, matching the rest of this file (no `dir` handling exists here to fade the other edge from).
+ */
+.body[data-code-overflow] {
+  mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--vx-space-code-block-content-inset-x) * 2),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--vx-space-code-block-content-inset-x) * 2),
+    transparent 100%
+  );
+}
+
 .body :global(pre.shiki) {
   margin: 0;
   padding: 0;
@@ -77,11 +98,20 @@ html[data-mantine-color-scheme='light'] .body :global(.shiki span) {
   position: absolute;
   top: var(--vx-space-code-block-floating-copy-offset);
   right: var(--vx-space-code-block-floating-copy-offset);
-  opacity: 0;
   transition: opacity 120ms ease;
 }
 
-.container:hover .floatingCopy,
+/* Hidden-until-hover only where hover exists (pointer tier, docs/DESIGN-CORE.md § Layout). */
+@media (hover: hover) and (pointer: fine) {
+  .floatingCopy {
+    opacity: 0;
+  }
+
+  .container:hover .floatingCopy {
+    opacity: 1;
+  }
+}
+
 .container:focus-within .floatingCopy {
   opacity: 1;
 }

package/src/content/code-block.tsx

@@ -13,7 +13,8 @@
  * <CodeBlock language="bash" code="bun add basalt-ui" showCopy />
  */
 import type { CSSProperties } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useIsomorphicLayoutEffect } from '../common/isomorphic-layout-effect'
 import classes from './code-block.module.css'
 import { CopyAction } from './copy-action'
 import { highlightCode } from './highlighter'
@@ -39,6 +40,10 @@ export function CodeBlock({
   // Intentionally NOT reset on every code/language change — keeping the last-good html while a
   // re-highlight is in flight avoids a flash back to plain mono on every keystroke of streamed code.
   const [html, setHtml] = useState<string | null>(null)
+  const bodyRef = useRef<HTMLElement | null>(null)
+  const setBodyRef = (node: HTMLElement | null): void => {
+    bodyRef.current = node
+  }
 
   useEffect(() => {
     if (language === undefined) return
@@ -52,6 +57,36 @@ export function CodeBlock({
     }
   }, [code, language])
 
+  // Trailing-edge overflow fade (docs/MATURATION-LEDGER.md): visible only while `.body` is
+  // actually wider than its box AND not yet scrolled to the end — never a permanent decoration on a
+  // block that already fits, never a fade implying more content once the reader reaches it. LTR
+  // only (no `dir` handling exists anywhere else in this file); a future RTL pass would fade the
+  // LEADING edge instead. `[data-code-overflow]` (not React state driving the mask itself) is the
+  // toggle the CSS module reads, so the fade never re-renders the block — only this one attribute.
+  const [showOverflowFade, setShowOverflowFade] = useState(false)
+
+  // Layout effect, not a plain effect: measuring after paint would let a code block that's
+  // already too wide on mount flash one frame with no fade before this fires. Isomorphic so an SSR
+  // render never trips React's "useLayoutEffect does nothing on the server" warning.
+  useIsomorphicLayoutEffect(() => {
+    const body = bodyRef.current
+    if (!body) return
+
+    const update = (): void => {
+      const atEnd = body.scrollLeft + body.clientWidth >= body.scrollWidth - 1
+      setShowOverflowFade(body.scrollWidth > body.clientWidth && !atEnd)
+    }
+    update()
+
+    body.addEventListener('scroll', update, { passive: true })
+    const observer = new ResizeObserver(update)
+    observer.observe(body)
+    return () => {
+      body.removeEventListener('scroll', update)
+      observer.disconnect()
+    }
+  }, [html, code])
+
   const containerClass = [classes.container, className].filter(Boolean).join(' ')
 
   return (
@@ -66,9 +101,18 @@ export function CodeBlock({
         </div>
       )}
       {html !== null ? (
-        <div className={classes.body} dangerouslySetInnerHTML={{ __html: html }} />
+        <div
+          ref={setBodyRef}
+          className={classes.body}
+          {...(showOverflowFade && { 'data-code-overflow': true })}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
       ) : (
-        <pre className={classes.body}>
+        <pre
+          ref={setBodyRef}
+          className={classes.body}
+          {...(showOverflowFade && { 'data-code-overflow': true })}
+        >
           <code>{code}</code>
         </pre>
       )}

package/src/content/prose.module.css

@@ -149,17 +149,22 @@
   display: inline-flex;
   vertical-align: middle;
   margin-left: var(--vx-space-prose-heading-anchor-gap);
-  opacity: 0;
   transition: opacity 120ms ease;
 }
 
-.root h1:hover .headingAnchor,
-.root h2:hover .headingAnchor,
-.root h3:hover .headingAnchor,
-.root h4:hover .headingAnchor,
-.root h5:hover .headingAnchor,
-.root h6:hover .headingAnchor,
-.headingAnchor:focus-within {
+/* Hidden-until-hover only where hover exists (pointer tier, docs/DESIGN-CORE.md § Layout,
+   elevation, shapes); touch shows it. Focus always reveals (the rule below outranks the hidden one). */
+@media (hover: hover) and (pointer: fine) {
+  .root :is(h1, h2, h3, h4, h5, h6) .headingAnchor {
+    opacity: 0;
+  }
+
+  .root :is(h1, h2, h3, h4, h5, h6):hover .headingAnchor {
+    opacity: 1;
+  }
+}
+
+.root :is(h1, h2, h3, h4, h5, h6) .headingAnchor:focus-within {
   opacity: 1;
 }
 

package/src/controls/actions.module.css

@@ -24,7 +24,7 @@
   padding: 0 var(--vx-space-row-inset-x);
 }
 
-@media (max-width: 47.99375em) {
+@media (pointer: coarse) {
   .menuItem,
   .customRow {
     min-height: var(--vx-space-sheet-row-height);
@@ -60,3 +60,16 @@
 
   color: var(--vx-faint);
 }
+
+/*
+ * The `Box` wrapping a joined `ControlGroup` run (`BAR_KEY_ATTR`, one level up from the group
+ * itself) so `useMeasuredFold` can measure the whole run as a single box. Without `flex: none` this
+ * wrapper is an ORDINARY flex item of the desktop row (`flex: 0 1 auto`, Mantine `Box`'s default) —
+ * exactly the shrink target the row's own fold arithmetic squeezes first, so its `offsetWidth` read
+ * back a compressed width instead of the run's real max-content width. `ControlGroup` itself
+ * already carries this on its own root (`.group`, `controls.module.css`) — this wrapper needs the
+ * same property one box further out.
+ */
+.joinBox {
+  flex: none;
+}

package/src/controls/actions.module.css.d.ts

@@ -9,5 +9,6 @@ declare const classes: {
   readonly customSlot: string
   readonly kebabIcon: string
   readonly chevronIcon: string
+  readonly joinBox: string
 }
 export default classes