@danieldeusing/design 0.1.0

package/runtime/terminal.js

@@ -0,0 +1,120 @@
+/*
+ * danieldeusing-design — terminal session animation.
+ *
+ * Progressive enhancement for the "live shell" effect: `$ command` prompts type
+ * out character by character, then their section's output reveals like the
+ * command just ran. Sections play in document order; a section scrolled into
+ * view later animates on arrival.
+ *
+ * Markup contract (styled by components.css):
+ *   <section data-term>
+ *     <p class="prompt">cat about.txt</p>      <!-- the command that types out -->
+ *     <div data-term-out>…</div>               <!-- output, revealed after -->
+ *   </section>
+ *
+ * Honours prefers-reduced-motion: with reduced motion (or JS disabled) the
+ * html.term-anim gate is never added, so components.css leaves everything
+ * visible. initTerminal() is therefore safe to call unconditionally.
+ *
+ * After the initial on-screen sections finish, it sets window.termContentDone
+ * and dispatches a "term:contentdone" event — a hook for chaining a follow-up
+ * animation (e.g. a nav that "runs" once the page has finished printing).
+ */
+
+export function initTerminal() {
+  if (typeof window === "undefined") return;
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  // honour the manual kill-switch (components.css html.anim-off)
+  if (document.documentElement.classList.contains("anim-off")) return;
+
+  document.documentElement.classList.add("term-anim");
+
+  const typePrompt = (prompt) =>
+    new Promise((finished) => {
+      const text = (prompt.textContent || "").trim();
+      const typedText = document.createTextNode("");
+      const caret = document.createElement("span");
+      caret.className = "term-caret";
+      caret.setAttribute("aria-hidden", "true");
+      prompt.textContent = "";
+      prompt.classList.add("term-live");
+      prompt.append(typedText, caret);
+      // ~35ms per character, capped so long commands finish within ~700ms
+      const perCharMs = Math.min(38, 700 / Math.max(text.length, 1));
+      let typedCount = 0;
+      const typeNext = () => {
+        if (typedCount < text.length) {
+          typedCount += 1;
+          typedText.data = text.slice(0, typedCount);
+          setTimeout(typeNext, perCharMs * (0.75 + Math.random() * 0.5));
+        } else {
+          caret.remove();
+          finished();
+        }
+      };
+      typeNext();
+    });
+
+  const revealOutputs = (section, instant) =>
+    new Promise((finished) => {
+      const chunks = section.querySelectorAll("[data-term-out]");
+      const stagger = (index) => Math.min(index * 70, 280);
+      chunks.forEach((chunk, index) => {
+        if (instant) chunk.classList.add("term-show");
+        else setTimeout(() => chunk.classList.add("term-show"), stagger(index));
+      });
+      if (instant) finished();
+      else setTimeout(finished, stagger(chunks.length - 1) + 200);
+    });
+
+  const playSection = async (section) => {
+    const rect = section.getBoundingClientRect();
+    const offscreen = rect.bottom < 0 || rect.top > window.innerHeight;
+    const prompt = section.querySelector(".prompt");
+    if (prompt) {
+      if (offscreen) prompt.classList.add("term-live");
+      else await typePrompt(prompt);
+    }
+    await revealOutputs(section, offscreen);
+  };
+
+  // sections play one after another, in the order they were triggered
+  let sequence = Promise.resolve();
+  const enqueue = (section) => {
+    sequence = sequence.then(() => playSection(section));
+  };
+
+  const start = () => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            observer.unobserve(entry.target);
+            enqueue(entry.target);
+          }
+        });
+      },
+      { rootMargin: "0px 0px -10% 0px" },
+    );
+    // keep a rooted reference: some engines GC observers held only by their targets
+    window.termAnimObserver = observer;
+    document.querySelectorAll("[data-term]").forEach((section) => {
+      // in or above the viewport: part of the load sequence (playSection reveals
+      // already-passed sections instantly); below: animate on scroll-in
+      if (section.getBoundingClientRect().top < window.innerHeight) enqueue(section);
+      else observer.observe(section);
+    });
+    // once the initial on-screen content has finished, signal it so callers can
+    // chain a follow-up (e.g. a nav that "runs" afterwards)
+    sequence = sequence.then(() => {
+      window.termContentDone = true;
+      window.dispatchEvent(new Event("term:contentdone"));
+    });
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    start();
+  }
+}

