@bycrux/editor 0.12.0 → 1.0.1

package/src/video/panels/LeftPanelTabs.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { cn } from '../../ui'
+import { usePersistentState } from '../../ui/usePersistentState'
+
+export interface LeftPanelTab {
+  /** Stable id, also the persisted value. */
+  id: string
+  /** Rendered above the label in the rail. Callers pass a lucide icon element. */
+  icon: ReactNode
+  /** Short rail label, also the tab's accessible name. */
+  label: string
+  /** Panel body. Lazily mounted (see below). */
+  content: ReactNode
+}
+
+export interface LeftPanelTabsProps {
+  tabs: LeftPanelTab[]
+  /** Tab shown when nothing is persisted (or the persisted id is stale).
+   *  Defaults to `tabs[0].id` when omitted or not found in `tabs`. */
+  defaultTabId?: string
+  /** localStorage key for the active-tab preference.
+   *  Default: 'montaj.editor.leftPanelTab'. */
+  storageKey?: string
+  /** Host-driven tab activation. When `nonce` changes to a positive value, the
+   *  panel switches to `id` (if it names a real tab). Each activation is a
+   *  fresh `nonce` so re-selecting the same target still switches — this stays
+   *  generic (it never learns what a "caption" is): the editor bumps the nonce
+   *  when a caption is selected so the panel jumps to Captions. `nonce` 0 (the
+   *  initial value) never forces a tab, so a persisted preference wins on mount. */
+  activationRequest?: { id: string; nonce: number }
+  className?: string
+}
+
+const DEFAULT_STORAGE_KEY = 'montaj.editor.leftPanelTab'
+
+/**
+ * Generic, presentational tabbed shell for the editor's left browser panel.
+ * Knows nothing about media/captions/versions — the host supplies tabs and
+ * this component only handles the rail, persistence, and lazy mounting.
+ */
+export default function LeftPanelTabs({ tabs, defaultTabId, storageKey = DEFAULT_STORAGE_KEY, activationRequest, className }: LeftPanelTabsProps) {
+  const baseId = useId()
+  const buttonRefs = useRef(new Map<string, HTMLButtonElement | null>())
+
+  const resolvedDefaultId =
+    defaultTabId !== undefined && tabs.some(t => t.id === defaultTabId) ? defaultTabId : tabs[0]?.id
+
+  const [activeId, setActiveId] = usePersistentState<string>(
+    storageKey,
+    resolvedDefaultId ?? '',
+    // Reject anything that isn't a string, or that isn't the id of a tab
+    // that exists right now — a stale id from an older build (a tab that's
+    // since been renamed or removed) falls back to the default rather than
+    // rendering a blank pane.
+    raw => (typeof raw === 'string' && tabs.some(t => t.id === raw) ? raw : null),
+  )
+
+  // Host-driven activation (see `activationRequest`). Keyed ONLY on the nonce:
+  // `tabs` is a fresh array every render, so depending on it would re-fire the
+  // effect (and stomp the user's manual tab choice) on every render. When the
+  // nonce ticks we read the current `id`/`tabs` from this render's closure,
+  // which are up to date, so there is no stale-value risk.
+  const activationNonce = activationRequest?.nonce ?? 0
+  const activationId = activationRequest?.id
+  useEffect(() => {
+    if (activationNonce <= 0 || !activationId) return
+    if (tabs.some(t => t.id === activationId)) setActiveId(activationId)
+    // Intentionally keyed on the nonce alone (see the note above); `tabs`/
+    // `setActiveId` are deliberately not deps. `react-hooks/exhaustive-deps`
+    // is not enabled in this package's eslint config, so no disable is used.
+  }, [activationNonce, activationId])
+
+  // Stale-tab safety at render time too: `tabs` can change after mount (a
+  // host swapping which tabs it offers). If the persisted/active id no
+  // longer names a real tab, fall back to the resolved default instead of
+  // rendering nothing.
+  const currentId = tabs.some(t => t.id === activeId) ? activeId : resolvedDefaultId
+
+  // Lazy mount, then keep mounted: a tab's `content` isn't rendered into the
+  // tree until that tab is first activated (the Media tab can be heavy and
+  // shouldn't mount until asked for), but once mounted it stays mounted and
+  // is only hidden on switch-away (the Captions tab owns sub-control state —
+  // sub-tabs, pickers, scroll position — that must survive a tab switch).
+  const [mountedIds, setMountedIds] = useState<Set<string>>(() => new Set(currentId ? [currentId] : []))
+  if (currentId && !mountedIds.has(currentId)) {
+    setMountedIds(prev => {
+      const next = new Set(prev)
+      next.add(currentId)
+      return next
+    })
+  }
+
+  function moveFocus(nextId: string) {
+    setActiveId(nextId)
+    buttonRefs.current.get(nextId)?.focus()
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLButtonElement>, tabId: string) {
+    const ids = tabs.map(t => t.id)
+    const idx = ids.indexOf(tabId)
+    if (idx === -1) return
+    let nextIdx: number
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        nextIdx = (idx + 1) % ids.length
+        break
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        nextIdx = (idx - 1 + ids.length) % ids.length
+        break
+      case 'Home':
+        nextIdx = 0
+        break
+      case 'End':
+        nextIdx = ids.length - 1
+        break
+      default:
+        return
+    }
+    e.preventDefault()
+    moveFocus(ids[nextIdx])
+  }
+
+  return (
+    <div className={cn('flex h-full min-h-0', className)}>
+      <div
+        role="tablist"
+        aria-orientation="vertical"
+        className="w-16 shrink-0 flex flex-col overflow-y-auto border-r border-[var(--editor-border)] bg-[var(--editor-bg)]"
+      >
+        {tabs.map(tab => {
+          const selected = tab.id === currentId
+          return (
+            <button
+              key={tab.id}
+              ref={el => { buttonRefs.current.set(tab.id, el) }}
+              type="button"
+              role="tab"
+              id={`${baseId}-tab-${tab.id}`}
+              aria-selected={selected}
+              aria-controls={`${baseId}-panel-${tab.id}`}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => setActiveId(tab.id)}
+              onKeyDown={e => handleKeyDown(e, tab.id)}
+              className={cn(
+                'relative flex flex-col items-center gap-1 px-1 py-2.5 text-[10px] transition-colors',
+                selected
+                  // Label is ~10px accent TEXT → the AA-safe accent-text token
+                  // (indigo-600 in light); the tint fill keeps the plain accent.
+                  ? 'text-[var(--editor-accent-text)] bg-[var(--editor-accent)]/10'
+                  : 'text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] hover:bg-[var(--editor-text)]/5',
+              )}
+            >
+              {selected && (
+                <span className="absolute left-0 top-0 bottom-0 w-0.5 bg-[var(--editor-accent)]" aria-hidden="true" />
+              )}
+              {/* Decorative — the label carries the accessible name. */}
+              <span className="text-base leading-none" aria-hidden="true">{tab.icon}</span>
+              <span className="leading-tight text-center">{tab.label}</span>
+            </button>
+          )
+        })}
+      </div>
+      <div className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
+        {tabs
+          .filter(tab => mountedIds.has(tab.id))
+          .map(tab => {
+            const active = tab.id === currentId
+            return (
+              <div
+                key={tab.id}
+                role="tabpanel"
+                id={`${baseId}-panel-${tab.id}`}
+                aria-labelledby={`${baseId}-tab-${tab.id}`}
+                hidden={!active}
+                style={active ? undefined : { display: 'none' }}
+                className="flex-1 min-h-0 flex flex-col overflow-hidden"
+              >
+                {tab.content}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}

package/src/video/panels/OverlayContentPanel.tsx

@@ -0,0 +1,351 @@
+import { useRef, useState, type ChangeEvent } from 'react'
+import type { VisualItem } from '../../schema'
+import { inferOverlayPropFields, type PropField } from '../preview/overlay-prop-fields'
+import { cn, inspectorInputClass, NumberField, SwatchInput } from '../../ui'
+
+/**
+ * `<OverlayContentPanel>` — the editor's contextual right-hand **Content**
+ * properties panel for the selected overlay: the overlay's own primitive
+ * props (its text, colors, numbers, toggles, image paths), as opposed to the
+ * transform geometry its sibling `OverlayInspector` edits.
+ *
+ * These fields used to live in the floating, draggable `OverlayPropsModal`,
+ * opened by a preview double-click / a Pencil button in the controls bar. That
+ * dialog is retired: this is the Content TAB of the same right column
+ * `OverlayInspector` (Transform) and `ClipPropertiesPanel` mount into, and it
+ * shares their visual language — one collapsible section, `var(--editor-*)`
+ * custom properties, `inspectorInputClass` inputs.
+ *
+ * ── No schema, by design ─────────────────────────────────────────────────
+ * The editable fields are INFERRED from whatever primitives the item's `props`
+ * happens to carry (see `inferOverlayPropFields`), which is why an AI-written
+ * one-off overlay is as editable as a shipped template. Non-primitive props
+ * (arrays, objects, null) are not shown and are never touched: every write
+ * spreads the item's whole `props` record, so they ride through untouched.
+ *
+ * ── Commit model ─────────────────────────────────────────────────────────
+ * Continuous edits (typing, dragging the OS color picker) PREVIEW per change
+ * and COMMIT ON BLUR — one undo step per typing gesture, matching
+ * `OverlayInspector`'s number boxes and `ClipPropertiesPanel`'s `DraftField`.
+ * Discrete edits (a checkbox, a finished image upload) have no blur to commit
+ * on, so they preview and commit back to back as one user-visible action —
+ * the same split those two panels make.
+ *
+ * The modal this replaces had a Save button and a Cancel that restored a
+ * pre-open snapshot. Neither survives: a panel is never "open", so there is no
+ * open-time snapshot to revert to and no moment at which a Save could be the
+ * thing that persists. Undo is the revert path now, and it works because each
+ * committed gesture is exactly one undo step.
+ *
+ * Props-driven and host-agnostic, like the rest of this package: it never
+ * reaches into a store. All persistence flows back through the two callbacks,
+ * which the host (VideoEditor) wires to its own sync core.
+ */
+export interface OverlayContentPanelProps {
+  /** The single selected item, or null. A null item and one with no editable
+   *  props both render the empty state — the component enforces its own
+   *  contract rather than trusting the caller to have already filtered. */
+  item: VisualItem | null
+  /** Live-preview an in-progress edit: no undo entry, no save yet. Carries the
+   *  item's FULL next `props` record, not a patch — the caller replaces
+   *  `item.props` wholesale. Mirrors `VideoEditor`'s `previewOverlayProps`. */
+  onPreview: (nextProps: Record<string, unknown>) => void
+  /** Commit the last previewed edit as one undo step + queued save. Fired on
+   *  a field's blur, closing the typing gesture. */
+  onCommit: () => void
+  /** Resolve a workspace path to a servable URL (for image thumbnails). */
+  fileUrl?: (path: string) => string
+  /** Upload a picked file, returning its new workspace path (for image
+   *  "change"). Absent on a non-Montaj host — see `ImageField`. */
+  uploadFile?: (file: File) => Promise<string>
+  /** Editor theme mode — light/dark. Only affects the image field's upload-
+   *  error text (red-400 is sub-AA on a light `--editor-surface`). Absent ->
+   *  dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
+}
+
+const SECTION_CLASS = 'shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden'
+const FIELD_LABEL_CLASS = 'text-[11px] uppercase tracking-wide text-[var(--editor-text)]/55'
+
+/**
+ * Image prop control: a thumbnail preview plus a file picker that uploads the
+ * chosen file (via the host adapter) and swaps the prop to the returned path.
+ * When no `uploadFile` is available (non-Montaj host) it degrades to an
+ * editable path text field so the value is still reachable — carried over from
+ * `OverlayPropsModal` unchanged, because both halves handle real cases: a
+ * workspace path, an http URL, and a `data:image/…` URL all render here.
+ *
+ * A finished upload is a DISCRETE edit (`onChange`): there is no blur to
+ * commit on once the picker has closed.
+ */
+function ImageField({
+  name,
+  value,
+  fileUrl,
+  uploadFile,
+  onChange,
+  onInput,
+  onCommit,
+  mode = 'dark',
+}: {
+  name: string
+  value: string
+  fileUrl?: (path: string) => string
+  uploadFile?: (file: File) => Promise<string>
+  /** Discrete — a completed upload. */
+  onChange: (v: string) => void
+  /** Continuous — a keystroke in the degraded path field. */
+  onInput: (v: string) => void
+  /** Closes the degraded path field's typing gesture. */
+  onCommit: () => void
+  mode?: 'light' | 'dark'
+}) {
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const preview = value ? (fileUrl ? fileUrl(value) : value) : ''
+
+  async function onPick(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    e.target.value = '' // let the same file be re-picked later
+    if (!file || !uploadFile) return
+    setBusy(true)
+    setErr(null)
+    try {
+      onChange(await uploadFile(file))
+    } catch (x) {
+      setErr(String(x))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      {preview ? (
+        <img
+          src={preview}
+          alt={name}
+          className="h-14 w-14 shrink-0 rounded-md border border-[var(--editor-border)] object-cover bg-black/20"
+        />
+      ) : (
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-dashed border-[var(--editor-border)] text-[10px] text-[var(--editor-text)]/40">
+          none
+        </div>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <span className="truncate font-mono text-xs text-[var(--editor-text)]/70" title={value}>
+          {value ? value.split('/').pop() : '—'}
+        </span>
+        {uploadFile ? (
+          <label className="inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-md border border-[var(--editor-border)] px-2.5 py-1 text-xs text-[var(--editor-text)]/80 hover:bg-[var(--editor-text)]/5">
+            {busy ? 'Uploading…' : 'Change…'}
+            <input
+              type="file"
+              accept="image/*"
+              aria-label={name}
+              className="hidden"
+              onChange={onPick}
+              disabled={busy}
+            />
+          </label>
+        ) : (
+          <input
+            type="text"
+            aria-label={name}
+            value={value}
+            onChange={e => onInput(e.target.value)}
+            onBlur={onCommit}
+            onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur() }}
+            className={cn(inspectorInputClass, 'font-mono')}
+          />
+        )}
+        {err && <span className={`text-[11px] ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{err}</span>}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * One inferred prop, rendered as the control its kind calls for, and the one
+ * place this panel's preview/commit split is decided.
+ *
+ * Split into its own component so it can hold its OWN state — hooks can't live
+ * inside a loop, and each field needs an independent "have I been edited"
+ * answer. `dirty` is that answer, and it is what stops a blur on an UNTOUCHED
+ * field from spending a save: `commit()` reaches `sync.commit()`, which
+ * enqueues a save whether or not a transient gesture actually happened. Same
+ * reasoning (and the same ref) as `OverlayInspector`'s `ScaleSlider`.
+ *
+ * `draft` is the fix for the same bug `ClipPropertiesPanel`'s `DraftField`
+ * documents: a controlled input bound straight to the incoming value gets its
+ * keystrokes clobbered by any re-render arriving mid-edit. It goes non-null
+ * the moment the operator types and stays the single source of truth for
+ * what's ON SCREEN until blur/Enter clears it; until then the field tracks the
+ * previewed value live.
+ */
+function PropFieldRow({
+  field,
+  onPreview,
+  onCommit,
+  fileUrl,
+  uploadFile,
+  mode = 'dark',
+}: {
+  field: PropField
+  onPreview: (value: string | number | boolean) => void
+  onCommit: () => void
+  fileUrl?: (path: string) => string
+  uploadFile?: (file: File) => Promise<string>
+  mode?: 'light' | 'dark'
+}) {
+  const [draft, setDraft] = useState<string | null>(null)
+  const dirty = useRef(false)
+
+  /** A continuous gesture step — no undo entry yet. */
+  function preview(value: string | number | boolean) {
+    dirty.current = true
+    onPreview(value)
+  }
+
+  /** Close a typing/picking gesture. A no-op on a field nobody touched. */
+  function commit() {
+    setDraft(null)
+    if (!dirty.current) return
+    dirty.current = false
+    onCommit()
+  }
+
+  /** A discrete, already-final edit — one undo step, no separate blur. */
+  function change(value: string | number | boolean) {
+    preview(value)
+    commit()
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <span className={FIELD_LABEL_CLASS}>{field.name}</span>
+      {field.kind === 'boolean' ? (
+        <input
+          type="checkbox"
+          aria-label={field.name}
+          checked={field.value as boolean}
+          onChange={e => change(e.target.checked)}
+          className="h-4 w-4 accent-[var(--editor-accent)]"
+        />
+      ) : field.kind === 'number' ? (
+        // The shared box (ui/NumberField.tsx) already owns the draft/
+        // preview/commit dance this branch used to hand-roll (including
+        // rejecting the mid-typing states `previewNumber` used to guard —
+        // an empty field, a lone minus). `step={1}` with no min/max: an
+        // inferred prop carries no schema (see this file's own doc comment),
+        // so there is no natural bound to hand the stepper either.
+        //
+        // The stepper deliberately does NOT go through `stepValue`, unlike
+        // every other adopter of this shared box. `stepValue` rounds to 2
+        // decimal places to match what the TRANSFORM panel displays — but
+        // this panel neither displays nor stores rounded values, and its
+        // props are SCHEMA-LESS floats (see this file's doc comment): an
+        // inferred prop sitting at `0.125` would become `1.13` on the very
+        // first arrow click and stay wrong forever. With `step: 1` there is
+        // no float noise to strip in the first place, so a plain integer
+        // nudge is already exact and `stepValue`'s rounding would only
+        // throw away precision this panel has no business touching.
+        <NumberField
+          name={field.name}
+          className="w-24"
+          step={1}
+          value={String(field.value)}
+          onPreview={v => preview(v)}
+          onCommit={() => commit()}
+          onStep={d => change(Number(field.value ?? 0) + d)}
+        />
+      ) : field.kind === 'color' ? (
+        // SwatchInput already splits live picking from the picker closing, so
+        // it maps onto preview/commit directly — no draft needed, a color
+        // input has no partial value to protect.
+        <SwatchInput
+          value={String(field.value)}
+          ariaLabel={field.name}
+          onChange={v => preview(v)}
+          onCommit={() => commit()}
+        />
+      ) : field.kind === 'image' ? (
+        <ImageField
+          name={field.name}
+          value={String(field.value)}
+          fileUrl={fileUrl}
+          uploadFile={uploadFile}
+          onChange={v => change(v)}
+          onInput={v => { setDraft(v); preview(v) }}
+          onCommit={commit}
+          mode={mode}
+        />
+      ) : (
+        <textarea
+          aria-label={field.name}
+          value={draft ?? String(field.value)}
+          rows={1}
+          onChange={e => { setDraft(e.target.value); preview(e.target.value) }}
+          onBlur={commit}
+          className={cn(inspectorInputClass, 'h-auto resize-y')}
+        />
+      )}
+    </div>
+  )
+}
+
+export default function OverlayContentPanel({
+  item,
+  onPreview,
+  onCommit,
+  fileUrl,
+  uploadFile,
+  mode = 'dark',
+}: OverlayContentPanelProps) {
+  // Derived on EVERY render, never held in state. The modal seeded a `draft`
+  // array once in a `useState` initializer, which it could get away with
+  // because it remounted on every open; a panel that stays mounted while the
+  // operator clicks from overlay to overlay would keep showing the PREVIOUS
+  // overlay's fields. Same reasoning as OverlayInspector deriving `uniform`
+  // from the item rather than storing it.
+  const props = item?.props ?? {}
+  const fields = inferOverlayPropFields(props)
+
+  // Deliberately NO collapsible section header, unlike its siblings. The tab
+  // strip immediately above this already reads "Content", and a "CONTENT"
+  // section header under a "Content" tab is the same word twice in 40px of
+  // chrome — it also made `getByText('Content')` ambiguous at the VideoEditor
+  // seam. Collapsing is what the OTHER tab is for. The section FRAME stays, so
+  // the column's bottom border lines up whichever tab is showing.
+  //
+  // `OverlayInspector` still draws its own "TRANSFORM" header; folding that one
+  // away is a change to a file this task does not own.
+  return (
+    <div className={SECTION_CLASS}>
+      <div className="flex flex-col gap-3 p-2">
+        {fields.length === 0 ? (
+          <p className="px-1 py-4 text-center text-[11px] text-[var(--editor-text)]/45">
+            {item
+              ? 'This overlay has no editable content.'
+              : 'Select an overlay to edit its content.'}
+          </p>
+        ) : (
+          fields.map(field => (
+            <PropFieldRow
+              key={field.name}
+              field={field}
+              // Every write spreads the item's whole `props` record, so the
+              // non-primitive props `inferOverlayPropFields` skipped (arrays,
+              // objects, null) survive untouched rather than being dropped.
+              onPreview={value => onPreview({ ...props, [field.name]: value })}
+              onCommit={onCommit}
+              fileUrl={fileUrl}
+              uploadFile={uploadFile}
+              mode={mode}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

package/src/video/panels/TabNav.tsx

@@ -0,0 +1,60 @@
+import { cn } from '../../ui'
+
+export interface TabNavTab<T extends string = string> {
+  value: T
+  label: string
+}
+
+export interface TabNavProps<T extends string = string> {
+  tabs: readonly TabNavTab<T>[]
+  value: T
+  onChange: (next: T) => void
+  /** Accessible name for the group, e.g. "Overlay panel view". */
+  ariaLabel: string
+  /** Extra classes merged onto the wrapper, after the base `flex items-center`. */
+  className?: string
+}
+
+/**
+ * Shared underline tab strip used by the editor's small in-panel tab
+ * switches (CaptionListPanel's Styles/Format/Captions switch, VideoEditor's
+ * overlay Content/Transform pair, ClipPropertiesPanel's clip tabs):
+ * uppercase labels, an accent underline under the active tab, muted
+ * inactive — NOT a filled segmented control — so every panel that switches
+ * between two or three views speaks the same tab language. Purely
+ * presentational: the caller owns `value` and any persistence (e.g. via
+ * `usePersistentState`), this component only renders the strip and reports
+ * clicks.
+ *
+ * Deliberately NOT ARIA `role="tab"` / `role="tablist"`: the editor's LEFT
+ * rail (`LeftPanelTabs`) already owns a real `role="tablist"`, and a second
+ * tablist anywhere else in the same tree would put ambiguous `role="tab"`
+ * nodes in the a11y tree and make `getByRole('tab', …)` ambiguous in the
+ * host's own tests. A plain `role="group"` of `aria-pressed` buttons carries
+ * the same "these are alternatives, one is active" meaning without the
+ * collision — do not "fix" this back to `role="tab"`.
+ */
+export default function TabNav<T extends string>({ tabs, value, onChange, ariaLabel, className }: TabNavProps<T>) {
+  return (
+    <div role="group" aria-label={ariaLabel} className={cn('flex items-center', className)}>
+      {tabs.map(tab => {
+        const active = tab.value === value
+        return (
+          <button
+            key={tab.value}
+            type="button"
+            aria-pressed={active}
+            onClick={() => onChange(tab.value)}
+            className={`px-3 py-2 text-[11px] font-medium uppercase tracking-wide border-b-2 -mb-px transition-colors ${
+              active
+                ? 'border-[var(--editor-accent)] text-[var(--editor-text)]'
+                : 'border-transparent text-[var(--editor-text)] opacity-50 hover:opacity-80'
+            }`}
+          >
+            {tab.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}