259 lines
190 KiB
JavaScript
259 lines
190 KiB
JavaScript
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/useNostr-CZatyrb1.js","assets/index-CqBtvLD5.js","assets/index-D1RpahE8.css","assets/ThreadNode-B0koBP1i.js"])))=>i.map(i=>d[i]);
|
||
|
|
import{a as G,Z as Vt,$ as rt,p as Ne,b as s,c as n,e,h as W,u as t,n as i,t as u,f as re,w as Q,v as J,F as D,g as N,i as v,j as Z,r as S,k as B,a0 as Ut,a1 as ct,H as se,a2 as dt,a3 as ut,a4 as ht,a5 as xt,U as Ie,a6 as qt,a7 as Gt,J as Ot,Q as q,D as ne,a8 as ae,a9 as ye,z as we,_ as pt,A as ie,B as Pe,d as Ht,aa as Wt,E as te,ab as Kt,ac as Yt,ad as Qt,S as Jt,q as Zt,ae as Xt,o as es,G as ue,af as Le,ag as ts}from"./index-CqBtvLD5.js";import{u as ss}from"./chat-D6vURcTH.js";import{u as $e,a as xe,e as He,d as gt,M as ns,b as ls,s as os,c as as,f as be,_ as tt}from"./ChatWindow.vue_vue_type_script_setup_true_lang-BS0iEVVD.js";import{_ as is}from"./FilmGrid.vue_vue_type_script_setup_true_lang-Cl2ukq8v.js";import{u as ze}from"./useContentImages-CXWJDBMs.js";import{_ as rs}from"./SongGrid.vue_vue_type_script_setup_true_lang-Bx4BvItY.js";import{useNostr as De}from"./useNostr-CZatyrb1.js";import{u as bt,_ as cs}from"./FilmDetail.vue_vue_type_script_setup_true_lang-Ckw7Dobw.js";import{_ as ds}from"./SongDetail.vue_vue_type_script_setup_true_lang-D619ywdc.js";const us={class:"h-full flex flex-col"},hs={class:"flex items-center justify-between gap-2"},xs={class:"flex items-center gap-2 shrink-0"},ps={key:0,class:"flex flex-wrap gap-1.5"},gs=["onClick"],bs={class:"flex-1 overflow-y-auto custom-scrollbar px-4 pt-4 pb-16"},vs={class:"grid grid-cols-2 sm:grid-cols-3 gap-4"},fs=["aria-label","onClick"],ms={class:"cover-card flex-1 min-h-0 relative"},ws={key:0,class:"absolute inset-0 animate-shimmer"},ys=["src","alt","onError"],ks=["src","alt"],$s={key:3,class:"absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none"},_s={class:"absolute bottom-0 left-0 right-0 p-2"},Cs={class:"text-xs font-semibold text-white/90 leading-tight truncate"},js={class:"text-xs text-white/40 truncate mt-0.5"},Ss={key:4,class:"absolute top-1.5 left-1.5"},Ms={class:"text-xs px-1.5 py-0.5 rounded bg-black/60 text-amber-400 backdrop-blur-sm font-medium"},Ts={key:5,class:"absolute top-1.5 right-1.5"},Is={class:"text-xs px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm"},Ds={key:0,class:"flex items-center justify-center py-12"},Bs=G({__name:"BookGrid",props:{books:{},title:{default:"Recommended Books"}},emits:["selectBook"],setup(o){const c=o,{isDark:l}=Z(),m=S(""),g=S(null),{coverSrc:b,fallbackSrc:p,onError:w,isLoading:$}=ze({items:Ne(c,"books"),id:d=>d.id,existingUrl:d=>d.coverUrl,fetch:d=>rt(d.title,d.author),fallback:d=>Vt(d.title,d.author)}),_=B(()=>{const d=new Map;for(const a of c.books)for(const r of a.genres??[])d.set(r,(d.get(r)??0)+1);return[...d.entries()].sort((a,r)=>r[1]-a[1]).slice(0,8).map(([a])=>a)}),f=B(()=>{let d=c.books;if(m.value){const a=m.value.toLowerCase();d=d.filter(r=>r.title.toLowerCase().includes(a)||r.author.toLowerCase().includes(a)||(r.genres??[]).some(h=>h.toLowerCase().includes(a)))}return g.value&&(d=d.filter(a=>(a.genres??[]).includes(g.value))),d});return(d,a)=>(s(),n("div",us,[e("div",{class:"p-4 space-y-3",style:W(t(l)?"border-bottom: 1px solid rgba(255, 255, 255, 0.08)":"border-bottom: 1px solid rgba(0, 0, 0, 0.06)")},[e("div",hs,[e("h3",{class:i(["text-sm font-bold",t(l)?"text-white/90":"text-gray-900"])},u(o.title),3),e("div",xs,[e("span",{class:i(["text-xs font-mono",t(l)?"text-white/30":"text-gray-400"])},u(f.value.length)+" books ",3),re(d.$slots,"header-actions")])]),Q(e("input",{"onUpdate:modelValue":a[0]||(a[0]=r=>m.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),[[J,m.value]]),_.value.length>0?(s(),n("div",ps,[(s(!0),n(D,null,N(_.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(r),11,gs)))
|
||
|
|
/* 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(18px);
|
||
|
|
border: 1px 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-2xl /* 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 = 4px /* micro gap */
|
||
|
|
2 = 8px /* tight gap */
|
||
|
|
3 = 12px /* small padding */
|
||
|
|
4 = 16px /* standard padding */
|
||
|
|
5 = 20px /* section padding */
|
||
|
|
6 = 24px /* large gap */
|
||
|
|
8 = 32px /* section spacing */
|
||
|
|
12 = 48px /* 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-2xl /* 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: 4px;
|
||
|
|
}
|
||
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
|
|
background: rgba(255,255,255, 0.1);
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
/* 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-2xl 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-[#0a0a0a]">
|
||
|
|
<p class="text-xs uppercase
|
||
|
|
tracking-[0.3em]">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-[#0a0a0a]">
|
||
|
|
<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);
|
||
|
|
}
|
||
|
|
}`,usedIn:"Modal entries, tooltip appearances, popovers"}],_=B(()=>p.value==="all"?$:$.filter(a=>a.category===p.value));function f(a){l(a)}function d(a){const r=/(?:background-color|color|background):\s*([^;]+)/i.exec(a);if(!r)return"#333";const h=r[1].trim();return h.startsWith("#")||h.startsWith("rgb")||h.startsWith("hsl")?h:"#333"}return(a,r)=>(s(),n("div",Kl,[e("div",{class:"shrink-0 px-4 py-3 flex items-center justify-between gap-2",style:W(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: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",Yl,[(s(),n(D,null,N(w,h=>e("button",{key:h.id,class:i(["text-xs px-2.5 py-1 rounded-md font-medium whitespace-nowrap transition-colors",p.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=>p.value=h.id},u(h.label),11,Ql)),64))]),e("div",Jl,[e("div",Zl,[(s(!0),n(D,null,N(_.value,h=>(s(),n("button",{key:h.id,class:i(["text-left p-3 rounded-xl transition-all duration-150 group relative",[t(m)&&t(b)(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=>f(h)},[t(m)?(s(),n("div",{key:0,class:i(["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)(h.id)?"bg-accent":t(c)?"bg-white/10 hover:bg-white/20":"bg-black/10 hover:bg-black/20"]),onClick:we(M=>t(g)(h.id),["stop"])},[t(b)(h.id)?(s(),n("svg",to,[...r[0]||(r[0]=[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"3",d:"M5 13l4 4L19 7"},null,-1)])])):v("",!0)],10,eo)):v("",!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:W({background:d(h.code)})},null,6)):h.category==="spacing"&&h.preview==="inline"?(s(),n("div",so,[...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",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",lo)):h.category==="molecules"?(s(),n("path",oo)):h.category==="organisms"?(s(),n("path",ao)):(s(),n("path",io))],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,Xl))),128))])])]))}}),me=S(null),lt=S(!1),Re=S(!1),he=S(null);function ve(){const o=B(()=>{if(!me.value)return null;try{return He(me.value)}catch{return null}}),c=B(()=>!!me.value),l=B(()=>o.value?o.value.slice(0,12)+"..."+o.value.slice(-8):null);function m(){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 w=await window.nostr.getPublicKey();me.value=w}catch(w){he.value=w instanceof Error?w.message:"Failed to get public key"}finally{Re.value=!1}}async function b(w){if(he.value=null,!window.nostr)return he.value="No Nostr extension detected",null;try{return await window.nostr.signEvent(w)}catch($){return he.value=$ instanceof Error?$.message:"Failed to sign event",null}}function p(){me.value=null,he.value=null}return ne(()=>{m(),setTimeout(m,500)}),{pubkey:me,npub:o,
|
||
|
|
<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>`),I.document.close(),I.print())}return(I,C)=>(s(),n("div",di,[_.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(D,null,N(_.value,(k,x)=>(s(),n("button",{key:x,class:i(["text-left text-xs leading-relaxed py-1 px-2 rounded transition-colors truncate",[r.value===x?"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,hi))),128))])):v("",!0),e("div",{ref_key:"contentRef",ref:d,class:"flex-1 overflow-y-auto scrollbar-hide"},[e("div",xi,[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",title:"Back",onClick:C[0]||(C[0]=k=>I.$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 19l-7-7 7-7"})],-1)])]),e("span",pi,u(f.value)+" min read",1),_.value.length>1?(s(),n("button",{key:0,class:"lg:hidden 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",title:"Table of contents",onClick:C[1]||(C[1]=k=>b.value=!b.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 6h16M4 12h16M4 18h7"})],-1)])])):v("",!0),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",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,gi),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",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,bi),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",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 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"})],-1)])])]),b.value&&_.value.length>1?(s(),n("div",vi,[(s(!0),n(D,null,N(_.value,(k,x)=>(s(),n("button",{key:x,class:i(["block w-full text-left text-xs py-1 px-2 rounded transition-colors truncate",[r.value===x?"text-accent bg-accent/10":"text-white/50 hover:text-white/70",k.level===3?"pl-5":""]]),onClick:y=>{j(k.id),b.value=!1}},u(k.text),11,fi))),128))])):v("",!0),e("article",{ref_key:"articleRef",ref:a,class:"article-body px-4 md:px-8 py-6 max-w-prose mx-auto leading-relaxed text-white/90",style:W({fontSize:l[g.value]+"px"})},[o.title?(s(),n("h1",mi,u(o.title),1)):v("",!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.9em] [&_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 a=d.tags.find(r=>r[0]==="summary");return a?.[1]?a[1]:d.content.slice(0,120).replace(/[#*_]/g,"")}function _(d){return d.tags.find(r=>r[0]==="image")?.[1]??null}async function f(){l.value=!0,c.value=[];const d="wss://relay.nostr.band",a="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",a,{kinds:[30023],limit:30}]))},r.onmessage=j=>{try{const L=JSON.parse(j.data);if(Array.isArray(L)&&L[0]==="EVENT"&&L[1]===a&&L[2]){const I=L[2];h.find(C=>C.id===I.id)||h.push({id:I.id,pubkey:I.pubkey,authorName:b(I.pubkey),kind:I.kind,content:I.content,created_at:I.created_at,tags:I.tags??[]})}Array.isArray(L)&&L[0]==="EOSE"&&(clearTimeout(M),r.close(),h.sort((I,C)=>C.created_at-I.created_at),c.value=h,l.value=!1)}catch{}},r.onerror=()=>{clearTimeout(M),l.value=!1}}catch{l.value=!1}}return ne(()=>{f()}),(d,a)=>(s(),n("div",ki,[m.value?(s(),n(D,{key:0},[e("div",$i,[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:a[0]||(a[0]=r=>m.value=null)},[...a[1]||(a[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",_i,u(g.value),1)]),e("div",Ci,[te(yi,{content:m.value.content,title:g.value},null,8,["content","title"])])],64)):(s(),n(D,{key:1},[a[4]||(a[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",ji,[l.value?(s(),n("div",Si,[...a[2]||(a[2]=[e("p",{class:"text-xs text-white/30"},"Loading articles...",-1)])])):v("",!0),(s(!0),n(D,null,N(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=>m.value=r},[e("div",Ti,[e("h4",Ii,u(w(r)),1),e("p",Di,u($(r)),1),e("div",Bi,[e("span",Li,u(b(r.pubkey)),1),e("span",Pi,u(p(r.created_at)),1),_(r)?(s(),n("span",Ni,"has image")):v("",!0)])])],8,Mi))),128)),!l.value&&c.value.length===0?(s(),n("div",zi,[...a[3]||(a[3]=[e("p",{class:"text-xs text-white/30"},"No articles found",-1)])])):v("",!0)])],64))]))}}),We=1440*60*1e3,ft="aiui-nip05-cache",Te=S(new Map);function Ai(){try{const o=localStorage.getItem(ft);if(o){const c=JSON.parse(o),l=Date.now(),m=c.filter(([,g])=>l-g.timestamp<We);Te.value=new Map(m)}}catch{}}function Fi(){try{const o=Array.from(Te.value.entries());localStorage.setItem(ft,JSON.stringify(o))}catch{}}Ai();function Ri(){async function o(m,g){const b=`${m}:${g}`,p=Te.value.get(b);if(p&&Date.now()-p.timestamp<We)return p.verified;try{const[w,$]=m.split("@");if(!w||!$)return!1;const _=await fetch(`https://${$}/.well-known/nostr.json?name=${encodeURIComponent(w)}`);if(!_.ok)return c(b,!1,g);const a=(await _.json())?.names?.[w]===g;return c(b,a,g)}catch{return c(b,!1,g)}}function c(m,g,b){return Te.value.set(m,{verified:g,pubkey:b,timestamp:Date.now()}),Fi(),g}function l(m,g){const b=Te.value.get(`${m}:${g}`);return!b||Date.now()-b.timestamp>=We?null:b.verified}return{verifyNip05:o,isVerified:l}}const Vi={class:"h-full flex flex-col"},Ui={class:"flex gap-2 px-4 pt-3 pb-1"},qi=["onClick"],Gi={class:"p-4 space-y-3 border-b border-white/[0.08]"},Oi={class:"flex items-center justify-between gap-2"},Hi={class:"flex items-center gap-2 shrink-0"},Wi={class:"text-xs font-mono text-white/30"},Ki={key:1,class:"rounded-lg bg-white/5 border border-white/10 p-3 space-y-2"},Yi=["onKeydown"],Qi={class:"flex items-center justify-between gap-2"},Ji=["disabled"],Zi={key:0,class:"space-y-1"},Xi={class:"truncate font-mono text-white/40"},er={class:"flex gap-2"},tr=["disabled"],sr={class:"flex gap-2"},nr=["onClick"],lr={class:"flex-1 overflow-y-auto custom-scro
|
||
|
|
`):[]);return(a,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:W(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=>a.$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",Ud,[e("div",qd,[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(w.value),3),e("p",{class:i(["text-xs font-mono truncate",t(c)?"text-white/70":"text-gray-700"])},u(_.value),3)]),f.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(f.value)+" / "+u($.value),3)):v("",!0)])],4),e("div",Gd,[p.value?(s(),n("div",Od,[e("table",Hd,[e("tbody",null,[(s(!0),n(D,null,N(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",Wd,[e("div",Kd,[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))}}),Qd=Ie(Yd,[["__scopeId","data-v-7f40c0bc"]]),Jd={class:"h-full overflow-y-auto overflow-x-hidden scrollbar-hide"},Zd={class:"min-w-0 flex-1"},Xd={class:"p-4 space-y-4"},eu={key:0,class:"space-y-2"},tu={key:1,class:"space-y-2"},su={key:2,class:"flex items-end gap-2"},nu={key:0,class:"text-[7px] text-accent font-mono"},lu={key:3,class:"space-y-2"},ou={key:0,class:"flex gap-3"},au={key:1,class:"flex gap-3"},iu={key:2,class:"flex gap-3"},ru={key:3,class:"flex flex-wrap gap-1.5"},cu={key:4},du={class:"glass-card p-4"},uu={key:5,class:"flex gap-1.5"},hu={key:6},xu={key:7,class:"space-y-2"},pu={key:8},gu={key:9,class:"space-y-1.5"},bu={class:"flex items-center gap-2.5"},vu={key:10},fu={key:11,class:"flex gap-2"},mu={class:"absolute bottom-0 left-0 right-0 p-1.5"},wu={class:"text-xs text-white/80 font-medium truncate"},yu={key:12,class:"space-y-2"},ku={class:"flex justify-end"},$u={class:"flex justify-start"},_u={key:13,class:"space-y-2"},Cu={class:"grid grid-cols-3 gap-1"},ju={key:14,class:"space-y-2"},Su={class:"space-y-1 px-1"},Mu={key:15},Tu={key:16},Iu={class:"flex items-start gap-2.5"},Du={class:"min-w-0 flex-1"},Bu={class:"flex items-center gap-1.5"},Lu={class:"flex gap-3 mt-1.5"},Pu={key:17,class:"flex flex-col items-center gap-2"},Nu={key:18,class:"flex flex-col items-center gap-2"},zu={key:19,class:"text-center py-4"},Eu={key:0},Au=G({__name:"DesignSystemDetail",props:{item:{}},emits:["back"],setup(o){const c=o,{isDark:l}=Z(),m=S(!1),g=S(0),b=S(0),p={colors:"Colors",typography:"Typography",spacing:"Spacing",atoms:"Atoms",molecules:"Molecules",organisms:"Organisms"},w=B(()=>p[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 a=/(?:background-color|color|background):\s*([^;]+)/i.exec(d);return a?a[1].trim():
|