package/runtime/theme.js

@@ -0,0 +1,107 @@
+/*
+ * danieldeusing-design — theme runtime.
+ *
+ * Framework-agnostic theme switching for the four terminal variants. No
+ * dependencies. The active theme lives in html[data-theme] and persists in
+ * localStorage under "theme".
+ *
+ * To avoid a flash of the wrong theme, call applyStoredTheme() from an inline
+ * <head> script BEFORE first paint (see the snippet in the README). Then call
+ * initThemeSwitcher() after the DOM is ready to wire up the toggle controls.
+ */
+
+/** @typedef {"warm" | "green" | "mono" | "paper"} Theme */
+
+/** All available themes, in menu order. */
+export const THEMES = /** @type {const} */ (["warm", "green", "mono", "paper"]);
+
+/** Each theme's background, mirrored into <meta name="theme-color"> for mobile chrome. */
+export const THEME_BACKGROUNDS = {
+  warm: "#f5efe2",
+  green: "#020604",
+  mono: "#050505",
+  paper: "#fafafa",
+};
+
+const STORAGE_KEY = "theme";
+const DEFAULT_THEME = "warm";
+
+/** The persisted theme, or "warm" if none/invalid. */
+export function getStoredTheme() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && THEMES.includes(/** @type {Theme} */ (stored))) return stored;
+  } catch {
+    /* localStorage can throw in private mode / sandboxed frames */
+  }
+  return DEFAULT_THEME;
+}
+
+/**
+ * Apply a theme to <html> and sync the meta theme-color. Does NOT persist —
+ * use setTheme() for that.
+ *
+ * @param {Theme} theme
+ * @param {{ faviconHref?: (theme: Theme) => string }} [options]
+ *   faviconHref, if given, also updates <link id="favicon"> — useful for apps
+ *   that ship a per-theme favicon. Omit to leave the favicon untouched.
+ */
+export function applyTheme(theme, options = {}) {
+  const root = document.documentElement;
+  root.dataset.theme = theme;
+  document
+    .querySelector('meta[name="theme-color"]')
+    ?.setAttribute("content", THEME_BACKGROUNDS[theme] ?? THEME_BACKGROUNDS[DEFAULT_THEME]);
+  if (options.faviconHref) {
+    document.getElementById("favicon")?.setAttribute("href", options.faviconHref(theme));
+  }
+}
+
+/**
+ * Persist and apply a theme. No-op for an unknown theme name.
+ * @param {Theme} theme
+ * @param {{ faviconHref?: (theme: Theme) => string }} [options]
+ */
+export function setTheme(theme, options) {
+  if (!THEMES.includes(theme)) return;
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    /* ignore */
+  }
+  applyTheme(theme, options);
+}
+
+/**
+ * Apply the persisted theme. Call this pre-paint (inline, in <head>) to prevent
+ * a flash of the default theme on load.
+ * @param {{ faviconHref?: (theme: Theme) => string }} [options]
+ */
+export function applyStoredTheme(options) {
+  applyTheme(getStoredTheme(), options);
+}
+
+/**
+ * Wire up a theme switcher built from the standard markup:
+ *   <button data-theme-value="green">green</button>   (one per theme)
+ *   <span data-theme-label></span>                     (shows the active theme)
+ * @param {{ faviconHref?: (theme: Theme) => string }} [options]
+ */
+export function initThemeSwitcher(options) {
+  const labels = document.querySelectorAll("[data-theme-label]");
+  const syncLabel = () => {
+    const theme = document.documentElement.dataset.theme ?? DEFAULT_THEME;
+    labels.forEach((label) => {
+      label.textContent = theme;
+    });
+  };
+  syncLabel();
+
+  document.querySelectorAll("[data-theme-value]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const theme = /** @type {HTMLElement} */ (button).dataset.themeValue;
+      if (theme) setTheme(/** @type {Theme} */ (theme), options);
+      syncLabel();
+    });
+  });
+}

