@at-flux/astro-feature-flags 1.0.0

package/dist/dev-toolbar-app.mjs

@@ -0,0 +1,407 @@
+import { t as DEV_TOOLBAR_FLAG_ICON_SVG } from "./dev-toolbar-flag-icon-BHCQJ53N.mjs";
+import { defineToolbarApp } from "astro/toolbar";
+import { closeOnOutsideClick, createWindowElement, synchronizePlacementOnUpdate } from "astro/runtime/client/dev-toolbar/apps/utils/window.js";
+//#region src/dev-toolbar-app.ts
+function toHexColor(raw, fallback) {
+	if (!raw) return fallback;
+	const s = raw.trim();
+	const hex7 = s.match(/^#([0-9a-fA-F]{6})$/);
+	if (hex7) return `#${hex7[1].toLowerCase()}`;
+	const rgb = s.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+	if (rgb) return `#${[
+		Math.min(255, Math.round(Number(rgb[1]))),
+		Math.min(255, Math.round(Number(rgb[2]))),
+		Math.min(255, Math.round(Number(rgb[3])))
+	].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
+	return fallback;
+}
+function readMeta() {
+	try {
+		const raw = window.__AFF__;
+		return {
+			tokens: raw && Array.isArray(raw.tokens) ? raw.tokens : [],
+			colors: raw?.colors && typeof raw.colors === "object" ? raw.colors : {},
+			namespace: raw?.namespace?.trim() ? raw.namespace.trim() : "ff"
+		};
+	} catch {
+		return {
+			tokens: [],
+			colors: {},
+			namespace: "ff"
+		};
+	}
+}
+function storageKey(namespace) {
+	return `${namespace}.dev.v1`;
+}
+function loadState(tokens, namespace) {
+	const next = {
+		enabled: {},
+		outline: {},
+		badge: {},
+		colors: {}
+	};
+	for (const t of tokens) {
+		next.enabled[t] = true;
+		next.outline[t] = true;
+		next.badge[t] = true;
+	}
+	try {
+		const raw = localStorage.getItem(storageKey(namespace)) || localStorage.getItem("aff.dev.v1");
+		if (!raw) return next;
+		const parsed = JSON.parse(raw);
+		const outline = parsed.outline ?? parsed.chrome;
+		const enabled = parsed.enabled ?? parsed.render;
+		const badge = parsed.badge;
+		const colors = parsed.colors;
+		if (outline) Object.assign(next.outline, outline);
+		if (enabled) Object.assign(next.enabled, enabled);
+		if (badge) Object.assign(next.badge, badge);
+		if (colors) Object.assign(next.colors, colors);
+	} catch {}
+	return next;
+}
+function persist(state, namespace) {
+	try {
+		localStorage.setItem(storageKey(namespace), JSON.stringify(state));
+	} catch {}
+}
+function applyDom(tokens, state, defaults, namespace) {
+	const root = document.documentElement;
+	for (const t of tokens) {
+		if (state.outline[t] !== false) root.removeAttribute(`data-ff-outline-${t}`);
+		else root.setAttribute(`data-ff-outline-${t}`, "off");
+		if (state.enabled[t] !== false) root.removeAttribute(`data-ff-enabled-${t}`);
+		else root.setAttribute(`data-ff-enabled-${t}`, "off");
+		if (state.badge[t] !== false) root.removeAttribute(`data-ff-badge-${t}`);
+		else root.setAttribute(`data-ff-badge-${t}`, "off");
+		const col = state.colors[t] ?? defaults[t];
+		if (col) root.style.setProperty(`--${namespace}-c-${t}`, col);
+		else root.style.removeProperty(`--${namespace}-c-${t}`);
+	}
+}
+const affDevToolbarApp = defineToolbarApp({ init(canvas, eventTarget) {
+	let state = loadState([], "ff");
+	let tokens = [];
+	let namespace = "ff";
+	function mount() {
+		canvas.querySelector("astro-dev-toolbar-window")?.remove();
+		const { tokens: nextTokens, colors: defaultColors, namespace: ns } = readMeta();
+		tokens = nextTokens;
+		namespace = ns;
+		state = loadState(tokens, namespace);
+		applyDom(tokens, state, defaultColors, namespace);
+		const windowElement = createWindowElement(`
+				<style>
+					:host astro-dev-toolbar-window {
+						height: min(520px, 78vh);
+						overflow-y: auto;
+						color-scheme: dark;
+						--color-muted: rgba(191, 193, 201, 1);
+						--color-purple: rgba(224, 204, 250, 1);
+					}
+					header {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						gap: 12px;
+					}
+					h1 {
+						display: flex;
+						align-items: center;
+						gap: 8px;
+						font-weight: 600;
+						color: #fff;
+						margin: 0;
+						font-size: 22px;
+					}
+					.aff-flag-toolbar-icon {
+						display: inline-flex;
+						width: 1em;
+						height: 1em;
+						flex-shrink: 0;
+						align-items: center;
+						justify-content: center;
+					}
+					.aff-flag-toolbar-icon svg {
+						width: 100%;
+						height: 100%;
+						display: block;
+					}
+					.aff-intro {
+						margin: 0;
+						font-size: 14px;
+						line-height: 1.5rem;
+						color: var(--color-muted);
+            margin-bottom: 1rem;
+					}
+					.aff-top {
+						display: flex;
+						align-items: flex-start;
+						justify-content: space-between;
+						gap: 12px;
+						margin: 1rem 0;
+					}
+					.aff-top-left {
+						flex: 1;
+						min-width: 0;
+					}
+					.aff-help {
+						display: grid;
+						grid-template-columns: minmax(7.5rem, auto) 1fr;
+						gap: 0.45rem 0.75rem;
+					}
+					.aff-help code,
+					.aff-help span {
+						font-size: 12px;
+						line-height: 1.35;
+					}
+					.aff-help code {
+						justify-self: start;
+					}
+					.aff-actions {
+						display: flex;
+						justify-content: flex-end;
+						margin: 0;
+						flex-shrink: 0;
+					}
+					.aff-reset {
+						border: 1px solid #343841;
+						border-radius: 0.5rem;
+						background: #24262d;
+						color: #fff;
+						padding: 0.3rem 0.55rem;
+						font-size: 12px;
+						cursor: pointer;
+					}
+					hr {
+						border: 1px solid rgba(27, 30, 36, 1);
+						margin: 1em 0;
+					}
+					.setting-row {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						gap: 12px;
+						margin: 0 0 8px;
+					}
+					.setting-row section { flex: 1; min-width: 0; max-width: 54%; }
+					h3.aff-row-title {
+						font-size: 12px;
+						font-weight: 600;
+						color: #fff;
+						letter-spacing: 0.05em;
+						text-transform: uppercase;
+						margin: 0;
+					}
+					.aff-radios {
+						display: flex;
+						gap: 8px;
+						align-items: center;
+						flex-shrink: 0;
+					}
+					.aff-radios label {
+						display: inline-flex;
+						align-items: center;
+						gap: 4px;
+						font-size: 11px;
+						cursor: pointer;
+						color: var(--color-muted);
+						letter-spacing: 0.04em;
+						text-transform: uppercase;
+					}
+					.aff-radios input { accent-color: var(--color-purple); cursor: pointer; }
+					.aff-flag {
+						margin: 0 0 12px;
+						border: 1px solid rgba(52, 56, 65, 1);
+						border-radius: 10px;
+						padding: 0 10px 10px;
+						background: rgba(19, 21, 26, 0.55);
+					}
+					.aff-flag summary {
+						list-style: none;
+						cursor: pointer;
+						user-select: none;
+						display: flex;
+						align-items: center;
+						gap: 8px;
+						padding: 10px 0;
+						font-weight: 600;
+						font-size: 11px;
+						letter-spacing: 0.06em;
+						text-transform: uppercase;
+						color: #fff;
+						justify-content: space-between;
+					}
+					.aff-flag summary::-webkit-details-marker { display: none; }
+					.aff-flag summary::after {
+						content: '▸';
+						display: inline-flex;
+						align-items: center;
+						justify-content: center;
+						margin-left: auto;
+						color: var(--color-muted);
+						font-size: 12px;
+						transform: rotate(0deg);
+						transition: transform 0.12s ease;
+					}
+					.aff-flag[open] summary::after {
+						transform: rotate(90deg);
+					}
+					.aff-flag-summary-left {
+						display: inline-flex;
+						align-items: center;
+						gap: 8px;
+					}
+					.aff-swatch {
+						width: 10px;
+						height: 10px;
+						border-radius: 9999px;
+						flex-shrink: 0;
+						box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
+					}
+					.aff-flag-body { padding-top: 2px; }
+					.aff-empty {
+						margin: 0;
+						font-size: 14px;
+						line-height: 1.5rem;
+						color: var(--color-muted);
+					}
+					code {
+						color: var(--color-purple);
+						border: 1px solid #343841;
+						border-radius: 0.35em;
+						background-color: #24262d;
+						padding: 0.15em 0.35em;
+						font-size: 0.9em;
+					}
+					input[type="color"].aff-color {
+						width: 2.25rem;
+						height: 1.75rem;
+						padding: 0;
+						border: 1px solid #343841;
+						border-radius: 6px;
+						cursor: pointer;
+						background: transparent;
+					}
+				</style>
+				<header>
+					<h1><span class="aff-flag-toolbar-icon">${DEV_TOOLBAR_FLAG_ICON_SVG}</span> Feature flags</h1>
+					<div class="aff-actions"><button id="aff-reset" class="aff-reset" type="button" title="Reset all flags to defaults">Reset all</button></div>
+				</header>
+				<div class="aff-top">
+					<div class="aff-top-left">
+						<p class="aff-intro">Per-flag preview for <code>data-${namespace}</code> regions.</p>
+				<div class="aff-help">
+					<code>Enabled</code><span>Show/hide flagged regions in preview.</span>
+					<code>Outline</code><span>Toggle flag outlines without changing layout.</span>
+					<code>Badges</code><span>Toggle element and route labels.</span>
+					<code>Colour</code><span>Set <code>--${namespace}-c-&lt;token&gt;</code> on <code>&lt;html&gt;</code>.</span>
+						</div>
+					</div>
+				</div>
+				<hr />
+				<div id="aff-body"></div>
+			`);
+		const body = windowElement.querySelector("#aff-body");
+		const resetBtn = windowElement.querySelector("#aff-reset");
+		if (body) if (tokens.length === 0) {
+			const p = document.createElement("p");
+			p.className = "aff-empty";
+			p.textContent = "No flags in ff.json.";
+			body.append(p);
+		} else for (const token of tokens) {
+			const details = document.createElement("details");
+			details.className = "aff-flag";
+			details.open = tokens.length <= 8;
+			const summary = document.createElement("summary");
+			const summaryLeft = document.createElement("span");
+			summaryLeft.className = "aff-flag-summary-left";
+			const swatch = document.createElement("span");
+			swatch.className = "aff-swatch";
+			const name = document.createElement("span");
+			name.textContent = token;
+			summaryLeft.append(swatch, name);
+			summary.append(summaryLeft);
+			const syncSwatch = () => {
+				const c = state.colors[token] ?? defaultColors[token] ?? "#888888";
+				swatch.style.background = c;
+			};
+			syncSwatch();
+			const inner = document.createElement("div");
+			inner.className = "aff-flag-body";
+			const row = (title, tooltip, key, onLab, offLab) => {
+				const label = document.createElement("label");
+				label.className = "setting-row";
+				const section = document.createElement("section");
+				const h = document.createElement("h3");
+				h.className = "aff-row-title";
+				h.textContent = title;
+				section.append(h);
+				const radios = document.createElement("div");
+				radios.className = "aff-radios";
+				const mk = (on, lab) => {
+					const wrap = document.createElement("label");
+					const inp = document.createElement("input");
+					inp.type = "radio";
+					inp.name = `aff-${token}-${key}`;
+					const cur = state[key][token] !== false;
+					inp.checked = on ? cur : !cur;
+					inp.addEventListener("change", () => {
+						if (!inp.checked) return;
+						state[key][token] = on;
+						applyDom(tokens, state, defaultColors, namespace);
+						persist(state, namespace);
+					});
+					wrap.append(inp, document.createTextNode(lab));
+					return wrap;
+				};
+				radios.append(mk(true, onLab), mk(false, offLab));
+				label.append(section, radios);
+				return label;
+			};
+			inner.append(row("Enabled", "When off, nodes with this flag token are hidden in preview.", "enabled", "On", "Off"), row("Outline", "Toggles dashed outline around flagged elements.", "outline", "On", "Off"), row("Badges", "Toggles element badges and top-right route pill.", "badge", "On", "Off"));
+			const colorRow = document.createElement("label");
+			colorRow.className = "setting-row";
+			const csection = document.createElement("section");
+			const ch = document.createElement("h3");
+			ch.className = "aff-row-title";
+			ch.textContent = "Colour";
+			ch.title = `Maps to CSS --${namespace}-c-<token> on <html>.`;
+			csection.append(ch);
+			const cinp = document.createElement("input");
+			cinp.type = "color";
+			cinp.className = "aff-color";
+			cinp.title = `Set --${namespace}-c-${token}`;
+			cinp.value = toHexColor(state.colors[token] ?? defaultColors[token], "#888888");
+			cinp.addEventListener("input", () => {
+				state.colors[token] = cinp.value;
+				syncSwatch();
+				applyDom(tokens, state, defaultColors, namespace);
+				persist(state, namespace);
+			});
+			colorRow.append(csection, cinp);
+			inner.append(colorRow);
+			details.append(summary, inner);
+			body.append(details);
+		}
+		if (resetBtn) resetBtn.addEventListener("click", () => {
+			try {
+				localStorage.removeItem(storageKey(namespace));
+				localStorage.removeItem("aff.dev.v1");
+			} catch {}
+			state = loadState(tokens, namespace);
+			applyDom(tokens, state, defaultColors, namespace);
+			mount();
+		});
+		canvas.append(windowElement);
+	}
+	mount();
+	document.addEventListener("astro:after-swap", mount);
+	closeOnOutsideClick(eventTarget);
+	synchronizePlacementOnUpdate(eventTarget, canvas);
+} });
+//#endregion
+export { affDevToolbarApp as default };
+
+//# sourceMappingURL=dev-toolbar-app.mjs.map

package/dist/dev-toolbar-app.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-toolbar-app.mjs","names":[],"sources":["../src/dev-toolbar-app.ts"],"sourcesContent":["import type { DevToolbarApp } from \"astro\";\nimport { defineToolbarApp } from \"astro/toolbar\";\nimport {\n  closeOnOutsideClick,\n  createWindowElement,\n  synchronizePlacementOnUpdate,\n} from \"astro/runtime/client/dev-toolbar/apps/utils/window.js\";\nimport { DEV_TOOLBAR_FLAG_ICON_SVG } from \"./dev-toolbar-flag-icon\";\n\ndeclare global {\n  interface Window {\n    __AFF__?: {\n      tokens: string[];\n      colors?: Record<string, string>;\n      namespace?: string;\n    };\n  }\n}\n\ntype AffState = {\n  enabled: Record<string, boolean>;\n  outline: Record<string, boolean>;\n  badge: Record<string, boolean>;\n  colors: Record<string, string>;\n};\n\nfunction toHexColor(raw: string | undefined, fallback: string): string {\n  if (!raw) return fallback;\n  const s = raw.trim();\n  const hex7 = s.match(/^#([0-9a-fA-F]{6})$/);\n  if (hex7) return `#${hex7[1]!.toLowerCase()}`;\n  const rgb = s.match(/rgba?\\(\\s*([\\d.]+)[,\\s]+([\\d.]+)[,\\s]+([\\d.]+)/);\n  if (rgb) {\n    const r = Math.min(255, Math.round(Number(rgb[1])));\n    const g = Math.min(255, Math.round(Number(rgb[2])));\n    const b = Math.min(255, Math.round(Number(rgb[3])));\n    return `#${[r, g, b].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\n  }\n  return fallback;\n}\n\nfunction readMeta(): {\n  tokens: string[];\n  colors: Record<string, string>;\n  namespace: string;\n} {\n  try {\n    const raw = window.__AFF__;\n    const tokens = raw && Array.isArray(raw.tokens) ? raw.tokens : [];\n    const colors =\n      raw?.colors && typeof raw.colors === \"object\" ? raw.colors : {};\n    const namespace = raw?.namespace?.trim() ? raw.namespace.trim() : \"ff\";\n    return { tokens, colors, namespace };\n  } catch {\n    return { tokens: [], colors: {}, namespace: \"ff\" };\n  }\n}\n\nfunction storageKey(namespace: string): string {\n  return `${namespace}.dev.v1`;\n}\n\nfunction loadState(tokens: string[], namespace: string): AffState {\n  const next: AffState = {\n    enabled: {},\n    outline: {},\n    badge: {},\n    colors: {},\n  };\n  for (const t of tokens) {\n    next.enabled[t] = true;\n    next.outline[t] = true;\n    next.badge[t] = true;\n  }\n  try {\n    const raw =\n      localStorage.getItem(storageKey(namespace)) ||\n      localStorage.getItem(\"aff.dev.v1\");\n    if (!raw) return next;\n    const parsed = JSON.parse(raw) as Record<string, unknown>;\n    const outline = (parsed.outline ?? parsed.chrome) as\n      | Record<string, boolean>\n      | undefined;\n    const enabled = (parsed.enabled ?? parsed.render) as\n      | Record<string, boolean>\n      | undefined;\n    const badge = parsed.badge as Record<string, boolean> | undefined;\n    const colors = parsed.colors as Record<string, string> | undefined;\n    if (outline) Object.assign(next.outline, outline);\n    if (enabled) Object.assign(next.enabled, enabled);\n    if (badge) Object.assign(next.badge, badge);\n    if (colors) Object.assign(next.colors, colors);\n  } catch {\n    /* ignore */\n  }\n  return next;\n}\n\nfunction persist(state: AffState, namespace: string) {\n  try {\n    localStorage.setItem(storageKey(namespace), JSON.stringify(state));\n  } catch {\n    /* ignore */\n  }\n}\n\nfunction applyDom(\n  tokens: string[],\n  state: AffState,\n  defaults: Record<string, string>,\n  namespace: string,\n) {\n  const root = document.documentElement;\n  for (const t of tokens) {\n    if (state.outline[t] !== false)\n      root.removeAttribute(`data-ff-outline-${t}`);\n    else root.setAttribute(`data-ff-outline-${t}`, \"off\");\n\n    if (state.enabled[t] !== false)\n      root.removeAttribute(`data-ff-enabled-${t}`);\n    else root.setAttribute(`data-ff-enabled-${t}`, \"off\");\n\n    if (state.badge[t] !== false) root.removeAttribute(`data-ff-badge-${t}`);\n    else root.setAttribute(`data-ff-badge-${t}`, \"off\");\n\n    const col = state.colors[t] ?? defaults[t];\n    if (col) root.style.setProperty(`--${namespace}-c-${t}`, col);\n    else root.style.removeProperty(`--${namespace}-c-${t}`);\n  }\n}\n\nconst affDevToolbarApp: DevToolbarApp = defineToolbarApp({\n  init(canvas, eventTarget) {\n    let state = loadState([], \"ff\");\n    let tokens: string[] = [];\n    let namespace = \"ff\";\n\n    function mount() {\n      canvas.querySelector(\"astro-dev-toolbar-window\")?.remove();\n      const {\n        tokens: nextTokens,\n        colors: defaultColors,\n        namespace: ns,\n      } = readMeta();\n      tokens = nextTokens;\n      namespace = ns;\n      state = loadState(tokens, namespace);\n      applyDom(tokens, state, defaultColors, namespace);\n\n      const windowElement = createWindowElement(`\n\t\t\t\t<style>\n\t\t\t\t\t:host astro-dev-toolbar-window {\n\t\t\t\t\t\theight: min(520px, 78vh);\n\t\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\t\tcolor-scheme: dark;\n\t\t\t\t\t\t--color-muted: rgba(191, 193, 201, 1);\n\t\t\t\t\t\t--color-purple: rgba(224, 204, 250, 1);\n\t\t\t\t\t}\n\t\t\t\t\theader {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\tgap: 12px;\n\t\t\t\t\t}\n\t\t\t\t\th1 {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tfont-size: 22px;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag-toolbar-icon {\n\t\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\t\twidth: 1em;\n\t\t\t\t\t\theight: 1em;\n\t\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag-toolbar-icon svg {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-intro {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t\t\tcolor: var(--color-muted);\n            margin-bottom: 1rem;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-top {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\talign-items: flex-start;\n\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\tgap: 12px;\n\t\t\t\t\t\tmargin: 1rem 0;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-top-left {\n\t\t\t\t\t\tflex: 1;\n\t\t\t\t\t\tmin-width: 0;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-help {\n\t\t\t\t\t\tdisplay: grid;\n\t\t\t\t\t\tgrid-template-columns: minmax(7.5rem, auto) 1fr;\n\t\t\t\t\t\tgap: 0.45rem 0.75rem;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-help code,\n\t\t\t\t\t.aff-help span {\n\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\tline-height: 1.35;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-help code {\n\t\t\t\t\t\tjustify-self: start;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-actions {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tjustify-content: flex-end;\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-reset {\n\t\t\t\t\t\tborder: 1px solid #343841;\n\t\t\t\t\t\tborder-radius: 0.5rem;\n\t\t\t\t\t\tbackground: #24262d;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\tpadding: 0.3rem 0.55rem;\n\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t\thr {\n\t\t\t\t\t\tborder: 1px solid rgba(27, 30, 36, 1);\n\t\t\t\t\t\tmargin: 1em 0;\n\t\t\t\t\t}\n\t\t\t\t\t.setting-row {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tgap: 12px;\n\t\t\t\t\t\tmargin: 0 0 8px;\n\t\t\t\t\t}\n\t\t\t\t\t.setting-row section { flex: 1; min-width: 0; max-width: 54%; }\n\t\t\t\t\th3.aff-row-title {\n\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\tletter-spacing: 0.05em;\n\t\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-radios {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-radios label {\n\t\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tgap: 4px;\n\t\t\t\t\t\tfont-size: 11px;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\tcolor: var(--color-muted);\n\t\t\t\t\t\tletter-spacing: 0.04em;\n\t\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-radios input { accent-color: var(--color-purple); cursor: pointer; }\n\t\t\t\t\t.aff-flag {\n\t\t\t\t\t\tmargin: 0 0 12px;\n\t\t\t\t\t\tborder: 1px solid rgba(52, 56, 65, 1);\n\t\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t\tpadding: 0 10px 10px;\n\t\t\t\t\t\tbackground: rgba(19, 21, 26, 0.55);\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag summary {\n\t\t\t\t\t\tlist-style: none;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\tuser-select: none;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t\tpadding: 10px 0;\n\t\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\t\tfont-size: 11px;\n\t\t\t\t\t\tletter-spacing: 0.06em;\n\t\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag summary::-webkit-details-marker { display: none; }\n\t\t\t\t\t.aff-flag summary::after {\n\t\t\t\t\t\tcontent: '▸';\n\t\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\tmargin-left: auto;\n\t\t\t\t\t\tcolor: var(--color-muted);\n\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\ttransition: transform 0.12s ease;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag[open] summary::after {\n\t\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag-summary-left {\n\t\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tgap: 8px;\n\t\t\t\t\t}\n\t\t\t\t\t.aff-swatch {\n\t\t\t\t\t\twidth: 10px;\n\t\t\t\t\t\theight: 10px;\n\t\t\t\t\t\tborder-radius: 9999px;\n\t\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t\t\tbox-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);\n\t\t\t\t\t}\n\t\t\t\t\t.aff-flag-body { padding-top: 2px; }\n\t\t\t\t\t.aff-empty {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t\t\tcolor: var(--color-muted);\n\t\t\t\t\t}\n\t\t\t\t\tcode {\n\t\t\t\t\t\tcolor: var(--color-purple);\n\t\t\t\t\t\tborder: 1px solid #343841;\n\t\t\t\t\t\tborder-radius: 0.35em;\n\t\t\t\t\t\tbackground-color: #24262d;\n\t\t\t\t\t\tpadding: 0.15em 0.35em;\n\t\t\t\t\t\tfont-size: 0.9em;\n\t\t\t\t\t}\n\t\t\t\t\tinput[type=\"color\"].aff-color {\n\t\t\t\t\t\twidth: 2.25rem;\n\t\t\t\t\t\theight: 1.75rem;\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tborder: 1px solid #343841;\n\t\t\t\t\t\tborder-radius: 6px;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t}\n\t\t\t\t</style>\n\t\t\t\t<header>\n\t\t\t\t\t<h1><span class=\"aff-flag-toolbar-icon\">${DEV_TOOLBAR_FLAG_ICON_SVG}</span> Feature flags</h1>\n\t\t\t\t\t<div class=\"aff-actions\"><button id=\"aff-reset\" class=\"aff-reset\" type=\"button\" title=\"Reset all flags to defaults\">Reset all</button></div>\n\t\t\t\t</header>\n\t\t\t\t<div class=\"aff-top\">\n\t\t\t\t\t<div class=\"aff-top-left\">\n\t\t\t\t\t\t<p class=\"aff-intro\">Per-flag preview for <code>data-${namespace}</code> regions.</p>\n\t\t\t\t<div class=\"aff-help\">\n\t\t\t\t\t<code>Enabled</code><span>Show/hide flagged regions in preview.</span>\n\t\t\t\t\t<code>Outline</code><span>Toggle flag outlines without changing layout.</span>\n\t\t\t\t\t<code>Badges</code><span>Toggle element and route labels.</span>\n\t\t\t\t\t<code>Colour</code><span>Set <code>--${namespace}-c-&lt;token&gt;</code> on <code>&lt;html&gt;</code>.</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<hr />\n\t\t\t\t<div id=\"aff-body\"></div>\n\t\t\t`);\n\n      const body = windowElement.querySelector(\"#aff-body\");\n      const resetBtn = windowElement.querySelector(\n        \"#aff-reset\",\n      ) as HTMLButtonElement | null;\n\n      if (body) {\n        if (tokens.length === 0) {\n          const p = document.createElement(\"p\");\n          p.className = \"aff-empty\";\n          p.textContent = \"No flags in ff.json.\";\n          body.append(p);\n        } else {\n          for (const token of tokens) {\n            const details = document.createElement(\"details\");\n            details.className = \"aff-flag\";\n            details.open = tokens.length <= 8;\n\n            const summary = document.createElement(\"summary\");\n            const summaryLeft = document.createElement(\"span\");\n            summaryLeft.className = \"aff-flag-summary-left\";\n            const swatch = document.createElement(\"span\");\n            swatch.className = \"aff-swatch\";\n            const name = document.createElement(\"span\");\n            name.textContent = token;\n            summaryLeft.append(swatch, name);\n            summary.append(summaryLeft);\n\n            const syncSwatch = () => {\n              const c =\n                state.colors[token] ?? defaultColors[token] ?? \"#888888\";\n              swatch.style.background = c;\n            };\n            syncSwatch();\n\n            const inner = document.createElement(\"div\");\n            inner.className = \"aff-flag-body\";\n\n            const row = (\n              title: string,\n              tooltip: string,\n              key: keyof Pick<AffState, \"enabled\" | \"outline\" | \"badge\">,\n              onLab: string,\n              offLab: string,\n            ) => {\n              const label = document.createElement(\"label\");\n              label.className = \"setting-row\";\n              const section = document.createElement(\"section\");\n              const h = document.createElement(\"h3\");\n              h.className = \"aff-row-title\";\n              h.textContent = title;\n              section.append(h);\n              const radios = document.createElement(\"div\");\n              radios.className = \"aff-radios\";\n              const mk = (on: boolean, lab: string) => {\n                const wrap = document.createElement(\"label\");\n                const inp = document.createElement(\"input\");\n                inp.type = \"radio\";\n                inp.name = `aff-${token}-${key}`;\n                const cur = state[key][token] !== false;\n                inp.checked = on ? cur : !cur;\n                inp.addEventListener(\"change\", () => {\n                  if (!inp.checked) return;\n                  state[key][token] = on;\n                  applyDom(tokens, state, defaultColors, namespace);\n                  persist(state, namespace);\n                });\n                wrap.append(inp, document.createTextNode(lab));\n                return wrap;\n              };\n              radios.append(mk(true, onLab), mk(false, offLab));\n              label.append(section, radios);\n              return label;\n            };\n\n            inner.append(\n              row(\n                \"Enabled\",\n                \"When off, nodes with this flag token are hidden in preview.\",\n                \"enabled\",\n                \"On\",\n                \"Off\",\n              ),\n              row(\n                \"Outline\",\n                \"Toggles dashed outline around flagged elements.\",\n                \"outline\",\n                \"On\",\n                \"Off\",\n              ),\n              row(\n                \"Badges\",\n                \"Toggles element badges and top-right route pill.\",\n                \"badge\",\n                \"On\",\n                \"Off\",\n              ),\n            );\n\n            const colorRow = document.createElement(\"label\");\n            colorRow.className = \"setting-row\";\n            const csection = document.createElement(\"section\");\n            const ch = document.createElement(\"h3\");\n            ch.className = \"aff-row-title\";\n            ch.textContent = \"Colour\";\n            ch.title = `Maps to CSS --${namespace}-c-<token> on <html>.`;\n            csection.append(ch);\n            const cinp = document.createElement(\"input\");\n            cinp.type = \"color\";\n            cinp.className = \"aff-color\";\n            cinp.title = `Set --${namespace}-c-${token}`;\n            cinp.value = toHexColor(\n              state.colors[token] ?? defaultColors[token],\n              \"#888888\",\n            );\n            cinp.addEventListener(\"input\", () => {\n              state.colors[token] = cinp.value;\n              syncSwatch();\n              applyDom(tokens, state, defaultColors, namespace);\n              persist(state, namespace);\n            });\n            colorRow.append(csection, cinp);\n            inner.append(colorRow);\n\n            details.append(summary, inner);\n            body.append(details);\n          }\n        }\n      }\n\n      if (resetBtn) {\n        resetBtn.addEventListener(\"click\", () => {\n          try {\n            localStorage.removeItem(storageKey(namespace));\n            localStorage.removeItem(\"aff.dev.v1\");\n          } catch {\n            // ignore\n          }\n          state = loadState(tokens, namespace);\n          applyDom(tokens, state, defaultColors, namespace);\n          mount();\n        });\n      }\n\n      canvas.append(windowElement);\n    }\n\n    mount();\n    document.addEventListener(\"astro:after-swap\", mount);\n    closeOnOutsideClick(eventTarget);\n    synchronizePlacementOnUpdate(eventTarget, canvas);\n  },\n});\n\nexport default affDevToolbarApp;\n"],"mappings":"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"}

package/dist/dev-toolbar-flag-icon-BHCQJ53N.mjs

@@ -0,0 +1,10 @@
+//#region src/dev-toolbar-flag-icon.ts
+/**
+* Inline SVG for the dev toolbar app button and panel header (Heroicons-style flag, 20×20 in a 22×22 box).
+* `currentColor` matches built-in Astro toolbar icons.
+*/
+const DEV_TOOLBAR_FLAG_ICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M4.25 3.25v15.5a.75.75 0 1 1-1.5 0V3.25a.75.75 0 0 1 1.5 0Z\"/><path d=\"M6.5 4.75v9.2a1 1 0 0 0 1.5.87l7.5-4.6a1 1 0 0 0 0-1.74l-7.5-4.6a1 1 0 0 0-1.5.87Z\"/></svg>";
+//#endregion
+export { DEV_TOOLBAR_FLAG_ICON_SVG as t };
+
+//# sourceMappingURL=dev-toolbar-flag-icon-BHCQJ53N.mjs.map

package/dist/dev-toolbar-flag-icon-BHCQJ53N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-toolbar-flag-icon-BHCQJ53N.mjs","names":[],"sources":["../src/dev-toolbar-flag-icon.ts"],"sourcesContent":["/**\n * Inline SVG for the dev toolbar app button and panel header (Heroicons-style flag, 20×20 in a 22×22 box).\n * `currentColor` matches built-in Astro toolbar icons.\n */\nexport const DEV_TOOLBAR_FLAG_ICON_SVG =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"currentColor\" aria-hidden=\"true\">' +\n  '<path d=\"M4.25 3.25v15.5a.75.75 0 1 1-1.5 0V3.25a.75.75 0 0 1 1.5 0Z\"/>' +\n  '<path d=\"M6.5 4.75v9.2a1 1 0 0 0 1.5.87l7.5-4.6a1 1 0 0 0 0-1.74l-7.5-4.6a1 1 0 0 0-1.5.87Z\"/>' +\n  \"</svg>\";\n"],"mappings":";;;;;AAIA,MAAa,4BACX"}

