Takazudo Modular Styleguide

Type to search...

to open search from anywhere

Component catalog

155 components from @takazudo-modular/ui-preact, discovered from their .stories.tsx files. Each tile previews the component's first variant, rendered here on the server.

155 components

Buttons & Controls

ActionButton

Red-gradient button for primary user actions (dialog triggers, CTAs).

6 variants

BorderedChevronToggle

Bordered 36×36 chevron toggle button for expanding/collapsing a filter panel; chevron direction is driven entirely by aria-expanded via CSS.

6 variants

ClearFilterButton

Bordered "clear filters" text button with a leading close-X icon, shared by the /products/ and /metamodule-ref/ filter UIs.

6 variants

FilterToggle

Chevron + underlined-label filter-toggle button for opening/closing a tag/keyword filter panel, shared by /products/ and /metamodule-ref/.

7 variants

FloatingFilterToggle

72×72 floating drawer-tab that collapses a filter overlay, shared by /products/ and /metamodule-ref/ with a caller-supplied glass fill.

4 variants

KeywordSearchInput

Lens-icon keyword search field with an inline × clear button, shared by the /products/ and /notes/ filter UIs.

5 variants

ListViewSwitcher

Three accessible, icon-labelled listing views with a visible selected state.

2 variants

Badges & Tags

ArrowTag

Arrow polygon tag shape with a bordered clip-path effect, in sm (list items) and lg (detail page headers) sizes.

7 variants

ArrowTag

SSR-only arrow-polygon tag pill with an inverted active state and hover/press affordances.

8 variants

CategoryBadge

Non-linking curated-tag badge showing an item type (guide/news/highlights/restock) on home-page news stream cards — one per-category color, `sm` (default) or `lg` sizing.

5 variants

NewLabel

Shared "NEW" chip — crimson bg, white text, offset shadow. The single source of truth for the NEW label identity used by the guides-landing inline badge (and matched by the product image overlay badge).

2 variants

ProductBrandBadge

Bottom-right brand-corner overlay for product thumbnails — the brand square logo, or a text fallback for brands with no registered logo.

3 variants

ProductBundleBadge

BUNDLE marker overlay for product listing images — a flat orange banner at bottom-right for the ADDAC120 system bundles.

2 variants

ProductBundleBadge

BUNDLE marker overlay for product listing images — sized (sm/lg/hero) and corner-flippable (bottom-right/top-right) variant used by ProductGridItem and ProductCardSimple.

4 variants

ProductStatusBadge

Status badge overlay for product listing images — diagonal ribbon (sold/unavailable/discontinued) or a null card-treatment variant.

5 variants

ProductStockLabelBadge

NEW/RESTOCK chip overlay for product listing images — top-left, square-cornered, fixed size at all breakpoints.

3 variants

TagList

Inline list of arrow-shape tag chips resolving each key to its taxonomy label — used under article/product cards.

4 variants

TagSidebar

Every available article tag rendered as an ArrowTag pill linking to /tags/<tag>/; the current tag is non-interactive with aria-current="page".

3 variants

Navigation

ArrowNavLink

Reusable "see all" navigation link with an ArrowRight icon prefix, used for section-level navigation.

4 variants

Breadcrumbs

Current-page location trail: mobile shows the direct parent with a back arrow, desktop shows the full trail.

7 variants

DesktopTocRail

Static shell for the xl+ sticky article TOC rail. It is always expanded; its localized navigation name is accessible without a visible kicker or collapse control.

2 variants

FloatingToc

Static shell for the mobile-only floating Table-of-Contents toggle + slide-down panel.

2 variants

Guides/SeriesNav

Guide series navigation — the compact top-of-article console bar (SeriesNavConsole) and the bottom prev/next cards + ±2-collapsed episode list (SeriesNavBottom).

10 variants

Link

Internal/external link with automatic detection, active-state styling, and page-loading-state integration.

6 variants

ListEndNav

Column-end "一覧" nav: a dashed top rule with a right-aligned chevron link, used at the bottom of the top page's news / featured columns.

3 variants

MetamoduleDocPagerNav

Bordered-box prev/next pager driven by the flattened category+order list (buildMetamoduleDocPager). No wraparound — a missing side renders no box.

2 variants

MetamoduleDocSidebar

Category-band nav tree for /metamodule-doc/ article pages — expanded active category with a dashed rail + full-bleed active bar, collapsed categories linking to their first page, and a below-lg <details> fallback.

