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
< /button>
/* glass-button:
height: 48px
background: rgba(0,0,0,0.6)
backdrop-filter: blur(18px)
border-radius: 12px
border: 1px solid rgba(255,255,255,0.12)
*/ `,usedIn:"ChatInput send, modal actions, primary controls"},{id:"atom-glass-btn-sm",name:"Glass Button Small",category:"atoms",description:"Compact glass button variant",code:` < button class = "glass-button-sm" >
Small
< /button>
/* 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" ... >
< /button>
/* path-glass-icon:
background: transparent
transition: colors
hover: bg-white/10
*/ `,usedIn:"ChatHeader toolbar, detail back buttons, close buttons"},{id:"atom-badge",name:"Genre Badge",category:"atoms",description:"Tiny pill badge for tags/genres",code:` < span class = "text-xs px-2 py-1 rounded-md
font-medium bg-white/10 text-white/60" >
Science Fiction
< /span>`,usedIn:"FilmGrid, SongGrid, BookGrid, TVSeriesGrid genre filters"},{id:"atom-nav-tab",name:"Nav Tab",category:"atoms",description:"Content panel tab with active state",code:`<button class="nav-tab-active">
Films
< /button>
/* Active: accent underline
Inactive: text-white/50 hover:text-white
Transition: 200ms */ `,usedIn:"ContentPanel tab bar, mobile content tab filters"},{id:"atom-input",name:"Text Input",category:"atoms",description:"Search/filter input field",code:` < input
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..."
/>`,usedIn:"All grid search bars, ProjectGrid new project"},{id:"atom-scrollbar",name:"Custom Scrollbar",category:"atoms",description:"Thin translucent scrollbar for scroll areas",code:`.custom-scrollbar::-webkit-scrollbar {
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 < /h3>
< p > Content < /p>
< /div>
/* glass-card:
background: rgba(0,0,0,0.65)
backdrop-filter: blur(18px)
border: 1px solid rgba(255,255,255,0.12)
border-radius: 16px
padding: 16px
*/ `,usedIn:"ChatWindow container, content panel wrapper"},{id:"mol-gradient-card",name:"Gradient Card",category:"molecules",description:"Card with gradient background",code:` < div class = "gradient-card" >
< h3 > Featured < /h3>
< p > Content < /p>
< /div>
/* gradient-card:
background: linear-gradient(135deg, ...)
border-radius: 16px
*/ `,usedIn:"Featured content highlights, promotional sections"},{id:"mol-source-link",name:"Source Link Row",category:"molecules",description:"Icon + label + external link arrow",code:` < a class = "flex items-center justify-between
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 < /span>
< div >
< p class = "text-xs font-medium
text-white/80" > Name < /p>
< p class = "text-xs
text-white/30" > Description < /p>
< /div>
< /div>
< svg > <!-- external link icon -->< /svg>
< /a>`,usedIn:"FilmDetail, SongDetail, PodcastDetail sources"},{id:"mol-banner-hero",name:"Banner Hero",category:"molecules",description:"Aspect 16/7 image with gradient overlay",code:`<div class="relative w-full aspect-[16/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</h2>
</div>
</div>`,usedIn:" FilmDetail , TVSeriesDetail , BookDetail banners "},{id:" mol - cover - card ",name:" Cover Card ",category:" molecules ",description:" Poster / cover image card with overlay text ",code:`<button class=" group rounded - 2 xl overflow - hidden ">
<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>
</div>
</div>
</button>`,usedIn:" FilmGrid , TVSeriesGrid , SongGrid , BookGrid cards "},{id:" org - chat - bubble ",name:" Chat Bubble ",category:" organisms ",description:" AI / User message bubble with streaming ",code:`<!-- User bubble -->
<div class=" flex justify - end ">
<div class=" glass - card max - w - [ 85 % ]
px - 4 py - 3 text - sm text - white / 90 ">
Message text
</div>
</div>
<!-- AI bubble -->
<div class=" flex justify - start ">
<div class=" max - w - [ 85 % ] px - 4 py - 3
text - sm text - white / 80 ">
Response with markdown
</div>
</div>`,usedIn:" ChatMessage . vue — the primary chat interface "},{id:" org - content - panel ",name:" Content Panel ",category:" organisms ",description:" Tabs + grid + detail navigation ",code:`<!-- Structure -->
<div class=" flex flex - col h - full ">
<!-- Tab bar -->
<div class=" flex gap - 1 px - 3 py - 2 ">
<button class=" nav - tab ">Tab</button>
</div>
<!-- Grid view -->
<ContentGridView />
<!-- or Detail view -->
<DetailView />
</div>`,usedIn:" ChatPage middle column , mobile Content tab "},{id:" org - detail - view ",name:" Detail View ",category:" organisms ",description:" Full detail with banner , back button , metadata ",code:`<!-- Pattern: Banner → Meta → Content -->
<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</button>
<div class=" absolute bottom - 0 p - 4 ">
<h2>Title</h2>
<div>Metadata</div>
</div>
</div>
<!-- Body -->
<div class=" p - 4 space - y - 4 ">
<p>Description</p>
<div>Genre badges</div>
<div>Source links</div>
</div>
</div>`,usedIn:" FilmDetail , BookDetail , TVSeriesDetail , SongDetail , PodcastDetail "},{id:" org - magazine ",name:" Magazine Grid ",category:" organisms ",description:" Editorial tile layout with hero , wide , and half tiles ",code:`<!-- Magazine structure -->
<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</h2>
<p class=" font - serif text - sm ">Text</p>
</button>
<!-- Half tiles -->
<button class=" px - 4 py - 4 bg - [ # 0 a0a0a ] ">
<h3 class=" font - serif text - sm
font - bold ">Title</h3>
<p class=" font - serif text - xs ">Text</p>
</button>
</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
</div>
<div class=" flex - 1 ">
<span class=" text - xs font - semibold ">
author</span>
<p class=" text - xs text - white / 60 ">
Note content...</p>
<span class=" text - xs
text - amber - 500 / 70 ">21000 sats</span>
</div>
</div>
</div>`,usedIn:" NostrGrid . vue — Nostr feed tab "},{id:" anim - fade - up ",name:" Fade Up ",category:" atoms ",description:" Entry animation : translate + opacity ",code:`.animate-fade-up {
animation: fadeUp 900ms ease-out;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
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 250ms 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 : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ) ":" border - bottom : 1 px 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 - [ 44 px ] min - h - [ 44 px ] 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 13 l4 4 L19 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:" 4 px ",height:" 30 % "}},null,-1),e(" div ",{class:" bg - accent / 40 rounded - sm ",style:{width:" 4 px ",height:" 50 % "}},null,-1),e(" div ",{class:" bg - accent / 40 rounded - sm ",style:{width:" 4 px ",height:" 70 % "}},null,-1),e(" div ",{class:" bg - accent / 40 rounded - sm ",style:{width:" 4 px ",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 "}</title>
<style>
body { font-family: Georgia, serif; max-width: 700px; margin: 2em auto; padding: 0 1em; line-height: 1.7; color: #222; }
h1 { font-size: 1.8em; margin-bottom: 0.5em; }
h2 { font-size: 1.4em; margin-top: 1.5em; }
h3 { font-size: 1.2em; margin-top: 1.2em; }
code { background: #f0f0f0; padding: 2px 5px; border-radius: 3px; }
pre { background: #f5f5f5; padding: 1em; overflow-x: auto; border-radius: 5px; }
blockquote { border-left: 3px solid #ccc; padding-left: 1em; color: #555; }
img { max-width: 100%; }
a { color: #0066cc; }
</style></head><body>
${c.title?`<h1>${c.title}</h1>`:""}
${_.value}
</body></html>`),D.document.close(),D.print())}return(D,y)=>(s(),n(" div ",Gi,[C.value.length>1?(s(),n(" aside ",Oi,[y[4]||(y[4]=e(" p ",{class:" text - xs uppercase tracking - wider text - white / 30 mb - 2 px - 2 "}," Contents ",-1)),(s(!0),n(I,null,B(C.value,(k,h)=>(s(),n(" button ",{key:h,class:o([" text - left text - xs leading - relaxed py - 1 px - 2 rounded transition - colors truncate ",[r.value===h?" text - accent bg - accent / 10 ":" text - white / 50 hover : text - white / 70 hover : bg - white / 5 ",k.level===3?" pl - 5 ":""]]),onClick:$=>j(k.id)},d(k.text),11,Hi))),128))])):m("",!0),e(" div ",{ref_key:" contentRef ",ref:u,class:" flex - 1 overflow - y - auto scrollbar - hide "},[e(" div ",Wi,[e(" button ",{class:" min - w - [ 44 px ] min - h - [ 44 px ] flex items - center justify - center rounded - lg text - white / 60 hover : text - white / 80 hover : bg - white / 10 transition - colors ",title:" Back ",onClick:y[0]||(y[0]=k=>D.$emit(" back "))},[...y[5]||(y[5]=[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 19 l - 7 - 7 7 - 7 "})],-1)])]),e(" span ",Ki,d(f.value)+" min read ",1),C.value.length>1?(s(),n(" button ",{key:0,class:" lg : hidden min - w - [ 44 px ] min - h - [ 44 px ] flex items - center justify - center rounded - lg text - white / 60 hover : text - white / 80 hover : bg - white / 10 transition - colors ",title:" Table of contents ",onClick:y[1]||(y[1]=k=>b.value=!b.value)},[...y[6]||(y[6]=[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:" M4 6 h16M4 12 h16M4 18 h7 "})],-1)])])):m("",!0),e(" button ",{class:" min - w - [ 44 px ] min - h - [ 44 px ] flex items - center justify - center rounded - lg text - white / 60 hover : text - white / 80 hover : bg - white / 10 transition - colors ",title:" Decrease font size ",disabled:g.value<=0,onClick:y[2]||(y[2]=k=>g.value=Math.max(0,g.value-1))},[...y[7]||(y[7]=[e(" span ",{class:" text - xs font - bold "}," A - ",-1)])],8,Yi),e(" button ",{class:" min - w - [ 44 px ] min - h - [ 44 px ] flex items - center justify - center rounded - lg text - white / 60 hover : text - white / 80 hover : bg - white / 10 transition - colors ",title:" Increase font size ",disabled:g.value>=l.length-1,onClick:y[3]||(y[3]=k=>g.value=Math.min(l.length-1,g.value+1))},[...y[8]||(y[8]=[e(" span ",{class:" text - xs font - bold "}," A + ",-1)])],8,Qi),e(" button ",{class:" min - w - [ 44 px ] min - h - [ 44 px ] flex items - center justify - center rounded - lg text - white / 60 hover : text - white / 80 hover : bg - white / 10 transition - colors ",title:" Print ",onClick:P},[...y[9]||(y[9]=[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:" M17 17 h2a2 2 0 002 - 2 v - 4 a2 2 0 00 - 2 - 2 H5a2 2 0 00 - 2 2 v4a2 2 0 002 2 h2m2 4 h6a2 2 0 002 - 2 v - 4 a2 2 0 00 - 2 - 2 H9a2 2 0 00 - 2 2 v4a2 2 0 002 2 zm8 - 12 V5a2 2 0 00 - 2 - 2 H9a2 2 0 00 - 2 2 v4h10z "})],-1)])])]),b.value&&C.value.length>1?(s(),n(" div ",Ji,[(s(!0),n(I,null,B(C.value,(k,h)=>(s(),n(" button ",{key:h,class:o([" block w - full text - left text - xs py - 1 px - 2 rounded transition - colors truncate ",[r.value===h?" text - accent bg - accent / 10 ":" text - white / 50 hover : text - white / 70 ",k.level===3?" pl - 5 ":""]]),onClick:$=>{j(k.id),b.value=!1}},d(k.text),11,Zi))),128))])):m("",!0),e(" article ",{ref_key:" articleRef ",ref:i,class:" article - body px - 4 md : px - 8 py - 6 max - w - prose mx - auto leading - relaxed text - white / 90 ",style:G({fontSize:l[g.value]+" px "})},[a.title?(s(),n(" h1 ",Xi,d(a.title),1)):m("",!0),e(" div ",{class:" article - content [ & _h2 ] : text - lg [ & _h2 ] : font - semibold [ & _h2 ] : text - white / 96 [ & _h2 ] : mt - 8 [ & _h2 ] : mb - 3 [ & _h3 ] : text - base [ & _h3 ] : font - medium [ & _h3 ] : text - white / 90 [ & _h3 ] : mt - 6 [ & _h3 ] : mb - 2 [ & _p ] : mb - 4 [ & _ul ] : list - disc [ & _ul ] : ml - 5 [ & _ul ] : mb - 4 [ & _ol ] : list - decimal [ & _ol ] : ml - 5 [ & _ol ] : mb - 4 [ & _li ] : mb - 1 [ & _a ] : text - accent [ & _a ] : underline [ & _a ] : underline - offset - 2 [ & _blockquote ] : border - l - 2 [ & _blockquote ] : border - accent / 30 [ & _blockquote ] : pl - 4 [ & _blockquote ] : italic [ & _blockquote ] : text - white / 70 [ & _blockquote ] : my - 4 [ & _code ] : bg - white / 10 [ & _code ] : px - 1.5 [ & _code ] : py - 0.5 [ & _code ] : rounded [ & _code ] : text - [ 0.9 em ] [ & _pre ] : bg - white / 5 [ & _pre ] : rounded - lg [ & _pre ] : p - 4 [ & _pre ] : overflow - x - auto [ & _pre ] : my - 4 [ & _img ] : roun
`)[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():
