{ "name": "Bildpunkt", "package": "@audiohays/tonewedge-ui", "stableVersion": "0.1.0", "previewVersion": "0.3.0-dev.15", "status": "Private package; public read-only catalog and playground. No npm registry release.", "install": "Pin a reviewed private package artifact or vendor its generated CSS/JS. The published npm registry is not a supported install path yet.", "audio": "The visualizer accepts a host-supplied normalized energy value. The public playground uses a manual synthetic slider and never captures audio.", "purpose": "General-purpose controls, content layouts and visual materials. Tonewedge is the primary application example, not a dependency.", "sections": [ { "id": "buttons", "label": "Buttons", "hint": "Press, trigger & hold", "stories": [ "buttons" ] }, { "id": "switches", "label": "Switches", "hint": "On and off", "stories": [ "toggle", "footswitch" ] }, { "id": "faders", "label": "Faders", "hint": "Slide into place", "stories": [ "fader" ] }, { "id": "knobs", "label": "Knobs", "hint": "A more tactile turn", "stories": [ "knob", "knob-faces" ] }, { "id": "inputs", "label": "Inputs", "hint": "Type, choose & adjust", "stories": [ "fields", "native-controls" ] }, { "id": "choices", "label": "Choices", "hint": "One value from a group", "stories": [ "choices" ] }, { "id": "tabs", "label": "Tabs", "hint": "A place for each view", "stories": [ "tabs" ] }, { "id": "navigation", "label": "Navigation", "hint": "Cards, dials & direction", "stories": [ "section-cards", "navigation", "rocker", "navigation-options" ] }, { "id": "dialogs", "label": "Dialogs & menus", "hint": "Open a conversation", "stories": [ "dialogs", "interaction-controls" ] }, { "id": "pedals", "label": "Image toggles", "hint": "Your artwork, on or off", "stories": [ "image-toggle", "pedal-variants" ] }, { "id": "directories", "label": "Lists & pickers", "hint": "Browse or choose items", "stories": [ "modules", "picker", "guitar-list" ] }, { "id": "cards", "label": "Cards", "searchAliases": [ "Cards & lists" ], "hint": "Content, status & actions", "stories": [ "cards", "asset-card" ] }, { "id": "glass", "label": "Glass", "hint": "Optional surface material", "stories": [ "frosted-surface", "glass-workbench" ] }, { "id": "fades", "label": "Fades", "hint": "Room for the foreground", "stories": [ "gradient-fade" ] }, { "id": "motion", "label": "Motion & meters", "hint": "Signals in living pixels", "stories": [ "visualizer", "readout" ] }, { "id": "icons", "label": "Icons", "hint": "1,036 shapes, one pixel language", "stories": [ "icons" ] }, { "id": "spacing", "label": "Spacing", "hint": "The space between things", "stories": [ "spacing" ] } ], "storyNames": { "image-toggle": "Image toggle", "navigation-options": "Compare styles", "icons": "Pixelarticons", "buttons": "Buttons", "knob": "Knobs", "fader": "Faders", "toggle": "Switches", "footswitch": "Tonewedge footswitch", "fields": "Text fields", "choices": "Choices", "native-controls": "Native controls", "knob-faces": "Classic knobs", "section-cards": "Section navigation", "tabs": "Tabs", "navigation": "Navigation dial", "rocker": "Previous / next", "dialogs": "Dialog & carousel", "interaction-controls": "Menus & dialogs", "pedal-variants": "Tonewedge pedals", "modules": "Item directory", "picker": "Tonewedge effects", "guitar-list": "Tonewedge guitars", "asset-card": "Asset card", "frosted-surface": "Frosted surface", "gradient-fade": "Gradient fade", "cards": "Content card", "glass-workbench": "Refracted field", "visualizer": "Dither visualizer", "readout": "Readout & meter", "spacing": "Spacing" }, "components": [ { "id": "navigation-options", "name": "Navigation style studies", "css": [ "tw-nav-options" ], "description": "Selected pixel-underline tabs and cast numbered steps, alongside four retained comparison directions.", "example": "import { mountNavigationOptions } from \"@audiohays/tonewedge-ui/navigation-options\";\nconst studies=mountNavigationOptions(host);\nstudies.destroy();", "category": "Navigation", "searchAliases": [], "scope": "General purpose", "storyId": "navigation-options", "sectionId": "navigation" }, { "id": "icons", "name": "Pixelarticons", "css": [ "tw-icon", "tw-icon-catalog" ], "description": "1,036 locally bundled MIT pixel icons from Gerrit Halfmann. Search the free set, choose a style, and copy a per-icon import or inline SVG. Inherits semantic ink; no icon font, React runtime or CDN.", "example": "import icon from \"@audiohays/tonewedge-ui/icons/heart.mjs\";\nimport { createIcon } from \"@audiohays/tonewedge-ui/icons\";\nbutton.append(createIcon(icon)); // button supplies its action label\nconst labeled=createIcon(icon,{label:\"Favorite\",size:48});", "category": "Foundations", "searchAliases": [], "scope": "General purpose", "storyId": "icons", "sectionId": "icons" }, { "id": "section-cards", "name": "Section navigation", "css": [ "tw-section-card", "tw-section-stack" ], "description": "Physical overlapping sheets compose shared ordered-dither frost, a label fade, contact depth and an eased layout controller. The host owns selection, routes and revealed details.", "example": "import { createSectionCard } from \"@audiohays/tonewedge-ui/section-cards\";\nconst card=createSectionCard({label:\"Materials\",caption:\"Library\",controls:\"details\",onSelect:()=>openDetails()});\nappearance.attachMaterial(card.material);\ncard.setSelected(true); // silent host mirror\ncard.destroy();", "category": "Navigation", "searchAliases": [ "Section cards" ], "scope": "General purpose", "storyId": "section-cards", "sectionId": "navigation" }, { "id": "native-controls", "name": "Native control factories", "css": [ "tw-control", "tw-control-button", "tw-control-input", "tw-control-range" ], "description": "Shared factories and safe adoption for real native controls. The host owns application data; programmatic updates are silent and native events remain native.", "example": "import { createButton, createInput, createSelect, createRange, createToggle } from \"@audiohays/tonewedge-ui/controls\";\nconst level=createRange({element:existingInput,kind:\"fader\",onInput:event=>setHostLevel(event.target.value)});\nlevel.update({value:50}); // silent\nlevel.destroy(); // preserves adopted DOM/host handlers", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "native-controls", "sectionId": "inputs" }, { "id": "interaction-controls", "name": "Shared interaction controllers", "css": [ "tw-tabs", "tw-menu", "tw-dialog", "tw-carousel", "tw-fullscreen-overlay" ], "description": "Roving tabs, menus, native dialogs, carousel gestures, fullscreen focus and pan scrolling, with callbacks for host actions.", "example": "import { createTabs, createMenu, createDialog, bindCarousel, bindFullscreenOverlay } from \"@audiohays/tonewedge-ui/interaction-controls\";\nconst tabs=createTabs({element:tabList,activeId:\"amp\",onSelect:id=>openPanel(id)});\ntabs.setValue(\"tone\"); // silent host mirror\ntabs.destroy();", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "interaction-controls", "sectionId": "dialogs" }, { "id": "frosted-surface", "name": "Frosted surface", "css": [ "tw-frosted-surface", "tw-glass-plate__canvas" ], "description": "Reusable ordered-dither frost at a fixed CSS-pixel pitch. No pane geometry, blur or text ownership; composes with the separate gradient-fade effect.", "example": "import { createFrostedSurface } from \"@audiohays/tonewedge-ui/glass\";\nconst frost=createFrostedSurface(host,{pixelSize:3,state:{palette:\"spectral\",grain:72}});\nappearance.attachMaterial(frost);\n// On unmount: frost.destroy();", "category": "Materials", "searchAliases": [], "scope": "General purpose", "storyId": "frosted-surface", "sectionId": "glass" }, { "id": "gradient-fade", "name": "Gradient fade", "css": [ "tw-gradient-fade", "tw-fade-host", "tw-surface-content" ], "description": "An independent directional background overlay. Protects text without masking or fading the text; stop geometry remains host-owned.", "example": "import { createGradientFade } from \"@audiohays/tonewedge-ui/effects\";\n// Load effects.css. Put content above the overlay with tw-surface-content.\nconst fade=createGradientFade(host,{direction:90,color:\"#e7e5d7f7\",start:240,end:380});\nfade.update({start:measuredTitleEnd,end:measuredFadeEnd});\n// On unmount: fade.destroy();", "category": "Effects", "searchAliases": [], "scope": "General purpose", "storyId": "gradient-fade", "sectionId": "fades" }, { "id": "spacing", "name": "Semantic spacing", "css": [ "--tw-space-component-padding", "--tw-space-component-gap", "--tw-space-section-gap", "--tw-space-page-gutter" ], "description": "One canonical scale, semantic layout roles and CSS/JS/native exports. Real shared components consume the aliases; calibrated artwork stays separate.", "example": "import { spacingPixels, spacingRolesPixels } from \"@audiohays/tonewedge-ui/tokens\";\n// CSS: padding: var(--tw-space-component-padding);\n// C++: tonewedge::ui::spacing::componentPadding;", "category": "Foundations", "searchAliases": [], "scope": "General purpose", "storyId": "spacing", "sectionId": "spacing" }, { "id": "glass-plate", "name": "Glass overlay", "css": [ "tw-glass-plate", "tw-glass-plate__content", "tw-glass-panel", "tw-glass-button" ], "description": "An optional decorative canvas behind existing content. Adds refracted glass to a card, header or readout without owning its layout, controls or data.", "example": "import { createGlassPlate } from \"@audiohays/tonewedge-ui/glass\"; const plate=createGlassPlate(host,{palette:\"spectral\",material:\"frosted\"}); plate.update({palette:\"cobalt\"}); plate.destroy();", "category": "Materials", "searchAliases": [ "Glass Pixel plate" ], "scope": "General purpose", "storyId": "glass-workbench", "sectionId": "glass" }, { "id": "buttons", "name": "Pixel button", "css": [ "tw-button", "tw-button--accent", "tw-button--signal" ], "description": "Approved Glass Pixel blue, neutral and signal-lime roles on clean tactile faces, rounded corners and sparse pixel edge texture. Cast, steel and explicit previous skins; 44px native touch targets.", "example": "", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "buttons", "sectionId": "buttons" }, { "id": "tabs", "name": "Pixel-underline tabs", "css": [ "tw-tabs", "tw-tab" ], "description": "Open labels with palette-colored dither rising from the selected underline.", "example": "
", "category": "Navigation", "searchAliases": [], "scope": "General purpose", "storyId": "tabs", "sectionId": "tabs" }, { "id": "cards", "name": "Content card", "css": [ "tw-card", "tw-card__body" ], "description": "A content container with optional header, body and status. Layout is independent of glass; use real buttons or links for actions.", "example": "
\n
Weekend projectReady
\n
Plans, notes and next steps.
\n
\n// Optional material: createGlassPlate(cardElement, options).", "category": "Layout", "searchAliases": [ "Preset card" ], "scope": "General purpose", "storyId": "cards", "sectionId": "cards" }, { "id": "fields", "name": "Text field", "css": [ "tw-field", "tw-input" ], "description": "Labeled text entry with pixel focus treatment.", "example": "", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "fields", "sectionId": "inputs" }, { "id": "toggle", "name": "Effect toggle", "css": [ "tw-toggle" ], "description": "Native checkbox with a pixel switch face.", "example": "", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "toggle", "sectionId": "switches" }, { "id": "knob", "name": "Physical parameter dial", "css": [ "tw-knob", "tw-knob__face" ], "description": "Workshop 14° radial face with nested accessible range; bindRotary handles drag, fine mode, wheel and cancellation. Call its disposer on unmount.", "example": "\nimport { renderDetailedKnob } from \"@audiohays/tonewedge-ui/knobs\";\nimport { bindRotary } from \"@audiohays/tonewedge-ui/rotary\";\nconst input=document.querySelector(\"#mix\"), face=document.querySelector(\"#mix-face\");\nconst paint=()=>renderDetailedKnob(face,Number(input.value),0,100,\"detail-14-radial\");\ninput.addEventListener(\"input\",paint);paint();const dispose=bindRotary(input);\n// On unmount: input.removeEventListener(\"input\",paint); dispose();", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "knob", "sectionId": "knobs" }, { "id": "fader", "name": "Pixel fader", "css": [ "tw-fader", "tw-fader__input", "tw-fader--vertical" ], "description": "Native range with cast or steel thumb; horizontal and vertical source variants.", "example": "", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "fader", "sectionId": "faders" }, { "id": "rocker", "name": "Previous/next rocker", "css": [ "tw-rocker" ], "description": "Two native 44px buttons on one cast-cap plate.", "example": "
2 / 5
", "category": "Navigation", "searchAliases": [], "scope": "General purpose", "storyId": "rocker", "sectionId": "navigation" }, { "id": "navigation", "name": "Detented navigation dial", "css": [ "tw-navigation" ], "description": "Six destination 14° radial dial with pointer preview, keyboard commit/cancel, and source icon art.", "example": "import { createNavigationDial } from \"@audiohays/tonewedge-ui/navigation\"; const nav=createNavigationDial(host,{onSelect:id=>openPanel(id)}); nav.destroy();", "category": "Navigation", "searchAliases": [], "scope": "General purpose", "storyId": "navigation", "sectionId": "navigation" }, { "id": "image-toggle", "name": "Image toggle", "css": [ "tw-image-toggle", "tw-image-toggle__button", "tw-image-toggle__surface" ], "description": "Any host-owned image becomes an accessible native toggle: muted off, raised on with a palette dither glow, and separately disabled. Pixel rendering is opt-in. Pedal controls share this primitive.", "example": "import { createImageToggle, bindImageToggle } from \"@audiohays/tonewedge-ui/image-toggle\"; const toggle=createImageToggle(host,{src:\"./lamp.png\",label:\"Desk lamp\",pressed:false,onChange:on=>setLamp(on)}); toggle.setPressed(true); toggle.destroy();", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "image-toggle", "sectionId": "pedals" }, { "id": "footswitch", "name": "Tonewedge footswitch", "css": [ "tw-pedal" ], "description": "Tonewedge example: original distortion pedal art with an accessible bypass button, LED and host-owned state.", "example": "import { createFootswitch } from \"@audiohays/tonewedge-ui/footswitch\"; const pedal=createFootswitch(host,{label:\"Distortion\",onChange:enabled=>setBypass(enabled)}); pedal.destroy();", "category": "Controls", "searchAliases": [ "Pedal footswitch" ], "scope": "Tonewedge example", "storyId": "footswitch", "sectionId": "switches" }, { "id": "choices", "name": "Single-choice tiles", "css": [ "tw-choices", "tw-choice" ], "description": "Native radio tiles for one choice from a group. Supply text, an image or a color; the host owns values and application state.", "example": "
View density\n \n \n
", "category": "Collections", "searchAliases": [ "Image and palette choices", "Image and palette tiles" ], "scope": "General purpose", "storyId": "choices", "sectionId": "choices" }, { "id": "readout", "name": "Readout and meter", "css": [ "tw-readout" ], "description": "A measured value with native meter semantics. Glass is optional decoration; the host supplies the value.", "example": "
Storage used42%42%
", "category": "Displays", "searchAliases": [ "Glass readout and meter" ], "scope": "General purpose", "storyId": "readout", "sectionId": "motion" }, { "id": "dialog", "name": "Dialog and disclosure", "css": [ "tw-dialog", "tw-disclosure" ], "description": "Native dialog, details and summary with material styling.", "example": "
", "category": "Controls", "searchAliases": [], "scope": "General purpose", "storyId": "dialogs", "sectionId": "dialogs" }, { "id": "carousel", "name": "Item carousel", "css": [ "tw-carousel", "tw-carousel__card" ], "description": "Previous/next buttons, numbered steps and content cards. The host owns items and index; Tonewedge presets are one example.", "example": "
Astral Clean
", "category": "Navigation", "searchAliases": [ "Preset carousel" ], "scope": "General purpose", "storyId": "dialogs", "sectionId": "dialogs" }, { "id": "classic-knobs", "name": "Classic knob controls", "css": [ "tw-knob", "tw-knob__face" ], "description": "Seven retained Tonewedge faces with source-specific projected or logical tick geometry. The original angled face has a baked marker and is reference only.", "example": "\nimport { renderLegacyKnob } from \"@audiohays/tonewedge-ui/knobs\"; import { bindRotary } from \"@audiohays/tonewedge-ui/rotary\"; const input=host.querySelector(\"input[type=range]\"), face=host.querySelector(\".tw-knob__face\"); const paint=()=>renderLegacyKnob(face,Number(input.value),0,100,\"knob-05-short\"); input.addEventListener(\"input\",paint); paint(); const dispose=bindRotary(input); // On unmount: input.removeEventListener(\"input\",paint); dispose();", "category": "Controls", "searchAliases": [], "scope": "Tonewedge example", "storyId": "knob-faces", "sectionId": "knobs" }, { "id": "pedal-family", "name": "Tonewedge pedal finishes", "css": [ "tw-pedal-card" ], "description": "Tonewedge example: all 37 source finish IDs and print codes tint only the shared sprite enamel; host callbacks own edit and bypass.", "example": "import { createPedalCard } from \"@audiohays/tonewedge-ui/pedals\"; const card=createPedalCard(host,{id:\"phaseLock\",onToggle:(on,id)=>saveBypass(id,on),onEdit:id=>openEditor(id)}); card.setPedal(\"runeArpeggiator\"); card.destroy();", "category": "Controls", "searchAliases": [ "Pedal finish family", "Pedal family" ], "scope": "Tonewedge example", "storyId": "pedal-variants", "sectionId": "pedals" }, { "id": "module-directory", "name": "Item directory", "css": [ "tw-module-directory", "tw-module-entry" ], "description": "A grouped collection of destinations with host labels, details, icons and routes. The retained Tonewedge/Pi catalog is the optional default data; entries without a route remain disabled.", "example": "import { createModuleDirectory } from \"@audiohays/tonewedge-ui/assemblies\";\nconst directory=createModuleDirectory(host,{items:[\n {id:\"projects\",section:\"Workspace\",label:\"Projects\",detail:\"Plans and progress\",icon:\"browse\",route:\"/projects\"},\n {id:\"archive\",section:\"Workspace\",label:\"Archive\",detail:\"Not available\",disabled:true}\n],onSelect:route=>navigate(route)});\ndirectory.destroy();", "category": "Collections", "searchAliases": [ "Module directory" ], "scope": "General purpose", "storyId": "modules", "sectionId": "directories" }, { "id": "effect-picker", "name": "Tonewedge effect picker", "css": [ "tw-effect-picker", "tw-effect-picker__card" ], "description": "Tonewedge example: pedal-art picker cards distinguish available, already-added and model-required effects. This domain assembly is not a generic list primitive.", "example": "import { createEffectPicker } from \"@audiohays/tonewedge-ui/assemblies\"; const picker=createEffectPicker(host,{items:[{id:\"chorus\",label:\"Chorus\"}],onSelect:id=>addEffect(id)}); picker.destroy();", "category": "Collections", "searchAliases": [], "scope": "Tonewedge example", "storyId": "picker", "sectionId": "directories" }, { "id": "guitar-list", "name": "Tonewedge guitar list", "css": [ "tw-guitar-list", "tw-guitar-entry" ], "description": "Tonewedge example: selectable guitar entries with name, description and revision. The host owns recall; the API retains its domain-specific names and defaults.", "example": "import { createGuitarList } from \"@audiohays/tonewedge-ui/assemblies\"; const list=createGuitarList(host,{items:[{id:\"a\",name:\"Astral Clean\"}],onSelect:id=>selectGuitar(id)}); list.destroy();", "category": "Collections", "searchAliases": [ "Guitar library list" ], "scope": "Tonewedge example", "storyId": "guitar-list", "sectionId": "directories" }, { "id": "asset-card", "name": "Asset card", "css": [ "tw-asset-card", "tw-asset-card--capture" ], "description": "A content/status container with host-supplied actions for a file, resource or capture. No upload, storage or application logic is included.", "example": "import { createAssetCard } from \"@audiohays/tonewedge-ui/assemblies\";\nconst card=createAssetCard(host,{title:\"Project files\",description:\"Documents for the next review.\",status:\"3 files ready\",actions:[{label:\"Review files\",onClick:openFiles}]});\ncard.destroy();", "category": "Layout", "searchAliases": [ "Asset/capture card", "Asset and capture card", "Cabinet capture" ], "scope": "General purpose", "storyId": "asset-card", "sectionId": "cards" }, { "id": "glass-field", "name": "Glass field", "css": [], "description": "A decorative canvas field with optional refracted panes. The playground composition is a material study, not a required card layout. Paused by default.", "example": "import { createGlassField } from \"@audiohays/tonewedge-ui/glass\";\nconst field=createGlassField(canvas,{state:{material:\"frosted\"}});\nfield.update({grain:60});\nfield.destroy();", "category": "Materials", "searchAliases": [ "Glass pixel field" ], "scope": "General purpose", "storyId": "glass-workbench", "sectionId": "glass" }, { "id": "visualizer", "name": "Dither visualizer", "css": [], "description": "Six decorative pixel scenes driven by a host-supplied normalized value. The catalog uses a manual slider, with no audio connection.", "example": "import { BildpunktVisualizer } from \"@audiohays/tonewedge-ui/visualizer\";\nconst visual=new BildpunktVisualizer(canvas,{scene:\"flow\"});\nvisual.setEnergy(0.35);\nvisual.destroy();", "category": "Displays", "searchAliases": [], "scope": "General purpose", "storyId": "visualizer", "sectionId": "motion" } ], "typography": { "families": { "display": "\"Redaction 50\", Arial, Helvetica, sans-serif", "ui": "Arial, Helvetica, sans-serif" }, "legacyMono": "Alias of ui; no monospace family", "notes": "Redaction 50 for expressive headings and actions; existing Arial/Helvetica sans for body, metadata, readouts and code. Numeric alignment uses tabular-nums, not another typeface." }, "appearance": { "modes": [ "system", "light", "dark" ], "treatments": [ { "id": "minimal", "name": "Minimal", "description": "Open space, quiet surfaces, real hardware and selective texture." }, { "id": "glass", "name": "Glass Pixel", "description": "Refracted pixel fields with soft, readable material plates." }, { "id": "hardware", "name": "Workshop", "description": "Expressive cast caps, physical framing and calibrated pixel artwork." } ], "defaults": { "palette": "spectral", "treatment": "glass", "tint": null, "cornerTexture": "none", "mode": "system" }, "module": "appearance.mjs", "css": "treatments.css", "api": [ "createAppearance(root, {state, materials})", "update({palette, treatment, tint, cornerTexture, mode})", "attachMaterial(controller)", "destroy()" ], "upgradePolicy": "Consumers pin a version or vendor a reviewed build. Upgrades are explicit, never automatic across applications." }, "knobVariants": { "detail-14-brushed": { "label": "Brushed Cap", "src": "./assets/knob-detail-14-brushed.png", "center": [ 32, 29.6 ], "radius": [ 21, 20.2 ], "backgroundSize": "auto 56px", "status": "retained source variant" }, "detail-14-dither": { "label": "Dithered Cap", "src": "./assets/knob-detail-14-dither.png", "center": [ 32, 28.5 ], "radius": [ 21, 20 ], "backgroundSize": "auto 56px", "status": "retained source variant" }, "detail-14-radial": { "label": "14° Radial Study", "src": "./assets/knob-detail-14-radial.png", "center": [ 31.5, 24.5 ], "radius": [ 20, 16 ], "backgroundSize": null, "status": "current Workshop default" }, "detail-14-ribbed": { "label": "14° Ribbed Study", "src": "./assets/knob-detail-14-ribbed.png", "center": [ 31.5, 23.5 ], "radius": [ 20, 15 ], "backgroundSize": null, "status": "retained source variant" }, "detail-14-guide": { "label": "14° Reference", "src": "./assets/knob-detail-14-guide.png", "center": [ 32, 28.82270293960299 ], "radius": [ 20, 19.40591452551993 ], "backgroundSize": null, "status": "retained source variant" }, "detail-e": { "label": "Fine Flutes", "src": "./assets/knob-detail-e.png", "center": [ 31.5, 24 ], "radius": [ 21, 15.5 ], "status": "retained source variant" }, "detail-f": { "label": "Dithered Solid", "src": "./assets/knob-detail-f.png", "center": [ 31.5, 23.5 ], "radius": [ 20.5, 14.5 ], "status": "retained source variant" }, "detail-guide": { "label": "Geometry Reference", "src": "./assets/knob-detail-guide.png", "center": [ 32, 27.628540659256792 ], "radius": [ 20, 18.54367709133575 ], "status": "retained source variant" }, "detail-c": { "label": "Dithered Graphite", "src": "./assets/knob-detail-c.png", "center": [ 31, 28 ], "radius": [ 18, 19 ], "status": "retained source variant" }, "detail-d": { "label": "Fine Graphite", "src": "./assets/knob-detail-d.png", "center": [ 31.5, 25.5 ], "radius": [ 20, 18.2 ], "status": "retained source variant" }, "detail-a": { "label": "Fine Ribs", "src": "./assets/knob-detail-a.png", "center": [ 31.5, 18.5 ], "radius": [ 20, 12.5 ], "status": "retained source variant" }, "detail-b": { "label": "Worn Cap", "src": "./assets/knob-detail-b.png", "center": [ 30.5, 18.5 ], "radius": [ 20, 12.5 ], "status": "retained source variant" } }, "knobFaceStudies": [ { "id": "knob-05-clean", "label": "Angled Clean", "src": "./assets/knob-05-clean.png", "indicator": "angled" }, { "id": "knob-05-short", "label": "Angled Short", "src": "./assets/knob-05-short.png", "indicator": "short" }, { "id": "knob-05-flatter", "label": "Angled Flatter", "src": "./assets/knob-05-flatter.png", "indicator": "flatter" }, { "id": "knob-straight-01", "label": "Straight", "src": "./assets/knob-straight-01.png", "indicator": "front" }, { "id": "knob-crafted", "label": "Crafted Pixel", "src": "./assets/knob-crafted.svg", "indicator": "crafted" }, { "id": "knob", "label": "Early Hardware", "src": "./assets/knob.svg", "indicator": "early" }, { "id": "bakelite", "label": "Bakelite Study", "src": "./assets/bakelite.svg", "indicator": "crafted" }, { "id": "knob-05-original", "label": "Original Angled · fixed marker", "src": "./assets/knob-05-original.png", "indicator": null, "referenceOnly": true } ], "legacyKnobVariants": { "knob-05-clean": { "label": "Angled Clean", "src": "./assets/knob-05-clean.png", "indicator": "angled" }, "knob-05-short": { "label": "Angled Short", "src": "./assets/knob-05-short.png", "indicator": "short" }, "knob-05-flatter": { "label": "Angled Flatter", "src": "./assets/knob-05-flatter.png", "indicator": "flatter" }, "knob-straight-01": { "label": "Straight", "src": "./assets/knob-straight-01.png", "indicator": "front" }, "knob-crafted": { "label": "Crafted Pixel", "src": "./assets/knob-crafted.svg", "indicator": "crafted" }, "knob": { "label": "Early Hardware", "src": "./assets/knob.svg", "indicator": "early" }, "bakelite": { "label": "Bakelite Study", "src": "./assets/bakelite.svg", "indicator": "crafted" }, "knob-05-original": { "label": "Original Angled · fixed marker", "src": "./assets/knob-05-original.png", "indicator": null, "referenceOnly": true } }, "pedalFinishes": { "gate": [ "#c9d7cd", "GT" ], "compressor": [ "#4e8ed4", "CP" ], "drive": [ "#e2b839", "DR" ], "dropCapo": [ "#ba5647", "DC" ], "spellwheel": [ "#9b75c8", "SW" ], "bellTower": [ "#c79a4d", "BT" ], "palimpsest": [ "#a6aa78", "PA" ], "runeArpeggiator": [ "#79a789", "RC" ], "phaseLock": [ "#bc739a", "HX" ], "sympatheticStrings": [ "#d39b65", "RB" ], "oscSynth": [ "#a5be42", "OS" ], "feedbacker": [ "#e0c56f", "HB" ], "hellviewDoubler": [ "#7e86bd", "RD" ], "clampPedal": [ "#c95c63", "C3" ], "greenDrive": [ "#56ac62", "SD" ], "orangeDistortion": [ "#eb8c38", "OE" ], "blueDrive": [ "#5389ba", "BB" ], "metalDrive": [ "#8e969c", "ST" ], "ashCrown": [ "#b17a50", "AC" ], "boneSaw": [ "#cb593d", "BS" ], "blueChorus": [ "#66b4df", "BC" ], "phaser": [ "#8bbf64", "PH" ], "tremolo": [ "#73a990", "PW" ], "lofiVibrato": [ "#b49c77", "WT" ], "prismWarp": [ "#c195db", "PR" ], "sliceGlitch": [ "#df7fab", "S7" ], "arcadeSequence": [ "#80d1a8", "B8" ], "murmuration": [ "#b5b6db", "MU" ], "analogDelay": [ "#d0ab5c", "BE" ], "digitalDelay": [ "#e5e3d4", "CR" ], "freeze": [ "#b4dfd9", "SF" ], "nightBloom": [ "#947abd", "NB" ], "reverseDelay": [ "#d88776", "RT" ], "eq": [ "#b2c0bc", "EQ" ], "chorus": [ "#7fa6db", "CH" ], "delay": [ "#d9dcce", "DL" ], "reverb": [ "#7ebcb8", "RV" ] }, "pedalLabels": { "gate": "Built-In Gate", "compressor": "Built-In Comp", "drive": "Built-In Drive", "dropCapo": "Drop / Capo", "spellwheel": "Spellwheel", "bellTower": "Bell Tower", "palimpsest": "Palimpsest", "runeArpeggiator": "Rune Choir", "phaseLock": "Hex Lock", "sympatheticStrings": "Raga Bloom", "oscSynth": "OSC / 06", "feedbacker": "Harmonic Bloom", "hellviewDoubler": "Rift Doubler", "clampPedal": "Clamp / 3", "greenDrive": "Sun Drive", "orangeDistortion": "Orange Edge", "blueDrive": "Blue Break", "metalDrive": "Steel District", "ashCrown": "Ash Crown", "boneSaw": "Bone Saw", "blueChorus": "Blue Chorus", "phaser": "Phase Array", "tremolo": "Pulse Wave", "lofiVibrato": "Worn Tape", "prismWarp": "Prism Warp", "sliceGlitch": "Slice / 07", "arcadeSequence": "Byte / 08", "murmuration": "Murmuration", "analogDelay": "Bucket Echo", "digitalDelay": "Clean Repeat", "freeze": "Still Frame", "nightBloom": "Night Bloom", "reverseDelay": "Reverse Tape", "eq": "Built-In EQ", "chorus": "Built-In Chorus", "delay": "Built-In Delay", "reverb": "Built-In Reverb" }, "moduleCatalog": { "status": "Retained Tonewedge/Pi catalog; host routes determine availability", "items": [ { "section": "Rig", "label": "Effects", "icon": "effects", "route": "home", "detail": "Pedalboard, add, edit and bypass · live" }, { "section": "Rig", "label": "Amp", "icon": "amp", "route": "amp", "detail": "Five controls and cabinet · live" }, { "section": "Rig", "label": "Tone", "icon": "rig", "route": "tone", "detail": "Drive · EQ · Chorus · Room tabs · live" }, { "section": "Rig", "label": "Presets", "icon": "presets", "route": "presets", "detail": "Saved Pi sounds · live recall" }, { "section": "Rig", "label": "Tuner", "icon": "tuner", "route": "tuner", "detail": "Live pitch, cents and tuning targets" }, { "section": "Rig", "label": "Amp library / Tone Labs", "icon": "amp", "detail": "Browse, audition and keep models" }, { "section": "Rig", "label": "Workshop", "icon": "makers", "detail": "Current pedal bypass is live; recipe editor in Tonewedge" }, { "section": "Play", "label": "Afterglow", "icon": "visualizer", "route": "visual", "detail": "Dither animation · live input energy" }, { "section": "Play", "label": "Live", "icon": "amp", "detail": "Performance preset slots" }, { "section": "Play", "label": "Capture / Record", "icon": "record", "detail": "Session recording and saved takes" }, { "section": "Play", "label": "Looper", "icon": "loop", "detail": "Record, play, undo and saved loops" }, { "section": "Play", "label": "Tempo / Drummer", "icon": "tempo", "detail": "Tap, grooves, click and count-in" }, { "section": "Play", "label": "Practice", "icon": "practice", "detail": "Pitch-based exercises and feedback" }, { "section": "Play", "label": "Crawler Jam", "icon": "jam", "detail": "Arcade game" }, { "section": "Play", "label": "Runner Jam", "icon": "jam", "detail": "Running game" }, { "section": "Play", "label": "Missile Jam", "icon": "jam", "detail": "Missile game" }, { "section": "Play", "label": "Stats / Fretling", "icon": "presets", "detail": "Playing time, notes, XP and companion" }, { "section": "Device", "label": "Appearance", "icon": "appearance", "route": "appearance", "detail": "Theme, guitar and finish · local" }, { "section": "Device", "label": "Control style", "icon": "settings", "route": "controls", "detail": "Knobs and caps · local" }, { "section": "Device", "label": "Audio", "icon": "audio", "detail": "I/O, master, mute, meters and engine" }, { "section": "Device", "label": "Practice settings", "icon": "practice", "detail": "Input feedback preferences" }, { "section": "Device", "label": "Amp makers", "icon": "makers", "detail": "Maker and model preferences" }, { "section": "Device", "label": "Wi-Fi", "icon": "wifi", "detail": "Network and device connection" } ] }, "buttonMaterial": { "roles": { "neutral": "#eeeddf", "neutralEdge": "#aaa99c", "ink": "#232322", "primary": "#293dc2", "primaryEdge": "#1c2b91", "onPrimary": "#faf8f0", "signal": "#d7fa48", "signalEdge": "#9ebc32", "onSignal": "#232322", "base": "#484a4b", "onBase": "#faf8f0" }, "css": "components.css", "notes": "Cast/steel use semantic face colors with buttonEdgeTextures. assets.castCaps and assets.steelCaps are retained dev.4 artwork, not active faces. The signal modifier is opt-in and does not assign product state." }, "assets": { "buttonEdgeTextures": [ "assets/button-edge-cast.svg", "assets/button-edge-steel.svg" ], "font": "assets/Redaction50-Regular.ttf", "fontLicense": "assets/OFL.txt", "plateWear": [ "assets/sf-plate-nw.png", "assets/sf-plate-se.png", "assets/plate-edge.svg" ], "caseWear": "assets/case-edge.svg", "glassWear": "assets/glass-edge.svg", "castCaps": [ "assets/button-cast-rest.svg", "assets/button-cast-on.svg", "assets/button-cast-selected.svg", "assets/button-cast-disabled.svg", "assets/button-cast-dark.svg" ], "steelCaps": [ "assets/button-steel-rest.svg", "assets/button-steel-on.svg", "assets/button-steel-selected.svg", "assets/button-steel-disabled.svg", "assets/button-steel-dark.svg" ], "retainedOriginalCaps": [ "assets/cast-rest.png", "assets/cast-on.png", "assets/cast-selected.png", "assets/cast-disabled.png", "assets/steel-rest.png", "assets/steel-on.png", "assets/steel-selected.png", "assets/steel-disabled.png" ], "faderCaps": [ "assets/fader-cast.png", "assets/fader-steel.png" ], "pedal": "assets/pedal.png", "amp": "assets/amp.png" }, "visualizers": [ { "id": "flow", "name": "Dither Flow" }, { "id": "ripple", "name": "Ripple Pool" }, { "id": "orbit", "name": "Solar Orbit" }, { "id": "contour", "name": "Contour Drift" }, { "id": "silk", "name": "Silk Waves" }, { "id": "stars", "name": "Starfall" } ], "visualizerApi": [ "new BildpunktVisualizer(canvas, { scene, fps, tint, minPixel })", "setEnergy(value, { immediate })", "setVisual({ scene, tint })", "setOptions({ scene, tint, fps, minPixel })", "start()", "stop()", "render(time)", "destroy()" ], "glass": { "tokens": { "name": "Bildpunkt Glass Pixel", "version": "0.3.0-dev.15", "color": { "paper": "#e9e7d8", "paperLight": "#f4f2e7", "ink": "#232322", "line": "#aaa99c", "cobalt": "#293dc2", "lime": "#d7fa48", "coral": "#ee6744", "violet": "#8e45c0", "mint": "#b4d5b2" }, "spectral": [ "#232639", "#4e5355", "#4639d9", "#be48d6", "#ec6644", "#eca34c", "#b3d5b2", "#e7e5d7" ], "cobalt": [ "#171e39", "#273252", "#3047c9", "#5478d7", "#80ad95", "#cced43", "#e7ec9d", "#eeeeda" ], "material": { "grid": 4, "dither": "4x4 ordered Bayer", "motionDefault": "paused", "motionFpsCap": 24, "body": "opaque", "glass": "selective readouts" }, "control": { "minimumTarget": 44, "knob": { "min": 0, "max": 100, "step": 1 }, "keyboard": [ "Arrow keys", "Page Up/Down", "Home/End" ] }, "typography": { "display": "\"Redaction 50\", Arial, Helvetica, sans-serif", "ui": "Arial, Helvetica, sans-serif", "mono": "Arial, Helvetica, sans-serif" }, "monochrome": [ "#161616", "#3a3a3a", "#666666", "#8d8d8d", "#ababab", "#c8c8c8", "#e3e3e3", "#f6f6f6" ], "button": { "neutral": "#eeeddf", "neutralEdge": "#aaa99c", "ink": "#232322", "primary": "#293dc2", "primaryEdge": "#1c2b91", "onPrimary": "#faf8f0", "signal": "#d7fa48", "signalEdge": "#9ebc32", "onSignal": "#232322", "base": "#484a4b", "onBase": "#faf8f0" }, "spacing": [ 4, 8, 12, 16, 24, 32, 48 ] }, "css": "glass.css", "module": "glass.mjs", "api": [ "createFrostedSurface(host, {state, pixelSize, time})", "createGlassField(canvas, {state, layout, onFrame})", "createGlassPlate(host, {state, layout, onFrame})", "setGlassPalette(root, name)", "update(patch)", "setPlaying(boolean)", "render(time)", "destroy()" ], "notes": "One ordered source field; nearest-neighbour refraction; no blur. Existing legacy palettes and control APIs are unchanged. Opt in with data-tw-material=glass. Motion is paused by default." }, "tokens": { "spacing": { "1": "4px", "2": "8px", "3": "12px", "4": "16px", "6": "24px", "8": "32px", "12": "48px" }, "spacingRoles": { "controlPaddingBlock": "2", "controlPaddingInline": "4", "controlPaddingCompact": "1", "componentPadding": "4", "componentPaddingCompact": "2", "labelGap": "1", "controlGap": "2", "componentGap": "3", "sectionGap": "6", "pageGutter": "6", "pageGutterCompact": "3", "pageGutterWide": "8" }, "size": { "touch": "44px", "border": "2px", "focus": "3px" }, "palettes": { "industrial": { "case": "#e7e5dc", "caseLight": "#fffdf1", "caseLow": "#a5a8a5", "seam": "#202b30", "plate": "#455159", "plateLight": "#7b898a", "plateShadow": "#252f34", "ink": "#f3f1e5", "muted": "#d7ddd5", "recess": "#252f34", "recessLight": "#627476", "glass": "#e7eee9", "glassLight": "#fffef1", "glassInk": "#192b2c", "glassMuted": "#445b57", "accent": "#ef6a25", "accentLight": "#ffae69", "accentLow": "#9d391b", "stamp": "#e2e4d8", "rackSurface": "#b9c6c3", "windowSurface": "#1c3439" }, "cobalt": { "case": "#253d72", "caseLight": "#7699d1", "caseLow": "#122447", "seam": "#101d39", "plate": "#304e83", "plateLight": "#7899c5", "plateShadow": "#192e53", "ink": "#f3f4eb", "muted": "#c2d7ed", "recess": "#142b4c", "recessLight": "#5677a3", "glass": "#cbeafa", "glassLight": "#eefaff", "glassInk": "#102c4b", "glassMuted": "#335e7b", "accent": "#ffb039", "accentLight": "#ffd17a", "accentLow": "#a35c16", "stamp": "#d9e7f1", "rackSurface": "#324d78", "windowSurface": "#102c4b" }, "ember": { "case": "#252c32", "caseLight": "#707d7e", "caseLow": "#11191d", "seam": "#13191d", "plate": "#62372f", "plateLight": "#b77961", "plateShadow": "#321e20", "ink": "#fff0dc", "muted": "#f5d4b2", "recess": "#2c2423", "recessLight": "#765349", "glass": "#ffe0aa", "glassLight": "#fff3d2", "glassInk": "#42251f", "glassMuted": "#754b36", "accent": "#f15b32", "accentLight": "#ffad71", "accentLow": "#8a2b20", "stamp": "#f4d9bf", "rackSurface": "#68372d", "windowSurface": "#281d1c" }, "pine": { "case": "#1d4c46", "caseLight": "#76a79a", "caseLow": "#102d2d", "seam": "#122a27", "plate": "#285e51", "plateLight": "#83b7a2", "plateShadow": "#153930", "ink": "#f1f1d9", "muted": "#c4e3cf", "recess": "#163c35", "recessLight": "#5d8a76", "glass": "#dce5da", "glassLight": "#f1f5ed", "glassInk": "#17382d", "glassMuted": "#416c53", "accent": "#e3b64e", "accentLight": "#ffe4a0", "accentLow": "#8e6529", "stamp": "#d3e9d8", "rackSurface": "#2c6355", "windowSurface": "#123c32" }, "plum": { "case": "#59346f", "caseLight": "#b492c0", "caseLow": "#2b1b3c", "seam": "#25172e", "plate": "#69457c", "plateLight": "#c19bd1", "plateShadow": "#3d2a50", "ink": "#fff1f3", "muted": "#ebcfe9", "recess": "#372447", "recessLight": "#9973a4", "glass": "#f1dafa", "glassLight": "#fff2ff", "glassInk": "#3c2050", "glassMuted": "#704577", "accent": "#f2b55d", "accentLight": "#ffdda0", "accentLow": "#986232", "stamp": "#f0daf1", "rackSurface": "#634477", "windowSurface": "#311e41" }, "spectral": { "case": "#e9e7d8", "caseLight": "#f4f2e7", "caseLow": "#acb09e", "seam": "#232639", "plate": "#d5d7c9", "plateLight": "#f4f2e7", "plateShadow": "#a3a594", "ink": "#232639", "muted": "#51564a", "recess": "#e3e4d6", "recessLight": "#f4f2e7", "glass": "#e7e5d7", "glassLight": "#faf8e9", "glassInk": "#232639", "glassMuted": "#51564a", "accent": "#4639d9", "accentLight": "#cec5ff", "accentLow": "#342798", "stamp": "#232639", "rackSurface": "#d5d7c9", "windowSurface": "#232639" }, "cobaltGlass": { "case": "#e9e7d8", "caseLight": "#f4f2e7", "caseLow": "#acb09e", "seam": "#171e39", "plate": "#d5d7c9", "plateLight": "#f4f2e7", "plateShadow": "#a3a594", "ink": "#232639", "muted": "#51564a", "recess": "#e3e4d6", "recessLight": "#f4f2e7", "glass": "#eeeeda", "glassLight": "#faf8e9", "glassInk": "#171e39", "glassMuted": "#445064", "accent": "#3047c9", "accentLight": "#cced43", "accentLow": "#25379d", "stamp": "#232639", "rackSurface": "#d5d7c9", "windowSurface": "#171e39" }, "monochrome": { "case": "#f6f6f6", "caseLight": "#ffffff", "caseLow": "#c3c3c3", "seam": "#202020", "plate": "#eeeeee", "plateLight": "#ffffff", "plateShadow": "#b0b0b0", "ink": "#202020", "muted": "#575757", "recess": "#e6e6e6", "recessLight": "#ffffff", "glass": "#f6f6f6", "glassLight": "#ffffff", "glassInk": "#202020", "glassMuted": "#575757", "accent": "#262626", "accentLight": "#d7d7d7", "accentLow": "#080808", "stamp": "#202020", "rackSurface": "#e6e6e6", "windowSurface": "#202020" } } } }