@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/internal/StyleGallery.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+
+  let styleVars = [
+    '--font-prose',
+    '--font-sans',
+    '--font-ui',
+    '--font-mono',
+    '--color-bg',
+    '--color-primary-strong',
+    '--color-body',
+    '--color-muted',
+    '--color-tertiary',
+    '--color-border',
+    '--color-border-strong',
+    '--color-code-bg',
+  ]
+
+  let styleRows = $state([] as Array<{name: string, value: string}>)
+
+  let sampleNodes = {} as Record<string, HTMLElement>
+
+  let readCssVar = (name: string) => getComputedStyle(document.documentElement).getPropertyValue(name).trim() || '(empty)'
+
+  let refreshRows = () => {
+    styleRows = styleVars.map(name => ({name, value: readCssVar(name)}))
+  }
+
+  let registerSample = (node: HTMLElement) => {
+    let key = node.dataset.styleDemo
+    if (!key) return
+
+    sampleNodes[key] = node
+    refreshRows()
+
+    return {
+      destroy: () => {
+        delete sampleNodes[key]
+      },
+    }
+  }
+
+  onMount(() => {
+    refreshRows()
+
+    let cssObserver = new MutationObserver(() => refreshRows())
+    cssObserver.observe(document.head, {childList: true, subtree: true, attributes: true})
+
+    let frame = requestAnimationFrame(() => refreshRows())
+    window.addEventListener('resize', refreshRows)
+
+    return () => {
+      cssObserver.disconnect()
+      cancelAnimationFrame(frame)
+      window.removeEventListener('resize', refreshRows)
+    }
+  })
+</script>
+
+<div class="style-demo">
+  <h1 class="style-demo-title">Style Demo</h1>
+
+  <section class="sample-panel">
+    <p>This is a regular paragraph at the top of the post. It has a couple sentences to give it some body. The quick brown fox jumps over the lazy dog.</p>
+
+    <h1 data-style-demo="h1" use:registerSample>Heading 1</h1>
+    <p>This is text after an h1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+    <h2 data-style-demo="h2" use:registerSample>Heading 2</h2>
+    <p>This is text after an h2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+    <h3 data-style-demo="h3" use:registerSample>Heading 3</h3>
+    <p>This is text after an h3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+
+    <h2>Paragraph spacing</h2>
+    <p>Here is the first paragraph. It should have visible space below it before the next paragraph starts.</p>
+    <p>Here is the second paragraph. There should be a clear gap between this and the paragraph above. If the spacing is working correctly, you'll see breathing room between each block.</p>
+    <p>Here is a third paragraph to make it obvious.</p>
+
+    <h2>Unordered list</h2>
+    <ul>
+      <li>First item in the list</li>
+      <li>Second item with <strong>bold text</strong> inside it</li>
+      <li>Third item with <em>italic text</em> inside it</li>
+      <li>Fourth item that is a bit longer to see how it wraps across multiple lines on smaller viewports</li>
+      <li>Fifth and final item</li>
+    </ul>
+
+    <h2>Ordered list</h2>
+    <ol>
+      <li>Step one: install dependencies</li>
+      <li>Step two: configure your environment</li>
+      <li>Step three: run the dev server</li>
+      <li>Step four: open your browser at localhost</li>
+      <li>Step five: profit</li>
+    </ol>
+
+    <h2>Nested lists</h2>
+    <ul>
+      <li>Top level item A
+        <ul>
+          <li>Nested item A1</li>
+          <li>Nested item A2
+            <ul>
+              <li>Doubly nested A2a</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li>Top level item B
+        <ul>
+          <li>Nested item B1</li>
+        </ul>
+      </li>
+      <li>Top level item C</li>
+    </ul>
+
+    <h2>Inline formatting</h2>
+    <p data-style-demo="body" use:registerSample>
+      This paragraph has <strong>bold text</strong>, <em>italic text</em>, <del>strikethrough text</del>, and <code data-style-demo="code" use:registerSample>inline code</code>. It also has a <a data-style-demo="link" use:registerSample href="/index">link to the about page</a> to test link styling.
+    </p>
+    <p>You can also combine: <strong><em>bold and italic</em></strong> together.</p>
+
+    <h2>Blockquote</h2>
+    <blockquote data-style-demo="blockquote" use:registerSample>
+      This is a blockquote. It should have a left border and be visually distinct from regular paragraph text. It might span multiple lines to show how longer quotes are handled.
+    </blockquote>
+    <blockquote>Another blockquote with <strong>bold</strong> and <em>italic</em> inside it.</blockquote>
+
+    <h2>Horizontal rule</h2>
+    <p>Above the rule.</p>
+    <hr />
+    <p>Below the rule.</p>
+
+    <h2>Table</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Role</th>
+          <th>Location</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>Kevin Marr</td><td>Co-Founder &amp; CEO</td><td>San Francisco</td></tr>
+        <tr><td>Grant Marvin</td><td>Co-Founder &amp; CTO</td><td>San Francisco</td></tr>
+        <tr><td>Dylan Scott</td><td>Founding Engineer</td><td>San Francisco</td></tr>
+      </tbody>
+    </table>
+    <p>A table with alignment:</p>
+    <table>
+      <thead>
+        <tr>
+          <th style="text-align:left">Metric</th>
+          <th style="text-align:right">Q1</th>
+          <th style="text-align:right">Q2</th>
+          <th style="text-align:right">Q3</th>
+          <th style="text-align:right">Change</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td style="text-align:left">Revenue</td>
+          <td style="text-align:right">$1.2M</td>
+          <td style="text-align:right">$1.8M</td>
+          <td style="text-align:right">$2.4M</td>
+          <td style="text-align:right">+33%</td>
+        </tr>
+        <tr>
+          <td style="text-align:left">Active users</td>
+          <td style="text-align:right">4,200</td>
+          <td style="text-align:right">6,100</td>
+          <td style="text-align:right">8,800</td>
+          <td style="text-align:right">+44%</td>
+        </tr>
+        <tr>
+          <td style="text-align:left">Queries / day</td>
+          <td style="text-align:right">12,000</td>
+          <td style="text-align:right">19,500</td>
+          <td style="text-align:right">31,000</td>
+          <td style="text-align:right">+59%</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h2>Mixed content</h2>
+    <p>Here's a paragraph followed by a list:</p>
+    <p>There are three reasons analytics should live in your repo:</p>
+    <ol>
+      <li><strong>Drift prevention.</strong> When your semantic model is versioned alongside your dbt code, column renames and schema changes surface as type errors immediately.</li>
+      <li><strong>Code review.</strong> Changes to metrics and dashboards go through PRs just like application code — with diffs, comments, and history.</li>
+      <li><strong>Agent compatibility.</strong> AI coding agents work in your repo. If your analytics layer is a GUI, agents are locked out.</li>
+    </ol>
+    <p>And then back to regular prose after the list.</p>
+
+    <h2>Final paragraph</h2>
+    <p>This is the last paragraph of the post. Everything above should be styled consistently and match the overall site aesthetic — using the same font, color tokens, and spacing as the rest of graphenedata.com.</p>
+  </section>
+
+  <h2>Style variables</h2>
+  <table class="token-table">
+    <thead>
+      <tr>
+        <th>Variable</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each styleRows as row (row.name)}
+        <tr>
+          <td><code>{row.name}</code></td>
+          <td><code>{row.value}</code></td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .style-demo {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+.sample-panel {
+    margin-bottom: 1.25rem;
+  }
+
+  .token-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1.25rem;
+    table-layout: fixed;
+  }
+
+  .token-table th,
+  .token-table td {
+    border: 1px solid var(--color-border);
+    text-align: left;
+    padding: 8px 10px;
+    vertical-align: top;
+    overflow-wrap: anywhere;
+  }
+</style>

