@majeanson/lac 3.5.2 → 3.5.3

package/dist/index.mjs

@@ -22919,6 +22919,848 @@ loop();
 </html>`;
 }
 //#endregion
+//#region src/lib/views.ts
+/** Fields always shown at summary density regardless of view */
+const SUMMARY_FIELDS = new Set([
+	"featureKey",
+	"title",
+	"status",
+	"domain",
+	"priority",
+	"tags",
+	"problem"
+]);
+const VIEW_NAMES = [
+	"dev",
+	"product",
+	"user",
+	"support",
+	"tech"
+];
+/** Always-present identity fields included in every view */
+const IDENTITY = [
+	"featureKey",
+	"title",
+	"status",
+	"domain"
+];
+const VIEWS = {
+	user: {
+		name: "user",
+		label: "User",
+		description: "Plain-language guide — what the feature does and why it exists",
+		fields: new Set([
+			"title",
+			"problem",
+			"userGuide",
+			"successCriteria",
+			"tags"
+		])
+	},
+	support: {
+		name: "support",
+		label: "Support",
+		description: "Known limitations, annotations, and escalation context for support teams",
+		fields: new Set([
+			...IDENTITY,
+			"owner",
+			"problem",
+			"knownLimitations",
+			"annotations",
+			"tags"
+		])
+	},
+	product: {
+		name: "product",
+		label: "Product",
+		description: "Business problem, success criteria, and strategic decisions — no implementation details",
+		fields: new Set([
+			...IDENTITY,
+			"owner",
+			"priority",
+			"problem",
+			"analysis",
+			"userGuide",
+			"pmSummary",
+			"successCriteria",
+			"acceptanceCriteria",
+			"decisions",
+			"knownLimitations",
+			"tags",
+			"releaseVersion"
+		])
+	},
+	dev: {
+		name: "dev",
+		label: "Developer",
+		description: "Full implementation context — code, decisions, snippets, and lineage",
+		fields: new Set([
+			...IDENTITY,
+			"owner",
+			"priority",
+			"problem",
+			"analysis",
+			"implementation",
+			"implementationNotes",
+			"userGuide",
+			"successCriteria",
+			"acceptanceCriteria",
+			"testStrategy",
+			"decisions",
+			"knownLimitations",
+			"tags",
+			"annotations",
+			"lineage",
+			"componentFile",
+			"npmPackages",
+			"publicInterface",
+			"externalDependencies",
+			"codeSnippets"
+		])
+	},
+	tech: {
+		name: "tech",
+		label: "Technical",
+		description: "Complete technical record — all fields including history, revisions, and lineage",
+		fields: new Set([
+			...IDENTITY,
+			"schemaVersion",
+			"owner",
+			"priority",
+			"problem",
+			"analysis",
+			"implementation",
+			"implementationNotes",
+			"userGuide",
+			"pmSummary",
+			"successCriteria",
+			"acceptanceCriteria",
+			"testStrategy",
+			"decisions",
+			"knownLimitations",
+			"tags",
+			"annotations",
+			"lineage",
+			"statusHistory",
+			"revisions",
+			"componentFile",
+			"npmPackages",
+			"publicInterface",
+			"externalDependencies",
+			"codeSnippets",
+			"lastVerifiedDate",
+			"releaseVersion",
+			"superseded_by",
+			"superseded_from",
+			"merged_into",
+			"merged_from"
+		])
+	}
+};
+/**
+* Return a copy of `feature` with only the keys allowed by `view`.
+* Fields not in the view's set are omitted entirely.
+*/
+function applyView(feature, view) {
+	const result = {};
+	for (const key of Object.keys(feature)) if (view.fields.has(key)) result[key] = feature[key];
+	return result;
+}
+/**
+* Fields the HTML wiki renderer requires for sidebar navigation and routing.
+* These are always preserved regardless of view, so the wiki remains navigable.
+*/
+const HTML_NAV_FIELDS = new Set([
+	"featureKey",
+	"title",
+	"status",
+	"domain",
+	"lineage",
+	"priority"
+]);
+/**
+* Like `applyView`, but always preserves HTML navigation fields so the wiki
+* sidebar and routing continue to work correctly.
+*/
+function applyViewForHtml(feature, view) {
+	const result = {};
+	for (const key of Object.keys(feature)) if (view.fields.has(key) || HTML_NAV_FIELDS.has(key)) result[key] = feature[key];
+	return result;
+}
+/**
+* Apply density filtering to a feature.
+* - summary:  only SUMMARY_FIELDS (title, status, domain, priority, tags, problem snippet)
+* - standard: pass through unchanged (generators decide what to show)
+* - verbose:  pass through unchanged but callers should render VERBOSE_EXTRA_FIELDS too
+*
+* Returns the filtered feature and the resolved density level.
+*/
+function applyDensity(feature, density) {
+	if (density === "standard" || density === "verbose") return feature;
+	const result = {};
+	for (const key of Object.keys(feature)) if (SUMMARY_FIELDS.has(key)) if (key === "problem" && typeof feature[key] === "string") {
+		const prob = feature[key];
+		const firstSentence = prob.split(/[.!?]\s/)[0] ?? prob;
+		result[key] = firstSentence.length < prob.length ? firstSentence + "." : prob;
+	} else result[key] = feature[key];
+	return result;
+}
+/**
+* Resolve a view name against both built-in views and custom views from lac.config.json.
+*
+* Resolution order:
+*  1. If `name` matches a key in `customViews` (from lac.config.json), build a ViewConfig from it.
+*     If it has `extends`, merge on top of the built-in base.
+*  2. Otherwise fall back to VIEWS[name].
+*  3. If neither matches, return undefined.
+*/
+function resolveView(name, customViews = {}) {
+	const custom = customViews[name];
+	if (custom) {
+		const base = custom.extends ? VIEWS[custom.extends] : void 0;
+		const baseFields = base ? new Set(base.fields) : /* @__PURE__ */ new Set();
+		const fields = custom.fields ? new Set(custom.fields) : baseFields;
+		for (const f of IDENTITY) fields.add(f);
+		return {
+			name,
+			label: custom.label ?? base?.label ?? name,
+			description: custom.description ?? base?.description ?? `Custom view: ${name}`,
+			fields,
+			density: custom.density,
+			groupBy: custom.groupBy,
+			sortBy: custom.sortBy,
+			filterStatus: custom.filterStatus,
+			sections: custom.sections
+		};
+	}
+	return VIEW_NAMES.includes(name) ? VIEWS[name] : void 0;
+}
+/**
+* Sort and filter a feature list according to a resolved view profile.
+* This is called before passing features to any generator.
+*/
+function applyViewTransforms(features, profile) {
+	let result = [...features];
+	if (profile.filterStatus && profile.filterStatus.length > 0) result = result.filter((f) => profile.filterStatus.includes(f["status"]));
+	if (profile.sortBy === "priority") result.sort((a, b) => (a["priority"] ?? 99) - (b["priority"] ?? 99));
+	else if (profile.sortBy === "title") result.sort((a, b) => String(a["title"] ?? "").localeCompare(String(b["title"] ?? "")));
+	else if (profile.sortBy === "status") {
+		const order = {
+			active: 0,
+			draft: 1,
+			frozen: 2,
+			deprecated: 3
+		};
+		result.sort((a, b) => (order[a["status"]] ?? 9) - (order[b["status"]] ?? 9));
+	} else if (profile.sortBy === "lastVerifiedDate") result.sort((a, b) => String(b["lastVerifiedDate"] ?? "").localeCompare(String(a["lastVerifiedDate"] ?? "")));
+	return result;
+}
+//#endregion
+//#region src/lib/dataExportGenerator.ts
+/**
+* generateDataExport — produces `lac-data.json`, the universal bridge between
+* feature.jsons and any app/framework.
+*
+* Structure:
+*   meta    — project stats, generation timestamp, lac version
+*   features — one entry per feature with all identity fields + a `views` object
+*              containing pre-projected slices for each audience (user, dev, product, support)
+*
+* Apps consume this file to surface contextual help, documentation, and tutorials
+* without knowing about the LAC CLI or the feature.json file format.
+*
+* Output: lac-data.json
+*/
+function generateDataExport(features, projectName, options = {}) {
+	const { lacVersion = "3.5.0", customViews = {} } = options;
+	const customViewConfigs = {};
+	for (const [name, cfg] of Object.entries(customViews)) {
+		const baseFields = cfg.extends ? new Set(VIEWS[cfg.extends]?.fields ?? []) : /* @__PURE__ */ new Set();
+		const fieldSet = cfg.fields ? new Set(cfg.fields) : baseFields;
+		for (const f of [
+			"featureKey",
+			"title",
+			"status",
+			"domain"
+		]) fieldSet.add(f);
+		customViewConfigs[name] = { fields: fieldSet };
+	}
+	const domains = [...new Set(features.map((f) => f.domain).filter((d) => Boolean(d)))].sort();
+	const definedViews = [
+		"user",
+		"dev",
+		"product",
+		"support",
+		...Object.keys(customViews)
+	];
+	const entries = features.map((f) => {
+		const raw = f;
+		const entry = {
+			featureKey: f.featureKey,
+			title: f.title,
+			status: f.status,
+			domain: f.domain,
+			tags: f.tags ?? [],
+			priority: f.priority,
+			externalDependencies: f.externalDependencies ?? []
+		};
+		const views = {};
+		for (const viewName of [
+			"user",
+			"dev",
+			"product",
+			"support"
+		]) {
+			const viewDef = VIEWS[viewName];
+			const projected = applyView(raw, viewDef);
+			for (const id of [
+				"featureKey",
+				"title",
+				"status",
+				"domain"
+			]) delete projected[id];
+			if (Object.values(projected).some((v) => v !== void 0 && v !== null && v !== "" && !(Array.isArray(v) && v.length === 0))) views[viewName] = projected;
+		}
+		for (const [viewName, cfg] of Object.entries(customViewConfigs)) {
+			const projected = {};
+			for (const key of Object.keys(raw)) if (cfg.fields.has(key)) projected[key] = raw[key];
+			for (const id of [
+				"featureKey",
+				"title",
+				"status",
+				"domain"
+			]) delete projected[id];
+			if (Object.values(projected).some((v) => v !== void 0 && v !== null && v !== "" && !(Array.isArray(v) && v.length === 0))) views[viewName] = projected;
+		}
+		entry["views"] = views;
+		return entry;
+	});
+	const output = {
+		meta: {
+			projectName,
+			generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			lacVersion,
+			featureCount: features.length,
+			domains,
+			definedViews
+		},
+		features: entries
+	};
+	return JSON.stringify(output, null, 2);
+}
+//#endregion
+//#region src/lib/helpWidgetGenerator.ts
+/**
+* generateHelpWidget — produces `lac-help.js`, a zero-dependency vanilla JS bundle
+* that any web app can include to get contextual in-app help from feature.jsons.
+*
+* Usage in any web page:
+*   <script src="/lac/lac-help.js"><\/script>
+*   <script>LacHelp.init({ dataUrl: '/lac/lac-data.json' })<\/script>
+*   <button onclick="LacHelp.show('feat-2026-001')">?</button>
+*
+* Or as a Web Component (auto-initialises on first use):
+*   <lac-help feature-key="feat-2026-001" view="user"></lac-help>
+*
+* The generated JS is self-contained — no external deps, no build step required.
+* Reads lac-data.json (generated by `lac export --data`) for feature content.
+*
+* Panel UI:
+*   - Slide-in panel (right side, 380px), dark LAC amber design
+*   - Tab bar: User | Dev | Product
+*   - User tab:    userGuide (markdown rendered), knownLimitations as "Gotchas"
+*   - Dev tab:     componentFile chip, decisions, externalDependencies chips
+*   - Product tab: problem statement, successCriteria
+*   - "Open full guide →" link to /lac/lac-guide.html#featureKey
+*   - Full-text search across all features
+*/
+function generateHelpWidget(_features, projectName, options = {}) {
+	return `/*!
+ * lac-help.js — generated by @majeanson/lac
+ * Project: ${projectName}
+ * Usage: LacHelp.init({ dataUrl: '/lac/lac-data.json' })
+ *        LacHelp.show('featureKey')
+ */
+(function() {
+'use strict';
+
+var LAC_GUIDE_URL = '${options.guideUrl ?? "./lac-guide.html"}';
+var _data = null;
+var _config = { dataUrl: './lac-data.json', defaultView: 'user' };
+var _panel = null;
+var _overlay = null;
+var _currentKey = null;
+var _currentView = 'user';
+var _initPromise = null;
+
+// ── Markdown → HTML (subset) ───────────────────────────────────────────────
+function mdToHtml(raw) {
+  if (!raw) return '';
+  function escLine(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function inline(s) {
+    return escLine(s)
+      .replace(/\\*\\*\\*(.+?)\\*\\*\\*/g,'<strong><em>$1</em></strong>')
+      .replace(/\\*\\*(.+?)\\*\\*/g,'<strong>$1</strong>')
+      .replace(/\\*([^*\\n]+?)\\*/g,'<em>$1</em>')
+      .replace(/_([^_\\n]+?)_/g,'<em>$1</em>')
+      .replace(/\`([^\`]+)\`/g,'<code>$1</code>');
+  }
+  var blocks = raw.split(/\\n{2,}/);
+  var out = [];
+  for (var i = 0; i < blocks.length; i++) {
+    var block = blocks[i];
+    var lines = block.split('\\n');
+    var first = lines[0] ? lines[0].trim() : '';
+    if (/^#+\\s/.test(first)) {
+      out.push('<p class="lh-subhead">'+inline(first.replace(/^#+\\s+/,''))+'</p>');
+    } else if (lines.every(function(l){return /^\\s*[-*]\\s/.test(l);})) {
+      out.push('<ul class="lh-list">'+lines.map(function(l){
+        return '<li>'+inline(l.replace(/^\\s*[-*]\\s+/,''))+'</li>';
+      }).join('')+'</ul>');
+    } else {
+      out.push('<p class="lh-p">'+inline(block.replace(/\\n/g,' '))+'</p>');
+    }
+  }
+  return out.join('');
+}
+
+// ── CSS ────────────────────────────────────────────────────────────────────
+var CSS = \`
+#lac-help-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0);pointer-events:none;transition:background 0.25s}
+#lac-help-overlay.open{background:rgba(0,0,0,0.35);pointer-events:auto}
+#lac-help-panel{
+  position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100vw;z-index:9999;
+  background:#0f0d0b;border-left:1px solid #262018;
+  display:flex;flex-direction:column;
+  transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
+  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
+  font-size:13px;color:#ece3d8;
+  box-shadow:-8px 0 32px rgba(0,0,0,0.5);
+}
+#lac-help-panel.open{transform:translateX(0)}
+.lh-topbar{
+  display:flex;align-items:center;gap:10px;padding:0 16px;height:46px;
+  background:#0b0a08;border-bottom:1px solid #262018;flex-shrink:0;
+}
+.lh-brand{font-family:monospace;font-size:11px;color:#c4a255;letter-spacing:0.06em}
+.lh-title{font-size:12px;color:#b0a494;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lh-close{
+  width:28px;height:28px;border-radius:6px;border:1px solid #262018;
+  background:transparent;color:#736455;font-size:16px;cursor:pointer;
+  display:flex;align-items:center;justify-content:center;flex-shrink:0;
+  transition:color 0.15s,border-color 0.15s;
+}
+.lh-close:hover{color:#ece3d8;border-color:#736455}
+.lh-tabs{
+  display:flex;border-bottom:1px solid #262018;flex-shrink:0;background:#0b0a08;
+}
+.lh-tab{
+  flex:1;padding:10px 4px;font-size:11px;letter-spacing:0.04em;text-align:center;
+  color:#736455;cursor:pointer;border-bottom:2px solid transparent;
+  transition:color 0.15s,border-color 0.15s;background:none;border-top:none;border-left:none;border-right:none;
+}
+.lh-tab.active{color:#c4a255;border-bottom-color:#c4a255}
+.lh-tab:hover:not(.active){color:#b0a494}
+.lh-body{flex:1;overflow-y:auto;padding:18px 16px 24px;scrollbar-width:thin;scrollbar-color:#262018 transparent}
+.lh-body::-webkit-scrollbar{width:4px}
+.lh-body::-webkit-scrollbar-track{background:transparent}
+.lh-body::-webkit-scrollbar-thumb{background:#262018;border-radius:2px}
+.lh-section{margin-bottom:18px}
+.lh-label{
+  font-family:monospace;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
+  color:#736455;margin-bottom:7px;
+}
+.lh-p{margin-bottom:8px;line-height:1.6;color:#b0a494}
+.lh-subhead{font-size:12px;font-weight:600;color:#ece3d8;margin-bottom:5px;margin-top:10px}
+.lh-list{padding-left:16px;margin-bottom:8px}
+.lh-list li{line-height:1.6;color:#b0a494;margin-bottom:2px}
+code{font-family:monospace;font-size:11px;background:#181512;padding:1px 5px;border-radius:3px;color:#c4a255}
+.lh-chip{
+  display:inline-flex;align-items:center;gap:4px;
+  padding:3px 9px;margin:2px 3px 2px 0;border-radius:4px;
+  background:#181512;border:1px solid #262018;
+  font-family:monospace;font-size:10px;color:#b0a494;
+}
+.lh-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
+.lh-decision{
+  padding:10px 12px;border-radius:6px;background:#181512;border:1px solid #262018;
+  margin-bottom:8px;
+}
+.lh-decision-q{font-size:12px;font-weight:600;color:#ece3d8;margin-bottom:4px;line-height:1.4}
+.lh-decision-r{font-size:11px;color:#736455;line-height:1.5}
+.lh-limitation{
+  padding:8px 10px;border-radius:5px;background:rgba(204,91,91,0.08);
+  border-left:2px solid rgba(204,91,91,0.4);margin-bottom:6px;
+  font-size:12px;color:#b0a494;line-height:1.5;
+}
+.lh-guide-link{
+  display:flex;align-items:center;justify-content:center;gap:6px;
+  margin-top:20px;padding:10px;border-radius:7px;border:1px solid #262018;
+  font-size:12px;color:#c4a255;text-decoration:none;
+  transition:border-color 0.15s,background 0.15s;
+}
+.lh-guide-link:hover{border-color:#c4a255;background:rgba(196,162,85,0.06)}
+.lh-search-row{padding:10px 12px;border-bottom:1px solid #262018;flex-shrink:0;background:#0b0a08}
+.lh-search{
+  width:100%;padding:7px 10px;border-radius:6px;border:1px solid #262018;
+  background:#181512;color:#ece3d8;font-size:12px;outline:none;
+  transition:border-color 0.15s;box-sizing:border-box;
+}
+.lh-search:focus{border-color:#c4a255}
+.lh-search::placeholder{color:#736455}
+.lh-search-results{
+  position:absolute;left:0;right:0;top:100%;z-index:1;
+  background:#181512;border:1px solid #262018;border-radius:0 0 8px 8px;
+  max-height:240px;overflow-y:auto;display:none;
+}
+.lh-search-results.visible{display:block}
+.lh-sr-item{
+  padding:10px 14px;cursor:pointer;border-bottom:1px solid #1a1714;
+  transition:background 0.1s;
+}
+.lh-sr-item:last-child{border-bottom:none}
+.lh-sr-item:hover{background:#1e1a16}
+.lh-sr-title{font-size:12px;font-weight:600;color:#ece3d8;margin-bottom:2px}
+.lh-sr-domain{font-family:monospace;font-size:10px;color:#736455}
+.lh-empty{font-size:12px;color:#736455;font-style:italic;padding:8px 0}
+.lh-footer{
+  flex-shrink:0;padding:10px 16px;border-top:1px solid #262018;
+  font-family:monospace;font-size:9px;color:#736455;letter-spacing:0.05em;text-align:center;background:#0b0a08;
+}
+\`;
+
+// ── DOM bootstrap ──────────────────────────────────────────────────────────
+function injectStyles() {
+  if (document.getElementById('lac-help-styles')) return;
+  var s = document.createElement('style');
+  s.id = 'lac-help-styles';
+  s.textContent = CSS;
+  document.head.appendChild(s);
+}
+
+function buildPanel() {
+  injectStyles();
+
+  _overlay = document.createElement('div');
+  _overlay.id = 'lac-help-overlay';
+  _overlay.addEventListener('click', function(e) {
+    if (e.target === _overlay) LacHelp.hide();
+  });
+
+  _panel = document.createElement('div');
+  _panel.id = 'lac-help-panel';
+  _panel.setAttribute('role', 'dialog');
+  _panel.setAttribute('aria-modal', 'true');
+  _panel.innerHTML =
+    '<div class="lh-topbar">' +
+      '<span class="lh-brand">lac</span>' +
+      '<span class="lh-title" id="lh-title"></span>' +
+      '<button class="lh-close" id="lh-close" aria-label="Close help">✕</button>' +
+    '</div>' +
+    '<div class="lh-search-row" style="position:relative">' +
+      '<input class="lh-search" id="lh-search" type="search" placeholder="Search features…" autocomplete="off">' +
+      '<div class="lh-search-results" id="lh-sr"></div>' +
+    '</div>' +
+    '<div class="lh-tabs" id="lh-tabs"></div>' +
+    '<div class="lh-body" id="lh-body"></div>' +
+    '<div class="lh-footer">Generated by <strong style="color:#c4a255">@majeanson/lac</strong></div>';
+
+  document.body.appendChild(_overlay);
+  document.body.appendChild(_panel);
+
+  document.getElementById('lh-close').addEventListener('click', function() { LacHelp.hide(); });
+
+  // Search
+  var searchEl = document.getElementById('lh-search');
+  var srEl = document.getElementById('lh-sr');
+  searchEl.addEventListener('input', function() {
+    var q = searchEl.value.trim().toLowerCase();
+    if (!q || !_data) { srEl.innerHTML = ''; srEl.classList.remove('visible'); return; }
+    var results = LacHelp.search(q).slice(0, 8);
+    if (!results.length) {
+      srEl.innerHTML = '<div class="lh-sr-item"><div class="lh-sr-title" style="color:#736455">No results</div></div>';
+    } else {
+      srEl.innerHTML = results.map(function(f) {
+        return '<div class="lh-sr-item" data-key="'+f.featureKey+'">' +
+          '<div class="lh-sr-title">'+escHtml(f.title)+'</div>' +
+          '<div class="lh-sr-domain">'+(f.domain||'').replace(/-/g,' ')+' · '+f.status+'</div>' +
+          '</div>';
+      }).join('');
+    }
+    srEl.classList.add('visible');
+    srEl.querySelectorAll('.lh-sr-item[data-key]').forEach(function(el) {
+      el.addEventListener('click', function() {
+        LacHelp.show(el.getAttribute('data-key'));
+        searchEl.value = '';
+        srEl.innerHTML = '';
+        srEl.classList.remove('visible');
+      });
+    });
+  });
+  searchEl.addEventListener('blur', function() {
+    setTimeout(function() { srEl.classList.remove('visible'); }, 150);
+  });
+
+  // Keyboard: Escape closes
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') LacHelp.hide();
+  });
+}
+
+function escHtml(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+// ── Data loading ───────────────────────────────────────────────────────────
+function loadData() {
+  if (_initPromise) return _initPromise;
+  _initPromise = fetch(_config.dataUrl)
+    .then(function(r) {
+      if (!r.ok) throw new Error('lac-data.json not found at '+_config.dataUrl);
+      return r.json();
+    })
+    .then(function(json) {
+      _data = json;
+      return json;
+    })
+    .catch(function(err) {
+      console.warn('[lac-help] Could not load feature data:', err.message);
+      _data = { features: [] };
+    });
+  return _initPromise;
+}
+
+// ── Render ─────────────────────────────────────────────────────────────────
+var DOMAIN_PALETTE = {
+  recording:'#cc8a4a',auth:'#5b82cc',band:'#4aad72',sessions:'#9b6fc4',
+  versioning:'#4ab5cc',editing:'#e8674a',render:'#4accaa',collaboration:'#c4a255',
+  storage:'#a2cc4a','app-shell':'#736455',
+};
+
+function domainColor(domain) {
+  return DOMAIN_PALETTE[domain] || '#c4a255';
+}
+
+function renderView(feature, viewName) {
+  var v = (feature.views || {})[viewName] || {};
+  var html = '';
+
+  if (viewName === 'user') {
+    if (v.userGuide) {
+      html += '<div class="lh-section"><div class="lh-label">How to use</div>'+mdToHtml(v.userGuide)+'</div>';
+    } else if (v.problem) {
+      html += '<div class="lh-section"><div class="lh-label">What it does</div>'+mdToHtml(v.problem)+'</div>';
+    } else {
+      html += '<div class="lh-empty">No user guide available for this feature yet.</div>';
+    }
+    if (v.knownLimitations && v.knownLimitations.length) {
+      html += '<div class="lh-section"><div class="lh-label">Gotchas</div>';
+      for (var i=0;i<v.knownLimitations.length;i++) {
+        html += '<div class="lh-limitation">'+escHtml(v.knownLimitations[i])+'</div>';
+      }
+      html += '</div>';
+    }
+  }
+
+  if (viewName === 'dev') {
+    if (v.componentFile) {
+      html += '<div class="lh-section"><div class="lh-label">Component file</div>' +
+        '<span class="lh-chip">📄 '+escHtml(v.componentFile)+'</span></div>';
+    }
+    if (feature.externalDependencies && feature.externalDependencies.length) {
+      html += '<div class="lh-section"><div class="lh-label">Depends on ('+feature.externalDependencies.length+')</div>';
+      for (var i=0;i<feature.externalDependencies.length;i++) {
+        var depKey = feature.externalDependencies[i];
+        var dep = _data ? _data.features.find(function(f){return f.featureKey===depKey;}) : null;
+        var col = dep ? domainColor(dep.domain) : '#736455';
+        html += '<span class="lh-chip" style="cursor:pointer" onclick="LacHelp.show(\''+depKey+'\')">'+
+          '<span class="lh-chip-dot" style="background:'+col+'"></span>'+
+          escHtml(dep ? dep.title : depKey)+'</span>';
+      }
+      html += '</div>';
+    }
+    if (v.decisions && v.decisions.length) {
+      html += '<div class="lh-section"><div class="lh-label">Key decisions</div>';
+      for (var i=0;i<v.decisions.length;i++) {
+        var d = v.decisions[i];
+        html += '<div class="lh-decision">'+
+          '<div class="lh-decision-q">'+escHtml(d.decision||'')+'</div>'+
+          '<div class="lh-decision-r">'+escHtml(d.rationale||'')+'</div>'+
+          '</div>';
+      }
+      html += '</div>';
+    }
+    if (!v.componentFile && !v.decisions && !(feature.externalDependencies && feature.externalDependencies.length)) {
+      html += '<div class="lh-empty">No developer details available for this feature yet.</div>';
+    }
+  }
+
+  if (viewName === 'product') {
+    if (v.problem) {
+      html += '<div class="lh-section"><div class="lh-label">Problem being solved</div>'+mdToHtml(v.problem)+'</div>';
+    }
+    if (v.successCriteria) {
+      html += '<div class="lh-section"><div class="lh-label">Success criteria</div>'+mdToHtml(v.successCriteria)+'</div>';
+    }
+    if (!v.problem && !v.successCriteria) {
+      html += '<div class="lh-empty">No product details available for this feature yet.</div>';
+    }
+  }
+
+  return html;
+}
+
+function renderPanel(featureKey) {
+  if (!_data) return;
+  var feature = _data.features.find(function(f){ return f.featureKey === featureKey; });
+  if (!feature) {
+    document.getElementById('lh-body').innerHTML = '<div class="lh-empty">Feature "'+escHtml(featureKey)+'" not found in lac-data.json.</div>';
+    return;
+  }
+
+  document.getElementById('lh-title').textContent = feature.title || featureKey;
+
+  // Tabs — only show tabs that have content
+  var availableViews = [];
+  var viewLabels = { user: 'User', dev: 'Dev', product: 'Product' };
+  ['user','dev','product'].forEach(function(v) {
+    var vdata = (feature.views||{})[v];
+    if (vdata && Object.keys(vdata).length > 0) availableViews.push(v);
+  });
+  if (!availableViews.length) availableViews = ['user'];
+
+  // Clamp current view to available
+  if (availableViews.indexOf(_currentView) < 0) _currentView = availableViews[0];
+
+  var tabsEl = document.getElementById('lh-tabs');
+  tabsEl.innerHTML = availableViews.map(function(v) {
+    return '<button class="lh-tab'+(v===_currentView?' active':'')+'" data-view="'+v+'">'+viewLabels[v]+'</button>';
+  }).join('');
+  tabsEl.querySelectorAll('.lh-tab').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      _currentView = btn.getAttribute('data-view');
+      tabsEl.querySelectorAll('.lh-tab').forEach(function(b){ b.classList.toggle('active', b===btn); });
+      document.getElementById('lh-body').innerHTML =
+        renderView(feature, _currentView) + renderGuideLink(featureKey);
+    });
+  });
+
+  document.getElementById('lh-body').innerHTML = renderView(feature, _currentView) + renderGuideLink(featureKey);
+}
+
+function renderGuideLink(featureKey) {
+  return '<a class="lh-guide-link" href="'+LAC_GUIDE_URL+'#'+escHtml(featureKey)+'" target="_blank" rel="noopener">'+
+    '<span>📖</span><span>Open full guide</span><span style="font-size:10px;opacity:0.6">→</span>'+
+    '</a>';
+}
+
+// ── Public API ─────────────────────────────────────────────────────────────
+var LacHelp = {
+  /**
+   * Initialise the widget. Call once on page load.
+   * @param {object} [config]
+   * @param {string} [config.dataUrl]      URL to lac-data.json (default: './lac-data.json')
+   * @param {string} [config.defaultView]  'user' | 'dev' | 'product' (default: 'user')
+   */
+  init: function(config) {
+    if (config) Object.assign(_config, config);
+    if (_config.defaultView) _currentView = _config.defaultView;
+    loadData();
+  },
+
+  /**
+   * Show the help panel for a feature.
+   * @param {string} featureKey
+   * @param {string} [view]  'user' | 'dev' | 'product'
+   */
+  show: function(featureKey, view) {
+    if (view) _currentView = view;
+    _currentKey = featureKey;
+
+    if (!_panel) buildPanel();
+    _overlay.classList.add('open');
+    _panel.classList.add('open');
+    _panel.setAttribute('aria-hidden', 'false');
+
+    if (!_data) {
+      loadData().then(function() { renderPanel(featureKey); });
+    } else {
+      renderPanel(featureKey);
+    }
+  },
+
+  /** Close the help panel. */
+  hide: function() {
+    if (_panel) {
+      _panel.classList.remove('open');
+      _panel.setAttribute('aria-hidden', 'true');
+    }
+    if (_overlay) _overlay.classList.remove('open');
+    _currentKey = null;
+  },
+
+  /**
+   * Search features by title, domain, tags, or userGuide text.
+   * @param {string} query
+   * @returns {Array}
+   */
+  search: function(query) {
+    if (!_data) return [];
+    var q = query.toLowerCase();
+    return _data.features.filter(function(f) {
+      var hay = [f.title, f.domain, ...(f.tags||[])].join(' ').toLowerCase();
+      var guide = ((f.views||{}).user||{}).userGuide||'';
+      return hay.includes(q) || guide.toLowerCase().includes(q);
+    });
+  },
+
+  /** Access the raw loaded data (after init). Returns null before data loads. */
+  get data() { return _data; },
+};
+
+window.LacHelp = LacHelp;
+
+// ── Web Component ──────────────────────────────────────────────────────────
+if (typeof customElements !== 'undefined') {
+  customElements.define('lac-help', (function() {
+    function LacHelpElement() {
+      var el = Reflect.construct(HTMLElement, [], LacHelpElement);
+      return el;
+    }
+    LacHelpElement.prototype = Object.create(HTMLElement.prototype);
+    LacHelpElement.prototype.constructor = LacHelpElement;
+    LacHelpElement.prototype.connectedCallback = function() {
+      var key  = this.getAttribute('feature-key');
+      var view = this.getAttribute('view') || 'user';
+      if (!key) return;
+      this.style.cssText = 'display:inline-flex;align-items:center;';
+      var btn = document.createElement('button');
+      btn.textContent = '?';
+      btn.title = 'Help';
+      btn.setAttribute('aria-label', 'Show help');
+      btn.style.cssText = [
+        'width:22px','height:22px','border-radius:50%',
+        'background:#181512','border:1px solid #c4a255',
+        'color:#c4a255','font-family:monospace','font-size:12px','font-weight:700',
+        'cursor:pointer','display:flex','align-items:center','justify-content:center',
+        'transition:background 0.15s',
+      ].join(';');
+      btn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        LacHelp.show(key, view);
+      });
+      this.appendChild(btn);
+      if (!_data && !_initPromise) loadData();
+    };
+    Object.defineProperty(LacHelpElement, 'observedAttributes', { get: function() { return ['feature-key','view']; } });
+    return LacHelpElement;
+  })());
+}
+
+})();
+`;
+}
+//#endregion
 //#region src/lib/hubGenerator.ts
 /** Canonical ordered entry definitions for all standard LAC outputs. */
 const ALL_HUB_ENTRIES = [
@@ -23054,6 +23896,20 @@ const ALL_HUB_ENTRIES = [
 		description: "Horizontal swim-lane timeline built from statusHistory — velocity at a glance",
 		icon: "📆",
 		primary: false
+	},
+	{
+		file: "lac-data.json",
+		label: "Data Export",
+		description: "Universal JSON bridge — all features with multi-view projections for in-app help and docs",
+		icon: "📦",
+		primary: false
+	},
+	{
+		file: "lac-help.js",
+		label: "Help Widget",
+		description: "Zero-dep vanilla JS widget + Web Component — drop in any app for contextual in-app help",
+		icon: "💡",
+		primary: false
 	}
 ];
 function generateHub(projectName, stats, entries, generatedAt = (/* @__PURE__ */ new Date()).toISOString(), prefix) {
@@ -24562,482 +25418,245 @@ html, body { height: 100%; background: var(--bg); color: var(--text); font-famil
   background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0;
   font-size: 12px;
 }
-.ctrl-label { color: var(--text-soft); font-family: var(--mono); }
-.ctrl-btn {
-  padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border);
-  background: transparent; color: var(--text-soft); cursor: pointer; font-size: 12px; font-family: var(--mono);
-  transition: all .15s;
-}
-.ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
-.ctrl-sep { color: var(--border); }
-.legend { display: flex; gap: 14px; margin-left: auto; }
-.leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-soft); }
-.leg-dot { width: 10px; height: 10px; border-radius: 2px; }
-.zoom-info { font-size: 11px; color: var(--text-soft); font-family: var(--mono); }
-
-.timeline-wrap { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
-
-/* Tick labels row */
-.tick-row {
-  display: flex; height: 32px; flex-shrink: 0;
-  padding-left: var(--label-w); position: relative; overflow: hidden;
-  border-bottom: 1px solid var(--border);
-}
-.tick-track { position: absolute; left: var(--label-w); right: 0; top: 0; bottom: 0; }
-
-/* Lanes */
-.lanes-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
-.lanes-inner { position: relative; }
-.lane { display: flex; height: var(--lane-h); border-bottom: 1px solid var(--border-soft); }
-.lane:hover { background: rgba(255,255,255,.012); }
-.lane-label {
-  width: var(--label-w); flex-shrink: 0; padding: 0 12px 0 16px;
-  display: flex; align-items: center; border-right: 1px solid var(--border);
-  position: sticky; left: 0; background: var(--bg); z-index: 2;
-}
-.lane-label-text { font-size: 11px; color: var(--text-soft); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.lane-track { flex: 1; position: relative; }
-
-/* Feature pill */
-.feat-pill {
-  position: absolute; top: 8px; height: 34px;
-  border-radius: 5px; cursor: pointer;
-  display: flex; align-items: center; padding: 0 6px;
-  transition: filter .15s, z-index .15s;
-  border: 1px solid rgba(255,255,255,.08);
-  min-width: 6px; overflow: hidden;
-}
-.feat-pill:hover { filter: brightness(1.3); z-index: 10; }
-.feat-pill-text { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.85); font-family: var(--mono); }
-
-/* Dot for features without history */
-.feat-dot {
-  position: absolute; top: 50%; width: 8px; height: 8px;
-  border-radius: 50%; transform: translate(-50%, -50%);
-  cursor: pointer; border: 1px solid rgba(255,255,255,.2);
-}
-
-/* Today line */
-.today-line { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(212,168,83,.5); pointer-events: none; z-index: 5; }
-.today-label { position: absolute; top: 4px; font-size: 9px; color: var(--accent); font-family: var(--mono); transform: translateX(-50%); white-space: nowrap; }
-
-/* Tooltip */
-.tooltip {
-  position: fixed; pointer-events: none; z-index: 999;
-  background: #1e1b18; border: 1px solid var(--border); border-radius: 8px;
-  padding: 12px 14px; font-size: 12px; color: var(--text); max-width: 260px;
-  display: none; box-shadow: 0 8px 24px rgba(0,0,0,.5);
-}
-.tooltip.visible { display: block; }
-.tooltip-title { font-weight: 600; margin-bottom: 6px; font-size: 13px; line-height: 1.3; }
-.tooltip-row { display: flex; justify-content: space-between; gap: 20px; margin: 2px 0; font-size: 11px; }
-.tooltip-label { color: var(--text-soft); }
-.tooltip-val { font-family: var(--mono); }
-.tooltip-hist { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
-.tooltip-trans { font-size: 10px; color: var(--text-soft); font-family: var(--mono); margin: 1px 0; }
-</style>
-</head>
-<body>
-<div class="topbar">
-  <span class="topbar-logo">◈ lac</span>
-  <span class="topbar-sep">|</span>
-  <span class="topbar-project">${esc$1(projectName)} — Feature Timeline</span>
-  <span class="topbar-count">${features.length} features · ${featuresWithHistory} with history · ${featuresWithoutHistory} undated</span>
-</div>
-
-<div class="controls">
-  <span class="ctrl-label">Zoom:</span>
-  <button class="ctrl-btn" onclick="zoom(0.7)">−</button>
-  <span class="zoom-info" id="zoom-info">100%</span>
-  <button class="ctrl-btn" onclick="zoom(1.4)">+</button>
-  <button class="ctrl-btn" onclick="resetZoom()">Reset</button>
-  <span class="ctrl-sep">|</span>
-  <span class="ctrl-label">Sort:</span>
-  <button class="ctrl-btn" onclick="setSortMode('domain')">Domain</button>
-  <button class="ctrl-btn" onclick="setSortMode('start')">Start date</button>
-  <button class="ctrl-btn" onclick="setSortMode('status')">Status</button>
-  <div class="legend">
-    ${Object.entries(STATUS_COLOR).map(([s, c]) => `<div class="leg-item"><div class="leg-dot" style="background:${c}"></div>${s}</div>`).join("")}
-    <div class="leg-item"><div class="leg-dot" style="background:#3a3530;border:1px solid #5a5550"></div>no history</div>
-  </div>
-</div>
-
-<div class="timeline-wrap">
-  <div class="tick-row">
-    <div class="tick-track" id="tick-track"></div>
-  </div>
-  <div class="lanes-scroll">
-    <div class="lanes-inner" id="lanes"></div>
-  </div>
-</div>
-
-<div class="tooltip" id="tooltip"></div>
-
-<script>
-const DATA = ${dataJson};
-const STATUS_COLOR = ${statusColorJson};
-
-let zoomLevel = 1;
-let sortMode = 'domain';
-const tooltip = document.getElementById('tooltip');
-
-// Scale: zoomLevel * 100% width for the track
-function trackWidth() { return Math.round(zoomLevel * 100) + '%'; }
-
-function pctToPx(pct) {
-  const track = document.getElementById('lanes');
-  return (pct / 100) * track.offsetWidth;
-}
-
-function render() {
-  document.getElementById('zoom-info').textContent = Math.round(zoomLevel * 100) + '%';
-  renderTicks();
-  renderLanes();
-}
-
-function renderTicks() {
-  const track = document.getElementById('tick-track');
-  track.style.width = trackWidth();
-  track.innerHTML = DATA.ticks.map(t =>
-    t.pct >= 0 && t.pct <= 100
-      ? \`<div style="position:absolute;left:\${t.pct}%;top:0;bottom:0;border-left:1px solid #2a2724;padding-top:8px">
-           <span style="font-size:9px;color:#6a6055;font-family:var(--mono);padding-left:4px">\${t.label}</span>
-         </div>\`
-      : ''
-  ).join('') + \`<div class="today-line" style="left:\${DATA.todayPct}%">
-    <div class="today-label" style="left:50%">today</div>
-  </div>\`;
-}
-
-function renderLanes() {
-  const lanesEl = document.getElementById('lanes');
-  // Sort domains
-  let domainOrder = [...DATA.domains];
-  if (sortMode === 'status') {
-    // sort domains by avg frozen ratio descending
-  }
-
-  lanesEl.innerHTML = domainOrder.map(domain => {
-    const domFeats = DATA.features.filter(f => f.domain === domain);
-    // Sort features within domain
-    let sorted = [...domFeats];
-    if (sortMode === 'start') sorted.sort((a,b) => (a.startPct??101) - (b.startPct??101));
-    else if (sortMode === 'status') sorted.sort((a,b) => a.status.localeCompare(b.status));
-    else sorted.sort((a,b) => (a.startPct??101) - (b.startPct??101));
-
-    const laneH = Math.max(${DOMAIN_ORDER.length > 0 ? "Math.ceil(sorted.length / 1) * 44 + 8" : "52"}, 52);
-
-    const pills = sorted.map((f, fi) => {
-      const color = STATUS_COLOR[f.status] || '#444';
-      const bgAlpha = f.hasHistory ? '55' : '22';
-      const top = 8 + Math.floor(fi * 0) ; // stack vertically — one row per feature lane
-      if (f.startPct !== null && f.endPct !== null) {
-        const left = Math.max(0, f.startPct);
-        const width = Math.max(0.4, f.endPct - f.startPct);
-        return \`<div class="feat-pill"
-          style="left:\${left}%;width:\${width}%;background:\${color}\${bgAlpha};top:8px"
-          data-key="\${f.key}"
-          onmousemove="showTooltip(event, '\${f.key}')"
-          onmouseleave="hideTooltip()"
-          onclick="window.open('lac-wiki.html#\${f.key}','_self')">
-          \${width > 2 ? \`<span class="feat-pill-text">\${f.title}</span>\` : ''}
-        </div>\`;
-      } else {
-        // dot at end of timeline
-        return \`<div class="feat-dot"
-          style="left:\${DATA.todayPct}%;background:\${color}44;border-color:\${color}88"
-          data-key="\${f.key}"
-          onmousemove="showTooltip(event, '\${f.key}')"
-          onmouseleave="hideTooltip()"
-          onclick="window.open('lac-wiki.html#\${f.key}','_self')">
-        </div>\`;
-      }
-    }).join('');
-
-    return \`<div class="lane" style="height:var(--lane-h)">
-      <div class="lane-label"><span class="lane-label-text" title="\${domain}">\${domain}</span></div>
-      <div class="lane-track" style="width:\${trackWidth()}">
-        \${pills}
-        <div class="today-line" style="left:\${DATA.todayPct}%"></div>
-      </div>
-    </div>\`;
-  }).join('');
-}
+.ctrl-label { color: var(--text-soft); font-family: var(--mono); }
+.ctrl-btn {
+  padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border);
+  background: transparent; color: var(--text-soft); cursor: pointer; font-size: 12px; font-family: var(--mono);
+  transition: all .15s;
+}
+.ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
+.ctrl-sep { color: var(--border); }
+.legend { display: flex; gap: 14px; margin-left: auto; }
+.leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-soft); }
+.leg-dot { width: 10px; height: 10px; border-radius: 2px; }
+.zoom-info { font-size: 11px; color: var(--text-soft); font-family: var(--mono); }
 
-const featByKey = new Map(DATA.features.map(f => [f.key, f]));
+.timeline-wrap { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
 
-function showTooltip(e, key) {
-  const f = featByKey.get(key);
-  if (!f) return;
-  const color = STATUS_COLOR[f.status] || '#888';
-  const histHtml = f.transitions.length > 0
-    ? '<div class="tooltip-hist">' + f.transitions.map(t =>
-        \`<div class="tooltip-trans">\${t.date} · \${t.from || '–'} → \${t.to}</div>\`
-      ).join('') + '</div>'
-    : '<div class="tooltip-row"><span class="tooltip-label">history</span><span class="tooltip-val" style="color:#4a4540">not recorded</span></div>';
+/* Tick labels row */
+.tick-row {
+  display: flex; height: 32px; flex-shrink: 0;
+  padding-left: var(--label-w); position: relative; overflow: hidden;
+  border-bottom: 1px solid var(--border);
+}
+.tick-track { position: absolute; left: var(--label-w); right: 0; top: 0; bottom: 0; }
 
-  tooltip.innerHTML =
-    \`<div class="tooltip-title">\${f.title}</div>\` +
-    \`<div class="tooltip-row"><span class="tooltip-label">status</span><span class="tooltip-val" style="color:\${color}">\${f.status}</span></div>\` +
-    \`<div class="tooltip-row"><span class="tooltip-label">domain</span><span class="tooltip-val">\${f.domain}</span></div>\` +
-    \`<div class="tooltip-row"><span class="tooltip-label">key</span><span class="tooltip-val">\${f.key}</span></div>\` +
-    histHtml;
+/* Lanes */
+.lanes-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
+.lanes-inner { position: relative; }
+.lane { display: flex; height: var(--lane-h); border-bottom: 1px solid var(--border-soft); }
+.lane:hover { background: rgba(255,255,255,.012); }
+.lane-label {
+  width: var(--label-w); flex-shrink: 0; padding: 0 12px 0 16px;
+  display: flex; align-items: center; border-right: 1px solid var(--border);
+  position: sticky; left: 0; background: var(--bg); z-index: 2;
+}
+.lane-label-text { font-size: 11px; color: var(--text-soft); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lane-track { flex: 1; position: relative; }
 
-  tooltip.style.left = (e.clientX + 14) + 'px';
-  tooltip.style.top  = (e.clientY - 10) + 'px';
-  tooltip.classList.add('visible');
+/* Feature pill */
+.feat-pill {
+  position: absolute; top: 8px; height: 34px;
+  border-radius: 5px; cursor: pointer;
+  display: flex; align-items: center; padding: 0 6px;
+  transition: filter .15s, z-index .15s;
+  border: 1px solid rgba(255,255,255,.08);
+  min-width: 6px; overflow: hidden;
 }
-function hideTooltip() { tooltip.classList.remove('visible'); }
+.feat-pill:hover { filter: brightness(1.3); z-index: 10; }
+.feat-pill-text { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.85); font-family: var(--mono); }
 
-function zoom(factor) {
-  zoomLevel = Math.max(0.5, Math.min(8, zoomLevel * factor));
-  render();
+/* Dot for features without history */
+.feat-dot {
+  position: absolute; top: 50%; width: 8px; height: 8px;
+  border-radius: 50%; transform: translate(-50%, -50%);
+  cursor: pointer; border: 1px solid rgba(255,255,255,.2);
 }
-function resetZoom() { zoomLevel = 1; render(); }
-function setSortMode(mode) { sortMode = mode; render(); }
 
-render();
-window.addEventListener('resize', render);
-<\/script>
-</body>
-</html>`;
+/* Today line */
+.today-line { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(212,168,83,.5); pointer-events: none; z-index: 5; }
+.today-label { position: absolute; top: 4px; font-size: 9px; color: var(--accent); font-family: var(--mono); transform: translateX(-50%); white-space: nowrap; }
+
+/* Tooltip */
+.tooltip {
+  position: fixed; pointer-events: none; z-index: 999;
+  background: #1e1b18; border: 1px solid var(--border); border-radius: 8px;
+  padding: 12px 14px; font-size: 12px; color: var(--text); max-width: 260px;
+  display: none; box-shadow: 0 8px 24px rgba(0,0,0,.5);
 }
-//#endregion
-//#region src/lib/views.ts
-/** Fields always shown at summary density regardless of view */
-const SUMMARY_FIELDS = new Set([
-	"featureKey",
-	"title",
-	"status",
-	"domain",
-	"priority",
-	"tags",
-	"problem"
-]);
-const VIEW_NAMES = [
-	"dev",
-	"product",
-	"user",
-	"support",
-	"tech"
-];
-/** Always-present identity fields included in every view */
-const IDENTITY = [
-	"featureKey",
-	"title",
-	"status",
-	"domain"
-];
-const VIEWS = {
-	user: {
-		name: "user",
-		label: "User",
-		description: "Plain-language guide — what the feature does and why it exists",
-		fields: new Set([
-			"title",
-			"problem",
-			"userGuide",
-			"successCriteria",
-			"tags"
-		])
-	},
-	support: {
-		name: "support",
-		label: "Support",
-		description: "Known limitations, annotations, and escalation context for support teams",
-		fields: new Set([
-			...IDENTITY,
-			"owner",
-			"problem",
-			"knownLimitations",
-			"annotations",
-			"tags"
-		])
-	},
-	product: {
-		name: "product",
-		label: "Product",
-		description: "Business problem, success criteria, and strategic decisions — no implementation details",
-		fields: new Set([
-			...IDENTITY,
-			"owner",
-			"priority",
-			"problem",
-			"analysis",
-			"userGuide",
-			"pmSummary",
-			"successCriteria",
-			"acceptanceCriteria",
-			"decisions",
-			"knownLimitations",
-			"tags",
-			"releaseVersion"
-		])
-	},
-	dev: {
-		name: "dev",
-		label: "Developer",
-		description: "Full implementation context — code, decisions, snippets, and lineage",
-		fields: new Set([
-			...IDENTITY,
-			"owner",
-			"priority",
-			"problem",
-			"analysis",
-			"implementation",
-			"implementationNotes",
-			"userGuide",
-			"successCriteria",
-			"acceptanceCriteria",
-			"testStrategy",
-			"decisions",
-			"knownLimitations",
-			"tags",
-			"annotations",
-			"lineage",
-			"componentFile",
-			"npmPackages",
-			"publicInterface",
-			"externalDependencies",
-			"codeSnippets"
-		])
-	},
-	tech: {
-		name: "tech",
-		label: "Technical",
-		description: "Complete technical record — all fields including history, revisions, and lineage",
-		fields: new Set([
-			...IDENTITY,
-			"schemaVersion",
-			"owner",
-			"priority",
-			"problem",
-			"analysis",
-			"implementation",
-			"implementationNotes",
-			"userGuide",
-			"pmSummary",
-			"successCriteria",
-			"acceptanceCriteria",
-			"testStrategy",
-			"decisions",
-			"knownLimitations",
-			"tags",
-			"annotations",
-			"lineage",
-			"statusHistory",
-			"revisions",
-			"componentFile",
-			"npmPackages",
-			"publicInterface",
-			"externalDependencies",
-			"codeSnippets",
-			"lastVerifiedDate",
-			"releaseVersion",
-			"superseded_by",
-			"superseded_from",
-			"merged_into",
-			"merged_from"
-		])
-	}
-};
-/**
-* Return a copy of `feature` with only the keys allowed by `view`.
-* Fields not in the view's set are omitted entirely.
-*/
-function applyView(feature, view) {
-	const result = {};
-	for (const key of Object.keys(feature)) if (view.fields.has(key)) result[key] = feature[key];
-	return result;
+.tooltip.visible { display: block; }
+.tooltip-title { font-weight: 600; margin-bottom: 6px; font-size: 13px; line-height: 1.3; }
+.tooltip-row { display: flex; justify-content: space-between; gap: 20px; margin: 2px 0; font-size: 11px; }
+.tooltip-label { color: var(--text-soft); }
+.tooltip-val { font-family: var(--mono); }
+.tooltip-hist { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
+.tooltip-trans { font-size: 10px; color: var(--text-soft); font-family: var(--mono); margin: 1px 0; }
+</style>
+</head>
+<body>
+<div class="topbar">
+  <span class="topbar-logo">◈ lac</span>
+  <span class="topbar-sep">|</span>
+  <span class="topbar-project">${esc$1(projectName)} — Feature Timeline</span>
+  <span class="topbar-count">${features.length} features · ${featuresWithHistory} with history · ${featuresWithoutHistory} undated</span>
+</div>
+
+<div class="controls">
+  <span class="ctrl-label">Zoom:</span>
+  <button class="ctrl-btn" onclick="zoom(0.7)">−</button>
+  <span class="zoom-info" id="zoom-info">100%</span>
+  <button class="ctrl-btn" onclick="zoom(1.4)">+</button>
+  <button class="ctrl-btn" onclick="resetZoom()">Reset</button>
+  <span class="ctrl-sep">|</span>
+  <span class="ctrl-label">Sort:</span>
+  <button class="ctrl-btn" onclick="setSortMode('domain')">Domain</button>
+  <button class="ctrl-btn" onclick="setSortMode('start')">Start date</button>
+  <button class="ctrl-btn" onclick="setSortMode('status')">Status</button>
+  <div class="legend">
+    ${Object.entries(STATUS_COLOR).map(([s, c]) => `<div class="leg-item"><div class="leg-dot" style="background:${c}"></div>${s}</div>`).join("")}
+    <div class="leg-item"><div class="leg-dot" style="background:#3a3530;border:1px solid #5a5550"></div>no history</div>
+  </div>
+</div>
+
+<div class="timeline-wrap">
+  <div class="tick-row">
+    <div class="tick-track" id="tick-track"></div>
+  </div>
+  <div class="lanes-scroll">
+    <div class="lanes-inner" id="lanes"></div>
+  </div>
+</div>
+
+<div class="tooltip" id="tooltip"></div>
+
+<script>
+const DATA = ${dataJson};
+const STATUS_COLOR = ${statusColorJson};
+
+let zoomLevel = 1;
+let sortMode = 'domain';
+const tooltip = document.getElementById('tooltip');
+
+// Scale: zoomLevel * 100% width for the track
+function trackWidth() { return Math.round(zoomLevel * 100) + '%'; }
+
+function pctToPx(pct) {
+  const track = document.getElementById('lanes');
+  return (pct / 100) * track.offsetWidth;
 }
-/**
-* Fields the HTML wiki renderer requires for sidebar navigation and routing.
-* These are always preserved regardless of view, so the wiki remains navigable.
-*/
-const HTML_NAV_FIELDS = new Set([
-	"featureKey",
-	"title",
-	"status",
-	"domain",
-	"lineage",
-	"priority"
-]);
-/**
-* Like `applyView`, but always preserves HTML navigation fields so the wiki
-* sidebar and routing continue to work correctly.
-*/
-function applyViewForHtml(feature, view) {
-	const result = {};
-	for (const key of Object.keys(feature)) if (view.fields.has(key) || HTML_NAV_FIELDS.has(key)) result[key] = feature[key];
-	return result;
+
+function render() {
+  document.getElementById('zoom-info').textContent = Math.round(zoomLevel * 100) + '%';
+  renderTicks();
+  renderLanes();
 }
-/**
-* Apply density filtering to a feature.
-* - summary:  only SUMMARY_FIELDS (title, status, domain, priority, tags, problem snippet)
-* - standard: pass through unchanged (generators decide what to show)
-* - verbose:  pass through unchanged but callers should render VERBOSE_EXTRA_FIELDS too
-*
-* Returns the filtered feature and the resolved density level.
-*/
-function applyDensity(feature, density) {
-	if (density === "standard" || density === "verbose") return feature;
-	const result = {};
-	for (const key of Object.keys(feature)) if (SUMMARY_FIELDS.has(key)) if (key === "problem" && typeof feature[key] === "string") {
-		const prob = feature[key];
-		const firstSentence = prob.split(/[.!?]\s/)[0] ?? prob;
-		result[key] = firstSentence.length < prob.length ? firstSentence + "." : prob;
-	} else result[key] = feature[key];
-	return result;
+
+function renderTicks() {
+  const track = document.getElementById('tick-track');
+  track.style.width = trackWidth();
+  track.innerHTML = DATA.ticks.map(t =>
+    t.pct >= 0 && t.pct <= 100
+      ? \`<div style="position:absolute;left:\${t.pct}%;top:0;bottom:0;border-left:1px solid #2a2724;padding-top:8px">
+           <span style="font-size:9px;color:#6a6055;font-family:var(--mono);padding-left:4px">\${t.label}</span>
+         </div>\`
+      : ''
+  ).join('') + \`<div class="today-line" style="left:\${DATA.todayPct}%">
+    <div class="today-label" style="left:50%">today</div>
+  </div>\`;
 }
-/**
-* Resolve a view name against both built-in views and custom views from lac.config.json.
-*
-* Resolution order:
-*  1. If `name` matches a key in `customViews` (from lac.config.json), build a ViewConfig from it.
-*     If it has `extends`, merge on top of the built-in base.
-*  2. Otherwise fall back to VIEWS[name].
-*  3. If neither matches, return undefined.
-*/
-function resolveView(name, customViews = {}) {
-	const custom = customViews[name];
-	if (custom) {
-		const base = custom.extends ? VIEWS[custom.extends] : void 0;
-		const baseFields = base ? new Set(base.fields) : /* @__PURE__ */ new Set();
-		const fields = custom.fields ? new Set(custom.fields) : baseFields;
-		for (const f of IDENTITY) fields.add(f);
-		return {
-			name,
-			label: custom.label ?? base?.label ?? name,
-			description: custom.description ?? base?.description ?? `Custom view: ${name}`,
-			fields,
-			density: custom.density,
-			groupBy: custom.groupBy,
-			sortBy: custom.sortBy,
-			filterStatus: custom.filterStatus,
-			sections: custom.sections
-		};
-	}
-	return VIEW_NAMES.includes(name) ? VIEWS[name] : void 0;
+
+function renderLanes() {
+  const lanesEl = document.getElementById('lanes');
+  // Sort domains
+  let domainOrder = [...DATA.domains];
+  if (sortMode === 'status') {
+    // sort domains by avg frozen ratio descending
+  }
+
+  lanesEl.innerHTML = domainOrder.map(domain => {
+    const domFeats = DATA.features.filter(f => f.domain === domain);
+    // Sort features within domain
+    let sorted = [...domFeats];
+    if (sortMode === 'start') sorted.sort((a,b) => (a.startPct??101) - (b.startPct??101));
+    else if (sortMode === 'status') sorted.sort((a,b) => a.status.localeCompare(b.status));
+    else sorted.sort((a,b) => (a.startPct??101) - (b.startPct??101));
+
+    const laneH = Math.max(${DOMAIN_ORDER.length > 0 ? "Math.ceil(sorted.length / 1) * 44 + 8" : "52"}, 52);
+
+    const pills = sorted.map((f, fi) => {
+      const color = STATUS_COLOR[f.status] || '#444';
+      const bgAlpha = f.hasHistory ? '55' : '22';
+      const top = 8 + Math.floor(fi * 0) ; // stack vertically — one row per feature lane
+      if (f.startPct !== null && f.endPct !== null) {
+        const left = Math.max(0, f.startPct);
+        const width = Math.max(0.4, f.endPct - f.startPct);
+        return \`<div class="feat-pill"
+          style="left:\${left}%;width:\${width}%;background:\${color}\${bgAlpha};top:8px"
+          data-key="\${f.key}"
+          onmousemove="showTooltip(event, '\${f.key}')"
+          onmouseleave="hideTooltip()"
+          onclick="window.open('lac-wiki.html#\${f.key}','_self')">
+          \${width > 2 ? \`<span class="feat-pill-text">\${f.title}</span>\` : ''}
+        </div>\`;
+      } else {
+        // dot at end of timeline
+        return \`<div class="feat-dot"
+          style="left:\${DATA.todayPct}%;background:\${color}44;border-color:\${color}88"
+          data-key="\${f.key}"
+          onmousemove="showTooltip(event, '\${f.key}')"
+          onmouseleave="hideTooltip()"
+          onclick="window.open('lac-wiki.html#\${f.key}','_self')">
+        </div>\`;
+      }
+    }).join('');
+
+    return \`<div class="lane" style="height:var(--lane-h)">
+      <div class="lane-label"><span class="lane-label-text" title="\${domain}">\${domain}</span></div>
+      <div class="lane-track" style="width:\${trackWidth()}">
+        \${pills}
+        <div class="today-line" style="left:\${DATA.todayPct}%"></div>
+      </div>
+    </div>\`;
+  }).join('');
 }
-/**
-* Sort and filter a feature list according to a resolved view profile.
-* This is called before passing features to any generator.
-*/
-function applyViewTransforms(features, profile) {
-	let result = [...features];
-	if (profile.filterStatus && profile.filterStatus.length > 0) result = result.filter((f) => profile.filterStatus.includes(f["status"]));
-	if (profile.sortBy === "priority") result.sort((a, b) => (a["priority"] ?? 99) - (b["priority"] ?? 99));
-	else if (profile.sortBy === "title") result.sort((a, b) => String(a["title"] ?? "").localeCompare(String(b["title"] ?? "")));
-	else if (profile.sortBy === "status") {
-		const order = {
-			active: 0,
-			draft: 1,
-			frozen: 2,
-			deprecated: 3
-		};
-		result.sort((a, b) => (order[a["status"]] ?? 9) - (order[b["status"]] ?? 9));
-	} else if (profile.sortBy === "lastVerifiedDate") result.sort((a, b) => String(b["lastVerifiedDate"] ?? "").localeCompare(String(a["lastVerifiedDate"] ?? "")));
-	return result;
+
+const featByKey = new Map(DATA.features.map(f => [f.key, f]));
+
+function showTooltip(e, key) {
+  const f = featByKey.get(key);
+  if (!f) return;
+  const color = STATUS_COLOR[f.status] || '#888';
+  const histHtml = f.transitions.length > 0
+    ? '<div class="tooltip-hist">' + f.transitions.map(t =>
+        \`<div class="tooltip-trans">\${t.date} · \${t.from || '–'} → \${t.to}</div>\`
+      ).join('') + '</div>'
+    : '<div class="tooltip-row"><span class="tooltip-label">history</span><span class="tooltip-val" style="color:#4a4540">not recorded</span></div>';
+
+  tooltip.innerHTML =
+    \`<div class="tooltip-title">\${f.title}</div>\` +
+    \`<div class="tooltip-row"><span class="tooltip-label">status</span><span class="tooltip-val" style="color:\${color}">\${f.status}</span></div>\` +
+    \`<div class="tooltip-row"><span class="tooltip-label">domain</span><span class="tooltip-val">\${f.domain}</span></div>\` +
+    \`<div class="tooltip-row"><span class="tooltip-label">key</span><span class="tooltip-val">\${f.key}</span></div>\` +
+    histHtml;
+
+  tooltip.style.left = (e.clientX + 14) + 'px';
+  tooltip.style.top  = (e.clientY - 10) + 'px';
+  tooltip.classList.add('visible');
+}
+function hideTooltip() { tooltip.classList.remove('visible'); }
+
+function zoom(factor) {
+  zoomLevel = Math.max(0.5, Math.min(8, zoomLevel * factor));
+  render();
+}
+function resetZoom() { zoomLevel = 1; render(); }
+function setSortMode(mode) { sortMode = mode; render(); }
+
+render();
+window.addEventListener('resize', render);
+<\/script>
+</body>
+</html>`;
 }
 //#endregion
 //#region src/commands/export.ts
@@ -25253,7 +25872,7 @@ function buildReconstructionPrompt(features, projectName, promptDir) {
 	lines.push("");
 	return lines.join("\n");
 }
-const exportCommand = new Command("export").description("Export feature.json as JSON, Markdown, or generate a static HTML view").option("--out <path>", "Output file or directory path").option("--html [dir]", "Scan <dir> (default: cwd) and emit a single self-contained HTML wiki").option("--raw [dir]", "Raw field-by-field HTML dump with sidebar navigation").option("--print [dir]", "Print-ready HTML document (A4, all features, @media print CSS)").option("--postcard", "Beautiful single-feature shareable card (nearest feature.json)").option("--resume [dir]", "Portfolio page from all frozen features").option("--slide [dir]", "Full-screen HTML slideshow, one slide per feature").option("--graph [dir]", "Interactive force-directed feature lineage graph").option("--heatmap [dir]", "Completeness heatmap — fields × features grid").option("--quiz [dir]", "Flashcard-style quiz to test knowledge of your feature set").option("--story [dir]", "Long-form narrative document — product case study from feature data").option("--treemap [dir]", "Rectangular treemap — features sized by decisions × completeness, grouped by domain").option("--kanban [dir]", "Kanban board — Active / Frozen / Draft columns with sortable, filterable cards").option("--health [dir]", "Project health scorecard — completeness, coverage, tech debt, and health score").option("--embed [dir]", "Compact embeddable stats widget (iframe-ready)").option("--decisions [dir]", "Consolidated ADR — all decisions from all features, searchable by domain").option("--guide [dir]", "User guide — one page per feature that has a non-empty userGuide field").option("--hub [dir]", "Hub landing page linking to all generated views → lac-hub.html").option("--all [dir]", "Generate all HTML views + hub index.html → --out dir (default: ./lac-output)").option("--prefix <prefix>", "URL prefix for hub links (no leading slash), e.g. lac → hrefs become /lac/lac-guide.html").option("--diff <dir-b>", "Compare cwd workspace against <dir-b> and show added/removed/changed").option("--site <dir>", "Generate a multi-page static site → --out dir (default: ./lac-site)").option("--prompt [dir]", "AI reconstruction prompt for all features (stdout or --out file)").option("--markdown", "Single feature as Markdown (nearest feature.json)").option("--changelog [dir]", "Structured changelog grouped by month — from revisions[] across all features").option("--since <date>", "Filter --changelog and --release-notes to entries after this date (YYYY-MM-DD)").option("--release-notes [dir]", "User-facing release notes — features that went frozen since --since date or --release version").option("--release <version>", "Filter --release-notes to features matching this releaseVersion (e.g. 3.5.0)").option("--sprint [dir]", "Sprint planning view — draft+active features sorted by priority, summary density").option("--api-surface [dir]", "Aggregated publicInterface[] reference across all features → lac-api-surface.html").option("--dependency-map [dir]", "Runtime dependency graph from externalDependencies[] → lac-depmap.html").option("--radar [dir]", "Domain maturity radar — SVG polar chart across 5 quality dimensions → lac-radar.html").option("--successboard [dir]", "Success criteria board — achieved/in-progress/planned by successCriteria → lac-successboard.html").option("--pitch [dir]", "Demo slide deck — keyboard-navigable fullscreen presentation → lac-pitch.html").option("--timeline [dir]", "Feature velocity timeline — swim-lane history from statusHistory → lac-timeline.html").option("--tags <tags>", "Comma-separated tags to filter by (OR logic) — applies to all multi-feature modes").option("--sort <mode>", "Sort order for multi-feature modes: key (default) | build-order (parents before children)").option("--view <name>", `Audience view — built-in (${VIEW_NAMES.join(", ")}) or custom name from lac.config.json views`).option("--density <level>", "Content density: summary | standard | verbose (default: standard)").addHelpText("after", `
+const exportCommand = new Command("export").description("Export feature.json as JSON, Markdown, or generate a static HTML view").option("--out <path>", "Output file or directory path").option("--html [dir]", "Scan <dir> (default: cwd) and emit a single self-contained HTML wiki").option("--raw [dir]", "Raw field-by-field HTML dump with sidebar navigation").option("--print [dir]", "Print-ready HTML document (A4, all features, @media print CSS)").option("--postcard", "Beautiful single-feature shareable card (nearest feature.json)").option("--resume [dir]", "Portfolio page from all frozen features").option("--slide [dir]", "Full-screen HTML slideshow, one slide per feature").option("--graph [dir]", "Interactive force-directed feature lineage graph").option("--heatmap [dir]", "Completeness heatmap — fields × features grid").option("--quiz [dir]", "Flashcard-style quiz to test knowledge of your feature set").option("--story [dir]", "Long-form narrative document — product case study from feature data").option("--treemap [dir]", "Rectangular treemap — features sized by decisions × completeness, grouped by domain").option("--kanban [dir]", "Kanban board — Active / Frozen / Draft columns with sortable, filterable cards").option("--health [dir]", "Project health scorecard — completeness, coverage, tech debt, and health score").option("--embed [dir]", "Compact embeddable stats widget (iframe-ready)").option("--decisions [dir]", "Consolidated ADR — all decisions from all features, searchable by domain").option("--guide [dir]", "User guide — one page per feature that has a non-empty userGuide field").option("--hub [dir]", "Hub landing page linking to all generated views → lac-hub.html").option("--all [dir]", "Generate all HTML views + hub index.html → --out dir (default: ./lac-output)").option("--prefix <prefix>", "URL prefix for hub links (no leading slash), e.g. lac → hrefs become /lac/lac-guide.html").option("--diff <dir-b>", "Compare cwd workspace against <dir-b> and show added/removed/changed").option("--site <dir>", "Generate a multi-page static site → --out dir (default: ./lac-site)").option("--prompt [dir]", "AI reconstruction prompt for all features (stdout or --out file)").option("--markdown", "Single feature as Markdown (nearest feature.json)").option("--changelog [dir]", "Structured changelog grouped by month — from revisions[] across all features").option("--since <date>", "Filter --changelog and --release-notes to entries after this date (YYYY-MM-DD)").option("--release-notes [dir]", "User-facing release notes — features that went frozen since --since date or --release version").option("--release <version>", "Filter --release-notes to features matching this releaseVersion (e.g. 3.5.0)").option("--sprint [dir]", "Sprint planning view — draft+active features sorted by priority, summary density").option("--api-surface [dir]", "Aggregated publicInterface[] reference across all features → lac-api-surface.html").option("--dependency-map [dir]", "Runtime dependency graph from externalDependencies[] → lac-depmap.html").option("--radar [dir]", "Domain maturity radar — SVG polar chart across 5 quality dimensions → lac-radar.html").option("--successboard [dir]", "Success criteria board — achieved/in-progress/planned by successCriteria → lac-successboard.html").option("--pitch [dir]", "Demo slide deck — keyboard-navigable fullscreen presentation → lac-pitch.html").option("--timeline [dir]", "Feature velocity timeline — swim-lane history from statusHistory → lac-timeline.html").option("--data [dir]", "Universal JSON bridge for in-app help/docs — all views per feature → lac-data.json").option("--help-widget [dir]", "Zero-dep vanilla JS help widget + Web Component → lac-help.js").option("--tags <tags>", "Comma-separated tags to filter by (OR logic) — applies to all multi-feature modes").option("--sort <mode>", "Sort order for multi-feature modes: key (default) | build-order (parents before children)").option("--view <name>", `Audience view — built-in (${VIEW_NAMES.join(", ")}) or custom name from lac.config.json views`).option("--density <level>", "Content density: summary | standard | verbose (default: standard)").addHelpText("after", `
 Examples:
   lac export --html                          HTML wiki (cwd) → lac-wiki.html
   lac export --raw                           Raw field dump  → lac-raw.html
@@ -25872,6 +26491,42 @@ Views (--view):
 		}
 		return;
 	}
+	if (options.data !== void 0) {
+		const dir = typeof options.data === "string" ? resolve(options.data) : resolve(process$1.cwd());
+		const features = await scanAndFilter(dir);
+		if (features.length === 0) {
+			process$1.stdout.write(`No valid feature.json files found in "${dir}".\n`);
+			process$1.exit(0);
+		}
+		const json = generateDataExport(features.map((f) => f.feature), basename(dir), { customViews: config.views });
+		const outFile = options.out ? resolve(options.out) : resolve(process$1.cwd(), "lac-data.json");
+		try {
+			await writeFile(outFile, json, "utf-8");
+			process$1.stdout.write(`✓ Data export (${features.length} features, all views) → ${options.out ?? "lac-data.json"}\n`);
+		} catch (err) {
+			process$1.stderr.write(`Error writing "${outFile}": ${err instanceof Error ? err.message : String(err)}\n`);
+			process$1.exit(1);
+		}
+		return;
+	}
+	if (options.helpWidget !== void 0) {
+		const dir = typeof options.helpWidget === "string" ? resolve(options.helpWidget) : resolve(process$1.cwd());
+		const features = await scanAndFilter(dir);
+		if (features.length === 0) {
+			process$1.stdout.write(`No valid feature.json files found in "${dir}".\n`);
+			process$1.exit(0);
+		}
+		const js = generateHelpWidget(features.map((f) => f.feature), basename(dir));
+		const outFile = options.out ? resolve(options.out) : resolve(process$1.cwd(), "lac-help.js");
+		try {
+			await writeFile(outFile, js, "utf-8");
+			process$1.stdout.write(`✓ Help widget (${features.length} features, LacHelp API + Web Component) → ${options.out ?? "lac-help.js"}\n`);
+		} catch (err) {
+			process$1.stderr.write(`Error writing "${outFile}": ${err instanceof Error ? err.message : String(err)}\n`);
+			process$1.exit(1);
+		}
+		return;
+	}
 	if (options.all !== void 0) {
 		const dir = typeof options.all === "string" ? resolve(options.all) : resolve(process$1.cwd());
 		const outDir = resolve(options.out ?? "./lac-output");
@@ -25917,6 +26572,8 @@ Views (--view):
 		await write("lac-successboard.html", generateSuccessboard(fs, projectName));
 		await write("lac-pitch.html", generatePitch(fs, projectName));
 		await write("lac-timeline.html", generateTimeline(fs, projectName));
+		await write("lac-data.json", generateDataExport(fs, projectName, { customViews: config.views }));
+		await write("lac-help.js", generateHelpWidget(fs, projectName));
 		const stats = {
 			total: fs.length,
 			frozen: fs.filter((f) => f.status === "frozen").length,
@@ -25977,7 +26634,7 @@ Views (--view):
 			});
 		}
 		await write("index.html", generateHub(projectName, stats, [...ALL_HUB_ENTRIES, ...customEntries], (/* @__PURE__ */ new Date()).toISOString(), options.prefix));
-		const totalFiles = 19 + customEntries.length + 1;
+		const totalFiles = 21 + customEntries.length + 1;
 		process$1.stdout.write(`Done — ${features.length} features, ${totalFiles} files written to ${outDir}\n`);
 		return;
 	}