SEI

SEIHOUSE UI

/lab/raw · Phase 4 behavior hardening lab

Phase 4Mock data only

SEIHouse music-business lab

Reusable particles for releases, artists, vaults, dashboards, and future creator systems.

Phase 2 keeps everything mocked and visual-only while making the lab feel closer to real product surfaces.

AlbumsArtistsRegistryDojoVault Radio

SAP preview

Showcase test single

Light Leak Reference

Mara Vale

no audio logic

01:5803:42

Player shell · visual only00:52

Midnight Registry Demo

SENSEIDUKES · lab preview

01:2403:48

Phase 2 boundary

This lab evolves the Phase 1 component system into music-business particles. Everything is mocked: no playback, backend, auth, Supabase, registry database, or plugin runtime.

Particles onlyNo audio playbackNo backendNo brand lock

01 / Mission

Music-business UI particles built on the Phase 1 foundation.

Phase 2 adds reusable blocks for albums, artists, vault fragments, Dojo modules, registry states, player shells, plugins, metrics, and actions — all visual-only and mock-driven.

Product-aware, logic-free

Reusable particles

Each particle accepts className, composes Phase 1 primitives, and exposes local variants only where the particle needs product-specific styling.

Music-business aware

Mock content covers release worlds, creators, registry panels, vault recovery, learning modules, and internal dashboard summaries.

Deferred behavior

Audio playback, auth, APIs, registry databases, plugin execution, and final brand-system decisions remain out of scope.

02 / Primitive Foundation

Phase 1 primitives remain visible and unchanged.

Buttons, badges, panels, cards, and sections continue to provide the reusable foundation for every Phase 2 particle.

Tailwind variants

SEIButton variants

SEIBadge variants

neutraloutlinesolidinfosuccesswarningdangeraccent

Project

UI mock

SEA Portal shell

A reusable card for showing routes, tools, or projects without binding to app logic.

metadata · actions · footer

Content

Content lane

Artist world block

Flexible layout for creator pages, album worlds, or collection previews.

Composable

Experiment

Visual lane

Glass overlay card

A test surface for overlays, future player docks, and ambient panels.

Exploratory

03 / Music-Business Particles

Albums, artists, vault fragments, and Dojo modules.

These components are reusable product-style particles, not app workflows. They use realistic fake data and stay flexible across style lanes.

Particles

EPScheduled

2026 · Scheduled

Midnight Registry

A five-track release world for testing album cards, registry seals, campaign notes, and creator-facing actions.

SENSEIDUKES

SAP readyCreator rolloutAlt mix

Mixtape

MixtapeCatalog

2025 · Catalog

House Keys Vol. 1

A compilation-style mock release used to preview discovery surfaces and internal catalog utilities.

SEIHouse Curated

ShowcasePlaylist laneVault source

Single

SingleTesting

2026 · Testing

Light Leak Reference

Single-lane release preview with flexible metadata for landing pages, artist profiles, and dashboard rows.

Mara Vale

Media testRadio candidateClean edit

Artist · Producer · Systems lead

SENSEIDUKES

Featured

Building release worlds, creator tools, and a flexible music-business interface language for SEIHouse.

FounderSAPRegistry

Vocalist · Writer

Mara Vale

Active

Pop and electronic topliner used in the lab to test artist cards, profile variants, and showcase flows.

ToplineShowcaseActive

Collective · Session archive

North Dock Choir

Developing

CollectiveSplitsArchive

Voice noteRecovered

Hook idea — blue room bounce

Recovered from March writing sprint before hook selection.

HookPhone memoNeeds split

Mar 14, 202600:47

MixTagged

Midnight Registry rough mix 03

Internal mix note for comparing master direction. No playback behavior attached.

RoughAlt drumsReference

Apr 02, 202603:18

Session noteCold storage

SEA Portal rollout notes

Planning fragment for future creator dashboard and registry education modules.

PortalCampaignArchive

May 22, 2026—

In progress

StarterRegistry basics

Registering a release package

A guided UI lesson mock for collecting release metadata, contributors, and verification notes.

Progress68%

Template

BuilderCreator tools

Creator campaign template

Template-style module for assembling rollout assets, showcase entries, and action strips.

Progress100%

Open

OperatorVault operations

Vault cleanup sprint

Internal training module for tagging fragments, archive states, and recovery workflows.

Progress24%

04 / Behavior Primitives

Accessible interaction foundations powered by Base UI and React Aria.

Phase 3 adds the first headless behavior libraries. Base UI and React Aria provide focus management, keyboard navigation, and ARIA wiring; SEIHouse keeps full visual control through Tailwind variants. Everything below is mocked — no audio, backend, auth, or registry runtime.

Headless behavior

SEIDialog

