Remove LLM Wiki design screenshot assets
No files matched your search
@@ -1,3 +1,4 @@
|
||||
dist
|
||||
node_modules
|
||||
.paperclip-sdk
|
||||
screenshots
|
||||
@@ -75,8 +75,8 @@ The focused Vitest suite covers:
|
||||
|
||||
Remaining alpha gaps:
|
||||
|
||||
- Browser screenshot capture is maintained separately under `tests/screenshots`
|
||||
and is not part of the cheap package verification path above.
|
||||
- Browser screenshot capture is maintained separately under `tests/screenshots`;
|
||||
generated `screenshots/` outputs are local artifacts and are ignored by git.
|
||||
- Host-level plugin install and live agent invocation still need Paperclip
|
||||
server/runtime smoke coverage when preparing a release candidate.
|
||||
|
||||
|
||||
@@ -1,290 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { display: flex; }
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: 264px 1fr;
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
background: var(--bg);
|
||||
}
|
||||
aside.wiki-sidebar {
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.crumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.nav-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 12px;
|
||||
}
|
||||
.nav-scroll-bottom {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 12px;
|
||||
}
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgb(245 245 245 / 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background: oklch(0.269 0 0 / 0.5);
|
||||
color: var(--fg);
|
||||
}
|
||||
.nav-link.active {
|
||||
background: var(--accent);
|
||||
color: var(--fg);
|
||||
}
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
margin: 14px 0 6px;
|
||||
height: 24px;
|
||||
}
|
||||
.section-heading .label {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.space-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.space-row:hover { background: oklch(0.269 0 0 / 0.5); }
|
||||
.space-row .chev {
|
||||
width: 14px; height: 14px; color: var(--muted); flex-shrink: 0;
|
||||
}
|
||||
.space-row .space-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.space-row .menu-btn {
|
||||
opacity: 0;
|
||||
transition: opacity 80ms ease;
|
||||
}
|
||||
.space-row:hover .menu-btn,
|
||||
.space-row[data-hover="true"] .menu-btn { opacity: 1; }
|
||||
.space-row.active { background: var(--accent); }
|
||||
.tree {
|
||||
padding-left: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tree-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12.5px;
|
||||
color: rgb(245 245 245 / 0.78);
|
||||
cursor: pointer;
|
||||
}
|
||||
.tree-row:hover { background: oklch(0.269 0 0 / 0.4); }
|
||||
.tree-row.selected { background: var(--accent); color: var(--fg); }
|
||||
.tree-row .indent { width: 10px; }
|
||||
.tree-row .file-icon { color: var(--muted); }
|
||||
.tree-row.dir .label { font-weight: 500; }
|
||||
|
||||
/* Right canvas hint */
|
||||
.canvas {
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.canvas .crumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.canvas h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.canvas .body {
|
||||
max-width: 720px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Annotation overlays */
|
||||
.anno {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
background: oklch(0.27 0.07 305);
|
||||
color: oklch(0.92 0.1 305);
|
||||
border: 1px solid oklch(0.45 0.12 305);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
.anno::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0; height: 0;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
.anno-right::before { left: -10px; top: 50%; margin-top: -5px; border-right-color: oklch(0.45 0.12 305); }
|
||||
.anno-left::before { right: -10px; top: 50%; margin-top: -5px; border-left-color: oklch(0.45 0.12 305); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<aside class="wiki-sidebar" style="position: relative;">
|
||||
<div class="crumb">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6" /></svg>
|
||||
<span>Paperclip</span>
|
||||
</div>
|
||||
<div class="nav-scroll">
|
||||
<nav style="display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;">
|
||||
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg><span>Ask</span></div>
|
||||
<div class="nav-link" data-new="true">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
|
||||
<span>Add Content</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="section-heading">
|
||||
<span class="label">Shared Spaces</span>
|
||||
<button class="btn-icon" title="Create space" data-state="hover">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- default space, expanded -->
|
||||
<div class="space-row active" data-hover="true">
|
||||
<svg class="chev" viewBox="0 0 24 24" style="transform: rotate(90deg);"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="space-name">default</span>
|
||||
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
|
||||
<button class="btn-icon" style="width: 22px; height: 22px;" title="Space menu">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-row dir">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24" style="transform: rotate(90deg);"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="label">wiki</span>
|
||||
</div>
|
||||
<div class="tree-row" style="padding-left: 26px;">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
|
||||
<span class="label">index.md</span>
|
||||
</div>
|
||||
<div class="tree-row selected" style="padding-left: 26px;">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
|
||||
<span class="label">log.md</span>
|
||||
</div>
|
||||
<div class="tree-row dir" style="padding-left: 26px;">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="label">sources</span>
|
||||
</div>
|
||||
<div class="tree-row dir" style="padding-left: 26px;">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="label">projects</span>
|
||||
</div>
|
||||
<div class="tree-row dir" style="padding-left: 26px;">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="label">entities</span>
|
||||
</div>
|
||||
<div class="tree-row dir" style="padding-left: 26px;">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="label">concepts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second space, collapsed -->
|
||||
<div class="space-row">
|
||||
<svg class="chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="space-name">team-research</span>
|
||||
<button class="btn-icon" style="width: 22px; height: 22px;" title="Space menu">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- third space, collapsed -->
|
||||
<div class="space-row">
|
||||
<svg class="chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="space-name">customer-feedback</span>
|
||||
</div>
|
||||
<div style="padding: 8px; font-size: 11px; color: var(--muted-soft);">
|
||||
Pages, sources, ask, lint and history all stay scoped to the selected space.
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav-scroll-bottom">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px;">
|
||||
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><path d="M12 7v5l3 2M3 12a9 9 0 1 0 9-9" /></svg><span>History</span></div>
|
||||
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h12" /></svg><span>Settings</span></div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="canvas">
|
||||
<div class="crumbs">
|
||||
<span>default</span>
|
||||
<span>/</span>
|
||||
<span>wiki</span>
|
||||
<span>/</span>
|
||||
<span style="color: var(--fg);">log.md</span>
|
||||
</div>
|
||||
<h1>Wiki log — default space</h1>
|
||||
<div class="body">
|
||||
Page detail content lives here. Breadcrumbs always show the active space slug, and the URL contains <code style="font-family: ui-monospace; background: var(--card); padding: 1px 6px; border-radius: 4px;">/wiki/spaces/default/page/...</code> so deep links carry the space context.
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 119 KiB |
@@ -1,224 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { width: 390px; }
|
||||
.frame {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.topbar .title {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card);
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pill.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
|
||||
.pill.add {
|
||||
background: oklch(0.27 0.06 250);
|
||||
color: oklch(0.85 0.1 250);
|
||||
border-color: oklch(0.4 0.12 250);
|
||||
}
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
margin: 4px 0 8px;
|
||||
height: 24px;
|
||||
}
|
||||
.section-heading .label {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.space-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--card);
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.space-card.active {
|
||||
border-color: oklch(0.45 0.12 250);
|
||||
background: oklch(0.18 0.04 250 / 0.7);
|
||||
}
|
||||
.space-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.space-row .name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
.space-row .meta {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.space-card .pages {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.page-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
min-height: 40px; /* tap target */
|
||||
}
|
||||
.page-row.selected { background: var(--accent); }
|
||||
.page-row .file-icon { color: var(--muted); }
|
||||
.menu-btn {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card);
|
||||
display: inline-grid; place-items: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.anno {
|
||||
font-size: 10.5px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
background: oklch(0.27 0.07 305);
|
||||
color: oklch(0.92 0.1 305);
|
||||
border: 1px solid oklch(0.45 0.12 305);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="topbar">
|
||||
<button class="menu-btn" style="width: 32px; height: 32px;">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18" /></svg>
|
||||
</button>
|
||||
<div class="title">Wiki</div>
|
||||
<button class="menu-btn" style="width: 32px; height: 32px;">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-row">
|
||||
<span class="pill active"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M5 7v13h14V7" /></svg> Wiki</span>
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg> Ask</span>
|
||||
<span class="pill add"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg> Add Content</span>
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 7v5l3 2" /><circle cx="12" cy="12" r="9" /></svg> History</span>
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /><path d="M19 12 21 11M3 13 5 12" /></svg> Settings</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="section-heading">
|
||||
<span class="label">Shared Spaces</span>
|
||||
<button class="menu-btn" style="width: 28px; height: 28px;">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-card active">
|
||||
<div class="space-row">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="name">default</div>
|
||||
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
|
||||
<button class="menu-btn" style="width: 30px; height: 30px;">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="meta" style="margin-top: 4px;">42 pages · 18 sources · healthy</div>
|
||||
<div class="pages">
|
||||
<div class="page-row">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
|
||||
<span>wiki/index.md</span>
|
||||
</div>
|
||||
<div class="page-row selected">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
|
||||
<span>wiki/log.md</span>
|
||||
</div>
|
||||
<div class="page-row">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span>wiki/sources/</span>
|
||||
</div>
|
||||
<div class="page-row">
|
||||
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span>wiki/projects/</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card">
|
||||
<div class="space-row">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="name">team-research</div>
|
||||
<button class="menu-btn" style="width: 30px; height: 30px;">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="meta" style="margin-top: 4px;">12 pages · 3 sources</div>
|
||||
</div>
|
||||
|
||||
<div class="space-card">
|
||||
<div class="space-row">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="name">customer-feedback</div>
|
||||
</div>
|
||||
<div class="meta" style="margin-top: 4px;">5 pages · 2 sources · index refresh queued</div>
|
||||
</div>
|
||||
|
||||
<div class="callout" style="margin-top: 16px;">
|
||||
Tap a space to expand its pages. Long-press or three-dot menu opens space settings.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 147 KiB |
@@ -1,142 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); padding: 32px; }
|
||||
.stage {
|
||||
width: 320px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.section-label {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.space-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.space-row .name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.menu-btn {
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
display: inline-grid; place-items: center;
|
||||
color: var(--fg);
|
||||
}
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
right: 8px;
|
||||
min-width: 220px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
|
||||
padding: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item:hover { background: var(--accent); }
|
||||
.menu-item .shortcut {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
.menu-item.danger { color: var(--destructive); }
|
||||
.menu-item.disabled {
|
||||
color: var(--muted-soft);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.annotate {
|
||||
position: absolute;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
color: oklch(0.92 0.1 305);
|
||||
background: oklch(0.27 0.07 305);
|
||||
border: 1px solid oklch(0.45 0.12 305);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex; gap: 60px; align-items: flex-start;">
|
||||
<div class="stage">
|
||||
<div class="section-label" style="font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted);">Shared Spaces</div>
|
||||
<div class="space-row">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24" style="transform: rotate(90deg);"><path d="m9 6 6 6-6 6" /></svg>
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="name">team-research</span>
|
||||
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
|
||||
<button class="menu-btn" data-state="open">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
|
||||
<div class="menu" role="menu">
|
||||
<div class="menu-item">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z" /></svg>
|
||||
<span>Edit space</span>
|
||||
<span class="shortcut">⌘E</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
|
||||
<span>Refresh index</span>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h12" /></svg>
|
||||
<span>Open in History</span>
|
||||
</div>
|
||||
<div class="menu-divider"></div>
|
||||
<div class="menu-item disabled">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 12h6M12 9v6" /></svg>
|
||||
<span>New page in this space</span>
|
||||
</div>
|
||||
<div class="menu-divider"></div>
|
||||
<div class="menu-item danger">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" /></svg>
|
||||
<span>Archive space…</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 220px;"></div>
|
||||
|
||||
<div class="annotate" style="left: 320px; top: 62px; white-space: nowrap;">
|
||||
Trigger: hover/focus reveals btn (28×26 hit, ⌘E shortcut for keyboard)
|
||||
</div>
|
||||
<div class="annotate" style="left: 320px; top: 110px; white-space: nowrap;">
|
||||
Default space: Archive disabled with "Default space cannot be archived" tooltip
|
||||
</div>
|
||||
<div class="annotate" style="left: 320px; top: 218px; white-space: nowrap;">
|
||||
Single-source actions only — bulk ops live in Settings → Spaces
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 79 KiB |
@@ -1,321 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); }
|
||||
.stage {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(at 30% 20%, oklch(0.2 0.04 250 / 0.4), transparent 50%),
|
||||
radial-gradient(at 70% 80%, oklch(0.2 0.04 305 / 0.3), transparent 50%),
|
||||
var(--bg);
|
||||
position: relative;
|
||||
}
|
||||
.scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgb(0 0 0 / 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.modal {
|
||||
position: relative;
|
||||
width: 560px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
|
||||
overflow: hidden;
|
||||
max-height: 760px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.modal-head {
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.modal-head .title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 18px 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-foot {
|
||||
padding: 14px 22px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.label { font-size: 12px; font-weight: 500; color: var(--fg); }
|
||||
.help { font-size: 11px; color: var(--muted); }
|
||||
.input {
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
.input:focus { outline: 2px solid oklch(0.45 0.12 250); outline-offset: 0; }
|
||||
|
||||
.seg {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.seg-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.seg-item.selected {
|
||||
background: var(--accent);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.seg-item.disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.seg-item .head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.seg-item .head .name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
.seg-item .desc {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.radio-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-row.selected {
|
||||
border-color: oklch(0.45 0.12 250);
|
||||
background: oklch(0.18 0.04 250 / 0.7);
|
||||
}
|
||||
.radio-row .dot {
|
||||
width: 14px; height: 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--muted);
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.radio-row.selected .dot { border-color: oklch(0.7 0.12 250); }
|
||||
.radio-row.selected .dot::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
background: oklch(0.7 0.12 250);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.radio-row .body { flex: 1; }
|
||||
.radio-row .body .name { font-size: 13px; font-weight: 500; }
|
||||
.radio-row .body .desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
|
||||
|
||||
.access-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.access-tile {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg);
|
||||
}
|
||||
.access-tile.selected {
|
||||
border-color: oklch(0.45 0.12 250);
|
||||
background: oklch(0.18 0.04 250 / 0.7);
|
||||
}
|
||||
.access-tile.future {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.access-tile .head {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.access-tile .name { font-size: 12.5px; font-weight: 600; }
|
||||
.access-tile .desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
|
||||
|
||||
.anno {
|
||||
position: absolute;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
color: oklch(0.92 0.1 305);
|
||||
background: oklch(0.27 0.07 305);
|
||||
border: 1px solid oklch(0.45 0.12 305);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="scrim"></div>
|
||||
<div class="modal">
|
||||
<div class="modal-head">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="title">Create shared space</div>
|
||||
<button class="btn-icon">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M6 6 18 18M18 6 6 18" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="callout">
|
||||
Spaces partition pages, sources, ingest history, ask, and lint. Create one per project, team, or dataset you want kept separate.
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label class="label">Display name</label>
|
||||
<input class="input" value="Team research" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Slug</label>
|
||||
<input class="input mono" value="team-research" />
|
||||
<span class="help">Used in URLs · <code>/wiki/spaces/<b>team-research</b>/…</code></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Type</label>
|
||||
<div class="seg">
|
||||
<div class="seg-item selected">
|
||||
<div class="head">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="name">Folder</div>
|
||||
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">enabled</span>
|
||||
</div>
|
||||
<div class="desc">Local folder on this machine.</div>
|
||||
</div>
|
||||
<div class="seg-item disabled">
|
||||
<div class="head">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M3 15a4 4 0 0 1 1-7.9A6 6 0 0 1 16 5a4 4 0 0 1 4 4 4 4 0 0 1 0 8H6a3 3 0 0 1-3-2z" /></svg>
|
||||
<div class="name">Cloud</div>
|
||||
<span class="tag tag-soon">Coming soon</span>
|
||||
</div>
|
||||
<div class="desc">Notion, Google Drive, S3 connectors.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Folder source</label>
|
||||
<div class="radio-group">
|
||||
<div class="radio-row selected">
|
||||
<span class="dot"></span>
|
||||
<div class="body">
|
||||
<div class="name">New managed folder</div>
|
||||
<div class="desc">Creates <code>spaces/team-research/</code> under the configured wiki root, with the standard <code>raw/</code>, <code>wiki/</code>, AGENTS.md and IDEA.md scaffold.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-row">
|
||||
<span class="dot"></span>
|
||||
<div class="body">
|
||||
<div class="name">Existing folder under wiki root</div>
|
||||
<div class="desc">Bind to a folder already inside the wiki root. Path-containment checks must pass.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-row" style="opacity: 0.55;">
|
||||
<span class="dot"></span>
|
||||
<div class="body">
|
||||
<div class="name">Existing absolute path <span class="tag tag-soon" style="margin-left: 6px;">Pending host capability</span></div>
|
||||
<div class="desc">Disabled until the host adds dynamic plugin local-folder bindings (security-reviewed).</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Access scope</label>
|
||||
<div class="access-grid">
|
||||
<div class="access-tile selected">
|
||||
<div class="head">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /><circle cx="17" cy="9" r="3" /></svg>
|
||||
<div class="name">Shared</div>
|
||||
</div>
|
||||
<div class="desc">Everyone in the company.</div>
|
||||
</div>
|
||||
<div class="access-tile future">
|
||||
<div class="head">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" /><path d="M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2" /></svg>
|
||||
<div class="name">Personal</div>
|
||||
<span class="tag tag-future" style="height: 16px; padding: 0 5px; font-size: 9.5px;">Future</span>
|
||||
</div>
|
||||
<div class="desc">Only the owner. Stored, not enforced.</div>
|
||||
</div>
|
||||
<div class="access-tile future">
|
||||
<div class="head">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="9" cy="7" r="4" /><circle cx="17" cy="7" r="3" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /></svg>
|
||||
<div class="name">Team</div>
|
||||
<span class="tag tag-future" style="height: 16px; padding: 0 5px; font-size: 9.5px;">Future</span>
|
||||
</div>
|
||||
<div class="desc">A named team. Stored, not enforced.</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help">Personal/Team scopes are saved as metadata for the upcoming permissions feature. They do not block access today.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button class="btn btn-ghost">Cancel</button>
|
||||
<button class="btn btn-primary">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24" style="color: var(--primary-fg);"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
|
||||
Create space
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="anno" style="left: calc(50% + 300px); top: 110px;">name auto-generates slug; both editable</div>
|
||||
<div class="anno" style="left: calc(50% + 300px); top: 240px;">Cloud disabled but visible — sets product roadmap expectation</div>
|
||||
<div class="anno" style="left: calc(50% + 300px); top: 410px;">Third radio disabled until host capability lands (PAP-3635 phase 3)</div>
|
||||
<div class="anno" style="left: calc(50% + 300px); top: 600px;">Personal/Team are metadata only — explicit "Future" tag prevents misread</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 280 KiB |
@@ -1,251 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); }
|
||||
.stage {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
background: var(--bg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scrim {
|
||||
position: absolute; inset: 0;
|
||||
background: rgb(0 0 0 / 0.6);
|
||||
}
|
||||
.sheet {
|
||||
position: absolute;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
background: var(--card);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-bottom: 0;
|
||||
max-height: 92%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sheet-head {
|
||||
padding: 14px 18px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.sheet-head .grabber {
|
||||
position: absolute;
|
||||
top: 6px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36px; height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.sheet-head .title {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sheet-body {
|
||||
padding: 14px 18px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.sheet-foot {
|
||||
padding: 12px 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.sheet-foot .btn { flex: 1; height: 44px; justify-content: center; font-weight: 600; }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.label { font-size: 12px; font-weight: 500; color: var(--fg); }
|
||||
.help { font-size: 11px; color: var(--muted); }
|
||||
.input {
|
||||
height: 44px; /* min mobile tap target */
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.seg-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.seg-tile {
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.seg-tile.selected { background: var(--accent); border-color: var(--border); }
|
||||
.seg-tile.disabled { opacity: 0.55; }
|
||||
.seg-tile .head { display: flex; align-items: center; gap: 8px; }
|
||||
.seg-tile .name { font-size: 13px; font-weight: 600; flex: 1; }
|
||||
.seg-tile .desc { font-size: 11px; color: var(--muted); }
|
||||
|
||||
.radio-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
min-height: 64px;
|
||||
}
|
||||
.radio-row.selected {
|
||||
border-color: oklch(0.45 0.12 250);
|
||||
background: oklch(0.18 0.04 250 / 0.6);
|
||||
}
|
||||
.radio-row .dot {
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 999px;
|
||||
border: 1.5px solid var(--muted);
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.radio-row.selected .dot { border-color: oklch(0.7 0.12 250); }
|
||||
.radio-row.selected .dot::after {
|
||||
content: ""; position: absolute; inset: 4px;
|
||||
background: oklch(0.7 0.12 250); border-radius: 999px;
|
||||
}
|
||||
.radio-row .body .name { font-size: 13.5px; font-weight: 500; }
|
||||
.radio-row .body .desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
|
||||
|
||||
.access-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.access-tile {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
.access-tile.selected {
|
||||
border-color: oklch(0.45 0.12 250);
|
||||
background: oklch(0.18 0.04 250 / 0.7);
|
||||
}
|
||||
.access-tile.future { opacity: 0.65; }
|
||||
.access-tile .name { font-size: 12px; font-weight: 600; }
|
||||
.access-tile .desc { font-size: 10px; color: var(--muted); margin-top: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="scrim"></div>
|
||||
<div class="sheet">
|
||||
<div class="grabber"></div>
|
||||
<div class="sheet-head" style="position: relative;">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="title">Create shared space</div>
|
||||
<button class="btn-icon" style="width: 32px; height: 32px;">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M6 6 18 18M18 6 6 18" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="field">
|
||||
<label class="label">Display name</label>
|
||||
<input class="input" value="Team research" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Slug</label>
|
||||
<input class="input mono" value="team-research" />
|
||||
<span class="help">Used in URL: /wiki/spaces/<b>team-research</b>/…</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Type</label>
|
||||
<div class="seg-row">
|
||||
<div class="seg-tile selected">
|
||||
<div class="head">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="name">Folder</div>
|
||||
</div>
|
||||
<div class="desc">Local folder on this machine.</div>
|
||||
</div>
|
||||
<div class="seg-tile disabled">
|
||||
<div class="head">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 15a4 4 0 0 1 1-7.9A6 6 0 0 1 16 5a4 4 0 0 1 4 4 4 4 0 0 1 0 8H6a3 3 0 0 1-3-2z" /></svg>
|
||||
<div class="name">Cloud</div>
|
||||
</div>
|
||||
<div class="desc"><span class="tag tag-soon" style="height: 16px; padding: 0 5px; font-size: 9.5px;">Coming soon</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Folder source</label>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div class="radio-row selected">
|
||||
<span class="dot"></span>
|
||||
<div class="body">
|
||||
<div class="name">New managed folder</div>
|
||||
<div class="desc">spaces/team-research/ under wiki root.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-row">
|
||||
<span class="dot"></span>
|
||||
<div class="body">
|
||||
<div class="name">Existing folder under wiki root</div>
|
||||
<div class="desc">Pick a subfolder already in the wiki root.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-row" style="opacity: 0.55;">
|
||||
<span class="dot"></span>
|
||||
<div class="body">
|
||||
<div class="name">Absolute path <span class="tag tag-soon" style="height: 14px; padding: 0 5px; font-size: 9px; margin-left: 4px;">Pending host</span></div>
|
||||
<div class="desc">Awaiting security-reviewed host capability.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Access scope</label>
|
||||
<div class="access-row">
|
||||
<div class="access-tile selected">
|
||||
<div class="name">Shared</div>
|
||||
<div class="desc">Whole company</div>
|
||||
</div>
|
||||
<div class="access-tile future">
|
||||
<div class="name">Personal</div>
|
||||
<div class="desc">Future</div>
|
||||
</div>
|
||||
<div class="access-tile future">
|
||||
<div class="name">Team</div>
|
||||
<div class="desc">Future</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help">Personal & Team are stored as metadata. Permissions are not enforced yet.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-foot">
|
||||
<button class="btn btn-ghost" style="border: 1px solid var(--border);">Cancel</button>
|
||||
<button class="btn btn-primary">Create space</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 178 KiB |
@@ -1,398 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); }
|
||||
.stage {
|
||||
width: 1440px;
|
||||
min-height: 900px;
|
||||
display: grid;
|
||||
grid-template-columns: 264px 1fr;
|
||||
background: var(--bg);
|
||||
}
|
||||
aside {
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
aside .group { margin-top: 12px; }
|
||||
aside .group-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--muted);
|
||||
padding: 0 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
aside .row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
aside .row.active {
|
||||
background: var(--accent);
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
}
|
||||
aside .row:hover { background: oklch(0.269 0 0 / 0.5); color: var(--fg); }
|
||||
aside .crumb {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 4px 8px; font-size: 12px; color: var(--muted);
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 28px;
|
||||
max-width: 920px;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.panel-header h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.panel-header .sub {
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.panel-header .crumb {
|
||||
font-size: 11.5px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-head {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.card-head .title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
.card-head .desc {
|
||||
font-size: 11.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.card-body {
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.field-row.stack { grid-template-columns: 1fr; }
|
||||
.field-row .label {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
}
|
||||
.field-row .help {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.field-row .control {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
}
|
||||
.input {
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
.input[disabled] { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.toggle .track {
|
||||
width: 32px; height: 18px;
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle.on .track {
|
||||
background: oklch(0.55 0.16 145);
|
||||
}
|
||||
.toggle .track::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px; left: 2px;
|
||||
width: 14px; height: 14px;
|
||||
background: white;
|
||||
border-radius: 999px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.toggle.on .track::after { transform: translateX(14px); }
|
||||
|
||||
.health-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.anno {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
color: oklch(0.92 0.1 305);
|
||||
background: oklch(0.27 0.07 305);
|
||||
border: 1px solid oklch(0.45 0.12 305);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<aside>
|
||||
<div class="crumb">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6" /></svg>
|
||||
<span>Wiki / Settings</span>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="group-label">Workspace</div>
|
||||
<div class="row">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
Root folder
|
||||
</div>
|
||||
<div class="row">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h12" /></svg>
|
||||
Distillation
|
||||
</div>
|
||||
<div class="row">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /></svg>
|
||||
Routines
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="group-label">Spaces</div>
|
||||
<div class="row active">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
team-research
|
||||
</div>
|
||||
<div class="row">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
default
|
||||
</div>
|
||||
<div class="row">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
customer-feedback
|
||||
</div>
|
||||
<div class="row" style="color: var(--muted);">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
|
||||
Add space…
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<svg class="icon" viewBox="0 0 24 24" style="width: 28px; height: 28px; color: oklch(0.85 0.1 250); margin-top: 2px;"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div style="flex: 1;">
|
||||
<div class="crumb">Spaces · Edit</div>
|
||||
<h1>team-research</h1>
|
||||
<div class="sub">Local folder · 12 pages · 3 sources · indexed 2 minutes ago</div>
|
||||
</div>
|
||||
<button class="btn btn-ghost" style="border: 1px solid var(--border);">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
|
||||
Refresh index
|
||||
</button>
|
||||
<button class="btn">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
|
||||
Open ingest
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M5 8 12 3l7 5v8l-7 5-7-5z" /></svg>
|
||||
<div class="title">Identity</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="field-row">
|
||||
<label class="label">Display name<div class="help">Shown in the sidebar.</div></label>
|
||||
<div class="control"><input class="input" value="team-research" /></div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Slug<div class="help">URL segment; lock by default.</div></label>
|
||||
<div class="control">
|
||||
<input class="input mono" value="team-research" disabled />
|
||||
<span style="font-size: 11px; color: var(--muted);">Slug is locked once a space has indexed pages. Contact platform team to migrate.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Type</label>
|
||||
<div class="control" style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">Folder</span>
|
||||
<span style="font-size: 12px; color: var(--muted);">(Cloud connectors coming soon)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="title">Folder source & health</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="field-row">
|
||||
<label class="label">Mode</label>
|
||||
<div class="control">
|
||||
<span style="font-size: 13px;">New managed folder</span>
|
||||
<span class="help">Created under the configured wiki root.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Path</label>
|
||||
<div class="control">
|
||||
<input class="input mono" value="/Users/jane/wiki-root/spaces/team-research" />
|
||||
<span class="help">Real path: same · access: read & write</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row stack">
|
||||
<div class="health-list">
|
||||
<div class="health-row">
|
||||
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">Folder readable</span>
|
||||
<span style="color: var(--muted); font-size: 11px;">/Users/jane/wiki-root/spaces/team-research</span>
|
||||
</div>
|
||||
<div class="health-row">
|
||||
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">Folder writable</span>
|
||||
</div>
|
||||
<div class="health-row">
|
||||
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">Required dirs (raw/, wiki/) present</span>
|
||||
</div>
|
||||
<div class="health-row warn">
|
||||
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="M12 8v4M12 16v0" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">AGENTS.md missing</span>
|
||||
<button class="btn btn-ghost" style="border: 1px solid var(--border); height: 26px; padding: 0 10px; font-size: 11.5px;">Recreate baseline</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /></svg>
|
||||
<div class="title">Maintenance</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="field-row">
|
||||
<label class="label">Lint & structural checks<div class="help">Runs on the company lint cadence.</div></label>
|
||||
<div class="control"><div class="toggle on"><span class="track"></span><span style="font-size: 12px;">Enabled</span></div></div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Auto distillation<div class="help">Backfills wiki pages from new sources.</div></label>
|
||||
<div class="control"><div class="toggle on"><span class="track"></span><span style="font-size: 12px;">Enabled</span></div></div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Per-space billing code<div class="help">Optional · used on operation issues.</div></label>
|
||||
<div class="control"><input class="input mono" value="research-2026" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /></svg>
|
||||
<div class="title">Access</div>
|
||||
<span class="tag tag-future" style="margin-left: auto;">Future enforcement</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="callout warn">
|
||||
Permissions are stored but <strong>not enforced</strong> in this release. Anyone in the company can still read and write every space.
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Scope</label>
|
||||
<div class="control" style="display: flex; gap: 8px;">
|
||||
<span class="tag" style="background: var(--space-tint); color: var(--space-tint-fg); height: 22px; padding: 0 10px;">Shared</span>
|
||||
<span class="tag tag-future" style="height: 22px; padding: 0 10px;">Personal · stored only</span>
|
||||
<span class="tag tag-future" style="height: 22px; padding: 0 10px;">Team · stored only</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Owner user<div class="help">Stored for upcoming permission rules.</div></label>
|
||||
<div class="control"><input class="input" value="jane.doe@paperclip.ing" /></div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Owner team key</label>
|
||||
<div class="control"><input class="input mono" value="research" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="border-color: oklch(0.42 0.18 25 / 0.6);">
|
||||
<div class="card-head">
|
||||
<svg class="icon" viewBox="0 0 24 24" style="color: oklch(0.7 0.18 25);"><path d="M12 9v4M12 17v0M3 18 12 3l9 15z" /></svg>
|
||||
<div class="title" style="color: oklch(0.85 0.13 25);">Danger zone</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="field-row">
|
||||
<label class="label">Archive this space<div class="help">Hides it from the sidebar and stops scheduled lint/index. Pages remain on disk.</div></label>
|
||||
<div class="control"><button class="btn" style="border-color: oklch(0.42 0.18 25 / 0.6); color: oklch(0.85 0.13 25);">Archive…</button></div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label class="label">Delete<div class="help">Removes DB rows. Files on disk are kept and must be removed manually.</div></label>
|
||||
<div class="control"><button class="btn" style="border-color: oklch(0.42 0.18 25); background: oklch(0.27 0.1 25); color: oklch(0.92 0.13 25);">Delete space…</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 358 KiB |
@@ -1,298 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); }
|
||||
.frame {
|
||||
width: 390px;
|
||||
min-height: 844px;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.topbar .back, .topbar .menu {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
display: inline-grid; place-items: center;
|
||||
color: var(--fg);
|
||||
}
|
||||
.topbar .title { flex: 1; font-size: 15px; font-weight: 600; }
|
||||
.topbar .crumb { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
|
||||
|
||||
.body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.hero .name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
.hero .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.section-head {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.row {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-height: 56px;
|
||||
}
|
||||
.row:last-child { border-bottom: 0; }
|
||||
.row .row-label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.row .row-value {
|
||||
font-size: 13.5px;
|
||||
color: var(--fg);
|
||||
word-break: break-all;
|
||||
}
|
||||
.row.button-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row .toggle .track {
|
||||
width: 36px; height: 20px;
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.row .toggle.on .track { background: oklch(0.55 0.16 145); }
|
||||
.row .toggle .track::after {
|
||||
content: ""; position: absolute;
|
||||
top: 2px; left: 2px;
|
||||
width: 16px; height: 16px;
|
||||
background: white; border-radius: 999px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.row .toggle.on .track::after { transform: translateX(16px); }
|
||||
|
||||
.health-row {
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.health-row .check {
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 999px;
|
||||
background: oklch(0.27 0.06 145);
|
||||
color: oklch(0.85 0.1 145);
|
||||
display: inline-grid; place-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.health-row.warn .check {
|
||||
background: oklch(0.27 0.07 70);
|
||||
color: oklch(0.88 0.1 70);
|
||||
}
|
||||
.health-row .label { flex: 1; }
|
||||
.health-row .fix {
|
||||
font-size: 11.5px;
|
||||
color: oklch(0.85 0.1 250);
|
||||
}
|
||||
|
||||
.danger {
|
||||
border-color: oklch(0.42 0.18 25 / 0.6);
|
||||
}
|
||||
.danger .section-head { color: oklch(0.85 0.13 25); }
|
||||
.danger .row .row-value.btn-text { color: oklch(0.85 0.13 25); }
|
||||
|
||||
.input {
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.callout-warn {
|
||||
background: oklch(0.22 0.05 70);
|
||||
color: oklch(0.88 0.1 70);
|
||||
border: 1px solid oklch(0.45 0.12 70);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
margin: 0 16px 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="topbar">
|
||||
<button class="back">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6" /></svg>
|
||||
</button>
|
||||
<div style="flex: 1;">
|
||||
<div class="crumb">Spaces · Edit</div>
|
||||
<div class="title" style="padding: 0;">team-research</div>
|
||||
</div>
|
||||
<button class="menu">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="hero">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div style="flex: 1;">
|
||||
<div class="name">team-research</div>
|
||||
<div class="meta">Local folder · 12 pages · 3 sources</div>
|
||||
</div>
|
||||
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">shared</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="btn" style="flex: 1; height: 44px; justify-content: center; border: 1px solid var(--border);">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-primary" style="flex: 1; height: 44px; justify-content: center;">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24" style="color: var(--primary-fg);"><path d="M12 5v14M5 12h14" /></svg>
|
||||
Add content
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-head">Identity</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Display name</span>
|
||||
<input class="input" value="team-research" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Slug · locked</span>
|
||||
<input class="input mono" value="team-research" disabled style="opacity: 0.7;" />
|
||||
</div>
|
||||
<div class="row button-row">
|
||||
<span class="row-value">Type</span>
|
||||
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">Folder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-head">Folder & Health</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Path</span>
|
||||
<span class="row-value" style="font-family: ui-monospace; font-size: 12px;">/Users/jane/wiki-root/spaces/team-research</span>
|
||||
</div>
|
||||
<div style="padding: 6px 0;">
|
||||
<div class="health-row">
|
||||
<span class="check"><svg width="9" height="9" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">Readable / writable</span>
|
||||
</div>
|
||||
<div class="health-row">
|
||||
<span class="check"><svg width="9" height="9" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">raw/, wiki/ exist</span>
|
||||
</div>
|
||||
<div class="health-row warn">
|
||||
<span class="check"><svg width="9" height="9" viewBox="0 0 24 24"><path d="M12 8v4M12 16v0" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
|
||||
<span class="label">AGENTS.md missing</span>
|
||||
<span class="fix">Recreate</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-head">Maintenance</div>
|
||||
<div class="row button-row">
|
||||
<div>
|
||||
<span class="row-value">Lint & checks</span>
|
||||
<div class="row-label">Runs on company cadence</div>
|
||||
</div>
|
||||
<span class="toggle on"><span class="track"></span></span>
|
||||
</div>
|
||||
<div class="row button-row">
|
||||
<div>
|
||||
<span class="row-value">Auto distillation</span>
|
||||
<div class="row-label">Backfills pages from sources</div>
|
||||
</div>
|
||||
<span class="toggle on"><span class="track"></span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Billing code</span>
|
||||
<input class="input mono" value="research-2026" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-head">
|
||||
Access
|
||||
<span class="tag tag-future" style="margin-left: 6px; height: 16px; padding: 0 6px; font-size: 9.5px; vertical-align: middle;">Future enforcement</span>
|
||||
</div>
|
||||
<div class="callout-warn">Stored only — not enforced yet. Everyone in the company can still see this space.</div>
|
||||
<div class="row button-row">
|
||||
<span class="row-value">Scope</span>
|
||||
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">Shared</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Owner user</span>
|
||||
<input class="input" value="jane.doe@paperclip.ing" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Owner team key</span>
|
||||
<input class="input mono" value="research" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section danger">
|
||||
<div class="section-head">Danger zone</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Hides this space from sidebar and pauses lint/index</span>
|
||||
<span class="row-value btn-text">Archive space…</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="row-label">Removes DB rows; on-disk files are preserved</span>
|
||||
<span class="row-value btn-text">Delete space…</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 278 KiB |
@@ -1,241 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); }
|
||||
.stage {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
display: grid;
|
||||
grid-template-columns: 264px 1fr;
|
||||
background: var(--bg);
|
||||
}
|
||||
aside {
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-link {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 8px; border-radius: 6px;
|
||||
font-size: 13px; font-weight: 500;
|
||||
color: rgb(245 245 245 / 0.8);
|
||||
}
|
||||
.nav-link.active { background: var(--accent); color: var(--fg); }
|
||||
|
||||
.panel {
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
position: relative;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sub {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.space-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.space-bar .label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.space-select {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
min-width: 220px;
|
||||
}
|
||||
.space-select .name { flex: 1; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.tile {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 200px;
|
||||
}
|
||||
.tile h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tile p { margin: 0; font-size: 12px; color: var(--muted); }
|
||||
.tile .input {
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tile textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
}
|
||||
.drop {
|
||||
min-height: 110px;
|
||||
border: 1.5px dashed var(--border);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--muted);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
/* Open dropdown popover */
|
||||
.popover {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
|
||||
padding: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
.popover .item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.popover .item:hover { background: var(--accent); }
|
||||
.popover .item.selected { background: var(--accent); }
|
||||
.popover .meta { margin-left: auto; font-size: 11px; color: var(--muted); }
|
||||
.popover .divider { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
.popover .item.create { color: oklch(0.85 0.1 250); }
|
||||
|
||||
.anno {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
color: oklch(0.92 0.1 305);
|
||||
background: oklch(0.27 0.07 305);
|
||||
border: 1px solid oklch(0.45 0.12 305);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<aside>
|
||||
<div style="padding: 8px; font-size: 11px; color: var(--muted); margin-bottom: 8px;">Wiki primary nav</div>
|
||||
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg>Ask</div>
|
||||
<div class="nav-link active"><svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>Add Content</div>
|
||||
<div style="padding: 6px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-top: 12px;">Shared Spaces</div>
|
||||
<div style="padding: 4px 8px; font-size: 12.5px; color: var(--muted);">default · team-research · customer-feedback</div>
|
||||
</aside>
|
||||
|
||||
<div class="panel" style="position: relative;">
|
||||
<div>
|
||||
<div style="font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px;">Add Content</div>
|
||||
<h1>Capture into a space</h1>
|
||||
<div class="sub">Pick the destination space, then add a source by URL, paste, or drop. Each ingest becomes an operation issue scoped to the chosen space.</div>
|
||||
</div>
|
||||
|
||||
<div class="space-bar">
|
||||
<span class="label">Space</span>
|
||||
<button class="space-select">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span class="name">team-research</span>
|
||||
<span style="color: var(--muted); font-size: 11px;">shared</span>
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></svg>
|
||||
</button>
|
||||
<span style="font-size: 12px; color: var(--muted);">Defaults to last used space, or <code style="font-family: ui-monospace; padding: 1px 5px; background: var(--accent); border-radius: 4px;">default</code> on first run.</span>
|
||||
|
||||
<!-- popover -->
|
||||
<div class="popover" style="left: 60px; top: calc(100% + 6px);">
|
||||
<div class="item selected">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span>team-research</span>
|
||||
<span class="meta">12 pages</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span>default</span>
|
||||
<span class="meta">42 pages</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<span>customer-feedback</span>
|
||||
<span class="meta">5 pages</span>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="item create">
|
||||
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
|
||||
<span>New shared space…</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="tile">
|
||||
<h3><svg class="icon" viewBox="0 0 24 24" style="display: inline; vertical-align: -3px; margin-right: 4px;"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1" /><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1" /></svg>From URL</h3>
|
||||
<p>Fetch a page; we'll snapshot it and queue ingest into <strong>team-research</strong>.</p>
|
||||
<input class="input" placeholder="https://" />
|
||||
</div>
|
||||
<div class="tile">
|
||||
<h3><svg class="icon" viewBox="0 0 24 24" style="display: inline; vertical-align: -3px; margin-right: 4px;"><path d="M9 4h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8z" /><path d="M9 4v4h4" /></svg>Paste markdown</h3>
|
||||
<p>Paste any text or markdown; we'll capture it as a new source in <strong>team-research</strong>.</p>
|
||||
<textarea placeholder="Paste content…"></textarea>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<h3><svg class="icon" viewBox="0 0 24 24" style="display: inline; vertical-align: -3px; margin-right: 4px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" /></svg>Drop files</h3>
|
||||
<p>Drag local files anywhere on the page. The ingest modal opens with this space pre-selected.</p>
|
||||
<div class="drop">Drop files here · or click to browse</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="callout">
|
||||
<strong>One space at a time.</strong> Switching the space dropdown after typing/dropping content will warn before re-binding. Cross-space copy is a separate flow (Settings → Spaces → Copy pages).
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 180 KiB |
@@ -1,207 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="_tokens.css" />
|
||||
<style>
|
||||
body { background: var(--bg); }
|
||||
.frame {
|
||||
width: 390px;
|
||||
min-height: 844px;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.topbar .menu, .topbar .back {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
display: inline-grid; place-items: center;
|
||||
color: var(--fg);
|
||||
}
|
||||
.topbar .title {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-row {
|
||||
display: flex; gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px; font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pill.active { background: oklch(0.27 0.06 250); color: oklch(0.85 0.1 250); border-color: oklch(0.4 0.12 250); }
|
||||
|
||||
.body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.space-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.space-card .label {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.space-card .row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg);
|
||||
min-height: 48px;
|
||||
}
|
||||
.space-card .row .name { flex: 1; font-weight: 600; font-size: 14px; }
|
||||
.space-card .row .chev { color: var(--muted); }
|
||||
.space-card .meta { font-size: 11px; color: var(--muted); margin-top: 6px; }
|
||||
|
||||
.tile {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.tile h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tile p { margin: 0; font-size: 12px; color: var(--muted); }
|
||||
.tile .input {
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tile textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
}
|
||||
.drop {
|
||||
min-height: 100px;
|
||||
border: 1.5px dashed var(--border);
|
||||
border-radius: 8px;
|
||||
display: grid; place-items: center;
|
||||
color: var(--muted);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.sticky-foot {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(to top, var(--bg) 70%, transparent);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.sticky-foot .btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.callout {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="topbar">
|
||||
<button class="back">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18" /></svg>
|
||||
</button>
|
||||
<div class="title">Add Content</div>
|
||||
<button class="menu">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-row">
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M5 7v13h14V7" /></svg> Wiki</span>
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg> Ask</span>
|
||||
<span class="pill active"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg> Add Content</span>
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 7v5l3 2" /><circle cx="12" cy="12" r="9" /></svg> History</span>
|
||||
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /></svg> Settings</span>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="space-card">
|
||||
<div class="label">Destination space</div>
|
||||
<div class="row">
|
||||
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
|
||||
<div class="name">team-research</div>
|
||||
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
|
||||
<svg class="icon icon-sm chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></svg>
|
||||
</div>
|
||||
<div class="meta">Tap to switch · last used selected by default</div>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<h3>From URL</h3>
|
||||
<p>Snapshot a webpage into <strong>team-research</strong>.</p>
|
||||
<input class="input" placeholder="https://" />
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<h3>Paste markdown</h3>
|
||||
<p>Capture any markdown or plain text.</p>
|
||||
<textarea placeholder="Paste content…"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="tile">
|
||||
<h3>Files</h3>
|
||||
<p>Tap to choose; opens the ingest modal pre-bound to <strong>team-research</strong>.</p>
|
||||
<div class="drop">Tap to choose files</div>
|
||||
</div>
|
||||
|
||||
<div class="callout">
|
||||
Switching the space resets the in-progress ingest. To copy pages between spaces, use Settings → Spaces.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky-foot">
|
||||
<button class="btn btn-primary">Capture into team-research</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 176 KiB |
@@ -1,223 +0,0 @@
|
||||
/* Mirrors the LLM Wiki plugin tokens (dark mode) so mockups match production. */
|
||||
:root {
|
||||
--border: oklch(0.269 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--bg: oklch(0.145 0 0);
|
||||
--fg: oklch(0.985 0 0);
|
||||
--muted: oklch(0.708 0 0);
|
||||
--muted-soft: oklch(0.55 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-hover: oklch(0.32 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-fg: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.637 0.237 25.331);
|
||||
--status-done: oklch(0.65 0.16 145);
|
||||
--status-running: oklch(0.7 0.13 200);
|
||||
--status-blocked: oklch(0.6 0.21 25);
|
||||
--status-todo: oklch(0.6 0.17 250);
|
||||
--space-tint: oklch(0.27 0.06 250);
|
||||
--space-tint-fg: oklch(0.85 0.1 250);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.frame {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 1.6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-fg);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--accent);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-icon:hover,
|
||||
.btn-icon[data-state="hover"] {
|
||||
background: var(--accent);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.kbd {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.callout {
|
||||
background: oklch(0.2 0.04 250);
|
||||
color: oklch(0.85 0.08 250);
|
||||
border: 1px solid oklch(0.4 0.1 250);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.callout.warn {
|
||||
background: oklch(0.22 0.05 70);
|
||||
color: oklch(0.88 0.1 70);
|
||||
border-color: oklch(0.45 0.12 70);
|
||||
}
|
||||
|
||||
.callout.success {
|
||||
background: oklch(0.2 0.05 145);
|
||||
color: oklch(0.85 0.1 145);
|
||||
border-color: oklch(0.4 0.12 145);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-future {
|
||||
background: oklch(0.27 0.07 305);
|
||||
color: oklch(0.85 0.1 305);
|
||||
}
|
||||
|
||||
.tag-soon {
|
||||
background: oklch(0.25 0 0);
|
||||
color: var(--muted);
|
||||
border: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.tag-shared {
|
||||
background: var(--space-tint);
|
||||
color: var(--space-tint-fg);
|
||||
}
|
||||
|
||||
.health-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.health-row .check {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: oklch(0.27 0.06 145);
|
||||
color: oklch(0.85 0.1 145);
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.health-row.warn .check {
|
||||
background: oklch(0.27 0.07 70);
|
||||
color: oklch(0.88 0.1 70);
|
||||
}
|
||||
|
||||
.health-row .label {
|
||||
flex: 1;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 16px 0;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import pw from "/Users/dotta/paperclip/node_modules/.pnpm/playwright@1.58.2/node_modules/playwright/index.js";
|
||||
const { chromium } = pw;
|
||||
import path from "node:path";
|
||||
import fs from "node:fs";
|
||||
import url from "node:url";
|
||||
|
||||
const here = path.dirname(url.fileURLToPath(import.meta.url));
|
||||
const targets = [
|
||||
{ html: "01-sidebar-desktop.html", png: "01-sidebar-desktop.png", width: 1440, height: 900, dpr: 2 },
|
||||
{ html: "02-sidebar-mobile.html", png: "02-sidebar-mobile.png", width: 390, height: 844, dpr: 3 },
|
||||
{ html: "03-three-dot-menu.html", png: "03-three-dot-menu.png", width: 1080, height: 460, dpr: 2 },
|
||||
{ html: "04-create-space-modal-desktop.html", png: "04-create-space-modal-desktop.png", width: 1440, height: 900, dpr: 2 },
|
||||
{ html: "05-create-space-modal-mobile.html", png: "05-create-space-modal-mobile.png", width: 390, height: 844, dpr: 3 },
|
||||
{ html: "06-edit-space-desktop.html", png: "06-edit-space-desktop.png", width: 1440, height: 900, dpr: 2 },
|
||||
{ html: "07-edit-space-mobile.html", png: "07-edit-space-mobile.png", width: 390, height: 1320, dpr: 3 },
|
||||
{ html: "08-add-content-ingest-desktop.html", png: "08-add-content-ingest-desktop.png", width: 1440, height: 900, dpr: 2 },
|
||||
{ html: "09-add-content-ingest-mobile.html", png: "09-add-content-ingest-mobile.png", width: 390, height: 1024, dpr: 3 },
|
||||
];
|
||||
|
||||
const browser = await chromium.launch();
|
||||
for (const t of targets) {
|
||||
const ctx = await browser.newContext({
|
||||
viewport: { width: t.width, height: t.height },
|
||||
deviceScaleFactor: t.dpr,
|
||||
colorScheme: "dark",
|
||||
});
|
||||
const page = await ctx.newPage();
|
||||
const fileUrl = url.pathToFileURL(path.join(here, t.html)).toString();
|
||||
await page.goto(fileUrl, { waitUntil: "networkidle" });
|
||||
// pad mobile screenshots to fit content
|
||||
const out = path.join(here, t.png);
|
||||
await page.screenshot({ path: out, fullPage: t.png.includes("mobile") || t.png.startsWith("06-") || t.png.startsWith("07-") });
|
||||
console.log("rendered", t.png);
|
||||
await ctx.close();
|
||||
}
|
||||
await browser.close();
|
||||
console.log("done");
|
||||
|
Before Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 386 KiB |
|
Before Width: | Height: | Size: 205 KiB |
|
Before Width: | Height: | Size: 310 KiB |
|
Before Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 443 KiB |
|
Before Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 258 KiB |
|
Before Width: | Height: | Size: 245 KiB |
|
Before Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 274 KiB |
|
Before Width: | Height: | Size: 262 KiB |
|
Before Width: | Height: | Size: 192 KiB |
|
Before Width: | Height: | Size: 360 KiB |
|
Before Width: | Height: | Size: 144 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 184 KiB |
|
Before Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 144 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 144 KiB |