@sprig-and-prose/sprig-ui-csr 0.2.0 → 0.2.2

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@sprig-and-prose/sprig-ui-csr",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "bin": {
     "sprig-ui-csr": "./src/cli.js"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "prepare": "npm run build",
     "start": "node src/cli.js",
     "format": "biome format . --write",
     "lint": "biome lint .",
@@ -19,6 +24,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.10",
+    "@fortawesome/fontawesome-free": "^7.1.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@types/node": "^22.0.0",
     "svelte": "^5.46.0",

package/src/App.svelte

@@ -210,10 +210,26 @@
     width: 100%;
     position: sticky;
     top: 0;
-    background-color: var(--bg-color);
+    /* Background texture applied via JavaScript in main.js to match body texture */
+    /* Use semi-transparent background to allow texture to show while covering scrolling content */
+    background-color: rgba(250, 250, 250, 0.95); /* Light mode base with slight transparency */
     z-index: 100;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .top-bar {
+      background-color: rgba(36, 34, 31, 0.95); /* Dark mode base with slight transparency */
+    }
+  }
+
+  :global(html[data-theme="dark"]) .top-bar {
+    background-color: rgba(36, 34, 31, 0.95); /* Dark mode base with slight transparency */
+  }
+
+  :global(html[data-theme="light"]) .top-bar {
+    background-color: rgba(250, 250, 250, 0.95); /* Light mode base with slight transparency */
+  }
+
   .main-content {
     padding: 64px 32px;
     min-height: calc(100vh - 200px);

package/src/lib/components/GlobalSearch.svelte

@@ -397,7 +397,7 @@
     top: calc(100% + 4px);
     left: 0;
     right: 0;
-    background: var(--bg-color);
+    background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 4px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

package/src/lib/components/Prose.svelte

@@ -71,7 +71,7 @@
               listItems.push(currentItem);
             }
             const match = lines[i].match(/^[-—*]\s+(.+)$/);
-            currentItem = match[1];
+            currentItem = match && match[1] ? match[1] : '';
           } else {
             // Continuation line - append to current item
             if (currentItem !== null) {
@@ -113,7 +113,7 @@
               listItems.push(currentItem);
             }
             const match = lines[i].match(/^\d+\.\s+(.+)$/);
-            currentItem = match[1];
+            currentItem = match && match[1] ? match[1] : '';
           } else {
             // Continuation line - append to current item
             if (currentItem !== null) {

package/src/lib/stores/describeRenderMode.js

@@ -3,7 +3,7 @@ import { writable } from 'svelte/store';
 /**
  * Store for describe block rendering mode.
  * Values: 'plain' | 'lists'
- * Default: 'plain'
+ * Default: 'lists'
  */
-export const describeRenderMode = writable(/** @type {'plain' | 'lists'} */ ('plain'));
+export const describeRenderMode = writable(/** @type {'plain' | 'lists'} */ ('lists'));
 

package/src/main.js

@@ -1,4 +1,5 @@
 import './styles/app.css';
+import '@fortawesome/fontawesome-free/css/all.css';
 import './lib/stores/theme.js'; // Initialize theme store
 import { theme } from './lib/stores/theme.js';
 import { get } from 'svelte/store';
@@ -49,10 +50,21 @@ async function initTexture() {
       const effectiveTheme = getEffectiveTheme(themeValue);
       const url = effectiveTheme === 'dark' ? textureState.dark : textureState.light;
       if (url) {
+        // Apply texture to body
         document.body.style.backgroundImage = `url(${url})`;
         document.body.style.backgroundRepeat = 'repeat';
         document.body.style.backgroundSize = '1024px 1024px';
         document.body.style.backgroundAttachment = 'fixed';
+        
+        // Apply same texture to top bar so it matches the background
+        const topBar = document.querySelector('.top-bar');
+        if (topBar) {
+          topBar.style.backgroundImage = `url(${url})`;
+          topBar.style.backgroundRepeat = 'repeat';
+          topBar.style.backgroundSize = '1024px 1024px';
+          topBar.style.backgroundAttachment = 'fixed';
+          topBar.style.backgroundPosition = '0 0'; // Align with body
+        }
       }
     }
 

package/src/pages/ConceptPage.svelte

@@ -223,7 +223,7 @@
           <li class="relationship-item">
             <a class="relationship-link sprig-link" href={getNodeRoute(rel.otherNode)}>
               <span class="relationship-label">{rel.label}</span>
-              <span class="relationship-separator">→</span>
+              <span class="relationship-separator"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
               <span class="relationship-name">{displayName}</span>
               <span class="relationship-kind">{rel.otherNode.kind}</span>
             </a>

package/src/pages/SeriesPage.svelte

@@ -172,7 +172,7 @@
           <li class="relationship-item">
             <a class="relationship-link sprig-link" href={getNodeRoute(rel.otherNode)}>
               <span class="relationship-label">{rel.label}</span>
-              <span class="relationship-separator">→</span>
+              <span class="relationship-separator"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
               <span class="relationship-name">{displayName}</span>
               <span class="relationship-kind">{rel.otherNode.kind}</span>
             </a>

package/src/styles/app.css

@@ -44,7 +44,7 @@
   --sprig-link-anchor-underline: rgba(0, 0, 0, 0.35);
   --sprig-link-anchor-underline-hover: rgba(0, 0, 0, 0.5);
 
-  --card-bg: rgba(235, 225, 210, 0.8); /* Original parchment tone for light theme */
+  --card-bg: rgb(235, 225, 210); /* Opaque parchment tone for light theme */
   --card-border: var(--border-color);
 
   --hairline: var(--border-color);
@@ -172,7 +172,7 @@ html[data-theme="light"] {
   --sprig-link-anchor-underline: rgba(0, 0, 0, 0.35);
   --sprig-link-anchor-underline-hover: rgba(0, 0, 0, 0.5);
 
-  --card-bg: rgba(235, 225, 210, 0.8); /* Original parchment tone for light theme */
+  --card-bg: rgb(235, 225, 210); /* Opaque parchment tone for light theme */
   --card-border: var(--border-color);
 
   --hairline: var(--border-color);

package/biome.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
-  "files": {
-    "ignoreUnknown": true
-  },
-  "overrides": [
-    {
-      "includes": ["**/*.svelte"],
-      "linter": { "enabled": false },
-      "formatter": { "enabled": false }
-    },
-    {
-      "includes": ["dist/**"],
-      "linter": { "enabled": false },
-      "formatter": { "enabled": false }
-    }
-  ],
-  "assist": { "actions": { "source": { "organizeImports": "on" } } },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true
-    }
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "single",
-      "semicolons": "always"
-    }
-  }
-}
-