@mvarble/mesearch-ui 0.0.0-stage → 0.1.0

package/dist/theme.svelte.js

@@ -0,0 +1,66 @@
+// The reader's theme: 'light', 'dark', or 'system' to follow the device.
+// `THEME_SCRIPT`, inlined in the page's `<head>`, applies the stored choice
+// before the first paint; `theme` keeps it applied afterwards and tracks the
+// device while following it. The theme is `data-theme` on `<html>`, and a page
+// read without JavaScript keeps the light theme it ships with.
+const KEY = 'mesearch:theme';
+function stored() {
+    try {
+        const value = localStorage.getItem(KEY);
+        return value == 'light' || value == 'dark' ? value : 'system';
+    }
+    catch {
+        return 'system';
+    }
+}
+// For `app.html`: paste inside a `<script>` in the `<head>`, before anything
+// that paints. It also adds the `js` class that the `needs-js` utility uses.
+export const THEME_SCRIPT = `(function () {
+    var root = document.documentElement;
+    var theme;
+    root.classList.add('js');
+    try {
+        theme = localStorage.getItem('${KEY}');
+    } catch (e) {}
+    if (theme !== 'light' && theme !== 'dark') {
+        theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    root.dataset.theme = theme;
+})();`;
+class Theme {
+    #started = false;
+    choice = $state('system');
+    systemDark = $state(false);
+    resolved = $derived(this.choice == 'system' ? (this.systemDark ? 'dark' : 'light') : this.choice);
+    start() {
+        if (this.#started)
+            return;
+        this.#started = true;
+        this.choice = stored();
+        const query = matchMedia('(prefers-color-scheme: dark)');
+        this.systemDark = query.matches;
+        query.addEventListener('change', (event) => (this.systemDark = event.matches));
+        $effect.root(() => {
+            $effect(() => {
+                document.documentElement.dataset.theme = this.resolved;
+            });
+        });
+    }
+    // Light and dark, in turn: every click changes what the page shows. A
+    // choice that matches the device's own setting is not remembered, so
+    // from then on the page follows the device again.
+    toggle() {
+        const next = this.resolved == 'dark' ? 'light' : 'dark';
+        this.choice = next == (this.systemDark ? 'dark' : 'light') ? 'system' : next;
+        try {
+            if (this.choice == 'system')
+                localStorage.removeItem(KEY);
+            else
+                localStorage.setItem(KEY, this.choice);
+        }
+        catch {
+            // Private browsing: the choice lasts as long as the page.
+        }
+    }
+}
+export const theme = new Theme();

package/dist/types.d.ts

@@ -0,0 +1,84 @@
+export type Kind = string;
+export interface DocumentRef {
+    key: string;
+    kind: Kind;
+    url: string;
+    title: string;
+    titleHtml: string;
+}
+export interface IndexEntry extends DocumentRef {
+    summary: string;
+    summaryHtml: string;
+    created: Date;
+    updated: Date;
+    readingMinutes?: number;
+}
+export interface SearchEntry {
+    key: string;
+    kind: Kind;
+    url: string;
+    title: string;
+    summary: string;
+    summaryHtml?: string;
+    headings: Array<{
+        title: string;
+        slug: string;
+    }>;
+}
+export interface GraphNode extends DocumentRef {
+    x: number;
+    y: number;
+    width: number;
+    depth: number;
+    sequenced: boolean;
+}
+export interface GraphLegend {
+    kinds: Array<{
+        kind: Kind;
+        label: string;
+        shape?: 'pill' | 'card';
+    }>;
+    solid: string;
+    dashed: string;
+    sequenced?: string;
+    from: string;
+    to: string;
+    related: string;
+    empty: string;
+}
+export interface GraphLink {
+    from: string;
+    to: string;
+    style: 'solid' | 'dashed';
+}
+export interface TocEntry {
+    slug: string;
+    titleHtml: string;
+    depth: number;
+    children: TocEntry[];
+}
+export interface TrackItem {
+    key: string;
+    url: string;
+    titleHtml: string;
+    label?: string;
+    children?: TrackItem[];
+}
+export interface RailLink {
+    url: string;
+    label: string;
+    icon: IconName;
+}
+export type IconName = 'search' | 'graph' | 'list' | 'sun' | 'moon' | 'auto' | 'plus' | 'minus' | 'reset' | 'close' | 'arrow-right' | 'arrow-left' | 'home' | 'pen' | 'book' | 'quote';
+export interface Reference {
+    id: string;
+    label: string;
+    html: string;
+}
+export interface StatementInfo {
+    kind: string;
+    label: string;
+    slug: string;
+    title?: string;
+    id?: string;
+}

package/dist/types.js

@@ -0,0 +1,3 @@
+// The shapes the components are handed. Every one carries its own `url`, so
+// the components never need to know how a site lays out its pages.
+export {};

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@mvarble/mesearch-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The Svelte components and styles mesearch sites are made of: the map, the index, search, the rail, contents, sequences, and a textbook look. Data and URLs come in as props, so any SvelteKit site can use them.",
+  "license": "MIT",
+  "author": "Matthew Varble <matthew@rodent.club>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mvarble/mesearch.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    },
+    "./styles/*": "./dist/styles/*",
+    "./package.json": "./package.json",
+    "./fonts": {
+      "types": "./dist/fonts.d.ts",
+      "default": "./dist/fonts.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/fonts.js"
+  ],
+  "engines": {
+    "node": ">=22.18"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/source-serif-4": "^5.3.0",
+    "@fontsource/fira-mono": "^5.3.0",
+    "@mvarble/mesearch-markdown": "^0.1.0",
+    "d3-force": "^3.0.0",
+    "katex": "^0.18.4"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@types/d3-force": "^3.0.10",
+    "@types/node": "^22.14.0",
+    "svelte": "^5.57.1",
+    "svelte-check": "^4.7.6",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "svelte-package -i src/lib -o dist && node --test 'test/**/*.test.mjs'"
+  }
 }