solid-ui 5.0.2-3 → 5.0.2-5

package/dist/login/login.esm.js

@@ -1,15 +1,15 @@
 import { __exportAll as e } from "../_virtual/_rolldown/runtime.esm.js";
-import t from "../lib/ns.esm.js";
-import { alert as n } from "../lib/log.esm.js";
-import { label as r } from "../utils/label.esm.js";
+import { log as t, warn as n } from "../lib/debug.esm.js";
+import { style as r } from "../lib/style.esm.js";
+import { label as i } from "../utils/label.esm.js";
+import { alert as a } from "../lib/log.esm.js";
+import o from "../lib/ns.esm.js";
+import { Signup as s } from "../signup/signup.esm.js";
+import { errorMessageBlock as c } from "../widgets/error.esm.js";
+import { askName as l, clearElement as u, personTR as d } from "../widgets/buttons.esm.js";
+import { buildCheckboxForm as f, newThing as p } from "../widgets/forms.esm.js";
 import "../utils/index.esm.js";
-import { log as i, warn as a } from "../lib/debug.esm.js";
-import { style as o } from "../lib/style.esm.js";
-import { errorMessageBlock as s } from "../widgets/error.esm.js";
-import { askName as c, clearElement as l, personTR as u } from "../widgets/buttons.esm.js";
-import { buildCheckboxForm as d, newThing as f } from "../widgets/forms.esm.js";
 import "../widgets/index.esm.js";
-import { Signup as p } from "../signup/signup.esm.js";
 import { BlankNode as m, st as h } from "rdflib";
 import { CrossOriginForbiddenError as g, FetchError as _, NotEditableError as v, SameOriginForbiddenError as y, UnauthorizedError as b, WebOperationError as x, authSession as S, authn as C, getSuggestedIssuers as w, offlineTestID as T, solidLogicSingleton as E } from "solid-logic";
 // src/login/login.ts