2 variants

MetamoduleDocTopCategoryCards

/metamodule-doc/ top-page category tree cards grid — one bordered card per category (title band + dashed page tree), 3-col at xl.

2 variants

MobileMenuDrawer

Full-screen mobile navigation drawer: slide-in panel with nav items, social links, and the JA/EN language switcher.

3 variants

MobileMenuToggle

Animated hamburger menu toggle button that transforms into an X when open.

6 variants

Pagination

SSR-only pagination for listing pages — plain <a> links with page-number math, ellipsis collapsing, and prev/next labels.

3 variants

Pagination

SSR-only pagination for listing pages (e.g. /products/) — plain <a> links with page-number math, ellipsis collapsing, and prev/next labels.

4 variants

Page Chrome

HamsterLoader

Signature hamster-wheel loading spinner.

2 variants

PageHeading

Top-level h1 page heading with an English/Japanese dual display, legacy styling, and a named opt-in framed A+B treatment.

8 variants

PageLoadingOverlay

Full-page hamster-wheel overlay shown while a client-side page swap is in flight.

2 variants

PageTitle

Page/article title with optional extra-prefix, prefix, and created/updated date metadata.

7 variants

SectionHeading

Home-renewal section heading bar: 3px top rule, Futura title with optional JA sub-label and a responsive chevron link.

6 variants

SiteShell

Portable chrome with resolved host links, active states and compact labels.

1 variant

Forms & Dialogs

BaseDialog

Foundational modal dialog: portal, focus trap, fade/scale animation, Escape to close.

5 variants

ContactForm

Shared contact form (name/email/message + Turnstile widget) used by both the JA and EN contact pages.

2 variants

NotifyMeBlock

Product-page block: full-width restock-notify button, description, opens NotifyMeDialog.

5 variants

NotifyMeDialog

Restock-notification signup dialog (email field, loading/success/error states).

7 variants

OperatorInfoRequestBlock

Block whose button opens a dialog requesting operator (特商法) info by email.

4 variants

ReservationBlock

Product-page block: full-width reserve button, description, opens ReservationDialog.

5 variants

ReservationDialog

Coming-soon product reservation dialog (name + email, reservation-id on success).

8 variants

Media & Icons

BlurhashPlaceholder

Canvas-decoded blurhash blur-up placeholder that fades out once loaded.

2 variants

BrandSquareLogo

Brand logo centered in a white (or monochrome) square container, looked up by slug.

4 variants

ContactThumb

Stylized contact-page thumbnail: a centered mail icon with diagonal line decorations matching NewsThumb.

4 variants

IconsGallery

