dbdocs 1.6.1__tar.gz → 1.6.2__tar.gz

{dbdocs-1.6.1 → dbdocs-1.6.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: dbdocs
-Version: 1.6.1
+Version: 1.6.2
 Summary: Alternative dbt docs site: Catalog + ERD + column-level lineage
 Project-URL: Homepage, https://github.com/datnguye/dbt-docs
 Project-URL: Repository, https://github.com/datnguye/dbt-docs

{dbdocs-1.6.1 → dbdocs-1.6.2}/dbdocs/site/bundle/assets/css/style.css

@@ -87,7 +87,7 @@ code, pre { font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; }
 .brand-generated { color: var(--text-soft); font-size: 12px; font-weight: 400; white-space: nowrap; }
 .search-wrap { position: relative; flex: 1; max-width: 520px; }
 #search {
-  width: 100%; padding: 7px 12px; border-radius: var(--radius);
+  width: 100%; padding: 7px 76px 7px 12px; border-radius: var(--radius);
   border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
 }
 #search:focus { outline: none; border-color: var(--accent); }
@@ -599,6 +599,178 @@ a.score-chip:hover {
 a.score-chip:hover .score-name { text-decoration: none; }
 a.score-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 @media (prefers-reduced-motion: reduce) { .score-chip { transition: none; } a.score-chip:hover { transform: none; } }
+
+/* ── theme transition ───────────────────────────────────────────────────────
+   A brief ease so toggling dark mode fades rather than snapping. Scoped only
+   to background/border/color so it doesn't make every interaction feel laggy.
+   Applied via the .theme-transition class that ui.js adds for 300ms then removes. */
+.theme-transition,
+.theme-transition *,
+.theme-transition *::before,
+.theme-transition *::after {
+  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease !important;
+}
+
+/* ── page-mount micro-transition ────────────────────────────────────────────
+   Subtle fade+slide-up when route() replaces #app content (150ms, fast). */
+@keyframes page-enter {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.page-enter { animation: page-enter 0.15s ease-out both; }
+
+/* ── graph skeleton loader ──────────────────────────────────────────────────
+   Shimmer gradient shown inside .graph-host while the React Flow bundle mounts.
+   Replaced by the graph once dbdocsGraph.mount() fires. */
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+.graph-skeleton {
+  width: 100%; height: 480px; border-radius: var(--radius);
+  background: linear-gradient(90deg,
+    var(--bg-soft) 25%,
+    var(--bg-elev) 37%,
+    var(--bg-soft) 63%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s linear infinite;
+}
+
+/* ── toast notifications ────────────────────────────────────────────────────
+   Corner-anchored stack. Individual toasts slide in from the right, fade out.
+   The ARIA live region (#toast-region) is visually positioned at the bottom-right. */
+#toast-region {
+  position: fixed; bottom: 24px; right: 24px; z-index: 200;
+  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
+  max-width: 320px;
+}
+.toast {
+  display: flex; align-items: center; gap: 10px; pointer-events: none;
+  padding: 10px 16px; border-radius: var(--radius);
+  background: var(--bg-elev); border: 1px solid var(--border);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15); color: var(--text);
+  font-size: 13px; font-weight: 500;
+  animation: toast-in 0.2s ease-out both;
+}
+.toast.toast-out {
+  animation: toast-out 0.2s ease-in both;
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(24px); }
+}
+
+/* ── command palette ────────────────────────────────────────────────────────
+   Centered modal overlay with a frosted backdrop. */
+#cmd-backdrop {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(0,0,0,0.45);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 15vh;
+}
+#cmd-palette {
+  width: min(640px, 92vw);
+  background: var(--bg-elev); border: 1px solid var(--border);
+  border-radius: calc(var(--radius) + 2px); box-shadow: 0 12px 48px rgba(0,0,0,0.24);
+  overflow: hidden;
+  animation: palette-in 0.14s ease-out both;
+}
+@keyframes palette-in {
+  from { opacity: 0; transform: scale(0.97) translateY(-8px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+.cmd-input-wrap {
+  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.cmd-input-wrap .ic { flex-shrink: 0; }
+#cmd-input {
+  flex: 1; border: none; outline: none; background: transparent;
+  font-size: 15px; color: var(--text); line-height: 1.4;
+}
+#cmd-input::placeholder { color: var(--text-soft); }
+.cmd-kbd-close {
+  flex-shrink: 0; padding: 2px 6px; border-radius: 4px;
+  background: var(--bg-soft); border: 1px solid var(--border);
+  color: var(--text-soft); font-size: 11px; font-family: inherit;
+}
+#cmd-results {
+  max-height: 360px; overflow-y: auto;
+  padding: 4px 0;
+}
+.cmd-result {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 16px; cursor: pointer; color: var(--text);
+  font-size: 13px; text-decoration: none;
+}
+.cmd-result:hover, .cmd-result.cmd-active {
+  background: var(--accent-soft); text-decoration: none;
+}
+.cmd-result-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmd-result-meta { font-size: 11px; color: var(--text-soft); white-space: nowrap; flex-shrink: 0; }
+.cmd-section-label {
+  padding: 6px 16px 2px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--text-soft);
+}
+.cmd-empty { padding: 20px 16px; text-align: center; color: var(--text-soft); font-size: 13px; }
+
+/* ── ⌘K hint in the search box ──────────────────────────────────────────────
+   A small kbd chip rendered inside .search-wrap (absolute-positioned right edge). */
+.cmd-hint {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  pointer-events: none;
+  display: flex; align-items: center; gap: 3px;
+}
+.cmd-hint kbd {
+  padding: 1px 5px; border-radius: 4px;
+  background: var(--bg-elev); border: 1px solid var(--border);
+  color: var(--text-soft); font-size: 10px; font-family: inherit;
+  line-height: 1.6;
+}
+
+/* ── sticky table headers ───────────────────────────────────────────────────
+   th in the Columns/Tests/other node-page tables stick at the top of their
+   scroll container (.content) on vertical scroll. background is explicitly set
+   so rows don't bleed through. */
+.node-section-body th {
+  position: sticky; top: 0; z-index: 2;
+  background: var(--bg-elev); box-shadow: 0 1px 0 var(--border);
+}
+
+/* ── scroll-spy active section ──────────────────────────────────────────────
+   When IntersectionObserver marks a node-section as visible, its summary gets a
+   subtle left accent stripe via the .section-in-view modifier. */
+details.node-section.section-in-view > summary.node-section-summary {
+  color: var(--accent);
+}
+details.node-section.section-in-view > summary.node-section-summary .node-section-title {
+  color: var(--accent);
+}
+details.node-section.section-in-view > summary.node-section-summary::before {
+  color: var(--accent);
+}
+
+/* ── Reduced-motion gate ────────────────────────────────────────────────────
+   Neutralize the palette/toast/page/skeleton/theme keyframes + transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .theme-transition,
+  .theme-transition *,
+  .theme-transition *::before,
+  .theme-transition *::after {
+    transition: none !important;
+  }
+  .page-enter { animation: none; }
+  .graph-skeleton { animation: none; background: var(--bg-soft); }
+  .toast { animation: none; }
+  .toast.toast-out { animation: none; opacity: 0; }
+  #cmd-palette { animation: none; }
+  @keyframes toast-in  { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
+  @keyframes toast-out { from { opacity: 0; transform: none; } to { opacity: 0; transform: none; } }
+}
 .score-chip.good { border-left-color: var(--score-good); }
 .score-chip.warn { border-left-color: var(--score-warn); }
 .score-chip.bad  { border-left-color: var(--score-bad); }
@@ -625,6 +797,10 @@ a.score-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2
 .health-error { background: var(--status-error-bg); color: var(--status-error-fg); border-color: var(--status-error-bd); }
 .health-skip  { background: var(--bg-soft); color: var(--text-soft); border-color: var(--border); }
 
+[data-theme="dark"] .toast { box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
+[data-theme="dark"] #cmd-palette { box-shadow: 0 12px 48px rgba(0,0,0,0.55); }
+[data-theme="dark"] #cmd-backdrop { background: rgba(0,0,0,0.65); }
+
 /* Hamburger + search toggle — hidden on desktop, revealed on phones below. */
 .nav-toggle { display: none; font-size: 18px; }
 .search-toggle { display: none; }

{dbdocs-1.6.1 → dbdocs-1.6.2}/dbdocs/site/bundle/assets/js/app.js

@@ -3,16 +3,16 @@
    Three tiers, one-way dependency (ui → service → data):
      data.js     loads + normalizes the project data dict.
      service.js  pure domain logic over that dict (no DOM).
-     ui.js       all DOM rendering.
+     ui/         all DOM rendering (dom.js primitives, ui.js renderer, overlays.js).
 
    This entry is the only place the three meet: load the data, hand it to the
    service tier, then boot the ui. Loaded as a native ES module (no build step).
    The vendored libs (MiniSearch, marked) and the React Flow graph bundle remain
    classic scripts that set globals, which the modules read directly. */
 
-import { loadData } from "./data.js";
-import * as svc from "./service.js";
-import { boot } from "./ui.js";
+import { loadData } from "./data/data.js";
+import * as svc from "./service/service.js";
+import { boot } from "./ui/ui.js";
 
 loadData().then(function (data) {
   svc.init(data);

dbdocs-1.6.2/dbdocs/site/bundle/assets/js/ui/dom.js

@@ -0,0 +1,26 @@
+/* dbdocs SPA — tier 3 (ui): shared DOM primitives. */
+
+export function el(tag, attrs, children) {
+  var node = document.createElement(tag);
+  if (attrs) Object.keys(attrs).forEach(function (k) {
+    if (k === "class") node.className = attrs[k];
+    else if (k === "html") node.innerHTML = attrs[k];
+    else if (k === "text") node.textContent = attrs[k];
+    else if (k.slice(0, 2) === "on" && typeof attrs[k] === "function") node.addEventListener(k.slice(2), attrs[k]);
+    else if (attrs[k] != null) node.setAttribute(k, attrs[k]);
+  });
+  (children || []).forEach(function (c) { if (c != null) node.appendChild(typeof c === "string" ? document.createTextNode(c) : c); });
+  return node;
+}
+
+export function clear(node) { while (node.firstChild) node.removeChild(node.firstChild); }
+
+export var KNOWN_ICONS = {
+  api: 1, catalog: 1, dag: 1, database: 1, info: 1, schema: 1, graph: 1, model: 1, source: 1,
+  seed: 1, snapshot: 1, test: 1, unit_test: 1, metric: 1, semantic_model: 1,
+  exposure: 1, saved_query: 1, operation: 1, fullscreen: 1, link: 1, health: 1,
+};
+
+export function icon(name, size) {
+  return el("span", { class: "ic ic--" + name, style: "font-size:" + (size || 16) + "px" });
+}

dbdocs-1.6.2/dbdocs/site/bundle/assets/js/ui/overlays.js

@@ -0,0 +1,265 @@
+/* dbdocs SPA — tier 3 (ui): command palette + toast notifications. */
+
+import { el, icon } from "./dom.js";
+import * as svc from "../service/service.js";
+
+export var SEARCH_RESULT_CAP = 12;
+
+var _sharedMini = null;
+var _sharedDocs = null;
+
+export function isMacPlatform() {
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || "");
+}
+
+export function ensureSearchIndex() {
+  if (_sharedMini) return;
+  _sharedDocs = svc.searchDocs();
+  _sharedMini = new MiniSearch({
+    fields: svc.SEARCH_FIELDS.map(function (f) { return f.key; }),
+    storeFields: ["label", "resource_type", "schema"],
+    searchOptions: {
+      prefix: true,
+      fuzzy: 0.2,
+      boost: { label: 6, name: 6, columns: 3, tags: 2, relation: 2, description: 1, columnDescriptions: 1, code: 0.4 },
+    },
+  });
+  _sharedMini.addAll(_sharedDocs);
+}
+
+export function sharedDocs() { return _sharedDocs; }
+export function sharedMini() { return _sharedMini; }
+
+export function runSearchQuery(raw) {
+  var p = svc.parseSearchQuery(raw);
+  if (!p.text) {
+    if (!p.filterType) return [];
+    var picked = [];
+    for (var i = 0; i < _sharedDocs.length && picked.length < SEARCH_RESULT_CAP; i++) {
+      if (_sharedDocs[i].resource_type === p.filterType) picked.push(_sharedDocs[i]);
+    }
+    return picked;
+  }
+  var opts = {};
+  if (p.fields) opts.fields = p.fields;
+  if (p.filterType) opts.filter = function (h) { return h.resource_type === p.filterType; };
+  return _sharedMini.search(p.text, opts);
+}
+
+export function showToast(message) {
+  var region = document.getElementById("toast-region");
+  if (!region) return;
+  var toast = el("div", { class: "toast" }, [message]);
+  region.appendChild(toast);
+  setTimeout(function () {
+    toast.classList.add("toast-out");
+    toast.addEventListener("animationend", function () {
+      if (toast.parentNode) toast.parentNode.removeChild(toast);
+    }, { once: true });
+  }, 2200);
+}
+
+export function initCommandPalette() {
+  if (typeof MiniSearch === "undefined") return;
+
+  var isMac = isMacPlatform();
+  var focusBeforeOpen = null;
+  var paletteEl = null;
+  var activeIdx = -1;
+
+  function closePalette() {
+    if (!paletteEl) return;
+    var backdrop = document.getElementById("cmd-backdrop");
+    if (backdrop && backdrop.parentNode) backdrop.parentNode.removeChild(backdrop);
+    paletteEl = null;
+    activeIdx = -1;
+    if (focusBeforeOpen && typeof focusBeforeOpen.focus === "function") {
+      focusBeforeOpen.focus();
+    }
+    focusBeforeOpen = null;
+  }
+
+  function paletteResultRows() {
+    if (!paletteEl) return [];
+    return Array.prototype.slice.call(paletteEl.querySelectorAll(".cmd-result[data-idx]"));
+  }
+
+  function movePaletteActive(delta) {
+    var rows = paletteResultRows();
+    if (!rows.length) return;
+    rows.forEach(function (r) {
+      r.classList.remove("cmd-active");
+      r.setAttribute("aria-selected", "false");
+    });
+    if (activeIdx < 0 && delta < 0) {
+      activeIdx = rows.length - 1;
+    } else {
+      activeIdx = (activeIdx + delta + rows.length) % rows.length;
+    }
+    var target = rows[activeIdx];
+    if (target) {
+      target.classList.add("cmd-active");
+      target.setAttribute("aria-selected", "true");
+      target.scrollIntoView({ block: "nearest" });
+      var input = document.getElementById("cmd-input");
+      if (input) input.setAttribute("aria-activedescendant", "cmd-opt-" + activeIdx);
+    }
+  }
+
+  function activateRow(row) {
+    if (!row) return;
+    var href = row.getAttribute("data-href");
+    if (href) location.hash = href;
+    else {
+      var action = row.getAttribute("data-action");
+      if (action === "toggle-theme") {
+        var t = document.getElementById("theme-toggle");
+        if (t) t.click();
+      } else if (action === "overview") {
+        location.hash = "#/overview";
+      } else if (action === "dag") {
+        location.hash = "#/dag";
+      } else if (action === "health") {
+        location.hash = "#/health";
+      } else if (action === "about") {
+        location.hash = "#/about";
+      }
+    }
+    closePalette();
+  }
+
+  function wireResultRow(row, i) {
+    row.addEventListener("mousedown", function (e) { e.preventDefault(); activateRow(row); });
+    row.addEventListener("click", function (e) { e.preventDefault(); activateRow(row); });
+    row.addEventListener("mouseover", function () {
+      activeIdx = i;
+      paletteResultRows().forEach(function (r) {
+        r.classList.remove("cmd-active");
+        r.setAttribute("aria-selected", "false");
+      });
+      row.classList.add("cmd-active");
+      row.setAttribute("aria-selected", "true");
+    });
+  }
+
+  function renderPaletteResults(query, resultsEl, input) {
+    while (resultsEl.firstChild) resultsEl.removeChild(resultsEl.firstChild);
+    activeIdx = -1;
+    input.removeAttribute("aria-activedescendant");
+
+    var q = query.trim();
+
+    if (!q) {
+      var actions = [
+        { label: "Catalog overview", icon: "catalog", action: "overview" },
+        { label: "Lineage / DAG", icon: "dag", action: "dag" },
+        { label: "Toggle theme", icon: "info", action: "toggle-theme" },
+      ];
+      if (svc.healthEnabled()) {
+        actions.splice(2, 0, { label: "Health Check", icon: "health", action: "health" });
+      }
+      if (svc.meta().show_about !== false) {
+        actions.splice(actions.length, 0, { label: "About / JSON API", icon: "api", action: "about" });
+      }
+      resultsEl.appendChild(el("div", { class: "cmd-section-label" }, ["Quick actions"]));
+      actions.forEach(function (a, i) {
+        var row = el("div", {
+          class: "cmd-result", tabindex: "-1",
+          role: "option", "aria-selected": "false",
+          id: "cmd-opt-" + i, "data-idx": String(i), "data-action": a.action,
+        }, [icon(a.icon, 15), el("span", { class: "cmd-result-label" }, [a.label])]);
+        wireResultRow(row, i);
+        resultsEl.appendChild(row);
+      });
+      return;
+    }
+
+    ensureSearchIndex();
+    var hits = runSearchQuery(q).slice(0, SEARCH_RESULT_CAP);
+
+    if (!hits.length) {
+      resultsEl.appendChild(el("div", { class: "cmd-empty" }, ['No results for "' + q + '".']));
+      return;
+    }
+
+    resultsEl.appendChild(el("div", { class: "cmd-section-label" }, ["Nodes"]));
+    hits.forEach(function (h, i) {
+      var href = "#/node/" + encodeURIComponent(h.id);
+      var row = el("div", {
+        class: "cmd-result", tabindex: "-1",
+        role: "option", "aria-selected": "false",
+        id: "cmd-opt-" + i, "data-idx": String(i), "data-href": href,
+      }, [
+        el("span", { class: "dot " + h.resource_type }),
+        el("span", { class: "cmd-result-label" }, [h.label]),
+        el("span", { class: "cmd-result-meta" }, [h.resource_type + (h.schema ? " · " + h.schema : "")]),
+      ]);
+      wireResultRow(row, i);
+      resultsEl.appendChild(row);
+    });
+  }
+
+  function openPalette() {
+    if (document.getElementById("cmd-backdrop")) return;
+    focusBeforeOpen = document.activeElement;
+
+    var input = el("input", {
+      id: "cmd-input", type: "search", autocomplete: "off",
+      placeholder: "Search nodes or type a command…",
+      "aria-label": "Command palette",
+      "aria-autocomplete": "list",
+      "aria-controls": "cmd-results",
+    });
+    var resultsEl = el("div", { id: "cmd-results", role: "listbox", "aria-label": "Results" });
+
+    var palette = el("div", {
+      id: "cmd-palette",
+      role: "dialog", "aria-modal": "true", "aria-label": "Command palette",
+    }, [
+      el("div", { class: "cmd-input-wrap" }, [
+        icon("catalog", 16),
+        input,
+        el("kbd", { class: "cmd-kbd-close" }, ["Esc"]),
+      ]),
+      resultsEl,
+    ]);
+
+    var backdrop = el("div", { id: "cmd-backdrop" }, [palette]);
+    document.body.appendChild(backdrop);
+    paletteEl = palette;
+
+    renderPaletteResults("", resultsEl, input);
+    input.focus();
+
+    input.addEventListener("input", function () {
+      renderPaletteResults(input.value, resultsEl, input);
+    });
+
+    input.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") { e.preventDefault(); closePalette(); }
+      else if (e.key === "ArrowDown") { e.preventDefault(); movePaletteActive(1); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); movePaletteActive(-1); }
+      else if (e.key === "Enter") {
+        e.preventDefault();
+        var rows = paletteResultRows();
+        activateRow(rows[activeIdx >= 0 ? activeIdx : 0]);
+      }
+    });
+
+    backdrop.addEventListener("mousedown", function (e) {
+      if (e.target === backdrop) closePalette();
+    });
+  }
+
+  document.addEventListener("keydown", function (e) {
+    var modKey = isMac ? e.metaKey : e.ctrlKey;
+    if (modKey && e.key === "k") {
+      e.preventDefault();
+      if (document.getElementById("cmd-backdrop")) closePalette();
+      else openPalette();
+    }
+    if (e.key === "Escape" && document.getElementById("cmd-backdrop")) {
+      closePalette();
+    }
+  });
+}