@3sln/deck 0.0.5

package/src/fetcher.js

@@ -0,0 +1,35 @@
+import { Provider } from '@3sln/ngin';
+
+export class ThrottledFetcher {
+    #queue = [];
+    #activeRequests = 0;
+    #concurrency;
+
+    constructor(concurrency = 6) {
+        this.#concurrency = concurrency;
+    }
+
+    fetch(url, options) {
+        return new Promise((resolve, reject) => {
+            this.#queue.push({ url, options, resolve, reject });
+            this.#processQueue();
+        });
+    }
+
+    #processQueue() {
+        if (this.#activeRequests >= this.#concurrency || this.#queue.length === 0) {
+            return;
+        }
+
+        this.#activeRequests++;
+        const { url, options, resolve, reject } = this.#queue.shift();
+
+        fetch(url, options)
+            .then(response => resolve(response))
+            .catch(error => reject(error))
+            .finally(() => {
+                this.#activeRequests--;
+                this.#processQueue();
+            });
+    }
+}

package/src/highlight.js

@@ -0,0 +1,45 @@
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import githubStyle from 'highlight.js/styles/github.css?inline';
+import githubDarkStyle from 'highlight.js/styles/github-dark.css?inline';
+import {css as createSheet} from '@3sln/bones/style';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('xml', xml); // For HTML
+hljs.registerLanguage('css', css);
+
+export const stylesheet = createSheet`
+  /* Light Theme */
+  ${githubStyle}
+
+  /* Dark Theme */
+  @media (prefers-color-scheme: dark) {
+    ${githubDarkStyle}
+  }
+  
+  .hljs {
+    background: transparent;
+  }
+
+  pre {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1em;
+    overflow-x: auto;
+  }
+`;
+
+export function highlight(element) {
+  // Case 1: The element itself is a <code> block that needs highlighting.
+  if (element.matches('pre > code')) {
+    hljs.highlightElement(element);
+  }
+
+  // Case 2: The element is a container for <pre><code> blocks.
+  const blocks = element.querySelectorAll('pre > code');
+  blocks.forEach(block => {
+    hljs.highlightElement(block);
+  });
+}

package/src/main.js