package/runtime/zoom.js

@@ -0,0 +1,25 @@
+/*
+ * danieldeusing-design — resolution-independent zoom.
+ *
+ * Lays the page out at a fixed reference width, then scales the whole view up
+ * to fill wider screens — so 2K / 4K / 8K render the identical layout, just
+ * bigger (a true zoom of everything, not font scaling). Never scales below 1×,
+ * so screens up to the reference width keep their normal responsive layout.
+ *
+ * Apply pre-paint (inline, in <head>) to avoid a flash at the unscaled size.
+ */
+
+/**
+ * @param {number} [referenceWidth=1920] The width the layout is authored for.
+ *   On a viewport wider than this, the page is zoomed by viewport/reference.
+ */
+export function initResolutionZoom(referenceWidth = 1920) {
+  const applyZoom = () => {
+    // `zoom` is the right primitive here: unlike transform: scale it reflows
+    // and keeps the document height correct. Widely supported in evergreen
+    // browsers as of 2024.
+    document.documentElement.style.zoom = String(Math.max(1, window.innerWidth / referenceWidth));
+  };
+  applyZoom();
+  window.addEventListener("resize", applyZoom);
+}

package/src/base.css

@@ -0,0 +1,68 @@
+/*
+ * danieldeusing-design — base layer.
+ *
+ * The document-level look of the terminal theme: monospace body, CRT scanline
+ * overlay, phosphor selection, themed default border colour. Resolves against
+ * tokens.css (load that first). Plain CSS — no Tailwind required.
+ */
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Default any element's border to the themed colour, so a bare `border-width`
+   (or a Tailwind `border` utility) paints in the theme border rather than the
+   element's currentColor. Mirrors the canonical `* { @apply border-border }`. */
+*,
+*::before,
+*::after {
+  border-color: var(--border);
+}
+
+/* Visible, on-theme focus ring for keyboard navigation. */
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Tailwind v4's reset drops the default button cursor — restore it for all
+   interactive controls (buttons, summaries, role=button). */
+button:not(:disabled),
+summary,
+[role="button"] {
+  cursor: pointer;
+}
+
+/* CRT scanlines: a fixed, non-interactive overlay above the page. Intensity is
+   per-theme via --scanline-opacity. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.25) 0px,
+    rgba(0, 0, 0, 0.25) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  opacity: var(--scanline-opacity);
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}

package/src/components.css

@@ -0,0 +1,288 @@
+/*
+ * danieldeusing-design — component layer.
+ *
+ * Reusable, framework-agnostic primitives in plain CSS (no Tailwind @apply), so
+ * they render identically in an Astro/React/Angular app, a Tauri webview, or a
+ * single static HTML file. Every value resolves against tokens.css.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Phosphor glow — for bright, "lit" elements (brand mark, active items).
+   ───────────────────────────────────────────────────────────────────────── */
+.glow {
+  color: var(--primary);
+  text-shadow: 0 0 8px var(--glow);
+}
+.glow-lg {
+  color: var(--primary);
+  text-shadow: 0 0 12px var(--glow);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Shell affordances — `$ command` section headers and `# comment` lines.
+   ───────────────────────────────────────────────────────────────────────── */
+.prompt {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--muted-foreground);
+}
+.prompt::before {
+  content: "$ ";
+  color: var(--primary);
+}
+
+.comment::before {
+  content: "# ";
+  color: var(--border);
+}
+
+/* Blinking block cursor — pair with a brand mark or end-of-line. */
+.cursor-block {
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 8px;
+  background: var(--primary);
+  vertical-align: baseline;
+  transform: translateY(0.12em);
+  animation: ddd-blink 1.1s step-end infinite;
+}
+@keyframes ddd-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Primary CTA — `> label` with a phosphor glow that lifts on hover.
+   ───────────────────────────────────────────────────────────────────────── */
+.btn-terminal {
+  display: inline-block;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: 700;
+  padding: 12px 24px;
+  box-shadow: 0 0 16px var(--glow);
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+.btn-terminal::before {
+  content: "> ";
+}
+.btn-terminal:hover {
+  box-shadow: 0 0 28px var(--glow);
+  transform: translateY(-2px);
+}
+
+/* Quiet, underlined link that warms to the primary colour on hover. */
+.link-quiet {
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  transition: color 0.15s ease;
+}
+.link-quiet:hover {
+  color: var(--primary);
+}
+
+/* ASCII horizontal rule — a clipped, full-width row of box-drawing dashes that
+   reads like a terminal separator. Use on an <hr> or <div>; the dashes are a
+   decorative ::before clipped to the element width. */
+.ascii-rule {
+  margin: 1rem 0;
+  border: 0;
+  color: var(--border);
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+}
+.ascii-rule::before {
+  content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Card — bordered surface that warms its border and glows softly on hover.
+   ───────────────────────────────────────────────────────────────────────── */
+.card-terminal {
+  background: var(--card);
+  border: 1px solid var(--border);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.card-terminal:hover {
+  border-color: var(--primary);
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Dropdown — a <details class="dropdown"> with a <summary> trigger and a
+   floating panel. Pairs with runtime/dropdown.js (close-others, click-away,
+   Escape). The panel opens UPWARD by default (for status-bar / footer menus);
+   add .dropdown-panel--down to open below the trigger.
+   ───────────────────────────────────────────────────────────────────────── */
+.dropdown {
+  position: relative;
+}
+.dropdown > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  color: var(--muted-foreground);
+  transition: color 0.15s ease;
+}
+.dropdown > summary::-webkit-details-marker {
+  display: none;
+}
+.dropdown > summary:hover,
+.dropdown[open] > summary {
+  color: var(--primary);
+}
+.dropdown-panel {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 12px);
+  z-index: 50;
+  min-width: 128px;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+/* open below the trigger instead of above */
+.dropdown-panel--down {
+  top: calc(100% + 8px);
+  bottom: auto;
+  left: 0;
+  right: auto;
+}
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 14px;
+  text-align: left;
+  font: inherit;
+  line-height: 1.5;
+  background: none;
+  border: 0;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+}
+.dropdown-item:hover {
+  color: var(--primary);
+  background: var(--muted);
+}
+.dropdown-item[aria-current="true"],
+html:not([data-theme]) .dropdown-item[data-theme-value="warm"],
+html[data-theme="green"] .dropdown-item[data-theme-value="green"],
+html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],
+html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],
+html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
+  color: var(--primary);
+  text-shadow: 0 0 8px var(--glow);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   ELI5 — an "explain like I'm 5" callout box (first-time-term explainers).
+   ───────────────────────────────────────────────────────────────────────── */
+.eli5 {
+  margin: 1.25em 0;
+  padding: 0.7em 1em;
+  color: var(--foreground);
+  background: color-mix(in srgb, var(--primary) 7%, var(--card));
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--primary);
+  border-radius: var(--radius);
+  font-size: 0.92em;
+  line-height: 1.6;
+}
+.eli5::before {
+  content: "ELI5";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.6em;
+  vertical-align: 0.08em;
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  padding: 0.34em 0.6em;
+  border-radius: 5px;
+  background: #b42318;
+  color: #fff;
+}
+.eli5-term {
+  font-weight: 700;
+  color: var(--primary);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Animation kill-switch — add html.anim-off (e.g. from a footer "animations
+   off" toggle) to stop ALL motion regardless of the OS reduced-motion setting.
+   runtime/terminal.js also bails when this class is present, so content stays
+   visible. Complements the prefers-reduced-motion handling below.
+   ───────────────────────────────────────────────────────────────────────── */
+html.anim-off *,
+html.anim-off *::before,
+html.anim-off *::after {
+  animation: none !important;
+  transition: none !important;
+}
+html.anim-off .cursor-block {
+  opacity: 1;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Terminal session animation — `$ command` prompts type out, then their
+   section's content reveals like command output. Pairs with
+   runtime/terminal.js, which adds html.term-anim pre-paint. With JS disabled
+   or prefers-reduced-motion, the gate is never added and nothing is hidden, so
+   all content is visible by default (progressive enhancement).
+
+   Markup: a section gets [data-term]; its prompt uses .prompt; each chunk of
+   output gets [data-term-out].
+   ───────────────────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  /* pending prompt: fully invisible (incl. the `$ ` prefix), line box reserved */
+  html.term-anim [data-term] .prompt:not(.term-live),
+  html.term-anim [data-term] .prompt:not(.term-live)::before {
+    color: transparent;
+  }
+  /* pending output: keep layout (no CLS), no interaction until revealed */
+  html.term-anim [data-term] [data-term-out]:not(.term-show) {
+    visibility: hidden;
+  }
+  /* phosphor warm-up flicker as output appears */
+  html.term-anim [data-term] [data-term-out].term-show {
+    animation: ddd-term-output 0.2s steps(3, end) both;
+  }
+  @keyframes ddd-term-output {
+    from {
+      opacity: 0;
+    }
+  }
+  /* caret at the typing edge (created by runtime/terminal.js) */
+  .term-caret {
+    display: inline-block;
+    width: 0.55em;
+    height: 1em;
+    margin-left: 2px;
+    background: var(--primary);
+    vertical-align: baseline;
+    transform: translateY(0.12em);
+  }
+}

package/src/fonts.css

@@ -0,0 +1,40 @@
+/*
+ * danieldeusing-design — JetBrains Mono webfont (optional).
+ *
+ * The token stack leads with "JetBrains Mono Variable", which the apps self-host
+ * via @fontsource-variable/jetbrains-mono. On a build-free one-page HTML doc
+ * there is no bundler to provide it, so the stack silently falls back to Menlo.
+ * Import this file (or <link> it) to pull the real variable font from a pinned
+ * CDN so one-pagers are pixel-identical to the apps.
+ *
+ *   <link rel="stylesheet" href=".../src/fonts.css">           (CDN)
+ *   @import "@danieldeusing/design/fonts.css";                  (bundler)
+ *
+ * Deliberately NOT part of index.css / the dist bundle — that keeps the core
+ * lean and fully offline. Subsets: latin + latin-ext (covers EN/DE/ES/PT).
+ * Pinned to @fontsource-variable/jetbrains-mono@5.2.8 (SIL OFL licensed).
+ */
+
+/* latin */
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.2.8/files/jetbrains-mono-latin-wght-normal.woff2")
+    format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.2.8/files/jetbrains-mono-latin-ext-wght-normal.woff2")
+    format("woff2-variations");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
+    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}

package/src/index.css

@@ -0,0 +1,19 @@
+/*
+ * danieldeusing-design — build-free bundle.
+ *
+ * The no-Tailwind entry point. Import this one file and you get the full
+ * terminal theme: a minimal reset, the four-theme token set, the document base,
+ * and every component primitive. Works in plain HTML, React, Angular, Vue, a
+ * Tauri webview — anywhere CSS @import is understood, with no build step.
+ *
+ *   import "@danieldeusing/design";          // package "." export
+ *   <link rel="stylesheet" href=".../dist/danieldeusing-design.css">  // CDN
+ *
+ * Tailwind v4 apps should import "@danieldeusing/design/tailwind.css" instead,
+ * which adds the @theme mapping (and skips the reset, since Preflight covers it).
+ */
+
+@import "./reset.css";
+@import "./tokens.css";
+@import "./base.css";
+@import "./components.css";