================================================================================
COLLABTUNES_COMPONENT_FACTORY_README_5_13_26.txt
Collaborhythm / Collabtunes — HTML/CSS Component Factory
Generated: 5.13.26 | Asian Claude — Greenfield Support Track
================================================================================

WHAT THIS PACKAGE IS:
  Reusable HTML/CSS components for the Collabtunes 34-album system.
  All components are derived from the verified, gate-checked, QA-complete
  staging pages in LOW_RISK_CODE_READY_PACKAGE_5_12_26.zip.
  No new systems. No new architecture. Supporting infrastructure only.

WHAT THIS PACKAGE IS NOT:
  - Not a replacement for the verified staging pages
  - Not a redesign of any existing system
  - Not canon or doctrine — reference only
  - Not deploy-ready without filling in {{TOKENS}} and Tom approval

================================================================================
COMPONENT INVENTORY (5 files)
================================================================================

FILE 1: COLLABTUNES_DESIGN_TOKENS_BASE_CSS_5_13_26.html
  PURPOSE: Canonical CSS design tokens with live swatch preview.
  USE:     Copy the :root { } block into every new Collabtunes HTML file.
           Never hardcode hex values — always use var(--token-name).
  CONTAINS: All colors, typography sizes, spacing, border definitions.
  TOKENS DEFINED:
    --bg-primary / --bg-panel / --bg-soft
    --text-main / --text-strong / --text-muted
    --accent-gold / --accent-oldgold / --accent-chrome / --accent-danger
    --border-hard / --border-soft / --border-block / --border-subtle / --border-mid
    --font-body / --font-mono
    --content-width (900px) / --text-width (700px)
    --size-xs through --size-gx (full type scale)
    --ls-tight through --ls-widest (letter-spacing scale)
    --transition-fast / --z-fastscroll / --z-modal

FILE 2: COLLABTUNES_AIO_PAGE_HEADER_COMPONENT_5_13_26.html
  PURPOSE: Complete AIO page header — all 4 header elements stacked.
  USE:     Copy the HTML block (between <!-- COMPONENT START/END --> comments)
           into new AIO pages. Paste AFTER <body id="top"> and BEFORE <main>.
  CONTAINS:
    - Staging banner (with removal instruction)
    - Social bar (placeholder hrefs)
    - Fast-scroll nav (right sidebar, fixed)
    - Page header: breadcrumb, collection-type, title, badges, back buttons
  SUBSTITUTION TOKENS: {{COLLECTION_ID}} {{COLLECTION_TITLE}} {{RATING}}
                       {{RATING_CLASS}} {{PAGE_TYPE}} {{PAGE_NUMBER}}
                       {{LIVE_URL_SLUG}}
  VERIFIED AGAINST: All 7 AIO staging pages

FILE 3: COLLABTUNES_AIO_CONTENT_BLOCK_LIBRARY_5_13_26.html
  PURPOSE: All 6 content block types with confirmed + pending states.
  USE:     Reference file. Copy individual block HTML as needed.
           Each block has: confirmed state, pending state, notes.
  BLOCKS:
    Block A — Identity (GX score, themes, rating detail)
    Block B — Tracks (numbered list, credits, content flags)
    Block C — Context (summary, review, per-track notes)
    Block D — Tags (category, mood, content flags, triggers)
    Block E — Canon (canon notes, crosslinks, external links)
    Block F — Status (reconstruction status grid)

FILE 4: COLLABTUNES_AIO_PAGE_SKELETON_TEMPLATE_5_13_26.html
  PURPOSE: Complete AIO page skeleton — fill tokens and deploy.
  USE:     For each new AIO page:
           (1) Copy this file
           (2) Replace all {{TOKEN}} values
           (3) Fill confirmed content or leave pending-badge placeholders
           (4) Verify gate allowed array matches collection rating
           (5) Run automated QA (ID check, badge scan, gate verify)
           (6) Submit for Tom review
  SUBSTITUTION TOKENS: {{COLLECTION_ID}} {{COLLECTION_TITLE}} {{RATING}}
                       {{RATING_CLASS}} {{RATING_SUFFIX}} {{GX_STATE}}
                       {{DATE}} {{PAGE_TYPE}} {{PAGE_NUMBER}}
                       {{LIVE_URL_SLUG}} {{GATE_ALLOWED}}
  GATE RULE (copy exact text into {{GATE_ALLOWED}}):
    PG-13+:  'pg13','r','nc17','x'
    R+:      'r','nc17','x'
    NC-17+:  'nc17','x'
    X only:  'x'