@@ -0,0 +1,326 @@
+import * as dodo from '@3sln/dodo';
+import reactiveFactory from '@3sln/bones/reactive';
+import resizeFactory from '@3sln/bones/resize';
+import {Engine, Provider} from '@3sln/ngin';
+import * as db from './db.js';
+import { ThrottledFetcher } from './fetcher.js';
+import {highlight, stylesheet as highlightStylesheet} from './highlight.js';
+import {
+  uiStateProvider,
+  FilteredCards,
+  SelectedCard,
+  SetSearchQuery,
+  SelectCard,
+  ClearSelection,
+  LoadCard,
+  RemoveCard,
+  PruneCards,
+  SetPinnedCards,
+} from './state.js';
+import './deck-demo.js';
+
+// Initialize dodo and bones components
+const {reconcile, h, div, h1, h2, input, p, button, article, header, section, alias, span} = dodo;
+const {watch, zip, map, dedup, pipe} = reactiveFactory({dodo});
+const {withContainerSize} = resizeFactory({dodo});
+
+// --- UI Components ---
+
+const closeIcon = () =>
+  h(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      height: '24px',
+      viewBox: '0 0 24 24',
+      width: '24px',
+      fill: 'var(--text-color)',
+    },
+    h('path', {d: 'M0 0h24v24H0z', fill: 'none'}),
+    h('path', {
+      d: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    }),
+  );
+
+const searchBar = alias(engine => {
+  return div(
+    {className: 'search-bar'},
+    input({
+      type: 'search',
+      placeholder: 'Search cards...',
+      $styling: {
+        width: '100%',
+        padding: '0.75em 1em',
+        'font-size': '1.1em',
+        border: '1px solid var(--input-border)',
+        'background-color': 'var(--input-bg)',
+        color: 'var(--text-color)',
+        'border-radius': '2em',
+        outline: 'none',
+        transition: 'box-shadow 0.2s',
+      },
+    }).on({
+      focus: e => (e.target.style.boxShadow = '0 0 5px rgba(81, 203, 238, 1)'),
+      blur: e => (e.target.style.boxShadow = 'none'),
+      input: e => engine.dispatch(new SetSearchQuery(e.target.value)),
+    }),
+  );
+});
+
+const cardListItem = alias((card, engine) => {
+  return div(
+    {
+      className: 'card-list-item',
+      $styling: {
+        padding: '1em',
+        border: '1px solid var(--border-color)',
+        'background-color': 'var(--card-bg)',
+        'border-radius': '8px',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+      },
+    },
+    h2({$styling: {margin: '0 0 0.25em', 'font-size': '1.1em'}}, card.title),
+    p({$styling: {margin: 0, color: '#666', 'font-size': '0.9em'}}, card.summary),
+  ).on({
+    click: () => engine.dispatch(new SelectCard(card.path)),
+    mouseover: e => (e.currentTarget.style.backgroundColor = 'var(--card-hover-bg)'),
+    mouseout: e => (e.currentTarget.style.backgroundColor = 'var(--card-bg)'),
+  });
+});
+
+const cardList = alias(({search, recents, pinned} = {}, engine) => {
+  const heading = title =>
+    h2(
+      {
+        $styling: {
+          color: 'var(--text-color)',
+          opacity: 0.6,
+          'font-size': '0.8em',
+          'margin-top': '2em',
+          'margin-bottom': '1em',
+          'text-transform': 'uppercase',
+          'letter-spacing': '0.1em',
+        },
+      },
+      title,
+    );
+
+  return div(
+    {
+      className: 'card-list',
+      $styling: {
+        'overflow-y': 'auto',
+        display: 'flex',
+        'flex-direction': 'column',
+        gap: '1em',
+        padding: '1em',
+      },
+    },
+    (search || []).length > 0 && search.map(card => cardListItem(card, engine)),
+    (pinned || []).length > 0 && [
+      heading('Pinned'),
+      ...pinned.map(card => cardListItem(card, engine)),
+    ],
+    (recents || []).length > 0 && [
+      heading('Recents'),
+      ...recents.map(card => cardListItem(card, engine)),
+    ],
+  );
+});
+
+const detailView = alias((card, engine) => {
+  const closeButton = button(
+    {
+      $styling: {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '0.5em',
+      },
+    },
+    closeIcon(),
+  ).on({click: () => engine.dispatch(new ClearSelection())});
+
+  if (card.title !== card.path) {
+    return article(
+      {
+        className: 'detail-view',
+        $styling: {
+          padding: '0 1em 1em 1em',
+          'overflow-y': 'auto',
+          width: '100%',
+          'max-width': '1200px',
+          'box-sizing': 'border-box',
+        },
+      },
+      h1(
+        {
+          $styling: {
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'space-between',
+          },
+        },
+        span({$styling: {'flex-grow': 1}}, card.title),
+        closeButton,
+      ),
+      section({innerHTML: card.body})
+        .opaque()
+        .on({
+          $update: el => highlight(el),
+        }),
+    );
+  } else {
+    return article(
+      {
+        className: 'detail-view',
+        $styling: {
+          padding: '1em',
+          'overflow-y': 'auto',
+          position: 'relative',
+          width: '100%',
+          'max-width': '1200px',
+        },
+      },
+      header(
+        {
+          $styling: {
+            display: 'flex',
+            'justify-content': 'flex-end',
+            position: 'sticky',
+            top: 0,
+          },
+        },
+        closeButton,
+      ),
+      section({innerHTML: card.body})
+        .opaque()
+        .on({
+          $update: el => highlight(el),
+        }),
+    );
+  }
+});
+
+const app = alias(engine => {
+  const state$ = zip(
+    (selectedCard, filteredCards) => ({selectedCard, filteredCards}),
+    engine.query(new SelectedCard()),
+    engine.query(new FilteredCards()),
+  );
+
+  return withContainerSize(size$ => {
+    const isWide$ = pipe(
+      size$,
+      map(size => size && size.width > 768),
+      dedup(),
+    );
+
+    return watch(isWide$, isWide =>
+      watch(
+        state$,
+        ({selectedCard, filteredCards}) => {
+          const hasSelection = selectedCard != null;
+
+          const listView = div(
+            {
+              className: 'list-view',
+              $styling: {
+                display: 'flex',
+                'flex-direction': 'column',
+                flex: hasSelection && isWide ? '1 1 350px' : '0 0 clamp(400px, 60%, 700px)',
+                'max-width': hasSelection && isWide ? '500px' : '700px',
+                transition: 'flex 0.3s ease-in-out',
+                'padding-top': '1rem',
+              },
+            },
+            searchBar(engine),
+            cardList(filteredCards || [], engine),
+          );
+
+          if (hasSelection) {
+            if (isWide) {
+              return div(
+                {
+                  $styling: {
+                    display: 'flex',
+                    height: '100vh',
+                    width: '100vw',
+                    'align-items': 'stretch',
+                  },
+                },
+                listView,
+                div(
+                  {
+                    $styling: {
+                      flex: '2 1 50%',
+                      display: 'flex',
+                      'justify-content': 'center',
+                      'overflow-x': 'auto',
+                    },
+                  },
+                  detailView(selectedCard, engine),
+                ),
+              );
+            } else {
+              return detailView(selectedCard, engine);
+            }
+          } else {
+            return div(
+              {$styling: {display: 'flex', 'justify-content': 'center', padding: '2em 0'}},
+              listView,
+            );
+          }
+        },
+        {
+          placeholder: () => p('Indexing cards...'),
+        },
+      ),
+    );
+  });
+});
+
+// --- Initial Render ---
+
+export async function renderDeck({target, initialCardsData, pinnedCardPaths}) {
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, highlightStylesheet];
+  await db.initDB();
+
+  if ('serviceWorker' in navigator && !import.meta.hot) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/sw.js').then(registration => {
+        console.log('SW registered: ', registration);
+      }).catch(registrationError => {
+        console.log('SW registration failed: ', registrationError);
+      });
+    });
+  }
+
+  const engine = new Engine({
+    providers: {
+      state: uiStateProvider(),
+      fetcher: Provider.fromSingleton(new ThrottledFetcher()),
+    },
+  });
+
+  // Initial load
+  engine.dispatch(new SetPinnedCards(pinnedCardPaths || []));
+  initialCardsData.forEach(cardData => {
+    engine.dispatch(new LoadCard(cardData));
+  });
+  engine.dispatch(new PruneCards(initialCardsData.map(c => c.path)));
+
+  // Handle HMR
+  if (import.meta.hot) {
+    import.meta.hot.on('deck:card-changed', ({path}) => {
+      // In HMR, we don't have the hash, so we always load.
+      engine.dispatch(new LoadCard({ path }));
+    });
+    import.meta.hot.on('deck:card-removed', ({path}) => {
+      engine.dispatch(new RemoveCard(path));
+    });
+  }
+
+  reconcile(target, [app(engine)]);
+}