package/dist/index.d.mts

@@ -0,0 +1,103 @@
+import { FeatureFlagMap, ResolveFeatureRuntimeOptions, ResolvedFeatureRuntime, longestMatchingRoutePrefix, mergeFlagsWithProcessEnvOverrides, resolveFeatureFlagsByEnvironment, routePatternToPrefix } from "./runtime.mjs";
+
+//#region src/badge-layout.d.ts
+type ElementBadgeVerticalAnchor = "top" | "bottom";
+/** Horizontal placement of the element pill: `end` = top-right (LTR), `start` = top-left, `center` = centred. */
+type ElementBadgeHorizontalAlign = "start" | "center" | "end";
+/** Subset of dev CSS options used for element-badge geometry (also on `DevOutlineCssOptions`). */
+interface ElementBadgeLayoutOptions {
+  /**
+   * Horizontal alignment along the element’s top or bottom edge. Default `end` (top-right in LTR).
+   * Ignored when `elementBadgeHorizontalPercent` is set.
+   */
+  elementBadgeHorizontalAlign?: ElementBadgeHorizontalAlign;
+  /**
+   * Optional: anchor at a percentage along the element width (0–100), with the pill centred on that point (`translateX(-50%)`).
+   * When set, overrides `elementBadgeHorizontalAlign`.
+   */
+  elementBadgeHorizontalPercent?: number;
+  /**
+   * Vertical shift as a percentage of the **badge’s own height** (CSS transform %).
+   * With anchor `top`, moves the badge upward. Default `80` (~20% of the pill overlaps the element top edge).
+   */
+  elementBadgeVerticalShiftPercent?: number;
+  /** Anchor the badge to the top or bottom edge of the element. Default `top`. */
+  elementBadgeVerticalAnchor?: ElementBadgeVerticalAnchor;
+}
+type NormalizedElementBadgeLayout = {
+  mode: "align";
+  horizontalAlign: ElementBadgeHorizontalAlign;
+  verticalShiftPercent: number;
+  verticalAnchor: ElementBadgeVerticalAnchor;
+} | {
+  mode: "percent";
+  horizontalPercent: number;
+  verticalShiftPercent: number;
+  verticalAnchor: ElementBadgeVerticalAnchor;
+};
+declare function normalizeElementBadgeLayout(input: ElementBadgeLayoutOptions | undefined): NormalizedElementBadgeLayout;
+/**
+ * `left` / `right` / `top` | `bottom` / `transform` for the element `::before` badge (no trailing newline).
+ */
+declare function elementBadgePositionBlock(layout: NormalizedElementBadgeLayout): string;
+//#endregion
+//#region src/dev-outline-css.d.ts
+type DevOutlineHiddenStrategy = "visibility" | "display";
+interface DevOutlineCssOptions extends ElementBadgeLayoutOptions {
+  outlineWidth?: string;
+  /** Fallback when no per-token colour is set. */
+  outlineColor?: string;
+  /** Per-flag-token outline / badge / route-badge colour (overrides JSON `colors`). */
+  outlineColorByToken?: Record<string, string>;
+  outlineOffset?: string;
+  borderRadius?: string;
+  /** Default pill text for the `wip` flag token in the dev toolbar. */
+  badgeLabelWip?: string;
+  /** @deprecated Use {@link badgeLabelWip}. */
+  badgeLabelDev?: string;
+  badgeLabelByToken?: Record<string, string>;
+  hiddenStrategy?: DevOutlineHiddenStrategy;
+  /**
+   * @deprecated Unused: badge does not use container queries.
+   */
+  badgeMinInlineSize?: string;
+}
+/**
+ * Dev-only styles: `data-ff="token"` (or space-separated tokens) gates outlines/badges.
+ * `html[data-ff-route="<token>"]` (dev) adds a fixed top-right route badge (label only).
+ * Toolbar toggles: `data-ff-enabled-*`, `data-ff-outline-*`, `data-ff-badge-*`, `--<namespace>-c-*`.
+ */
+declare function createFeatureFlagStyles(runtime: ResolvedFeatureRuntime, css?: DevOutlineCssOptions): string;
+/**
+ * CSS-only hiding for disabled flags. The Astro integration no longer injects this into
+ * production builds — static HTML is culled instead. Kept for custom tooling or tests.
+ */
+declare function createProductionGateStyles(runtime: ResolvedFeatureRuntime): string;
+//#endregion
+//#region src/production-html-cull.d.ts
+/**
+ * Production static HTML: remove nodes gated by disabled flags (same rules as dev
+ * `data-*` / `data-*-<token>`), strip dev-only route attributes on `<html>`, and drop
+ * empty `<style>` tags left after `featureFlagStyles` is empty.
+ */
+declare function cullProductionHtml(html: string, runtime: ResolvedFeatureRuntime): string;
+/**
+ * Walk `outDir` (e.g. Astro `dist/`) and apply {@link cullProductionHtml} to every `.html` file.
+ */
+declare function applyProductionHtmlCullToDist(outDir: string, runtime: ResolvedFeatureRuntime): void;
+//#endregion
+//#region src/index.d.ts
+interface AstroFeatureFlagsOptions extends ResolveFeatureRuntimeOptions {
+  css?: DevOutlineCssOptions;
+  /** When false, keeps static build output untouched (no route pruning / HTML cull). */
+  staticMinify?: boolean;
+}
+/** Prefer `prod` if present; else first non-`dev` key (sorted); else `"prod"`. */
+declare function primaryNonDevEnvironmentKey(flagsByEnvironment: Record<string, FeatureFlagMap>): string;
+declare function createVirtualModuleSource(runtime: ResolvedFeatureRuntime, css?: DevOutlineCssOptions, flagsByEnvironment?: Record<string, FeatureFlagMap>, devBootstrap?: string): string;
+declare function getResolvedFeatures(options?: ResolveFeatureRuntimeOptions): ResolvedFeatureRuntime;
+declare function featureRouteIncluded(pathname: string, runtime: ResolvedFeatureRuntime): boolean;
+declare function astroFeatureFlags(options?: AstroFeatureFlagsOptions): any;
+//#endregion
+export { AstroFeatureFlagsOptions, type DevOutlineCssOptions, type DevOutlineHiddenStrategy, type ElementBadgeHorizontalAlign, type ElementBadgeLayoutOptions, type ElementBadgeVerticalAnchor, type FeatureFlagMap, type NormalizedElementBadgeLayout, applyProductionHtmlCullToDist, createFeatureFlagStyles, createProductionGateStyles, createVirtualModuleSource, cullProductionHtml, astroFeatureFlags as default, elementBadgePositionBlock, featureRouteIncluded, getResolvedFeatures, longestMatchingRoutePrefix, mergeFlagsWithProcessEnvOverrides, normalizeElementBadgeLayout, primaryNonDevEnvironmentKey, resolveFeatureFlagsByEnvironment, routePatternToPrefix };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/badge-layout.ts","../src/dev-outline-css.ts","../src/production-html-cull.ts","../src/index.ts"],"mappings":";;;KAAY,0BAAA;;KAGA,2BAAA;AAHZ;AAAA,UAMiB,yBAAA;;;;AAHjB;EAQE,2BAAA,GAA8B,2BAAA;;;;AALhC;EAUE,6BAAA;;;;;EAKA,gCAAA;EAAA;EAEA,0BAAA,GAA6B,0BAAA;AAAA;AAAA,KAGnB,4BAAA;EAEN,IAAA;EACA,eAAA,EAAiB,2BAAA;EACjB,oBAAA;EACA,cAAA,EAAgB,0BAAA;AAAA;EAGhB,IAAA;EACA,iBAAA;EACA,oBAAA;EACA,cAAA,EAAgB,0BAAA;AAAA;AAAA,iBAQN,2BAAA,CACd,KAAA,EAAO,yBAAA,eACN,4BAAA;;;;iBA+Ba,yBAAA,CACd,MAAA,EAAQ,4BAAA;;;KCrEE,wBAAA;AAAA,UAEK,oBAAA,SAA6B,yBAAA;EAC5C,YAAA;;EAEA,YAAA;EDfoC;ECiBpC,mBAAA,GAAsB,MAAA;EACtB,aAAA;EACA,YAAA;EDhBqC;ECmBrC,aAAA;EDhBe;ECkBf,aAAA;EACA,iBAAA,GAAoB,MAAA;EAEpB,cAAA,GAAiB,wBAAA;EDhBjB;;;ECqBA,kBAAA;AAAA;;;;ADNF;;iBC0EgB,uBAAA,CACd,OAAA,EAAS,sBAAA,EACT,GAAA,GAAM,oBAAA;;;;;iBAuTQ,0BAAA,CACd,OAAA,EAAS,sBAAA;;;;;AD9ZX;;;iBEoFgB,kBAAA,CACd,IAAA,UACA,OAAA,EAAS,sBAAA;;AFnFX;;iBEwHgB,6BAAA,CACd,MAAA,UACA,OAAA,EAAS,sBAAA;;;UCtEM,wBAAA,SAAiC,4BAAA;EAChD,GAAA,GAAM,oBAAA;EHrD+B;EGuDrC,YAAA;AAAA;;iBAIc,2BAAA,CACd,kBAAA,EAAoB,MAAA,SAAe,cAAA;AAAA,iBAmCrB,yBAAA,CACd,OAAA,EAAS,sBAAA,EACT,GAAA,GAAM,oBAAA,EACN,kBAAA,GAAoB,MAAA,SAAe,cAAA,GACnC,YAAA;AAAA,iBA4Kc,mBAAA,CACd,OAAA,GAAS,4BAAA,GACR,sBAAA;AAAA,iBAIa,oBAAA,CACd,QAAA,UACA,OAAA,EAAS,sBAAA;AAAA,iBAkBa,iBAAA,CACtB,OAAA,GAAS,wBAAA"}