@lnsy/data-table 0.1.0

package/src/wikilinks.js

@@ -0,0 +1,71 @@
+/**
+ * Wikilinks
+ *
+ * Renders `[[Page Name]]` references inside cell values as clickable links.
+ *
+ * - If the component has a `wikilink-base-url` attribute, links point to
+ *   `${base}${encodeURIComponent(target)}`.
+ * - Otherwise clicking a link dispatches a bubbling `wikilink-navigate`
+ *   CustomEvent with `{ detail: { target, cell: { row, col } } }`, which the
+ *   host application can handle (routing, filtering, opening a panel…).
+ */
+
+const WIKILINK_RE = /\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g;
+
+/**
+ * Render a cell value into a DocumentFragment.
+ * Plain text is inserted as text nodes; `[[target]]` and
+ * `[[target|label]]` become anchor elements.
+ */
+export function renderCellValue(text) {
+  const fragment = document.createDocumentFragment();
+  const value = text === null || text === undefined ? '' : String(text);
+
+  let lastIndex = 0;
+  WIKILINK_RE.lastIndex = 0;
+  let match;
+
+  while ((match = WIKILINK_RE.exec(value)) !== null) {
+    if (match.index > lastIndex) {
+      fragment.appendChild(
+        document.createTextNode(value.slice(lastIndex, match.index))
+      );
+    }
+    fragment.appendChild(createWikilink(match[1].trim(), match[2]?.trim()));
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < value.length) {
+    fragment.appendChild(document.createTextNode(value.slice(lastIndex)));
+  }
+
+  return fragment;
+}
+
+export function createWikilink(target, label) {
+  const link = document.createElement('a');
+  link.className = 'wikilink';
+  link.textContent = label || target;
+  link.dataset.target = target;
+  link.href = '#';
+  link.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const baseUrl = link.closest('[data-wikilink-base]')?.dataset.wikilinkBase;
+    if (baseUrl) {
+      window.open(`${baseUrl}${encodeURIComponent(target)}`, '_blank');
+    }
+    link.dispatchEvent(new CustomEvent('wikilink-navigate', {
+      bubbles: true,
+      composed: true,
+      detail: { target },
+    }));
+  });
+  return link;
+}
+
+/** True when the raw value contains at least one wikilink. */
+export function containsWikilink(text) {
+  WIKILINK_RE.lastIndex = 0;
+  return WIKILINK_RE.test(String(text ?? ''));
+}

package/styles/fonts.css

@@ -0,0 +1,111 @@
+/**
+ * Theme Fonts — mirrors the @font-face declarations in
+ * aaron-rss styles/dataroom-theme.css so <data-table> renders with the
+ * same families as the source theme.
+ *
+ *   - Roboto Condensed: headings and interface chrome (--font-header/--font-ui)
+ *   - EB Garamond: body text (--font-body)
+ *   - Atkynson Hyperlegible Mono: code and grid data (--font-mono)
+ */
+
+/* EB Garamond — variable font, weight range 400–800 */
+
+@font-face {
+  font-family: 'EB Garamond';
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('../assets/fonts/EBGaramond-VariableFont_wght.ttf') format('truetype-variations');
+}
+
+@font-face {
+  font-family: 'EB Garamond';
+  font-style: italic;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('../assets/fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
+}
+
+/* Roboto Condensed — variable font, weight range 100–900 */
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../assets/fonts/RobotoCondensed-VariableFont_wght.ttf') format('truetype-variations');
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../assets/fonts/RobotoCondensed-Italic-VariableFont_wght.ttf') format('truetype-variations');
+}
+
+/* Atkynson Hyperlegible Mono — static cuts, weights 300/400/500/700 */
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-Light.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-LightItalic.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-Italic.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-Medium.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-MediumItalic.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-Bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Atkynson Hyperlegible Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../assets/fonts/AtkinsonHyperlegibleMono/AtkynsonMonoNerdFont-BoldItalic.otf') format('opentype');
+}

package/styles/variables.css