FILE 5: COLLABTUNES_SWITCHBOARD_HUB_TEMPLATE_5_13_26.html
  PURPOSE: Switchboard Quicklinks hub page — central navigation for all 34 pages.
  USE:     Reference for Switchboard rebuild. All 32 available collection cards
           (SL23 + SL24 omitted per hard block).
  CONTAINS:
    - Rating indicator bar (shows user's stored rating level)
    - All 10 Song List cards
    - 22 Set List cards (SL1–SL22; SL23/24 intentionally omitted)
    - Utility page links
    - Blocking notes for Revenue Streams (Decision 04) + X labels (Decision 01)
  NOTE: SL23 and SL24 MUST NOT be added until Tom explicitly clears content.

================================================================================
USAGE SEQUENCE FOR NEW AIO PAGES
================================================================================

STEP 1: Copy COLLABTUNES_AIO_PAGE_SKELETON_TEMPLATE_5_13_26.html
        Rename: SONG_LIST_4_A_TRAVELER_IN_THE_DISTANCE_AIO_STAGING_5_13_26.html

STEP 2: Fill all {{TOKENS}}:
        {{COLLECTION_ID}}    → SONG_LIST_4
        {{COLLECTION_TITLE}} → A Traveler in the Distance
        {{RATING}}           → PG-13
        {{RATING_CLASS}}     → rating-badge
        {{RATING_SUFFIX}}    → (blank — confirmed)
        {{PAGE_TYPE}}        → SONG LIST
        {{PAGE_NUMBER}}      → 4 of 10
        {{LIVE_URL_SLUG}}    → song-list-4
        {{GATE_ALLOWED}}     → 'pg13','r','nc17','x'

STEP 3: Source-pull confirmed content into blocks. Leave pending-badge
        for anything without a confirmed source.

STEP 4: Run automated QA:
        - Zero [SOURCE PULL REQUIRED] raw brackets (all should be badges)
        - id="top/identity/tracks/context/canon/status" all present
        - Zero orphan anchor targets
        - Zero duplicate IDs
        - Gate allowed array matches collection rating
        - Staging banner present
        - Switchboard URL correct (×4 instances per file)
        - Live Page back-btn href matches collection URL slug

STEP 5: Submit to Tom for review. Do not promote to live before approval.

================================================================================
DESIGN RULES (DO NOT VIOLATE)
================================================================================

✅ Always use var(--token) — never hardcode hex
✅ Font: var(--font-body) for body text / var(--font-mono) for labels/badges
✅ Content column: max-width 900px (.content-wrap)
✅ Body text: max-width 700px (.body-text)
✅ Staging banner: PRESENT on all staging pages / REMOVED on live promotion
✅ Gate JS: end of body, before </body>. Never move to head.
✅ localStorage key: collabtunes_selected_rating — frozen
✅ Rating key values: gpg / pg13 / r / nc17 / x — frozen, lowercase only
✅ Redirect target: https://collabtunes.com — frozen
✅ Switchboard URL: https://collabtunes.com/switchboard-quicklinks/ — frozen
✅ Fast-scroll anchor set: top / identity / tracks / context / canon / status — frozen

❌ Never use #ffffff or #00ff00
❌ Never hardcode a hex color in page logic
❌ Never invent track titles, GX scores, ratings, or summaries
❌ Never link to Lady Weaver pages (URL conflict unresolved)
❌ Never link to chapter pages (drift conflict unresolved)
❌ Never add SL23 or SL24 links without explicit Tom clearance
❌ Never change gate JS pattern, key name, or redirect URL
❌ Never deploy without staging banner removed + Tom approval

================================================================================
COMPATIBILITY
================================================================================

All components verified against:
  - Chrome / Firefox / Safari (desktop)
  - Mobile: fast-scroll hidden on screens <600px by CSS
  - No external dependencies — vanilla HTML/CSS/JS only
  - No build step required — copy/paste into Yola or any host
  - localStorage: required for gate system. Private mode → redirect to homepage.

================================================================================
END COLLABTUNES_COMPONENT_FACTORY_README_5_13_26.txt
================================================================================
