Replace generated designs for vellum, 8-bit-orbit, daisy-days, studio,
soft-editorial, and pink-script with hand-crafted bespoke designs.
Palette hex values tokenized to __PRIMARY__/__SECONDARY__/__TERTIARY__/__ACCENT__
for picker substitution. Each design matches its template's visual character.
Total hand-crafted: 8 (block-frame, broadside, + these 6)
Generated: 26 remaining
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
renderDesignIframe() now fills __SHADER_VERTEX__, __SHADER_FRAGMENT__,
and __SHADER_SCRIPT__ with actual GLSL and Three.js renderer from
_sgShaders. Background preset changes in sidebar re-render the design
page with live animated shader + halftone grain + preview canvas.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add design.html iframe to the right panel of the existing picker.
When a template is selected, renderPreview() now renders the
template's design.html with live token replacement instead of the
old showcase panel. All sidebar controls (palette, type, corners,
density, depth, motion, background) update the design.html in
real-time via doc.write() to the iframe.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace click-to-cycle with persistent sidebar: palette swatches,
typography pairs, easing presets, corners, density, depth, shader
background — all as clickable options. Design page renders in an
iframe via doc.write() for clean CSS/script isolation.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Scaffold for the new picker architecture where the picker page itself
renders as the design.html template. Template selection loads the
template's design.html with live token replacement. Sections are
clickable to cycle palettes, easings, and shader presets.
- Template grid overlay for selection
- Dynamic design.html loading with full token replacement
- Click-to-cycle on palette, motion, and background sections
- Export button downloads the resolved HTML
- Nav rail gets Template + Export buttons on load
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add build-design-templates.py: reads template CSS tokens and generates
a design.html page styled in that template's visual language
- Classifies each template by scheme (dark/light), border style
(heavy/hairline/subtle), corner radius, and font families
- Dark templates get dark canvas, accent cover, hairline borders, lowercase
- Heavy border templates get 4px solid, hard shadows, uppercase, tilted cards
- Template fonts flow through to page design (Playfair, Bricolage, etc.)
- Skips hand-crafted designs (block-frame, broadside)
- All 34 templates now produce bespoke DESIGN.html via showOutput()
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace CSS gradient mock with canvas that mirrors the full-page shader
- drawImage copies main WebGL canvas to preview canvas each frame
- Add preserveDrawingBuffer to main renderer for cross-browser drawImage
- Replace .bg-preview .mock with canvas#bg-preview-canvas in both templates
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add design.html templates for block-frame (neo-brutalist) and broadside
(dark editorial) with __TOKEN__ sentinels for user-configurable values
- showOutput() fetches design.html if available, substitutes palette,
shader config/GLSL, motion, surface, guidelines, and slide cards
- Falls back to generated output for templates without custom designs
- HTML-escape GLSL before insertion into <pre> tags (< was parsed as HTML)
- Slide cards built from summary.html skeletons, scoped under .ds-slide-frame
- Shader script reads GLSL from stable #vtx-src/#frg-src element IDs
- Animated shader with requestAnimationFrame loop, reads colors from CSS vars
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Fix shader disappearing on palette change: skip --tp-secondary
override in finetune CSS when shader is active
- Separate bg mode key from palette key: only rebuild renderer when
shader preset changes, update colors via uniforms on palette change
- Hero-only shader canvas (remove .specimen-cell from container query)
- Guard against WebGL context loss in render loop
- Add _sgUpdateColors for lightweight palette-to-uniform sync
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Check isContextLost() before rendering each frame
- Properly dispose EffectComposer render targets on cleanup
- Prevents cascade errors when too many WebGL contexts exist
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Embed template source from file, not serialized iframe DOM
- Eliminates picker state pollution: no data-tp-orig-* attributes,
no GSAP inline styles, no font-family !important on every element,
no density/shader/finetune override styles
- Template HTML is the clean original with --tp-* tokens
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add extract-template-structure.py: extracts slide archetypes,
component inventory, decoratives, and chrome from templates
- Integrate structure extraction into build-template-picker.py
- design.html spec now includes: template slug, 4-role palette
(primary/secondary/tertiary/accent), template structure with
slide types and component atoms
- CSS output includes --tp-* tokens alongside legacy --bg/--fg vars
- Add custom palette option with 4 color pickers
- Add fog shader (volumetric 3D FBM noise on sphere)
- Rename all shader presets (Aurora, Tide, Nebula, Drift, Ember,
Silk, Prism, Fog, Blob)
- Blob zoom capped at 8, fog zoom 20-40 with default 25
- Create design.html button moved to header bar
- Living Background section label
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Shader bg: JS-based transparency matching computed backgroundColor
against --tp-secondary, only replaces backgrounds not text color
- Deck-stage containers forced to display:block, 1920x1080 explicit
- Slide override uses .active class (template native) with display:none
- Animation runs from parent GSAP, no allow-scripts on iframes
- Animation targets deck-stage > section.active for deck templates
- Density/corners/depth store originals in data attributes, only run
when picks change, restore cleanly when set to default
- Typography section: vertical layout, no overlap
- Custom bezier initialized to new curve, canvas redraws on phase switch
- Iframe resize handler for hero + specimens
- Remove element count cap on animation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Use .active class (template native) instead of .tp-active for slides
- Add deck/container reset (width:100%, transform:none) to prevent
template JS from setting 1200vw widths
- Run GSAP animation from parent page, not inside iframe — no
allow-scripts needed, template JS can't interfere
- Offscreen-right entrance animation with per-element stagger
- Clean style removal (removeProperty) on animation complete
- Tertiary color: tokenizer now prefers colors near accent hue
- Studio template: wire --c-bg-light to --tp-accent, --c-fg to --tp-accent
- Template default palette reads --tp-* from iframe on load
- Template default typography reads fonts from Google Fonts links
- Font override via JS inline styles on all iframe elements
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove Theme and Structure sections from left panel
- Background options: 2-column grid layout with equal-width cards
- Color palette options: 2-column grid layout
- Template Default palette reads --tp-* vars from selected template iframe
- Template Default typography reads fonts from template's Google Fonts links
- Font override: JS-based inline style on every element (>=32px headline,
rest body), restores cleanly when switching back to default
- Animation only triggers on easing change or first load, not palette/corner
- Fix bezier-editor deselection, goToTune theme/arch direct assignment
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Inject GSAP + CustomEase into hero iframe on load
- Selecting an easing animates slide elements from offscreen right
with staggered entrance using the selected curve
- Custom bezier ease creates CustomEase in iframe context
- Click specimen slide to swap hero and replay animation
- Fix bezier-editor not deselecting when picking preset easing
- Shader background only rebuilds when preset/palette changes,
not on every easing click (eliminates flash)
- Element reset uses direct set instead of clearProps to avoid flash
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Palette switching injects --tp-primary/secondary/tertiary/accent into
all template iframes (hero + specimens) via CSS override
- Corners/density/depth overrides inject border-radius, padding/gap,
and box-shadow into iframe elements matching card/panel/button classes
- Shader backgrounds render Three.js canvas behind hero and specimen
iframes, template backgrounds go transparent when shader active
- Specimen grid shows all slides in 5 columns, slide 1 highlighted
- Click any specimen to swap the hero view to that slide
- Migrate all palette refs from background/foreground/muted to
primary/secondary/tertiary 4-role model
- Add --tp-radius/padding/gap/shadow surface tokens to tokenizer
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Third-party files from beautiful-html-templates — excluded from
lint/format via lefthook and oxlintrc.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
json.dumps handles escaping. Manual replace was double-escaping
quotes causing \\\" in SVG attributes. Also strip <script>
tags from extracted preview HTML.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
34 templates copied and tokenized with --tp-* CSS variable contract.
Templates render inline in DOM (no iframes) so shader backgrounds
work behind them and CSS variables cascade naturally.
Removed deck-stage.js files (not needed for inline preview).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Templates render directly in the DOM via extracted preview_html.
Build script extracts first slide CSS + HTML, scopes with tp-{slug}
class prefix. No more iframes — shader canvases render behind
transparent template content, --tp-* variables cascade naturally.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Templates render directly in the DOM via extracted preview_html.
Build script extracts first slide CSS + HTML, scopes with tp-{slug}
class prefix. No more iframes — shader canvases render behind
transparent template content, --tp-* variables cascade naturally.
Fine-tune overrides set --tp-* directly on the inline container
element instead of injecting styles into an iframe document.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copied 34 templates from beautiful-html-templates into repo.
tokenize-templates.py converts all hardcoded colors and fonts to
reference --tp-bg, --tp-fg, --tp-ac, --tp-mt, --tp-hf, --tp-bf tokens.
1240 color replacements across 34 templates.
Override functions simplified: just set --tp-* tokens, everything
cascades. No more luminance mapping or name heuristics needed.
--tp-bg-layer added for shader background swap support.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Variables named sun/ember/coral/accent/brand map to accent color.
Variables named paper/canvas/bg/cream map to background.
Variables named ink/text/fg/dark map to foreground.
Variables named mute/gray/line/border map to muted.
Fallback to luminance for unrecognized names.
Fixes biennale-yellow's bright yellow accent being mapped to bg.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Selecting palette index 0 clears the finetune-override style in the
template iframe, reverting to the template's native colors/fonts.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
These were hidden in a display:none div during the component view
restructuring. Restored as visible showcase sections with their
eyebrow labels. Palette and type lead text remain hidden (unused).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Clear override CSS before reading originals to prevent drift.
Cache by template slug so all iframes for the same template share
original values. Font var matching tightened to --f-* prefix only.
Removed border-radius override that was breaking template layouts.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Cache each iframe's original CSS variable values on first capture,
then always remap from originals to prevent luminance drift on
repeated option changes. Apply overrides to ALL template iframes
(hero + specimen grid). Helper functions extracted for reuse.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove .active from trans-overlay and .selected-exit from cards
in the embedded picker iframe when the back button is clicked.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace generic component cards with the template's actual slides
rendered as small preview thumbnails below the hero card. Each slide
loads in its own iframe, navigated to the correct slide index,
with contextual text injected. Shows up to 6 slides per template.
Removed slide cycling nav from hero card — first slide only.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Phase 1 shows a static first-slide preview for each template.
No arrows, no slide counter, no navigation. Cleaner grid, fewer
bugs from slide system differences. Full slide cycling available
in Phase 2 after selecting a template.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
overflow:hidden clips scrollHeight so scrollTop can't reach later
slides. Instead, clip the container to 1080px height and use
transform:translateY to shift the slide stack. No scrolling needed.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Deck-stage (absolute positioned) uses visibility toggling.
All other templates (vertical stacks, flex scrolls) use scrollTop
positioning — slides stay visible, container scrolls to target.
Detect mode by checking if slides have position:absolute.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
scrollIntoView bubbles and scrolls the parent page when cycling
slides inside template iframes. Replace with direct scrollTop/
scrollLeft assignment on the container, body, and documentElement.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Many deck-stage templates use section classes like s-cover, s-manifesto
instead of .slide. Target deck-stage>section directly and use .active
class for visibility toggling. Clear all active classes before setting
the first one on load.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Apply palette (colors by luminance mapping), typography (font family
overrides for display/body CSS vars), corners (border-radius), and
background color to the template iframe on every option change.
Collects all CSS custom properties from template stylesheets and
remaps them based on the selected theme+palette+type+corners.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When a palette is selected in Phase 2, inject CSS variable overrides
into the template iframe using luminance-based color mapping. Same
approach as the template picker's applyPal function.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
