2026-08-14 13:41:17 -04:00
const __vite__mapDeps = ( i , m = __vite__mapDeps , d = ( m . f || ( m . f = [ "assets/useNostr-CNDx2L4S.js" , "assets/index-DNCGxUDM.js" , "assets/index-BJh-vGUe.css" , "assets/ThreadNode-mLK8lEzr.js" ])))=> i . map ( i => d [ i ]);
import { a as G , Z as Gt , $ as rt , p as Ne , b as s , c as n , e , h as q , u as t , n as i , t as u , f as ie , w as W , v as Q , F as I , g as P , i as f , j as Z , r as S , k as B , a0 as Ot , a1 as ct , H as ne , a2 as dt , a3 as ut , a4 as ht , a5 as xt , a6 as $e , O as De , a7 as Ht , a8 as Wt , a9 as Kt , J as Yt , z as xe , K as U , D as oe , aa as ae , ab as ye , _ as pt , A as ce , B as Pe , d as Jt , ac as Qt , E as se , ad as Zt , ae as Xt , af as es , ag as ts , ah as ss , M as ns , q as ls , ai as os , o as as , G as ue , aj as Le , ak as is } from "./index-DNCGxUDM.js" ; import { u as rs } from "./chat-6rSjUpgv.js" ; import { u as pe , e as He , d as gt , M as cs , a as ds , b as fe , _ as tt } from "./ChatWindow.vue_vue_type_script_setup_true_lang-BoEjFUAe.js" ; import { _ as us } from "./FilmGrid.vue_vue_type_script_setup_true_lang-CkIQ4bRp.js" ; import { u as Ae } from "./useContentImages-DdjyABL9.js" ; import { _ as hs } from "./SongGrid.vue_vue_type_script_setup_true_lang-70SttNTZ.js" ; import { useNostr as Ie } from "./useNostr-CNDx2L4S.js" ; import { u as bt , _ as xs } from "./FilmDetail.vue_vue_type_script_setup_true_lang-Cgf4f-Ng.js" ; import { _ as ps } from "./SongDetail.vue_vue_type_script_setup_true_lang-0mQhUBE8.js" ; const gs = { class : "h-full flex flex-col" }, bs = { class : "flex items-center justify-between gap-2" }, vs = { class : "flex items-center gap-2 shrink-0" }, fs = { key : 0 , class : "flex flex-wrap gap-1.5" }, ms = [ "onClick" ], ws = { class : "flex-1 overflow-y-auto custom-scrollbar px-4 pt-4 pb-16" }, ys = { class : "grid grid-cols-2 sm:grid-cols-3 gap-4" }, ks = [ "aria-label" , "onClick" ], $s = { class : "cover-card flex-1 min-h-0 relative" }, _s = { key : 0 , class : "absolute inset-0 animate-shimmer" }, Cs = [ "src" , "alt" , "onError" ], js = [ "src" , "alt" ], Ss = { key : 3 , class : "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" }, Ms = { class : "absolute bottom-0 left-0 right-0 p-2" }, Ts = { class : "text-xs font-semibold text-white/90 leading-tight truncate" }, Ds = { class : "text-xs text-white/40 truncate mt-0.5" }, Is = { key : 4 , class : "absolute top-1.5 left-1.5" }, Bs = { class : "text-xs px-1.5 py-0.5 rounded bg-black/60 text-amber-400 backdrop-blur-sm font-medium" }, Ls = { key : 5 , class : "absolute top-1.5 right-1.5" }, Ps = { class : "text-xs px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm" }, Ns = { key : 0 , class : "flex items-center justify-center py-12" }, As = G ({ __name : "BookGrid" , props : { books : {}, title : { default : "Recommended Books" }}, emits : [ "selectBook" ], setup ( a ){ const c = a ,{ isDark : l } = Z (), w = S ( "" ), g = S ( null ),{ coverSrc : v , fallbackSrc : x , onError : m , isLoading : _ } = Ae ({ items : Ne ( c , "books" ), id : d => d . id , existingUrl : d => d . coverUrl , fetch : d => rt ( d . title , d . author ), fallback : d => Gt ( d . title , d . author )}), $ = B (()=>{ const d = new Map ; for ( const o of c . books ) for ( const r of o . genres ?? []) d . set ( r ,( d . get ( r ) ?? 0 ) + 1 ); return [... d . entries ()]. sort (( o , r )=> r [ 1 ] - o [ 1 ]). slice ( 0 , 8 ). map (([ o ])=> o )}), b = B (()=>{ let d = c . books ; if ( w . value ){ const o = w . value . toLowerCase (); d = d . filter ( r => r . title . toLowerCase (). includes ( o ) || r . author . toLowerCase (). includes ( o ) || ( r . genres ?? []). some ( h => h . toLowerCase (). includes ( o )))} return g . value && ( d = d . filter ( o =>( o . genres ?? []). includes ( g . value ))), d }); return ( d , o )=>( s (), n ( "div" , gs ,[ e ( "div" ,{ class : "p-4 space-y-3" , style : q ( t ( l ) ? "border-bottom: 1px solid rgba(255, 255, 255, 0.08)" : "border-bottom: 1px solid rgba(0, 0, 0, 0.06)" )},[ e ( "div" , bs ,[ e ( "h3" ,{ class : i ([ "text-sm font-bold" , t ( l ) ? "text-white/90" : "text-gray-900" ])}, u ( a . title ), 3 ), e ( "div" , vs ,[ e ( "span" ,{ class : i ([ "text-xs font-mono" , t ( l ) ? "text-white/30" : "text-gray-400" ])}, u ( b . value . length ) + " books " , 3 ), ie ( d . $slots , "header-actions" )])]), W ( e ( "input" ,{ "onUpdate:modelValue" : o [ 0 ] || ( o [ 0 ] = r => w . value = r ), type : "text" , placeholder : "Search books..." , class : i ([ "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 ]]), $ . value . length > 0 ? ( s (), n ( "div" , fs ,[( s ( ! 0 ), n ( I , null , P ( $ . value , r =>( s (), n ( "button" ,{ key : r , class : i ([ "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 : h => g . value = g . value === r ? null : r }, u
2026-08-12 10:55:50 +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-08-14 13:41:17 -04:00
}`,usedIn:" Modal entries , tooltip appearances , popovers "}],$=B(()=>x.value===" all "?_:_.filter(o=>o.category===x.value));function b(o){l(o)}function d(o){const r=/(?:background-color|color|background):\s*([^;]+)/i.exec(o);if(!r)return" # 333 ";const h=r[1].trim();return h.startsWith(" # ")||h.startsWith(" rgb ")||h.startsWith(" hsl ")?h:" # 333 "}return(o,r)=>(s(),n(" div ",jo,[e(" div ",{class:" shrink - 0 px - 4 py - 3 flex items - center justify - between gap - 2 ",style:q(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:i([" text - sm font - semibold ",t(c)?" text - white / 90 ":" text - gray - 900 "])}," Design System ",2),e(" p ",{class:i([" text - xs ",t(c)?" text - white / 30 ":" text - gray - 400 "])},u($.value.length)+" items ",3)],4),e(" div ",So,[(s(),n(I,null,P(m,h=>e(" button ",{key:h.id,class:i([" text - xs px - 2.5 py - 1 rounded - md font - medium whitespace - nowrap transition - colors ",x.value===h.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:M=>x.value=h.id},u(h.label),11,Mo)),64))]),e(" div ",To,[e(" div ",Do,[(s(!0),n(I,null,P($.value,h=>(s(),n(" button ",{key:h.id,class:i([" text - left p - 3 rounded - xl transition - all duration - 150 group relative ",[t(w)&&t(v)(h.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:M=>b(h)},[t(w)?(s(),n(" div ",{key:0,class:i([" 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(v)(h.id)?" bg - accent ":t(c)?" bg - white / 10 hover : bg - white / 20 ":" bg - black / 10 hover : bg - black / 20 "]),onClick:xe(M=>t(g)(h.id),[" stop "])},[t(v)(h.id)?(s(),n(" svg ",Lo,[...r[0]||(r[0]=[e(" path ",{" stroke - linecap ":" round "," stroke - linejoin ":" round "," stroke - width ":" 3 ",d:" M5 13 l4 4 L19 7 "},null,-1)])])):f("",!0)],10,Bo)):f("",!0),h.category===" colors "&&h.preview===" inline "?(s(),n(" div ",{key:1,class:i([" h - 8 rounded - md mb - 2 border ",t(c)?" border - white / 10 ":" border - black / 10 "]),style:q({background:d(h.code)})},null,6)):h.category===" spacing "&&h.preview===" inline "?(s(),n(" div ",Po,[...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 ",No,[(s(),n(" svg ",{class:i([" 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 "},[h.category===" atoms "?(s(),n(" path ",Ao)):h.category===" molecules "?(s(),n(" path ",zo)):h.category===" organisms "?(s(),n(" path ",Eo)):(s(),n(" path ",Fo))],2))])),e(" h3 ",{class:i([" text - xs font - semibold leading - tight mb - 0.5 ",t(c)?" text - white / 80 ":" text - gray - 800 "])},u(h.name),3),e(" p ",{class:i([" text - xs leading - snug line - clamp - 2 ",t(c)?" text - white / 40 ":" text - gray - 400 "])},u(h.description),3)],10,Io))),128))])])]))}}),we=S(null),lt=S(!1),Re=S(!1),he=S(null);function me(){const a=B(()=>{if(!we.value)return null;try{return He(we.value)}catch{return null}}),c=B(()=>!!we.value),l=B(()=>a.value?a.value.slice(0,12)+" ... "+a.value.slice(-8):null);function w(){lt.value=typeof window<" u "&&!!window.nostr}async function g(){if(he.value=null,!window.nostr){he.value=" No Nostr extension detected . Install nos2x , Alby , or another NIP - 07 extension . ";return}Re.value=!0;try{const m=await window.nostr.getPublicKey();we.value=m}catch(m){he.value=m instanceof Error?m.message:" Failed to get public key "}finally{Re.value=!1}}async function v(m){if(he.value=null,!window.nostr)return he.value=" No Nostr extension detected ",null;try{return await window.nostr.signEvent(m)}catch(_){return he.value=_ instanceof Error?_.message:" Failed to sign event ",null}}function x(){we.value=null,he.value=null}return oe(()=>{w(),setTimeout(w,500)}),{pubkey:we,npub:a,
2026-08-12 10:55:50 +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,C)=>(s(),n(" div ",Vi,[$.value.length>1?(s(),n(" aside ",Ui,[C[4]||(C[4]=e(" p ",{class:" text - xs uppercase tracking - wider text - white / 30 mb - 2 px - 2 "}," Contents ",-1)),(s(!0),n(I,null,P($.value,(k,p)=>(s(),n(" button ",{key:p,class:i([" text - left text - xs leading - relaxed py - 1 px - 2 rounded transition - colors truncate ",[r.value===p?" text - accent bg - accent / 10 ":" text - white / 50 hover : text - white / 70 hover : bg - white / 5 ",k.level===3?" pl - 5 ":""]]),onClick:y=>j(k.id)},u(k.text),11,qi))),128))])):f("",!0),e(" div ",{ref_key:" contentRef ",ref:d,class:" flex - 1 overflow - y - auto scrollbar - hide "},[e(" div ",Gi,[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:C[0]||(C[0]=k=>D.$emit(" back "))},[...C[5]||(C[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 ",Oi,u(b.value)+" min read ",1),$.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:C[1]||(C[1]=k=>v.value=!v.value)},[...C[6]||(C[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)])])):f("",!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:C[2]||(C[2]=k=>g.value=Math.max(0,g.value-1))},[...C[7]||(C[7]=[e(" span ",{class:" text - xs font - bold "}," A - ",-1)])],8,Hi),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:C[3]||(C[3]=k=>g.value=Math.min(l.length-1,g.value+1))},[...C[8]||(C[8]=[e(" span ",{class:" text - xs font - bold "}," A + ",-1)])],8,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:" Print ",onClick:L},[...C[9]||(C[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)])])]),v.value&&$.value.length>1?(s(),n(" div ",Ki,[(s(!0),n(I,null,P($.value,(k,p)=>(s(),n(" button ",{key:p,class:i([" block w - full text - left text - xs py - 1 px - 2 rounded transition - colors truncate ",[r.value===p?" text - accent bg - accent / 10 ":" text - white / 50 hover : text - white / 70 ",k.level===3?" pl - 5 ":""]]),onClick:y=>{j(k.id),v.value=!1}},u(k.text),11,Yi))),128))])):f("",!0),e(" article ",{ref_key:" articleRef ",ref:o,class:" article - body px - 4 md : px - 8 py - 6 max - w - prose mx - auto leading - relaxed text - white / 90 ",style:q({fontSize:l[g.value]+" px "})},[a.title?(s(),n(" h1 ",Ji,u(a.title),1)):f("",!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 _(d){const o=d.tags.find(r=>r[0]==="summary");return o?.[1]?o[1]:d.content.slice(0,120).replace(/[#*_]/g,"")}function $(d){return d.tags.find(r=>r[0]==="image")?.[1]??null}async function b(){l.value=!0,c.value=[];const d="wss://relay.nostr.band",o="articles-"+Math.random().toString(36).slice(2,8);try{const r=new WebSocket(d),h=[],M=setTimeout(()=>{r.close(),c.value=h,l.value=!1},1e4);r.onopen=()=>{r.send(JSON.stringify(["REQ",o,{kinds:[30023],limit:30}]))},r.onmessage=j=>{try{const L=JSON.parse(j.data);if(Array.isArray(L)&&L[0]==="EVENT"&&L[1]===o&&L[2]){const D=L[2];h.find(C=>C.id===D.id)||h.push({id:D.id,pubkey:D.pubkey,authorName:v(D.pubkey),kind:D.kind,content:D.content,created_at:D.created_at,tags:D.tags??[]})}Array.isArray(L)&&L[0]==="EOSE"&&(clearTimeout(M),r.close(),h.sort((D,C)=>C.created_at-D.created_at),c.value=h,l.value=!1)}catch{}},r.onerror=()=>{clearTimeout(M),l.value=!1}}catch{l.value=!1}}return oe(()=>{b()}),(d,o)=>(s(),n("div",Xi,[w.value?(s(),n(I,{key:0},[e("div",er,[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:o[0]||(o[0]=r=>w.value=null)},[...o[1]||(o[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",tr,u(g.value),1)]),e("div",sr,[se(Zi,{content:w.value.content,title:g.value},null,8,["content","title"])])],64)):(s(),n(I,{key:1},[o[4]||(o[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",nr,[l.value?(s(),n("div",lr,[...o[2]||(o[2]=[e("p",{class:"text-xs text-white/30"},"Loading articles...",-1)])])):f("",!0),(s(!0),n(I,null,P(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:h=>w.value=r},[e("div",ar,[e("h4",ir,u(m(r)),1),e("p",rr,u(_(r)),1),e("div",cr,[e("span",dr,u(v(r.pubkey)),1),e("span",ur,u(x(r.created_at)),1),$(r)?(s(),n("span",hr,"has image")):f("",!0)])])],8,or))),128)),!l.value&&c.value.length===0?(s(),n("div",xr,[...o[3]||(o[3]=[e("p",{class:"text-xs text-white/30"},"No articles found",-1)])])):f("",!0)])],64))]))}}),We=1440*60*1e3,ft="aiui-nip05-cache",Te=S(new Map);function gr(){try{const a=localStorage.getItem(ft);if(a){const c=JSON.parse(a),l=Date.now(),w=c.filter(([,g])=>l-g.timestamp<We);Te.value=new Map(w)}}catch{}}function br(){try{const a=Array.from(Te.value.entries());localStorage.setItem(ft,JSON.stringify(a))}catch{}}gr();function vr(){async function a(w,g){const v=` $ { w } : $ { g } `,x=Te.value.get(v);if(x&&Date.now()-x.timestamp<We)return x.verified;try{const[m,_]=w.split("@");if(!m||!_)return!1;const $=await fetch(` https : //${_}/.well-known/nostr.json?name=${encodeURIComponent(m)}`);if(!$.ok)return c(v,!1,g);const o=(await $.json())?.names?.[m]===g;return c(v,o,g)}catch{return c(v,!1,g)}}function c(w,g,v){return Te.value.set(w,{verified:g,pubkey:v,timestamp:Date.now()}),br(),g}function l(w,g){const v=Te.value.get(`${w}:${g}`);return!v||Date.now()-v.timestamp>=We?null:v.verified}return{verifyNip05:a,isVerified:l}}const fr={class:"h-full flex flex-col"},mr={class:"flex gap-2 px-4 pt-3 pb-1"},wr=["onClick"],yr={class:"p-4 space-y-3 border-b border-white/[0.08]"},kr={class:"flex items-center justify-between gap-2"},$r={class:"flex items-center gap-2 shrink-0"},_r={class:"text-xs font-mono text-white/30"},Cr={key:1,class:"rounded-lg bg-white/5 border border-white/10 p-3 space-y-2"},jr=["onKeydown"],Sr={class:"flex items-center justify-between gap-2"},Mr=["disabled"],Tr={key:0,class:"space-y-1"},Dr={class:"truncate font-mono text-white/40"},Ir={class:"flex gap-2"},Br=["disabled"],Lr={class:"flex gap-2"},Pr=["onClick"],Nr={class:"flex-1 overflow-y-auto custom-scro
`):[]);return(o,r)=>(s(),n("div",{class:i(["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:q(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]=h=>o.$emit("back"))},[(s(),n("svg",{class:i(["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",mu,[e("div",wu,[e("span",{class:i(["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"])},u(m.value),3),e("p",{class:i(["text-xs font-mono truncate",t(c)?"text-white/70":"text-gray-700"])},u($.value),3)]),b.value?(s(),n("p",{key:0,class:i(["text-xs font-mono mt-0.5 truncate",t(c)?"text-white/25":"text-gray-400"])},u(b.value)+" / "+u(_.value),3)):f("",!0)])],4),e("div",yu,[x.value?(s(),n("div",ku,[e("table",$u,[e("tbody",null,[(s(!0),n(I,null,P(d.value,(h,M)=>(s(),n("tr",{key:M,class:"hover:bg-white/[0.03]"},[e("td",{class:i(["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"}},u(M+1),3),e("td",{class:i(["pr-4 py-0 whitespace-pre",t(c)?"text-white/75":"text-gray-700"])},u(h),3)]))),128))])])])):(s(),n("div",_u,[e("div",Cu,[e("div",{class:i(["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:i(["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:i(["text-xs",t(c)?"text-white/30":"text-gray-400"])}," Select a file to view its contents. ",2)])]))])],2))}}),Su=De(ju,[["__scopeId","data-v-7f40c0bc"]]),Mu={class:"h-full overflow-y-auto overflow-x-hidden scrollbar-hide"},Tu={class:"min-w-0 flex-1"},Du={class:"p-4 space-y-4"},Iu={key:0,class:"space-y-2"},Bu={key:1,class:"space-y-2"},Lu={key:2,class:"flex items-end gap-2"},Pu={key:0,class:"text-[7px] text-accent font-mono"},Nu={key:3,class:"space-y-2"},Au={key:0,class:"flex gap-3"},zu={key:1,class:"flex gap-3"},Eu={key:2,class:"flex gap-3"},Fu={key:3,class:"flex flex-wrap gap-1.5"},Ru={key:4},Vu={class:"glass-card p-4"},Uu={key:5,class:"flex gap-1.5"},qu={key:6},Gu={key:7,class:"space-y-2"},Ou={key:8},Hu={key:9,class:"space-y-1.5"},Wu={class:"flex items-center gap-2.5"},Ku={key:10},Yu={key:11,class:"flex gap-2"},Ju={class:"absolute bottom-0 left-0 right-0 p-1.5"},Qu={class:"text-xs text-white/80 font-medium truncate"},Zu={key:12,class:"space-y-2"},Xu={class:"flex justify-end"},e0={class:"flex justify-start"},t0={key:13,class:"space-y-2"},s0={class:"grid grid-cols-3 gap-1"},n0={key:14,class:"space-y-2"},l0={class:"space-y-1 px-1"},o0={key:15},a0={key:16},i0={class:"flex items-start gap-2.5"},r0={class:"min-w-0 flex-1"},c0={class:"flex items-center gap-1.5"},d0={class:"flex gap-3 mt-1.5"},u0={key:17,class:"flex flex-col items-center gap-2"},h0={key:18,class:"flex flex-col items-center gap-2"},x0={key:19,class:"text-center py-4"},p0={key:0},g0=G({__name:"DesignSystemDetail",props:{item:{}},emits:["back"],setup(a){const c=a,{isDark:l}=Z(),w=S(!1),g=S(0),v=S(0),x={colors:"Colors",typography:"Typography",spacing:"Spacing",atoms:"Atoms",molecules:"Molecules",organisms:"Organisms"},m=B(()=>x[c.item.category]??c.item.category),_=B(()=>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 $(d){const o=/(?:background-color|color|background):\s*([^;]+)/i.exec(d);return o?o[1].trim():
