@brett_lamy/docstream 1.11.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "publishConfig": {
     "access": "public"

package/src/strudel/RackGrid.tsx

@@ -0,0 +1,231 @@
+/* A masonry grid of modules you can rearrange and resize. Columns follow the container's width; every module spans
+   some of them and as many 8px rows as its content (or the height you dragged it to) needs, and `dense` flow packs
+   the gaps. Drag a module's grip to move it (others reflow under the pointer); drag its corner to resize. Both
+   handles are keyboard-operable: arrows move or resize, Home/End move to the ends. */
+import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react"
+
+export interface GridItem {
+  key: string
+  label: string
+  node: ReactNode
+  /** Default width in twelfths of the grid (12 = full width). */
+  span?: number
+}
+
+export interface GridLayout {
+  order: string[]
+  /** Width in twelfths, and an optional minimum height in px, per item key. */
+  sizes: Record<string, { w: number; h?: number }>
+}
+
+export interface RackGridProps {
+  items: GridItem[]
+  layout: GridLayout
+  onLayoutChange: (layout: GridLayout) => void
+}
+
+const ROW = 8
+const GAP = 10
+
+/** Items in layout order: known keys first, new ones appended. */
+function ordered(items: GridItem[], order: string[]): GridItem[] {
+  const byKey = new Map(items.map((i) => [i.key, i]))
+  const out = order.map((k) => byKey.get(k)).filter((i): i is GridItem => !!i)
+  for (const i of items) if (!order.includes(i.key)) out.push(i)
+  return out
+}
+
+export function RackGrid({ items, layout, onLayoutChange }: RackGridProps) {
+  const gridRef = useRef<HTMLDivElement>(null)
+  const [cols, setCols] = useState(12)
+  const [heights, setHeights] = useState<Record<string, number>>({})
+  const [dragging, setDragging] = useState<string | null>(null)
+  const drag = useRef<{ key: string; dx: number; dy: number; x: number; y: number } | null>(null)
+  const elements = useRef(new Map<string, HTMLDivElement>())
+  const list = ordered(items, layout.order)
+  const keys = list.map((i) => i.key)
+  const layoutRef = useRef(layout)
+  layoutRef.current = layout
+
+  // Columns: one per ~84px of width, at most 12 — spans are stored in twelfths and scaled.
+  useLayoutEffect(() => {
+    const grid = gridRef.current
+    if (!grid) return
+    const measure = () => setCols(Math.max(2, Math.min(12, Math.floor((grid.clientWidth + GAP) / 84))))
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(grid)
+    return () => ro.disconnect()
+  }, [])
+
+  // Masonry: each module spans as many rows as its content is tall.
+  useEffect(() => {
+    const ro = new ResizeObserver((entries) => {
+      setHeights((prev) => {
+        let next = prev
+        for (const e of entries) {
+          const key = (e.target as HTMLElement).dataset.content!
+          const h = Math.ceil((e.target as HTMLElement).offsetHeight)
+          if (prev[key] !== h) next = { ...next, [key]: h }
+        }
+        return next
+      })
+    })
+    elements.current.forEach((el) => {
+      const content = el.querySelector<HTMLElement>("[data-content]")
+      if (content) ro.observe(content)
+    })
+    return () => ro.disconnect()
+  }, [keys.join("|")])
+
+  const span = (item: GridItem) => {
+    const w = layout.sizes[item.key]?.w ?? item.span ?? 6
+    return Math.max(1, Math.min(cols, Math.round((w / 12) * cols)))
+  }
+  const rows = (item: GridItem) => {
+    const h = Math.max(heights[item.key] ?? 120, layout.sizes[item.key]?.h ?? 0)
+    return Math.ceil((h + GAP) / (ROW + GAP))
+  }
+  const setSize = (key: string, size: { w?: number; h?: number }) => {
+    const cur = layoutRef.current
+    onLayoutChange({ order: keys, sizes: { ...cur.sizes, [key]: { ...cur.sizes[key], w: cur.sizes[key]?.w ?? 6, ...size } } })
+  }
+  const move = (key: string, to: number) => {
+    const from = keys.indexOf(key)
+    const next = keys.filter((k) => k !== key)
+    next.splice(Math.max(0, Math.min(next.length, to)), 0, key)
+    if (from !== next.indexOf(key)) onLayoutChange({ ...layoutRef.current, order: next })
+  }
+
+  // Moving: the module follows the pointer; hovering another module takes its place.
+  const place = (key: string, x: number, y: number) => {
+    const el = elements.current.get(key)
+    const grid = gridRef.current
+    const d = drag.current
+    if (!el || !grid || !d) return
+    const box = grid.getBoundingClientRect()
+    el.style.transform = `translate(${x - d.dx - box.left - el.offsetLeft}px, ${y - d.dy - box.top - el.offsetTop}px)`
+  }
+  const onGripDown = (key: string) => (e: PointerEvent<HTMLElement>) => {
+    if (e.button !== 0) return
+    const el = elements.current.get(key)!
+    const r = el.getBoundingClientRect()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    drag.current = { key, dx: e.clientX - r.left, dy: e.clientY - r.top, x: e.clientX, y: e.clientY }
+    setDragging(key)
+  }
+  const onGripMove = (e: PointerEvent<HTMLElement>) => {
+    const d = drag.current
+    if (!d) return
+    d.x = e.clientX
+    d.y = e.clientY
+    place(d.key, e.clientX, e.clientY)
+    const dragged = elements.current.get(d.key)!
+    dragged.style.pointerEvents = "none"
+    const under = document.elementFromPoint(e.clientX, e.clientY)?.closest<HTMLElement>("[data-grid-key]")
+    dragged.style.pointerEvents = ""
+    const target = under?.dataset.gridKey
+    if (target && target !== d.key) move(d.key, keys.indexOf(target))
+  }
+  const onGripUp = () => {
+    const d = drag.current
+    if (!d) return
+    const el = elements.current.get(d.key)
+    if (el) el.style.transform = ""
+    drag.current = null
+    setDragging(null)
+  }
+  // After a reorder the module's slot moved: keep it under the pointer.
+  useLayoutEffect(() => {
+    const d = drag.current
+    if (d) place(d.key, d.x, d.y)
+  })
+
+  const onGripKey = (key: string) => (e: KeyboardEvent<HTMLElement>) => {
+    const i = keys.indexOf(key)
+    const to = { ArrowLeft: i - 1, ArrowUp: i - 1, ArrowRight: i + 1, ArrowDown: i + 1, Home: 0, End: keys.length - 1 }[e.key]
+    if (to === undefined) return
+    e.preventDefault()
+    move(key, to)
+  }
+
+  // Resizing: the corner sets the width in columns and a minimum height.
+  const resize = useRef<{ key: string; left: number; top: number } | null>(null)
+  const onCornerDown = (key: string) => (e: PointerEvent<HTMLElement>) => {
+    const r = elements.current.get(key)!.getBoundingClientRect()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    resize.current = { key, left: r.left, top: r.top }
+  }
+  const onCornerMove = (e: PointerEvent<HTMLElement>) => {
+    const r = resize.current
+    const grid = gridRef.current
+    if (!r || !grid) return
+    const colWidth = (grid.clientWidth - GAP * (cols - 1)) / cols
+    const c = Math.max(1, Math.min(cols, Math.round((e.clientX - r.left + GAP) / (colWidth + GAP))))
+    setSize(r.key, { w: Math.round((c / cols) * 12 * 100) / 100, h: Math.max(60, Math.round(e.clientY - r.top)) })
+  }
+  const onCornerUp = () => {
+    resize.current = null
+  }
+  const onCornerKey = (item: GridItem) => (e: KeyboardEvent<HTMLElement>) => {
+    const w = layout.sizes[item.key]?.w ?? item.span ?? 6
+    const h = layout.sizes[item.key]?.h ?? heights[item.key] ?? 120
+    const step = 12 / cols
+    const next = {
+      ArrowRight: { w: Math.min(12, w + step) },
+      ArrowLeft: { w: Math.max(step, w - step) },
+      ArrowDown: { h: h + 24 },
+      ArrowUp: { h: Math.max(0, h - 24) },
+    }[e.key]
+    if (!next) return
+    e.preventDefault()
+    setSize(item.key, next)
+  }
+
+  return (
+    <div ref={gridRef} className="strudel-grid" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gridAutoRows: ROW, rowGap: GAP, columnGap: GAP }}>
+      {list.map((item) => {
+        const h = layout.sizes[item.key]?.h
+        return (
+          <div
+            key={item.key}
+            ref={(el) => {
+              if (el) elements.current.set(item.key, el)
+              else elements.current.delete(item.key)
+            }}
+            className="strudel-grid__item"
+            data-grid-key={item.key}
+            data-dragging={dragging === item.key || undefined}
+            style={{ gridColumn: `span ${span(item)}`, gridRow: `span ${rows(item)}` }}
+          >
+            <div data-content={item.key} className="strudel-grid__content" style={h ? { minHeight: h } : undefined}>
+              {item.node}
+            </div>
+            <button
+              type="button"
+              className="strudel-grid__grip"
+              aria-label={`Move ${item.label}`}
+              title="Drag to move (arrow keys too)"
+              onPointerDown={onGripDown(item.key)}
+              onPointerMove={onGripMove}
+              onPointerUp={onGripUp}
+              onPointerCancel={onGripUp}
+              onKeyDown={onGripKey(item.key)}
+            />
+            <button
+              type="button"
+              className="strudel-grid__corner"
+              aria-label={`Resize ${item.label}`}
+              title="Drag to resize (arrow keys too)"
+              onPointerDown={onCornerDown(item.key)}
+              onPointerMove={onCornerMove}
+              onPointerUp={onCornerUp}
+              onPointerCancel={onCornerUp}
+              onKeyDown={onCornerKey(item)}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/strudel/StrudelRack.tsx

@@ -9,6 +9,7 @@ import { findCall, parseStrudel, StrudelSyntaxError, type StrudelArg, type Strud
 import { formatNumber, isAudible, mixCode, removeMethod, setMethod, setMiniAtom, setMiniSource, setTempo, type StrudelMix } from "./ast/edit"
 import { Fader, Knob, defaultFormat } from "./controls"
 import { StepGrid } from "./StepGrid"
+import { RackGrid, type GridLayout } from "./RackGrid"
 
 export interface StrudelRackProps {
   code: string
@@ -16,6 +17,24 @@ export interface StrudelRackProps {
   /** The code to play for the current mute/solo mix (the written code with silenced tracks). */
   onPlayableChange?: (code: string) => void
   className?: string
+  /** "rack": modules stacked full width. "grid": a masonry grid you drag and resize. Defaults to "rack". */
+  layout?: "rack" | "grid"
+  /** Remember the layout (mode, order and sizes) in localStorage under this key. */
+  persistKey?: string
+}
+
+interface Saved {
+  mode: "rack" | "grid"
+  grid: GridLayout
+}
+
+function load(key: string | undefined): Partial<Saved> {
+  if (!key) return {}
+  try {
+    return JSON.parse(localStorage.getItem(`strudel-rack:${key}`) ?? "{}") as Partial<Saved>
+  } catch {
+    return {}
+  }
 }
 
 interface Param {
@@ -120,7 +139,8 @@ function Device({
   return (
     <section className="strudel-device" data-kind={track.kind} data-audible={audible} aria-label={name}>
       <header className="strudel-device__head">
-        <Icon size={15} aria-hidden="true" />
+        <span className="strudel-device__led" aria-hidden="true" />
+        <Icon size={14} aria-hidden="true" />
         <span className="strudel-device__name" title={code.slice(track.start, track.end)}>
           {name}
         </span>
@@ -145,7 +165,7 @@ function Device({
         />
         <div className="strudel-device__main">
           {(synth || scaleMatch) && (
-            <div className="strudel-device__selects">
+            <div className="strudel-device__selects strudel-lcd">
               {synth && (
                 <label>
                   <span>Sound</span>
@@ -229,7 +249,18 @@ function Device({
 }
 
 /** Equipment generated from Strudel code. Controlled: `code` in, edited code out through `onChange`. */
-export function StrudelRack({ code, onChange, onPlayableChange, className }: StrudelRackProps) {
+export function StrudelRack({ code, onChange, onPlayableChange, className, layout = "rack", persistKey }: StrudelRackProps) {
+  const [saved] = useState(() => load(persistKey))
+  const [mode, setMode] = useState<"rack" | "grid">(saved.mode ?? layout)
+  const [grid, setGrid] = useState<GridLayout>(saved.grid ?? { order: [], sizes: {} })
+  useEffect(() => {
+    if (!persistKey) return
+    try {
+      localStorage.setItem(`strudel-rack:${persistKey}`, JSON.stringify({ mode, grid } satisfies Saved))
+    } catch {
+      // Storage unavailable (private mode): the layout just isn't remembered.
+    }
+  }, [persistKey, mode, grid])
   const parsed = useMemo((): { song: StrudelSong } | { error: string } => {
     try {
       return { song: parseStrudel(code) }
@@ -265,11 +296,18 @@ export function StrudelRack({ code, onChange, onPlayableChange, className }: Str
   const master = song.masterChain
   const postgain = master ? firstNumber(findCall(master, "postgain")) : null
 
-  return (
-    <div className={`strudel-rack ${className ?? ""}`.trim()}>
+  const masterStrip = (
       <div className="strudel-rack__master" role="group" aria-label="Master">
-        <span className="strudel-rack__title">Master</span>
+        <span className="strudel-rack__title">
+          Master
+          <small>Strudel</small>
+        </span>
+        <output className="strudel-lcd strudel-lcd--bpm" aria-label="Tempo">
+          {Math.round((cps && Number.isFinite(cps) ? cps : 0.5) * 2400) / 10}
+          <small>BPM</small>
+        </output>
         <Knob
+          size="lg"
           label="Tempo"
           value={cps && Number.isFinite(cps) ? cps : 0.5}
           min={0.1}
@@ -280,6 +318,7 @@ export function StrudelRack({ code, onChange, onPlayableChange, className }: Str
         />
         {master && (
           <Knob
+            size="lg"
             label="Output"
             value={postgain ?? 1}
             min={0}
@@ -293,18 +332,43 @@ export function StrudelRack({ code, onChange, onPlayableChange, className }: Str
           {song.tracks.length} track{song.tracks.length === 1 ? "" : "s"}
           {song.layout === "stack" ? " · stack" : song.layout === "labels" ? " · $:" : ""}
         </span>
+        <div className="strudel-rack__mode" role="radiogroup" aria-label="Layout">
+          {(["rack", "grid"] as const).map((m) => (
+            <button key={m} type="button" role="radio" aria-checked={mode === m} onClick={() => setMode(m)}>
+              {m}
+            </button>
+          ))}
+        </div>
       </div>
+  )
+  const devices = song.tracks.map((t) => ({
+    key: `track-${t.index}`,
+    label: trackName(t),
+    span: 6,
+    node: (
+      <Device
+        song={song}
+        track={t}
+        mix={mix}
+        onChange={onChange}
+        onMix={(kind) => (kind === "mute" ? setMuted(toggle(muted, t.index)) : setSolo(toggle(solo, t.index)))}
+      />
+    ),
+  }))
+
+  return (
+    <div className={`strudel-rack ${className ?? ""}`.trim()} data-mode={mode}>
+      {mode === "grid" ? (
+        <RackGrid items={[{ key: "master", label: "Master", span: 12, node: masterStrip }, ...devices]} layout={grid} onLayoutChange={setGrid} />
+      ) : (
+        <>
+          {masterStrip}
+          {devices.map((d) => (
+            <div key={d.key}>{d.node}</div>
+          ))}
+        </>
+      )}
       {song.tracks.length === 0 && <p className="strudel-rack__error">No pattern found.</p>}
-      {song.tracks.map((t) => (
-        <Device
-          key={t.index}
-          song={song}
-          track={t}
-          mix={mix}
-          onChange={onChange}
-          onMix={(kind) => (kind === "mute" ? setMuted(toggle(muted, t.index)) : setSolo(toggle(solo, t.index)))}
-        />
-      ))}
     </div>
   )
 }

package/src/strudel/controls.tsx

@@ -1,6 +1,7 @@
-/* The rack's hardware: a rotary knob and a fader. Both are ARIA sliders — drag (Shift for fine), arrow keys,
-   Page Up/Down, Home/End — and double-click resets to the default. Values map logarithmically when `log`. */
-import { useRef, type KeyboardEvent, type PointerEvent } from "react"
+/* The rack's hardware: a rotary knob (rubber skirt, machined cap, LED ring) and a channel fader (slotted
+   track, tick scale, chunky cap). Both are ARIA sliders — drag (Shift for fine), arrow keys, Page Up/Down,
+   Home/End — and double-click resets to the default. Values map logarithmically when `log`. */
+import { useId, useRef, type KeyboardEvent, type PointerEvent } from "react"
 
 export interface ControlProps {
   label: string
@@ -16,6 +17,8 @@ export interface ControlProps {
   /** Shown instead of the value, e.g. "∿" for a modulated parameter. */
   display?: string
   title?: string
+  /** Knob only: "lg" for master controls. */
+  size?: "md" | "lg"
 }
 
 const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))
@@ -38,20 +41,19 @@ export function defaultFormat(v: number): string {
   return v.toFixed(2)
 }
 
-function useDrag(props: ControlProps, axis: "x" | "y", travel: number) {
+function useDrag(props: ControlProps, travel: number) {
   const start = useRef<{ pos: number; unit: number } | null>(null)
   const set = (unit: number) => props.onChange(fromUnit(unit, props))
   const onPointerDown = (e: PointerEvent<HTMLElement>) => {
     if (props.disabled) return
     e.currentTarget.setPointerCapture(e.pointerId)
     e.currentTarget.focus()
-    start.current = { pos: axis === "y" ? e.clientY : e.clientX, unit: toUnit(props.value, props) }
+    start.current = { pos: e.clientY, unit: toUnit(props.value, props) }
   }
   const onPointerMove = (e: PointerEvent<HTMLElement>) => {
     const s = start.current
     if (!s) return
-    const delta = axis === "y" ? s.pos - e.clientY : e.clientX - s.pos
-    set(s.unit + (delta / travel) * (e.shiftKey ? 0.2 : 1))
+    set(s.unit + ((s.pos - e.clientY) / travel) * (e.shiftKey ? 0.2 : 1))
   }
   const onPointerUp = () => {
     start.current = null
@@ -95,31 +97,57 @@ function aria(props: ControlProps, format: (v: number) => string) {
 }
 
 const ARC = 270
-const polar = (deg: number, r: number) => {
+const LEDS = 15
+const polar = (deg: number, r: number, c = 30) => {
   const a = ((deg - 90) * Math.PI) / 180
-  return [20 + r * Math.cos(a), 20 + r * Math.sin(a)] as const
-}
-const arc = (from: number, to: number, r: number) => {
-  const [x1, y1] = polar(from, r)
-  const [x2, y2] = polar(to, r)
-  return `M ${x1} ${y1} A ${r} ${r} 0 ${to - from > 180 ? 1 : 0} 1 ${x2} ${y2}`
+  return [c + r * Math.cos(a), c + r * Math.sin(a)] as const
 }
 
 export function Knob(props: ControlProps) {
+  const id = useId().replace(/:/g, "")
   const format = props.format ?? defaultFormat
-  const handlers = useDrag(props, "y", 160)
+  const handlers = useDrag(props, 160)
   const u = toUnit(props.value, props)
-  const from = -ARC / 2
-  const to = from + ARC * u
-  const [px, py] = polar(to, 11)
+  const angle = -ARC / 2 + ARC * u
+  // A bipolar parameter (pan, speed) lights from the centre; the rest light from the left.
+  const bipolar = props.min < 0 || props.label === "Pan"
+  const zero = bipolar ? toUnit(props.min < 0 ? 0 : (props.min + props.max) / 2, props) : 0
+  const lit = (i: number) => {
+    const t = i / (LEDS - 1)
+    return !props.disabled && (bipolar ? (t >= Math.min(zero, u) - 0.001 && t <= Math.max(zero, u) + 0.001) : t <= u + 0.001)
+  }
   return (
-    <div className="strudel-knob" data-disabled={props.disabled || undefined}>
+    <div className="strudel-knob" data-size={props.size ?? "md"} data-disabled={props.disabled || undefined}>
       <div className="strudel-knob__dial" {...aria(props, format)} {...handlers}>
-        <svg viewBox="0 0 40 40" aria-hidden="true">
-          <path d={arc(from, from + ARC, 16)} className="strudel-knob__track" />
-          {!props.disabled && u > 0.001 && <path d={arc(from, to, 16)} className="strudel-knob__fill" />}
-          <circle cx="20" cy="20" r="11.5" className="strudel-knob__cap" />
-          <line x1="20" y1="20" x2={px} y2={py} className="strudel-knob__pointer" />
+        <svg viewBox="0 0 60 60" aria-hidden="true">
+          <defs>
+            <radialGradient id={`${id}-skirt`} cx="50%" cy="35%" r="70%">
+              <stop offset="0" stopColor="#4a4d55" />
+              <stop offset=".6" stopColor="#1d1f24" />
+              <stop offset="1" stopColor="#0b0c0e" />
+            </radialGradient>
+            <linearGradient id={`${id}-cap`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0" stopColor="#f2f3f5" />
+              <stop offset=".45" stopColor="#a9adb5" />
+              <stop offset=".55" stopColor="#8a8f98" />
+              <stop offset="1" stopColor="#d7dae0" />
+            </linearGradient>
+          </defs>
+          {Array.from({ length: LEDS }, (_, i) => {
+            const [x, y] = polar(-ARC / 2 + (ARC * i) / (LEDS - 1), 27)
+            return <circle key={i} cx={x} cy={y} r="1.7" className="strudel-knob__led" data-on={lit(i) || undefined} />
+          })}
+          <circle cx="30" cy="31.5" r="19.5" className="strudel-knob__shadow" />
+          <circle cx="30" cy="30" r="19" fill={`url(#${id}-skirt)`} className="strudel-knob__skirt" />
+          {/* Grip ridges on the skirt, then the machined cap and its indicator. */}
+          <g transform={`rotate(${angle} 30 30)`}>
+            {Array.from({ length: 24 }, (_, i) => (
+              <line key={i} x1="30" y1="11.6" x2="30" y2="14" transform={`rotate(${i * 15} 30 30)`} className="strudel-knob__ridge" />
+            ))}
+            <circle cx="30" cy="30" r="12.5" fill={`url(#${id}-cap)`} className="strudel-knob__cap" />
+            <circle cx="30" cy="30" r="12.5" className="strudel-knob__brush" />
+            <line x1="30" y1="19.5" x2="30" y2="26" className="strudel-knob__pointer" />
+          </g>
         </svg>
       </div>
       <span className="strudel-knob__value">{props.display ?? format(props.value)}</span>
@@ -128,16 +156,25 @@ export function Knob(props: ControlProps) {
   )
 }
 
+const TICKS = [10, 8, 6, 4, 2, 0]
+
 export function Fader(props: ControlProps) {
   const format = props.format ?? defaultFormat
-  const handlers = useDrag(props, "y", 90)
+  const handlers = useDrag(props, 104)
   const u = toUnit(props.value, props)
   return (
     <div className="strudel-fader" data-disabled={props.disabled || undefined}>
       <span className="strudel-fader__value">{props.display ?? format(props.value)}</span>
-      <div className="strudel-fader__track" {...aria(props, format)} {...handlers} aria-orientation="vertical">
-        <div className="strudel-fader__fill" style={{ height: `${u * 100}%` }} />
-        <div className="strudel-fader__thumb" style={{ bottom: `calc(${u * 100}% - 5px)` }} />
+      <div className="strudel-fader__body">
+        <div className="strudel-fader__scale" aria-hidden="true">
+          {TICKS.map((t) => (
+            <span key={t}>{t}</span>
+          ))}
+        </div>
+        <div className="strudel-fader__track" {...aria(props, format)} {...handlers} aria-orientation="vertical">
+          <div className="strudel-fader__slot" />
+          <div className="strudel-fader__cap" style={{ bottom: `calc(${u} * (100% - 22px))` }} />
+        </div>
       </div>
       <span className="strudel-fader__label">{props.label}</span>
     </div>

package/src/strudel/index.ts

@@ -3,6 +3,8 @@ export type { StrudelPlayerProps } from "./StrudelPlayer"
 export { StrudelRack, STRUDEL_PARAMS, trackName } from "./StrudelRack"
 export type { StrudelRackProps } from "./StrudelRack"
 export { StepGrid } from "./StepGrid"
+export { RackGrid } from "./RackGrid"
+export type { GridItem, GridLayout, RackGridProps } from "./RackGrid"
 export type { StepGridProps } from "./StepGrid"
 export { Fader, Knob } from "./controls"
 export type { ControlProps } from "./controls"