@@ -0,0 +1,151 @@
+/*
+  Theme variables — mirrors aaron-rss styles/dataroom-theme.css so
+  <data-table> matches the source theme exactly: warm cream paper, warm
+  grey ink, dark-red accents, letterpress headings — with a matching dark
+  scheme via `prefers-color-scheme`.
+
+  The color, shadow and font values below are kept in sync with the
+  source theme. The "data-table extensions" section at the end defines
+  the few component-specific tokens the source theme doesn't have.
+*/
+
+:root {
+  color-scheme: light;
+
+  /* Colors */
+  --foreground: #1a1812;
+  --background: #f2ece2;
+  --accent: #9f1113;
+  --secondary: #6b0c0e;
+  --surface: #f2ece2;
+  --surface-alt: #d2cec0;
+  --muted: #6b6759;
+  --border: rgba(0,0,0,0.2);
+  --highlight: #9f1113;
+  --neutral-1: #6b6759;
+  --neutral-2: #8f8b7d;
+  --neutral-3: #f2ece2;
+  --foreground-dim: #000000;
+  --background-light: #ffffff;
+  --background-dark: #e2d5bf;
+  --highlight-bright: #b00002;
+  --highlight-dim: #8d2324;
+  --secondary-bright: #740305;
+  --secondary-dim: #621517;
+  --neutral-1-lighter: #878270;
+  --neutral-3-darker: #e2d5bf;
+  --accent-red: #9f1111;
+  --accent-green: #119f11;
+  --accent-blue: #11119f;
+  --accent-yellow: #9f9f11;
+  --accent-purple: #70119f;
+  --accent-cyan: #119f9f;
+
+  /* Semantic aliases — referenced directly by the component styles */
+  --color-heading: var(--foreground);
+  --color-link: var(--accent);
+  --color-link-hover: var(--secondary);
+
+  /* Shadows
+     Letterpress text effect on body text, plus bevel-style box
+     shadows for dialogs and inset-style for form inputs. */
+  --text-shadow:
+    -0.5px -0.5px 0 rgba(0, 0, 0, 0.20),
+     0.5px  0.5px 0 rgba(255, 255, 255, 0.3);
+  --box-shadow:
+    0.5px 0.5px 0 rgba(0, 0, 0, 0.40),
+    -0.5px -0.5px 0 rgba(255, 255, 255, 0.7);
+  --box-shadow-inset:
+    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.20),
+    inset -0.5px -0.5px 3px 1px rgba(255, 255, 255, 0.6);
+
+  /* Fonts */
+  --font-header: 'Roboto Condensed', sans-serif;
+  --font-ui: 'Roboto Condensed', sans-serif;
+  --font-mono: 'Atkynson Hyperlegible Mono', monospace;
+  --font-body: 'EB Garamond', serif;
+  --font-weight-h1: 400;
+  --font-weight-h2: 400;
+  --font-weight-h3: 400;
+  --font-weight-body: 400;
+  --font-size-h1: 38.4px;
+  --font-size-h2: 28.8px;
+  --font-size-h3: 21.6px;
+  --font-size-body: 21.2px;
+
+  /* ── data-table extensions ─────────────────────────────────
+     Component-specific tokens the source theme doesn't define.
+     The selection tint is the accent at low opacity, re-tinted for
+     the dark scheme's pale accent. */
+
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --selection-bg: rgba(159, 17, 19, 0.10);
+  --selection-border: var(--accent);
+
+  --interactive-hover: rgba(0, 0, 0, 0.05);
+  --code-background: var(--background-dark);
+
+  --grid-cell-height: 1.9rem;
+  --grid-header-height: 1.9rem;
+}
+
+/* Dark theme — mirrors the `prefers-color-scheme: dark` block in
+   aaron-rss styles/dataroom-theme.css; fonts are identical between the
+   two themes so they are not repeated. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    /* Colors */
+    --foreground: #e5c7a9;
+    --background: #1b1c25;
+    --accent: #ffe6bd;
+    --secondary: #8b7963;
+    --surface: #1b1c25;
+    --surface-alt: #1b1c25;
+    --muted: #aa9d7e;
+    --border: #e5c7a9;
+    --highlight: #d9d3c9;
+    --neutral-1: #868074;
+    --neutral-2: #404148;
+    --neutral-3: #1b1c25;
+    --foreground-dim: #bc7b39;
+    --background-light: #3b3d51;
+    --background-dark: #050608;
+    --highlight-bright: #e2d5c0;
+    --highlight-dim: #d1d1d1;
+    --secondary-bright: #c4ad92;
+    --secondary-dim: #ababab;
+    --neutral-1-lighter: #9e998f;
+    --neutral-3-darker: #050608;
+    --accent-red: #d9c9c9;
+    --accent-green: #c9d9c9;
+    --accent-blue: #c9c9d9;
+    --accent-yellow: #d9d9c9;
+    --accent-purple: #d4c9d9;
+    --accent-cyan: #c9d9d9;
+
+    /* Shadows
+       Letterpress effect adapted for a dark surface: the dark
+       shadow is deepened and the light highlight is softened so
+       the engrave stays subtle instead of glowing. */
+    --text-shadow:
+      -0.5px -0.5px 0 rgba(0, 0, 0, 0.60),
+       0.5px  0.5px 0 rgba(255, 255, 255, 0.12);
+    --box-shadow:
+      0.5px 0.5px 0 rgba(0, 0, 0, 0.60),
+      -0.5px -0.5px 0 rgba(255, 255, 255, 0.12);
+    --box-shadow-inset:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.50),
+      inset -0.5px -0.5px 3px 1px rgba(255, 255, 255, 0.10);
+
+    /* data-table extensions — dark values */
+    --selection-bg: rgba(255, 230, 189, 0.14);
+
+    --interactive-hover: rgba(255, 255, 255, 0.06);
+    --code-background: var(--background-dark);
+  }
+}