@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/app.css

@@ -1,147 +1,272 @@
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/600.css';
+@import '@fontsource/inter/700.css';
+@import '@fontsource/source-sans-3/400.css';
+@import '@fontsource/source-sans-3/600.css';
+@import '@fontsource/source-serif-4/400.css';
+@import '@fontsource/source-serif-4/400-italic.css';
+@import '@fontsource/source-serif-4/600.css';
+@import '@fontsource/source-serif-4/600-italic.css';
+@import '@fontsource/jetbrains-mono/400.css';
 
-@font-face { /* latin-ext */
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/inter-latin-ext.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+:root {
+  --font-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif;
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-ui: 'Source Sans 3', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --color-bg: #fafaf9;
+  --color-primary-strong: #0c0a09;
+  --color-body: #57534e;
+  --color-muted: #a8a29e;
+  --color-tertiary: #7a726a;
+  --color-border: #e7e5e4;
+  --color-border-strong: #dfddd8;
+  --color-code-bg: #f1f0ed;
+  --color-code-text: #4a4541;
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: #252525;
+  --sidebar-accent: #f4f4f5;
+  --sidebar-accent-foreground: #171717;
+  --sidebar-border: #e5e5e5;
+  --sidebar-ring: #b5b5b5;
+}
+
+/* ============================================================
+   Base
+   ============================================================ */
+html {
+  scroll-behavior: smooth;
 }
 
-@font-face { /* latin */
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/inter-latin.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-ui);
+  font-synthesis: none;
+  font-size: 18px;
+  line-height: 1.6;
+  color: var(--color-body);
+  background-color: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
-:root {
-  /* Layout */
-  --header-height: 3.5rem;
-
-  /* Font stacks */
-  --monospace-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-  "Liberation Mono", "Courier New", monospace;
-  --ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
-  Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
-  --ui-font-family-compact: Inter, ui-sans-serif, system-ui, -apple-system,
-  "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-  "Noto Color Emoji", sans-serif;
+*,
+*::before,
+*::after,
+::backdrop,
+::file-selector-button {
+  border-color: var(--color-border);
+}
 
-  /* Palette (kept for compatibility with existing variables) */
-  --blue-50: #eff6ff;
-  --blue-100: #dbeafe;
-  --blue-200: #bfdbfe;
-  --blue-300: #93c5fd;
-  --blue-400: #60a5fa;
-  --blue-500: #3b82f6;
-  --blue-600: #2563eb;
-  --blue-700: #1d4ed8;
-  --blue-800: #1e40af;
-  --blue-900: #1e3a8a;
-  --blue-999: #172554;
-  --blue-link: var(--blue-700);
+/* ============================================================
+   Typography
+   ============================================================ */
 
-  --green-50: #f0fdf4;
-  --green-100: #dcfce7;
-  --green-200: #bbf7d0;
-  --green-300: #86efac;
-  --green-400: #4ade80;
-  --green-500: #22c55e;
-  --green-600: #16a34a;
-  --green-700: #15803d;
-  --green-800: #166534;
-  --green-900: #14532d;
-  --green-999: #052e16;
+/* Headings — shared family/weight/color/spacing; individual rules set size + margins. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--color-primary-strong);
+  font-family: var(--font-sans);
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.018em;
+  line-height: 1.2;
+  margin-bottom: 0.75rem;
+  scroll-margin-top: 3.5rem;
+  break-inside: avoid;
+}
+h1 {
+  font-size: 1.75rem;
+  margin-top: 3rem;
+}
+h2 {
+  font-size: 1.375rem;
+  margin-top: 2.75rem;
+}
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1.125rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
 
-  --grey-50: #f9fafb;
-  --grey-100: #f3f4f6;
-  --grey-200: #e5e7eb;
-  --grey-300: #d1d5db;
-  --grey-400: #9ca3af;
-  --grey-500: #6b7280;
-  --grey-600: #4b5563;
-  --grey-700: #374151;
-  --grey-800: #1f2937;
-  --grey-900: #111827;
-  --grey-999: #030712;
+/* Block flow */
+p,
+ul,
+ol {
+  margin-block-end: 1.5rem;
+  margin-block-start: 0;
+}
 
-  --red-50: #fef2f2;
-  --red-100: #fee2e2;
-  --red-200: #fecaca;
-  --red-300: #fca5a5;
-  --red-400: #f87171;
-  --red-500: #ef4444;
-  --red-600: #dc2626;
-  --red-700: #b91c1c;
-  --red-800: #991b1b;
-  --red-900: #7f1d1d;
-  --red-999: #450a0a;
+/* Lists */
+ul {
+  list-style: disc;
+  padding-inline-start: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+ol {
+  list-style: decimal;
+  padding-inline-start: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+ul ul {
+  list-style: circle;
+}
+ul ul ul {
+  list-style: square;
+}
+ol ol {
+  list-style: lower-alpha;
+}
+ol ol ol {
+  list-style: lower-roman;
+}
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+  margin-top: 0.5rem;
+  margin-block-end: 0;
+}
+li {
+  list-style: inherit;
+  text-align: -webkit-match-parent;
+}
+li::marker {
+  color: var(--color-primary-strong);
+}
 
-  --yellow-50: #fefce8;
-  --yellow-100: #fef9c3;
-  --yellow-200: #fef08a;
-  --yellow-300: #fde047;
-  --yellow-400: #facc15;
-  --yellow-500: #eab308;
-  --yellow-600: #ca8a04;
-  --yellow-700: #a16207;
-  --yellow-800: #854d0e;
-  --yellow-900: #713f12;
-  --yellow-999: #422006;
+/* Links */
+a {
+  color: var(--color-body);
+  text-decoration: underline;
+  text-underline-offset: 6px;
+  transition: color 0.15s;
+}
+a:hover {
+  color: var(--color-primary-strong);
+}
 
-  /* Aliases for previous Tailwind-like tokens */
-  --primary: var(--blue-700);
-  --base-200: var(--grey-200);
-  --base-300: var(--grey-300);
-  --base-content-muted: var(--grey-600);
-  --base-heading: var(--grey-900);
+/* Inline formatting */
+strong {
+  color: var(--color-primary-strong);
+  font-weight: 600;
+}
+del {
+  color: var(--color-muted);
 }
 
-.chart-footer {
-  display: none !important;
+/* Code */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-code-bg);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+}
+form code {
+  font-size: unset;
 }
 
-/* Global */
-html {
-  scroll-behavior: smooth;
+pre {
+  background: var(--color-code-bg);
+  border: 1px solid var(--color-border-strong);
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
+  padding: 1.25rem 1.75rem;
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+  font-size: 0.75rem;
+}
+pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.75rem;
+  color: var(--color-code-text);
+  white-space: pre-wrap;
 }
 
-body {
-  display: flex;
-  margin: 0;
-  min-height: 100vh;
-  font-family: "Inter", var(--ui-font-family);
-  line-height: 1.7;
-  color: var(--base-heading);
+/* Blockquote */
+blockquote {
+  border-left: 3px solid var(--color-border-strong);
+  padding-left: 1.25rem;
+  margin-bottom: 1.5rem;
+  color: var(--color-tertiary);
+}
+blockquote > :first-child {
+  margin-top: 0;
+}
+blockquote > :last-child {
+  margin-bottom: 0;
 }
 
-nav {
-  width: 200px;
-  flex-shrink: 0;
-  padding: 32px 0 16px 0px;
-  border-right: 1px solid var(--base-200);
+/* Horizontal rule */
+hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2.5rem 0;
 }
 
-main {
-  flex: 1;
-  min-width: 0;
-  padding: 20px 48px 80px;
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+  font-family: var(--font-ui);
+  font-size: 0.9375rem;
+}
+th {
+  color: var(--color-primary-strong);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.625rem 1rem;
+  border-bottom: 2px solid var(--color-border-strong);
+}
+td {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
-/* Default border color */
-*, *::before, *::after, ::backdrop, ::file-selector-button {
-  border-color: var(--base-300);
+/* ============================================================
+   Form resets
+   ============================================================ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+select {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
 }
 
+/* ============================================================
+   Utilities
+   ============================================================ */
+
 /* OSX-style scrollbars */
 .pretty-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: var(--base-300) transparent;
+  scrollbar-color: #d1d5db transparent;
 }
 .pretty-scrollbar::-webkit-scrollbar {
   height: 6px;
@@ -155,34 +280,28 @@ main {
   border-radius: 7px;
 }
 .pretty-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: var(--base-200);
+  background-color: #e5e7eb;
 }
 
 /* Hidden scrollbar */
-.no-scrollbar::-webkit-scrollbar { display: none; }
-.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-
-.chart {
-  margin: 1rem 0;
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
 }
-
-/* Remove UA styles for select */
-select {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
-/* Markdown content */
- .markdown {
-  font-family: "Inter", var(--ui-font-family);
-  font-size: 1rem;
-  line-height: 1.7;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* ============================================================
+   Prose container (rendered markdown)
+   ============================================================ */
+.pageContent {
+  font-family: var(--font-prose);
+  letter-spacing: -0.01em;
 }
 
-img {
+/* Embedded images in rendered markdown */
+.pageContent img {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -191,171 +310,16 @@ img {
   border-radius: 0.5rem;
 }
 
-article a {
-  color: var(--primary);
-  text-decoration: underline;
-  text-decoration-color: transparent;
-  transition: color 200ms ease, text-decoration-color 200ms ease;
-}
-article a:hover {
-  text-decoration-color: var(--primary);
-}
-
-p,
-ul,
-ol {
-  margin-block-end: 1.2em;
-  margin-block-start: 0;
-  line-height: 1.7;
-}
-
-/* Lists */
-ol { list-style: decimal; padding-inline-start: 1.5rem; }
-ul { list-style: disc; padding-inline-start: 1.5rem; }
-
-/* Second-level lists */
-ul ul { list-style: circle; }
-ol ol { list-style: lower-alpha; }
-
-/* Any second-level list spacing */
-ul ul,
-ul ol,
-ol ul,
-ol ol {
-  margin-top: 0.25rem;
-  margin-block-end: 0;
-}
-
-/* Third-level lists */
-ul ul ul { list-style: square; }
-ol ol ol { list-style: lower-roman; }
-
-li {
-  list-style: inherit;
-  text-align: -webkit-match-parent;
-}
-li + li { margin-top: 0.25rem; }
-
-/* Headings */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  scroll-margin-top: var(--header-height);
-  break-inside: avoid;
-  color: var(--base-heading);
-  font-family: "Inter", var(--ui-font-family);
-  font-optical-sizing: auto;
-  font-weight: 100;
-  font-style: normal;
-}
-
-/* h1.title:first-of-type,
-h1:first-of-type { margin-top: 0.25rem; margin-bottom: 0.5rem; } */
-
-h1.title,
-h1 {
-  margin-top: 2rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: 0.025em;
-  font-weight: 700;
-  break-inside: avoid;
-}
-
-h2 {
-  margin-top: 1.5rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 600;
-}
-
-h3 {
-  margin-top: 1.25rem;
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 600;
+.pageContent .chart {
+  margin: 1rem 0 2rem;
 }
 
-h4 { margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
-h5 { margin-top: 1rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
-h6 { margin-top: 1rem; font-size: 0.75rem; line-height: 1rem; }
-
-hr {
-  height: 1px;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  max-width: 36rem;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: var(--base-300);
-  border: 0;
+/* Viz/UI components render as direct div children — default bottom margin for dashboard flow */
+.pageContent > div {
+  margin-bottom: 1.5rem;
 }
 
-code {
-  font-family: var(--monospace-font-family);
-  font-size: 0.875em;
-  background-color: var(--base-200);
-  border: 1px solid var(--base-300);
-  border-radius: 0.125rem;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+/* Extra breathing room when prose follows a viz */
+.pageContent > div + :is(p, ul, ol, blockquote, hr, table, pre) {
+  margin-top: 1rem;
 }
-
-form code { font-size: unset; }
-
-blockquote {
-  background-color: var(--base-200);
-  border-left: 4px solid var(--base-content-muted);
-  padding-left: 0.75rem;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-blockquote > blockquote { margin: 0; }
-blockquote > :first-child { margin-top: 0; }
-blockquote > :last-child { margin-bottom: 0; }
-blockquote * { color: var(--base-content-muted); }
-
-/* Ensure size and color are maintained for bold, italic, strikethrough, links inside markdown */
-strong, em, del, a { font-size: 1em; color: inherit; }
-
-/*table {
-  min-width: 100%;
-  border-collapse: collapse;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-th {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  border-bottom: 1px solid var(--grey-800);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-td {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}*/