mnfst 0.5.163 → 0.5.165

package/lib/manifest.appwrite.presences.js

@@ -0,0 +1,292 @@
+/*  Manifest Appwrite Presences ($presence)
+/*  By Andrew Matlock under MIT license
+/*  https://github.com/andrewmatlock/Manifest
+/*
+/*  Reactive user status/roster over the native Appwrite Presences API
+/*  Requires Alpine JS (alpinejs.dev) to operate
+*/
+
+(function () {
+    'use strict';
+
+    /* State */
+
+    const ctx = {
+        client: null,
+        presences: null,
+        realtime: null,
+        sub: null,
+        heartbeat: null,
+        started: false,
+        status: 'online',
+        metadata: null,
+        auto: true,             // focus/blur auto-flip
+        heartbeatMs: 25000,     // TTL refresh cadence
+        onFocus: null,
+        onBlur: null
+    };
+
+    /* Config */
+
+    // Resolve ${VAR} against window.env
+    function resolveEnv(v) {
+        if (typeof v !== 'string') return v;
+        return v.replace(/\$\{([^}]+)\}/g, (m, name) => {
+            if (typeof window !== 'undefined' && window.env && window.env[name] != null) return window.env[name];
+            return null;
+        });
+    }
+
+    async function getConfig() {
+        try {
+            const manifest = await window.ManifestDataConfig?.ensureManifest?.();
+            const aw = manifest?.appwrite;
+            if (!aw) return null;
+            const endpoint = resolveEnv(aw.endpoint);
+            const projectId = resolveEnv(aw.projectId);
+            if (!endpoint || !projectId) return null;
+            let devKey = aw.devKey ? resolveEnv(aw.devKey) : null;
+            if (devKey && /\$\{/.test(devKey)) devKey = null;
+            return { endpoint, projectId, devKey };
+        } catch (e) {
+            return null;
+        }
+    }
+
+    function store() {
+        return (typeof Alpine !== 'undefined') ? Alpine.store('presence') : null;
+    }
+
+    function authUser() {
+        const s = (typeof Alpine !== 'undefined') ? Alpine.store('auth') : null;
+        return s && s.user ? s.user : null;
+    }
+
+    // Active team id (read-scoping)
+    function currentTeamId() {
+        const s = (typeof Alpine !== 'undefined') ? Alpine.store('auth') : null;
+        if (!s) return null;
+        if (s.currentTeam) return typeof s.currentTeam === 'string' ? s.currentTeam : (s.currentTeam.$id || s.currentTeam.id || null);
+        if (Array.isArray(s.teams) && s.teams.length) return s.teams[0].$id || s.teams[0].id || null;
+        return null;
+    }
+
+    // Consistent per-user color
+    function userColor(id) {
+        if (!id) return '#666';
+        let hash = 0;
+        for (let i = 0; i < id.length; i++) hash = id.charCodeAt(i) + ((hash << 5) - hash);
+        return `hsl(${Math.abs(hash) % 360}, 70%, 50%)`;
+    }
+
+    // Appwrite client + services — authed via the session cookie, not the dev key (which is the guests principal for user ops)
+    async function ensureServices() {
+        if (ctx.presences && ctx.realtime) return true;
+        const A = window.Appwrite;
+        if (!A || !A.Presences || !A.Realtime) return false;
+        const cfg = await getConfig();
+        if (!cfg) return false;
+        const client = new A.Client().setEndpoint(cfg.endpoint).setProject(cfg.projectId);
+        ctx.client = client;
+        ctx.presences = new A.Presences(client);
+        ctx.realtime = new A.Realtime(client);
+        return true;
+    }
+
+    /* Records */
+
+    function normalize(rec) {
+        if (!rec) return null;
+        const userId = rec.userId || rec.$userId || rec.presenceId || rec.$id;
+        if (!userId) return null;
+        let metadata = rec.metadata;
+        if (typeof metadata === 'string') { try { metadata = JSON.parse(metadata); } catch (e) { } }
+        const updatedAt = rec.$updatedAt || rec.$createdAt || null;
+        return {
+            userId,
+            status: rec.status || null,
+            metadata: metadata || null,
+            lastSeen: updatedAt ? Date.parse(updatedAt) : Date.now(),
+            expiresAt: rec.expiresAt || rec.$expiresAt || null,
+            color: userColor(userId)
+        };
+    }
+
+    // Reactive map updates (reassign for Alpine tracking)
+    function putRecord(rec) {
+        const s = store(); if (!s || !rec) return;
+        s.records = { ...s.records, [rec.userId]: rec };
+    }
+    function removeRecord(userId) {
+        const s = store(); if (!s || !userId) return;
+        if (!s.records[userId]) return;
+        const next = { ...s.records }; delete next[userId]; s.records = next;
+    }
+
+    async function hydrate() {
+        const s = store();
+        try {
+            const res = await ctx.presences.list();
+            const rows = res?.presences || res?.rows || res?.documents || [];
+            const map = {};
+            rows.forEach(r => { const n = normalize(r); if (n) map[n.userId] = n; });
+            if (s) s.records = map;
+        } catch (e) {
+            if (s) s.error = e?.message || String(e);
+        }
+    }
+
+    function subscribe() {
+        const A = window.Appwrite;
+        try {
+            const handle = ctx.realtime.subscribe(A.Channel.presences(), (response) => {
+                if (!response) return;
+                const events = Array.isArray(response.events) ? response.events : (response.events ? [response.events] : []);
+                const rec = normalize(response.payload || response);
+                if (!rec) return;
+                // Ignore echoes of our own presence (tracked locally; delayed echoes would clobber newer status)
+                const meId = authUser()?.$id;
+                if (meId && rec.userId === meId) return;
+                if (events.some(e => typeof e === 'string' && e.includes('delete'))) removeRecord(rec.userId);
+                else putRecord(rec);
+            });
+            // Normalise the unsubscribe handle
+            if (handle && typeof handle.then === 'function') {
+                handle.then(r => { ctx.sub = typeof r === 'function' ? r : (r && r.close ? () => r.close() : null); });
+                ctx.sub = () => { handle.then(r => { if (typeof r === 'function') r(); else if (r && r.close) r.close(); }); };
+            } else if (typeof handle === 'function') {
+                ctx.sub = handle;
+            } else if (handle && typeof handle.close === 'function') {
+                ctx.sub = () => handle.close();
+            }
+        } catch (e) {
+            const s = store(); if (s) s.error = e?.message || String(e);
+        }
+    }
+
+    /* Operations */
+
+    async function set(status, metadata) {
+        const A = window.Appwrite;
+        const user = authUser();
+        const s = store();
+        if (!user) { if (s) s.error = 'sign in required'; return false; }
+        if (!(await ensureServices())) { if (s) s.error = 'Appwrite Presences unavailable'; return false; }
+        ctx.status = status != null ? status : ctx.status;
+        ctx.metadata = metadata !== undefined ? metadata : ctx.metadata;
+
+        // Read-scope + owner write (owner update/delete required, else updates 401)
+        const teamId = currentTeamId();
+        const permissions = [
+            teamId ? A.Permission.read(A.Role.team(teamId)) : A.Permission.read(A.Role.users()),
+            A.Permission.update(A.Role.user(user.$id)),
+            A.Permission.delete(A.Role.user(user.$id))
+        ];
+
+        // name/color in metadata for rosters (name null when unknown — display label is the author's)
+        const meta = Object.assign(
+            { name: user.name || user.email || null, color: userColor(user.$id) },
+            ctx.metadata || {}
+        );
+
+        // Optimistic local update
+        putRecord(normalize({ userId: user.$id, status: ctx.status, metadata: meta, $updatedAt: new Date().toISOString() }));
+        if (s) s.me = ctx.status;
+        try {
+            await ctx.presences.upsert({ presenceId: user.$id, status: ctx.status, metadata: meta, permissions });
+            if (s) s.error = null;
+            return true;
+        } catch (e) {
+            if (s) s.error = e?.message || String(e);
+            return false;
+        }
+    }
+
+    async function clear() {
+        const user = authUser();
+        if (!user || !ctx.presences) return;
+        try { await ctx.presences.delete({ presenceId: user.$id }); } catch (e) { }
+        removeRecord(user.$id);
+        const s = store(); if (s) s.me = null;
+    }
+
+    function of(userId) {
+        const s = store();
+        return (s && s.records ? s.records[userId] : null) || null;
+    }
+
+    function all() {
+        const s = store();
+        return s && s.records ? Object.values(s.records) : [];
+    }
+
+    async function start(options) {
+        const opts = options || {};
+        if (typeof opts.auto === 'boolean') ctx.auto = opts.auto;
+        if (typeof opts.heartbeatMs === 'number') ctx.heartbeatMs = opts.heartbeatMs;
+        if (typeof opts.status === 'string') ctx.status = opts.status;
+
+        const s = store();
+        if (!authUser()) { if (s) s.error = 'sign in required'; return false; }
+        if (!(await ensureServices())) { if (s) s.error = 'Appwrite Presences unavailable'; return false; }
+        if (ctx.started) return true;
+        ctx.started = true;
+
+        await hydrate();
+        subscribe();
+        await set(ctx.status, ctx.metadata);
+
+        // Heartbeat (refresh TTL)
+        ctx.heartbeat = setInterval(() => { if (authUser()) set(ctx.status, ctx.metadata); }, ctx.heartbeatMs);
+
+        // Auto focus/blur flip
+        if (ctx.auto) {
+            ctx.onBlur = () => set('away');
+            ctx.onFocus = () => set('online');
+            window.addEventListener('blur', ctx.onBlur);
+            window.addEventListener('focus', ctx.onFocus);
+        }
+
+        if (s) { s.ready = true; s.error = null; }
+        return true;
+    }
+
+    function stop() {
+        if (ctx.heartbeat) { clearInterval(ctx.heartbeat); ctx.heartbeat = null; }
+        if (ctx.onBlur) { window.removeEventListener('blur', ctx.onBlur); ctx.onBlur = null; }
+        if (ctx.onFocus) { window.removeEventListener('focus', ctx.onFocus); ctx.onFocus = null; }
+        if (typeof ctx.sub === 'function') { try { ctx.sub(); } catch (e) { } }
+        ctx.sub = null;
+        ctx.started = false;
+        const s = store(); if (s) s.ready = false;
+    }
+
+    /* Registration */
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.store('presence', { records: {}, ready: false, error: null, me: null });
+
+        // Clear on sign-out
+        try {
+            Alpine.effect(() => {
+                if (!authUser() && ctx.started) { clear(); stop(); }
+            });
+        } catch (e) { }
+
+        const api = {
+            start, stop, set, clear, of, all,
+            get records() { return store()?.records || {}; },
+            get list() { return all(); },
+            get ready() { return !!store()?.ready; },
+            get error() { return store()?.error || null; },
+            get me() { return store()?.me || null; }
+        };
+        Alpine.magic('presence', () => api);
+    });
+
+    // Clear on tab close
+    window.addEventListener('beforeunload', () => { try { if (ctx.started) clear(); } catch (e) { } });
+
+    // Non-Alpine handle
+    window.ManifestPresence = { start, stop, set, clear, of, all };
+})();