package/dist/ui/internal/clientCache.ts

@@ -5,32 +5,34 @@
 const TTL_MS = 1000 * 60 * 60 * 2
 
 let cache: Cache | null = null
-async function getCache () {
+async function getCache() {
   cache ||= await caches.open('graphene-data')
   return cache
 }
 
-export async function getHashes () {
+export async function getHashes(): Promise<string[]> {
   let store = await getCache()
   let keys = await store.keys()
-  return keys.map(k => {
-    let url = new URL(k.url)
-    let expires = Number(url.searchParams.get('expires') || 0)
-    if (expires < Date.now()) {
-      store.delete(k)
-      return null
-    }
-    return url.pathname.replace(/^\//, '')
-  }).filter(h => !!h)
+  return keys
+    .map(k => {
+      let url = new URL(k.url)
+      let expires = Number(url.searchParams.get('expires') || 0)
+      if (expires < Date.now()) {
+        store.delete(k)
+        return null
+      }
+      return url.pathname.replace(/^\//, '')
+    })
+    .filter(Boolean) as string[]
 }
 
-export async function cacheRead (hash: string): Promise<any | null> {
+export async function cacheRead(hash: string): Promise<any | null> {
   let store = await getCache()
   let resp = await store.match(`https://graphene-cache/${hash}`, {ignoreSearch: true})
   return await resp?.clone().json()
 }
 
-export async function cacheWrite (hash: string, response:Response) {
+export async function cacheWrite(hash: string, response: Response) {
   if (!hash) return
   let store = await getCache()
 

package/dist/ui/internal/pageInputs.svelte.js

@@ -0,0 +1,292 @@
+import { createContext } from "svelte";
+class BoundField {
+  constructor(controller, name, codec) {
+    this.controller = controller;
+    this.name = name;
+    this.codec = codec;
+    this.value = $state(codec.empty());
+    this.hasExternalValue = $state(false);
+    this.controller.registerField(this);
+    this.sync(this.controller.getParams(), "init");
+  }
+  value;
+  hasExternalValue;
+  keys() {
+    return this.codec.keys(this.name);
+  }
+  sync(params, source) {
+    let next = this.codec.read(params, this.name);
+    this.value = next.value;
+    if (source === "init") this.hasExternalValue = next.present;
+    else if (source === "external") this.hasExternalValue = true;
+  }
+  normalize(params) {
+    this.codec.normalize?.(params, this.name);
+  }
+  set(next) {
+    let nextParams = this.codec.write(this.name, next);
+    if (typeof window !== "undefined" && window.$GRAPHENE?.updateParams) window.$GRAPHENE.updateParams(nextParams);
+    else this.controller.updateParams(nextParams);
+  }
+  destroy() {
+    this.controller.unregisterField(this);
+  }
+}
+const textCodec = {
+  keys: (name) => [name],
+  empty: () => "",
+  read(params, name) {
+    let raw = params[name];
+    if (raw === void 0 || raw === null) return { present: false, value: "" };
+    if (Array.isArray(raw)) return { present: raw.length > 0, value: raw.length ? String(raw[0] ?? "") : "" };
+    return { present: true, value: String(raw) };
+  },
+  write(name, value) {
+    return { [name]: value === "" ? null : value };
+  }
+};
+const dropdownSingleCodec = {
+  keys: (name) => [name],
+  empty: () => [],
+  read(params, name) {
+    let raw = params[name];
+    if (raw === void 0 || raw === null) return { present: false, value: [] };
+    if (Array.isArray(raw)) return { present: raw.length > 0, value: raw.length ? [raw[0]] : [] };
+    return { present: true, value: [raw] };
+  },
+  write(name, value) {
+    return { [name]: value.length ? value[0] : null };
+  }
+};
+const dropdownMultiCodec = {
+  keys: (name) => [name],
+  empty: () => [],
+  read(params, name) {
+    let raw = params[name];
+    if (raw === void 0 || raw === null) return { present: false, value: [] };
+    if (Array.isArray(raw)) return { present: raw.length > 0, value: [...raw] };
+    return { present: true, value: [raw] };
+  },
+  write(name, value) {
+    return { [name]: value.length ? [...value] : null };
+  },
+  normalize(params, name) {
+    let raw = params[name];
+    if (raw === void 0 || raw === null || Array.isArray(raw)) return;
+    params[name] = [raw];
+  }
+};
+const dateRangeCodec = {
+  keys: (name) => [`${name}_start`, `${name}_end`],
+  empty: () => ({ start: null, end: null }),
+  read(params, name) {
+    let startRaw = params[`${name}_start`];
+    let endRaw = params[`${name}_end`];
+    let start = readScalar(startRaw);
+    let end = readScalar(endRaw);
+    return { present: start !== null || end !== null, value: { start, end } };
+  },
+  write(name, value) {
+    return {
+      [`${name}_start`]: value.start,
+      [`${name}_end`]: value.end
+    };
+  }
+};
+function readScalar(value) {
+  if (value === void 0 || value === null) return null;
+  if (Array.isArray(value)) return value.length ? String(value[0] ?? "") : null;
+  return String(value);
+}
+function cloneParamValue(value) {
+  if (Array.isArray(value)) return [...value];
+  return value;
+}
+function cloneParams(params) {
+  return Object.fromEntries(Object.entries(params).map(([name, value]) => [name, cloneParamValue(value)]));
+}
+function paramValueEqual(left, right) {
+  if (Array.isArray(left) || Array.isArray(right)) {
+    if (!Array.isArray(left) || !Array.isArray(right)) return false;
+    if (left.length !== right.length) return false;
+    return left.every((value, index) => value === right[index]);
+  }
+  return left === right;
+}
+function getChangedKeys(left, right) {
+  let changed = /* @__PURE__ */ new Set();
+  let keys = /* @__PURE__ */ new Set([...Object.keys(left), ...Object.keys(right)]);
+  keys.forEach((key) => {
+    if (!paramValueEqual(left[key], right[key])) changed.add(key);
+  });
+  return changed;
+}
+class PageInputs {
+  params;
+  subscribers;
+  fieldsByKey;
+  onPopState;
+  constructor() {
+    this.params = $state.raw({});
+    this.subscribers = /* @__PURE__ */ new Set();
+    this.fieldsByKey = /* @__PURE__ */ new Map();
+    this.params = cloneParams(this.readFromUrl());
+    if (typeof window !== "undefined") {
+      this.onPopState = () => this.syncFromUrl();
+      window.addEventListener("popstate", this.onPopState);
+    }
+  }
+  destroy() {
+    if (this.onPopState) window.removeEventListener("popstate", this.onPopState);
+    this.subscribers.clear();
+    this.fieldsByKey.clear();
+  }
+  registerField(field) {
+    field.keys().forEach((key) => {
+      let fields = this.fieldsByKey.get(key);
+      if (!fields) {
+        fields = /* @__PURE__ */ new Set();
+        this.fieldsByKey.set(key, fields);
+      }
+      fields.add(field);
+    });
+  }
+  unregisterField(field) {
+    field.keys().forEach((key) => {
+      let fields = this.fieldsByKey.get(key);
+      if (!fields) return;
+      fields.delete(field);
+      if (fields.size === 0) this.fieldsByKey.delete(key);
+    });
+  }
+  text(name) {
+    return new BoundField(this, name, textCodec);
+  }
+  dropdown(name, multiple) {
+    return new BoundField(this, name, multiple ? dropdownMultiCodec : dropdownSingleCodec);
+  }
+  dateRange(name) {
+    return new BoundField(this, name, dateRangeCodec);
+  }
+  getParam(name) {
+    return this.params[name];
+  }
+  getParams() {
+    return cloneParams(this.params);
+  }
+  subscribeParams(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => this.subscribers.delete(subscriber);
+  }
+  updateParam(name, value) {
+    this.updateParams({ [name]: value });
+  }
+  updateParams(nextParams) {
+    let merged = { ...this.params };
+    Object.entries(nextParams).forEach(([name, value]) => {
+      merged[name] = Array.isArray(value) ? [...value] : value;
+    });
+    this.applySnapshot(merged, "local");
+  }
+  reset() {
+    let changed = new Set(Object.keys(this.params));
+    if (changed.size === 0) return;
+    this.params = {};
+    this.syncUrl();
+    this.syncFields(changed, "local");
+    let snapshot = this.getParams();
+    this.subscribers.forEach((subscriber) => subscriber(snapshot, { changed }));
+  }
+  syncFromUrl() {
+    this.applySnapshot(this.readFromUrl(), "external");
+  }
+  applySnapshot(nextParams, source) {
+    let cloned = cloneParams(nextParams);
+    this.normalizeSnapshot(cloned);
+    let changed = getChangedKeys(this.params, cloned);
+    if (changed.size === 0) return;
+    this.params = cloned;
+    if (source !== "external") this.syncUrl();
+    this.syncFields(changed, source);
+    let snapshot = this.getParams();
+    this.subscribers.forEach((subscriber) => subscriber(snapshot, { changed }));
+    window.$GRAPHENE?.rerunQueries?.();
+  }
+  syncFields(changed, source) {
+    let fields = /* @__PURE__ */ new Set();
+    changed.forEach((key) => {
+      this.fieldsByKey.get(key)?.forEach((field) => fields.add(field));
+    });
+    fields.forEach((field) => field.sync(this.params, source));
+  }
+  normalizeSnapshot(params) {
+    let fields = /* @__PURE__ */ new Set();
+    this.fieldsByKey.forEach((keyFields) => {
+      keyFields.forEach((field) => fields.add(field));
+    });
+    fields.forEach((field) => field.normalize(params));
+  }
+  syncUrl() {
+    if (typeof window === "undefined") return;
+    let search = new URLSearchParams();
+    Object.entries(this.params).forEach(([name, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((item) => search.append(name, String(item)));
+        return;
+      }
+      if (value === null || value === void 0 || value === "") return;
+      search.append(name, String(value));
+    });
+    let nextSearch = search.toString();
+    let currentSearch = window.location.search.replace(/^\?/, "");
+    if (nextSearch === currentSearch) return;
+    let nextUrl = window.location.pathname + (nextSearch ? `?${nextSearch}` : "") + window.location.hash;
+    window.history.replaceState(window.history.state, "", nextUrl);
+  }
+  readFromUrl() {
+    if (typeof window === "undefined") return {};
+    let next = {};
+    for (let [name, value] of new URLSearchParams(window.location.search).entries()) {
+      let existing = next[name];
+      if (existing === void 0) next[name] = value;
+      else if (Array.isArray(existing)) existing.push(value);
+      else next[name] = [String(existing), value];
+    }
+    return next;
+  }
+}
+const [getPageInputsContext, setPageInputsContext] = createContext();
+let activePageInputs = null;
+function activatePageInputs(pageInputs) {
+  if (activePageInputs && activePageInputs !== pageInputs) activePageInputs.destroy();
+  activePageInputs = pageInputs;
+  return pageInputs;
+}
+function getActivePageInputs() {
+  if (!activePageInputs) activePageInputs = new PageInputs();
+  return activePageInputs;
+}
+function releasePageInputs(pageInputs) {
+  if (activePageInputs !== pageInputs) return;
+  pageInputs.destroy();
+  activePageInputs = null;
+}
+function getPageInputs() {
+  try {
+    return getPageInputsContext();
+  } catch {
+    return getActivePageInputs();
+  }
+}
+function captureInitial(factory) {
+  return factory();
+}
+export {
+  PageInputs,
+  activatePageInputs,
+  captureInitial,
+  getActivePageInputs,
+  getPageInputs,
+  releasePageInputs,
+  setPageInputsContext
+};