mnfst 0.5.135 → 0.5.137

package/lib/manifest.chart.css

@@ -5,6 +5,12 @@
     --color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
     --color-chart-label: var(--color-content-subtle, oklch(55.6% 0 0));
 
+    /* Heatmap ramp — single-hue sequential scale derived from --color-chart-1,
+       spanning a pale tint to a deep, saturated shade so values stay legible
+       even when the brand color itself is light. */
+    --color-chart-heat-low: oklch(from var(--color-chart-1) 0.95 calc(c * 0.3) h);
+    --color-chart-heat-high: oklch(from var(--color-chart-1) 0.55 calc(c * 1.15) h);
+
     /* Chart data segments */
     --color-chart-1: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
     --color-chart-2: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
@@ -119,6 +125,23 @@
             }
         }
 
+        /* Gauge — track band + value arc */
+        & path.gauge-track {
+            fill: var(--color-chart-color, var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)))
+        }
+
+        & path.gauge-value {
+            fill: var(--color-chart-color, var(--color-chart-1))
+        }
+
+        /* Gauge centered readout */
+        & text.gauge-label {
+            fill: var(--color-content-stark, oklch(20.5% 0 0));
+            font-size: 1.75rem;
+            font-weight: 700;
+            pointer-events: none
+        }
+
         /* Value labels drawn on/above segments */
         & text.value {
             fill: var(--color-content-stark, oklch(20.5% 0 0));
@@ -135,6 +158,17 @@
             }
         }
 
+        /* Heatmap cell — fill interpolates between the two heat tokens by the
+           per-cell --heat percentage (0% = low, 100% = high) */
+        & rect.heat-cell {
+            fill: color-mix(in oklch, var(--color-chart-heat-high, var(--color-chart-1)) var(--heat, 0%), var(--color-chart-heat-low, var(--color-surface-2)));
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.82
+            }
+        }
+
         /* Legend — <footer> sibling below the SVG; <span> items, <i> swatches */
         & footer {
             display: flex;
@@ -160,6 +194,21 @@
             }
         }
 
+        /* Heatmap gradient legend — low label, ramp bar (spans the grid), high
+           label. Footer is padded to the chart margins in JS so the bar aligns
+           with the columns. */
+        & footer.heat-legend {
+            flex-wrap: nowrap;
+            gap: 0.5rem;
+
+            & i {
+                flex: 1;
+                height: 0.5rem;
+                border-radius: 1rem;
+                background: linear-gradient(to right, var(--color-chart-heat-low, var(--color-surface-2)), var(--color-chart-heat-high, var(--color-chart-1)))
+            }
+        }
+
         /* Cursor-following tooltip — chrome comes from manifest.tooltip.css
            (.tooltip); only the pointer-tracking positioning lives here */
         & .tooltip {

package/lib/manifest.charts.js

@@ -147,6 +147,7 @@
 			cfg.grid = cfg.grid !== false;
 			cfg.tooltip = cfg.tooltip !== false;   // hover tooltips on by default
 			cfg.dataLabels = !!cfg.dataLabels;       // static value labels off by default
+			cfg.gap = num(cfg.gap, 1);               // heatmap tile gutter in px
 			cfg.labels = Array.isArray(cfg.labels) ? cfg.labels : [];
 
 			// Series may be omitted in favor of a single `data` array.
@@ -161,6 +162,13 @@
 					s.data = s.data.map(d => num(d.value, 0));
 				}
 			}
+
+			// Gauge: a single value, from `value` or the first series datum.
+			if (cfg.type === 'gauge') {
+				if (cfg.value != null && !cfg.series.length) cfg.series = [{ data: [num(cfg.value, 0)] }];
+				cfg.min = num(cfg.min, 0);
+				cfg.max = num(cfg.max, 100);
+			}
 			return cfg;
 		}
 
@@ -176,8 +184,13 @@
 			t.appendChild(document.createTextNode(str == null ? '' : String(str))); // untrusted-safe
 			return t;
 		}
