@pod-os/elements 0.26.1-rc.d6e1fef.0 → 0.26.1-rc.f4329bf.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pos-navigation-bar.js","sourceRoot":"","sources":["../../../../../src/components/pos-navigation/bar/pos-navigation-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQhF,MAAM,OAAO,gBAAgB;IAMnB,OAAO;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAGD,QAAQ,CAAC,CAAgB;QACvB,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,iCAAiC,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAElH,OAAO,CACL,gEAAS,KAAK,EAAC,SAAS;YACrB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,0EAAmB,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,GAAsB;YACxG,6EAAoB,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;gBAC1D,8DAAM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAO;gBACvE,IAAI,CAAC,IAAI,EAAE,CACL,CACD,CACX,CAAC;IACJ,CAAC;IAEO,IAAI;QACV,OAAO,CACL,0BACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,kBACN,KAAK,EAClB,MAAM,EAAC,cAAc;YAErB,8BACiB,OAAO,qBACN,OAAO,EACvB,CAAC,EAAC,+EAA+E,GACjF,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\nimport { Thing } from '@pod-os/core';\n\n@Component({\n  tag: 'pos-navigation-bar',\n  shadow: true,\n  styleUrl: 'pos-navigation-bar.css',\n})\nexport class PosNavigationBar {\n  @Prop() current?: Thing;\n  @Prop() searchIndexReady: boolean;\n\n  @Event({ eventName: 'pod-os:navigate' }) navigate: EventEmitter;\n\n  private onClick() {\n    this.navigate.emit(this.current);\n  }\n\n  @Listen('keydown', { target: 'document' })\n  activate(e: KeyboardEvent) {\n    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {\n      e.preventDefault();\n      this.navigate.emit(this.current);\n    }\n  }\n\n  render() {\n    const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';\n\n    return (\n      <section class=\"current\">\n        {this.current && this.searchIndexReady && <pos-make-findable uri={this.current.uri}></pos-make-findable>}\n        <button aria-label={ariaLabel} onClick={() => this.onClick()}>\n          <div>{this.current ? this.current.label() : 'Search or enter URI'}</div>\n          {this.icon()}\n        </button>\n      </section>\n    );\n  }\n\n  private icon() {\n    return (\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          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\"\n        />\n      </svg>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,115 @@
+:host {
+  --pos-navigation-bar-height: var(--size-10);
+}
+
+search {
+  position: relative;
+}
+
+.suggestions ol {
+  border: 1px solid var(--pos-border-color);
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.suggestions {
+  width: 100%;
+  overflow-y: auto;
+  max-height: 90dvh;
+  li {
+    padding: 1rem;
+    background-color: var(--pos-background-color);
+    pos-rich-link {
+      --background-color: inherit;
+    }
+    &[aria-selected='true'] {
+      background-color: var(--pos-primary-color);
+      &:hover {
+        background-color: var(--pos-primary-color);
+      }
+    }
+    &:hover {
+      background-color: var(--pos-border-color);
+    }
+  }
+}
+
+.suggestions li.selected pos-rich-link {
+  --label-color: white;
+  --description-color: var(--pos-border-color);
+  --uri-color: var(--pos-subtle-text-color);
+}
+
+dialog {
+  position: absolute;
+  margin-top: calc(-1 * var(--pos-navigation-bar-height));
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  overflow: hidden;
+  max-height: 100dvh;
+  background-color: var(--pos-background-color);
+  color: var(--pos-normal-text-color);
+  border: var(--pos-border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    input {
+      display: flex;
+      font-size: var(--scale-1);
+      height: var(--pos-navigation-bar-height);
+      border-top-left-radius: var(--radius-md);
+      border-top-right-radius: var(--radius-md);
+      padding-left: var(--size-2);
+      width: 100%;
+      border: none;
+      outline: none;
+      color: var(--pos-normal-text-color);
+      background-color: var(--pos-input-background-color);
+      box-sizing: border-box;
+    }
+  }
+}
+
+dialog[open] {
+  display: flex;
+  z-index: var(--layer-top);
+  animation: slideIn 100ms ease-out;
+}
+
+@media (max-width: 640px) {
+  search {
+    position: unset;
+  }
+  dialog {
+    margin-top: var(--size-1);
+    top: 0;
+    width: 95dvw;
+    max-width: unset;
+    min-width: unset;
+    form {
+      input {
+        height: var(--size-12);
+        font-size: var(--scale-fluid-3);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/collection/components/{pos-navigation-bar/pos-navigation-bar.js → pos-navigation/pos-navigation.js}

@@ -1,19 +1,39 @@
 import { h } from "@stencil/core";
+import { debounceTime, Subject } from "rxjs";
 import session from "../../store/session";
 import { subscribePodOs } from "../events/PodOsAware";
-export class PosNavigationBar {
+export class PosNavigation {
     constructor() {
+        /**
+         * Initial value of the navigation bar
+         */
         this.uri = '';
-        this.value = this.uri;
+        /**
+         * Current value of the input field
+         */
+        this.inputValue = this.uri;
         this.searchIndex = undefined;
         this.suggestions = [];
         this.selectedIndex = -1;
+        this.resource = null;
+        this.changeEvents = new Subject();
+        this.debouncedSearch = null;
         this.receivePodOs = async (os) => {
             this.os = os;
         };
     }
+    updateResource() {
+        var _a;
+        try {
+            this.resource = this.uri ? (_a = this.os) === null || _a === void 0 ? void 0 : _a.store.get(this.uri) : null;
+        }
+        catch (_b) {
+            this.resource = null;
+        }
+    }
     componentWillLoad() {
         subscribePodOs(this);
+        this.updateResource();
         session.onChange('isLoggedIn', async (isLoggedIn) => {
             if (isLoggedIn) {
                 await this.buildSearchIndex();
@@ -22,6 +42,11 @@ export class PosNavigationBar {
                 this.clearSearchIndex();
             }
         });
+        this.debouncedSearch = this.changeEvents.pipe(debounceTime(300)).subscribe(() => this.search());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.debouncedSearch) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     async buildSearchIndex() {
         this.searchIndex = await this.os.buildSearchIndex(session.state.profile);
@@ -29,16 +54,33 @@ export class PosNavigationBar {
     rebuildSearchIndex() {
         this.searchIndex.rebuild();
     }
+    openNavigationDialog(e) {
+        var _a, _b;
+        this.resource = e.detail;
+        if (e.detail) {
+            this.inputValue = e.detail.uri;
+            this.search();
+        }
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
+        (_b = this.dialogRef) === null || _b === void 0 ? void 0 : _b.show();
+    }
     clearSearchIndex() {
         var _a;
         (_a = this.searchIndex) === null || _a === void 0 ? void 0 : _a.clear();
     }
     onChange(event) {
-        this.value = event.detail.value;
-        this.search();
+        this.inputValue = event.target.value;
+        this.changeEvents.next();
+    }
+    closeDialog() {
+        var _a;
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
+        this.selectedIndex = -1;
     }
     clearSuggestions() {
+        var _a;
         this.suggestions = [];
+        (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
         this.selectedIndex = -1;
     }
     onClickSelf(event) {
@@ -46,7 +88,7 @@ export class PosNavigationBar {
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {
-            this.clearSuggestions();
+            this.closeDialog();
         }
         else if (ev.key === 'ArrowDown') {
             ev.preventDefault();
@@ -59,31 +101,30 @@ export class PosNavigationBar {
     }
     search() {
         if (this.searchIndex) {
-            this.suggestions = this.value ? this.searchIndex.search(this.value) : [];
+            this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];
         }
     }
-    onSubmit(event) {
-        event.preventDefault();
+    onSubmit() {
         if (this.suggestions && this.selectedIndex > -1) {
             this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);
         }
         else {
-            this.linkEmitter.emit(this.value);
+            this.linkEmitter.emit(this.inputValue);
         }
     }
     render() {
-        return (h("form", { key: 'e92382c2024642ea5c0b5abb00f1759003f74c78', onSubmit: e => this.onSubmit(e) }, this.searchIndex && this.uri ? h("pos-make-findable", { uri: this.uri }) : '', h("div", { key: 'c32607860e8aa1fe6d6d182c0e2a056f40b6f1b7', class: "bar" }, h("ion-searchbar", { key: '6f281c307640200da6c57a0660e27901f55d375d', enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, debounce: 300, onIonChange: e => this.onChange(e), onIonInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)));
+        return (h("nav", { key: 'c6f9915d7778a332aa0e2f3b19b733da63b55d3a' }, h("search", { key: '2911efe53775a82d6c87ba823adfd2f37d196994' }, h("pos-navigation-bar", { key: 'ce9d62d0fdc81df2f6c7f7750b5c4fc98e2b0240', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'cab1f4261e43e8318582d6b37096301a7ef987cc', ref: el => (this.dialogRef = el) }, h("form", { key: '3caed872d467ef70c3b097da4f337f492bafdc9f', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '72ba8d15816608dab944f7d8541713bbf177c1c2', 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-bar"; }
+    static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pos-navigation-bar.css"]
+            "$": ["pos-navigation.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pos-navigation-bar.css"]
+            "$": ["pos-navigation.css"]
         };
     }
     static get properties() {
@@ -100,7 +141,7 @@ export class PosNavigationBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Initial value of the navigation bar"
                 },
                 "getter": false,
                 "setter": false,
@@ -113,10 +154,11 @@ export class PosNavigationBar {
     static get states() {
         return {
             "os": {},
-            "value": {},
+            "inputValue": {},
             "searchIndex": {},
             "suggestions": {},
-            "selectedIndex": {}
+            "selectedIndex": {},
+            "resource": {}
         };
     }
     static get events() {
@@ -152,6 +194,15 @@ export class PosNavigationBar {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "uri",
+                "methodName": "updateResource"
+            }, {
+                "propName": "os",
+                "methodName": "updateResource"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "pod-os:search:index-created",
@@ -165,9 +216,15 @@ export class PosNavigationBar {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pod-os:navigate",
+                "method": "openNavigationDialog",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
-                "method": "clearSuggestions",
+                "method": "closeDialog",
                 "target": "document",
                 "capture": false,
                 "passive": false
@@ -192,4 +249,4 @@ export class PosNavigationBar {
             }];
     }
 }
-//# sourceMappingURL=pos-navigation-bar.js.map
+//# sourceMappingURL=pos-navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pos-navigation.js","sourceRoot":"","sources":["../../../../src/components/pos-navigation/pos-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PodOS, SearchIndex, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { debounceTime, Subject } from 'rxjs';\n\nimport session from '../../store/session';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\n\ninterface NavigateEvent {\n  detail: Thing | null;\n}\n\n@Component({\n  tag: 'pos-navigation',\n  shadow: true,\n  styleUrl: 'pos-navigation.css',\n})\nexport class PosNavigation implements PodOsAware {\n  @State() private os: PodOS;\n  private dialogRef?: HTMLDialogElement;\n\n  private inputRef?: HTMLInputElement;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  /**\n   * Initial value of the navigation bar\n   */\n  @Prop() uri: string = '';\n\n  /**\n   * Current value of the input field\n   */\n  @State() private inputValue: string = this.uri;\n\n  @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;\n\n  @State() searchIndex?: SearchIndex = undefined;\n\n  @State() private suggestions = [];\n\n  @State() private selectedIndex = -1;\n\n  @State() private resource: Thing = null;\n\n  private readonly changeEvents = new Subject<void>();\n  private debouncedSearch = null;\n\n  @Watch('uri')\n  @Watch('os')\n  updateResource(): void {\n    try {\n      this.resource = this.uri ? this.os?.store.get(this.uri) : null;\n    } catch {\n      this.resource = null;\n    }\n  }\n\n  componentWillLoad() {\n    subscribePodOs(this);\n    this.updateResource();\n    session.onChange('isLoggedIn', async isLoggedIn => {\n      if (isLoggedIn) {\n        await this.buildSearchIndex();\n      } else {\n        this.clearSearchIndex();\n      }\n    });\n    this.debouncedSearch = this.changeEvents.pipe(debounceTime(300)).subscribe(() => this.search());\n  }\n\n  disconnectedCallback() {\n    this.debouncedSearch?.unsubscribe();\n  }\n\n  @Listen('pod-os:search:index-created')\n  private async buildSearchIndex() {\n    this.searchIndex = await this.os.buildSearchIndex(session.state.profile);\n  }\n\n  @Listen('pod-os:search:index-updated')\n  rebuildSearchIndex() {\n    this.searchIndex.rebuild();\n  }\n\n  @Listen('pod-os:navigate')\n  openNavigationDialog(e: NavigateEvent) {\n    this.resource = e.detail;\n    if (e.detail) {\n      this.inputValue = e.detail.uri;\n      this.search();\n    }\n    this.inputRef?.select();\n    this.dialogRef?.show();\n  }\n\n  private clearSearchIndex() {\n    this.searchIndex?.clear();\n  }\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  private onChange(event) {\n    this.inputValue = event.target.value;\n    this.changeEvents.next();\n  }\n\n  @Listen('click', { target: 'document' })\n  closeDialog() {\n    this.dialogRef?.close();\n    this.selectedIndex = -1;\n  }\n\n  @Listen('pod-os:link')\n  clearSuggestions() {\n    this.suggestions = [];\n    this.dialogRef?.close();\n    this.selectedIndex = -1;\n  }\n\n  @Listen('click')\n  onClickSelf(event) {\n    event.stopPropagation();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.closeDialog();\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n    } else if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n    }\n  }\n\n  private search() {\n    if (this.searchIndex) {\n      this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];\n    }\n  }\n\n  private onSubmit() {\n    if (this.suggestions && this.selectedIndex > -1) {\n      this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);\n    } else {\n      this.linkEmitter.emit(this.inputValue);\n    }\n  }\n\n  render() {\n    return (\n      <nav>\n        <search>\n          <pos-navigation-bar\n            searchIndexReady={this.searchIndex !== undefined}\n            current={this.resource}\n          ></pos-navigation-bar>\n          <dialog ref={el => (this.dialogRef = el)}>\n            <form method=\"dialog\" onSubmit={() => this.onSubmit()}>\n              <input\n                ref={el => (this.inputRef = el)}\n                enterkeyhint=\"search\"\n                aria-label=\"Search or enter URI\"\n                placeholder=\"Search or enter URI\"\n                value={this.uri}\n                onChange={e => this.onChange(e)}\n                onInput={e => this.onChange(e)}\n                role=\"combobox\"\n                aria-autocomplete=\"list\"\n                aria-expanded={this.suggestions.length > 0}\n                aria-controls=\"suggestions-list\"\n                aria-activedescendant={this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null}\n              />\n              {this.suggestions.length > 0 ? (\n                <div class=\"suggestions\">\n                  <ol id=\"suggestions-list\" role=\"listbox\" aria-label=\"Search results\">\n                    {this.suggestions.map((it, index) => (\n                      <li\n                        id={`option-${index}`}\n                        role=\"option\"\n                        aria-selected={index === this.selectedIndex ? 'true' : 'false'}\n                      >\n                        <pos-rich-link uri={it.ref}></pos-rich-link>\n                      </li>\n                    ))}\n                  </ol>\n                </div>\n              ) : null}\n            </form>\n          </dialog>\n        </search>\n      </nav>\n    );\n  }\n}\n"]}

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: '9ee9d0ab4f31bfc55865ef697d410b37977b1051', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'a6f807d2034d55e5218c01375c4ff36564924bfb', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'f6001d6801bee97c03121d57742a595c8d5d5bd7', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9365561d47d72e0153bb743f4fdf5ca7a1b5dcc0', htmlFor: "name" }, "Name"), h("input", { key: 'c93de873370a1123441a33d27c53c954bcc5f5ce', 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: '9fc1fb39f7c582a069876642cc17678303c7d72b', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: '947421a1e826b4cc59a5d92cf83d25726257c871', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: 'fd239a8b7c9d7b6f833acc794c4ce44d884d240f', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '04b2e4bfdb8590bcb4bc4c822780bffd126488fa', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'fa363e0adf2d73c0f22ce90588504ec3b8b6cb6f', htmlFor: "name" }, "Name"), h("input", { key: 'b3c9ff73ea9b1e1e1c059287f3876935fc845699', 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: 'a804450dd5c59ee847f736861e0eeb6616476081', 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.css

@@ -23,7 +23,7 @@ p.content {
 
 a {
   color: var(--label-color);
-  max-width: var(--prose-lg);
+  max-width: min(100%, var(--prose-lg));
   text-decoration: underline;
   overflow: hidden;
   white-space: nowrap;

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: '0a794cc8287b13f163a813dc6a4f87b2f00e028b', lazy: true, uri: this.uri }, h("p", { key: 'b7a44482a82cd69228f144b04e9ec20b84410339', class: "content" }, h("a", { key: '0d218d4d5c1991c767b66f0d37c5476038e7a0fb', href: this.uri, onClick: e => {
+        return (h("pos-resource", { key: 'f41ba8c5430e96e47d176b4e85633bad4ee9b0a7', lazy: true, uri: this.uri }, h("p", { key: '0a92fa1df51d78c0e8d1f6d47af078cb0cbe264a', class: "content" }, h("a", { key: '27c623707a5cbc6618d5a70e0eacc2fd5552d7dd', href: this.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.uri);
-            } }, h("pos-label", { key: 'd04048986a7a4da138608f187a2f27e6313d9a6e' })), h("span", { key: '53a05023aa2fec4725e1d7e59acee9888476ecac', class: "url" }, new URL(this.uri).host), h("pos-description", { key: 'a73de2d208b684a9f555cda312e94df4282afba0' }))));
+            } }, h("pos-label", { key: 'e8cb96334502e2f2fad85c35096baa3a6cc890cb' })), h("span", { key: '0f0feeee5e65f982d54cd474c42ed14759d2e834', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '87a7cdf2c0e1f523ecdbed2e786d948f267ad303' }))));
     }
     static get is() { return "pos-rich-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,6 @@
   margin-left: 0.5rem;
 }
 
-pos-navigation-bar {
+pos-navigation {
   flex-grow: 1;
 }

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: '221db70a52ce7ebc7e9c171142dcf94f252fa985' });
+        return h("slot", { key: 'e3d70ed25e70d8273a2c820bb92fec69b7f70f25' });
     }
     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: '7a548735e2a0478fa1e63e2a880ca61f0f43d91c' }, h("input", { key: '9549691026f4bf42a3048f2af3a78bd71536b160', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'adfd77a001389d6cc092e3b054ef12e45d562d54', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'c9529ceaf82d8aa1a3f73532e8ca0f99aa3fc4e6' }, h("input", { key: '2de0e74b99ae5dd7aa6d7bdea4289b9e25b7629e', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '92e240a12c0d733c15b8daf971e3026a1d535561', 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,23 @@
+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;
+}

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"]}