wiki-viewer 1.0.0

package/.next/standalone/src/app/globals.css

@@ -0,0 +1,716 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+	--background: #f5f5f5;
+	--foreground: #0c0a09;
+	--card: #ffffff;
+	--card-foreground: #0c0a09;
+	--popover: #ffffff;
+	--popover-foreground: #0c0a09;
+	--primary: #292524;
+	--primary-foreground: #ffffff;
+	--secondary: #fafafa;
+	--secondary-foreground: #0c0a09;
+	--muted: #f0efed;
+	--muted-foreground: #777169;
+	--accent: #292524;
+	--accent-foreground: #ffffff;
+	--accent-soft: #e7e5e4;
+	--primary-soft: #e7e5e4;
+	--success-soft: #dcfce7;
+	--quadrant-do-soft: #f0fdf4;
+	--quadrant-schedule-soft: #fff7ed;
+	--quadrant-delegate-soft: #eff6ff;
+	--quadrant-eliminate-soft: #faf5ff;
+	--destructive: #dc2626;
+	--destructive-foreground: #ffffff;
+	--destructive-soft: #fee2e2;
+	--warning-soft: #fef3c7;
+	--warning-ink: #a16207;
+	--border: #e7e5e4;
+	--input: #d6d3d1;
+	--ring: #292524;
+	--radius: 8px;
+
+	--chart-1: #292524;
+	--chart-2: #777169;
+	--chart-3: #a8a29e;
+	--chart-4: #d6d3d1;
+	--chart-5: #0c0a09;
+
+	--sidebar-background: #fafafa;
+	--sidebar-foreground: #0c0a09;
+	--sidebar-primary: #292524;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #ffffff;
+	--sidebar-accent-foreground: #0c0a09;
+	--sidebar-border: #e7e5e4;
+	--sidebar-ring: #292524;
+
+	/* Eisenhower quadrant accent colors — light mode */
+	--quadrant-do: #a7e5d3;
+	--quadrant-schedule: #f4c5a8;
+	--quadrant-delegate: #a8c8e8;
+	--quadrant-eliminate: #c8b8e0;
+
+	/* Status colors — light mode */
+	--status-not-started: #777169;
+	--status-in-progress: #a8a29e;
+	--status-done: #16a34a;
+
+	/* Success / Warning / Info — light mode */
+	--success: #16a34a;
+	--warning: #d97706;
+	--info: #292524;
+
+	/* Gradient orb tokens */
+	--gradient-mint: #a7e5d3;
+	--gradient-peach: #f4c5a8;
+	--gradient-lavender: #c8b8e0;
+	--gradient-sky: #a8c8e8;
+	--gradient-rose: #e8b8c4;
+
+	/* Elevation backing — light mode editorial */
+	--shadow-golden-card: 0 4px 16px rgba(0, 0, 0, 0.04);
+	--shadow-golden-pop: 0 8px 24px rgba(0, 0, 0, 0.06);
+	--shadow-golden-dialog: 0 16px 48px rgba(0, 0, 0, 0.08);
+	--shadow-golden-toast: 0 24px 64px rgba(0, 0, 0, 0.10);
+
+	/* === State tokens === */
+	--state-disabled-opacity: 0.5;
+	--state-hover-overlay: 0 0 0 / 0.05; /* black 5% for light */
+	--state-active-scale: 0.98;
+	--ring-width-input: 1px;
+	--ring-width-interactive: 2px;
+
+	/* === Motion tokens === */
+	--motion-fast: 100ms;
+	--motion-base: 150ms;
+	--motion-slow: 300ms;
+	--motion-easing: cubic-bezier(0, 0, 0.2, 1); /* ease-out */
+
+	/* === Z-index tokens === */
+	--z-sticky: 10;
+	--z-sidebar: 30;
+	--z-overlay: 40;
+	--z-float: 50;
+}
+
+.dark {
+	--background: #0c0a09;
+	--foreground: #ffffff;
+	--card: #1c1917;
+	--card-foreground: #ffffff;
+	--popover: #1c1917;
+	--popover-foreground: #ffffff;
+	--primary: #292524;
+	--primary-foreground: #ffffff;
+	--secondary: #1c1917;
+	--secondary-foreground: #ffffff;
+	--muted: #292524;
+	--muted-foreground: #a8a29e;
+	--accent: #ffffff;
+	--accent-foreground: #0c0a09;
+	--accent-soft: #3d3d3d;
+	--primary-soft: #453c35;
+	--success-soft: #14532d;
+	--quadrant-do-soft: #14532d;
+	--quadrant-schedule-soft: #7c2d12;
+	--quadrant-delegate-soft: #1e3a5f;
+	--quadrant-eliminate-soft: #4a1d6a;
+	--destructive: #dc2626;
+	--destructive-foreground: #ffffff;
+	--destructive-soft: #7f1d1d;
+	--warning-soft: #3d2b1a;
+	--warning-ink: #fbbf24;
+	--border: #292524;
+	--input: #292524;
+	--ring: #ffffff;
+
+	--chart-1: #ffffff;
+	--chart-2: #a8a29e;
+	--chart-3: #777169;
+	--chart-4: #4e4e4e;
+	--chart-5: #f5f5f5;
+
+	--sidebar-background: #0c0a09;
+	--sidebar-foreground: #ffffff;
+	--sidebar-primary: #292524;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #1c1917;
+	--sidebar-accent-foreground: #ffffff;
+	--sidebar-border: #292524;
+	--sidebar-ring: #ffffff;
+
+	/* Eisenhower quadrant accent colors */
+	--quadrant-do: #a7e5d3;
+	--quadrant-schedule: #f4c5a8;
+	--quadrant-delegate: #a8c8e8;
+	--quadrant-eliminate: #c8b8e0;
+
+	/* Status colors */
+	--status-not-started: #a8a29e;
+	--status-in-progress: #777169;
+	--status-done: #16a34a;
+
+	/* Success / Warning / Info */
+	--success: #16a34a;
+	--warning: #fbbf24;
+	--info: #ffffff;
+
+	--state-hover-overlay: 255 255 255 / 0.1; /* white 10% for dark */
+
+	/* Elevation backing — dark mode editorial */
+	--shadow-golden-card: 0 4px 16px rgba(0, 0, 0, 0.3);
+	--shadow-golden-pop: 0 8px 24px rgba(0, 0, 0, 0.4);
+	--shadow-golden-dialog: 0 16px 48px rgba(0, 0, 0, 0.5);
+	--shadow-golden-toast: 0 24px 64px rgba(0, 0, 0, 0.6);
+}
+
+/* Shadow override on dark bg */
+.dark .shadow-golden {
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+/* Smooth transitions for interactive elements */
+@layer base {
+	a,
+	button,
+	input,
+	textarea,
+	select {
+		@apply transition-colors duration-150;
+	}
+}
+
+/* Enhanced focus visibility for accessibility */
+@layer base {
+	:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+		border-radius: var(--radius);
+	}
+}
+
+/* Skip to content link for keyboard navigation */
+.skip-to-content {
+	position: absolute;
+	left: -9999px;
+	top: 0;
+	z-index: 9999;
+	padding: 0.5rem 1rem;
+	background: var(--primary);
+	color: var(--primary-foreground);
+	font-size: 0.875rem;
+	font-weight: 400;
+	border-radius: 0 0 0.5rem 0;
+}
+
+.skip-to-content:focus {
+	left: 0;
+}
+
+/* Shimmer animation for active progress bars */
+@keyframes shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+	100% {
+		background-position: 200% 0;
+	}
+}
+
+.animate-shimmer {
+	background-size: 200% 100%;
+	animation: shimmer 2s ease-in-out infinite;
+}
+
+/* Card entrance animation */
+@keyframes fade-in-up {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in-up {
+	animation: fade-in-up 0.3s ease-out both;
+}
+
+/* Hide Next.js dev mode indicator */
+[data-next-mark],
+nextjs-portal {
+	display: none;
+}
+
+/* Custom scrollbar — light mode */
+@layer base {
+	::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background: #d6d3d1;
+		border-radius: 4px;
+	}
+	::-webkit-scrollbar-thumb:hover {
+		background: #a8a29e;
+	}
+}
+
+/* Custom scrollbar — dark theme override */
+@layer base {
+	.dark ::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+	.dark ::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	.dark ::-webkit-scrollbar-thumb {
+		background: #292524;
+		border-radius: 4px;
+	}
+	.dark ::-webkit-scrollbar-thumb:hover {
+		background: #4e4e4e;
+	}
+}
+
+/* ============================================================ */
+/* Editor: tiptap / ProseMirror                                  */
+/* Reconciled to ElevenLabs design tokens.                        */
+/* ============================================================ */
+
+.tiptap {
+	font-size: 0.875rem;
+	line-height: 1.55;
+	letter-spacing: -0.01em;
+	outline: none;
+}
+
+.tiptap h1 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	line-height: 1.25;
+	letter-spacing: -0.02em;
+	margin: 1.5rem 0 0.5rem;
+}
+
+.tiptap h2 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	line-height: 1.3;
+	letter-spacing: -0.015em;
+	margin: 1.25rem 0 0.4rem;
+}
+
+.tiptap h3 {
+	font-size: 1.0625rem;
+	font-weight: 600;
+	line-height: 1.4;
+	letter-spacing: -0.01em;
+	margin: 1rem 0 0.35rem;
+}
+
+.tiptap h4 {
+	font-size: 0.9375rem;
+	font-weight: 600;
+	line-height: 1.4;
+	margin: 0.85rem 0 0.3rem;
+}
+
+.tiptap p {
+	margin-bottom: 0.6rem;
+}
+
+.tiptap ul,
+.tiptap ol {
+	padding-left: 1.4rem;
+	margin-bottom: 0.6rem;
+}
+
+.tiptap li p {
+	margin-bottom: 0.2rem;
+}
+
+.tiptap blockquote {
+	border-left: 2px solid var(--border);
+	padding-left: 0.85rem;
+	color: var(--muted-foreground);
+	font-style: italic;
+}
+
+.tiptap code {
+	background: var(--muted);
+	color: var(--foreground);
+	padding: 0.1rem 0.3rem;
+	border-radius: var(--radius);
+	font-size: 0.85em;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.tiptap pre {
+	background: var(--muted);
+	color: var(--foreground);
+	padding: 0.75rem 0.9rem;
+	border-radius: calc(var(--radius) * 2);
+	overflow-x: auto;
+	font-size: 0.8125rem;
+	line-height: 1.55;
+	margin: 0.75rem 0;
+}
+
+.tiptap pre code {
+	background: transparent;
+	padding: 0;
+}
+
+.tiptap pre code .hljs-keyword,
+.tiptap pre code .hljs-selector-tag,
+.tiptap pre code .hljs-built_in {
+	color: var(--accent);
+	font-weight: 500;
+}
+
+.tiptap pre code .hljs-string,
+.tiptap pre code .hljs-attr {
+	color: var(--success);
+}
+
+.tiptap pre code .hljs-number,
+.tiptap pre code .hljs-literal,
+.tiptap pre code .hljs-bullet,
+.tiptap pre code .hljs-symbol {
+	color: var(--warning-ink);
+}
+
+.tiptap pre code .hljs-comment,
+.tiptap pre code .hljs-quote {
+	color: var(--muted-foreground);
+	font-style: italic;
+}
+
+.tiptap pre code .hljs-function,
+.tiptap pre code .hljs-title,
+.tiptap pre code .hljs-section {
+	color: var(--accent);
+	font-weight: 600;
+}
+
+.tiptap pre code .hljs-type,
+.tiptap pre code .hljs-class .hljs-title,
+.tiptap pre code .hljs-name,
+.tiptap pre code .hljs-meta {
+	color: var(--warning-ink);
+}
+
+.tiptap pre code .hljs-variable,
+.tiptap pre code .hljs-template-variable,
+.tiptap pre code .hljs-attribute {
+	color: var(--foreground);
+}
+
+.tiptap pre code .hljs-tag,
+.tiptap pre code .hljs-regexp {
+	color: var(--destructive);
+}
+
+.tiptap pre code .hljs-emphasis {
+	font-style: italic;
+}
+
+.tiptap pre code .hljs-strong {
+	font-weight: 600;
+}
+
+.tiptap hr {
+	border: 0;
+	border-top: 1px solid var(--border);
+	margin: 1.25rem 0;
+}
+
+.tiptap a {
+	color: var(--accent);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.tiptap strong {
+	font-weight: 600;
+	color: var(--foreground);
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+	content: attr(data-placeholder);
+	color: var(--muted-foreground);
+	float: left;
+	height: 0;
+	pointer-events: none;
+}
+
+.tiptap .tableWrapper {
+	overflow-x: auto;
+	margin: 0.75rem 0;
+}
+
+.tiptap table {
+	border-collapse: collapse;
+	table-layout: fixed;
+	width: 100%;
+	margin: 0.75rem 0;
+	overflow: hidden;
+	border-radius: var(--radius);
+	border: 1px solid var(--border);
+}
+
+.tiptap th,
+.tiptap td {
+	border: 1px solid var(--border);
+	padding: 0.4rem 0.6rem;
+	vertical-align: top;
+	position: relative;
+}
+
+.tiptap th {
+	background: var(--muted);
+	font-weight: 600;
+	text-align: left;
+}
+
+.tiptap td {
+	background: transparent;
+}
+
+.tiptap tr:hover td {
+	background: color-mix(in srgb, var(--muted) 60%, transparent);
+}
+
+.tiptap .selectedCell {
+	background: color-mix(in srgb, var(--accent) 10%, transparent);
+	position: relative;
+}
+
+.tiptap .selectedCell::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background: color-mix(in srgb, var(--accent) 6%, transparent);
+}
+
+.tiptap .column-resize-handle {
+	position: absolute;
+	right: -2px;
+	top: 0;
+	bottom: -2px;
+	width: 4px;
+	background: var(--accent);
+	pointer-events: none;
+}
+
+.tiptap.resize-cursor {
+	cursor: col-resize;
+}
+
+.tiptap .task-list {
+	list-style: none;
+	padding-left: 0;
+}
+
+.tiptap .task-list li {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	margin-bottom: 0.25rem;
+}
+
+.tiptap .task-list li > label {
+	flex-shrink: 0;
+	margin-top: 0.2rem;
+	user-select: none;
+}
+
+.tiptap .task-list li label input[type="checkbox"] {
+	appearance: none;
+	width: 0.95rem;
+	height: 0.95rem;
+	border: 1.5px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--background);
+	cursor: pointer;
+	position: relative;
+	transition: border-color 120ms;
+}
+
+.tiptap .task-list li label input[type="checkbox"]:checked {
+	background: var(--accent);
+	border-color: var(--accent);
+}
+
+.tiptap .task-list li label input[type="checkbox"]:checked::after {
+	content: "✓";
+	color: var(--accent-foreground);
+	font-size: 0.7rem;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -52%);
+}
+
+.tiptap .task-list li[data-checked="true"] > div > p {
+	color: var(--muted-foreground);
+	text-decoration: line-through;
+}
+
+.tiptap .callout-info {
+	border-left: 2px solid var(--accent);
+	background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.tiptap .callout-warning {
+	border-left: 2px solid var(--warning-ink);
+	background: var(--warning-soft);
+}
+
+.tiptap .callout-success {
+	border-left: 2px solid var(--success);
+	background: var(--success-soft);
+}
+
+.tiptap .callout-error {
+	border-left: 2px solid var(--destructive);
+	background: var(--destructive-soft);
+}
+
+.tiptap .resizable-image {
+	position: relative;
+	max-width: 100%;
+	height: auto;
+	display: block;
+	margin: 0.75rem 0;
+	border-radius: var(--radius);
+}
+
+.tiptap .resizable-image[data-align="left"] {
+	margin-left: 0;
+	margin-right: auto;
+}
+
+.tiptap .resizable-image[data-align="right"] {
+	margin-left: auto;
+	margin-right: 0;
+}
+
+.tiptap .resizable-image[data-align="center"] {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.tiptap [style*="text-align: center"] {
+	text-align: center;
+}
+
+.tiptap [style*="text-align: right"] {
+	text-align: right;
+}
+
+.tiptap [style*="text-align: justify"] {
+	text-align: justify;
+}
+
+.tiptap a[href$=".pdf"]::after {
+	content: "📄";
+	color: var(--muted-foreground);
+	font-size: 0.75em;
+	margin-left: 0.25rem;
+}
+
+#cabinet-drag-handle {
+	font-family: var(--font-sans);
+	background: var(--muted);
+	color: var(--muted-foreground);
+	border-radius: var(--radius);
+}
+
+#cabinet-drag-handle:hover {
+	background: var(--accent);
+	color: var(--accent-foreground);
+}
+
+#cabinet-drag-handle:active {
+	cursor: grabbing;
+}
+
+#cabinet-gutter-add {
+	background: var(--muted);
+	color: var(--muted-foreground);
+	border-radius: var(--radius);
+}
+
+#cabinet-gutter-add:hover {
+	background: var(--accent);
+	color: var(--accent-foreground);
+}
+
+.tiptap :is(h1, h2, h3, h4)[id] {
+	position: relative;
+}
+
+.tiptap :is(h1, h2, h3, h4)[id]::before {
+	content: "#";
+	position: absolute;
+	left: -1em;
+	opacity: 0;
+	color: var(--muted-foreground);
+	transition:
+		opacity 120ms ease,
+		color 120ms ease;
+	pointer-events: none;
+}
+
+.tiptap :is(h1, h2, h3, h4)[id]:hover::before {
+	opacity: 1;
+	color: var(--accent);
+}
+
+/* Wiki-link mark styles */
+.wiki-link {
+	color: var(--accent);
+	text-decoration: none;
+	border-bottom: 1px dotted var(--accent);
+	padding: 0 1px;
+	cursor: pointer;
+	transition:
+		color 120ms,
+		background 120ms;
+}
+.wiki-link:hover {
+	background: color-mix(in srgb, var(--accent) 10%, transparent);
+	border-bottom-style: solid;
+}
+.wiki-link[data-broken="true"] {
+	color: var(--destructive);
+	border-bottom-color: var(--destructive);
+	border-bottom-style: dashed;
+}
+.wiki-link[data-broken="true"]:hover {
+	background: color-mix(in srgb, var(--destructive) 10%, transparent);
+}

package/.next/standalone/src/app/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect x="15" y="15" width="70" height="70" rx="8" fill="#292524"/>
+
+  <rect x="23" y="29" width="46" height="8" rx="2" fill="#ffffff"/>
+  <rect x="23" y="45" width="34" height="8" rx="2" fill="#ffffff"/>
+
+  <rect x="23" y="61" width="16" height="8" rx="2" fill="#ffffff"/>
+  <rect x="43" y="61" width="28" height="8" rx="2" fill="#ffffff"/>
+
+  <path d="M 69 57 L 78 65 L 69 73 Z" fill="#ffffff"/>
+</svg>