+		// Entry animations run only on a chart's first draw. Reactive redraws
+		// (a bound value changing, a resize) must paint the final state directly
+		// — otherwise dragging a slider replays the reveal every frame and the
+		// chart flickers. drawChart sets this before dispatching.
+		let _suppressAnim = false;
 		function animate(el, keyframes, opts) {
-			if (prefersReducedMotion() || typeof el.animate !== 'function') return;
+			if (_suppressAnim || prefersReducedMotion() || typeof el.animate !== 'function') return;
 			try { el.animate(keyframes, Object.assign({ duration: 600, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'backwards' }, opts)); } catch (_) { }
 		}
 		// Cursor-following tooltip. Manifest's x-tooltip relies on CSS anchor
@@ -280,11 +293,17 @@
 			const hasData = cfg.series.some(s => Array.isArray(s.data) && s.data.length);
 			if (!hasData) { const d = document.createElement('small'); d.textContent = 'No data'; el.appendChild(d); return; }
 
+			// Animate the reveal only on the first paint; redraws snap to state.
+			_suppressAnim = !!state._drawn;
+			state._drawn = true;
+
 			// Label via aria-label (not an SVG <title>, which renders a native
 			// browser tooltip that conflicts with our cursor tooltip).
 			const root = svg('svg', { viewBox: `0 0 ${width} ${height}`, width: '100%', height: String(height), role: 'img', 'aria-label': cfg.title || (cfg.type + ' chart'), preserveAspectRatio: 'xMidYMid meet' }, el);
 
 			if (cfg.type === 'pie' || cfg.type === 'donut') drawPie(state, root, width, height);
+			else if (cfg.type === 'gauge') drawGauge(state, root, width, height);
+			else if (cfg.type === 'heatmap') drawHeatmap(state, root, width, height);
 			else drawCartesian(state, root, width, height);
 		}
 
@@ -303,6 +322,17 @@
 		}
 		function seriesColorVar(i, explicit) { return explicit || `var(--color-chart-${(i % _paletteN) + 1})`; }
 
+		// Resolve the theme --radius token to user-space px (the viewBox is 1:1
+		// with CSS px), so SVG corners match the rest of the UI's rounding.
+		function cssRadius(el) {
+			try {
+				const v = getComputedStyle(el).getPropertyValue('--radius').trim() || '0.5rem';
+				if (v.endsWith('rem')) return parseFloat(v) * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+				if (v.endsWith('px')) return parseFloat(v);
+				return parseFloat(v) || 8;
+			} catch (_) { return 8; }
+		}
+
 		// Line interpolation: monotone (smooth, default) | linear | step | natural.
 		function curveFor(d3, name) {
 			switch (String(name || '').toLowerCase()) {
@@ -479,7 +509,7 @@
 			});
 		}
 		function animateBar(rect, ih) {
-			if (prefersReducedMotion() || typeof rect.animate !== 'function') return;
+			if (_suppressAnim || prefersReducedMotion() || typeof rect.animate !== 'function') return;
 			rect.style.transformBox = 'fill-box'; rect.style.transformOrigin = 'center bottom';
 			try { rect.animate([{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }], { duration: 600, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'backwards' }); } catch (_) { }
 		}
@@ -511,7 +541,7 @@
 				const path = svg('path', { class: 'slice', d: arc(slice), style: `--color-chart-color:${seriesColorVar(i)}` }, g);
 				applyTip(path, labels[i] + ': ' + data[i], cfg);
 				if (cfg.dataLabels) { const c = arc.centroid(slice); dataLabel(g, data[i], c[0], c[1], 'middle', 'central', 'inverse'); }
-				if (!prefersReducedMotion() && typeof path.animate === 'function') {
+				if (!_suppressAnim && !prefersReducedMotion() && typeof path.animate === 'function') {
 					path.style.transformBox = 'fill-box'; path.style.transformOrigin = 'center';
 					try { path.animate([{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'scale(1)' }], { duration: 450, delay: i * 60, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'backwards' }); } catch (_) { }
 				}
@@ -519,6 +549,128 @@
 			if (cfg.legend) drawLegend(state, labels);
 		}
 