package/lib/manifest.charts.js

@@ -1,33 +1,18 @@
-/*  Manifest Charts
+/*  Manifest Charts — in-house SVG chart renderer (themeable, prerender-safe, a11y).
 /*  By Andrew Matlock under MIT license
 /*  https://manifestx.dev
-/*
-/*  An in-house SVG chart renderer. SVG (not canvas) so charts inherit theme
-/*  colors via CSS variables, are restylable with the same selector
-/*  conventions as every other element, survive static prerendering as real
-/*  DOM, and expose accessible <title>/<desc>. The only dependencies are the
-/*  d3-scale / d3-shape / d3-array micro-modules (ISC, ~22KB), lazy-loaded
-/*  from esm.run on first scroll-into-view — the same posture as the code
-/*  plugin loading highlight.js on demand.
+/*  d3-scale/shape/array micro-modules (ISC) lazy-loaded from esm.run on scroll-in.
 */
 
 (function () {
 	'use strict';
 
-	/* ------------------------------------------------------------------ *
-	 * Shared global: ManifestUI (universal `_ui` resolver). Defined guarded so
-	 * charts works whether or not the date picker (which also defines it) is
-	 * loaded. `_ui` is a reserved, self-identifying key: any loaded data source
-	 * may carry a top-level `_ui` object, namespaced per element (`_ui.charts`,
-	 * `_ui.colorpicker`, …); no manifest flag — overrides piggyback on the normal
-	 * local-data/localization model. resolve() deep-merges every loaded source's
-	 * `_ui[component]` onto the plugin's English fallbacks. Kept byte-identical
-	 * across the date picker / color picker copies.
-	 * ------------------------------------------------------------------ */
+	/* Shared localized-UI resolver: deep-merges every loaded source's `_ui[component]`
+	 * onto the plugin's English fallbacks. Guarded; byte-identical across the picker
+	 * copies (first plugin to load defines it). */
 	if (!window.ManifestUI) {
 		window.ManifestUI = {
-			/* Names of data sources that have loaded (current locale). Enumerates loaded
-			 * sources only — never force-loads others just to scan them for `_ui`. */
+			/* Loaded data sources (current locale); never force-loads others. */
 			_loadedSourceNames() {
 				try {
 					const store = window.ManifestDataStore && window.ManifestDataStore.rawDataStore;
@@ -35,8 +20,7 @@
 				} catch (_) { }
 				return [];
 			},
-			/* Deep-merge every loaded source's `_ui[component]` onto `fallbacks`.
-			 * Reads inside the caller's Alpine effect (if any) so $x/$locale make it reactive. */
+			/* Reads inside the caller's Alpine effect (if any) so $x/$locale stay reactive. */
 			resolve(component, fallbacks) {
 				const merged = JSON.parse(JSON.stringify(fallbacks || {}));
 				try {
@@ -256,19 +240,15 @@
 			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.
+		// Entry animations run only on first draw; redraws paint final state directly
+		// (else a bound value change replays the reveal every frame). Set by drawChart.
 		let _suppressAnim = false;
 		function animate(el, keyframes, opts) {
 			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
-		// positioning, which can't anchor to SVG child elements (no CSS-layout
-		// box) — so charts use their own tip, themed to match, following the
-		// pointer (better UX for dense charts). aria-label carries AT semantics.
+		// Cursor-following tooltip: x-tooltip's CSS anchor positioning can't target SVG
+		// children (no layout box), so charts use their own themed tip. aria-label for AT.
 		function applyTip(seg, tip, cfg) {
 			seg.setAttribute('aria-label', tip);
 			if (!cfg.tooltip) return;
@@ -337,12 +317,8 @@
 					if (self.el.id) _registry[self.el.id] = self.api;
 				},
 
-				// Coalesce to one draw per tick. Uses setTimeout (not rAF) so draws
-				// still happen when the tab is backgrounded (rAF is paused for hidden
-				// tabs), and does NOT reset a pending timer on re-entry — a
-				// high-frequency reactive trigger (e.g. a plugin bumping the data-store
-				// version every tick) would otherwise perpetually reschedule and starve
-				// the draw.
+				// One draw per tick. setTimeout (not rAF) so backgrounded tabs still draw;
+				// doesn't reset a pending timer, so a high-frequency trigger can't starve it.
 				schedule() { if (this._t) return; this._t = setTimeout(() => { this._t = null; this.draw(); }, 0); },
 
 				renderError(msg) { this.el.innerHTML = ''; const d = document.createElement('small'); d.textContent = msg; this.el.appendChild(d); },
@@ -407,10 +383,8 @@
 			return 4 + n * cfg.rowHeight + 22;
 		}
 
-		// Palette size is CSS-driven: count consecutive --color-chart-N custom
-		// properties (themes can extend past 8 by defining --color-chart-9, …);
-		// segment colours cycle through however many exist. Re-probed per draw
-		// so per-scope overrides apply.
+		// Palette size = count of consecutive --color-chart-N tokens (themes may extend
+		// past 8); colours cycle through them. Re-probed per draw for per-scope overrides.
 		let _paletteN = 8;
 		function probePalette(el) {
 			try {
@@ -649,13 +623,8 @@
 			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.
-		// Widest rendered label in px — exact via getComputedTextLength (the root
-		// SVG is already in the document); char-estimate fallback pre-layout. Used
-		// to size axis gutters to their content so charts sit balanced, not lopsided.
+		// Widest rendered label in px (exact via getComputedTextLength, char-estimate
+		// fallback). Sizes axis gutters to their content so charts sit balanced.
 		function labelWidth(root, items, cls) {
 			if (!items || !items.length) return 0;
 			const probe = svg('text', cls ? { class: cls, x: -9999, y: -9999 } : { x: -9999, y: -9999 }, root);
@@ -694,15 +663,12 @@
 				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.
+			// Value arc — final geometry set unconditionally, so a background tab that
+			// skips the fade reveal still renders correctly.
 			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.
@@ -714,10 +680,8 @@
 			}
 		}
 
-		// 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.
+		// Heatmap — matrix of cells (row per series, column per datum). Cell colour is a
+		// CSS color-mix of the --color-chart-heat-* tokens via a per-cell `--heat` %.
 		function drawHeatmap(state, root, width, height) {
 			const cfg = state.config, d3 = state.d3;
 			const rows = cfg.series;
@@ -747,9 +711,8 @@
 
 			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).
+			// Round only the grid's outer corners: square tiles clipped to one rounded
+			// rect hugging the cell extent (so the radius doesn't clip 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);
@@ -790,12 +753,9 @@
 			state.el.appendChild(footer);
 		}
 
-		// Gantt — each series is a track (row); its data is an array
-		// of `{ from, to, status?, label?, color? }` segments on a shared X axis.
-		// The axis adapts to the data: numbers → linear (0–10, distance, %),
-		// date-ish values → time, other strings → category (ordinal stages). A
-		// segment with no `to` is a point marker. Single track = a status strip;
-		// many tracks = swimlanes / Gantt.
+		// Gantt — each series is a track of `{ from, to, status?, label?, color? }`
+		// segments on a shared X axis, adapting numbers→linear, dates→time, else
+		// category. A `to`-less segment is a point marker.
 		function drawGantt(state, root, width, height) {
 			const cfg = state.config, d3 = state.d3;
 			const tracks = cfg.series;
@@ -967,9 +927,8 @@
 			const valueById = {};
 			entries.forEach(([key, val]) => resolveRegion(key, geo).ids.forEach(id => { valueById[id] = val; }));
 
-			// Display-name resolution: `_ui.map.regions` override → localized
-			// pack (per $locale) → English atlas name. Async packs trigger a
-			// redraw when they arrive.
+			// Display name: `_ui.map.regions` override → localized pack ($locale) →
+			// English atlas name. Async packs trigger a redraw on arrival.
 			const num2a2 = (geo.meta && geo.meta.num2a2) || {};
 			const locale = chartLocale();
 			const ui = (window.ManifestUI && window.ManifestUI.resolve) ? window.ManifestUI.resolve('map', {}) : {};
@@ -986,9 +945,8 @@
 				return eng;
 			};
 
-			// Author-supplied place gazetteer (config `places` or `_ui.map.cities`)
-			// for resolving point names → coords. No city data is bundled; authors
-			// source it from a third-party library in their own project.
+			// Author-supplied place gazetteer (config `places` or `_ui.map.cities`) for
+			// resolving point names → coords. No city data is bundled.
 			const placesSrc = cfg.places || ui.cities || null;
 			let places = null;
 			if (placesSrc) { places = {}; Object.keys(placesSrc).forEach(k => { places[k.toLowerCase()] = placesSrc[k]; }); }
@@ -1066,9 +1024,8 @@
 			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.
+		// Legend is a <footer> sibling below the SVG, not an overlay, so it never
+		// collides with axis labels. Each item: a <span> with an <i> colour swatch.
 		function drawLegend(state, labelsOverride) {
 			const cfg = state.config;
 			const items = labelsOverride || cfg.series.map(s => s.name).filter(Boolean);
@@ -1091,10 +1048,8 @@
 			const state = createState(el, expression, modifiers);
 			el._chartState = state;
 			el.classList.add('chart');
-			// Reserve the chart's height up front (parsed from the config, default
-			// 240) so the empty container isn't 0-height — a zero-height box doesn't
-			// reliably trigger the lazy-load IntersectionObserver, and reserving it
-			// also prevents a layout jump when the SVG renders.
+			// Reserve height up front (config, default 240): a 0-height box doesn't
+			// reliably trigger the lazy-load observer, and reserving avoids a layout jump.
 			const hm = expression && /height\s*:\s*(\d+)/.exec(expression);
 			el.style.minHeight = (hm ? +hm[1] : 240) + 'px';
 			observer().observe(el);