package/src/state.js

@@ -0,0 +1,227 @@
+import {Provider, Query, Action} from '@3sln/ngin';
+import reactiveFactory from '@3sln/bones/reactive';
+import * as dodo from '@3sln/dodo';
+import {marked} from 'marked';
+import * as db from './db.js';
+
+const {ObservableSubject} = reactiveFactory({dodo});
+
+// --- Data Transformation ---
+
+function transformCard(path, markdown) {
+  const html = marked(markdown);
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const h1El = doc.querySelector('h1');
+  const title = h1El?.textContent || path;
+  const summary = doc.querySelector('p')?.textContent || '';
+
+  h1El?.remove();
+  const body = doc.body.innerHTML;
+
+  return {path, title, summary, body};
+}
+
+// --- UI State Store ---
+
+class UIState {
+  #subject;
+
+  constructor(initialState) {
+    this.#subject = new ObservableSubject(initialState);
+  }
+
+  get state$() {
+    return this.#subject;
+  }
+
+  update(updater, ...args) {
+    const currentState = this.#subject.value;
+    const newState = updater(currentState, ...args);
+    this.#subject.next(newState);
+  }
+}
+
+// --- Ngin Components ---
+
+export const uiStateProvider = () => {
+  const uiState = new UIState({
+    query: '',
+    selectedCardPath: null,
+    pinnedCardPaths: [],
+  });
+  return Provider.fromSingleton(uiState);
+};
+
+// --- Queries ---
+
+export class SearchQuery extends Query {
+  static deps = ['state'];
+  boot({state}, {notify}) {
+    state.state$.subscribe(s => notify(s.query));
+  }
+}
+
+export class FilteredCards extends Query {
+  static deps = ['state'];
+  boot({state}, {notify, engineFeed}) {
+    let currentQuery = null;
+    let pinnedPaths = [];
+
+    const reQuery = async () => {
+      if (currentQuery) {
+        const cards = await db.findCardsByQuery(currentQuery);
+        notify({search: cards, recents: [], pinned: []});
+      } else {
+        const pinned = await Promise.all(pinnedPaths.map(p => db.getCard(p)));
+        const recent = await db.getRecentCards(100);
+        const pinnedPathsSet = new Set(pinnedPaths);
+        const filteredRecent = recent.filter(r => !pinnedPathsSet.has(r.path));
+        notify({search: [], recents: filteredRecent, pinned: pinned.filter(Boolean)});
+      }
+    };
+
+    engineFeed.addEventListener('card-loaded', reQuery);
+    engineFeed.addEventListener('card-removed', reQuery);
+    engineFeed.addEventListener('cards-pruned', reQuery);
+
+    state.state$.subscribe(s => {
+      let queryChanged = false;
+      if (s.query !== currentQuery) {
+        currentQuery = s.query;
+        queryChanged = true;
+      }
+      if (s.pinnedCardPaths !== pinnedPaths) {
+        pinnedPaths = s.pinnedCardPaths;
+        queryChanged = true;
+      }
+      if (queryChanged) {
+        reQuery();
+      }
+    });
+
+    reQuery(); // Initial query
+  }
+}
+
+export class SelectedCard extends Query {
+  static deps = ['state'];
+  boot({state}, {notify, engineFeed}) {
+    let currentPath = null;
+
+    // React to selection changes from UI
+    state.state$.subscribe(async s => {
+      currentPath = s.selectedCardPath;
+      if (!currentPath) {
+        notify(null);
+        return;
+      }
+      const card = await db.getCard(currentPath);
+      notify(card);
+    });
+
+    // React to HMR updates for the currently selected card
+    engineFeed.addEventListener('card-loaded', event => {
+      if (event.detail.card.path === currentPath) {
+        notify(event.detail.card);
+      }
+    });
+  }
+}
+
+// --- Actions ---
+
+export class SetPinnedCards extends Action {
+  static deps = ['state'];
+  constructor(paths) {
+    super();
+    this.paths = paths;
+  }
+  execute({state}) {
+    state.update(s => ({...s, pinnedCardPaths: this.paths}));
+  }
+}
+
+export class LoadCard extends Action {
+  static deps = ['fetcher'];
+  constructor(cardData) {
+    super();
+    this.cardData = cardData;
+  }
+  async execute({fetcher}, {engineFeed}) {
+    const { path, hash } = this.cardData;
+
+    // HMR passes no hash, always load.
+    if (hash) {
+        const existing = await db.getCard(path);
+        if (existing && existing.hash === hash) {
+            return; // Content is up to date
+        }
+    }
+
+    try {
+      const url = new URL(path, location.href);
+      const res = await fetcher.fetch(url);
+      if (!res.ok) throw new Error(`Failed to fetch ${path}: ${res.statusText}`);
+      const markdown = await res.text();
+      const card = transformCard(path, markdown);
+      const newCard = await db.upsertCard({ ...card, hash });
+      if (newCard) {
+        engineFeed.dispatchEvent(new CustomEvent('card-loaded', {detail: {card: newCard}}));
+      }
+    } catch (err) {
+      console.error(`Failed to load card ${path}:`, err);
+    }
+  }
+}
+
+export class RemoveCard extends Action {
+  constructor(path) {
+    super();
+    this.path = path;
+  }
+  async execute(_, {engineFeed}) {
+    await db.removeCard(this.path);
+    engineFeed.dispatchEvent(new CustomEvent('card-removed', {detail: {path: this.path}}));
+  }
+}
+
+export class SetSearchQuery extends Action {
+  static deps = ['state'];
+  constructor(query) {
+    super();
+    this.query = query;
+  }
+  execute({state}) {
+    state.update(s => ({...s, query: this.query}));
+  }
+}
+
+export class SelectCard extends Action {
+  static deps = ['state'];
+  constructor(cardPath) {
+    super();
+    this.cardPath = cardPath;
+  }
+  async execute({state}) {
+    await db.touchCard(this.cardPath);
+    state.update(s => ({...s, selectedCardPath: this.cardPath}));
+  }
+}
+
+export class ClearSelection extends Action {
+  static deps = ['state'];
+  execute({state}) {
+    state.update(s => ({...s, selectedCardPath: null}));
+  }
+}
+
+export class PruneCards extends Action {
+  constructor(livePaths) {
+    super();
+    this.livePaths = livePaths;
+  }
+  async execute(_, {engineFeed}) {
+    await db.pruneCards(this.livePaths);
+    engineFeed.dispatchEvent(new CustomEvent('cards-pruned'));
+  }
+}