+		// Gauge — a single value swept across a 180° dome. Track + value arc
+		// reuse the pie/donut arc primitive; optional `zones` paint threshold
+		// bands (e.g. positive/warning/negative ranges). `unit` suffixes the
+		// centered readout; `min`/`max` default 0–100.
+		function drawGauge(state, root, width, height) {
+			const cfg = state.config, d3 = state.d3;
+			const value = num(cfg.series[0] && cfg.series[0].data[0], 0);
+			const min = cfg.min, max = cfg.max;
+			const START = -Math.PI / 2, END = Math.PI / 2;
+			const scale = d3.scaleLinear().domain([min, max]).range([START, END]).clamp(true);
+			const unit = cfg.unit || '';
+
+			const r = Math.min(width / 2, height) - 8;
+			const thickness = Math.max(8, r * 0.22);
+			const cx = width / 2, cy = 8 + r;
+			const g = svg('g', { transform: `translate(${cx},${cy})` }, root);
+			const arc = d3.arc().innerRadius(r - thickness).outerRadius(r).cornerRadius(cssRadius(state.el));
+
+			// Track, or threshold zone bands when `zones` is given.
+			if (Array.isArray(cfg.zones) && cfg.zones.length) {
+				let from = min;
+				cfg.zones.forEach((z, i) => {
+					const to = num(z.to, max);
+					svg('path', { class: 'gauge-track', d: arc({ startAngle: scale(from), endAngle: scale(to) }), style: `--color-chart-color:${z.color || seriesColorVar(i)}`, opacity: 0.35 }, g);
+					from = to;
+				});
+			} else {
+				svg('path', { class: 'gauge-track', d: arc({ startAngle: START, endAngle: END }) }, g);
+			}
+
+			// Value arc — final geometry is set unconditionally so the gauge is
+			// correct even if the entry animation never runs (background tab);
+			// the sweep is a CSS reveal, never the source of the end state.
+			const color = (cfg.series[0] && cfg.series[0].color) || 'var(--color-chart-1)';
+			const valueAngle = scale(value);
+			const vArc = svg('path', { class: 'gauge-value', d: arc({ startAngle: START, endAngle: valueAngle }), style: `--color-chart-color:${color}` }, g);
+			applyTip(vArc, (cfg.title ? cfg.title + ': ' : '') + value + unit, cfg);
+			// Reveal via fade (WAAPI, origin-independent) — the final geometry above
+			// is unconditional, so the gauge is correct even if this never runs.
+			animate(vArc, [{ opacity: 0 }, { opacity: 1 }], { duration: 500 });
+
+			// Centered readout + range end labels.
+			text(g, value + unit, { class: 'gauge-label', x: 0, y: -r * 0.12, 'text-anchor': 'middle', 'dominant-baseline': 'central' });
+			if (cfg.axis) {
+				const lr = r - thickness / 2;
+				text(g, String(min), { x: -lr, y: 16, 'text-anchor': 'middle' });
+				text(g, String(max), { x: lr, y: 16, 'text-anchor': 'middle' });
+			}
+		}
+
+		// Heatmap — a matrix of cells: each series is a row, each datum a column
+		// aligned to `labels`. Cell colour is a CSS color-mix between the two
+		// --color-chart-heat-* tokens (no JS colour-interpolation dep), driven
+		// by the per-cell `--heat` percentage.
+		function drawHeatmap(state, root, width, height) {
+			const cfg = state.config, d3 = state.d3;
+			const rows = cfg.series;
+			const cols = cfg.labels.length ? cfg.labels : (rows[0] && Array.isArray(rows[0].data) ? rows[0].data.map((_, i) => i + 1) : []);
+			const rowName = (r, i) => r.name || String(i + 1);
+			const showLabels = cfg.axis;
+
+			const m = { top: 4, right: 4, bottom: showLabels ? 24 : 4, left: showLabels ? 64 : 4 };
+			const iw = width - m.left - m.right;
+			const ih = height - m.top - m.bottom;
+			// Tiles abut (padding 0); the gutter comes from insetting each rect
+			// by `gap` px (config, default 1; set 0 for a seamless field).
+			const gap = Math.max(0, cfg.gap);
+			const x = d3.scaleBand().domain(cols.map(String)).range([0, iw]).padding(0);
+			const yb = d3.scaleBand().domain(rows.map(rowName)).range([0, ih]).padding(0);
+			const cw = Math.max(0, x.bandwidth() - gap), ch = Math.max(0, yb.bandwidth() - gap);
+
+			// Value domain across every cell.
+			let lo = Infinity, hi = -Infinity;
+			rows.forEach(r => (r.data || []).forEach(v => { const n = num(v, 0); if (n < lo) lo = n; if (n > hi) hi = n; }));
+			if (!isFinite(lo)) { lo = 0; hi = 1; }
+			if (lo === hi) hi = lo + 1;
+
+			const plot = svg('g', { transform: `translate(${m.left},${m.top})` }, root);
+
+			// Round only the grid's outer corners: square tiles clipped to a single
+			// rounded rect hugging the cell extent (right/bottom edge sits at the
+			// last tile's inner edge, so the radius isn't clipping empty gutter).
+			const clipId = 'mnfst-heat-' + (++_uid);
+			const cp = svg('clipPath', { id: clipId }, svg('defs', null, root));
+			svg('rect', { x: 0, y: 0, width: Math.max(0, iw - gap), height: Math.max(0, ih - gap), rx: cssRadius(state.el) }, cp);
+			const cellsG = svg('g', { 'clip-path': `url(#${clipId})` }, plot);
+
+			rows.forEach((r, ri) => {
+				const yy = yb(rowName(r, ri));
+				cols.forEach((c, ci) => {
+					const v = num(r.data[ci], 0);
+					const t = Math.round(((v - lo) / (hi - lo)) * 100);
+					const cell = svg('rect', { class: 'heat-cell', x: x(String(c)), y: yy, width: cw, height: ch, style: `--heat:${t}%` }, cellsG);
+					applyTip(cell, (r.name ? r.name + ' · ' : '') + c + ': ' + v, cfg);
+					animate(cell, [{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: (ri + ci) * 20 });
+					if (cfg.dataLabels) dataLabel(plot, v, x(String(c)) + x.bandwidth() / 2, yy + yb.bandwidth() / 2, 'middle', 'central');
+				});
+			});
+
+			if (showLabels) {
+				rows.forEach((r, ri) => text(plot, rowName(r, ri), { x: -8, y: yb(rowName(r, ri)) + yb.bandwidth() / 2, 'text-anchor': 'end', 'dominant-baseline': 'central' }));
+				cols.forEach(c => text(plot, c, { x: x(String(c)) + x.bandwidth() / 2, y: ih + 16, 'text-anchor': 'middle' }));
+			}
+
+			if (cfg.legend) drawHeatLegend(state, lo, hi, m);
+		}
+
+		// Continuous gradient legend for the heatmap: low label, ramp bar, high
+		// label. Padded to the chart's margins so the bar spans the grid width
+		// (bar flexes to fill — see .heat-legend in the CSS).
+		function drawHeatLegend(state, lo, hi, m) {
+			const footer = document.createElement('footer');
+			footer.className = 'heat-legend';
+			footer.style.paddingLeft = m.left + 'px';
+			footer.style.paddingRight = m.right + 'px';
+			const a = document.createElement('span'); a.textContent = lo;
+			const bar = document.createElement('i');
+			const b = document.createElement('span'); b.textContent = hi;
+			footer.append(a, bar, b);
+			state.el.appendChild(footer);
+		}
+
 		// Legend is a <footer> sibling below the SVG (inline flex), not an
 		// absolute overlay — so it never collides with axis labels. Each item is
 		// a <span> with an <i> swatch carrying the series colour.

package/lib/manifest.css

@@ -651,6 +651,12 @@
     --color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
     --color-chart-label: var(--color-content-subtle, oklch(55.6% 0 0));
 
+    /* Heatmap ramp — single-hue sequential scale derived from --color-chart-1,
+       spanning a pale tint to a deep, saturated shade so values stay legible
+       even when the brand color itself is light. */
+    --color-chart-heat-low: oklch(from var(--color-chart-1) 0.95 calc(c * 0.3) h);
+    --color-chart-heat-high: oklch(from var(--color-chart-1) 0.55 calc(c * 1.15) h);
+
     /* Chart data segments */
     --color-chart-1: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
     --color-chart-2: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
@@ -765,6 +771,23 @@
             }
         }
 