Inventory of the standalone components/icons/* SVG components.

1 variant

LogoWrapper

White background container for displaying brand logos consistently. Square aspect ratio, white background for logo visibility, centered content with grid layout — used in BrandBlock component.

5 variants

MetadocThumb

MetaModule documentation thumbnail: a document sheet with a folded corner carrying a gear, in the shared static-page thumb frame.

5 variants

MmRefThumb

MetaModule Module Reference thumbnail: a Eurorack module panel with a magnifier floating over its right edge, in the shared static-page thumb frame.

5 variants

NewsThumb

Stylized newsletter-article thumbnail: "NEWS" + volume number with diagonal line decorations, in grid/list/detail size variants.

7 variants

P4m2026Thumb

Stylized P4M 2026 form thumbnail: a centered p4m glyph with diagonal line decorations matching ContactThumb/NewsThumb.

5 variants

PhotoDialog

Stateful photos lightbox island: prev/next navigation, panel toggle, history sync.

2 variants

PhotoDialogContent

Presentational lightbox markup for the photos dialog: image, caption panel, nav.

4 variants

PhotoTile

Square photo thumbnail tile, optionally wrapped in a lightbox-opening anchor.

2 variants

RefChildThumbs

The four /ref/ hub child thumbnails side by side — MmRefThumb, ManualsThumb, MetadocThumb, WebSynthThumb — for checking glyph legibility and frame parity at row and hero sizes.

3 variants

ResponsiveImage

Optimized responsive image with a CSS-only blur-up placeholder. Self-resolves metadata from the slug when not pre-supplied.

4 variants

StaticPageThumbs

Gallery of the 10 static-page / guide-series thumbnail components: the shared glyph-cutout frame (about/airpay/manuals/support/tokushoho/warranty) plus the KumikoThumb-based family (mm-deep, series, synth-kw).

4 variants

SvgIconRegistry

Centralized zfb-safe SVG registry: brand logos + UI icons (components/svg/index.ts).

1 variant

ThumbFrame

Shared bordered-square / white-X-diagonal frame behind the 13 static-page and /ref/ glyph thumbs plus the NEWS volume thumbs (issue #2446). Renders the frame chrome only — the glyph or text block is passed as children.

4 variants

WebSynthThumb

Zudo Web Synth thumbnail: a wave display showing one sine cycle above three pointer knobs, in the shared static-page thumb frame.

5 variants

Lists & Cards

ArticleListCard

Shared article/news list card: [square thumb | badge · title · 作成-date] on the first row, with the excerpt + tags on a full-width row below.

5 variants

ArticleListItem

Card-style list item for a product/note article, with image, tags, and dates.

6 variants

GuideArticleList

Grid container of GuideArticleListItem cards for a list of guide articles.

4 variants

GuideArticleListItem

Card-style list item for a guide article, with image, tags, and dates.

4 variants

GuidesLanding/PickupSection

The Pickup block at the top of the guides landing page — a grid of guide article cards, one column below lg and two at lg+. Renders nothing when there are no visible entries.

3 variants

SeriesList

Grid container of series cards linking to each guide-article series.

3 variants

Filters & Search

FilteredPagination

Button-based pagination for the products-filter island — same visual as the SSR Pagination but calls back to the island for in-place page transitions.

4 variants

FilterSectionHeading

Filter-section heading shell — full-width top rule plus an uppercase label — shared by the /products/ and /metamodule-ref/ filter panels.

3 variants

KeywordHighlight

Highlights every case-insensitive keyword match inside a text run with the price-yellow <mark> background — used by ProductCardSimple search results.

4 variants

ProductBrandFilter

Row of brand-logo thumbnails acting as multi-select filter toggles for the /products/ filter; logo-less brands fall back to a brand-name text square.

3 variants

ProductTagFilter

Row of arrow-tag pills acting as multi-select filter toggles for the /products/ filter, each suffixed with its match count.

3 variants

SearchResultItem

One MiniSearch result: highlighted title + excerpt (`<mark>` matches) and an optional tag row.

4 variants

Product Cards

FeaturedProducts

Page-one featured product grid for /products/: shared deterministic home selection and ProductThumb treatment, with 9/12/18/20 responsive tile tiers.

2 variants

ProductCardCore

Shared layout shell for product cards (grid, name/subtitle/description, image container, price slot) — the internals shared by ProductNavItem and ProductGridItem.

5 variants

ProductCardPrice

Compact price shown beneath a product-card thumbnail: flat price, priceLabel override, priceRange ("〜"), or suppressed entirely for discontinued items.

6 variants

ProductCardSimple

Bundle-safe product card for the products-filter island — bare <a>/<img>, blurhash placeholder, keyword highlighting, and the same status/bundle/brand badge overlays as ProductGridItem.

8 variants

ProductDescription

Truncated (4-line clamp) product description used consistently across product-card components.

3 variants

ProductGridItem

SSR-only product grid card for the /products/ listing — thumbnail, name/description, price slot, and status/bundle/brand badge overlays.

8 variants

ProductNavItem

Related-product nav card: ResponsiveImage + status/bundle badges + name/subtitle/description + price, wrapping ProductCardCore for the brand/related-products grid.

7 variants

ProductNavList

Product grid — variant-driven responsive column layout for the homepage, hot-stock, /products listing, and brand pages.

6 variants

SalePrice

Time Sale price renderer (#1113): plain price outside a sale window, or struck-through original + red sale price + discount badge inside one. Covers the sale-price.tsx / sale-price-slot.tsx family.

5 variants

Product Pages

PurchaseNav

Product purchase-status block: routes a resolved product through the 6 Mercari status states (available/sold/incoming/askToBuy/discontinued/unavailable).

11 variants

IncomingItem

PurchaseNav right-column block for incoming products: "Coming soon..." status plus the optional notify-me/reservation action buttons.

5 variants

DiscontinuedItem

PurchaseNav right-column notice for discontinued products: italic uppercase label, locale status message, and a subline noting specs are kept for reference.

3 variants

BrandDocsDialog

Trigger link + modal note about official brand documentation, shown below the manuals/guides grid on RYK and OXI product pages.

2 variants

BrandHero

Decorative animated vector artwork band for brand pages, with pause / replay controls. The canvas is aria-hidden; the page h1 stays the heading.

2 variants

EndedCallout

Amber-bordered callout for MDX pages announcing something has ended. Warning icon, locale-aware default heading/body (product-discontinued preset), optional heading override and children body override for other ended states (e.g. finished campaigns).

4 variants

RelatedProducts

Product cards for a set of related-product ids, pulled live from the real catalog (`src/data/products.mjs`) — no mock layer. Shows a warning for any id not found in the catalog.

3 variants

Article Typography

Typography

MDX article typography components — headings, paragraphs, lists, and blockquotes.

9 variants

H4

MDX <h4> override — font-futura bold at text-sm (md:text-lg), with an optional anchor id and className merge.

3 variants

H5

MDX <h5> override — font-futura bold at text-sm (md:text-base), with an optional anchor id and className merge.

3 variants

H6

MDX <h6> override — the smallest heading level, font-futura bold at text-sm, with an optional anchor id and className merge.

3 variants

A

MDX link override — routes through the shared Link component, applies zd-invert-color-link styling, and auto-prefixes a Discord icon for discord.gg invite links.

4 variants

Code

MDX inline-<code> override — monospace text on the code-bg/code-fg token pair, merging any extra className onto its fixed class list.

3 variants

Em

MDX <em> override — italic emphasis, merging any extra className onto its fixed class list.

3 variants

Hr

MDX <hr> override — a 4px solid horizontal rule with responsive vertical margins, merging any extra className.

2 variants

MetamoduleDocContentHeadings

Doc-content h2/h3 overrides for /metamodule-doc/ pages: no bold, a gradient hairline before each h2 section (instead of the default article H2’s thick double border), and the same ## TOC → .zd-toc-pointer marker contract as the site default H2.

3 variants

MetamoduleDocMeta

作成/更新/著者 meta row + a 原文 (original source) link built from originalTitle/originalUrl — replaces the source Docusaurus site’s DocItem footer block.

2 variants

Strong

MDX <strong> override — renders bold text in the zd-strong accent color, merging any extra className onto its fixed class list.

4 variants

Table

MDX table with GFM support — bordered cells, responsive text sizing, and a horizontal-scroll wrapper for tables wider than the article column.

2 variants

Article Layout

Layout/Column

Bordered container for highlighting content sections in MDX articles. White border for visual separation, responsive padding — used for callouts, asides, or featured content.

5 variants

Layout/FlowRoot

Utility wrapper that creates a new block formatting context. Applies CSS `flow-root` display to contain floated elements within their parent container — used with floated images in MDX articles.

3 variants

Layout/LayoutDivide

Two-column grid layout for side-by-side content in MDX articles. Responsive: stacked on mobile, side-by-side on desktop (lg+). Used with `LayoutDivideItem` for each column.

3 variants

Layout/LayoutDivideItem

Per-column wrapper for the LayoutDivide two-column grid. Adds responsive bottom padding and a DOM-contract hook; forwards HTML attributes and merges className.

2 variants

MetamoduleDocShell

280px sidebar / fluid content / xl+ TOC-rail grid for /metamodule-doc/ article pages, capped at the zudo-doc band width (epic decision 6). Prose is max-w-none — no fixed em measure.

1 variant

Article Blocks

ArticleHeroHeader

Shared SSR pieces of the article header — the square bordered hero image (ArticleHeroImage) and the thick-top-border title block (ArticleTitleBlock).

5 variants

BrandBlock

Layout wrapper for brand/designer intro sections, reused by every Brand* MDX component plus Saucer and Denbi. Renders IntroBlock with the logo/image as the media slot — SVG logos get a white LogoWrapper square, raster images (already backgrounded) render directly via `noLogoWrapper`.

3 variants

Conversation

Dialogue layout for interview- / podcast-style articles. Renders a vertical stack of speaker turns; the `role` prop on `<Turn>` switches the visual accent (`guest` accented, `host` secondary).

2 variants

InfoBox

Callout box for highlighting important information in MDX articles. Neutral white dashed border with square corners, responsive padding, prose styling for rich text content — it reads as an aside within the article rather than a status banner.

5 variants

LinkCards

Rich internal-link nav cards. Renders the pure `LinkCard` presentational component (`@/components/mdx/link-card`) directly from fixture `ResolvedLinkTarget` data, mirroring what the Wave 1 href resolver (#1224) would produce for each real href — `link-card.tsx` has no server-side dependency, so the story never reaches `@takazudo/zfb/content` (`getCollection`) even under unbundled dev serving (#2380). Covers all thumb kinds against realistic site content: `image` (product/guide/series/note), `svg` (built page + `/s/*`), and `news` (highlights `news_no` fallback, no hero image). An unresolvable href falls back to a plain link.

3 variants

Outro

Dashed-top-border wrapper for a closing MDX block (`zd-prose-flow` for children spacing) — used for article afterwords / editorial notes.

2 variants

PersonIntroBlock

Surface-panel introduction block for a person (artist, designer, collaborator) in MDX articles. Eyebrow, name, muted meta line with hairline divider, article-rhythm prose body, external links, and an optional portrait photo — right column on desktop, centered above the text on mobile. Looks complete without a photo.

3 variants

Saucer

SAUCER designer brand-intro block — locale-aware bio text via BrandBlock, reused across product pages that credit the SAUCER design collaboration.

2 variants

Article Media & Embeds

ArticleImage

Full-width article figure with an optional caption and enlarge affordance.

4 variants

ExImg

Bordered figure wrapper around ResponsiveImage — supports float-left/right, auto-prefixes bare slugs with /images/p/, and includes a 13-shape prose-float alignment matrix.

4 variants

Img

MDX <img> override — resolves /images/p/ paths and bare pipeline slugs to a responsive ResponsiveImage with the click-to-zoom enlarge affordance, falling back to a plain <img> for external URLs.

3 variants

ImgsGrid

Multi-image grid — responsive column count via `divide`, optional per-image captions, a centered single-column layout when only one image is passed, and a per-cell click-to-enlarge (lightbox) affordance for images with pipeline variants.

3 variants

InstagramEmbed

Embeds Instagram posts and reels in MDX articles. Supports post (/p/) and reel (/reel/) URL formats, URL validation for instagram.com, lazy loading for performance.

4 variants

Mermaid

Client-only Mermaid diagram embed for MDX articles. Renders a fallback <pre> of the raw chart source until the client mounts and Mermaid finishes rendering the SVG.

2 variants

SynthDiagram

Pre-generated SVG diagram embed for synth-keyword articles (sub-packages/synth-svg output) — auto-prefixes a bare filename with /images/synth-svg/.

2 variants

Youtube

Embeds YouTube videos in MDX articles with privacy-enhanced mode. Supports multiple URL formats (youtube.com, youtu.be), uses youtube-nocookie.com, responsive 16:9 aspect ratio, lazy loading.

6 variants

YoutubeAt

Click-to-play YouTube embed facade that shows a video capture frame as a cover image with play button overlay and timestamp badge. Clicking replaces the cover with the actual YouTube iframe.

6 variants

Product-Specific Blocks

Addac120sBundleTable

Bundle-discount comparison table for the ADDAC120s "Four Strings" series (商品名/セット価格/単価合計/バンドルディスカウント). No H2/H3/caption — embeddable as a standalone MDX block.

2 variants

Addac120sNav1

Module/frame product grid for the ADDAC120s "Four Strings" series. Renders the module/frame nav cards only — no H2/H3/caption, embeddable as a standalone MDX block.

2 variants

Addac120sNav2

Bundle/system product grid for the ADDAC120s "Four Strings" series. BUNDLE badges render automatically; no headings/caption — embeddable as a standalone MDX block.

2 variants

CaseBuilderAcrylicMaterials

The four material families of the case-3d color→material adapter (#1934), each painting a whole case one color: clear acrylic (full transmission), translucent red acrylic (transmission + colored attenuation, opacity 0.6), an opaque 3DP filament (matte, non-transmissive), and the red/green silk stripe approximation. Transmission is lit by a RoomEnvironment PMREM env map; opacity stays 1 (translucency is physical). three.js loads only client-side via dynamic import.

4 variants

CaseBuilderAssembled3D

Zudo Block net SVGs folded into assembled 3D panel shells (open-top rack box: flat bottom, two side walls, low front/back rail strips). three.js loads only client-side via dynamic import — never in the eager islands bundle.

4 variants

CaseBuilderBackdropPicker

Thumbnail picker for the 3D stage backdrop presets. Each thumb is the CSS twin of its preset, generated from the same definition module the WebGL scene consumes, so swatch and stage cannot drift.

3 variants

CaseBuilderColorGrid

Photo-backed colour palette grid for a material (acrylic vs 3D print). The material-sample photo sits over a solid swatch so a failed image still reads as the colour; the current colour is marked.

2 variants

CaseBuilderPanelList

Every panel of a case as a clickable row — including list-only panels with no SVG path (e.g. 10BOX-deep stand parts, tagged "no diagram"). Each row shows the panel colour swatch and colour name.

2 variants

CaseBuilderPanelProof

Proof-of-concept three.js extrusion of one Zudo Block net-SVG panel (bevelEnabled: false, 5mm deep, holes preserved). three.js loads only client-side via dynamic import — never in the eager islands bundle.

2 variants

CaseBuilderPresetGrid

Preset cards for the current model. Each card previews the preset as a per-panel swatch strip so the primary/secondary split is visible; the active preset is marked.

2 variants

CaseBuilderStage

Exploded-view SVG stage: fetches the vendored pre-stamped net SVG at runtime, paints panel fills from the derived colour map, and exposes one delegated click listener. Hover/selected/transparent stroke states are pure CSS.

2 variants

CoralKnob

Visualizes the OXI Coral center encoder knob with its 10-position LED ring. Positions 1-5 are on the left (bottom to top), positions 6-10 are on the right (top to bottom). Supports engine, voice, midi, and custom label modes.

11 variants

OxiGrid

Renders an OXI ONE MKII-style 16x8 pad grid for use in MDX articles. Uses CSS Grid with 1fr columns for auto-expandable sizing. Supports pads with colors/labels, playhead, init/end markers, scale labels, and seq buttons.

8 variants

ZudoBlockCase3dPreview

A 2-column grid of four static poster cards (one per case size), mirroring the net-diagram grid above it. Clicking a card opens a dialog with the live interactive 3D viewer for that size, plus a backdrop chooser, 3 color presets, and camera controls.

3 variants

ZudoBlockCaseDiagrams

Responsive four-case gallery with a native dialog for complete nets and explicitly ordered dimensioned panels.

7 variants

MetaModule Reference

MDX/ModulePanel

Annotated module panel embedded in MetaModule-reference MDX articles.

1 variant

MetaModule Reference/AnnotationPanel

Interactive annotated module image used in MetaModule-reference articles and dialogs.

3 variants

MetaModule Reference/ModuleFeedback

Collapsed, localized correction form shown after each MetaModule reference detail panel. Reuses the site contact email and Turnstile pipeline.

2 variants

MetaModuleExpanders

MetaModule expanders intro + related-product cards, migrated from the src/mdx/fragments/metamodule-expanders.mdx fragment.

2 variants

MetaModuleGuideLink

Prominent card-style link to the MetaModule product detail page, used in synth-kw guide articles.

2 variants

ModuleCard

SSR-only MetaModule reference card: panel thumbnail + name/plugin + (list layout) CPU load, tags, and description columns.

5 variants

ModuleDialog

Fullscreen MetaModule reference detail dialog: thumbnail strip, title bar with 基本情報/パネルの説明 tabs, close/prev/next controls, and a scrollable content region.

4 variants

VcvModuleRef

Grid of MetaModule-compatible VCV Rack modules, each linking to its VCV Library page.

3 variants

Web Synth

MDX/WebSynthEmbed

Inline Web Synth patch facade embedded in MDX articles; loads the full patcher on play.

4 variants

Web Synth/Context Menu

Anchored popover menu (labels, checks, radios, actions) used across the Web Synth patcher.

2 variants

Web Synth/Module Menu

Per-module options menu (panel/scope UI controls, duplicate, delete) for the patcher.

2 variants

Web Synth/Module Node

Draggable module card (params, scope, ports) rendered on the Web Synth patcher surface.

10 variants

Web Synth/Module Picker

Modal picker listing every Web Synth module manifest for adding a module to a patch.

2 variants

Web Synth/Patcher Integration

End-to-end Web Synth patcher wired to real module nodes, menus, and the picker.

5 variants

Web Synth/Patcher Surface

Pan/zoom patcher canvas hosting module cards, cables, and viewport toolbar actions.

5 variants