@graphenedata/cli 0.0.15 → 0.0.17

package/dist/ui/app.css

@@ -1,426 +1,325 @@
-@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;
-}
-
-@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;
-}
+@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';
 
 :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;
-
-  /* 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);
-
-  --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;
-
-  --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;
-
-  --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;
-
-  --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;
-
-  /* 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);
-}
-
-.chart-footer {
-  display: none !important;
-}
-
-/* Global */
+  --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;
 }
 
 body {
-  display: flex;
   margin: 0;
   min-height: 100vh;
-  font-family: 'Inter', var(--ui-font-family);
+  font-family: var(--font-ui);
   font-synthesis: none;
-  line-height: 1.7;
-  color: var(--base-heading);
-}
-
-nav {
-  width: 200px;
-  flex-shrink: 0;
-  padding: 32px 0 16px 0px;
-  border-right: 1px solid var(--base-200);
-}
-
-main {
-  flex: 1;
-  min-width: 0;
-  padding: 20px 48px 80px;
+  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;
 }
 
-/* Default border color */
 *,
 *::before,
 *::after,
 ::backdrop,
 ::file-selector-button {
-  border-color: var(--base-300);
-}
-
-/* OSX-style scrollbars */
-.pretty-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: var(--base-300) transparent;
-}
-.pretty-scrollbar::-webkit-scrollbar {
-  height: 6px;
-  width: 6px;
-}
-.pretty-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-.pretty-scrollbar::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 7px;
-}
-.pretty-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: var(--base-200);
+  border-color: var(--color-border);
 }
 
-/* Hidden scrollbar */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.chart {
-  margin: 1rem 0;
-}
+/* ============================================================
+   Typography
+   ============================================================ */
 
-/* Remove UA styles for select */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  color: inherit;
-}
-
-select {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: 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;
+/* 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;
 }
-
-img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  height: auto;
-  max-width: 100%;
-  border-radius: 0.5rem;
+h1 {
+  font-size: 1.75rem;
+  margin-top: 3rem;
 }
-
-article a {
-  color: var(--primary);
-  text-decoration: underline;
-  text-decoration-color: transparent;
-  transition:
-    color 200ms ease,
-    text-decoration-color 200ms ease;
+h2 {
+  font-size: 1.375rem;
+  margin-top: 2.75rem;
 }
-article a:hover {
-  text-decoration-color: var(--primary);
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1.125rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
 }
 
+/* Block flow */
 p,
 ul,
 ol {
-  margin-block-end: 1.2em;
+  margin-block-end: 1.5rem;
   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;
+  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;
 }
-
-/* Second-level lists */
 ul ul {
   list-style: circle;
 }
+ul ul ul {
+  list-style: square;
+}
 ol ol {
   list-style: lower-alpha;
 }
-
-/* Any second-level list spacing */
+ol ol ol {
+  list-style: lower-roman;
+}
 ul ul,
 ul ol,
 ol ul,
 ol ol {
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   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;
+li::marker {
+  color: var(--color-primary-strong);
 }
 
-/* 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;
+/* Links */
+a {
+  color: var(--color-body);
+  text-decoration: underline;
+  text-underline-offset: 6px;
+  transition: color 0.15s;
 }
-
-/* 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;
+a:hover {
+  color: var(--color-primary-strong);
 }
 
-h2 {
-  margin-top: 1.5rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+/* Inline formatting */
+strong {
+  color: var(--color-primary-strong);
   font-weight: 600;
 }
-
-h3 {
-  margin-top: 1.25rem;
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 600;
+del {
+  color: var(--color-muted);
 }
 
-h4 {
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
+/* Code */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-code-bg);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
 }
-h5 {
-  margin-top: 1rem;
+form code {
+  font-size: unset;
+}
+
+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;
-  line-height: 1rem;
-  font-weight: 600;
 }
-h6 {
-  margin-top: 1rem;
+pre code {
+  background: none;
+  padding: 0;
   font-size: 0.75rem;
-  line-height: 1rem;
+  color: var(--color-code-text);
+  white-space: pre-wrap;
 }
 
+/* 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;
+}
+
+/* Horizontal rule */
 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;
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2.5rem 0;
 }
 
-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;
+/* 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);
 }
 
-form code {
-  font-size: unset;
+/* ============================================================
+   Form resets
+   ============================================================ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+select {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
 }
 
-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;
+/* ============================================================
+   Utilities
+   ============================================================ */
+
+/* OSX-style scrollbars */
+.pretty-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d5db transparent;
 }
-blockquote > blockquote {
-  margin: 0;
+.pretty-scrollbar::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
 }
-blockquote > :first-child {
-  margin-top: 0;
+.pretty-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
 }
-blockquote > :last-child {
-  margin-bottom: 0;
+.pretty-scrollbar::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 7px;
 }
-blockquote * {
-  color: var(--base-content-muted);
+.pretty-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb;
 }
 
-/* Ensure size and color are maintained for bold, italic, strikethrough, links inside markdown */
-strong,
-em,
-del,
-a {
-  font-size: 1em;
-  color: inherit;
+/* Hidden scrollbar */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
-/*table {
-  min-width: 100%;
-  border-collapse: collapse;
-  text-align: center;
+/* ============================================================
+   Prose container (rendered markdown)
+   ============================================================ */
+.pageContent {
+  font-family: var(--font-prose);
+  letter-spacing: -0.01em;
+}
+
+/* Embedded images in rendered markdown */
+.pageContent img {
+  display: block;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+  height: auto;
+  max-width: 100%;
+  border-radius: 0.5rem;
 }
-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;
+
+.pageContent .chart {
+  margin: 1rem 0 2rem;
+}
+
+/* Viz/UI components render as direct div children — default bottom margin for dashboard flow */
+.pageContent > div {
+  margin-bottom: 1.5rem;
+}
+
+/* Extra breathing room when prose follows a viz */
+.pageContent > div + :is(p, ul, ol, blockquote, hr, table, pre) {
+  margin-top: 1rem;
 }
-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;
-}*/