+        /* Gauge — track band + value arc */
+        & path.gauge-track {
+            fill: var(--color-chart-color, var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)))
+        }
+
+        & path.gauge-value {
+            fill: var(--color-chart-color, var(--color-chart-1))
+        }
+
+        /* Gauge centered readout */
+        & text.gauge-label {
+            fill: var(--color-content-stark, oklch(20.5% 0 0));
+            font-size: 1.75rem;
+            font-weight: 700;
+            pointer-events: none
+        }
+
         /* Value labels drawn on/above segments */
         & text.value {
             fill: var(--color-content-stark, oklch(20.5% 0 0));
@@ -781,6 +804,17 @@
             }
         }
 
+        /* Heatmap cell — fill interpolates between the two heat tokens by the
+           per-cell --heat percentage (0% = low, 100% = high) */
+        & rect.heat-cell {
+            fill: color-mix(in oklch, var(--color-chart-heat-high, var(--color-chart-1)) var(--heat, 0%), var(--color-chart-heat-low, var(--color-surface-2)));
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.82
+            }
+        }
+
         /* Legend — <footer> sibling below the SVG; <span> items, <i> swatches */
         & footer {
             display: flex;
@@ -806,6 +840,21 @@
             }
         }
 
+        /* Heatmap gradient legend — low label, ramp bar (spans the grid), high
+           label. Footer is padded to the chart margins in JS so the bar aligns
+           with the columns. */
+        & footer.heat-legend {
+            flex-wrap: nowrap;
+            gap: 0.5rem;
+
+            & i {
+                flex: 1;
+                height: 0.5rem;
+                border-radius: 1rem;
+                background: linear-gradient(to right, var(--color-chart-heat-low, var(--color-surface-2)), var(--color-chart-heat-high, var(--color-chart-1)))
+            }
+        }
+
         /* Cursor-following tooltip — chrome comes from manifest.tooltip.css
            (.tooltip); only the pointer-tracking positioning lives here */
         & .tooltip {
@@ -2212,7 +2261,7 @@
             margin-left: auto;
             margin-right: auto;
 
-            & :where(a, button, [role=button]):not(.unstyle) {
+            & :where(a, button, [role=button]) {
                 justify-content: center
             }
         }
@@ -2357,6 +2406,228 @@
     }
 }
 