Accessible modal dialog: focus trap, Escape to close, click-outside, and focus return to the trigger. Used for confirm actions and rich detail views like opening an AlbumCard.

Base UI

SEIDrawer

Side / bottom panel for queues, vault details, and creator tools. Built on the Base UI Dialog primitive so SEIHouse fully controls side, size, and slide direction.

Base UI

SEITabs

Keyboard-navigable tabs (arrow keys, Home/End) shown inside a registry-style panel. Active/disabled states and the underline indicator are SEI-styled.

Base UI

Mock summary of the registry record: contributors, release link, and current state. No registry service is attached.

pill

Album lane panel.

panel

Album lane panel.

default

Album lane panel.

SEIPopover

Floating content anchored to a trigger (flip / shift positioning). Here a RegistrySeal explains its state on click — the seal itself is the trigger.

Base UI

SEITooltip

Helper text on hover and keyboard focus, with a shared open delay. Here an info control on a MetricCard explains the metric.

Base UI

Plays

128.4K

SEIComboboxPreview

Searchable, keyboard-navigable combobox with an accessible label and empty state. Mock data for artist search and vault tags.

React Aria

Search artists

Pick vault tag

SEICommandPreview

Command-palette preview: type to filter grouped commands (Albums, Vault, Registry, Dojo, Creator Tools) with full keyboard navigation. Nothing executes.

React Aria

05 / Behavior Hardening

Native drawer, multi-select tagging, a global command palette, tests, and reduced motion.

Phase 4 hardens the behavior layer for real apps: a swipe/snap drawer (vaul), a multi-select metadata combobox, a ⌘K command palette with fuzzy search and recent commands, Playwright + axe tests, a reduced-motion strategy, and shared variants promoted into styles/variants.ts. Still mocked — no audio, backend, auth, or registry runtime.

Hardening

Native drawer — swipe & snap

vaul adds drag-to-dismiss and snap points on top of an accessible Radix Dialog (focus trap, Escape, focus return). Bottom drawers get a drag handle and snap points; side drawers slide in. Styling stays in SEIHouse variants.

vaul

Multi-select combobox

Searchable tagging input with removable chips, keyboard navigation, disabled options, clear-all, helper/error text, and an empty state. React Aria provides combobox + tag-group semantics.

React Aria

Vault tag picker

Demo

Mock vault tags — one option is disabled.

Album genre picker

Melodic Rap
R&B

Pick one or more genres.

Registry label picker

At least one label is required (mock validation).

Dojo category picker

Artist World

Categorize a Dojo module.

Global command palette

A modal command palette opened with ⌘K / Ctrl K. Base UI Dialog handles modal a11y; React Aria handles grouped keyboard navigation; a tiny dependency-free fuzzy matcher powers search with match highlighting.

Base UI + React Aria

or press ⌘K / Ctrl K

Fuzzy search (try ovf → “Open Vault Fragments”), grouped arrow-key navigation, and a recent-commands section.

Accessibility tests

Playwright + axe guard keyboard and ARIA behavior so the lab does not silently regress.

Playwright + axe

Specs live in test/accessibility/:

axe scans on / and /lab
dialog / drawer / tabs / palette keyboard flows
multi-select focus + selection

npx playwright installpnpm test:a11ypnpm test:e2e

Reduced motion strategy

Motion is optional. The lab honours prefers-reduced-motion by shortening transitions rather than removing UI feedback.

prefers-reduced-motion

Motion is optional — every component works with animations disabled.
Base primitives never hide information behind a transition.
Reduced-motion preferences shorten transitions instead of removing UI feedback.
Interaction never depends on an animation finishing.
Future motion components must respect prefers-reduced-motion and fall back to instant state.

Promoted shared variants

Stable behavior styles now live in packages/seihouse-ui/src/styles/variants.ts and are reused across components: overlay scrim, popup surfaces, interactive item states, and command group headers.

@seihouse/ui styles

seiOverlayVariantsseiPopupSurfaceVariantsseiInteractiveItemVariantsseiCommandGroupHeader

06 / Experience Blocks

Hero, player shell, and future plugin placeholders.

These particles preview higher-order product surfaces without adding runtime behavior.

Visual only

SEA Portal concept

A portal shell for education, registration, campaigns, and creator operations.

Use these particles to test workflows before adding data models, auth, or service integrations.

PortalCreator toolsInternal ops

Portal previewvisual only

Optional preview slot for album worlds, dashboard summaries, registry states, or creator-tool mockups.

SAP preview

EP rollout shell

Midnight Registry Demo

SENSEIDUKES

no audio logic

01:4102:56

Queue

Blue room bounce

Light Leak Reference

Vault Radio ID

Environment

BPM92

KeyF# minor

LaneRegistry linked

StatusVisual only

mocked

Future plugin slot