@@ -30,21 +30,21 @@ var D = /* @__PURE__ */ e({
 	selectWorkspace: () => q
 }), O = E.store, { loadPreferences: k, loadProfile: A } = E.profile, { getScopedAppInstances: j, getRegistrations: M, loadAllTypeIndexes: N, getScopedAppsFromIndex: P, deleteTypeIndexRegistration: F } = E.typeIndex;
 function I(e) {
-	let t = C.currentUser();
-	return t ? (C.saveUser(t, e), Promise.resolve(e)) : new Promise((t) => {
-		C.checkUser().then((n) => {
-			if (n) return i(`logIn: Already logged in as ${n}`), t(e);
-			if (!e.div || !e.dom) return t(e);
-			let r = K(e.dom, (n) => {
-				C.saveUser(n, e), t(e);
+	let n = C.currentUser();
+	return n ? (C.saveUser(n, e), Promise.resolve(e)) : new Promise((n) => {
+		C.checkUser().then((r) => {
+			if (r) return t(`logIn: Already logged in as ${r}`), n(e);
+			if (!e.div || !e.dom) return n(e);
+			let i = K(e.dom, (t) => {
+				C.saveUser(t, e), n(e);
 			});
-			e.div.appendChild(r);
-		}).catch((n) => {
-			if (i(`logIn: session check failed, showing login (${n})`), !e.div || !e.dom) return t(e);
-			let r = K(e.dom, (n) => {
-				C.saveUser(n, e), t(e);
+			e.div.appendChild(i);
+		}).catch((r) => {
+			if (t(`logIn: session check failed, showing login (${r})`), !e.div || !e.dom) return n(e);
+			let i = K(e.dom, (t) => {
+				C.saveUser(t, e), n(e);
 			});
-			e.div.appendChild(r);
+			e.div.appendChild(i);
 		});
 	});
 }
@@ -56,12 +56,12 @@ async function L(e) {
 		e.preferencesFile = t;
 	} catch (t) {
 		let r;
-		if (t instanceof b) r = "Oops — you are not authenticated (properly logged in), so SolidOS cannot read your preferences file. Try logging out and then logging back in.", n(r);
+		if (t instanceof b) r = "Oops — you are not authenticated (properly logged in), so SolidOS cannot read your preferences file. Try logging out and then logging back in.", a(r);
 		else if (t instanceof g) return r = `Unauthorized: Assuming preference file blocked for origin ${window.location.origin}`, e.preferencesFileError = r, e;
-		else if (t instanceof y) return r = "You are not authorized to read your preference file. This may be because you are using an untrusted web app.", a(r), e;
-		else if (t instanceof v) return r = "You are not authorized to edit your preference file. This may be because you are using an untrusted web app.", a(r), e;
-		else if (t instanceof x) r = "You are not authorized to edit your preference file. This may be because you are using an untrusted web app.", a(r);
-		else if (t instanceof _) r = `Strange: Error ${t.status} trying to read your preference file.${t.message}`, n(r);
+		else if (t instanceof y) return r = "You are not authorized to read your preference file. This may be because you are using an untrusted web app.", n(r), e;
+		else if (t instanceof v) return r = "You are not authorized to edit your preference file. This may be because you are using an untrusted web app.", n(r), e;
+		else if (t instanceof x) r = "You are not authorized to edit your preference file. This may be because you are using an untrusted web app.", n(r);
+		else if (t instanceof _) r = `Strange: Error ${t.status} trying to read your preference file.${t.message}`, a(r);
 		else throw Error(`(via loadPrefs) ${t}`);
 		e.preferencesFileError = r;
 	}
@@ -74,7 +74,7 @@ async function R(e) {
 		if (!t.me) throw Error("Could not log in");
 		e.publicProfile = await A(t.me);
 	} catch (t) {
-		throw e.div && e.dom && e.div.appendChild(s(e.dom, t.message)), Error(`Can't log in: ${t}`);
+		throw e.div && e.dom && e.div.appendChild(c(e.dom, t.message)), Error(`Can't log in: ${t}`);
 	}
 	return e;
 }
@@ -83,33 +83,33 @@ async function z(e, t, n) {
 	return n === !0 ? r = r.filter((e) => e.scope.label === "public") : n === !1 && (r = r.filter((e) => e.scope.label === "private")), e.instances = r.map((e) => e.instance), e;
 }
 function B(e, t) {
-	return `${e.me && e.me.sameTerm(t.agent) ? "" : r(t.agent) + " "}${t.label}`;
+	return `${e.me && e.me.sameTerm(t.agent) ? "" : i(t.agent) + " "}${t.label}`;
 }
 async function V(e, n, r) {
-	function a(e) {
-		let i = M(n, r), a = i.length ? i[0] : f(e);
-		return [h(a, t.solid("instance"), n, e), h(a, t.solid("forClass"), r, e)];
+	function i(e) {
+		let t = M(n, r), i = t.length ? t[0] : p(e);
+		return [h(i, o.solid("instance"), n, e), h(i, o.solid("forClass"), r, e)];
 	}
-	function o(t) {
-		let n = a(t.index), r = `${B(e, t)} link to this ${e.noun}`;
-		return d(e.dom, E.store, r, null, n, _, t.index);
+	function a(t) {
+		let n = i(t.index), r = `${B(e, t)} link to this ${e.noun}`;
+		return f(e.dom, E.store, r, null, n, _, t.index);
 	}
-	let c = e.dom;
-	if (!c || !e.div) throw Error("registrationControl: need dom and div");
-	let l = c.createElement("div");
+	let s = e.dom;
+	if (!s || !e.div) throw Error("registrationControl: need dom and div");
+	let l = s.createElement("div");
 	e.div.appendChild(l), e.me = C.currentUser();
 	let u = e.me;
 	if (!u) return l.innerHTML = "<p style=\"margin:2em;\">(Log in to save a link to this)</p>", e;
-	let p;
+	let d;
 	try {
-		p = await N(u);
-	} catch (t) {
-		let n;
-		return e.div && e.preferencesFileError ? (n = "(Lists of stuff not available)", e.div.appendChild(c.createElement("p")).textContent = n) : e.div && (n = `registrationControl: Type indexes not available: ${t}`, e.div.appendChild(s(e.dom, t))), i(n), e;
+		d = await N(u);
+	} catch (n) {
+		let r;
+		return e.div && e.preferencesFileError ? (r = "(Lists of stuff not available)", e.div.appendChild(s.createElement("p")).textContent = r) : e.div && (r = `registrationControl: Type indexes not available: ${n}`, e.div.appendChild(c(e.dom, n))), t(r), e;
 	}
 	l.innerHTML = "<table><tbody></tbody></table>", l.setAttribute("style", "font-size: 120%; text-align: right; padding: 1em; border: solid gray 0.05em;");
 	let g = l.children[0].children[0], _ = new m();
-	for (let e of p) g.appendChild(c.createElement("tr")).appendChild(o(e));
+	for (let e of d) g.appendChild(s.createElement("tr")).appendChild(a(e));
 	return e;
 }
 function H(e, t, n) {
@@ -121,72 +121,72 @@ function H(e, t, n) {
 	let c = s.appendChild(i.createElement("h3"));
 	return c.textContent = a + " links", c.style.textAlign = "left", o;
 }
-async function U(e, n) {
-	let r = e.dom, i = e.div, a = r.createElement("div");
-	if (i.appendChild(a), e.me = C.currentUser(), !e.me) return a.innerHTML = "<p style=\"margin:2em;\">(Log in list your stuff)</p>", e;
-	let o = await N(e.me);
-	a.innerHTML = "<table><tbody></tbody></table>", a.setAttribute("style", "font-size: 120%; text-align: right; padding: 1em; border: solid #eee 0.5em;");
-	let s = a.firstChild.firstChild;
-	for (let i of o) {
-		let a = H(e, O, i);
-		s.appendChild(a);
-		let o = await P(i, n.type || null);
-		o.length === 0 && (a.style.display = "none");
-		for (let e of o) {
-			let n = u(r, t.solid("instance"), e.instance, { deleteFunction: async () => {
-				await F(e), s.removeChild(n);
+async function U(e, t) {
+	let n = e.dom, r = e.div, i = n.createElement("div");
+	if (r.appendChild(i), e.me = C.currentUser(), !e.me) return i.innerHTML = "<p style=\"margin:2em;\">(Log in list your stuff)</p>", e;
+	let a = await N(e.me);
+	i.innerHTML = "<table><tbody></tbody></table>", i.setAttribute("style", "font-size: 120%; text-align: right; padding: 1em; border: solid #eee 0.5em;");
+	let s = i.firstChild.firstChild;
+	for (let r of a) {
+		let i = H(e, O, r);
+		s.appendChild(i);
+		let a = await P(r, t.type || null);
+		a.length === 0 && (i.style.display = "none");
+		for (let e of a) {
+			let t = d(n, o.solid("instance"), e.instance, { deleteFunction: async () => {
+				await F(e), s.removeChild(t);
 			} });
-			n.children[0].style.paddingLeft = "3em", s.appendChild(n);
+			t.children[0].style.paddingLeft = "3em", s.appendChild(t);
 		}
 	}
 	return e;
 }
-function W(e, t, n = {}) {
-	n ||= {};
-	let r = n.buttonStyle || o.signInAndUpButtonStyle, a = e.createElement("div"), c = "SolidSignInOrSignUpBox";
-	i("widgets.signInOrSignUpBox"), a.setUserCallback = t, a.setAttribute("class", c), a.setAttribute("style", "display:flex;");
-	let l = e.createElement("input");
-	a.appendChild(l), l.setAttribute("type", "button"), l.setAttribute("value", "Log in"), l.setAttribute("style", `${r}${o.headerBannerLoginInput}` + o.signUpBackground), S.events.on("login", () => {
-		let t = C.currentUser();
-		if (t) {
-			let n = t.uri, r = e.getElementsByClassName(c);
-			i(`Logged in, ${r.length} panels to be serviced`);
-			for (let t = 0; t < r.length; t++) {
-				let a = r[t];
+function W(e, n, i = {}) {
+	i ||= {};
+	let a = i.buttonStyle || r.signInAndUpButtonStyle, o = e.createElement("div"), l = "SolidSignInOrSignUpBox";
+	t("widgets.signInOrSignUpBox"), o.setUserCallback = n, o.setAttribute("class", l), o.setAttribute("style", "display:flex;");
+	let u = e.createElement("input");
+	o.appendChild(u), u.setAttribute("type", "button"), u.setAttribute("value", "Log in"), u.setAttribute("style", `${a}${r.headerBannerLoginInput}` + r.signUpBackground), S.events.on("login", () => {
+		let n = C.currentUser();
+		if (n) {
+			let r = n.uri, i = e.getElementsByClassName(l);
+			t(`Logged in, ${i.length} panels to be serviced`);
+			for (let n = 0; n < i.length; n++) {
+				let a = i[n];
 				if (a.setUserCallback) try {
-					a.setUserCallback(n);
+					a.setUserCallback(r);
 					let e = a.parentNode;
 					e && e.removeChild(a);
-				} catch (t) {
-					i(`## Error satisfying login box: ${t}`), a.appendChild(s(e, t));
+				} catch (n) {
+					t(`## Error satisfying login box: ${n}`), a.appendChild(c(e, n));
 				}
 			}
 		}
-	}), l.addEventListener("click", () => {
-		let n = T();
-		if (n) return t(n.uri);
+	}), u.addEventListener("click", () => {
+		let t = T();
+		if (t) return n(t.uri);
 		G(e);
 	}, !1);
-	let u = e.createElement("input");
-	return a.appendChild(u), u.setAttribute("type", "button"), u.setAttribute("value", "Sign Up for Solid"), u.setAttribute("style", `${r}${o.headerBannerLoginInput}` + o.signInBackground), u.addEventListener("click", function(e) {
-		new p().signup().then(function(e) {
-			i("signInOrSignUpBox signed up " + e), t(e);
+	let d = e.createElement("input");
+	return o.appendChild(d), d.setAttribute("type", "button"), d.setAttribute("value", "Sign Up for Solid"), d.setAttribute("style", `${a}${r.headerBannerLoginInput}` + r.signInBackground), d.addEventListener("click", function(e) {
+		new s().signup().then(function(e) {
+			t("signInOrSignUpBox signed up " + e), n(e);
 		});
-	}, !1), a;
+	}, !1), o;
 }
 function G(e) {
 	let t = e.createElement("div");
 	t.setAttribute("style", "position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center;"), e.body.appendChild(t);
+	let n = e.createElement("div");
+	n.setAttribute("style", "\n      background-color: white;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      -o-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      border-radius: 4px;\n      min-width: 400px;\n      padding: 10px;\n      z-index : 10;\n    "), t.appendChild(n);
 	let r = e.createElement("div");
-	r.setAttribute("style", "\n      background-color: white;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      -o-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);\n      border-radius: 4px;\n      min-width: 400px;\n      padding: 10px;\n      z-index : 10;\n    "), t.appendChild(r);
-	let i = e.createElement("div");
-	i.setAttribute("style", "\n      border-bottom: 1px solid #DDD;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n    "), r.appendChild(i);
-	let a = e.createElement("label");
-	a.setAttribute("style", "margin-right: 5px; font-weight: 800"), a.innerText = "Select an identity provider";
+	r.setAttribute("style", "\n      border-bottom: 1px solid #DDD;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n    "), n.appendChild(r);
+	let i = e.createElement("label");
+	i.setAttribute("style", "margin-right: 5px; font-weight: 800"), i.innerText = "Select an identity provider";
 	let o = e.createElement("button");
 	o.innerHTML = "<img src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg\" style=\"width: 2em; height: 2em;\" title=\"Cancel\">", o.setAttribute("style", "background-color: transparent; border: none;"), o.addEventListener("click", () => {
 		t.remove();
-	}), i.appendChild(a), i.appendChild(o);
+	}), r.appendChild(i), r.appendChild(o);
 	let s = async (e) => {
 		try {
 			E.store.updater.flagAuthorizationMetadata();
@@ -195,7 +195,7 @@ function G(e) {
 			let n = new URL(window.location.href);
 			n.hash = "", await S.login(e, n.href);
 		} catch (e) {
-			n(e.message);
+			a(e.message);
 		}
 	}, c = e.createElement("div");
 	c.setAttribute("style", "\n      border-bottom: 1px solid #DDD;\n      display: flex;\n      flex-direction: column;\n      padding-top: 10px;\n    ");
@@ -208,7 +208,7 @@ function G(e) {
 	let f = e.createElement("button");
 	f.innerText = "Go", f.setAttribute("style", "margin-top: 12px; margin-bottom: 12px;"), f.addEventListener("click", () => {
 		s(d.value);
-	}), c.appendChild(u), l.appendChild(d), l.appendChild(f), c.appendChild(l), r.appendChild(c);
+	}), c.appendChild(u), l.appendChild(d), l.appendChild(f), c.appendChild(l), n.appendChild(c);
 	let p = e.createElement("div");
 	p.setAttribute("style", "\n      display: flex;\n      flex-direction: column;\n      padding-top: 10px;\n    ");
 	let m = e.createElement("label");
@@ -217,43 +217,43 @@ function G(e) {
 		n.innerText = t.name, n.setAttribute("style", "height: 38px; margin-top: 10px"), n.addEventListener("click", () => {
 			s(t.uri);
 		}), p.appendChild(n);
-	}), r.appendChild(p);
+	}), n.appendChild(p);
 }
-function K(e, r = null, i = {}) {
-	let a = T(), s = e.createElement("div");
+function K(e, t = null, n = {}) {
+	let i = T(), s = e.createElement("div");
 	function c(e) {
-		e && (a = C.saveUser(e), s.refresh(), r && r(a.uri));
+		e && (i = C.saveUser(e), s.refresh(), t && t(i.uri));
 	}
-	function u(e) {
-		let t = a;
+	function l(e) {
+		let n = i;
 		S.logout().then(function() {
-			let e = `Your WebID was ${t}. It has been forgotten.`;
-			a = null;
+			let e = `Your WebID was ${n}. It has been forgotten.`;
+			i = null;
 			try {
-				n(e);
+				a(e);
 			} catch {
 				window.alert(e);
 			}
-			s.refresh(), r && r(null);
+			s.refresh(), t && t(null);
 		}, (e) => {
-			n("Fail to log out:" + e);
+			a("Fail to log out:" + e);
 		});
 	}
-	function d(n, r) {
-		let i = r.buttonStyle || o.signInAndUpButtonStyle, a = "WebID logout";
-		if (n) {
-			let e = E.store.any(n, t.foaf("nick")) || E.store.any(n, t.foaf("name"));
+	function d(t, n) {
+		let i = n.buttonStyle || r.signInAndUpButtonStyle, a = "WebID logout";
+		if (t) {
+			let e = E.store.any(t, o.foaf("nick")) || E.store.any(t, o.foaf("name"));
 			e && (a = "Logout " + e.value);
 		}
 		let s = e.createElement("input");
-		return s.setAttribute("type", "button"), s.setAttribute("value", a), s.setAttribute("style", `${i}`), s.addEventListener("click", u, !1), s;
+		return s.setAttribute("type", "button"), s.setAttribute("value", a), s.setAttribute("style", `${i}`), s.addEventListener("click", l, !1), s;
 	}
 	s.refresh = function() {
 		let t = S.webId;
-		a = t ? E.store.sym(t) : null, (a && s.me !== a.uri || !a && s.me) && (l(s), a ? s.appendChild(d(a, i)) : s.appendChild(W(e, c, i))), s.me = a ? a.uri : null;
+		i = t ? E.store.sym(t) : null, (i && s.me !== i.uri || !i && s.me) && (u(s), i ? s.appendChild(d(i, n)) : s.appendChild(W(e, c, n))), s.me = i ? i.uri : null;
 	}, s.refresh();
 	function f() {
-		a = C.currentUser(), s.refresh();
+		i = C.currentUser(), s.refresh();
 	}
 	return f(), S.events.on("login", f), S.events.on("logout", f), s.me = "99999", s.refresh(), s;
 }
@@ -274,69 +274,69 @@ S.events.on("logout", async () => {
 	} catch {}
 	window.location.reload();
 });
-function q(e, n, r) {
-	let a = n.noun, l = n.appPathSegment, u = T(), d = e.createElement("div"), p = {
+function q(e, n, i) {
+	let a = n.noun, s = n.appPathSegment, u = T(), d = e.createElement("div"), f = {
 		me: u,
 		dom: e,
 		div: d
 	};
 	function m(t, n) {
-		d.appendChild(s(e, t, n));
+		d.appendChild(c(e, t, n));
 	}
 	function g(e) {
-		let n = E.store.any(e, t.space("uriPrefix")), r;
-		return r = n ? n.value : e.uri.split("#")[0], r.slice(-1) !== "/" && (i(`${l}: No / at end of uriPrefix ${r}`), r = `${r}/`), r += `${l}/id${(/* @__PURE__ */ new Date()).getTime()}/`, r;
+		let n = E.store.any(e, o.space("uriPrefix")), r;
+		return r = n ? n.value : e.uri.split("#")[0], r.slice(-1) !== "/" && (t(`${s}: No / at end of uriPrefix ${r}`), r = `${r}/`), r += `${s}/id${(/* @__PURE__ */ new Date()).getTime()}/`, r;
 	}
-	function _(n) {
-		async function i(r) {
-			let i = v.appendChild(e.createElement("tr")).appendChild(e.createElement("td"));
-			i.setAttribute("colspan", "3"), i.style.padding = "0.5em";
-			let a = encodeURI(await c(e, E.store, i, t.solid("URL"), t.space("Workspace"), "Workspace")), o = f(n.preferencesFile), s = [h(n.me, t.space("workspace"), o, n.preferencesFile), h(o, t.space("uriPrefix"), a, n.preferencesFile)];
+	function _(t) {
+		async function n(n) {
+			let r = v.appendChild(e.createElement("tr")).appendChild(e.createElement("td"));
+			r.setAttribute("colspan", "3"), r.style.padding = "0.5em";
+			let i = encodeURI(await l(e, E.store, r, o.solid("URL"), o.space("Workspace"), "Workspace")), a = p(t.preferencesFile), s = [h(t.me, o.space("workspace"), a, t.preferencesFile), h(a, o.space("uriPrefix"), i, t.preferencesFile)];
 			if (!E.store.updater) throw Error("store has no updater");
 			await E.store.updater.update([], s);
 		}
-		let s = n.me, l = n.preferencesFile, u = null, p = E.store.each(s, t.space("workspace"), void 0, l), _ = E.store.each(s, t.space("storage"));
-		p.length === 0 && _ && (m(`You don't seem to have any workspaces. You have ${_.length} storage spaces.`, "white"), _.map(function(e) {
-			return p = p.concat(E.store.each(e, t.ldp("contains"))), p;
-		}).filter((e) => e.id ? ["public", "private"].includes(e.id().toLowerCase()) : "")), p.length === 1 && (m(`Workspace used: ${p[0].uri}`, "white"), u = g(p[0]));
+		let s = t.me, c = t.preferencesFile, u = null, f = E.store.each(s, o.space("workspace"), void 0, c), _ = E.store.each(s, o.space("storage"));
+		f.length === 0 && _ && (m(`You don't seem to have any workspaces. You have ${_.length} storage spaces.`, "white"), _.map(function(e) {
+			return f = f.concat(E.store.each(e, o.ldp("contains"))), f;
+		}).filter((e) => e.id ? ["public", "private"].includes(e.id().toLowerCase()) : "")), f.length === 1 && (m(`Workspace used: ${f[0].uri}`, "white"), u = g(f[0]));
 		let v = e.createElement("table");
 		v.setAttribute("style", "border-collapse:separate; border-spacing: 0.5em;"), d.appendChild(v), d.appendChild(e.createElement("hr"));
 		let y = d.appendChild(e.createElement("p"));
-		y.setAttribute("style", o.commentStyle), y.textContent = `Where would you like to store the data for the ${a}?
+		y.setAttribute("style", r.commentStyle), y.textContent = `Where would you like to store the data for the ${a}?
     Give the URL of the folder where you would like the data stored.
     It can be anywhere in solid world - this URI is just an idea.`;
 		let b = d.appendChild(e.createElement("input"));
-		b.setAttribute("type", "text"), b.setAttribute("style", o.textInputStyle), b.size = 80, b.label = "base URL", b.autocomplete = "on", u && (b.value = u), n.baseField = b, d.appendChild(e.createElement("br"));
+		b.setAttribute("type", "text"), b.setAttribute("style", r.textInputStyle), b.size = 80, b.label = "base URL", b.autocomplete = "on", u && (b.value = u), t.baseField = b, d.appendChild(e.createElement("br"));
 		let x = d.appendChild(e.createElement("button"));
-		x.setAttribute("style", o.buttonStyle), x.textContent = `Start new ${a} at this URI`, x.addEventListener("click", function(e) {
+		x.setAttribute("style", r.buttonStyle), x.textContent = `Start new ${a} at this URI`, x.addEventListener("click", function(e) {
 			let t = b.value.replace(" ", "%20");
-			t.slice(-1) !== "/" && (t += "/"), r(null, t);
-		}), p = p.filter(function(e) {
-			return !E.store.holds(e, t.rdf("type"), t.space("MasterWorkspace"));
+			t.slice(-1) !== "/" && (t += "/"), i(null, t);
+		}), f = f.filter(function(e) {
+			return !E.store.holds(e, o.rdf("type"), o.space("MasterWorkspace"));
 		});
 		let S, C, w, T, D, O, k, A = "height: 3em; margin: 1em; padding: 1em white; border-radius: 0.3em;", j = `${A}border: 0px;`;
-		for (let n = 0; n < p.length; n++) {
-			D = p[n], T = e.createElement("tr"), n === 0 && (S = e.createElement("td"), S.setAttribute("rowspan", `${p.length}`), S.textContent = "Choose a workspace for this:", S.setAttribute("style", "vertical-align:middle;"), T.appendChild(S)), C = e.createElement("td"), O = E.store.anyValue(D, t.ui("style")), O ||= `color: black ; background-color: ${`#${(function(e) {
+		for (let t = 0; t < f.length; t++) {
+			D = f[t], T = e.createElement("tr"), t === 0 && (S = e.createElement("td"), S.setAttribute("rowspan", `${f.length}`), S.textContent = "Choose a workspace for this:", S.setAttribute("style", "vertical-align:middle;"), T.appendChild(S)), C = e.createElement("td"), O = E.store.anyValue(D, o.ui("style")), O ||= `color: black ; background-color: ${`#${(function(e) {
 				return e.split("").reduce(function(e, t) {
 					return e = (e << 5) - e + t.charCodeAt(0), e & e;
 				}, 0);
 			}(D.uri) & 16777215 | 12632256).toString(16)}`};`, C.setAttribute("style", j + O), T.target = D.uri;
-			let i = E.store.any(D, t.rdfs("label"));
-			i ||= D.uri.split("/").slice(-1)[0] || D.uri.split("/").slice(-2)[0], C.textContent = i || "???", T.appendChild(C), n === 0 && (w = e.createElement("td"), w.setAttribute("rowspan", `${p.length}1`), w.setAttribute("style", "width:50%;"), T.appendChild(w)), v.appendChild(T), k = E.store.any(D, t.rdfs("comment")), k = k ? k.value : "Use this workspace", C.addEventListener("click", function(t) {
+			let n = E.store.any(D, o.rdfs("label"));
+			n ||= D.uri.split("/").slice(-1)[0] || D.uri.split("/").slice(-2)[0], C.textContent = n || "???", T.appendChild(C), t === 0 && (w = e.createElement("td"), w.setAttribute("rowspan", `${f.length}1`), w.setAttribute("style", "width:50%;"), T.appendChild(w)), v.appendChild(T), k = E.store.any(D, o.rdfs("comment")), k = k ? k.value : "Use this workspace", C.addEventListener("click", function(t) {
 				w.textContent = k ? k.value : "", w.setAttribute("style", j + O);
 				let n = e.createElement("button");
 				n.textContent = "Continue";
-				let i = g(D);
-				b.value = i, n.addEventListener("click", function(e) {
-					n.disabled = !0, r(D, i), n.textContent = "---->";
+				let r = g(D);
+				b.value = r, n.addEventListener("click", function(e) {
+					n.disabled = !0, i(D, r), n.textContent = "---->";
 				}, !0), w.appendChild(n);
 			}, !0);
 		}
 		let M = e.createElement("tr");
-		C = e.createElement("td"), C.setAttribute("style", A), C.textContent = "+ Make a new workspace", C.addEventListener("click", i), M.appendChild(C), v.appendChild(M);
+		C = e.createElement("td"), C.setAttribute("style", A), C.textContent = "+ Make a new workspace", C.addEventListener("click", n), M.appendChild(C), v.appendChild(M);
 	}
-	return L(p).then(_).catch((e) => {
-		d.appendChild(s(p.dom, e));
+	return L(f).then(_).catch((e) => {
+		d.appendChild(c(f.dom, e));
 	}), d;
 }
 function J(e, t, n) {
@@ -349,11 +349,11 @@ function J(e, t, n) {
 }
 async function Y() {
 	try {
-		let { me: e, preferencesFile: n, preferencesFileError: r } = await L({});
-		if (!n || r) throw Error(r);
-		return E.store.each(e, t.rdf("type"), null, n.doc());
+		let { me: e, preferencesFile: t, preferencesFileError: n } = await L({});
+		if (!t || n) throw Error(n);
+		return E.store.each(e, o.rdf("type"), null, t.doc());
 	} catch (e) {
-		a("Unable to fetch your preferences - this was the error: ", e);
+		n("Unable to fetch your preferences - this was the error: ", e);
 	}
 	return [];
 }

package/dist/media/media-capture.cjs.js

@@ -1,2 +1,2 @@
-const e=require("../lib/debug.cjs.js"),t=require("../lib/style.cjs.js"),n=require("../lib/iconBase.cjs.js"),r=require("../widgets/buttons.cjs.js");require("../widgets/index.cjs.js");var i=n.icons.iconBase+`noun_Camera_1618446_000000.svg`,a=n.icons.iconBase+`noun_479395.svg`,o=`image/png`;function s(i,s,c,l){let u=i.createElement(`div`),d,f,p,m,h=u.appendChild(i.createElement(`table`)),g=h.appendChild(i.createElement(`tr`)).appendChild(i.createElement(`td`));g.setAttribute(`colspan`,`4`);let _=h.appendChild(i.createElement(`tr`));_.appendChild(i.createElement(`td`)).appendChild(r.cancelButton(i)).addEventListener(`click`,e=>{E(),l(null)});let v=_.appendChild(i.createElement(`td`)).appendChild(r.button(i,a,`Retake`));v.addEventListener(`click`,e=>{C()}),v.style.visibility=`collapse`;let y=_.appendChild(i.createElement(`td`)).appendChild(r.button(i,n.icons.iconBase+`noun_10636.svg`,`Snap`));y.addEventListener(`click`,w),y.style.visibility=`collapse`;let b=_.appendChild(i.createElement(`td`)).appendChild(r.continueButton(i));b.addEventListener(`click`,e=>{D(f,d)}),b.style.visibility=`collapse`;function x(){if(p=g.appendChild(i.createElement(`video`)),p.setAttribute(`controls`,`1`),p.setAttribute(`autoplay`,`1`),p.setAttribute(`style`,t.style.controlStyle),!navigator.mediaDevices)throw Error(`navigator.mediaDevices not available`);navigator.mediaDevices.getUserMedia(S).then(e=>{p.srcObject=e,y.style.visibility=`visible`,b.style.visibility=`collapse`,v.style.visibility=`collapse`})}let S={video:!0};function C(){g.removeChild(m),x()}function w(){m=i.createElement(`canvas`),m.setAttribute(`width`,t.style.canvasWidth),m.setAttribute(`height`,t.style.canvasHeight),m.setAttribute(`style`,t.style.controlStyle),g.appendChild(m),m.getContext(`2d`).drawImage(p,0,0,m.width,m.height),p.parentNode.removeChild(p),m.toBlob(t=>{let n=`got blob type ${t.type} size ${t.size}`;e.log(n),d=c(),f=t,T()},o)}function T(){b.style.visibility=`visible`,v.style.visibility=`visible`,y.style.visibility=`collapse`}function E(){p&&p.srcObject&&p.srcObject.getVideoTracks().forEach(e=>e.stop())}function D(t,n){let r=t.type;e.log(`Putting `+t.size+` bytes of `+r+` to `+n),s.fetcher.webOperation(`PUT`,n.uri,{data:t,contentType:r}).then(t=>{e.log(`ok saved `+n),E(),l(n)},e=>{E(),alert(e)})}return x(),u}function c(e,t,n,a){let o=e.createElement(`div`),c=r.button(e,i,`Take picture`),l;async function u(e){o.removeChild(l),o.appendChild(c),a(e)}return o.appendChild(c),c.addEventListener(`click`,r=>{o.removeChild(c),l=s(e,t,n,u),o.appendChild(l)}),o}exports.cameraButton=c,exports.cameraCaptureControl=s;
+const e=require("../lib/debug.cjs.js"),t=require("../lib/iconBase.cjs.js"),n=require("../lib/style.cjs.js"),r=require("../widgets/buttons.cjs.js");require("../widgets/index.cjs.js");var i=t.icons.iconBase+`noun_Camera_1618446_000000.svg`,a=t.icons.iconBase+`noun_479395.svg`,o=`image/png`;function s(i,s,c,l){let u=i.createElement(`div`),d,f,p,m,h=u.appendChild(i.createElement(`table`)),g=h.appendChild(i.createElement(`tr`)).appendChild(i.createElement(`td`));g.setAttribute(`colspan`,`4`);let _=h.appendChild(i.createElement(`tr`));_.appendChild(i.createElement(`td`)).appendChild(r.cancelButton(i)).addEventListener(`click`,e=>{E(),l(null)});let v=_.appendChild(i.createElement(`td`)).appendChild(r.button(i,a,`Retake`));v.addEventListener(`click`,e=>{C()}),v.style.visibility=`collapse`;let y=_.appendChild(i.createElement(`td`)).appendChild(r.button(i,t.icons.iconBase+`noun_10636.svg`,`Snap`));y.addEventListener(`click`,w),y.style.visibility=`collapse`;let b=_.appendChild(i.createElement(`td`)).appendChild(r.continueButton(i));b.addEventListener(`click`,e=>{D(f,d)}),b.style.visibility=`collapse`;function x(){if(p=g.appendChild(i.createElement(`video`)),p.setAttribute(`controls`,`1`),p.setAttribute(`autoplay`,`1`),p.setAttribute(`style`,n.style.controlStyle),!navigator.mediaDevices)throw Error(`navigator.mediaDevices not available`);navigator.mediaDevices.getUserMedia(S).then(e=>{p.srcObject=e,y.style.visibility=`visible`,b.style.visibility=`collapse`,v.style.visibility=`collapse`})}let S={video:!0};function C(){g.removeChild(m),x()}function w(){m=i.createElement(`canvas`),m.setAttribute(`width`,n.style.canvasWidth),m.setAttribute(`height`,n.style.canvasHeight),m.setAttribute(`style`,n.style.controlStyle),g.appendChild(m),m.getContext(`2d`).drawImage(p,0,0,m.width,m.height),p.parentNode.removeChild(p),m.toBlob(t=>{let n=`got blob type ${t.type} size ${t.size}`;e.log(n),d=c(),f=t,T()},o)}function T(){b.style.visibility=`visible`,v.style.visibility=`visible`,y.style.visibility=`collapse`}function E(){p&&p.srcObject&&p.srcObject.getVideoTracks().forEach(e=>e.stop())}function D(t,n){let r=t.type;e.log(`Putting `+t.size+` bytes of `+r+` to `+n),s.fetcher.webOperation(`PUT`,n.uri,{data:t,contentType:r}).then(t=>{e.log(`ok saved `+n),E(),l(n)},e=>{E(),alert(e)})}return x(),u}function c(e,t,n,a){let o=e.createElement(`div`),c=r.button(e,i,`Take picture`),l;async function u(e){o.removeChild(l),o.appendChild(c),a(e)}return o.appendChild(c),c.addEventListener(`click`,r=>{o.removeChild(c),l=s(e,t,n,u),o.appendChild(l)}),o}exports.cameraButton=c,exports.cameraCaptureControl=s;
 //# sourceMappingURL=media-capture.cjs.js.map

package/dist/media/media-capture.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-capture.cjs.js","names":["icons","style","require_debug","require_style","require_iconBase","require_buttons","cameraIcon","retakeIcon","contentType","cameraCaptureControl","div","dom","destination","imageBlob","player","canvas","table","main","buttons","stopVideo","doneCallback","retakeButton","retake","shutterButton","grabCanvas","sendButton","saveBlob","displayPlayer","constraints","stream","msg","blob","getImageDoc","reviewImage","track","store","err","cameraButton","but","control","restoreButton","imageDoc"],"sources":["../../src/media/media-capture.ts"],"sourcesContent":["//\n//   Media input widget\n//\n//\n// Workflow:\n// The HTML5 functionality (on mobile) is to prompt for either\n// a realtime camera capture, OR a selection from images already on the device\n// (eg camera roll).\n//\n// The solid alternative is to either take a photo\n// or access camera roll (etc) OR to access solid cloud storage of favorite photo albums.\n// (Especially latest taken ones)\n//\nimport * as debug from '../lib/debug'\n\n/** @module mediaCapture */\n\nimport { icons } from '../lib/iconBase'\nimport { style } from '../lib/style'\nimport * as widgets from '../widgets'\nimport { IndexedFormula, NamedNode } from 'rdflib'\n\nconst cameraIcon = icons.iconBase + 'noun_Camera_1618446_000000.svg' // Get it from github\nconst retakeIcon = icons.iconBase + 'noun_479395.svg' // Get it from github\n\nconst contentType = 'image/png'\n\n/** A control to capture a picture using camera\n * @param {Docuemnt} dom - The Document object\n * @param {IndexedForumla} store - The quadstore to store data in\n * @param {NamedNode} getImageDoc() - NN of the image file to be created\n * @param {function} doneCallback - Called when a picture has been taken\n */\nexport function cameraCaptureControl (\n  dom: HTMLDocument,\n  store: IndexedFormula,\n  getImageDoc: () => NamedNode,\n  doneCallback: (imageDoc) => Promise<void>\n) {\n  const div = dom.createElement('div')\n  let destination, imageBlob, player, canvas\n\n  const table = div.appendChild(dom.createElement('table'))\n  const mainTR = table.appendChild(dom.createElement('tr'))\n  const main = mainTR.appendChild(dom.createElement('td'))\n  main.setAttribute('colspan', '4')\n\n  const buttons = table.appendChild(dom.createElement('tr'))\n\n  buttons\n    .appendChild(dom.createElement('td')) // Cancel button\n    .appendChild(widgets.cancelButton(dom))\n    .addEventListener('click', _event => {\n      stopVideo()\n      doneCallback(null)\n    })\n\n  const retakeButton = buttons\n    .appendChild(dom.createElement('td')) // Retake button\n    .appendChild(widgets.button(dom, retakeIcon, 'Retake'))\n  retakeButton.addEventListener('click', _event => {\n    retake()\n  })\n  retakeButton.style.visibility = 'collapse' // Hide for now\n\n  const shutterButton = buttons\n    .appendChild(dom.createElement('td')) // Trigger capture button\n    .appendChild(\n      widgets.button(dom, icons.iconBase + 'noun_10636.svg', 'Snap')\n    )\n  shutterButton.addEventListener('click', grabCanvas)\n  shutterButton.style.visibility = 'collapse' // Hide for now\n\n  const sendButton = buttons\n    .appendChild(dom.createElement('td')) // Confirm and save button\n    .appendChild(widgets.continueButton(dom)) // @@ or send icon??\n  sendButton.addEventListener('click', _event => {\n    saveBlob(imageBlob, destination)\n  })\n  sendButton.style.visibility = 'collapse' // Hide for now\n\n  function displayPlayer () {\n    player = main.appendChild(dom.createElement('video'))\n    player.setAttribute('controls', '1')\n    player.setAttribute('autoplay', '1')\n    player.setAttribute('style', style.controlStyle)\n    if (!navigator.mediaDevices) {\n      throw new Error('navigator.mediaDevices not available')\n    }\n    navigator.mediaDevices.getUserMedia(constraints).then(stream => {\n      player.srcObject = stream\n      shutterButton.style.visibility = 'visible' // Enable\n      sendButton.style.visibility = 'collapse'\n      retakeButton.style.visibility = 'collapse'\n    })\n  }\n\n  const constraints = {\n    video: true\n  }\n\n  function retake () {\n    main.removeChild(canvas)\n    displayPlayer() // Make new one as old one is stuck black\n  }\n\n  function grabCanvas () {\n    // Draw the video frame to the canvas.\n    canvas = dom.createElement('canvas')\n    canvas.setAttribute('width', style.canvasWidth)\n    canvas.setAttribute('height', style.canvasHeight)\n    canvas.setAttribute('style', style.controlStyle)\n    main.appendChild(canvas)\n\n    const context = canvas.getContext('2d')\n    context.drawImage(player, 0, 0, canvas.width, canvas.height)\n\n    player.parentNode.removeChild(player)\n\n    canvas.toBlob(blob => {\n      const msg = `got blob type ${blob.type} size ${blob.size}`\n      debug.log(msg)\n      destination = getImageDoc()\n      imageBlob = blob // save for review\n      reviewImage()\n      // alert(msg)\n    }, contentType) // toBlob\n  }\n\n  function reviewImage () {\n    sendButton.style.visibility = 'visible'\n    retakeButton.style.visibility = 'visible'\n    shutterButton.style.visibility = 'collapse' // Hide for now\n  }\n\n  function stopVideo () {\n    if (player && player.srcObject) {\n      player.srcObject.getVideoTracks().forEach(track => track.stop())\n    }\n  }\n  function saveBlob (blob, destination) {\n    const contentType = blob.type\n    // if (!confirm('Save picture to ' + destination + ' ?')) return\n    debug.log(\n      'Putting ' + blob.size + ' bytes of ' + contentType + ' to ' + destination\n    )\n    // @@ TODO Remove casting\n    ;(store as any).fetcher\n      .webOperation('PUT', destination.uri, {\n        data: blob,\n        contentType\n      })\n      .then(\n        _resp => {\n          debug.log('ok saved ' + destination)\n          stopVideo()\n          doneCallback(destination)\n        },\n        err => {\n          stopVideo()\n          alert(err)\n        }\n      )\n  }\n\n  // Attach the video stream to the video element and autoplay.\n  displayPlayer()\n  return div\n}\n\n/** A button to capture a picture using camera\n * @param {Docuemnt} dom - The Document object\n * @param {IndexedForumla} store - The quadstore to store data in\n * @param {fuunction} getImageDoc - returns NN of the image file to be created\n * @param {function<Node>} doneCallback - called with the image taken\n * @returns {DomElement} - A div element with the button in it\n *\n * This expands the button to a large control when it is pressed\n */\n\nexport function cameraButton (\n  dom: HTMLDocument,\n  store: IndexedFormula,\n  getImageDoc: () => NamedNode,\n  doneCallback: (imageDoc) => Promise<void>\n): HTMLElement {\n  const div = dom.createElement('div')\n  const but = widgets.button(dom, cameraIcon, 'Take picture')\n  let control\n  async function restoreButton (imageDoc) {\n    div.removeChild(control)\n    div.appendChild(but)\n    doneCallback(imageDoc)\n  }\n  div.appendChild(but)\n  but.addEventListener('click', _event => {\n    div.removeChild(but)\n    control = cameraCaptureControl(\n      dom,\n      store,\n      getImageDoc,\n      restoreButton\n    )\n    div.appendChild(control)\n  })\n  return div\n}\n"],"mappings":"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"}
+{"version":3,"file":"media-capture.cjs.js","names":["icons","style","require_debug","require_iconBase","require_style","require_buttons","cameraIcon","retakeIcon","contentType","cameraCaptureControl","div","dom","destination","imageBlob","player","canvas","table","main","buttons","stopVideo","doneCallback","retakeButton","retake","shutterButton","grabCanvas","sendButton","saveBlob","displayPlayer","constraints","stream","msg","blob","getImageDoc","reviewImage","track","store","err","cameraButton","but","control","restoreButton","imageDoc"],"sources":["../../src/media/media-capture.ts"],"sourcesContent":["//\n//   Media input widget\n//\n//\n// Workflow:\n// The HTML5 functionality (on mobile) is to prompt for either\n// a realtime camera capture, OR a selection from images already on the device\n// (eg camera roll).\n//\n// The solid alternative is to either take a photo\n// or access camera roll (etc) OR to access solid cloud storage of favorite photo albums.\n// (Especially latest taken ones)\n//\nimport * as debug from '../lib/debug'\n\n/** @module mediaCapture */\n\nimport { icons } from '../lib/iconBase'\nimport { style } from '../lib/style'\nimport * as widgets from '../widgets'\nimport { IndexedFormula, NamedNode } from 'rdflib'\n\nconst cameraIcon = icons.iconBase + 'noun_Camera_1618446_000000.svg' // Get it from github\nconst retakeIcon = icons.iconBase + 'noun_479395.svg' // Get it from github\n\nconst contentType = 'image/png'\n\n/** A control to capture a picture using camera\n * @param {Docuemnt} dom - The Document object\n * @param {IndexedForumla} store - The quadstore to store data in\n * @param {NamedNode} getImageDoc() - NN of the image file to be created\n * @param {function} doneCallback - Called when a picture has been taken\n */\nexport function cameraCaptureControl (\n  dom: HTMLDocument,\n  store: IndexedFormula,\n  getImageDoc: () => NamedNode,\n  doneCallback: (imageDoc) => Promise<void>\n) {\n  const div = dom.createElement('div')\n  let destination, imageBlob, player, canvas\n\n  const table = div.appendChild(dom.createElement('table'))\n  const mainTR = table.appendChild(dom.createElement('tr'))\n  const main = mainTR.appendChild(dom.createElement('td'))\n  main.setAttribute('colspan', '4')\n\n  const buttons = table.appendChild(dom.createElement('tr'))\n\n  buttons\n    .appendChild(dom.createElement('td')) // Cancel button\n    .appendChild(widgets.cancelButton(dom))\n    .addEventListener('click', _event => {\n      stopVideo()\n      doneCallback(null)\n    })\n\n  const retakeButton = buttons\n    .appendChild(dom.createElement('td')) // Retake button\n    .appendChild(widgets.button(dom, retakeIcon, 'Retake'))\n  retakeButton.addEventListener('click', _event => {\n    retake()\n  })\n  retakeButton.style.visibility = 'collapse' // Hide for now\n\n  const shutterButton = buttons\n    .appendChild(dom.createElement('td')) // Trigger capture button\n    .appendChild(\n      widgets.button(dom, icons.iconBase + 'noun_10636.svg', 'Snap')\n    )\n  shutterButton.addEventListener('click', grabCanvas)\n  shutterButton.style.visibility = 'collapse' // Hide for now\n\n  const sendButton = buttons\n    .appendChild(dom.createElement('td')) // Confirm and save button\n    .appendChild(widgets.continueButton(dom)) // @@ or send icon??\n  sendButton.addEventListener('click', _event => {\n    saveBlob(imageBlob, destination)\n  })\n  sendButton.style.visibility = 'collapse' // Hide for now\n\n  function displayPlayer () {\n    player = main.appendChild(dom.createElement('video'))\n    player.setAttribute('controls', '1')\n    player.setAttribute('autoplay', '1')\n    player.setAttribute('style', style.controlStyle)\n    if (!navigator.mediaDevices) {\n      throw new Error('navigator.mediaDevices not available')\n    }\n    navigator.mediaDevices.getUserMedia(constraints).then(stream => {\n      player.srcObject = stream\n      shutterButton.style.visibility = 'visible' // Enable\n      sendButton.style.visibility = 'collapse'\n      retakeButton.style.visibility = 'collapse'\n    })\n  }\n\n  const constraints = {\n    video: true\n  }\n\n  function retake () {\n    main.removeChild(canvas)\n    displayPlayer() // Make new one as old one is stuck black\n  }\n\n  function grabCanvas () {\n    // Draw the video frame to the canvas.\n    canvas = dom.createElement('canvas')\n    canvas.setAttribute('width', style.canvasWidth)\n    canvas.setAttribute('height', style.canvasHeight)\n    canvas.setAttribute('style', style.controlStyle)\n    main.appendChild(canvas)\n\n    const context = canvas.getContext('2d')\n    context.drawImage(player, 0, 0, canvas.width, canvas.height)\n\n    player.parentNode.removeChild(player)\n\n    canvas.toBlob(blob => {\n      const msg = `got blob type ${blob.type} size ${blob.size}`\n      debug.log(msg)\n      destination = getImageDoc()\n      imageBlob = blob // save for review\n      reviewImage()\n      // alert(msg)\n    }, contentType) // toBlob\n  }\n\n  function reviewImage () {\n    sendButton.style.visibility = 'visible'\n    retakeButton.style.visibility = 'visible'\n    shutterButton.style.visibility = 'collapse' // Hide for now\n  }\n\n  function stopVideo () {\n    if (player && player.srcObject) {\n      player.srcObject.getVideoTracks().forEach(track => track.stop())\n    }\n  }\n  function saveBlob (blob, destination) {\n    const contentType = blob.type\n    // if (!confirm('Save picture to ' + destination + ' ?')) return\n    debug.log(\n      'Putting ' + blob.size + ' bytes of ' + contentType + ' to ' + destination\n    )\n    // @@ TODO Remove casting\n    ;(store as any).fetcher\n      .webOperation('PUT', destination.uri, {\n        data: blob,\n        contentType\n      })\n      .then(\n        _resp => {\n          debug.log('ok saved ' + destination)\n          stopVideo()\n          doneCallback(destination)\n        },\n        err => {\n          stopVideo()\n          alert(err)\n        }\n      )\n  }\n\n  // Attach the video stream to the video element and autoplay.\n  displayPlayer()\n  return div\n}\n\n/** A button to capture a picture using camera\n * @param {Docuemnt} dom - The Document object\n * @param {IndexedForumla} store - The quadstore to store data in\n * @param {fuunction} getImageDoc - returns NN of the image file to be created\n * @param {function<Node>} doneCallback - called with the image taken\n * @returns {DomElement} - A div element with the button in it\n *\n * This expands the button to a large control when it is pressed\n */\n\nexport function cameraButton (\n  dom: HTMLDocument,\n  store: IndexedFormula,\n  getImageDoc: () => NamedNode,\n  doneCallback: (imageDoc) => Promise<void>\n): HTMLElement {\n  const div = dom.createElement('div')\n  const but = widgets.button(dom, cameraIcon, 'Take picture')\n  let control\n  async function restoreButton (imageDoc) {\n    div.removeChild(control)\n    div.appendChild(but)\n    doneCallback(imageDoc)\n  }\n  div.appendChild(but)\n  but.addEventListener('click', _event => {\n    div.removeChild(but)\n    control = cameraCaptureControl(\n      dom,\n      store,\n      getImageDoc,\n      restoreButton\n    )\n    div.appendChild(control)\n  })\n  return div\n}\n"],"mappings":"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"}

package/dist/media/media-capture.esm.js

@@ -1,10 +1,10 @@
 import { log as e } from "../lib/debug.esm.js";
-import { style as t } from "../lib/style.esm.js";
-import { icons as n } from "../lib/iconBase.esm.js";
+import { icons as t } from "../lib/iconBase.esm.js";
+import { style as n } from "../lib/style.esm.js";
 import { button as r, cancelButton as i, continueButton as a } from "../widgets/buttons.esm.js";
 import "../widgets/index.esm.js";
 // src/media/media-capture.ts
-var o = n.iconBase + "noun_Camera_1618446_000000.svg", s = n.iconBase + "noun_479395.svg", c = "image/png";
+var o = t.iconBase + "noun_Camera_1618446_000000.svg", s = t.iconBase + "noun_479395.svg", c = "image/png";
 function l(o, l, u, d) {
 	let f = o.createElement("div"), p, m, h, g, _ = f.appendChild(o.createElement("table")), v = _.appendChild(o.createElement("tr")).appendChild(o.createElement("td"));
 	v.setAttribute("colspan", "4");
@@ -16,14 +16,14 @@ function l(o, l, u, d) {
 	b.addEventListener("click", (e) => {
 		T();
 	}), b.style.visibility = "collapse";
-	let x = y.appendChild(o.createElement("td")).appendChild(r(o, n.iconBase + "noun_10636.svg", "Snap"));
+	let x = y.appendChild(o.createElement("td")).appendChild(r(o, t.iconBase + "noun_10636.svg", "Snap"));
 	x.addEventListener("click", E), x.style.visibility = "collapse";
 	let S = y.appendChild(o.createElement("td")).appendChild(a(o));
 	S.addEventListener("click", (e) => {
 		k(m, p);
 	}), S.style.visibility = "collapse";
 	function C() {
-		if (h = v.appendChild(o.createElement("video")), h.setAttribute("controls", "1"), h.setAttribute("autoplay", "1"), h.setAttribute("style", t.controlStyle), !navigator.mediaDevices) throw Error("navigator.mediaDevices not available");
+		if (h = v.appendChild(o.createElement("video")), h.setAttribute("controls", "1"), h.setAttribute("autoplay", "1"), h.setAttribute("style", n.controlStyle), !navigator.mediaDevices) throw Error("navigator.mediaDevices not available");
 		navigator.mediaDevices.getUserMedia(w).then((e) => {
 			h.srcObject = e, x.style.visibility = "visible", S.style.visibility = "collapse", b.style.visibility = "collapse";
 		});
@@ -33,7 +33,7 @@ function l(o, l, u, d) {
 		v.removeChild(g), C();
 	}
 	function E() {
-		g = o.createElement("canvas"), g.setAttribute("width", t.canvasWidth), g.setAttribute("height", t.canvasHeight), g.setAttribute("style", t.controlStyle), v.appendChild(g), g.getContext("2d").drawImage(h, 0, 0, g.width, g.height), h.parentNode.removeChild(h), g.toBlob((t) => {
+		g = o.createElement("canvas"), g.setAttribute("width", n.canvasWidth), g.setAttribute("height", n.canvasHeight), g.setAttribute("style", n.controlStyle), v.appendChild(g), g.getContext("2d").drawImage(h, 0, 0, g.width, g.height), h.parentNode.removeChild(h), g.toBlob((t) => {
 			let n = `got blob type ${t.type} size ${t.size}`;
 			e(n), p = u(), m = t, D();
 		}, c);