@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/internal/LocalApp.svelte

@@ -1,40 +1,108 @@
-<script>
-  import {errorProvider} from './telemetry.ts'
+<script lang="ts">
+  import {onDestroy, onMount, tick} from 'svelte'
+  import {setErrorFor} from './telemetry.ts'
+  import {PageInputs, activatePageInputs, releasePageInputs, setPageInputsContext} from './pageInputs.svelte.js'
   import navFiles from 'virtual:nav'
-  import NavSidebar from './NavSidebar.svelte'
-  import PageError from './PageError.svelte'
+  import Sidebar from './Sidebar.svelte'
+  import SidebarToggle from './SidebarToggle.svelte'
+  import PageNavGroup from './PageNavGroup.svelte'
+  import ErrorDisplay from './ErrorDisplay.svelte'
+  import ChartGallery from './ChartGallery.svelte'
+  import StyleGallery from './StyleGallery.svelte'
+  import {type GrapheneError} from '../../lang/index.js'
+
+  let pageInputs = activatePageInputs(new PageInputs())
+  setPageInputsContext(pageInputs)
+  onDestroy(() => releasePageInputs(pageInputs))
 
   // Nav sidebar with HMR support for the virtual file list
   let navData = $state(navFiles)
   import.meta.hot?.accept('virtual:nav', mod => navData = mod.default)
 
   // Track compile errors from both initial load and subsequent HMR failures.
