@peaske7/readit 0.3.0-rc.0 → 0.3.0-rc.1

package/src/index.css

@@ -1,859 +0,0 @@
-@import "tailwindcss";
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Font family system */
-.font-serif {
-  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
-.font-sans {
-  font-family:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
-}
-
-/* Selection highlight */
-::selection {
-  background: var(--selection-bg);
-}
-
-/* Smooth scrolling */
-html {
-  scroll-behavior: smooth;
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-}
-
-/* ========================================
-   Theme Variables
-   ======================================== */
-
-:root {
-  /* Page / chrome */
-  --page-bg: #ffffff;
-  --selection-bg: rgba(59, 130, 246, 0.3);
-
-  /* Scrollbar */
-  --scrollbar-track: #f4f4f5;
-  --scrollbar-thumb: #cccccc;
-  --scrollbar-thumb-hover: #aaaaaa;
-
-  /* Prose */
-  --prose-body: #374151;
-  --prose-headings: #111827;
-  --prose-links: #2563eb;
-  --prose-links-hover: #1d4ed8;
-  --prose-bold: #111827;
-  --prose-code-bg: #e8e8ec;
-  --prose-border: #e5e7eb;
-  --prose-table-header-bg: #f9fafb;
-  --prose-table-even-bg: #f9fafb;
-  --prose-blockquote: #6b7280;
-  --prose-blockquote-border: #d1d5db;
-  --prose-summary-marker: #9ca3af;
-
-  /* TOC */
-  --toc-text: rgba(26, 26, 26, 0.5);
-  --toc-text-l2: rgba(26, 26, 26, 0.45);
-  --toc-text-l3: rgba(26, 26, 26, 0.4);
-  --toc-text-deep: rgba(26, 26, 26, 0.35);
-  --toc-hover: rgba(26, 26, 26, 0.75);
-  --toc-active: rgba(26, 26, 26, 0.85);
-
-  /* Mermaid */
-  --mermaid-grid: #e4e4e7;
-
-  /* Comment highlight colors */
-  /* Amber (default) - warm, paper-like */
-  --comment-color-0-bg: rgba(245, 222, 160, 0.5);
-  --comment-color-0-bg-focused: rgba(228, 195, 110, 0.65);
-  --comment-color-0-border: #c9a84a;
-
-  /* Blue - muted slate-blue */
-  --comment-color-1-bg: rgba(168, 196, 228, 0.5);
-  --comment-color-1-bg-focused: rgba(130, 168, 210, 0.65);
-  --comment-color-1-border: #5b7fa8;
-
-  /* Green - sage */
-  --comment-color-2-bg: rgba(170, 210, 170, 0.5);
-  --comment-color-2-bg-focused: rgba(130, 185, 135, 0.65);
-  --comment-color-2-border: #5a9a62;
-
-  /* Rose - dusty rose */
-  --comment-color-3-bg: rgba(225, 180, 185, 0.5);
-  --comment-color-3-bg-focused: rgba(205, 145, 155, 0.65);
-  --comment-color-3-border: #b86b78;
-
-  /* Pending - warm amber tint (matches comment highlight palette) */
-  --pending-bg: rgba(245, 222, 160, 0.45);
-}
-
-.dark {
-  --page-bg: #18181b;
-  --selection-bg: rgba(96, 165, 250, 0.35);
-
-  --scrollbar-track: #27272a;
-  --scrollbar-thumb: #52525b;
-  --scrollbar-thumb-hover: #71717a;
-
-  --prose-body: #d4d4d8;
-  --prose-headings: #f4f4f5;
-  --prose-links: #60a5fa;
-  --prose-links-hover: #93c5fd;
-  --prose-bold: #f4f4f5;
-  --prose-code-bg: #323238;
-  --prose-border: #3f3f46;
-  --prose-table-header-bg: #27272a;
-  --prose-table-even-bg: #1f1f23;
-  --prose-blockquote: #a1a1aa;
-  --prose-blockquote-border: #52525b;
-  --prose-summary-marker: #71717a;
-
-  --toc-text: rgba(228, 228, 231, 0.5);
-  --toc-text-l2: rgba(228, 228, 231, 0.45);
-  --toc-text-l3: rgba(228, 228, 231, 0.4);
-  --toc-text-deep: rgba(228, 228, 231, 0.35);
-  --toc-hover: rgba(228, 228, 231, 0.75);
-  --toc-active: rgba(228, 228, 231, 0.85);
-
-  --mermaid-grid: #3f3f46;
-
-  --comment-color-0-bg: rgba(202, 168, 74, 0.35);
-  --comment-color-0-bg-focused: rgba(202, 168, 74, 0.55);
-  --comment-color-0-border: #d4b548;
-
-  --comment-color-1-bg: rgba(91, 127, 168, 0.35);
-  --comment-color-1-bg-focused: rgba(91, 127, 168, 0.55);
-  --comment-color-1-border: #7da3c8;
-
-  --comment-color-2-bg: rgba(90, 154, 98, 0.35);
-  --comment-color-2-bg-focused: rgba(90, 154, 98, 0.55);
-  --comment-color-2-border: #7ab882;
-
-  --comment-color-3-bg: rgba(184, 107, 120, 0.35);
-  --comment-color-3-bg-focused: rgba(184, 107, 120, 0.55);
-  --comment-color-3-border: #d08a98;
-
-  --pending-bg: rgba(202, 168, 74, 0.35);
-}
-
-/* ========================================
-   Comment Highlight Styles (CSS Custom Highlight API)
-   ======================================== */
-
-/* Color variants — paint-time only, zero DOM mutations */
-::highlight(comment-color-0) {
-  background-color: var(--comment-color-0-bg);
-}
-
-::highlight(comment-color-1) {
-  background-color: var(--comment-color-1-bg);
-}
-
-::highlight(comment-color-2) {
-  background-color: var(--comment-color-2-bg);
-}
-
-::highlight(comment-color-3) {
-  background-color: var(--comment-color-3-bg);
-}
-
-/* Focused state — higher priority, overrides color group */
-::highlight(comment-focused) {
-  background-color: var(--comment-color-0-bg-focused);
-}
-
-/* Pending selection highlight — neutral gray */
-::highlight(pending-selection) {
-  background-color: var(--pending-bg);
-}
-
-/* ========================================
-   Anchor Lines
-   ======================================== */
-
-.anchor-line {
-  fill: none;
-  stroke: var(--anchor-color, var(--comment-color-0-border));
-  stroke-width: 1.5;
-  opacity: 0;
-  transition: opacity 150ms ease;
-  pointer-events: none;
-}
-
-.anchor-line[data-visible="true"] {
-  opacity: 0.5;
-}
-
-.anchor-line-dot {
-  fill: var(--anchor-color, var(--comment-color-0-border));
-  opacity: 0;
-  transition: opacity 150ms ease;
-}
-
-.anchor-line-dot[data-visible="true"] {
-  opacity: 0.7;
-}
-
-/* Toast animation */
-[data-sonner-toast] {
-  animation: toast-in 0.2s ease-out;
-}
-
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Dropdown menu animation */
-.animate-in {
-  animation: menu-in 0.15s ease-out;
-}
-
-@keyframes menu-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Table of Contents - Whisper aesthetic */
-.toc {
-  font-size: 14px;
-  line-height: 1.7;
-}
-
-.toc-item {
-  display: block;
-  color: var(--toc-text);
-  text-decoration: none;
-  padding: 3px 0;
-  transition: color 0.2s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 180px;
-}
-
-/* Hierarchy via indentation + size */
-.toc-level-1 {
-  padding-left: 0;
-  font-size: 14px;
-}
-
-.toc-level-2 {
-  padding-left: 12px;
-  font-size: 13px;
-  color: var(--toc-text-l2);
-}
-
-.toc-level-3 {
-  padding-left: 24px;
-  font-size: 12px;
-  color: var(--toc-text-l3);
-}
-
-.toc-level-4,
-.toc-level-5,
-.toc-level-6 {
-  padding-left: 36px;
-  font-size: 11px;
-  color: var(--toc-text-deep);
-}
-
-/* Hover - slightly more visible */
-.toc-item:hover {
-  color: var(--toc-hover);
-}
-
-/* Active - clearly readable */
-.toc-active {
-  color: var(--toc-active);
-  font-weight: 500;
-}
-
-/* Toggle indicator for collapsible sections */
-.toc-toggle {
-  font-size: 10px;
-  vertical-align: middle;
-  transition: opacity 0.15s ease;
-}
-
-.toc-item:hover .toc-toggle {
-  opacity: 0.7;
-}
-
-/* ========================================
-   Prose Typography - Optimal Reading
-   ======================================== */
-
-.prose {
-  max-width: 65ch;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 1.75;
-  color: var(--prose-body);
-  user-select: text;
-  -webkit-user-select: text;
-  letter-spacing: -0.011em;
-}
-
-/* Headings */
-.prose h1,
-.prose h2,
-.prose h3,
-.prose h4,
-.prose h5,
-.prose h6 {
-  font-weight: 600;
-  line-height: 1.3;
-  margin-top: 2em;
-  margin-bottom: 0.75em;
-  color: var(--prose-headings);
-  letter-spacing: -0.02em;
-}
-
-.prose h1 {
-  font-size: 2.25em;
-  margin-top: 0;
-  margin-bottom: 0.889em;
-  font-weight: 800;
-  line-height: 1.111;
-}
-
-.prose h2 {
-  font-size: 1.5em;
-  margin-top: 2em;
-  margin-bottom: 1em;
-  font-weight: 700;
-  line-height: 1.333;
-  padding-bottom: 0.4em;
-  border-bottom: 1px solid var(--prose-border);
-}
-
-.prose h3 {
-  font-size: 1.25em;
-  margin-top: 1.6em;
-  margin-bottom: 0.6em;
-  line-height: 1.6;
-}
-
-.prose h4 {
-  font-size: 1.1em;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  line-height: 1.5;
-}
-
-/* Paragraphs and spacing */
-.prose p {
-  margin: 1.25em 0;
-}
-
-.prose > :first-child {
-  margin-top: 0;
-}
-
-.prose > :last-child {
-  margin-bottom: 0;
-}
-
-/* Lists */
-.prose ul,
-.prose ol {
-  padding-left: 1.625em;
-  margin: 1.25em 0;
-}
-
-.prose li {
-  margin: 0.5em 0;
-  padding-left: 0.375em;
-}
-
-.prose li::marker {
-  color: #9ca3af;
-}
-
-.dark .prose li::marker {
-  color: #6b7280;
-}
-
-.prose ul {
-  list-style-type: disc;
-}
-
-.prose ol {
-  list-style-type: decimal;
-}
-
-/* Nested lists */
-.prose li > ul,
-.prose li > ol {
-  margin: 0.35em 0;
-}
-
-/* Code */
-.prose code {
-  background: var(--prose-code-bg);
-  padding: 0.15em 0.4em;
-  border-radius: 0.3em;
-  font-size: 0.85em;
-  font-weight: 500;
-}
-
-.prose pre {
-  margin: 1.75em 0;
-}
-
-/* Shiki syntax-highlighted code blocks (server-rendered) */
-.prose pre.shiki {
-  margin: 1.5em 0;
-  border-radius: 0.5em;
-  font-size: 0.875em;
-  padding: 1em;
-  overflow-x: auto;
-}
-
-.prose pre.shiki code {
-  background: transparent;
-  padding: 0;
-  font-size: inherit;
-  font-weight: 400;
-  color: inherit;
-}
-
-.prose pre code {
-  background: transparent;
-  padding: 0;
-  font-size: 0.85em;
-  font-weight: 400;
-  color: inherit;
-}
-
-/* Editor links — clickable file paths */
-.prose a.editor-link {
-  text-decoration: none;
-  color: inherit;
-  border-bottom: 1px dashed var(--prose-links);
-  transition: border-color 0.15s;
-}
-
-.prose a.editor-link:hover {
-  border-bottom-style: solid;
-}
-
-.prose a.editor-link code {
-  cursor: pointer;
-}
-
-/* Tables */
-.prose table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.75em 0;
-  font-size: 0.9em;
-}
-
-.prose th,
-.prose td {
-  border: 1px solid var(--prose-border);
-  padding: 0.625em 1em;
-  text-align: left;
-  line-height: 1.6;
-}
-
-.prose th {
-  background: var(--prose-table-header-bg);
-  font-weight: 600;
-  font-size: 0.875em;
-  letter-spacing: 0.01em;
-}
-
-.prose tr:nth-child(even) {
-  background: var(--prose-table-even-bg);
-}
-
-/* Blockquotes */
-.prose blockquote {
-  border-left: 3px solid var(--prose-blockquote-border);
-  padding-left: 1.125em;
-  margin: 1.5em 0;
-  color: var(--prose-blockquote);
-  font-style: italic;
-}
-
-.prose blockquote p {
-  margin: 0.5em 0;
-}
-
-/* Links */
-.prose a {
-  color: var(--prose-links);
-  font-weight: 500;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  text-decoration-thickness: 1px;
-}
-
-.prose a:hover {
-  color: var(--prose-links-hover);
-}
-
-/* Horizontal rules */
-.prose hr {
-  border: none;
-  border-top: 1px solid var(--prose-border);
-  margin: 3em 0;
-}
-
-/* Task lists (checkboxes) */
-.prose input[type="checkbox"] {
-  margin-right: 0.5em;
-}
-
-/* Images */
-.prose img {
-  max-width: 100%;
-  height: auto;
-  margin: 1.5em 0;
-  border-radius: 0.5em;
-}
-
-/* Strong and emphasis */
-.prose strong {
-  font-weight: 600;
-  color: var(--prose-bold);
-  letter-spacing: -0.01em;
-}
-
-.prose em {
-  font-style: italic;
-}
-
-/* First paragraph after heading - tighter spacing */
-.prose h1 + p,
-.prose h2 + p,
-.prose h3 + p,
-.prose h4 + p {
-  margin-top: 0.75em;
-}
-
-/* Fullscreen prose - left-aligned, full width */
-.prose-fullscreen {
-  max-width: none;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/* Prose font family variants */
-.prose.prose-serif,
-.prose.prose-serif h1,
-.prose.prose-serif h2,
-.prose.prose-serif h3,
-.prose.prose-serif h4,
-.prose.prose-serif h5,
-.prose.prose-serif h6 {
-  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
-.prose.prose-sans,
-.prose.prose-sans h1,
-.prose.prose-sans h2,
-.prose.prose-sans h3,
-.prose.prose-sans h4,
-.prose.prose-sans h5,
-.prose.prose-sans h6 {
-  font-family:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
-}
-
-/* Collapsible details/summary */
-.prose details {
-  margin: 1.25em 0;
-  border: 1px solid var(--prose-border);
-  border-radius: 0.5em;
-  padding: 0 1em;
-}
-
-.prose summary {
-  cursor: pointer;
-  font-weight: 500;
-  padding: 0.75em 0;
-  list-style: none;
-}
-
-.prose summary::-webkit-details-marker {
-  display: none;
-}
-
-.prose summary::before {
-  content: "▸";
-  margin-right: 0.5em;
-  color: var(--prose-summary-marker);
-  transition: transform 0.15s ease;
-  display: inline-block;
-}
-
-.prose details[open] summary::before {
-  transform: rotate(90deg);
-}
-
-.prose details[open] summary {
-  border-bottom: 1px solid var(--prose-border);
-  margin-bottom: 0.75em;
-}
-
-.prose details > *:not(summary) {
-  margin-left: 0;
-}
-
-/* ========================================
-   Mermaid Diagram Styles
-   ======================================== */
-
-/* Container - break out of prose width for larger diagrams */
-.mermaid-container {
-  margin-left: -3rem;
-  margin-right: -3rem;
-  padding: 1rem 0;
-}
-
-.mermaid-container > svg {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Typography overrides - make text more readable */
-.mermaid-container text {
-  font-size: 14px !important;
-}
-
-.mermaid-container .section {
-  font-size: 13px !important;
-  font-weight: 500;
-}
-
-.mermaid-container .taskText {
-  font-size: 13px !important;
-}
-
-.mermaid-container .taskTextOutsideRight,
-.mermaid-container .taskTextOutsideLeft {
-  font-size: 12px !important;
-}
-
-.mermaid-container .titleText {
-  font-size: 18px !important;
-  font-weight: 600;
-}
-
-/* Flowchart specific */
-.mermaid-container .nodeLabel {
-  font-size: 14px !important;
-}
-
-.mermaid-container .edgeLabel {
-  font-size: 12px !important;
-}
-
-.mermaid-container .cluster-label {
-  font-size: 14px !important;
-  font-weight: 500;
-}
-
-/* Sequence diagram specific */
-.mermaid-container .actor {
-  font-size: 14px !important;
-}
-
-.mermaid-container .messageText {
-  font-size: 13px !important;
-}
-
-.mermaid-container .noteText {
-  font-size: 12px !important;
-}
-
-/* Grid lines - subtle */
-.mermaid-container .grid path {
-  stroke: var(--mermaid-grid) !important;
-  stroke-width: 1px;
-}
-
-/* Today line in Gantt - distinct */
-.mermaid-container .today {
-  stroke: #b86b78 !important;
-  stroke-width: 2px;
-}
-
-/* Improve stroke contrast */
-.mermaid-container path.path {
-  stroke-width: 1.5px;
-}
-
-/* Responsive breakout margins */
-@media (max-width: 768px) {
-  .mermaid-container {
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .mermaid-container {
-    margin-left: -4rem;
-    margin-right: -4rem;
-  }
-}
-
-/* Interactive toolbar (hover-revealed) */
-.mermaid-toolbar {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  border-radius: 0.5rem;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(4px);
-  border: 1px solid rgba(228, 228, 231, 0.6);
-  opacity: 0;
-  transition: opacity 120ms ease-out;
-  pointer-events: none;
-  z-index: 5;
-}
-
-.dark .mermaid-toolbar {
-  background: rgba(24, 24, 27, 0.85);
-  border-color: rgba(63, 63, 70, 0.6);
-}
-
-.mermaid-container:hover .mermaid-toolbar,
-.mermaid-toolbar:focus-within {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.mermaid-toolbar button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 0.375rem;
-  color: rgb(82, 82, 91);
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  transition:
-    background 120ms ease-out,
-    color 120ms ease-out;
-}
-
-.mermaid-toolbar button:hover {
-  background: rgba(228, 228, 231, 0.8);
-  color: rgb(24, 24, 27);
-}
-
-.dark .mermaid-toolbar button {
-  color: rgb(161, 161, 170);
-}
-
-.dark .mermaid-toolbar button:hover {
-  background: rgba(63, 63, 70, 0.8);
-  color: rgb(244, 244, 245);
-}
-
-/* Inline source view shown when toggled to code mode */
-.mermaid-source-view {
-  margin: 0;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  background: rgb(244, 244, 245);
-  color: rgb(39, 39, 42);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  overflow: auto;
-  white-space: pre;
-}
-
-.dark .mermaid-source-view {
-  background: rgb(24, 24, 27);
-  color: rgb(228, 228, 231);
-}
-
-.mermaid-source-view code {
-  background: transparent;
-  padding: 0;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-/* Modal-mode mermaid graph — let it scale up */
-.mermaid-modal-graph {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mermaid-modal-graph > svg {
-  max-width: 100%;
-  max-height: 80vh;
-  width: auto;
-  height: auto;
-}
-
-/* ========================================
-   Floating TOC Panel
-   ======================================== */
-
-.floating-toc-panel {
-  animation: floating-toc-in 0.2s ease-out;
-}
-
-@keyframes floating-toc-in {
-  from {
-    opacity: 0;
-    transform: translateX(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}