package/src/sw.js

@@ -0,0 +1,55 @@
+const CACHE_NAME = 'deck-cache-v1';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil((async () => {
+    const cache = await caches.open(CACHE_NAME);
+    try {
+      const assetManifest = await fetch('asset-manifest.json').then(res => res.json());
+      const assets = assetManifest.files;
+      assets.push('./');
+      await cache.addAll(assets);
+    } catch (e) {
+      console.error('Failed to fetch asset-manifest.json, offline mode will not be available.', e);
+    }
+  })());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(caches.keys().then((keyList) => {
+    return Promise.all(keyList.map((key) => {
+      if (key !== CACHE_NAME) {
+        return caches.delete(key);
+      }
+    }));
+  }));
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      const cachedResponse = await cache.match(event.request);
+
+      const networkPromise = fetch(event.request).then(networkResponse => {
+        if (networkResponse.ok) {
+          cache.put(event.request, networkResponse.clone());
+        }
+        return networkResponse;
+      });
+
+      const timeoutPromise = new Promise(resolve => setTimeout(() => resolve(null), 400));
+      
+      try {
+        const firstResponse = await Promise.race([networkPromise, timeoutPromise]);
+        if (firstResponse) {
+          return firstResponse; // Network was fast enough
+        }
+      } catch(e) {
+        // networkPromise rejected before timeout, fall through to cache
+      }
+
+      // If network is slow or failed, return from cache if available, otherwise wait for network.
+      return cachedResponse || networkPromise;
+    })()
+  );
+});