+/* Manifest Edit */
+
+/* Authors override any of this without specificity battles: every rule is wrapped
+   in :where(), state lives on data-attributes, and injected affordances use plain
+   semantic class names (.edit-handle, .edit-frame) — no framework-prefixed litter. */
+
+@layer utilities {
+
+    /* ---- Editable area (armed) ---- */
+    :where([data-edit-armed]) {
+        position: relative;
+        outline: 1px dashed var(--color-line);
+        outline-offset: 6px;
+        border-radius: var(--radius);
+    }
+
+    :where([data-edit-armed])::before {
+        content: attr(data-edit-label);
+        position: absolute;
+        inset-block-start: -1.5rem;
+        inset-inline-start: 0;
+        font-size: 0.7rem;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--color-content-subtle);
+        pointer-events: none;
+    }
+
+    /* ---- Reorder (pointer + keyboard; touch-action:none lets touch-drag beat scroll) ---- */
+    :where([data-edit-sortable]) {
+        cursor: grab;
+        touch-action: none;
+        transition: opacity 0.12s ease, outline-color 0.12s ease;
+    }
+    :where([data-edit-sortable]):hover {
+        outline: 1px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+    :where([data-edit-sortable]):focus-visible,
+    :where([data-edit-movable]):focus-visible {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+    :where([data-edit-dragging]) { opacity: 0.4; }
+    :where([data-edit-grabbed]) {
+        outline: 2px dashed var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+
+    /* Screen-reader announcement region (keyboard grab/move/drop) */
+    :where(.edit-sr) {
+        position: absolute;
+        width: 1px; height: 1px;
+        margin: -1px; padding: 0; border: 0;
+        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+    }
+
+    /* ---- Move (positioned children) ---- */
+    :where([data-edit-movable]) { cursor: move; touch-action: none; }
+    :where([data-edit-movable]):hover {
+        outline: 1px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 2px;
+    }
+
+    /* ---- Inline text ---- */
+    :where([data-edit-armed]) [contenteditable="true"] {
+        outline: 1px solid color-mix(in srgb, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
+        outline-offset: 2px;
+        border-radius: 3px;
+    }
+    :where([data-edit-armed]) [contenteditable="true"]:focus {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+    }
+
+    /* ---- Size (resize handles) — injected overlay children, fully stylable ---- */
+    /* The element keeps its own markup untouched, so its native :hover/:focus still
+       fire. Handles are separate elements with pointer-events; the body of the
+       element stays interactive. */
+    :where([data-edit-sizable]) {
+        position: relative;
+
+        .edit-handle {
+            position: absolute;
+            z-index: 100;
+            background: transparent;
+            --h: var(--edit-size-handle, 1rem);
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 1px;
+                height: 1px;
+                background: transparent;
+                transition: background-color 0.15s ease;
+            }
+            &:hover::before, &:active::before {
+                background-color: var(--edit-accent, var(--color-brand-content));
+            }
+        }
+
+        .edit-handle-top, .edit-handle-bottom { left: 0; width: 100%; height: var(--h); cursor: ns-resize; &::before { width: 100%; } }
+        .edit-handle-left, .edit-handle-right, .edit-handle-start, .edit-handle-end { top: 0; height: 100%; width: var(--h); cursor: ew-resize; &::before { height: 100%; } }
+        .edit-handle-top { top: calc(var(--h) * -0.5); }
+        .edit-handle-bottom { bottom: calc(var(--h) * -0.5); }
+        .edit-handle-left { left: calc(var(--h) * -0.5); }
+        .edit-handle-right { right: calc(var(--h) * -0.5); }
+        /* Logical edges — inset-inline-* auto-flips for RTL */
+        .edit-handle-start { inset-inline-start: calc(var(--h) * -0.5); }
+        .edit-handle-end { inset-inline-end: calc(var(--h) * -0.5); }
+
+        .edit-handle-top-left, .edit-handle-top-right, .edit-handle-bottom-left, .edit-handle-bottom-right,
+        .edit-handle-top-start, .edit-handle-top-end, .edit-handle-bottom-start, .edit-handle-bottom-end {
+            width: var(--h); height: var(--h);
+        }
+        .edit-handle-top-left { top: calc(var(--h) * -0.5); left: calc(var(--h) * -0.5); cursor: nwse-resize; }
+        .edit-handle-top-right { top: calc(var(--h) * -0.5); right: calc(var(--h) * -0.5); cursor: nesw-resize; }
+        .edit-handle-bottom-left { bottom: calc(var(--h) * -0.5); left: calc(var(--h) * -0.5); cursor: nesw-resize; }
+        .edit-handle-bottom-right { bottom: calc(var(--h) * -0.5); right: calc(var(--h) * -0.5); cursor: nwse-resize; }
+        .edit-handle-top-start { top: calc(var(--h) * -0.5); inset-inline-start: calc(var(--h) * -0.5); cursor: nwse-resize; }
+        .edit-handle-top-end { top: calc(var(--h) * -0.5); inset-inline-end: calc(var(--h) * -0.5); cursor: nesw-resize; }
+        .edit-handle-bottom-start { bottom: calc(var(--h) * -0.5); inset-inline-start: calc(var(--h) * -0.5); cursor: nesw-resize; }
+        .edit-handle-bottom-end { bottom: calc(var(--h) * -0.5); inset-inline-end: calc(var(--h) * -0.5); cursor: nwse-resize; }
+    }
+
+    /* Collapsed state (size dropped below --edit-size-collapse-*) — authors restyle freely */
+    :where([data-edit-collapsed]) { opacity: 0.45; }
+
+    /* Full-viewport capture layer during a size/move drag (mirrors resize overlay) */
+    :where(.edit-overlay) {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background: transparent;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        :where([data-edit-armed]) > [draggable="true"], :where([data-edit-sizable]) .edit-handle::before { transition: none; }
+    }
+}
+
+/* ---- Plugin dev chrome (spike-only: toolbar + inspector + class menu) ---- */
+@layer components {
+
+    :where(.edit-toolbar) {
+        position: fixed;
+        inset-block-end: 1rem;
+        inset-inline-end: 1rem;
+        z-index: 9999;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+    }
+
+    :where(.edit-classes) {
+        position: fixed;
+        z-index: 10000;
+        width: 260px;
+        padding: 0.6rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        background: var(--color-surface-1);
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+    }
+    :where(.edit-classes)[hidden] { display: none; }
+    :where(.edit-classes) input { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; }
+    :where(.edit-classes) .muted { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-content-subtle); }
+
+    :where(.edit-inspector) {
+        position: fixed;
+        inset-block: 1rem 5rem;
+        inset-inline-end: 1rem;
+        width: 380px;
+        max-width: 42vw;
+        z-index: 9998;
+        overflow: auto;
+        padding: 1rem;
+        background: var(--color-surface-1);
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        box-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
+        font-size: 0.78rem;
+    }
+    :where(.edit-inspector)[hidden] { display: none; }
+    :where(.edit-inspector) h4 { margin: 0 0 0.25rem; }
+    :where(.edit-inspector) section { margin-bottom: 1rem; }
+    :where(.edit-inspector) pre {
+        margin: 0.25rem 0 0;
+        padding: 0.6rem;
+        background: var(--color-surface-3);
+        border-radius: 6px;
+        white-space: pre-wrap;
+        word-break: break-word;
+        font-family: ui-monospace, Menlo, monospace;
+        font-size: 0.72rem;
+        line-height: 1.45;
+    }
+    :where(.edit-inspector) .muted { color: var(--color-content-subtle); }
+    :where(.edit-inspector) .tag {
+        display: inline-block;
+        font-size: 0.64rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        padding: 0.05rem 0.4rem;
+        border-radius: 999px;
+        background: var(--color-surface-3);
+        color: var(--color-content-subtle);
+        margin-inline-start: 0.4rem;
+    }
+    :where(.edit-inspector) .tag.static { background: color-mix(in srgb, var(--color-brand-content) 18%, transparent); }
+    :where(.edit-inspector) .tag.data { background: color-mix(in srgb, var(--color-positive-content) 22%, transparent); }
+    :where(.edit-inspector) .tag.component { background: color-mix(in srgb, var(--color-negative-content) 20%, transparent); }
+    :where(.edit-inspector) .delta { padding: 0.2rem 0.3rem; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; line-height: 1.5; }
+    :where(.edit-inspector) .delta.undone { opacity: 0.4; text-decoration: line-through; }
+    :where(.edit-toolbar) button[disabled] { opacity: 0.35; pointer-events: none; }
+}
+
 /* Manifest Forms */
 
 @layer components {

package/lib/manifest.data.js

@@ -1497,6 +1497,15 @@ function numericKeyObjectToArray(obj) {
     return sorted.map(i => obj[String(i)]);
 }
 
+// Empty value for a header-only CSV (declares columns but has no data rows yet —
+// e.g. a locales file used only to declare available languages). Shapes the
+// result like a populated parse would: tabular ('id' + 3+ columns) → [], else
+// key-value → {}. A header-only CSV is a valid empty source, not an error.
+function emptyCsvResult(headers) {
+    const first = (headers[0] || '').toLowerCase();
+    return (headers.length > 2 && first === 'id') ? [] : {};
+}
+
 // Parse CSV text to nested object structure
 function parseCSVToNestedObject(csvText, options = {}) {
     const {
@@ -1520,7 +1529,13 @@ function parseCSVToNestedObject(csvText, options = {}) {
         }
 
         if (!parsed.data || parsed.data.length === 0) {
-            throw new Error('[Manifest Data] CSV file is empty or has no data rows');
+            // Header-only CSV is a valid empty source — return empty rather than
+            // throw. Only a file with no header row at all is treated as invalid.
+            const fields = parsed.meta?.fields || [];
+            if (fields.length === 0) {
+                throw new Error('[Manifest Data] CSV file is empty or has no headers');
+            }
+            return emptyCsvResult(fields);
         }
 
         const result = {};
@@ -1608,8 +1623,8 @@ function parseCSVToNestedObject(csvText, options = {}) {
     } else {
         // Fallback simple parser (if PapaParse not loaded)
         const lines = csvText.split('\n').filter(line => line.trim());
-        if (lines.length < 2) {
-            throw new Error('[Manifest Data] CSV file must have at least a header row and one data row');
+        if (lines.length === 0) {
+            throw new Error('[Manifest Data] CSV file is empty or has no headers');
         }
 
         // Simple CSV line parser (handles quoted values)
@@ -1638,6 +1653,11 @@ function parseCSVToNestedObject(csvText, options = {}) {
             throw new Error('[Manifest Data] CSV file must have at least two columns');
         }
 
+        if (lines.length === 1) {
+            // Header-only CSV → valid empty source (see PapaParse path above).
+            return emptyCsvResult(headers);
+        }
+
         // First column is always the key
         const keyColumn = headers[0];
 

package/lib/manifest.dropdown.css

@@ -136,7 +136,7 @@
             margin-left: auto;
             margin-right: auto;
 
-            & :where(a, button, [role=button]):not(.unstyle) {
+            & :where(a, button, [role=button]) {
                 justify-content: center
             }
         }