https://trackradar.up.railway.app/assets/DesignSystemDemoSimple-DhmavVBS.js

1import{r as j,j as e}from"./vendor-react-DRA7ZGpe.js";import{a as C,aV as _,y as u,bI as T,L as B,cG as A,bl as b}from"./index-BKjvWqUb.js";const D={spotify:e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"})}),"apple-music":e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.

1093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.801.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.045-1.773-.6-1.943-1.536a1.88 1.88 0 011.038-2.022c.323-.16.67-.25 1.018-.324.378-.082.758-.153 1.134-.24.274-.063.457-.23.51-.516a.904.904 0 00.02-.193c0-1.815 0-3.63-.002-5.443a.725.725 0 00-.026-.185c-.04-.15-.15-.243-.304-.234-.16.01-.318.035-.475.066-.76.15-1.52.303-2.28.456l-2.325.47-1.374.278c-.016.003-.032.01-.048.013-.277.077-.377.203-.39.49-.002.042 0 .086 0 .13-.002 2.602 0 5.204-.003 7.805 0 .42-.047.836-.215 1.227-.278.64-.77 1.04-1.434 1.233-.35.1-.71.16-1.075.172-.96.036-1.755-.6-1.92-1.544-.14-.812.23-1.685 1.154-2.075.357-.15.73-.232 1.108-.31.287-.06.575-.116.86-.177.383-.083.583-.323.6-.714v-.15c0-2.96 0-5.922.002-8.882 0-.123.013-.25.042-.37.07-.285.273-.448.546-.518.255-.066.515-.112.774-.165.733-.15 1.466-.296 2.2-.444l2.27-.46c.67-.134 1.34-.27 2.01-.403.22-.043.442-.088.663-.106.31-.025.523.17.554.482.008.073.012.148.012.223.002 1.91.002 3.822 0 5.732z"})}),bandcamp:e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M0 18.75l7.437-13.5H24l-7.438 13.5H0z"})}),discogs:e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M12.018 1.927C6.476 1.927 1.965 6.438 1.965 11.98c0 5.544 4.511 10.055 10.053 10.055s10.053-4.511 10.053-10.055c0-5.542-4.511-10.053-10.053-10.053zm0 18.37c-4.587 0-8.317-3.73-8.317-8.317s3.73-8.317 8.317-8.317 8.317 3.73 8.317 8.317-3.73 8.317-8.317 8.317zm0-14.896c-3.631 0-6.579 2.948-6.579 6.579s2.948 6.579 6.579 6.579 6.579-2.948 6.579-6.579-2.948-6.579-6.579-6.579zm0 11.422c-2.674 0-4.843-2.169-4.843-4.843s2.169-4.843 4.843-4.843 4.843 2.169 4.843 4.843-2.169 4.843-4.843 4.843zm0-7.95c-1.716 0-3.107 1.391-3.107 3.107s1.391 3.107 3.107 3.107 3.107-1.391 3.107-3.107-1.391-3.107-3.107-3.107zm0 4.478c-.757 0-1.371-.614-1.371-1.371s.614-1.371 1.371-1.371 1.371.614 1.371 1.371-.614 1.371-1.371 1.371z"})}),beatport:e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M12.006.0C5.379.0.0 5.379.0 12.006.0 18.633 5.379 24.012 12.006 24.012c6.627.0 12.006-5.379 12.006-12.006C24.012 5.379 18.633.0 12.006.0zM9.326 18.469H7.401V5.543h1.925v5.01h.049c.688-1.08 1.846-1.768 3.465-1.768 2.844.0 4.769 2.241 4.769 5.157.0 2.916-1.925 5.157-4.769 5.157-1.619.0-2.777-.688-3.465-1.768h-.049v1.138zm3.122-1.354c1.925.0 3.171-1.482 3.171-3.417.0-1.935-1.246-3.417-3.171-3.417s-3.171 1.482-3.171 3.417c0 1.935 1.246 3.417 3.171 3.417z"})}),youtube:e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"})}),mixcloud:e.jsx("svg",{className:"btn-platform__icon",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M2.462 8.596l1.372 6.49h.319l1.372-6.49h2.462v6.808H6.742v-5.68l.232-.81h-.402l-1.43 6.49H2.854l-1.44-6.49h-.391l.222.81v5.68H0V8.596zM24 8.63v1.429L21.257 12 24 13.941v1.43l-3.235-2.329h-.348l-3.226 2.329v-1.43l2.734-1.94-2.733-1.942V8.63l3.225 2.338h.348zm-7.869 2.75v1.24H9.304v-1.24z"})})},v={spotify:"Spotify","apple-music":"Apple Music",bandcamp:"Bandcamp",discogs:"Discogs",beatport:"Beatport",youtube:"YouTube",mixcloud:"Mixcloud"},l=j.forwardRef(({platform:s,children:r,iconOnly:a=!1,state:t="idle",icon:n,isExternal:d=!1,className:g,disabled:y,...k},N)=>{const w=y||t==="disabled",m=t==="loading",h=t==="success",z=()=>m?e.jsx(_,{className:"btn-platform__icon animate-spin"}):h?e.jsx(u,{className:"btn-platform__icon"}):n||(s==="spotify"&&!d?e.jsx(T,{className:"btn-platform__icon"}):D[s]),S=()=>a?null:m?e.jsx("span",{className:"btn-platform__label",children:"Adding..."}):h?e.jsx("span",{className:"btn-platform__label",children:"Added"}):r?e.jsx("span",{className:"btn-platform__label",children:r}):e.jsx("span",{className:"btn-platform__label",children:v[s]});return e.jsxs("button",{ref:N,type:"button",className:C("btn-platform",`btn-platform--${s}`,a&&"btn-platform--icon-only",m&&"btn-platform--loading",h&&"btn-platform--success",g),disabled:w,"aria-label":a?v[s]:void 0,"aria-busy":m,...k,children:[z(),S()]})});l.displayName="TrackCardButton";function M(){const[s,r]=j.useState("tokens");return e.jsxs("div",{className:"min-h-screen",style:{background:"var(--tr-black, #000000)",color:"var(--tr-text, #efeeec)"},children:[e.jsx("header",{className:"sticky top-0 z-50 backdrop-blur-sm",style:{borderBottom:"1px solid var(--tr-border, #333333)",background:"rgba(0,0,0,0.95)"},children:e.jsxs("div",{className:"container mx-auto px-4 py-4",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-4",children:[e.jsx(B,{href:"/",children:e.jsx("button",{className:"p-2 rounded-lg transition-colors",style:{color:"var(--tr-text-muted)"},children:e.jsx(A,{className:"w-5 h-5"})})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-xl font-bold",children:"Design System Audit"}),e.jsx("p",{style:{fontSize:"12px",color:"var(--tr-text-muted)"},children:"Visual comparison of all design tokens"})]})]}),e.jsx("div",{className:"flex gap-2",children:["tokens","buttons","comparison"].map(a=>e.jsx("button",{onClick:()=>r(a),className:"px-4 py-2 rounded-lg text-sm font-medium transition-colors capitalize",style:{background:s===a?"var(--tr-brand-red, #dc2626)":"var(--tr-surface, #111111)",color:s===a?"#ffffff"

1:"var(--tr-text-secondary)"},children:a},a))})]})}),e.jsxs("main",{className:"container mx-auto px-4 py-8",children:[s==="tokens"&&e.jsx(L,{}),s==="buttons"&&e.jsx(R,{}),s==="comparison"&&e.jsx(H,{})]})]})}function L(){return e.jsxs("div",{className:"space-y-12",children:[e.jsxs("section",{children:[e.jsx(c,{title:"Color System",subtitle:"design-tokens.css"}),e.jsxs("div",{className:"grid md:grid-cols-2 lg:grid-cols-3 gap-6",children:[e.jsx(i,{title:"Backgrounds",tokens:[{name:"--tr-black",css:"var(--tr-black)",hex:"#000000"},{name:"--tr-surface",css:"var(--tr-surface)",hex:"#111111"},{name:"--tr-surface-light",css:"var(--tr-surface-light)",hex:"#1a1a1a"},{name:"--tr-border",css:"var(--tr-border)",hex:"#333333"}]}),e.jsx(i,{title:"Text Hierarchy",tokens:[{name:"--tr-text",css:"var(--tr-text)",hex:"#f8fafc"},{name:"--tr-text-secondary",css:"var(--tr-text-secondary)",hex:"#cbd5e1"},{name:"--tr-text-muted",css:"var(--tr-text-muted)",hex:"#94a3b8"},{name:"--tr-text-disabled",css:"var(--tr-text-disabled)",hex:"#64748b"}]}),e.jsx(i,{title:"Brand & Accent",tokens:[{name:"--tr-brand-red",css:"var(--tr-brand-red)",hex:"#dc2626"},{name:"--tr-brand-red",css:"var(--tr-brand-red)",hex:"#dc2626"},{name:"--tr-brand-red",css:"var(--tr-brand-red)",hex:"#dc2626"},{name:"--tr-info",css:"var(--tr-info)",hex:"#06b6d4"}]}),e.jsx(i,{title:"Status Colors",tokens:[{name:"--tr-success",css:"var(--tr-success)",hex:"#10b981"},{name:"--tr-warning",css:"var(--tr-warning)",hex:"#f59e0b"},{name:"--tr-error",css:"var(--tr-error)",hex:"#ef4444"},{name:"--tr-unknown",css:"var(--tr-unknown)",hex:"#64748b"}]}),e.jsx(i,{title:"Platform Colors",tokens:[{name:"--tr-spotify",css:"var(--tr-spotify)",hex:"#1DB954"},{name:"--tr-apple-music",css:"var(--tr-apple-music)",hex:"#FC3C44"},{name:"--tr-bandcamp",css:"var(--tr-bandcamp)",hex:"#09A2C8"},{name:"--tr-discogs",css:"var(--tr-discogs)",hex:"#FDB515"},{name:"--tr-soundcloud",css:"var(--tr-soundcloud)",hex:"#ff5500"}]})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Typography",subtitle:"Font sizes from design-tokens.css"}),e.jsxs("div",{className:"space-y-4 p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx(o,{name:"--font-size-dashboard-title",size:"28px",weight:"700",sample:"Dashboard Title"}),e.jsx(o,{name:"--font-size-section-title",size:"22px",weight:"600",sample:"Section Title"}),e.jsx(o,{name:"--font-size-section-header",size:"20px",weight:"600",sample:"Section Header"}),e.jsx(o,{name:"--font-size-body-large",size:"16px",weight:"400",sample:"Body Large - Main content text"}),e.jsx(o,{name:"--font-size-body",size:"14px",weight:"400",sample:"Body - Default text size for most content"}),e.jsx(o,{name:"--font-size-body-small",size:"12px",weight:"400",sample:"Body Small - Secondary info, labels, metadata"})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Spacing Scale",subtitle:"4px base unit"}),e.jsx("div",{className:"flex flex-wrap gap-6 items-end p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[{name:"2xs",value:"2px"},{name:"xs",value:"4px"},{name:"sm",value:"8px"},{name:"md",value:"16px"},{name:"lg",value:"24px"},{name:"xl",value:"32px"},{name:"2xl",value:"48px"}].map(s=>e.jsxs("div",{className:"text-center",children:[e.jsx("div",{style:{width:s.value,height:s.value,background:"var(--tr-brand-red)",borderRadius:"2px"}}),e.jsxs("code",{style:{fontSize:"10px",color:"var(--tr-text-muted)",display:"block",marginTop:"8px"},children:["--space-",s.name]}),e.jsx("code",{style:{fontSize:"10px",color:"var(--tr-text-secondary)"},children:s.value})]},s.name))})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Track Card Tokens",subtitle:"Specific to UnifiedTrackCard & MobileTrackCard"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsx(i,{title:"Artwork Sizes",tokens:[{name:"--track-artwork-compact",css:"var(--track-artwork-compact)",hex:"48px"},{name:"--track-artwork-regular",css:"var(--track-artwork-regular)",hex:"64px"},{name:"--track-artwork-expanded",css:"var(--track-artwork-expanded)",hex:"80px"}],showSwatch:!1}),e.jsx(i,{title:"Card Layout",tokens:[{name:"--track-card-padding",css:"var(--track-card-padding)",hex:"12px"},{name:"--track-card-gap",css:"var(--track-card-gap)",hex:"12px"},{name:"--track-card-radius",css:"var(--track-card-radius)",hex:"12px"},{name:"--track-card-action-gap",css:"var(--track-card-action-gap)",hex:"8px"}],showSwatch:!1}),e.jsx(i,{title:"Platform Button",tokens:[{name:"--platform-btn-height",css:"var(--platform-btn-height)",hex:"36px"},{name:"--platform-btn-padding",css:"var(--platform-btn-padding)",hex:"12px"},{name:"--platform-btn-font-size",css:"var(--platform-btn-font-size)",hex:"12px"},{name:"--platform-btn-icon-size",css:"var(--platform-btn-icon-size)",hex:"14px"}],showSwatch:!1})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Border Radius",subtitle:"Consistent roun

1ding scale"}),e.jsx("div",{className:"flex flex-wrap gap-4 p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[{name:"sm",value:"4px"},{name:"md",value:"6px"},{name:"lg",value:"8px"},{name:"xl",value:"12px"},{name:"2xl",value:"16px"},{name:"full",value:"9999px"}].map(s=>e.jsxs("div",{className:"text-center",children:[e.jsx("div",{style:{width:"48px",height:"48px",background:"var(--tr-brand-red)",borderRadius:s.value}}),e.jsxs("code",{style:{fontSize:"10px",color:"var(--tr-text-muted)",display:"block",marginTop:"8px"},children:["--radius-",s.name]}),e.jsx("code",{style:{fontSize:"10px",color:"var(--tr-text-secondary)"},children:s.value})]},s.name))})]})]})}function R(){const[s,r]=j.useState({}),a=t=>{r(n=>({...n,[t]:"loading"})),setTimeout(()=>r(n=>({...n,[t]:"success"})),1e3),setTimeout(()=>r(n=>({...n,[t]:"idle"})),2500)};return e.jsxs("div",{className:"space-y-12",children:[e.jsxs("section",{children:[e.jsx(c,{title:"Desktop: Icon + Label",subtitle:"TrackCardButton.tsx"}),e.jsxs("div",{className:"flex flex-wrap gap-3 p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx(l,{platform:"spotify",isExternal:!0,children:"Open Spotify"}),e.jsx(l,{platform:"spotify",children:"Add to Liked"}),e.jsx(l,{platform:"apple-music",children:"Apple Music"}),e.jsx(l,{platform:"bandcamp",children:"Bandcamp"}),e.jsx(l,{platform:"discogs",children:"Discogs"})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Mobile: Icon Only",subtitle:"Responsive button variant"}),e.jsxs("div",{className:"flex flex-wrap gap-3 p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx(l,{platform:"spotify",iconOnly:!0,isExternal:!0}),e.jsx(l,{platform:"spotify",iconOnly:!0}),e.jsx(l,{platform:"apple-music",iconOnly:!0}),e.jsx(l,{platform:"bandcamp",iconOnly:!0}),e.jsx(l,{platform:"discogs",iconOnly:!0})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Interactive States",subtitle:"Click to test animation"}),e.jsxs("div",{className:"flex flex-wrap gap-3 p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx(l,{platform:"spotify",state:s["test-spotify"]||"idle",onClick:()=>a("test-spotify"),children:"Click Me"}),e.jsx(l,{platform:"spotify",state:"loading",children:"Loading..."}),e.jsx(l,{platform:"spotify",state:"success",children:"Added!"}),e.jsx(l,{platform:"spotify",state:"disabled",disabled:!0,children:"Disabled"})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"All Platforms - All States",subtitle:"Complete button matrix"}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",children:["spotify","apple-music","bandcamp","discogs"].map(t=>e.jsxs("div",{className:"p-4 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx("h4",{className:"text-sm font-semibold mb-3 capitalize",children:t.replace("-"," ")}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx(l,{platform:t,state:"idle",iconOnly:!0}),e.jsx(l,{platform:t,state:"idle",children:"Idle"})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(l,{platform:t,state:"loading",iconOnly:!0}),e.jsx(l,{platform:t,state:"loading",children:"Loading"})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(l,{platform:t,state:"success",iconOnly:!0}),e.jsx(l,{platform:t,state:"success",children:"Success"})]})]})]},t))})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Confidence Badges",subtitle:"track-card.css"}),e.jsxs("div",{className:"flex flex-wrap gap-6 p-6 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"track-card__confidence track-card__confidence--high",children:"95%"}),e.jsx("span",{style:{color:"var(--tr-text-muted)",fontSize:"12px"},children:"High (≥80%)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"track-card__confidence track-card__confidence--medium",children:"72%"}),e.jsx("span",{style:{color:"var(--tr-text-muted)",fontSize:"12px"},children:"Medium (60-79%)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"track-card__confidence track-card__confidence--low",children:"45%"}),e.jsx("span",{style:{color:"var(--tr-text-muted)",fontSize:"12px"},children:"Low (<60%)"})]})]})]})]})}function H(){return e.jsxs("div",{className:"space-y-12",children:[e.jsxs("section",{children:[e.jsx(c,{title:"Design System Health",subtitle:"Current state analysis"}),e.jsxs("div",{className:"grid md:grid-cols-3 gap-4",children:[e.jsx(f,{title:"design-tokens.css",score:8,status:"primary",items:[{label:"Tokens defined",value:"234+",status:"good"},{label:"Actually used",value:"~50",status:"warning"},{label:"Platform colors",value:"5",status:"good"},{label:"Track card tokens",value:"15",status:"good"}]}),e.jsx(f,{title:"neural-design-system.css",score:3,status:"warning",items:[{label:"Status",value:"Legacy",status:"warning"},{label:"Overlapping tokens",value:"40+",status:"bad"},{label:"Recommendation",value:"Deprecate",status:"warning"}]}),e.jsx(f,{title:"Tailwind/index.css",score:6,status:"good",items:[{label:"--primary alias",value:"#dc2626",status:"good"},{label:"Shadcn compat",value:"Yes",status:"good"}

1,{label:"Blue violations",value:"0",status:"good"}]})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Token Conflicts",subtitle:"Same concept, different names"}),e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full text-sm",style:{background:"var(--tr-surface)"},children:[e.jsx("thead",{children:e.jsxs("tr",{style:{borderBottom:"1px solid var(--tr-border)"},children:[e.jsx("th",{className:"text-left p-3",children:"Concept"}),e.jsx("th",{className:"text-left p-3",children:"design-tokens.css"}),e.jsx("th",{className:"text-left p-3",children:"neural-design-system.css"}),e.jsx("th",{className:"text-left p-3",children:"index.css (Tailwind)"}),e.jsx("th",{className:"text-left p-3",children:"Recommendation"})]})}),e.jsxs("tbody",{children:[e.jsx(x,{concept:"Brand Red",tokens:["--tr-brand-red","--neural-brand-red","--primary"],recommendation:"Use --tr-brand-red"}),e.jsx(x,{concept:"Background",tokens:["--tr-black","--neural-bg-primary","--background"],recommendation:"Use --tr-black"}),e.jsx(x,{concept:"Surface",tokens:["--tr-surface","--neural-bg-secondary","--card"],recommendation:"Use --tr-surface"}),e.jsx(x,{concept:"Text Primary",tokens:["--tr-text","--neural-text-primary","--foreground"],recommendation:"Use --tr-text"}),e.jsx(x,{concept:"Spotify Green",tokens:["--tr-spotify","--neural-spotify","N/A"],recommendation:"Use --tr-spotify"})]})]})})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Live Token Test",subtitle:"Which tokens actually render?"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"p-4 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx("h4",{className:"font-semibold mb-4",children:"design-tokens.css (Active)"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded",style:{background:"var(--tr-brand-red)"}}),e.jsx("span",{children:"--tr-brand-red"}),e.jsx(u,{className:"w-4 h-4 text-green-500 ml-auto"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded",style:{background:"var(--tr-spotify)"}}),e.jsx("span",{children:"--tr-spotify"}),e.jsx(u,{className:"w-4 h-4 text-green-500 ml-auto"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded",style:{background:"var(--tr-surface)"}}),e.jsx("span",{children:"--tr-surface"}),e.jsx(u,{className:"w-4 h-4 text-green-500 ml-auto"})]})]})]}),e.jsxs("div",{className:"p-4 rounded-xl",style:{background:"#111111",border:"1px solid #333333"},children:[e.jsx("h4",{className:"font-semibold mb-4",children:"Hardcoded Values (Common in code)"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded",style:{background:"#dc2626"}}),e.jsx("span",{children:"#dc2626 (red)"}),e.jsx(b,{className:"w-4 h-4 text-yellow-500 ml-auto"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded",style:{background:"#1DB954"}}),e.jsx("span",{children:"#1DB954 (spotify)"}),e.jsx(b,{className:"w-4 h-4 text-yellow-500 ml-auto"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded",style:{background:"#111111"}}),e.jsx("span",{children:"#111111 (surface)"}),e.jsx(b,{className:"w-4 h-4 text-yellow-500 ml-auto"})]})]})]})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Recommendations",subtitle:"Action items for design system consolidation"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(p,{priority:"high",title:"Deprecate neural-design-system.css",description:"All tokens have equivalents in design-tokens.css. Create migration guide."}),e.jsx(p,{priority:"high",title:"Replace hardcoded colors",description:"100+ instances of #dc2626, #111111, etc. should use CSS variables."}),e.jsx(p,{priority:"medium",title:"Remove unused tokens",description:"~180 tokens defined but never used. Audit and remove dead code."}),e.jsx(p,{priority:"low",title:"Add token documentation",description:"JSDoc comments for each token explaining when/where to use."})]})]}),e.jsxs("section",{children:[e.jsx(c,{title:"Source Files",subtitle:"Where design tokens live"}),e.jsx("div",{className:"grid md:grid-cols-2 gap-4",children:[{path:"client/src/styles/design-tokens.css",desc:"PRIMARY - 290 lines, core tokens"},{path:"client/src/styles/track-card.css",desc:"750 lines, platform buttons & cards"}

1,{path:"client/src/styles/neural-design-system.css",desc:"LEGACY - should deprecate"},{path:"client/src/index.css",desc:"Tailwind + shadcn/ui compatibility"},{path:"client/src/components/tracks/TrackCardButton.tsx",desc:"Platform button component"},{path:"client/src/pages/TrackCardDemo.tsx",desc:"Full card demo at /design/track-cards"}].map(s=>e.jsxs("div",{className:"p-4 rounded-lg",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx("code",{style:{fontSize:"12px",color:"var(--tr-brand-red)",fontWeight:500},children:s.path}),e.jsx("p",{style:{fontSize:"12px",color:"var(--tr-text-muted)",marginTop:"4px"},children:s.desc})]},s.path))})]})]})}function c({title:s,subtitle:r}){return e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"text-xl font-bold",style:{color:"var(--tr-text)"},children:s}),e.jsx("code",{style:{fontSize:"12px",color:"var(--tr-text-muted)"},children:r})]})}function i({title:s,tokens:r,showSwatch:a=!0}){return e.jsxs("div",{className:"p-4 rounded-xl",style:{background:"var(--tr-surface)",border:"1px solid var(--tr-border)"},children:[e.jsx("h3",{className:"font-semibold mb-3",style:{fontSize:"14px"},children:s}),e.jsx("div",{className:"space-y-2",children:r.map(t=>e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsx("code",{style:{fontSize:"11px",color:"var(--tr-text-secondary)"},children:t.name}),e.jsxs("div",{className:"flex items-center gap-2",children:[a&&e.jsx("div",{className:"w-4 h-4 rounded",style:{background:t.css,border:"1px solid rgba(255,255,255,0.1)"}}),e.jsx("code",{style:{fontSize:"11px",color:"var(--tr-text-muted)"},children:t.hex})]})]},t.name))})]})}function o({name:s,size:r,weight:a,sample:t}){return e.jsxs("div",{className:"flex items-baseline gap-4 pb-3",style:{borderBottom:"1px solid var(--tr-border)"},children:[e.jsx("code",{style:{fontSize:"11px",color:"var(--tr-brand-red)",minWidth:"200px"},children:s}),e.jsx("code",{style:{fontSize:"11px",color:"var(--tr-text-muted)",minWidth:"60px"},children:r}),e.jsx("p",{style:{fontSize:r,fontWeight:a},children:t})]})}function f({title:s,score:r,status:a,items:t}){const n={primary:"var(--tr-brand-red)",good:"#10b981",warning:"#f59e0b"};return e.jsxs("div",{className:"p-4 rounded-xl",style:{background:"var(--tr-surface)",border:`2px solid ${n[a]}`},children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsx("h4",{className:"font-semibold text-sm",children:s}),e.jsxs("span",{className:"text-2xl font-bold",style:{color:n[a]},children:[r,"/10"]})]}),e.jsx("div",{className:"space-y-2",children:t.map(d=>e.jsxs("div",{className:"flex justify-between text-xs",children:[e.jsx("span",{style:{color:"var(--tr-text-muted)"},children:d.label}),e.jsx("span",{style:{color:d.status==="good"?"#10b981":d.status==="warning"?"#f59e0b":"#ef4444"},children:d.value})]},d.label))})]})}function x({concept:s,tokens:r,recommendation:a}){return e.jsxs("tr",{style:{borderBottom:"1px solid var(--tr-border)"},children:[e.jsx("td",{className:"p-3 font-medium",children:s}),r.map((t,n)=>e.jsx("td",{className:"p-3",children:e.jsx("code",{style:{fontSize:"11px",color:t==="N/A"?"var(--tr-text-muted)":"var(--tr-text-secondary)"},children:t})},n)),e.jsx("td",{className:"p-3",children:e.jsx("span",{style:{fontSize:"11px",color:"#10b981"},children:a})})]})}function p({priority:s,title:r,description:a}){const t={high:{bg:"rgba(239, 68, 68, 0.1)",border:"#ef4444",text:"#ef4444"},medium:{bg:"rgba(245, 158, 11, 0.1)",border:"#f59e0b",text:"#f59e0b"},low:{bg:"rgba(16, 185, 129, 0.1)",border:"#10b981",text:"#10b981"}};return e.jsxs("div",{className:"p-4 rounded-lg flex gap-4",style:{background:t[s].bg,border:`1px solid ${t[s].border}`},children:[e.jsx("span",{className:"text-xs font-bold uppercase",style:{color:t[s].text,minWidth:"60px"},children:s}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-sm",children:r}),e.jsx("p",{style:{fontSize:"12px",color:"var(--tr-text-muted)",marginTop:"2px"},children:a})]})]})}const I=Object.freeze(Object.defineProperty({__proto__:null,default:M},Symbol.toStringTag,{value:"Module"}));

1export{I as D,l as T};