@pod-os/elements 0.26.1-rc.82a37be.0 → 0.26.1-rc.b9287e0.0

package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.js

@@ -11,7 +11,7 @@ export class PosNavigationBar {
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: '1b507d50bd24f257023fe980f1ffdb3abe903577', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'e96559f40418154a26350705ae6e3dbf8057a424', uri: this.current.uri }), h("button", { key: '2ac476bd89918e71ca10cc945952f8c9905865df', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: 'd34b73e2090f08cab8533d03a7b206d420bfa8c2' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h("section", { key: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '002c4138be9b798cecec90de50f7500cffd89df7' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
     }
     icon() {
         return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));

package/dist/collection/components/pos-navigation/pos-navigation.js

@@ -113,7 +113,7 @@ export class PosNavigation {
         }
     }
     render() {
-        return (h("nav", { key: '5c6c07b6b2f9ccb0e45bd59b5e477d8ed3d52c2d' }, h("search", { key: '19997ad34212d679547ad5e1bb2f5ea53e576361' }, h("pos-navigation-bar", { key: '2d1c073b2c53ba8cd5afbb595cc95015e5a50e5b', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '55de5a58604feaf54426b643b434560dbc55a9a1', ref: el => (this.dialogRef = el) }, h("form", { key: '50c064938ec275b53bde81d9bb6c86e0c708a625', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'ca06fd69e8346cb8bb0868560f39987b4545c8f5', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'b94910b19d32dbb091790f0ebbf59f5838e8d5ea', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
     }
     static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.js

@@ -14,7 +14,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '6d8a76b95abc98ab382b425b2dd8894983bb9522', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6fe391ac186c0b0a8e6bb3265e66469dac3ab187', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '33b50596c8cd22d8ce2b1af114277fa9bfd80355', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '8681f29f0c20d59c2be10a1f49cc38dea6abd19d', htmlFor: "name" }, "Name"), h("input", { key: 'f5905d871b55821f7019134d972e1f156c55f49e', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'dade4834abecd9bf2fc8eb5bca0b1f60784287a4', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: 'b1fb16121ecdbed1a3f19df9f9acd1cbc70f91f1', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '87397db04178def97089013afb85287bfc3fe679', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'dcc4829c2af46d899617f1ee1e8b3b3fd0a8ebf3', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'a9ae3917bce29016bf2923b11a9c278a2e54afe4', htmlFor: "name" }, "Name"), h("input", { key: '3638043dac61fdda67a28f95c0ab9991a3a36979', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '2bcec9f76f2b2f45abadf395b826938d6dcc67ab', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/collection/components/pos-picture/pos-picture.js

@@ -16,7 +16,7 @@ export class PosPicture {
     render() {
         const pic = this.resource ? this.resource.picture() : null;
         if (!pic)
-            return null;
+            return h("slot", null);
         return h("pos-image", { blurredBackground: this.blurredBackground, src: pic.url, alt: this.resource.label() });
     }
     static get is() { return "pos-picture"; }

package/dist/collection/components/pos-picture/pos-picture.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-picture.js","sourceRoot":"","sources":["../../../../src/components/pos-picture/pos-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAU3C,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAOH;IAbC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,OAAO,iBAAW,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAc,CAAC;IACtH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, State, h, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-picture',\n  shadow: true,\n  styleUrl: 'pos-picture.css',\n})\nexport class PosPicture implements ResourceAware {\n  /**\n   * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n   */\n  @Prop() blurredBackground: boolean = false;\n\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    const pic = this.resource ? this.resource.picture() : null;\n    if (!pic) return null;\n    return <pos-image blurredBackground={this.blurredBackground} src={pic.url} alt={this.resource.label()}></pos-image>;\n  }\n}\n"]}
+{"version":3,"file":"pos-picture.js","sourceRoot":"","sources":["../../../../src/components/pos-picture/pos-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACK,sBAAiB,GAAY,KAAK,CAAC;QAU3C,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAOH;IAbC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,GAAG;YAAE,OAAO,eAAa,CAAC;QAC/B,OAAO,iBAAW,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAc,CAAC;IACtH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, State, h, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-picture',\n  shadow: true,\n  styleUrl: 'pos-picture.css',\n})\nexport class PosPicture implements ResourceAware {\n  /**\n   * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n   */\n  @Prop() blurredBackground: boolean = false;\n\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    const pic = this.resource ? this.resource.picture() : null;\n    if (!pic) return <slot></slot>;\n    return <pos-image blurredBackground={this.blurredBackground} src={pic.url} alt={this.resource.label()}></pos-image>;\n  }\n}\n"]}

package/dist/collection/components/pos-rich-link/pos-rich-link.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class PosRichLink {
     render() {
-        return (h("pos-resource", { key: '389fb8817f5a7ff77965a8bb9924f48af15c528c', lazy: true, uri: this.uri }, h("p", { key: '1946deeff38a510800ef1558fd6374f65d72cd7f', class: "content" }, h("a", { key: '776c99ca32c7cd7fac30ab1f18b1c024b234d85f', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: '73845f265bf6ce6b9245c3b1a98c169ee110b650', lazy: true, uri: this.uri }, h("p", { key: '5d2698dd9cf27cb8b81cd679196f1b65eb8b45f8', class: "content" }, h("a", { key: '26973e0fa9966c07b0568a1893aef2d35f51744a', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: '0ddb22c414f2e4d61cf1beabb301b723b78235e1' })), h("span", { key: 'd2730c1fcc1c1521a7527bdb7a63c091ff49746c', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '53867e57b7403aed46e94a5f3df0b8389bc68244' }))));
+            } }, h("pos-label", { key: 'f0cfb727e32f5e3c760bd06e8c3031639959ff2c' })), h("span", { key: '93bfbe0f64ceceac6f600a39827aa3387460de1f', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '28a1a9afeb21720c3fe87ff5a4ad004173508a53' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-router/pos-router.js

@@ -38,7 +38,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: 'a5a451a8ddf4a30c6e5cbb2faf61d44f5a286df9' });
+        return h("slot", { key: '8b09de3dbbd253665cd541b9f264b0dcdc774354' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.js

@@ -19,7 +19,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '7f7d48443893800bb818e67865fccdbe1d10d44a' }, h("input", { key: 'ee24690418d5a4d6e357154e12685fa9975754f9', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '78fde7ccb4e0750e902da139b02810c15c21db3e', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: '88196bb6125fb061a14058eb4b8c5ece2a479316' }, h("input", { key: '839d513d12de456412da84c6de912ecb0df1d36f', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '3b62eb3eba017b4f092f20385c3cd79f7ab3c977', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-user-menu/pos-user-menu.css

@@ -0,0 +1,24 @@
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 50%;
+  pos-picture {
+    --width: 40px;
+    --height: 40px;
+    --border-radius: 50%;
+  }
+  sl-avatar {
+    --size: 40px;
+  }
+}
+
+sl-dropdown {
+  display: block;
+  --sl-color-primary-600: var(--pos-primary-color);
+}

package/dist/collection/components/pos-user-menu/pos-user-menu.js

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+import "./shoelace";
+export class PosUserMenu {
+    onSelect(e) {
+        const { value } = e.detail.item;
+        if (value === 'logout') {
+            this.logout.emit();
+        }
+        else if (value === 'profile') {
+            this.link.emit(this.webId);
+        }
+        else if (value === 'dashboard') {
+            this.link.emit('pod-os:dashboard');
+        }
+        else if (value === 'settings') {
+            this.link.emit('pod-os:settings');
+        }
+    }
+    render() {
+        if (!this.webId)
+            return null; //?
+        return (h("pos-resource", { uri: this.webId }, h("sl-dropdown", null, h("button", { slot: "trigger" }, h("pos-picture", null, h("sl-avatar", null))), h("sl-menu", null, h("sl-menu-item", { value: "dashboard" }, "Dashboard"), h("sl-menu-item", { value: "profile" }, h("pos-label", null)), h("sl-menu-item", { value: "settings" }, "Settings"), h("sl-divider", null), h("sl-menu-item", { value: "logout" }, "Logout")))));
+    }
+    static get is() { return "pos-user-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-user-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-user-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "webId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "web-id",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "logout",
+                "name": "pod-os:logout",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "link",
+                "name": "pod-os:link",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sl-select",
+                "method": "onSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pos-user-menu.js.map

package/dist/collection/components/pos-user-menu/pos-user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pos-user-menu.js","sourceRoot":"","sources":["../../../../src/components/pos-user-menu/pos-user-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,YAAY,CAAC;AAOpB,MAAM,OAAO,WAAW;IAWtB,QAAQ,CAAC,CAAuE;QAC9E,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAChC,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,KAAK,KAAK,WAAW,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACrC,CAAC;aAAM,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,CAAC,GAAG;QACjC,OAAO,CACL,oBAAc,GAAG,EAAE,IAAI,CAAC,KAAK;YAC3B;gBACE,cAAQ,IAAI,EAAC,SAAS;oBACpB;wBACE,oBAAuB,CACX,CACP;gBACT;oBACE,oBAAc,KAAK,EAAC,WAAW,gBAAyB;oBACxD,oBAAc,KAAK,EAAC,SAAS;wBAC3B,oBAAuB,CACV;oBACf,oBAAc,KAAK,EAAC,UAAU,eAAwB;oBACtD,qBAAyB;oBACzB,oBAAc,KAAK,EAAC,QAAQ,aAAsB,CAC1C,CACE,CACD,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport './shoelace';\n\n@Component({\n  tag: 'pos-user-menu',\n  shadow: true,\n  styleUrl: 'pos-user-menu.css',\n})\nexport class PosUserMenu {\n  @Prop()\n  webId!: string;\n\n  @Event({ eventName: 'pod-os:logout' })\n  logout: EventEmitter;\n\n  @Event({ eventName: 'pod-os:link' })\n  link: EventEmitter;\n\n  @Listen('sl-select')\n  onSelect(e: CustomEvent<{ item: { value: 'profile' | 'logout' | 'dashboard' } }>) {\n    const { value } = e.detail.item;\n    if (value === 'logout') {\n      this.logout.emit();\n    } else if (value === 'profile') {\n      this.link.emit(this.webId);\n    } else if (value === 'dashboard') {\n      this.link.emit('pod-os:dashboard');\n    } else if (value === 'settings') {\n      this.link.emit('pod-os:settings');\n    }\n  }\n\n  render() {\n    if (!this.webId) return null; //?\n    return (\n      <pos-resource uri={this.webId}>\n        <sl-dropdown>\n          <button slot=\"trigger\">\n            <pos-picture>\n              <sl-avatar></sl-avatar>\n            </pos-picture>\n          </button>\n          <sl-menu>\n            <sl-menu-item value=\"dashboard\">Dashboard</sl-menu-item>\n            <sl-menu-item value=\"profile\">\n              <pos-label></pos-label>\n            </sl-menu-item>\n            <sl-menu-item value=\"settings\">Settings</sl-menu-item>\n            <sl-divider></sl-divider>\n            <sl-menu-item value=\"logout\">Logout</sl-menu-item>\n          </sl-menu>\n        </sl-dropdown>\n      </pos-resource>\n    );\n  }\n}\n"]}

package/dist/collection/components/pos-user-menu/shoelace.js

@@ -0,0 +1,6 @@
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar.js";
+import "@shoelace-style/shoelace/dist/components/divider/divider.js";
+//# sourceMappingURL=shoelace.js.map

package/dist/collection/components/pos-user-menu/shoelace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shoelace.js","sourceRoot":"","sources":["../../../../src/components/pos-user-menu/shoelace.ts"],"names":[],"mappings":"AAAA,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC;AACzE,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,CAAC","sourcesContent":["import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';\nimport '@shoelace-style/shoelace/dist/components/menu/menu.js';\nimport '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';\nimport '@shoelace-style/shoelace/dist/components/avatar/avatar.js';\nimport '@shoelace-style/shoelace/dist/components/divider/divider.js';\n"]}

package/dist/collection/global.js

@@ -1,2 +1,8 @@
 import "@ionic/core";
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+function updateTheme(e) {
+    document.documentElement.classList.toggle('sl-theme-dark', e.matches);
+}
+updateTheme(mediaQuery);
+mediaQuery.addEventListener('change', updateTheme);
 //# sourceMappingURL=global.js.map

package/dist/collection/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC","sourcesContent":["import '@ionic/core';\n"]}
+{"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/global.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AAErE,SAAS,WAAW,CAAC,CAAC;IACpB,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,WAAW,CAAC,UAAU,CAAC,CAAC;AAExB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import '@ionic/core';\n\nconst mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction updateTheme(e) {\n  document.documentElement.classList.toggle('sl-theme-dark', e.matches);\n}\n\nupdateTheme(mediaQuery);\n\nmediaQuery.addEventListener('change', updateTheme);\n"]}

package/dist/components/index.js

@@ -1,6 +1,13 @@
 import { i as initialize } from './ionic-global.js';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+function updateTheme(e) {
+    document.documentElement.classList.toggle('sl-theme-dark', e.matches);
+}
+updateTheme(mediaQuery);
+mediaQuery.addEventListener('change', updateTheme);
+
 const globalFn = () => { };
 
 const globalScripts = () => {

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;AAEO,MAAM,aAAa,GAAG,MAAM;AACnC,EAAE,OAAO,OAAO,CAAC,GAAG,CAAC;AACrB,IAAIA,QAAoB,EAAE;AAC1B,IAAIC,UAAqB,EAAE;AAC3B,GAAG,CAAC,CAAC;AACL,CAAC;;","names":["elementsGlobalScript","ionicCoreGlobalScript"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["import ionicCoreGlobalScript from '/home/runner/work/PodOS/PodOS/node_modules/@ionic/core/dist/collection/global/ionic-global.js';\nimport elementsGlobalScript from '/home/runner/work/PodOS/PodOS/elements/src/global.ts';\nexport const globalScripts = () => {\n  return Promise.all([\n    elementsGlobalScript(),\n    ionicCoreGlobalScript(),\n  ]);\n};\n"],"version":3}
+{"file":"index.js","mappings":";;;AAAA;AAEA;AAEA;;AAEA;AAEA,WAAW;;;;ACNJ,MAAM,aAAa,GAAG,MAAM;AACnC,EAAE,OAAO,OAAO,CAAC,GAAG,CAAC;AACrB,IAAIA,QAAoB,EAAE;AAC1B,IAAIC,UAAqB,EAAE;AAC3B,GAAG,CAAC,CAAC;AACL,CAAC;;","names":["elementsGlobalScript","ionicCoreGlobalScript"],"sources":["src/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import '@ionic/core';\n\nconst mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction updateTheme(e) {\n  document.documentElement.classList.toggle('sl-theme-dark', e.matches);\n}\n\nupdateTheme(mediaQuery);\n\nmediaQuery.addEventListener('change', updateTheme);\n","import ionicCoreGlobalScript from '/home/runner/work/PodOS/PodOS/node_modules/@ionic/core/dist/collection/global/ionic-global.js';\nimport elementsGlobalScript from '/home/runner/work/PodOS/PodOS/elements/src/global.ts';\nexport const globalScripts = () => {\n  return Promise.all([\n    elementsGlobalScript(),\n    ionicCoreGlobalScript(),\n  ]);\n};\n"],"version":3}

package/dist/components/pos-add-new-thing2.js

@@ -17,7 +17,7 @@ const PosAddNewThing = /*@__PURE__*/ proxyCustomElement(class PosAddNewThing ext
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '5ed3ba3982467778ed2b9b02090c230acb6b1762' }, h("button", { key: '96ff5dbd0ba4ca4d8c1d25045efa06fea062e9cf', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: '201a19c8ecb39e0e913d3fb8cf1ebee06bc41df5', name: "add-circle-outline" })), h("pos-dialog", { key: '421da81e6faf52119fe600cc388663299eab67ec', ref: el => (this.dialog = el) }, h("span", { key: '454e6e05dc478e9c1b378cb3308f006fab4d8738', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: 'a469379848776a4c7e9f8e3f94da76ba048d7fab', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '4adcc80d1a0d810279a85be26c8ec6717d91c8a2' }, h("button", { key: '9a3cdd12719c4d3e4ae1e0eff60ccd6101395d92', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'efb2723db05962c02293931d0a334ba55908f596', name: "add-circle-outline" })), h("pos-dialog", { key: '954a947b2dc4082519c50cb71a4b6f0f3550c0fb', ref: el => (this.dialog = el) }, h("span", { key: '0a7e91bab3d8740bc8228782d70a980779db7ca1', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '66ac9bcf72a71b58f4dbbc5cfd214b3609c78cbf', slot: "content", referenceUri: this.referenceUri }))));
     }
     static get style() { return PosAddNewThingStyle0; }
 }, [1, "pos-add-new-thing", {

package/dist/components/pos-app-browser.js

@@ -1,34 +1,36 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$v } from './icon.js';
-import { d as defineCustomElement$u } from './progress-bar.js';
-import { d as defineCustomElement$t } from './ripple-effect.js';
-import { d as defineCustomElement$s } from './skeleton-text.js';
-import { d as defineCustomElement$r } from './toast.js';
-import { d as defineCustomElement$q } from './pos-add-new-thing2.js';
-import { d as defineCustomElement$p } from './pos-app2.js';
-import { d as defineCustomElement$o } from './pos-app-dashboard2.js';
-import { d as defineCustomElement$n } from './pos-app-settings2.js';
-import { d as defineCustomElement$m } from './pos-description2.js';
-import { d as defineCustomElement$l } from './pos-dialog2.js';
-import { d as defineCustomElement$k } from './pos-error-toast2.js';
-import { d as defineCustomElement$j } from './pos-example-resources2.js';
-import { d as defineCustomElement$i } from './pos-getting-started2.js';
-import { d as defineCustomElement$h } from './pos-image2.js';
-import { d as defineCustomElement$g } from './pos-internal-router2.js';
-import { d as defineCustomElement$f } from './pos-label2.js';
-import { d as defineCustomElement$e } from './pos-login2.js';
-import { d as defineCustomElement$d } from './pos-login-form2.js';
-import { d as defineCustomElement$c } from './pos-make-findable2.js';
-import { d as defineCustomElement$b } from './pos-navigation2.js';
-import { d as defineCustomElement$a } from './pos-navigation-bar2.js';
-import { d as defineCustomElement$9 } from './pos-new-thing-form2.js';
-import { d as defineCustomElement$8 } from './pos-picture2.js';
-import { d as defineCustomElement$7 } from './pos-resource2.js';
-import { d as defineCustomElement$6 } from './pos-rich-link2.js';
-import { d as defineCustomElement$5 } from './pos-router2.js';
-import { d as defineCustomElement$4 } from './pos-select-term2.js';
-import { d as defineCustomElement$3 } from './pos-setting-offline-cache2.js';
-import { d as defineCustomElement$2 } from './pos-type-router2.js';
+import { s as store } from './session.js';
+import { d as defineCustomElement$w } from './icon.js';
+import { d as defineCustomElement$v } from './progress-bar.js';
+import { d as defineCustomElement$u } from './ripple-effect.js';
+import { d as defineCustomElement$t } from './skeleton-text.js';
+import { d as defineCustomElement$s } from './toast.js';
+import { d as defineCustomElement$r } from './pos-add-new-thing2.js';
+import { d as defineCustomElement$q } from './pos-app2.js';
+import { d as defineCustomElement$p } from './pos-app-dashboard2.js';
+import { d as defineCustomElement$o } from './pos-app-settings2.js';
+import { d as defineCustomElement$n } from './pos-description2.js';
+import { d as defineCustomElement$m } from './pos-dialog2.js';
+import { d as defineCustomElement$l } from './pos-error-toast2.js';
+import { d as defineCustomElement$k } from './pos-example-resources2.js';
+import { d as defineCustomElement$j } from './pos-getting-started2.js';
+import { d as defineCustomElement$i } from './pos-image2.js';
+import { d as defineCustomElement$h } from './pos-internal-router2.js';
+import { d as defineCustomElement$g } from './pos-label2.js';
+import { d as defineCustomElement$f } from './pos-login2.js';
+import { d as defineCustomElement$e } from './pos-login-form2.js';
+import { d as defineCustomElement$d } from './pos-make-findable2.js';
+import { d as defineCustomElement$c } from './pos-navigation2.js';
+import { d as defineCustomElement$b } from './pos-navigation-bar2.js';
+import { d as defineCustomElement$a } from './pos-new-thing-form2.js';
+import { d as defineCustomElement$9 } from './pos-picture2.js';
+import { d as defineCustomElement$8 } from './pos-resource2.js';
+import { d as defineCustomElement$7 } from './pos-rich-link2.js';
+import { d as defineCustomElement$6 } from './pos-router2.js';
+import { d as defineCustomElement$5 } from './pos-select-term2.js';
+import { d as defineCustomElement$4 } from './pos-setting-offline-cache2.js';
+import { d as defineCustomElement$3 } from './pos-type-router2.js';
+import { d as defineCustomElement$2 } from './pos-user-menu2.js';
 
 const posAppBrowserCss = "pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation {\n  max-width: var(--width-lg);\n  margin: 0;\n  min-width: var(--size-32);\n  flex-shrink: 1; /* Ensure navigation can shrink */\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto;\n  flex-shrink: 0; /* Ensure those items don't shrink */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: nowrap;\n  padding: var(--size-1) var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: var(--size-1);\n    justify-content: space-between;\n  }\n}\n";
 const PosAppBrowserStyle0 = posAppBrowserCss;
@@ -48,7 +50,7 @@ const PosAppBrowser$1 = /*@__PURE__*/ proxyCustomElement(class PosAppBrowser ext
         this.uri = '';
     }
     render() {
-        return (h(Host, { key: 'd2c863f8abf790352cdf9c830a1baa8d7aee95a8' }, h("pos-app", { key: '163415bea00a0a18f5e97f5cb7f3e5b9f5910f61', restorePreviousSession: this.restorePreviousSession }, h("pos-error-toast", { key: '799735b00aff86946259013132079814520ced7e' }, h("pos-router", { key: 'bdb89d03d93937399ec38b0b2c1d695feea248b9', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, h("header", { key: 'e828af57fa2d8842c058197a826ac488cbb2a968' }, h("pos-add-new-thing", { key: '28eed0a89a4e554e88ea4fce13b2dd59c5ce0149', referenceUri: this.uri }), h("pos-navigation", { key: '16a06ae6aea6ac316cacc4ffa52442b3ada62d62', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), h("pos-login", { key: '9577c4aa8a18af341715b6e51946dbb4481ef963' })), h("main", { key: '73dc7ba162440c5198a31f5a4b060dc2c2d1c70a' }, this.mainContent()), h("footer", { key: 'cb18c8eb3abc1ee62426db39a61e650df2906241' }, h(Logo, { key: 'e9205f06faa7153310a17470f55b97a423cf6691' }), h("span", { key: '7be0a255d0ca50d961f122fdfc9fd3bb3fdfd624' }, "PodOS Browser"), h("span", { key: '3ed17bc88faffbcfa973278c76f63a2a199ec026' }, "|"), h("a", { key: 'ab88d3e93e59b918dd21b8cd42b70522dc532730', class: "settings", href: "?uri=pod-os%3Asettings" }, "\u2699 Settings")))))));
+        return (h(Host, { key: '08b186d2f354d6c07df02707eb4ada81aef7dec3' }, h("pos-app", { key: '54c372343e916ab5d77584381b3965c925ae0cd0', restorePreviousSession: this.restorePreviousSession }, h("pos-error-toast", { key: 'ab63e18121ca16670f81da141219a782dde0694b' }, h("pos-router", { key: '69b6f3bf8ce3720c6c39cdb4be69e640e27ccc5b', mode: this.mode, "onPod-os:route-changed": e => (this.uri = e.detail) }, h("header", { key: '5cd3412caf13b6d99da517ae7e6f5877234e65d7' }, h("pos-add-new-thing", { key: '9b83b3cf03b7038303975386176df539b35ff547', referenceUri: this.uri }), h("pos-navigation", { key: '26bfed9b1c8dd1be018babc6ef40ae42808a5c42', uri: this.uri === 'pod-os:dashboard' ? '' : this.uri }), h("pos-login", { key: 'e29f18dcde866d8ac1e317fcd7b71ef584e69034' }, h("pos-user-menu", { key: 'be796f0914649eb4e8525a9d8acdfd535626303c', webId: store.state.webId, slot: "if-logged-in" }))), h("main", { key: 'f99dfb2d43e949528bc767b94801c99bf04a7eea' }, this.mainContent()), h("footer", { key: '64744d1246356fa00da9c6b561785e2b794a7907' }, h(Logo, { key: 'a648f7f88e12c79348bda33152f2759d2b93e738' }), h("span", { key: 'f22e2f9904ba517fc2e579a05018704b5ade6302' }, "PodOS Browser"), h("span", { key: '24cfa0a74fa3759d919a4ef847705353d403f93b' }, "|"), h("a", { key: 'a4264428f853102c940b4babc71a8b32d7a400e7', class: "settings", href: "?uri=pod-os%3Asettings" }, "\u2699 Settings")))))));
     }
     mainContent() {
         if (this.uri === '') {
@@ -84,7 +86,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-browser", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-skeleton-text", "ion-toast", "pos-add-new-thing", "pos-app", "pos-app-dashboard", "pos-app-settings", "pos-description", "pos-dialog", "pos-error-toast", "pos-example-resources", "pos-getting-started", "pos-image", "pos-internal-router", "pos-label", "pos-login", "pos-login-form", "pos-make-findable", "pos-navigation", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-rich-link", "pos-router", "pos-select-term", "pos-setting-offline-cache", "pos-type-router"];
+    const components = ["pos-app-browser", "ion-icon", "ion-progress-bar", "ion-ripple-effect", "ion-skeleton-text", "ion-toast", "pos-add-new-thing", "pos-app", "pos-app-dashboard", "pos-app-settings", "pos-description", "pos-dialog", "pos-error-toast", "pos-example-resources", "pos-getting-started", "pos-image", "pos-internal-router", "pos-label", "pos-login", "pos-login-form", "pos-make-findable", "pos-navigation", "pos-navigation-bar", "pos-new-thing-form", "pos-picture", "pos-resource", "pos-rich-link", "pos-router", "pos-select-term", "pos-setting-offline-cache", "pos-type-router", "pos-user-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-browser":
             if (!customElements.get(tagName)) {
@@ -93,150 +95,155 @@ function defineCustomElement$1() {
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "ion-progress-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "ion-ripple-effect":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "ion-skeleton-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "ion-toast":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "pos-add-new-thing":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "pos-app":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "pos-app-dashboard":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "pos-app-settings":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "pos-description":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "pos-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "pos-error-toast":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "pos-example-resources":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "pos-getting-started":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "pos-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "pos-internal-router":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "pos-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "pos-login":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "pos-login-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "pos-make-findable":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "pos-navigation":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "pos-navigation-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "pos-new-thing-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "pos-picture":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "pos-resource":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "pos-rich-link":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "pos-router":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "pos-select-term":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "pos-setting-offline-cache":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "pos-type-router":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pos-user-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/pos-app-browser.js.map

@@ -1 +1 @@
-{"file":"pos-app-browser.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,4yCAA4yC,CAAC;AACt0C,4BAAe,gBAAgB;;MCKlBA,eAAa;IAJ1B;;;QAKU,2BAAsB,GAAY,KAAK,CAAC;;;;;;;QAQxC,SAAI,GAAyB,YAAY,CAAC;QAEzC,QAAG,GAAG,EAAE,CAAC;KA0CnB;IAxCC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAC1D,0EACE,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,4BAA0B,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,IAC7E,iEACE,0EAAmB,YAAY,EAAE,IAAI,CAAC,GAAG,GAAsB,EAC/D,uEAAgB,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,GAAmB,EACvF,mEAAuB,CAChB,EACT,+DAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,EACjC,iEACE,EAAC,IAAI,sDAAG,EACR,+EAA0B,EAC1B,mEAAc,EACd,0DAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,wBAAwB,sBAE7C,CACG,CACE,CACG,CACV,CACL,EACP;KACH;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC;SACb;QACD,IAAI,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;YAClC,OAAO,2BAAqB,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;SAC/C;QACD,QACE,oBAAc,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACxC,0BAAmB,CACN,EACf;KACH;;;;;;;AAGH,MAAM,IAAI,GAAG;IACX,QACE,WAAK,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3D,YACE,CAAC,EAAC,6CAA6C,EAC/C,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,0EAA0E,EAC5E,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,OAAO;YACjB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,gDAAgD,EAClD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,CACE,EACN;AACJ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppBrowser"],"sources":["src/apps/pos-app-browser/pos-app-browser.css?tag=pos-app-browser","src/apps/pos-app-browser/pos-app-browser.tsx"],"sourcesContent":["pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation {\n  max-width: var(--width-lg);\n  margin: 0;\n  min-width: var(--size-32);\n  flex-shrink: 1; /* Ensure navigation can shrink */\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto;\n  flex-shrink: 0; /* Ensure those items don't shrink */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: nowrap;\n  padding: var(--size-1) var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: var(--size-1);\n    justify-content: space-between;\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-browser',\n  styleUrl: 'pos-app-browser.css',\n})\nexport class PosAppBrowser {\n  @Prop() restorePreviousSession: boolean = false;\n\n  /**\n   * The mode the app is running in:\n   *\n   * - standalone: use this when you deploy it as a standalone web application\n   * - pod: use this when you host this app as a default interface for you pod\n   */\n  @Prop() mode: 'standalone' | 'pod' = 'standalone';\n\n  @State() uri = '';\n\n  render() {\n    return (\n      <Host>\n        <pos-app restorePreviousSession={this.restorePreviousSession}>\n          <pos-error-toast>\n            <pos-router mode={this.mode} onPod-os:route-changed={e => (this.uri = e.detail)}>\n              <header>\n                <pos-add-new-thing referenceUri={this.uri}></pos-add-new-thing>\n                <pos-navigation uri={this.uri === 'pod-os:dashboard' ? '' : this.uri}></pos-navigation>\n                <pos-login></pos-login>\n              </header>\n              <main>{this.mainContent()}</main>\n              <footer>\n                <Logo />\n                <span>PodOS Browser</span>\n                <span>|</span>\n                <a class=\"settings\" href=\"?uri=pod-os%3Asettings\">\n                  ⚙ Settings\n                </a>\n              </footer>\n            </pos-router>\n          </pos-error-toast>\n        </pos-app>\n      </Host>\n    );\n  }\n\n  private mainContent() {\n    if (this.uri === '') {\n      return null;\n    }\n    if (this.uri.startsWith('pod-os:')) {\n      return <pos-internal-router uri={this.uri} />;\n    }\n    return (\n      <pos-resource key={this.uri} uri={this.uri}>\n        <pos-type-router />\n      </pos-resource>\n    );\n  }\n}\n\nconst Logo = () => {\n  return (\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M50 350 L50 100 L200 50 L350 100 L350 350 Z\"\n        style={{\n          'fill': '#008BF8',\n          'stroke': '#008BF8',\n          'stroke-width': '70',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z\"\n        style={{\n          'fill': 'white',\n          'stroke': 'white',\n          'stroke-width': '45',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M150 250 L150 200 L200 180 L250 200 L250 250 Z\"\n        style={{\n          'fill': '#DC0073',\n          'stroke': '#DC0073',\n          'stroke-width': '20',\n        }}\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],"version":3}
+{"file":"pos-app-browser.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,4yCAA4yC,CAAC;AACt0C,4BAAe,gBAAgB;;MCMlBA,eAAa;IAJ1B;;;QAKU,2BAAsB,GAAY,KAAK,CAAC;;;;;;;QAQxC,SAAI,GAAyB,YAAY,CAAC;QAEzC,QAAG,GAAG,EAAE,CAAC;KA6CnB;IA3CC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAC1D,0EACE,mEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,4BAA0B,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,IAC7E,iEACE,0EAAmB,YAAY,EAAE,IAAI,CAAC,GAAG,GAAsB,EAC/D,uEAAgB,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,GAAmB,EAEvF,oEACE,sEAAe,KAAK,EAAEC,KAAO,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,cAAc,GAAiB,CACrE,CACL,EACT,+DAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,EACjC,iEACE,EAAC,IAAI,sDAAG,EACR,+EAA0B,EAC1B,mEAAc,EACd,0DAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,wBAAwB,sBAE7C,CACG,CACE,CACG,CACV,CACL,EACP;KACH;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC;SACb;QACD,IAAI,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;YAClC,OAAO,2BAAqB,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;SAC/C;QACD,QACE,oBAAc,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IACxC,0BAAmB,CACN,EACf;KACH;;;;;;;AAGH,MAAM,IAAI,GAAG;IACX,QACE,WAAK,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3D,YACE,CAAC,EAAC,6CAA6C,EAC/C,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,0EAA0E,EAC5E,KAAK,EAAE;YACL,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,OAAO;YACjB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,EAEF,YACE,CAAC,EAAC,gDAAgD,EAClD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,IAAI;SACrB,qBACe,OAAO,GACvB,CACE,EACN;AACJ,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppBrowser","session"],"sources":["src/apps/pos-app-browser/pos-app-browser.css?tag=pos-app-browser","src/apps/pos-app-browser/pos-app-browser.tsx"],"sourcesContent":["pos-router {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\npos-navigation {\n  max-width: var(--width-lg);\n  margin: 0;\n  min-width: var(--size-32);\n  flex-shrink: 1; /* Ensure navigation can shrink */\n}\n\npos-add-new-thing,\npos-login {\n  flex: 0 1 auto;\n  flex-shrink: 0; /* Ensure those items don't shrink */\n}\n\nheader,\nfooter {\n  display: flex;\n  gap: var(--size-1);\n  height: auto;\n  justify-content: center;\n  align-items: center;\n  padding: var(--size-1);\n}\n\nfooter svg {\n  width: var(--size-5);\n  height: var(--size-5);\n}\n\nfooter {\n  font-size: var(--scale-fluid-000);\n\n  .settings {\n    padding: 0 var(--size-1);\n    text-decoration: none;\n    background-color: var(--pos-background-color);\n    border: 1px solid var(--pos-secondary-border-color);\n    color: var(--pos-secondary-border-color);\n    border-radius: var(--radius-xs);\n\n    &:hover {\n      background-color: var(--pos-secondary-border-color);\n      color: var(--pos-background-color);\n    }\n  }\n}\n\nheader {\n  flex-wrap: nowrap;\n  padding: var(--size-1) var(--size-8);\n}\n\nmain {\n  flex: 1;\n  max-height: 100vh;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  header {\n    padding: var(--size-1);\n    justify-content: space-between;\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\nimport session from '../../store/session';\n\n@Component({\n  tag: 'pos-app-browser',\n  styleUrl: 'pos-app-browser.css',\n})\nexport class PosAppBrowser {\n  @Prop() restorePreviousSession: boolean = false;\n\n  /**\n   * The mode the app is running in:\n   *\n   * - standalone: use this when you deploy it as a standalone web application\n   * - pod: use this when you host this app as a default interface for you pod\n   */\n  @Prop() mode: 'standalone' | 'pod' = 'standalone';\n\n  @State() uri = '';\n\n  render() {\n    return (\n      <Host>\n        <pos-app restorePreviousSession={this.restorePreviousSession}>\n          <pos-error-toast>\n            <pos-router mode={this.mode} onPod-os:route-changed={e => (this.uri = e.detail)}>\n              <header>\n                <pos-add-new-thing referenceUri={this.uri}></pos-add-new-thing>\n                <pos-navigation uri={this.uri === 'pod-os:dashboard' ? '' : this.uri}></pos-navigation>\n\n                <pos-login>\n                  <pos-user-menu webId={session.state.webId} slot=\"if-logged-in\"></pos-user-menu>\n                </pos-login>\n              </header>\n              <main>{this.mainContent()}</main>\n              <footer>\n                <Logo />\n                <span>PodOS Browser</span>\n                <span>|</span>\n                <a class=\"settings\" href=\"?uri=pod-os%3Asettings\">\n                  ⚙ Settings\n                </a>\n              </footer>\n            </pos-router>\n          </pos-error-toast>\n        </pos-app>\n      </Host>\n    );\n  }\n\n  private mainContent() {\n    if (this.uri === '') {\n      return null;\n    }\n    if (this.uri.startsWith('pod-os:')) {\n      return <pos-internal-router uri={this.uri} />;\n    }\n    return (\n      <pos-resource key={this.uri} uri={this.uri}>\n        <pos-type-router />\n      </pos-resource>\n    );\n  }\n}\n\nconst Logo = () => {\n  return (\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M50 350 L50 100 L200 50 L350 100 L350 350 Z\"\n        style={{\n          'fill': '#008BF8',\n          'stroke': '#008BF8',\n          'stroke-width': '70',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M100 300 L100 150 L200 120 L300 150 L300 300 L130 300 L130 370 L100 370Z\"\n        style={{\n          'fill': 'white',\n          'stroke': 'white',\n          'stroke-width': '45',\n        }}\n        stroke-linejoin=\"round\"\n      />\n\n      <path\n        d=\"M150 250 L150 200 L200 180 L250 200 L250 250 Z\"\n        style={{\n          'fill': '#DC0073',\n          'stroke': '#DC0073',\n          'stroke-width': '20',\n        }}\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n"],"version":3}