2026-04-09 20:42:09 +02:00
const _ _vite _ _mapDeps = ( i , m = _ _vite _ _mapDeps , d = ( m . f || ( m . f = [ "assets/useNostr-DYbkCQxC.js" , "assets/index-Lh5NfTCq.js" , "assets/index-CHQ7uqBj.css" , "assets/ThreadNode-Bt5yTyUn.js" ] ) ) ) => i . map ( i => d [ i ] ) ;
import { a as q , Z as Ht , $ as ut , p as Ne , b as s , c as n , e , h as G , u as t , n as o , t as d , f as ie , w as W , v as Q , F as I , g as B , i as m , j as J , r as M , k as L , a0 as Wt , a1 as xt , N as ne , a2 as ht , a3 as pt , a4 as gt , a5 as vt , U as De , a6 as Kt , a7 as Yt , a8 as Qt , P as Jt , z as he , Q as E , K as le , a9 as ae , aa as ye , _ as bt , A as ce , B as Pe , d as Zt , ab as Xt , L as se , ac as es , ad as ts , ae as ss , af as ns , S as ls , q as os , ag as as , o as is , M as ue , ah as Be , ai as rs } from "./index-Lh5NfTCq.js" ; import { u as cs } from "./chat-BEnAHpY-.js" ; import { u as $e , a as pe , e as Ye , d as ft , M as ds , b as us , s as xs , c as hs , f as be , _ as lt } from "./ChatWindow.vue_vue_type_script_setup_true_lang-DoshhDBV.js" ; import { _ as ps } from "./FilmGrid.vue_vue_type_script_setup_true_lang-CWkUdZ32.js" ; import { u as Ae } from "./useContentImages-CagIZs4M.js" ; import { _ as gs } from "./SongGrid.vue_vue_type_script_setup_true_lang-CW1T9zpX.js" ; import { useNostr as Le } from "./useNostr-DYbkCQxC.js" ; import { u as mt , _ as vs } from "./FilmDetail.vue_vue_type_script_setup_true_lang-Cg4zvjy1.js" ; import { _ as bs } from "./SongDetail.vue_vue_type_script_setup_true_lang-CvC0ROCb.js" ; const fs = { class : "h-full flex flex-col" } , ms = { class : "flex items-center justify-between gap-2" } , ws = { class : "flex items-center gap-2 shrink-0" } , ys = { key : 0 , class : "flex flex-wrap gap-1.5" } , ks = [ "onClick" ] , $s = { class : "flex-1 overflow-y-auto custom-scrollbar px-4 pt-4 pb-16" } , _s = { class : "grid grid-cols-2 sm:grid-cols-3 gap-4" } , Cs = [ "aria-label" , "onClick" ] , Ss = { class : "cover-card flex-1 min-h-0 relative" } , js = { key : 0 , class : "absolute inset-0 animate-shimmer" } , Ms = [ "src" , "alt" , "onError" ] , Ts = [ "src" , "alt" ] , Ds = { key : 3 , class : "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" } , Ls = { class : "absolute bottom-0 left-0 right-0 p-2" } , Is = { class : "text-xs font-semibold text-white/90 leading-tight truncate" } , Bs = { class : "text-xs text-white/40 truncate mt-0.5" } , Ps = { key : 4 , class : "absolute top-1.5 left-1.5" } , Ns = { class : "text-xs px-1.5 py-0.5 rounded bg-black/60 text-amber-400 backdrop-blur-sm font-medium" } , As = { key : 5 , class : "absolute top-1.5 right-1.5" } , zs = { class : "text-xs px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm" } , Fs = { key : 0 , class : "flex items-center justify-center py-12" } , Es = q ( { _ _name : "BookGrid" , props : { books : { } , title : { default : "Recommended Books" } } , emits : [ "selectBook" ] , setup ( a ) { const c = a , { isDark : l } = J ( ) , w = M ( "" ) , g = M ( null ) , { coverSrc : b , fallbackSrc : p , onError : v , isLoading : _ } = Ae ( { items : Ne ( c , "books" ) , id : u => u . id , existingUrl : u => u . coverUrl , fetch : u => ut ( u . title , u . author ) , fallback : u => Ht ( u . title , u . author ) } ) , C = L ( ( ) => { const u = new Map ; for ( const i of c . books ) for ( const r of i . genres ? ? [ ] ) u . set ( r , ( u . get ( r ) ? ? 0 ) + 1 ) ; return [ ... u . entries ( ) ] . sort ( ( i , r ) => r [ 1 ] - i [ 1 ] ) . slice ( 0 , 8 ) . map ( ( [ i ] ) => i ) } ) , f = L ( ( ) => { let u = c . books ; if ( w . value ) { const i = w . value . toLowerCase ( ) ; u = u . filter ( r => r . title . toLowerCase ( ) . includes ( i ) || r . author . toLowerCase ( ) . includes ( i ) || ( r . genres ? ? [ ] ) . some ( x => x . toLowerCase ( ) . includes ( i ) ) ) } return g . value && ( u = u . filter ( i => ( i . genres ? ? [ ] ) . includes ( g . value ) ) ) , u } ) ; return ( u , i ) => ( s ( ) , n ( "div" , fs , [ e ( "div" , { class : "p-4 space-y-3" , style : G ( t ( l ) ? "border-bottom: 1px solid rgba(255, 255, 255, 0.08)" : "border-bottom: 1px solid rgba(0, 0, 0, 0.06)" ) } , [ e ( "div" , ms , [ e ( "h3" , { class : o ( [ "text-sm font-bold" , t ( l ) ? "text-white/90" : "text-gray-900" ] ) } , d ( a . title ) , 3 ) , e ( "div" , ws , [ e ( "span" , { class : o ( [ "text-xs font-mono" , t ( l ) ? "text-white/30" : "text-gray-400" ] ) } , d ( f . value . length ) + " books " , 3 ) , ie ( u . $slots , "header-actions" ) ] ) ] ) , W ( e ( "input" , { "onUpdate:modelValue" : i [ 0 ] || ( i [ 0 ] = r => w . value = r ) , type : "text" , placeholder : "Search books..." , class : o ( [ "w-full px-3 py-2 rounded-lg text-base outline-none transition-colors" , t ( l ) ? "bg-white/5 text-white/80 placeholder:text-white/25 focus:bg-white/10" : "bg-black/3 text-gray-800 placeholder:text-gray-400 focus:bg-black/5" ] ) } , null , 2 ) , [ [ Q , w . value ] ] ) , C . value . length > 0 ? ( s ( ) , n ( "div" , ys , [ ( s ( ! 0 ) , n ( I , null , B ( C . value , r => ( s ( ) , n ( "button" , { key : r , class : o ( [ "text-xs px-2 py-1 rounded-md transition-all duration-150" , g . value === r ? "nav-tab-active" : t ( l ) ? "text-white/40 hover:text-white/70 hover:bg-white/5" : "text-gray-500 hover:text-gray-800 hover:bg-black/5" ] ) , onClick : x => g . value = g . value === r ? nul
2026-03-09 21:20:57 +00:00
/* Tailwind: bg-[#0a0a0a] */ ` ,usedIn:"ChatPage, all panels, base layout"},{id:"color-accent",name:"Accent / Bitcoin",category:"colors",preview:"inline",description:"Primary action color, Bitcoin orange",code: ` color : # F7931A ;
/* Tailwind: text-accent */ ` ,usedIn:"Gradient buttons, active tabs, zap counts, CTA elements"},{id:"color-primary",name:"Primary",category:"colors",preview:"inline",description:"Primary neutral tone",code: ` color : # 606060 ;
/* Tailwind: text-primary */ ` ,usedIn:"Secondary text, borders, muted elements"},{id:"color-surface",name:"Glass Surface",category:"colors",preview:"inline",description:"Glass morphism panel background",code: ` background : rgba ( 0 , 0 , 0 , 0.35 ) ;
backdrop - filter : blur ( 18 px ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.18 ) ;
/* Tailwind: .glass */ ` ,usedIn:"ChatInput, ContentPanel, all overlay panels"},{id:"color-text-scale",name:"Text Opacity Scale",category:"colors",preview:"inline",description:"/25 placeholder, /40 muted, /60 secondary, /80 body, /90 emphasis",code: ` /* Text opacity scale */
. placeholder { color : rgba ( 255 , 255 , 255 , 0.25 ) ; }
. muted { color : rgba ( 255 , 255 , 255 , 0.40 ) ; }
. secondary { color : rgba ( 255 , 255 , 255 , 0.60 ) ; }
. body { color : rgba ( 255 , 255 , 255 , 0.80 ) ; }
. emphasis { color : rgba ( 255 , 255 , 255 , 0.90 ) ; }
. heading { color : rgba ( 255 , 255 , 255 , 0.96 ) ; } ` ,usedIn:"Every component — consistent hierarchy across the system"},{id:"type-body",name:"Body Font",category:"typography",description:"Inter / system-ui for all body text",code: ` font - family : Inter , system - ui , - apple - system , sans - serif ;
/* Applied globally */ ` ,usedIn:"Global default — ChatMessage, grids, detail views"},{id:"type-mono",name:"Monospace Font",category:"typography",description:"Menlo / Monaco for code and IDs",code: ` font - family : Menlo , Monaco , "Courier New" , monospace ;
/* Tailwind: font-mono */ ` ,usedIn:"CodeDetail, conversation IDs, relay URLs, metadata"},{id:"type-serif",name:"Serif Font",category:"typography",description:"Georgia for magazine/editorial layouts",code: ` font - family : Georgia , "Times New Roman" , Times , serif ;
/* Used in MagazineGrid, AI Brief */ ` ,usedIn:"MagazineGrid, MagazineSectionDetail, AI Brief"},{id:"type-sizes",name:"Text Sizes",category:"typography",description:"Compact scale: 10px labels to 2xl headings",code: ` /* Key sizes used */
text - xs /* labels, metadata */
text - xs /* 12px - secondary text */
text - sm /* 14px - body text */
text - base /* 16px - primary text */
text - lg /* 18px - section headings */
text - xl /* 20px - page headings */
text - 2 xl /* 24px - hero text */ ` ,usedIn:"Globally — see specific usage in each size bracket"},{id:"space-grid",name:"4px Grid",category:"spacing",preview:"inline",description:"All spacing follows a 4px base grid",code: ` /* 4px grid system */
1 = 4 px /* micro gap */
2 = 8 px /* tight gap */
3 = 12 px /* small padding */
4 = 16 px /* standard padding */
5 = 20 px /* section padding */
6 = 24 px /* large gap */
8 = 32 px /* section spacing */
12 = 48 px /* large sections */ ` ,usedIn:"Every layout — padding, margins, gaps between elements"},{id:"space-radius",name:"Border Radius",category:"spacing",preview:"inline",description:"Rounded corners from subtle to full",code: ` /* Border radius scale */
rounded - md /* 6px - badges, tags */
rounded - lg /* 8px - buttons, inputs */
rounded - xl /* 12px - cards, panels */
rounded - 2 xl /* 16px - large panels */
rounded - full /* pill buttons */ ` ,usedIn:"Badges (md), buttons (lg), cards (xl), panels (2xl)"},{id:"atom-glass-btn",name:"Glass Button",category:"atoms",description:"48px height, glass morphism background",code: ` < button class = "glass-button" >
Action
< / b u t t o n >
/ * g l a s s - b u t t o n :
height : 48 px
background : rgba ( 0 , 0 , 0 , 0.6 )
backdrop - filter : blur ( 18 px )
border - radius : 12 px
border : 1 px solid rgba ( 255 , 255 , 255 , 0.12 )
* / ` , u s e d I n : " C h a t I n p u t s e n d , m o d a l a c t i o n s , p r i m a r y c o n t r o l s " } , { i d : " a t o m - g l a s s - b t n - s m " , n a m e : " G l a s s B u t t o n S m a l l " , c a t e g o r y : " a t o m s " , d e s c r i p t i o n : " C o m p a c t g l a s s b u t t o n v a r i a n t " , c o d e : ` < b u t t o n c l a s s = " g l a s s - b u t t o n - s m " >
Small
< / b u t t o n >
/* Compact variant of glass-button */ ` ,usedIn:"ChatInput send/stop buttons, inline actions"},{id:"atom-icon-btn",name:"Icon Button",category:"atoms",description:"Path glass icon, 32-36px square",code: ` < button class = " w - 9 h - 9 rounded - xl path - glass - icon
flex items - center justify - center " >
< svg class = "w-4 h-4" ... >
< / b u t t o n >
/ * p a t h - g l a s s - i c o n :
background : transparent
transition : colors
hover : bg - white / 10
* / ` , u s e d I n : " C h a t H e a d e r t o o l b a r , d e t a i l b a c k b u t t o n s , c l o s e b u t t o n s " } , { i d : " a t o m - b a d g e " , n a m e : " G e n r e B a d g e " , c a t e g o r y : " a t o m s " , d e s c r i p t i o n : " T i n y p i l l b a d g e f o r t a g s / g e n r e s " , c o d e : ` < s p a n c l a s s = " t e x t - x s p x - 2 p y - 1 r o u n d e d - m d
font - medium bg - white / 10 text - white / 60 " >
Science Fiction
< / s p a n > ` , u s e d I n : " F i l m G r i d , S o n g G r i d , B o o k G r i d , T V S e r i e s G r i d g e n r e f i l t e r s " } , { i d : " a t o m - n a v - t a b " , n a m e : " N a v T a b " , c a t e g o r y : " a t o m s " , d e s c r i p t i o n : " C o n t e n t p a n e l t a b w i t h a c t i v e s t a t e " , c o d e : ` < b u t t o n c l a s s = " n a v - t a b - a c t i v e " >
Films
< / b u t t o n >
/ * A c t i v e : a c c e n t u n d e r l i n e
Inactive : text - white / 50 hover : text - white
Transition : 200 ms * / ` , u s e d I n : " C o n t e n t P a n e l t a b b a r , m o b i l e c o n t e n t t a b f i l t e r s " } , { i d : " a t o m - i n p u t " , n a m e : " T e x t I n p u t " , c a t e g o r y : " a t o m s " , d e s c r i p t i o n : " S e a r c h / f i l t e r i n p u t f i e l d " , c o d e : ` < i n p u t
class = " w - full px - 3 py - 2 rounded - lg text - xs
outline - none transition - colors
bg - white / 5 text - white / 80
placeholder : text - white / 25
focus : bg - white / 10 "
placeholder = "Search..."
/ > ` , u s e d I n : " A l l g r i d s e a r c h b a r s , P r o j e c t G r i d n e w p r o j e c t " } , { i d : " a t o m - s c r o l l b a r " , n a m e : " C u s t o m S c r o l l b a r " , c a t e g o r y : " a t o m s " , d e s c r i p t i o n : " T h i n t r a n s l u c e n t s c r o l l b a r f o r s c r o l l a r e a s " , c o d e : ` . c u s t o m - s c r o l l b a r : : - w e b k i t - s c r o l l b a r {
width : 4 px ;
}
. custom - scrollbar : : - webkit - scrollbar - thumb {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
border - radius : 2 px ;
}
/* Also: .scrollbar-hide hides completely */ ` ,usedIn:"Content grids, chat message list, file trees"},{id:"mol-glass-card",name:"Glass Card",category:"molecules",description:"Frosted glass card with border",code: ` < div class = "glass-card" >
< h3 > Title < / h 3 >
< p > Content < / p >
< / d i v >
/ * g l a s s - c a r d :
background : rgba ( 0 , 0 , 0 , 0.65 )
backdrop - filter : blur ( 18 px )
border : 1 px solid rgba ( 255 , 255 , 255 , 0.12 )
border - radius : 16 px
padding : 16 px
* / ` , u s e d I n : " C h a t W i n d o w c o n t a i n e r , c o n t e n t p a n e l w r a p p e r " } , { i d : " m o l - g r a d i e n t - c a r d " , n a m e : " G r a d i e n t C a r d " , c a t e g o r y : " m o l e c u l e s " , d e s c r i p t i o n : " C a r d w i t h g r a d i e n t b a c k g r o u n d " , c o d e : ` < d i v c l a s s = " g r a d i e n t - c a r d " >
< h3 > Featured < / h 3 >
< p > Content < / p >
< / d i v >
/ * g r a d i e n t - c a r d :
background : linear - gradient ( 135 deg , ... )
border - radius : 16 px
* / ` , u s e d I n : " F e a t u r e d c o n t e n t h i g h l i g h t s , p r o m o t i o n a l s e c t i o n s " } , { i d : " m o l - s o u r c e - l i n k " , n a m e : " S o u r c e L i n k R o w " , c a t e g o r y : " m o l e c u l e s " , d e s c r i p t i o n : " I c o n + l a b e l + e x t e r n a l l i n k a r r o w " , c o d e : ` < a c l a s s = " f l e x i t e m s - c e n t e r j u s t i f y - b e t w e e n
p - 3 rounded - xl bg - white / 5
hover : bg - white / 10 transition - colors " >
< div class = "flex items-center gap-2.5" >
< span class = "text-sm" > icon < / s p a n >
< div >
< p class = " text - xs font - medium
text - white / 80 " > Name < / p >
< p class = " text - xs
text - white / 30 " > Description < / p >
< / d i v >
< / d i v >
< svg > <!-- external link icon -- > < / s v g >
< / a > ` , u s e d I n : " F i l m D e t a i l , S o n g D e t a i l , P o d c a s t D e t a i l s o u r c e s " } , { i d : " m o l - b a n n e r - h e r o " , n a m e : " B a n n e r H e r o " , c a t e g o r y : " m o l e c u l e s " , d e s c r i p t i o n : " A s p e c t 1 6 / 7 i m a g e w i t h g r a d i e n t o v e r l a y " , c o d e : ` < d i v c l a s s = " r e l a t i v e w - f u l l a s p e c t - [ 1 6 / 7 ]
overflow - hidden " >
< img : src = "url" class = " absolute inset - 0
w - full h - full object - cover " / >
< div class = " absolute inset - 0
bg - gradient - to - t from - black / 80
via - black / 30 to - transparent " / >
< div class = "absolute bottom-0 p-4" >
< h2 class = " text - lg font - bold
text - white " > Title < / h 2 >
< / d i v >
< / d i v > ` , u s e d I n : " F i l m D e t a i l , T V S e r i e s D e t a i l , B o o k D e t a i l b a n n e r s " } , { i d : " m o l - c o v e r - c a r d " , n a m e : " C o v e r C a r d " , c a t e g o r y : " m o l e c u l e s " , d e s c r i p t i o n : " P o s t e r / c o v e r i m a g e c a r d w i t h o v e r l a y t e x t " , c o d e : ` < b u t t o n c l a s s = " g r o u p r o u n d e d - 2 x l o v e r f l o w - h i d d e n " >
< div class = "aspect-[2/3] relative" >
< img class = " w - full h - full object - cover
group - hover : scale - 110
transition - transform duration - 300 " / >
< div class = " absolute inset - 0
bg - gradient - to - t from - black / 60
to - transparent " / >
< div class = "absolute bottom-0 p-2" >
< p class = "text-xs text-white/90" >
Title < / p >
< / d i v >
< / d i v >
< / b u t t o n > ` , u s e d I n : " F i l m G r i d , T V S e r i e s G r i d , S o n g G r i d , B o o k G r i d c a r d s " } , { i d : " o r g - c h a t - b u b b l e " , n a m e : " C h a t B u b b l e " , c a t e g o r y : " o r g a n i s m s " , d e s c r i p t i o n : " A I / U s e r m e s s a g e b u b b l e w i t h s t r e a m i n g " , c o d e : ` < ! - - U s e r b u b b l e - - >
< div class = "flex justify-end" >
< div class = " glass - card max - w - [ 85 % ]
px - 4 py - 3 text - sm text - white / 90 " >
Message text
< / d i v >
< / d i v >
<!-- AI bubble -- >
< div class = "flex justify-start" >
< div class = " max - w - [ 85 % ] px - 4 py - 3
text - sm text - white / 80 " >
Response with markdown
< / d i v >
< / d i v > ` , u s e d I n : " C h a t M e s s a g e . v u e — t h e p r i m a r y c h a t i n t e r f a c e " } , { i d : " o r g - c o n t e n t - p a n e l " , n a m e : " C o n t e n t P a n e l " , c a t e g o r y : " o r g a n i s m s " , d e s c r i p t i o n : " T a b s + g r i d + d e t a i l n a v i g a t i o n " , c o d e : ` < ! - - S t r u c t u r e - - >
< div class = "flex flex-col h-full" >
<!-- Tab bar -- >
< div class = "flex gap-1 px-3 py-2" >
< button class = "nav-tab" > Tab < / b u t t o n >
< / d i v >
<!-- Grid view -- >
< ContentGridView / >
<!-- or Detail view -- >
< DetailView / >
< / d i v > ` , u s e d I n : " C h a t P a g e m i d d l e c o l u m n , m o b i l e C o n t e n t t a b " } , { i d : " o r g - d e t a i l - v i e w " , n a m e : " D e t a i l V i e w " , c a t e g o r y : " o r g a n i s m s " , d e s c r i p t i o n : " F u l l d e t a i l w i t h b a n n e r , b a c k b u t t o n , m e t a d a t a " , c o d e : ` < ! - - P a t t e r n : B a n n e r → M e t a → C o n t e n t - - >
< div class = "h-full overflow-y-auto" >
<!-- Banner with back button -- >
< div class = "relative aspect-[16/7]" >
< img class = "object-cover" / >
< div class = "gradient-overlay" / >
< button class = " absolute top - 3 left - 3
path - glass - icon " > Back < / b u t t o n >
< div class = "absolute bottom-0 p-4" >
< h2 > Title < / h 2 >
< div > Metadata < / d i v >
< / d i v >
< / d i v >
<!-- Body -- >
< div class = "p-4 space-y-4" >
< p > Description < / p >
< div > Genre badges < / d i v >
< div > Source links < / d i v >
< / d i v >
< / d i v > ` , u s e d I n : " F i l m D e t a i l , B o o k D e t a i l , T V S e r i e s D e t a i l , S o n g D e t a i l , P o d c a s t D e t a i l " } , { i d : " o r g - m a g a z i n e " , n a m e : " M a g a z i n e G r i d " , c a t e g o r y : " o r g a n i s m s " , d e s c r i p t i o n : " E d i t o r i a l t i l e l a y o u t w i t h h e r o , w i d e , a n d h a l f t i l e s " , c o d e : ` < ! - - M a g a z i n e s t r u c t u r e - - >
< div class = " grid grid - cols - 2 gap - px
bg - white / 12 " >
<!-- Wide tile ( col - span - 2 ) -- >
< button class = " col - span - 2 px - 5 py - 5
bg - [ # 0 a0a0a ] " >
< p class = " text - xs uppercase
tracking - [ 0.3 em ] " > Label < / p >
< h2 class = " font - serif text - lg
font - bold " > Title < / h 2 >
< p class = "font-serif text-sm" > Text < / p >
< / b u t t o n >
<!-- Half tiles -- >
< button class = "px-4 py-4 bg-[#0a0a0a]" >
< h3 class = " font - serif text - sm
font - bold " > Title < / h 3 >
< p class = "font-serif text-xs" > Text < / p >
< / b u t t o n >
< /div>`,usedIn:"MagazineGrid.vue — AI Brief editorial view"},{id:"org-nostr-note",name:"Nostr Note",category:"organisms",description:"Note card with avatar, author, content, zaps",code:`<div class="p-3 rounded-xl bg-white/ [ 0.03 ]
border border - white / 5 " >
< div class = "flex items-start gap-2.5" >
< div class = " w - 8 h - 8 rounded - full
bg - purple - 500 / 20 text - purple - 400 " >
F
< / d i v >
< div class = "flex-1" >
< span class = "text-xs font-semibold" >
author < / s p a n >
< p class = "text-xs text-white/60" >
Note content ... < / p >
< span class = " text - xs
text - amber - 500 / 70 " > 21000 sats < / s p a n >
< / d i v >
< / d i v >
< / d i v > ` , u s e d I n : " N o s t r G r i d . v u e — N o s t r f e e d t a b " } , { i d : " a n i m - f a d e - u p " , n a m e : " F a d e U p " , c a t e g o r y : " a t o m s " , d e s c r i p t i o n : " E n t r y a n i m a t i o n : t r a n s l a t e + o p a c i t y " , c o d e : ` . a n i m a t e - f a d e - u p {
animation : fadeUp 900 ms ease - out ;
}
@ keyframes fadeUp {
from {
opacity : 0 ;
transform : translateY ( 16 px ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
/* Also: animate-fade-up-fast (400ms) */ ` ,usedIn:"Empty states, initial load elements, ChatWindow"},{id:"anim-scale-in",name:"Scale In",category:"atoms",description:"Micro entrance with scale and opacity",code: ` . animate - scale - in {
animation : scaleIn 250 ms ease - out ;
}
@ keyframes scaleIn {
from {
opacity : 0 ;
transform : scale ( 0.95 ) ;
}
to {
opacity : 1 ;
transform : scale ( 1 ) ;
}
2026-04-09 20:42:09 +02:00
} ` ,usedIn:"Modal entries, tooltip appearances, popovers"}],C=L(()=>p.value==="all"?_:_.filter(i=>i.category===p.value));function f(i){l(i)}function u(i){const r=/(?:background-color|color|background): \s *([^;]+)/i.exec(i);if(!r)return"#333";const x=r[1].trim();return x.startsWith("#")||x.startsWith("rgb")||x.startsWith("hsl")?x:"#333"}return(i,r)=>(s(),n("div",To,[e("div",{class:"shrink-0 px-4 py-3 flex items-center justify-between gap-2",style:G(t(c)?"border-bottom: 1px solid rgba(255, 255, 255, 0.08)":"border-bottom: 1px solid rgba(0, 0, 0, 0.06)")},[e("span",{class:o(["text-sm font-semibold",t(c)?"text-white/90":"text-gray-900"])}," Design System ",2),e("p",{class:o(["text-xs",t(c)?"text-white/30":"text-gray-400"])},d(C.value.length)+" items ",3)],4),e("div",Do,[(s(),n(I,null,B(v,x=>e("button",{key:x.id,class:o(["text-xs px-2.5 py-1 rounded-md font-medium whitespace-nowrap transition-colors",p.value===x.id?"bg-accent/20 text-accent":t(c)?"bg-white/5 text-white/50 hover:bg-white/10":"bg-black/5 text-gray-500 hover:bg-black/10"]),onClick:S=>p.value=x.id},d(x.label),11,Lo)),64))]),e("div",Io,[e("div",Bo,[(s(!0),n(I,null,B(C.value,x=>(s(),n("button",{key:x.id,class:o(["text-left p-3 rounded-xl transition-all duration-150 group relative",[t(w)&&t(b)(x.id)?"ring-2 ring-accent/50 bg-accent/10 cursor-pointer":t(c)?"bg-white/[0.03] hover:bg-white/[0.07] cursor-pointer":"bg-black/[0.02] hover:bg-black/[0.05] cursor-pointer"]]),onClick:S=>f(x)},[t(w)?(s(),n("div",{key:0,class:o(["absolute top-2 right-2 min-w-[44px] min-h-[44px] rounded-full flex items-center justify-center z-10 cursor-pointer transition-colors",t(b)(x.id)?"bg-accent":t(c)?"bg-white/10 hover:bg-white/20":"bg-black/10 hover:bg-black/20"]),onClick:he(S=>t(g)(x.id),["stop"])},[t(b)(x.id)?(s(),n("svg",Ao,[...r[0]||(r[0]=[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"3",d:"M5 13l4 4L19 7"},null,-1)])])):m("",!0)],10,No)):m("",!0),x.category==="colors"&&x.preview==="inline"?(s(),n("div",{key:1,class:o(["h-8 rounded-md mb-2 border",t(c)?"border-white/10":"border-black/10"]),style:G({background:u(x.code)})},null,6)):x.category==="spacing"&&x.preview==="inline"?(s(),n("div",zo,[...r[1]||(r[1]=[e("div",{class:"bg-accent/40 rounded-sm",style:{width:"4px",height:"30%"}},null,-1),e("div",{class:"bg-accent/40 rounded-sm",style:{width:"4px",height:"50%"}},null,-1),e("div",{class:"bg-accent/40 rounded-sm",style:{width:"4px",height:"70%"}},null,-1),e("div",{class:"bg-accent/40 rounded-sm",style:{width:"4px",height:"100%"}},null,-1)])])):(s(),n("div",Fo,[(s(),n("svg",{class:o(["w-5 h-5 transition-colors",t(c)?"text-white/20 group-hover:text-white/40":"text-black/15 group-hover:text-black/30"]),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[x.category==="atoms"?(s(),n("path",Eo)):x.category==="molecules"?(s(),n("path",Ro)):x.category==="organisms"?(s(),n("path",Vo)):(s(),n("path",Uo))],2))])),e("h3",{class:o(["text-xs font-semibold leading-tight mb-0.5",t(c)?"text-white/80":"text-gray-800"])},d(x.name),3),e("p",{class:o(["text-xs leading-snug line-clamp-2",t(c)?"text-white/40":"text-gray-400"])},d(x.description),3)],10,Po))),128))])])]))}}),we=M(null),it=M(!1),qe=M(!1),xe=M(null);function fe(){const a=L(()=>{if(!we.value)return null;try{return Ye(we.value)}catch{return null}}),c=L(()=>!!we.value),l=L(()=>a.value?a.value.slice(0,12)+"..."+a.value.slice(-8):null);function w(){it.value=typeof window<"u"&&!!window.nostr}async function g(){if(xe.value=null,!window.nostr){xe.value="No Nostr extension detected. Install nos2x, Alby, or another NIP-07 extension.";return}qe.value=!0;try{const v=await window.nostr.getPublicKey();we.value=v}catch(v){xe.value=v instanceof Error?v.message:"Failed to get public key"}finally{qe.value=!1}}async function b(v){if(xe.value=null,!window.nostr)return xe.value="No Nostr extension detected",null;try{return await window.nostr.signEvent(v)}catch(_){return xe.value=_ instanceof Error?_.message:"Failed to sign event",null}}function p(){we.value=null,xe.value=null}return le(()=>{w(),setTimeout(w,500)}),{pubkey:we,npub:a,
2026-03-09 21:20:57 +00:00
< html > < head > < title > $ { c . title || "Article" } < / t i t l e >
< style >
body { font - family : Georgia , serif ; max - width : 700 px ; margin : 2 em auto ; padding : 0 1 em ; line - height : 1.7 ; color : # 222 ; }
h1 { font - size : 1.8 em ; margin - bottom : 0.5 em ; }
h2 { font - size : 1.4 em ; margin - top : 1.5 em ; }
h3 { font - size : 1.2 em ; margin - top : 1.2 em ; }
code { background : # f0f0f0 ; padding : 2 px 5 px ; border - radius : 3 px ; }
pre { background : # f5f5f5 ; padding : 1 em ; overflow - x : auto ; border - radius : 5 px ; }
blockquote { border - left : 3 px solid # ccc ; padding - left : 1 em ; color : # 555 ; }
img { max - width : 100 % ; }
a { color : # 0066 cc ; }
< / s t y l e > < / h e a d > < b o d y >
$ { c . title ? ` <h1> ${ c . title } </h1> ` : "" }
$ { _ . value }
< / b o d y > < / h t m l > ` ) , D . d o c u m e n t . c l o s e ( ) , D . p r i n t ( ) ) } r e t u r n ( D , y ) = > ( s ( ) , n ( " d i v " , G i , [ C . v a l u e . l e n g t h > 1 ? ( s ( ) , n ( " a s i d e " , O i , [ y [ 4 ] | | ( y [ 4 ] = e ( " p " , { c l a s s : " t e x t - x s u p p e r c a s e t r a c k i n g - w i d e r t e x t - w h i t e / 3 0 m b - 2 p x - 2 " } , " C o n t e n t s " , - 1 ) ) , ( s ( ! 0 ) , n ( I , n u l l , B ( C . v a l u e , ( k , h ) = > ( s ( ) , n ( " b u t t o n " , { k e y : h , c l a s s : o ( [ " t e x t - l e f t t e x t - x s l e a d i n g - r e l a x e d p y - 1 p x - 2 r o u n d e d t r a n s i t i o n - c o l o r s t r u n c a t e " , [ r . v a l u e = = = h ? " t e x t - a c c e n t b g - a c c e n t / 1 0 " : " t e x t - w h i t e / 5 0 h o v e r : t e x t - w h i t e / 7 0 h o v e r : b g - w h i t e / 5 " , k . l e v e l = = = 3 ? " p l - 5 " : " " ] ] ) , o n C l i c k : $ = > j ( k . i d ) } , d ( k . t e x t ) , 1 1 , H i ) ) ) , 1 2 8 ) ) ] ) ) : m ( " " , ! 0 ) , e ( " d i v " , { r e f _ k e y : " c o n t e n t R e f " , r e f : u , c l a s s : " f l e x - 1 o v e r f l o w - y - a u t o s c r o l l b a r - h i d e " } , [ e ( " d i v " , W i , [ e ( " b u t t o n " , { c l a s s : " m i n - w - [ 4 4 p x ] m i n - h - [ 4 4 p x ] f l e x i t e m s - c e n t e r j u s t i f y - c e n t e r r o u n d e d - l g t e x t - w h i t e / 6 0 h o v e r : t e x t - w h i t e / 8 0 h o v e r : b g - w h i t e / 1 0 t r a n s i t i o n - c o l o r s " , t i t l e : " B a c k " , o n C l i c k : y [ 0 ] | | ( y [ 0 ] = k = > D . $ e m i t ( " b a c k " ) ) } , [ . . . y [ 5 ] | | ( y [ 5 ] = [ e ( " s v g " , { c l a s s : " w - 4 h - 4 " , f i l l : " n o n e " , s t r o k e : " c u r r e n t C o l o r " , v i e w B o x : " 0 0 2 4 2 4 " } , [ e ( " p a t h " , { " s t r o k e - l i n e c a p " : " r o u n d " , " s t r o k e - l i n e j o i n " : " r o u n d " , " s t r o k e - w i d t h " : " 2 " , d : " M 1 5 1 9 l - 7 - 7 7 - 7 " } ) ] , - 1 ) ] ) ] ) , e ( " s p a n " , K i , d ( f . v a l u e ) + " m i n r e a d " , 1 ) , C . v a l u e . l e n g t h > 1 ? ( s ( ) , n ( " b u t t o n " , { k e y : 0 , c l a s s : " l g : h i d d e n m i n - w - [ 4 4 p x ] m i n - h - [ 4 4 p x ] f l e x i t e m s - c e n t e r j u s t i f y - c e n t e r r o u n d e d - l g t e x t - w h i t e / 6 0 h o v e r : t e x t - w h i t e / 8 0 h o v e r : b g - w h i t e / 1 0 t r a n s i t i o n - c o l o r s " , t i t l e : " T a b l e o f c o n t e n t s " , o n C l i c k : y [ 1 ] | | ( y [ 1 ] = k = > b . v a l u e = ! b . v a l u e ) } , [ . . . y [ 6 ] | | ( y [ 6 ] = [ e ( " s v g " , { c l a s s : " w - 4 h - 4 " , f i l l : " n o n e " , s t r o k e : " c u r r e n t C o l o r " , v i e w B o x : " 0 0 2 4 2 4 " } , [ e ( " p a t h " , { " s t r o k e - l i n e c a p " : " r o u n d " , " s t r o k e - l i n e j o i n " : " r o u n d " , " s t r o k e - w i d t h " : " 2 " , d : " M 4 6 h 1 6 M 4 1 2 h 1 6 M 4 1 8 h 7 " } ) ] , - 1 ) ] ) ] ) ) : m ( " " , ! 0 ) , e ( " b u t t o n " , { c l a s s : " m i n - w - [ 4 4 p x ] m i n - h - [ 4 4 p x ] f l e x i t e m s - c e n t e r j u s t i f y - c e n t e r r o u n d e d - l g t e x t - w h i t e / 6 0 h o v e r : t e x t - w h i t e / 8 0 h o v e r : b g - w h i t e / 1 0 t r a n s i t i o n - c o l o r s " , t i t l e : " D e c r e a s e f o n t s i z e " , d i s a b l e d : g . v a l u e < = 0 , o n C l i c k : y [ 2 ] | | ( y [ 2 ] = k = > g . v a l u e = M a t h . m a x ( 0 , g . v a l u e - 1 ) ) } , [ . . . y [ 7 ] | | ( y [ 7 ] = [ e ( " s p a n " , { c l a s s : " t e x t - x s f o n t - b o l d " } , " A - " , - 1 ) ] ) ] , 8 , Y i ) , e ( " b u t t o n " , { c l a s s : " m i n - w - [ 4 4 p x ] m i n - h - [ 4 4 p x ] f l e x i t e m s - c e n t e r j u s t i f y - c e n t e r r o u n d e d - l g t e x t - w h i t e / 6 0 h o v e r : t e x t - w h i t e / 8 0 h o v e r : b g - w h i t e / 1 0 t r a n s i t i o n - c o l o r s " , t i t l e : " I n c r e a s e f o n t s i z e " , d i s a b l e d : g . v a l u e > = l . l e n g t h - 1 , o n C l i c k : y [ 3 ] | | ( y [ 3 ] = k = > g . v a l u e = M a t h . m i n ( l . l e n g t h - 1 , g . v a l u e + 1 ) ) } , [ . . . y [ 8 ] | | ( y [ 8 ] = [ e ( " s p a n " , { c l a s s : " t e x t - x s f o n t - b o l d " } , " A + " , - 1 ) ] ) ] , 8 , Q i ) , e ( " b u t t o n " , { c l a s s : " m i n - w - [ 4 4 p x ] m i n - h - [ 4 4 p x ] f l e x i t e m s - c e n t e r j u s t i f y - c e n t e r r o u n d e d - l g t e x t - w h i t e / 6 0 h o v e r : t e x t - w h i t e / 8 0 h o v e r : b g - w h i t e / 1 0 t r a n s i t i o n - c o l o r s " , t i t l e : " P r i n t " , o n C l i c k : P } , [ . . . y [ 9 ] | | ( y [ 9 ] = [ e ( " s v g " , { c l a s s : " w - 4 h - 4 " , f i l l : " n o n e " , s t r o k e : " c u r r e n t C o l o r " , v i e w B o x : " 0 0 2 4 2 4 " } , [ e ( " p a t h " , { " s t r o k e - l i n e c a p " : " r o u n d " , " s t r o k e - l i n e j o i n " : " r o u n d " , " s t r o k e - w i d t h " : " 2 " , d : " M 1 7 1 7 h 2 a 2 2 0 0 0 2 - 2 v - 4 a 2 2 0 0 0 - 2 - 2 H 5 a 2 2 0 0 0 - 2 2 v 4 a 2 2 0 0 0 2 2 h 2 m 2 4 h 6 a 2 2 0 0 0 2 - 2 v - 4 a 2 2 0 0 0 - 2 - 2 H 9 a 2 2 0 0 0 - 2 2 v 4 a 2 2 0 0 0 2 2 z m 8 - 1 2 V 5 a 2 2 0 0 0 - 2 - 2 H 9 a 2 2 0 0 0 - 2 2 v 4 h 1 0 z " } ) ] , - 1 ) ] ) ] ) ] ) , b . v a l u e & & C . v a l u e . l e n g t h > 1 ? ( s ( ) , n ( " d i v " , J i , [ ( s ( ! 0 ) , n ( I , n u l l , B ( C . v a l u e , ( k , h ) = > ( s ( ) , n ( " b u t t o n " , { k e y : h , c l a s s : o ( [ " b l o c k w - f u l l t e x t - l e f t t e x t - x s p y - 1 p x - 2 r o u n d e d t r a n s i t i o n - c o l o r s t r u n c a t e " , [ r . v a l u e = = = h ? " t e x t - a c c e n t b g - a c c e n t / 1 0 " : " t e x t - w h i t e / 5 0 h o v e r : t e x t - w h i t e / 7 0 " , k . l e v e l = = = 3 ? " p l - 5 " : " " ] ] ) , o n C l i c k : $ = > { j ( k . i d ) , b . v a l u e = ! 1 } } , d ( k . t e x t ) , 1 1 , Z i ) ) ) , 1 2 8 ) ) ] ) ) : m ( " " , ! 0 ) , e ( " a r t i c l e " , { r e f _ k e y : " a r t i c l e R e f " , r e f : i , c l a s s : " a r t i c l e - b o d y p x - 4 m d : p x - 8 p y - 6 m a x - w - p r o s e m x - a u t o l e a d i n g - r e l a x e d t e x t - w h i t e / 9 0 " , s t y l e : G ( { f o n t S i z e : l [ g . v a l u e ] + " p x " } ) } , [ a . t i t l e ? ( s ( ) , n ( " h 1 " , X i , d ( a . t i t l e ) , 1 ) ) : m ( " " , ! 0 ) , e ( " d i v " , { c l a s s : " a r t i c l e - c o n t e n t [ & _ h 2 ] : t e x t - l g [ & _ h 2 ] : f o n t - s e m i b o l d [ & _ h 2 ] : t e x t - w h i t e / 9 6 [ & _ h 2 ] : m t - 8 [ & _ h 2 ] : m b - 3 [ & _ h 3 ] : t e x t - b a s e [ & _ h 3 ] : f o n t - m e d i u m [ & _ h 3 ] : t e x t - w h i t e / 9 0 [ & _ h 3 ] : m t - 6 [ & _ h 3 ] : m b - 2 [ & _ p ] : m b - 4 [ & _ u l ] : l i s t - d i s c [ & _ u l ] : m l - 5 [ & _ u l ] : m b - 4 [ & _ o l ] : l i s t - d e c i m a l [ & _ o l ] : m l - 5 [ & _ o l ] : m b - 4 [ & _ l i ] : m b - 1 [ & _ a ] : t e x t - a c c e n t [ & _ a ] : u n d e r l i n e [ & _ a ] : u n d e r l i n e - o f f s e t - 2 [ & _ b l o c k q u o t e ] : b o r d e r - l - 2 [ & _ b l o c k q u o t e ] : b o r d e r - a c c e n t / 3 0 [ & _ b l o c k q u o t e ] : p l - 4 [ & _ b l o c k q u o t e ] : i t a l i c [ & _ b l o c k q u o t e ] : t e x t - w h i t e / 7 0 [ & _ b l o c k q u o t e ] : m y - 4 [ & _ c o d e ] : b g - w h i t e / 1 0 [ & _ c o d e ] : p x - 1 . 5 [ & _ c o d e ] : p y - 0 . 5 [ & _ c o d e ] : r o u n d e d [ & _ c o d e ] : t e x t - [ 0 . 9 e m ] [ & _ p r e ] : b g - w h i t e / 5 [ & _ p r e ] : r o u n d e d - l g [ & _ p r e ] : p - 4 [ & _ p r e ] : o v e r f l o w - x - a u t o [ & _ p r e ] : m y - 4 [ & _ i m g ] : r o u n
` )[0].replace(/^#+ /,"").slice(0,60)||"Untitled"}function _(u){const i=u.tags.find(r=>r[0]==="summary");return i?.[1]?i[1]:u.content.slice(0,120).replace(/[#*_]/g,"")}function C(u){return u.tags.find(r=>r[0]==="image")?.[1]??null}async function f(){l.value=!0,c.value=[];const u="wss://relay.nostr.band",i="articles-"+Math.random().toString(36).slice(2,8);try{const r=new WebSocket(u),x=[],S=setTimeout(()=>{r.close(),c.value=x,l.value=!1},1e4);r.onopen=()=>{r.send(JSON.stringify(["REQ",i,{kinds:[30023],limit:30}]))},r.onmessage=j=>{try{const P=JSON.parse(j.data);if(Array.isArray(P)&&P[0]==="EVENT"&&P[1]===i&&P[2]){const D=P[2];x.find(y=>y.id===D.id)||x.push({id:D.id,pubkey:D.pubkey,authorName:b(D.pubkey),kind:D.kind,content:D.content,created_at:D.created_at,tags:D.tags??[]})}Array.isArray(P)&&P[0]==="EOSE"&&(clearTimeout(S),r.close(),x.sort((D,y)=>y.created_at-D.created_at),c.value=x,l.value=!1)}catch{}},r.onerror=()=>{clearTimeout(S),l.value=!1}}catch{l.value=!1}}return le(()=>{f()}),(u,i)=>(s(),n("div",sr,[w.value?(s(),n(I,{key:0},[e("div",nr,[e("button",{class:"min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors",onClick:i[0]||(i[0]=r=>w.value=null)},[...i[1]||(i[1]=[e("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"})],-1)])]),e("span",lr,d(g.value),1)]),e("div",or,[se(tr,{content:w.value.content,title:g.value},null,8,["content","title"])])],64)):(s(),n(I,{key:1},[i[4]||(i[4]=e("div",{class:"p-4 border-b border-white/[0.08]"},[e("h3",{class:"text-sm font-bold text-white/90 mb-2"},"Long-Form Articles"),e("p",{class:"text-xs text-white/30"},"NIP-23 kind:30023 articles from your network")],-1)),e("div",ar,[l.value?(s(),n("div",ir,[...i[2]||(i[2]=[e("p",{class:"text-xs text-white/30"},"Loading articles...",-1)])])):m("",!0),(s(!0),n(I,null,B(c.value,r=>(s(),n("button",{key:r.id,class:"w-full text-left p-3 rounded-xl transition-all duration-150 bg-white/[0.03] hover:bg-white/[0.07] border border-white/5",onClick:x=>w.value=r},[e("div",cr,[e("h4",dr,d(v(r)),1),e("p",ur,d(_(r)),1),e("div",xr,[e("span",hr,d(b(r.pubkey)),1),e("span",pr,d(p(r.created_at)),1),C(r)?(s(),n("span",gr,"has image")):m("",!0)])])],8,rr))),128)),!l.value&&c.value.length===0?(s(),n("div",vr,[...i[3]||(i[3]=[e("p",{class:"text-xs text-white/30"},"No articles found",-1)])])):m("",!0)])],64))]))}}),Qe=1440*60*1e3,yt="aiui-nip05-cache",Te=M(new Map);function fr(){try{const a=localStorage.getItem(yt);if(a){const c=JSON.parse(a),l=Date.now(),w=c.filter(([,g])=>l-g.timestamp<Qe);Te.value=new Map(w)}}catch{}}function mr(){try{const a=Array.from(Te.value.entries());localStorage.setItem(yt,JSON.stringify(a))}catch{}}fr();function wr(){async function a(w,g){const b= ` $ { w } : $ { g } ` ,p=Te.value.get(b);if(p&&Date.now()-p.timestamp<Qe)return p.verified;try{const[v,_]=w.split("@");if(!v||!_)return!1;const C=await fetch( ` https : //${_}/.well-known/nostr.json?name=${encodeURIComponent(v)}`);if(!C.ok)return c(b,!1,g);const i=(await C.json())?.names?.[v]===g;return c(b,i,g)}catch{return c(b,!1,g)}}function c(w,g,b){return Te.value.set(w,{verified:g,pubkey:b,timestamp:Date.now()}),mr(),g}function l(w,g){const b=Te.value.get(`${w}:${g}`);return!b||Date.now()-b.timestamp>=Qe?null:b.verified}return{verifyNip05:a,isVerified:l}}const yr={class:"h-full flex flex-col"},kr={class:"flex gap-2 px-4 pt-3 pb-1"},$r=["onClick"],_r={class:"p-4 space-y-3 border-b border-white/[0.08]"},Cr={class:"flex items-center justify-between gap-2"},Sr={class:"flex items-center gap-2 shrink-0"},jr={class:"text-xs font-mono text-white/30"},Mr={key:1,class:"rounded-lg bg-white/5 border border-white/10 p-3 space-y-2"},Tr=["onKeydown"],Dr={class:"flex items-center justify-between gap-2"},Lr=["disabled"],Ir={key:0,class:"space-y-1"},Br={class:"truncate font-mono text-white/40"},Pr={class:"flex gap-2"},Nr=["disabled"],Ar={class:"flex gap-2"},zr=["onClick"],Fr={class:"flex-1 overflow-y-auto custom-scro
2026-04-09 20:42:09 +02:00
` ):[]);return(i,r)=>(s(),n("div",{class:o(["code-detail h-full flex flex-col overflow-hidden",t(c)?"bg-[#1a1a2e]":"bg-[#fafafa]"])},[e("div",{class:"shrink-0 flex items-center gap-2 px-3 py-2",style:G(t(c)?"border-bottom: 1px solid rgba(255, 255, 255, 0.08)":"border-bottom: 1px solid rgba(0, 0, 0, 0.06)")},[e("button",{class:"absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10",onClick:r[0]||(r[0]=x=>i. $ emit("back"))},[(s(),n("svg",{class:o(["w-4 h-4",t(c)?"text-white/70":"text-gray-600"]),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[...r[1]||(r[1]=[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"},null,-1)])],2))]),e("div",_0,[e("div",C0,[e("span",{class:o(["shrink-0 text-xs px-1.5 py-0.5 rounded font-mono",t(c)?"bg-white/10 text-white/50":"bg-black/5 text-gray-500"])},d(v.value),3),e("p",{class:o(["text-xs font-mono truncate",t(c)?"text-white/70":"text-gray-700"])},d(C.value),3)]),f.value?(s(),n("p",{key:0,class:o(["text-xs font-mono mt-0.5 truncate",t(c)?"text-white/25":"text-gray-400"])},d(f.value)+" / "+d(_.value),3)):m("",!0)])],4),e("div",S0,[p.value?(s(),n("div",j0,[e("table",M0,[e("tbody",null,[(s(!0),n(I,null,B(u.value,(x,S)=>(s(),n("tr",{key:S,class:"hover:bg-white/[0.03]"},[e("td",{class:o(["select-none text-right pr-4 pl-4 py-0 align-top w-1",t(c)?"text-white/15":"text-gray-300"]),style:{"min-width":"3rem"}},d(S+1),3),e("td",{class:o(["pr-4 py-0 whitespace-pre",t(c)?"text-white/75":"text-gray-700"])},d(x),3)]))),128))])])])):(s(),n("div",T0,[e("div",D0,[e("div",{class:o(["w-16 h-16 rounded-2xl flex items-center justify-center mx-auto",t(c)?"bg-white/5":"bg-black/5"])},[(s(),n("svg",{class:o(["w-7 h-7",t(c)?"text-white/20":"text-gray-300"]),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[...r[2]||(r[2]=[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.5",d:"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"},null,-1)])],2))],2),e("p",{class:o(["text-xs",t(c)?"text-white/30":"text-gray-400"])}," Select a file to view its contents. ",2)])]))])],2))}}),I0=De(L0,[["__scopeId","data-v-7f40c0bc"]]),B0={class:"h-full overflow-y-auto overflow-x-hidden scrollbar-hide"},P0={class:"min-w-0 flex-1"},N0={class:"p-4 space-y-4"},A0={key:0,class:"space-y-2"},z0={key:1,class:"space-y-2"},F0={key:2,class:"flex items-end gap-2"},E0={key:0,class:"text-[7px] text-accent font-mono"},R0={key:3,class:"space-y-2"},V0={key:0,class:"flex gap-3"},U0={key:1,class:"flex gap-3"},q0={key:2,class:"flex gap-3"},G0={key:3,class:"flex flex-wrap gap-1.5"},O0={key:4},H0={class:"glass-card p-4"},W0={key:5,class:"flex gap-1.5"},K0={key:6},Y0={key:7,class:"space-y-2"},Q0={key:8},J0={key:9,class:"space-y-1.5"},Z0={class:"flex items-center gap-2.5"},X0={key:10},ex={key:11,class:"flex gap-2"},tx={class:"absolute bottom-0 left-0 right-0 p-1.5"},sx={class:"text-xs text-white/80 font-medium truncate"},nx={key:12,class:"space-y-2"},lx={class:"flex justify-end"},ox={class:"flex justify-start"},ax={key:13,class:"space-y-2"},ix={class:"grid grid-cols-3 gap-1"},rx={key:14,class:"space-y-2"},cx={class:"space-y-1 px-1"},dx={key:15},ux={key:16},xx={class:"flex items-start gap-2.5"},hx={class:"min-w-0 flex-1"},px={class:"flex items-center gap-1.5"},gx={class:"flex gap-3 mt-1.5"},vx={key:17,class:"flex flex-col items-center gap-2"},bx={key:18,class:"flex flex-col items-center gap-2"},fx={key:19,class:"text-center py-4"},mx={key:0},wx=q({__name:"DesignSystemDetail",props:{item:{}},emits:["back"],setup(a){const c=a,{isDark:l}=J(),w=M(!1),g=M(0),b=M(0),p={colors:"Colors",typography:"Typography",spacing:"Spacing",atoms:"Atoms",molecules:"Molecules",organisms:"Organisms"},v=L(()=>p[c.item.category]??c.item.category),_=L(()=>c.item.id==="type-mono"?{fontFamily:'Menlo, Monaco, "Courier New", monospace'}:c.item.id==="type-serif"?{fontFamily:'Georgia, "Times New Roman", Times, serif'}:{fontFamily:"Inter, system-ui, -apple-system, sans-serif"});function C(u){const i=/(?:background-color|color|background): \s *([^;]+)/i.exec(u);return i?i[1].trim():