-  // Uses errorProvider so `check` can report compilation errors.
-  let compileError = $state(null)
-  errorProvider('compile', () => compileError ? [compileError] : [])
+  let compileError = $state<GrapheneError | null>(null)
   import.meta.hot?.on('vite:error', (payload) => {
-    compileError = payload.err
-    compileError.type = 'compile'
-    compileError.file = payload.err.id
+    let line = Math.max(0, (payload.err.loc?.line || 1) - 1)
+    let col = Math.max(0, payload.err.loc?.column || 0)
+    let path = String(payload.err.id || '').replace(/^file:\/\//, '').replace(/\\/g, '/').replace(/^\/+/, '')
+    let message = String(payload.err.message || '').replace(/^.*?:\d+:\d+\s*/, '').replace(/\s*https:\/\/svelte\.dev\/\S+/g, '').trim()
+    compileError = {
+      message,
+      frame: payload.err.frame,
+      file: path,
+      from: {line, col, offset: 0},
+      to: {line, col: col + 1, offset: 0},
+    }
+    setErrorFor('compile', compileError)
     Page = null
   })
 
   // The md file is dynamically imported, so even if there's a compile error, we'll still load LocalApp and can show the user the issue
-  let Page = $state(null)
-  let pathName = window.location.pathname.replace(/^\//, '') || 'index'
-  if (pathName !== '__ct') {
-    import(/* @vite-ignore */ '/' + pathName + '.md').then(mod => {
+  let Page = $state<any>(null)
+  let pageMeta = $state<any>({})
+  let pageReadyResolve: (() => void) | undefined
+  window.$GRAPHENE.pageReady = new Promise<void>(resolve => pageReadyResolve = resolve)
+
+  onMount(async () => {
+    let pathName = window.location.pathname.replace(/^\//, '') || 'index'
+
+    // force fonts to load before we mount the component.
+    // This is important for echarts, as it measures text and if done with the wrong font, then
+    // a) when the right font loads, things will just slightly not line up with edges
+    // b) test snapshots will differ, as they measure with whatever the system sans font is
+    // c) screenshots taken by `graphene run` might have the wrong font
+    document.fonts.load("12px 'Source Sans 3'")
+    await document.fonts.ready
+
+    if (pathName == '_charts') {
+      Page = ChartGallery
+    } else if (pathName == '_styles') {
+      Page = StyleGallery
+    } else if (pathName !== '__ct') {
+      let mod = await import(/* @vite-ignore */ '/' + pathName + '.md')
       Page = mod.default
+      pageMeta = mod.metadata || {}
       compileError = null
-    }).catch(() => {})
-  }
+      setErrorFor('compile', null)
+    }
+    await tick()
+    pageReadyResolve?.()
+  })
 </script>
 
-<nav id="nav"><NavSidebar files={navData} /></nav>
-<main id="content">
+<SidebarToggle style='position:fixed;top:2rem;left:2rem;opacity:0.3;' />
+<Sidebar>
+  <PageNavGroup files={navData} />
+</Sidebar>
+
+<main id="content" class={{pageContent: !!Page, dashboardLayout: pageMeta.layout == 'dashboard'}}>
   {#if compileError}
-    <PageError error={compileError} />
+    <h1 class="page-error-heading">Error loading page</h1>
+    <ErrorDisplay error={compileError} />
   {:else if Page}
+    {#if pageMeta.title}
+      <h1>{pageMeta.title}</h1>
+    {/if}
     <Page />
   {/if}
 </main>
+
+<style>
+  main.pageContent {
+    margin: 0 auto;
+    min-width: 0;
+    padding: 20px 6rem 80px;
+    max-width: 720px;
+  }
+
+  main.pageContent.dashboardLayout {
+    max-width: 1200px;
+  }
+
+  .page-error-heading { margin-top: 0; }
+
+  /* want to control this margin so it lines up with the SidebarToggle */
+  main h1:first-child {
+    margin-top: 12px;
+  }
+</style>

package/dist/ui/internal/PageNavGroup.svelte

@@ -0,0 +1,269 @@
+<script>
+  import {SvelteSet, SvelteMap} from 'svelte/reactivity'
+
+  let {currentFile = '', files = [], onNavigate = undefined, baseRoute = ''} = $props()
+
+  let tree = $state([])
+  // eslint-disable-next-line svelte/no-unnecessary-state-wrap -- reassigned, needs $state
+  let openFolders = $state(new SvelteSet())
+  let treeSignature = $state('')
+  let lastCurrent = $state('')
+
+  let navFiles = $derived((files || []).map(normalizeNavFile))
+  let normalizedFiles = $derived(navFiles.map(f => f.path))
+  let titlesByPath = $derived(Object.fromEntries(navFiles.filter(f => !!f.title).map(f => [f.path, f.title])))
+
+  let normalizedCurrent = $derived(deriveCurrentFile(currentFile, normalizedFiles))
+  let currentRoute = $derived(normalizedCurrent ? pathToRoute(normalizedCurrent) : '/')
+
+  function deriveCurrentFile(_currentFile, _normalizedFiles) {
+    let fromProp = normalizeFilePath(_currentFile)
+    let route = getLocationRoute()
+    if (route && _normalizedFiles) {
+      let match = _normalizedFiles.find(f => pathToRoute(f) === route)
+      if (match) return match
+    }
+    return fromProp
+  }
+
+  function normalizeNavFile(file) {
+    if (!file || typeof file.path !== 'string') throw new Error('PageNavGroup files must be {path, title?} objects')
+    return {path: normalizeFilePath(file.path), title: file.title || undefined}
+  }
+
+  function normalizeFilePath(filePath) {
+    return (filePath || '').replace(/^\.\//, '').replace(/\\/g, '/').replace(/^\/+/, '')
+  }
+
+  function getLocationRoute() {
+    if (typeof window === 'undefined') return null
+    return (window.location.pathname || '/').replace(/\/+$/, '') || '/'
+  }
+
+  $effect(() => {
+    let nextSignature = navFiles.map(f => `${f.path}:${f.title || ''}`).join('|')
+    if (nextSignature !== treeSignature) {
+      treeSignature = nextSignature
+      tree = buildTree(normalizedFiles, titlesByPath)
+      openFolders = mergeAncestorFolders(new SvelteSet(), normalizedCurrent)
+    }
+  })
+
+  $effect(() => {
+    if (normalizedCurrent !== lastCurrent) {
+      openFolders = mergeAncestorFolders(openFolders, normalizedCurrent)
+      lastCurrent = normalizedCurrent
+    }
+  })
+
+  function toggleFolder(path) {
+    if (!path) return
+    let next = new SvelteSet(openFolders)
+    if (next.has(path)) next.delete(path)
+    else next.add(path)
+    openFolders = next
+  }
+
+  function buildTree(paths, titleLookup = {}) {
+    let root = []
+    let folderMap = new SvelteMap()
+
+    for (let filePath of paths) {
+      let segments = filePath.split('/')
+      if (!segments.length) continue
+      let fileName = segments.pop()
+      let parentChildren = root
+      let parentPath = ''
+
+      for (let segment of segments) {
+        parentPath = parentPath ? `${parentPath}/${segment}` : segment
+        if (!folderMap.has(parentPath)) {
+          let folderNode = {type: 'folder', name: segment, label: formatLabel(segment, 'folder'), path: parentPath, children: [], route: null}
+          folderMap.set(parentPath, folderNode)
+          parentChildren.push(folderNode)
+        }
+        parentChildren = folderMap.get(parentPath).children
+      }
+
+      if (!fileName) continue
+      let fullPath = parentPath ? `${parentPath}/${fileName}` : fileName
+
+      // An index.md becomes the folder's own route rather than a separate leaf.
+      if (fileName.toLowerCase() === 'index.md' && parentPath) {
+        let folderNode = folderMap.get(parentPath)
+        if (folderNode) {
+          folderNode.route = pathToRoute(fullPath)
+          if (titleLookup[fullPath]) folderNode.label = titleLookup[fullPath]
+        }
+        continue
+      }
+
+      if (parentChildren.find(n => n.path === fullPath)) continue
+      parentChildren.push({
+        type: 'file',
+        name: fileName,
+        label: formatLabel(fileName, 'file', titleLookup[fullPath]),
+        path: fullPath,
+        route: pathToRoute(fullPath),
+      })
+    }
+
+    return sortNodes(root)
+  }
+
+  function sortNodes(nodes) {
+    return nodes
+      .map(n => n.type === 'folder' && n.children?.length ? {...n, children: sortNodes(n.children)} : n)
+      .sort((a, b) => {
+        if (a.label === 'Home') return -1
+        if (b.label === 'Home') return 1
+        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1
+        return a.label.localeCompare(b.label)
+      })
+  }
+
+  function mergeAncestorFolders(openSet, filePath) {
+    let next = new SvelteSet(openSet)
+    if (!filePath) return next
+    let parts = filePath.split('/')
+    parts.pop()
+    let aggregate = []
+    for (let part of parts) {
+      aggregate.push(part)
+      next.add(aggregate.join('/'))
+    }
+    return next
+  }
+
+  function formatLabel(value, type, explicitTitle = undefined) {
+    if (explicitTitle) return explicitTitle
+    let cleaned = type === 'file' ? value.replace(/\.md$/, '') : value
+    if (cleaned.toLowerCase() === 'index') return 'Home'
+    return cleaned.split(/[\s_-]+/).filter(Boolean)
+      .map(c => c.charAt(0).toUpperCase() + c.slice(1)).join(' ')
+  }
+
+  function pathToRoute(path) {
+    let clean = path.replace(/\.md$/, '')
+    let prefix = baseRoute ? '/' + baseRoute : ''
+    if (!clean || clean === 'index') return prefix || '/'
+    return prefix + '/' + clean
+  }
+
+  function handleLinkClick(event, href) {
+    if (!onNavigate) return
+    if (href.startsWith('http') || href.startsWith('//')) return
+    event.preventDefault()
+    onNavigate(href)
+  }
+</script>
+
+<div class="sb-group">
+  <ul class="sb-menu">
+    {#each tree as node (node.path)}
+      {@render Row(node)}
+    {/each}
+  </ul>
+</div>
+
+{#snippet Chevron(open)}
+  <svg
+    class={open ? 'sb-chevron open' : 'sb-chevron'}
+    viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    aria-hidden="true"
+  ><path d="m9 18 6-6-6-6"/></svg>
+{/snippet}
+
+{#snippet ChevronSpacer()}
+  <svg class="sb-chevron" viewBox="0 0 24 24" aria-hidden="true"></svg>
+{/snippet}
+
+{#snippet ChevronToggle(node, open)}
+  <!-- role='button' inside the anchor so we don't nest <button> in <a> (invalid HTML). -->
+  <span
+    class="chev-toggle"
+    role="button"
+    tabindex="0"
+    data-folder-toggle={node.path}
+    aria-expanded={open}
+    aria-label={(open ? 'Collapse ' : 'Expand ') + node.label}
+    onclick={(e) => { e.preventDefault(); e.stopPropagation(); toggleFolder(node.path) }}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); toggleFolder(node.path) } }}
+  >
+    {@render Chevron(open)}
+  </span>
+{/snippet}
+
+{#snippet Row(node)}
+  <li data-folder={node.type === 'folder' ? node.path : undefined}>
+    {#if node.type === 'folder'}
+      {@const open = openFolders.has(node.path)}
+      {#if node.route}
+        <!-- Folder that also has an index.md: chevron toggles, label navigates. -->
+        <a
+          class={node.route === currentRoute ? 'sb-item active' : 'sb-item'}
+          href={node.route}
+          title={node.label}
+          aria-current={node.route === currentRoute ? 'page' : undefined}
+          onclick={(e) => handleLinkClick(e, node.route)}
+        >
+          {@render ChevronToggle(node, open)}
+          <span class="sb-label">{node.label}</span>
+        </a>
+      {:else}
+        <button
+          class="sb-item"
+          type="button"
+          title={node.label}
+          data-folder-toggle={node.path}
+          aria-expanded={open}
+          onclick={() => toggleFolder(node.path)}
+        >
+          {@render Chevron(open)}
+          <span class="sb-label">{node.label}</span>
+        </button>
+      {/if}
+      {#if open && node.children?.length}
+        <ul class="sb-sub">
+          {#each node.children as child (child.path)}
+            {@render Row(child)}
+          {/each}
+        </ul>
+      {/if}
+    {:else}
+      <a
+        class={node.path === normalizedCurrent ? 'sb-item active' : 'sb-item'}
+        href={node.route}
+        title={node.label}
+        aria-current={node.path === normalizedCurrent ? 'page' : undefined}
+        onclick={(e) => handleLinkClick(e, node.route)}
+      >
+        <!-- Invisible chevron spacer so file labels align with folder labels. -->
+        {@render ChevronSpacer()}
+        <span class="sb-label">{node.label}</span>
+      </a>
+    {/if}
+  </li>
+{/snippet}
+
+<style>
+  /* Clickable chevron inside a folder-with-route link. Stops propagation so
+     clicking here toggles the folder instead of navigating. */
+  .chev-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: -0.25rem -0.25rem -0.25rem -0.25rem;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .chev-toggle:hover :global(.sb-chevron) { color: var(--sidebar-foreground, #252525); }
+  .chev-toggle:focus-visible {
+    outline: 2px solid var(--sidebar-ring, #b5b5b5);
+    outline-offset: 1px;
+  }
+
+</style>

package/dist/ui/internal/Sidebar.svelte

@@ -0,0 +1,178 @@
+<script>
+  // Content-agnostic sidebar shell. The panel slides in as an overlay when the
+  // user hovers the paired SidebarToggle button (rendered separately by the host)
+  // or the panel itself. Styling values are ported from shadcn-svelte's sidebar registry.
+  import {sidebar} from './sidebar.svelte.js'
+  let {children, width = '16rem'} = $props()
+</script>
+
+<nav
+  id="nav"
+  class="sb-panel pretty-scrollbar"
+  style="--sb-w:{width}"
+  data-open={sidebar.open}
+  onmouseenter={sidebar.enter}
+  onmouseleave={sidebar.leave}
+>
+  <div class="sb-inner">
+    {@render children?.()}
+  </div>
+</nav>
+
+<style>
+  .sb-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 40;
+    height: 100vh;
+    width: var(--sb-w);
+    background: var(--sidebar);
+    color: var(--sidebar-foreground);
+    border-right: 1px solid var(--sidebar-border);
+    transform: translateX(-102%);
+    transition: transform 200ms ease;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* Prevent rubber-band over-scroll from revealing content behind the panel. */
+    overscroll-behavior: none;
+    pointer-events: none;
+  }
+  .sb-panel[data-open='true'] {
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+
+  .sb-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    margin-top: 24px;
+    font-family: var(--ui-font-family);
+  }
+
+  /* ============================================================
+     Styling primitives scoped to the panel so content can use
+     them as plain CSS classes. Ported from shadcn-svelte.
+     ============================================================ */
+
+  /* Group: `p-2`. Items fill the width inside this padding, with `rounded-md`,
+     matching shadcn exactly. */
+  .sb-panel :global(.sb-group) {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    min-width: 0;
+  }
+
+  /* Group label: `h-8 px-2 text-xs font-medium` at 70% foreground */
+  .sb-panel :global(.sb-group-label) {
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--sidebar-foreground);
+    opacity: 0.7;
+    border-radius: 0.375rem;
+  }
+
+  /* Menu (ul): `flex flex-col gap-1 w-full min-w-0`.
+     Reset app.css's global <ul> list styling (list-disc, padding-inline-start). */
+  .sb-panel :global(.sb-menu),
+  .sb-panel :global(.sb-sub) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  /* Only the top-level menu fills its group; sub-menus let their width be
+     derived from `margin` + parent width, otherwise `width: 100%` + margin
+     overflows the parent and breaks child ellipsis clipping. */
+  .sb-panel :global(.sb-menu) { width: 100%; }
+  .sb-panel :global(.sb-menu li),
+  .sb-panel :global(.sb-sub li) {
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    min-width: 0;
+  }
+  .sb-panel :global(.sb-menu li + li),
+  .sb-panel :global(.sb-sub li + li) { margin-top: 0; }
+
+  /* Sub menu: indented under its parent. Shadcn uses a `border-s` guide line
+     here, but that only reads well when items have leading icons. Without
+     icons, the line floats in empty space, so we drop it (and the paired
+     translate-x-px trick that existed to cover it). */
+  .sb-panel :global(.sb-sub) {
+    margin: 0 0.875rem;
+    padding: 0.125rem 0.625rem;
+    gap: 0.25rem;
+  }
+
+  /* Menu item: `flex h-8 w-full items-center gap-2 rounded-md p-2 text-sm`,
+     hover/active → `bg-sidebar-accent text-sidebar-accent-foreground`,
+     active → `font-medium`, focus-visible → `ring-2`. */
+  .sb-panel :global(.sb-item) {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--sidebar-foreground);
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .sb-panel :global(.sb-item:hover) {
+    background: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+    text-decoration: none;
+  }
+  .sb-panel :global(.sb-item.active) {
+    background: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+    font-weight: 500;
+  }
+  .sb-panel :global(.sb-item:focus-visible) {
+    outline: 2px solid var(--sidebar-ring);
+    outline-offset: -2px;
+  }
+
+  /* Sub-button variant: slightly shorter (h-7 vs h-8), per shadcn. */
+  .sb-panel :global(.sb-sub .sb-item) {
+    height: 1.75rem;
+  }
+
+  .sb-panel :global(.sb-item .sb-label) {
+    flex: 1;
+    min-width: 0; /* allow the flex child to shrink below its intrinsic size */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Chevron: 1rem Lucide SVG with 200ms rotate transition. */
+  .sb-panel :global(.sb-chevron) {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    color: var(--sidebar-foreground);
+    opacity: 0.6;
+    transition: transform 200ms ease;
+  }
+  .sb-panel :global(.sb-chevron.open) { transform: rotate(90deg); }
+</style>

package/dist/ui/internal/SidebarToggle.svelte

@@ -0,0 +1,47 @@
+<script>
+  // Hamburger button that opens the paired <Sidebar>. Positioning is up to the
+  // host (typically fixed in a corner); hover state is shared via context so
+  // moving between the button and the panel keeps the sidebar open.
+  import {sidebar} from './sidebar.svelte.js'
+  let {style} = $props()
+</script>
+
+<button
+  class="sb-trigger"
+  type="button"
+  aria-label="Toggle navigation"
+  aria-expanded={sidebar.open}
+  onmouseenter={sidebar.enter}
+  onmouseleave={sidebar.leave}
+  onfocus={sidebar.enter}
+  onblur={sidebar.leave}
+  style={style}
+>
+  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M4 6h16M4 12h16M4 18h16"/>
+  </svg>
+</button>
+
+<style>
+  .sb-trigger {
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sidebar-foreground);
+    background: transparent;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 120ms ease, background-color 120ms ease;
+    z-index: 39;
+  }
+  .sb-trigger:hover { opacity: 1; background: var(--sidebar-accent); }
+  .sb-trigger:focus-visible {
+    opacity: 1;
+    outline: 2px solid var(--sidebar-ring);
+    outline-offset: 2px;
+  }
+</style>