@dmthepm/commune 0.1.0 → 0.2.0

package/src/styles/design-system.css

@@ -1,11 +1,13 @@
 /**
  * Commune Design System
  * Clean, modern, with light/dark mode support
+ *
+ * Plain CSS, deliberately: this file ships with the package, so it must render
+ * correctly in a consumer build that has never heard of Tailwind or PostCSS.
+ * The engine site's own `@tailwind utilities` entry lives in `src/site.css`,
+ * which is not shipped (#8).
  */
 
-/* Only import Tailwind utilities - NOT base (which resets everything) */
-@tailwind utilities;
-
 :root {
   /* Light mode colors */
   --c-bg: #ffffff;
@@ -135,10 +137,12 @@ body.modal-open {
    This is a design-system invariant: one rule, globally, so no page or
    component has to remember to add its own. */
 
-/* The marker must never wrap onto its own line, orphaned from the label it
-   belongs to. `nowrap` has to come before the ::after rule that creates it. */
+/* Long link text has to wrap. The marker below is a ::after with no
+   whitespace before it, so there is no break opportunity between it and the
+   last word — it follows the wrap on its own, and does not need the whole
+   link held on one line to stay attached to its label. */
 a[target="_blank"] {
-  white-space: nowrap;
+  overflow-wrap: break-word;
 }
 
 a[target="_blank"]::after {
@@ -155,3 +159,81 @@ a[target="_blank"]:hover::after {
   opacity: 1;
 }
 
+/* --- Print -------------------------------------------------------------
+ * Paper is always the light theme. Without this the dark tokens survive into
+ * the print stylesheet, the browser drops backgrounds, and a reader in dark
+ * mode gets #e4e4e4 body text on white paper.
+ */
+@page {
+  margin: 16mm;
+}
+
+@media print {
+  :root,
+  :root[data-theme="dark"],
+  :root[data-theme="light"] {
+    color-scheme: light;
+
+    --c-bg: #ffffff;
+    --c-bg-soft: #f5f5f5;
+    --c-bg-muted: #ebebeb;
+    --c-text: #111111;
+    --c-text-muted: #555555;
+    --c-text-accent: #333333;
+    --c-border: rgba(0, 0, 0, 0.25);
+    --c-border-focus: rgba(0, 0, 0, 0.4);
+
+    --c-accent: #16389c;
+    --c-accent-hover: #16389c;
+    --c-accent-soft: transparent;
+    --c-accent-border: rgba(0, 0, 0, 0.3);
+
+    --c-shadow-sm: none;
+    --c-shadow-md: none;
+    --c-shadow-lg: none;
+    --c-shadow-xl: none;
+  }
+
+  body {
+    background: #ffffff;
+    color: #111111;
+  }
+
+  /* The header keeps the byline on paper; its controls do nothing there. */
+  .commune-header {
+    position: static;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+
+  .commune-header .controls,
+  #commune-search {
+    display: none !important;
+  }
+
+  /* The external-link marker is the only cue left once nothing is clickable. */
+  a[target="_blank"]::after {
+    opacity: 1;
+  }
+}
+
+/* --- Reduced motion ----------------------------------------------------
+ * The panes slide, the header's theme button rotates, and the star modal runs
+ * a two-second infinite pulse. A reader who has asked their system for less
+ * movement gets the same interface with the movement removed, not a different
+ * one: transitions and animations collapse to instant, and smooth scrolling
+ * becomes a jump. The JavaScript callers of scrollIntoView and scrollTo check
+ * the same query, since `scroll-behavior` does not reach them.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/notes.css

@@ -83,3 +83,39 @@ a.research-link:hover::after {
 	opacity: 1;
 }
 
+
+/* --- Overflow guards ---------------------------------------------------
+ * Content arrives as Markdown from whoever writes the vault, so the reading
+ * column has to survive whatever lands in it: a title with no spaces, a bare
+ * URL, a long inline token, a wide table, an oversized image. Each rule here
+ * keeps the offending element inside the column instead of letting it push
+ * the whole document wider and hand every phone a horizontal scrollbar.
+ */
+
+.prose {
+	overflow-wrap: break-word;
+}
+
+.prose pre {
+	max-width: 100%;
+	overflow-x: auto;
+}
+
+.prose img,
+.prose video,
+.prose svg {
+	max-width: 100%;
+	height: auto;
+}
+
+/* Only tables that are still direct children of the column: the research
+ * template wraps its own tables in a `.table-wrapper` scroller once its script
+ * runs, and this is the fallback for everything else — including that template
+ * with JavaScript off. */
+.prose > table,
+.prose li > table,
+.prose blockquote > table {
+	display: block;
+	max-width: 100%;
+	overflow-x: auto;
+}

package/src/components/PlausibleScript.astro

@@ -1,13 +0,0 @@
----
-// Plausible Analytics Script Component
-// Privacy-friendly analytics with no cookies or personal data collection
-
-export interface Props {
-  domain: string;
-  src?: string;
-}
-
-const { domain, src = "https://analytics.devonmeadows.com/js/script.js" } = Astro.props;
----
-
-<script defer data-domain={domain} src={src}></script>

package/src/components/panes.ts

@@ -1,61 +0,0 @@
-export function setupPanes(){
-  const stack = document.getElementById('pane-stack');
-  if(!stack) return;
-
-  function activateStack(on: boolean){
-    stack.classList.toggle('active', on);
-    document.body.classList.toggle('panes-open', on);
-  }
-
-  async function openPane(url: string){
-    activateStack(true);
-
-    const res = await fetch(url, { headers: { 'Accept':'text/html;charset=utf-8' } });
-    const html = await res.text();
-    const doc  = new DOMParser().parseFromString(html, 'text/html');
-    const main = doc.querySelector('main') ?? doc.body;
-
-    const pane = document.createElement('div');
-    pane.className = 'pane';
-    pane.innerHTML = `
-      <header><strong>${doc.title?.replace(/ \|.*/,'')}</strong>
-        <button class="close" aria-label="Close">×</button>
-      </header>
-      <div class="body"><article class="prose">${main.innerHTML}</article></div>`;
-
-    pane.querySelector<HTMLButtonElement>('.close')!.addEventListener('click', () => {
-      pane.remove();
-      if(!stack.querySelector('.pane')) activateStack(false);
-    });
-
-    stack.appendChild(pane);
-    stack.scrollLeft = stack.scrollWidth;
-
-    // Limit to 3
-    const panes = stack.querySelectorAll('.pane');
-    if(panes.length > 3) panes[0].remove();
-  }
-
-  // Only intercept clicks inside the main article area
-  document.addEventListener('click', (e) => {
-    const inArticle = (e.target as HTMLElement)?.closest?.('main, article.prose');
-    if (!inArticle) return;
-
-    const a = (e.target as HTMLElement)?.closest?.('a[href^="/notes/"]') as HTMLAnchorElement | null;
-    if(!a) return;
-    if (e.ctrlKey || e.metaKey || e.shiftKey) return; // allow new tab, etc.
-    if (window.innerWidth < 1024) return;             // mobile → normal nav
-
-    e.preventDefault();
-    openPane(a.href);
-    history.pushState({ pane: a.href }, '', a.href);
-  });
-
-  addEventListener('popstate', () => {
-    const panes = stack.querySelectorAll('.pane');
-    if(panes.length){
-      panes[panes.length-1].remove();
-      if(!stack.querySelector('.pane')) activateStack(false);
-    }
-  });
-}