@pod-os/contacts 0.0.2-rc.40ff2aa.0

package/dist/esm/pos-add-new-thing_7.entry.js

@@ -0,0 +1,1146 @@
+import { r as registerInstance, h, e as Host, c as createEvent } from './index-_4aU9NfA.js';
+import './chunk.ZGGPD2XJ-BfEMOYfC.js';
+import { i as i$1, x, c as component_styles_default, S as SlIcon, _ as __decorateClass, r, n as n$1, a as ShoelaceElement, w as watch } from './chunk.YHLNUJ7P-CGClYowr.js';
+import { e as e$1 } from './class-map-CuxcTjQ5.js';
+import { o as o$1 } from './if-defined-1V1UljxT.js';
+import { e, s as setDefaultAnimation, a as stopAnimations, g as getAnimation, b as animateTo, w as waitForEvent } from './chunk.5JY5FUCG-BOo64hgz.js';
+import { H as HasSlotController } from './chunk.HVTXQL7M-D4GE2ek9.js';
+import { L as LocalizeController } from './chunk.6CTB5ZDJ-BnGEOH37.js';
+import { c as cjsExports } from './index-vFMstSdt.js';
+import { s as store } from './session-dNJIwSOx.js';
+import { s as subscribePodOs } from './PodOsAware-jlzl8vRd.js';
+import { c as createRouter } from './index-DlhTPhZx.js';
+import { s as subscribeResource } from './ResourceAware-BW_CkW1K.js';
+
+const posAddNewThingCss = () => `:host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--size-10);height:var(--size-10);background-color:var(--pos-primary-color);color:var(--pos-primary-text-color);font-size:var(--scale-6);border-radius:var(--radius-xs);padding:var(--size-2)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}`;
+
+const PosAddNewThing = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    openDialog() {
+        this.dialog.showModal();
+    }
+    render() {
+        return (h(Host, { key: '9a60547270fcc455679acdfe6de75da57e513b1f' }, h("button", { key: '32a8ba00ef511587024c843663e281e2b6930c19', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("sl-icon", { key: '6faf99cef999b441410770b0509f5a8d6a10f7e9', name: "plus-circle" })), h("pos-dialog", { key: 'f6cd827c19d3dfe33500f03e561f399e11d728ce', ref: el => (this.dialog = el) }, h("span", { key: 'ff40b8f28a349a1ad6db11e2d427d74ea5fbd300', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: 'e48257160d78d025e6213bd61c4953261d4829c2', slot: "content", referenceUri: this.referenceUri }))));
+    }
+};
+PosAddNewThing.style = posAddNewThingCss();
+
+// src/internal/closeActiveElement.ts
+var blurActiveElement = (elm) => {
+  var _a;
+  const { activeElement } = document;
+  if (activeElement && elm.contains(activeElement)) {
+    (_a = document.activeElement) == null ? void 0 : _a.blur();
+  }
+};
+
+// src/components/icon-button/icon-button.styles.ts
+var icon_button_styles_default = i$1`
+  :host {
+    display: inline-block;
+    color: var(--sl-color-neutral-600);
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--sl-border-radius-medium);
+    font-size: inherit;
+    color: inherit;
+    padding: var(--sl-spacing-x-small);
+    cursor: pointer;
+    transition: var(--sl-transition-x-fast) color;
+    -webkit-appearance: none;
+  }
+
+  .icon-button:hover:not(.icon-button--disabled),
+  .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: var(--sl-color-primary-600);
+  }
+
+  .icon-button:active:not(.icon-button--disabled) {
+    color: var(--sl-color-primary-700);
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon-button:focus-visible {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+  }
+`;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
+
+var SlIconButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasFocus = false;
+    this.label = "";
+    this.disabled = false;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    const tag = isLink ? i`a` : i`button`;
+    return u`
+      <${tag}
+        part="base"
+        class=${e$1({
+      "icon-button": true,
+      "icon-button--disabled": !isLink && this.disabled,
+      "icon-button--focused": this.hasFocus
+    })}
+        ?disabled=${o$1(isLink ? void 0 : this.disabled)}
+        type=${o$1(isLink ? void 0 : "button")}
+        href=${o$1(isLink ? this.href : void 0)}
+        target=${o$1(isLink ? this.target : void 0)}
+        download=${o$1(isLink ? this.download : void 0)}
+        rel=${o$1(isLink && this.target ? "noreferrer noopener" : void 0)}
+        role=${o$1(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label="${this.label}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <sl-icon
+          class="icon-button__icon"
+          name=${o$1(this.name)}
+          library=${o$1(this.library)}
+          src=${o$1(this.src)}
+          aria-hidden="true"
+        ></sl-icon>
+      </${tag}>
+    `;
+  }
+};
+SlIconButton.styles = [component_styles_default, icon_button_styles_default];
+SlIconButton.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  e(".icon-button")
+], SlIconButton.prototype, "button", 2);
+__decorateClass([
+  r()
+], SlIconButton.prototype, "hasFocus", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "name", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "library", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "src", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "href", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "target", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "download", 2);
+__decorateClass([
+  n$1()
+], SlIconButton.prototype, "label", 2);
+__decorateClass([
+  n$1({ type: Boolean, reflect: true })
+], SlIconButton.prototype, "disabled", 2);
+
+// src/components/alert/alert.styles.ts
+var alert_styles_default = i$1`
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    background-color: var(--sl-panel-background-color);
+    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+    border-top-width: calc(var(--sl-panel-border-width) * 3);
+    border-radius: var(--sl-border-radius-medium);
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: 1.6;
+    color: var(--sl-color-neutral-700);
+    margin: inherit;
+    overflow: hidden;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-large);
+    padding-inline-start: var(--sl-spacing-large);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
+  }
+
+  .alert--primary {
+    border-top-color: var(--sl-color-primary-600);
+  }
+
+  .alert--primary .alert__icon {
+    color: var(--sl-color-primary-600);
+  }
+
+  .alert--success {
+    border-top-color: var(--sl-color-success-600);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral {
+    border-top-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--neutral .alert__icon {
+    color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning {
+    border-top-color: var(--sl-color-warning-600);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger {
+    border-top-color: var(--sl-color-danger-600);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--sl-color-danger-600);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--sl-spacing-large);
+    overflow: hidden;
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-medium);
+    margin-inline-end: var(--sl-spacing-medium);
+    align-self: center;
+  }
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--sl-panel-border-width) * 3);
+    background-color: var(--sl-panel-border-color);
+    display: flex;
+  }
+
+  .alert__countdown--ltr {
+    justify-content: flex-end;
+  }
+
+  .alert__countdown .alert__countdown-elapsed {
+    height: 100%;
+    width: 0;
+  }
+
+  .alert--primary .alert__countdown-elapsed {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--sl-color-danger-600);
+  }
+
+  .alert__timer {
+    display: none;
+  }
+`;
+
+var _SlAlert = class _SlAlert extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = false;
+    this.variant = "primary";
+    this.duration = Infinity;
+    this.remainingTime = this.duration;
+  }
+  static get toastStack() {
+    if (!this.currentToastStack) {
+      this.currentToastStack = Object.assign(document.createElement("div"), {
+        className: "sl-toast-stack"
+      });
+    }
+    return this.currentToastStack;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    this.handleCountdownChange();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+      this.remainingTime = this.duration;
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+    }
+  }
+  pauseAutoHide() {
+    var _a;
+    (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    var _a;
+    if (this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+    }
+  }
+  handleCountdownChange() {
+    if (this.open && this.duration < Infinity && this.countdown) {
+      const { countdownElement } = this;
+      const start = "100%";
+      const end = "0";
+      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {
+        duration: this.duration,
+        easing: "linear"
+      });
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("sl-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("sl-after-show");
+    } else {
+      blurActiveElement(this);
+      this.emit("sl-hide");
+      clearTimeout(this.autoHideTimeout);
+      clearInterval(this.remainingTimeInterval);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("sl-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      this.handleCountdownChange();
+      if (_SlAlert.toastStack.parentElement === null) {
+        document.body.append(_SlAlert.toastStack);
+      }
+      _SlAlert.toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.show();
+      });
+      this.addEventListener(
+        "sl-after-hide",
+        () => {
+          _SlAlert.toastStack.removeChild(this);
+          resolve();
+          if (_SlAlert.toastStack.querySelector("sl-alert") === null) {
+            _SlAlert.toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e$1({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-countdown": !!this.countdown,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger"
+    })}
+        role="alert"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mouseenter=${this.pauseAutoHide}
+        @mouseleave=${this.resumeAutoHide}
+      >
+        <div part="icon" class="alert__icon">
+          <slot name="icon"></slot>
+        </div>
+
+        <div part="message" class="alert__message" aria-live="polite">
+          <slot></slot>
+        </div>
+
+        ${this.closable ? x`
+              <sl-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></sl-icon-button>
+            ` : ""}
+
+        <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+        ${this.countdown ? x`
+              <div
+                class=${e$1({
+      alert__countdown: true,
+      "alert__countdown--ltr": this.countdown === "ltr"
+    })}
+              >
+                <div class="alert__countdown-elapsed"></div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+_SlAlert.styles = [component_styles_default, alert_styles_default];
+_SlAlert.dependencies = { "sl-icon-button": SlIconButton };
+__decorateClass([
+  e('[part~="base"]')
+], _SlAlert.prototype, "base", 2);
+__decorateClass([
+  e(".alert__countdown-elapsed")
+], _SlAlert.prototype, "countdownElement", 2);
+__decorateClass([
+  n$1({ type: Boolean, reflect: true })
+], _SlAlert.prototype, "open", 2);
+__decorateClass([
+  n$1({ type: Boolean, reflect: true })
+], _SlAlert.prototype, "closable", 2);
+__decorateClass([
+  n$1({ reflect: true })
+], _SlAlert.prototype, "variant", 2);
+__decorateClass([
+  n$1({ type: Number })
+], _SlAlert.prototype, "duration", 2);
+__decorateClass([
+  n$1({ type: String, reflect: true })
+], _SlAlert.prototype, "countdown", 2);
+__decorateClass([
+  r()
+], _SlAlert.prototype, "remainingTime", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], _SlAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], _SlAlert.prototype, "handleDurationChange", 1);
+var SlAlert = _SlAlert;
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+
+SlAlert.define("sl-alert");
+
+const PosErrorToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    async unhandledRejection(event) {
+        event.stopPropagation();
+        console.error('unhandled promise rejection', event);
+        this.title = 'Unhandled promise rejection';
+        this.message = event.reason.toString();
+    }
+    async catchError(event) {
+        event.stopPropagation();
+        console.error(event.detail);
+        if (event.detail instanceof Error) {
+            this.title = 'Error';
+            this.message = event.detail.message;
+        }
+        else {
+            const problem = event.detail;
+            this.title = problem.title;
+            this.message = problem.detail;
+        }
+        await this.alert.toast();
+    }
+    render() {
+        return (h(Host, { key: 'a2c2db82c085541f2912861ff715633c1a50872e' }, h("sl-alert", { key: 'af7e56dacdd8c2cdacfe4eb5020d59e8111e9947', ref: el => (this.alert = el), variant: "danger", duration: "10000", closable: true }, h("sl-icon", { key: 'f50b8c321b0844c2f3cac2886f23b758e18500b1', slot: "icon", name: "exclamation-octagon" }), h("strong", { key: '0f7c7880b08366a16baaa1385df12614d6a6cddf' }, this.title), h("br", { key: '5660dbabfa1162590b386087231301ee3920a415' }), this.message), h("slot", { key: '671026ea140044dfbeb63dee5c08a65591464668' })));
+    }
+};
+
+const PosInternalRouter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uri = 'pod-os:dashboard';
+    }
+    render() {
+        return this.uri === 'pod-os:settings' ? (h("pos-app-settings", null)) : (h("pos-app-dashboard", null));
+    }
+};
+
+const posNavigationCss = () => `: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}}`;
+
+const PosNavigation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.subscribePodOs = createEvent(this, "pod-os:init", 7);
+        this.linkEmitter = createEvent(this, "pod-os:link", 7);
+        /**
+         * Initial value of the navigation bar
+         */
+        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 cjsExports.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();
+        store.onChange('isLoggedIn', async (isLoggedIn) => {
+            if (isLoggedIn) {
+                await this.buildSearchIndex();
+            }
+            else {
+                this.clearSearchIndex();
+            }
+        });
+        this.debouncedSearch = this.changeEvents.pipe(cjsExports.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(store.state.profile);
+    }
+    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.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) {
+        event.stopPropagation();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeDialog();
+        }
+        else if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);
+        }
+        else if (ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+        }
+    }
+    search() {
+        if (this.searchIndex) {
+            this.suggestions = this.inputValue ? this.searchIndex.search(this.inputValue) : [];
+        }
+    }
+    onSubmit() {
+        if (this.suggestions && this.selectedIndex > -1) {
+            this.linkEmitter.emit(this.suggestions[this.selectedIndex].ref);
+        }
+        else {
+            this.linkEmitter.emit(this.inputValue);
+        }
+    }
+    render() {
+        return (h("nav", { key: 'd5ad4841674cf172e9401a63fc50e58900ca5b1f' }, h("search", { key: '8daf86774c49234d10637160fd983681ac483b44' }, h("pos-navigation-bar", { key: '200137643dbc0aa1f120c231dc70a0d3f71b596a', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'f2fb1d3e4a38d17efb6bd80ca791e8a30fafab66', ref: el => (this.dialogRef = el) }, h("form", { key: 'e54698d8fb968a5ee6007cc4d5644fec36bf74f3', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '633a4030c6296b5c94e2661bd73168afc1e04438', 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 watchers() { return {
+        "uri": [{
+                "updateResource": 0
+            }],
+        "os": [{
+                "updateResource": 0
+            }]
+    }; }
+};
+PosNavigation.style = posNavigationCss();
+
+const posRouterCss = () => `.toolbar{display:flex;flex-direction:row;gap:0;align-items:center;margin-left:0.5rem}pos-navigation{flex-grow:1}`;
+
+const Router = createRouter();
+const PosRouter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.routeChanged = createEvent(this, "pod-os:route-changed", 7);
+        /**
+         * The mode defines what default URI will be used, if no URI param is given
+         *
+         * - standalone: reroute to pod-os:dashboard
+         * - pod: reroute to the URI that is shown in the actual browser
+         */
+        this.mode = 'standalone';
+    }
+    linkClicked(e) {
+        this.navigate(e.detail);
+    }
+    sessionRestored(e) {
+        Router.push(e.detail.url);
+    }
+    componentWillLoad() {
+        this.updateUri();
+        Router.onChange('url', () => {
+            this.updateUri();
+        });
+    }
+    navigate(uri) {
+        Router.push('?uri=' + encodeURIComponent(uri));
+    }
+    updateUri() {
+        this.uri =
+            new URLSearchParams(window.location.search).get('uri') ||
+                (this.mode === 'standalone' ? 'pod-os:dashboard' : window.location.href);
+        this.routeChanged.emit(this.uri);
+    }
+    render() {
+        return h("slot", { key: '8b09de3dbbd253665cd541b9f264b0dcdc774354' });
+    }
+};
+PosRouter.style = posRouterCss();
+
+const AvailableTools = {
+    Generic: {
+        element: 'pos-app-generic',
+        label: 'Data',
+        icon: 'list-ul',
+        types: [], // since this is included everywhere, it does not need to specify types
+    },
+    Attachments: {
+        element: 'pos-tool-attachments',
+        label: 'Attach',
+        icon: 'paperclip',
+        types: [], // since this is included everywhere, it does not need to specify types
+    },
+    RdfDocument: {
+        element: 'pos-app-rdf-document',
+        label: 'Things',
+        icon: 'diagram-2',
+        types: [
+            {
+                uri: 'http://www.w3.org/2007/ont/link#RDFDocument',
+                priority: 20,
+            },
+        ],
+    },
+    DocumentViewer: {
+        element: 'pos-app-document-viewer',
+        label: 'Doc',
+        icon: 'file-text',
+        types: [
+            {
+                uri: mimeType('application/pdf'),
+                priority: 30,
+            },
+            {
+                uri: 'http://www.w3.org/2007/ont/link#Document',
+                priority: 10,
+            },
+        ],
+    },
+    ImageViewer: {
+        element: 'pos-app-image-viewer',
+        label: 'Pic',
+        icon: 'file-image',
+        types: [
+            {
+                uri: 'http://purl.org/dc/terms/Image',
+                priority: 20,
+            },
+        ],
+    },
+    LdpContainer: {
+        element: 'pos-app-ldp-container',
+        label: 'Content',
+        icon: 'folder',
+        types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],
+    },
+};
+function mimeType(mimeType) {
+    return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';
+}
+
+function selectToolsForTypes(types) {
+    const typeUris = new Set(types.map(type => type.uri));
+    return Object.values(AvailableTools)
+        .map(maxPriorityFor(typeUris))
+        .filter(onlyRelevant)
+        .toSorted(byPriority)
+        .map(it => it.tool)
+        .concat(AvailableTools.Generic)
+        .concat(AvailableTools.Attachments);
+}
+const maxPriorityFor = (typeUris) => tool => ({
+    tool,
+    priority: maxPriority(tool.types, typeUris),
+});
+function maxPriority(types, typeUris) {
+    return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);
+}
+const onlyRelevant = (it) => it.priority > 0;
+const byPriority = (a, b) => b.priority - a.priority;
+
+const posTypeRouterCss = () => `section{display:flex;flex-direction:row}.tools{flex-grow:1;&.transition{position:relative;.tool{position:absolute}}}.tool{top:0;right:0;left:0;bottom:0;&.visible{animation:fadeIn 300ms ease-in}&.hidden{animation:fadeOut 300ms ease-in}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@media (max-width: 640px){section{--toolbar-size:var(--size-16);flex-direction:column-reverse;padding-bottom:var(--toolbar-size);pos-tool-select{--button-size:var(--toolbar-size)}}}`;
+
+const PosTypeRouter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+        this.transitioning = false;
+        this.receiveResource = (resource) => {
+            var _a;
+            const types = resource.types();
+            this.availableTools = selectToolsForTypes(types);
+            this.currentTool = (_a = this.availableTools.find(it => it.element === this.initialTool)) !== null && _a !== void 0 ? _a : this.availableTools[0];
+        };
+    }
+    componentWillLoad() {
+        subscribeResource(this);
+        const urlParams = new URLSearchParams(window.location.search);
+        const toolParam = urlParams.get('tool');
+        if (toolParam) {
+            this.initialTool = toolParam;
+        }
+    }
+    handleToolSelected(event) {
+        this.oldTool = this.currentTool;
+        this.currentTool = event.detail;
+        this.transitioning = true;
+        const url = new URL(window.location.href);
+        url.searchParams.set('tool', event.detail.element);
+        window.history.replaceState({}, '', url.toString());
+    }
+    render() {
+        return this.availableTools ? this.renderApp() : null;
+    }
+    renderApp() {
+        var _a;
+        const SelectedTool = this.currentTool.element;
+        const OldTool = (_a = this.oldTool) === null || _a === void 0 ? void 0 : _a.element;
+        return (h("section", null, h("pos-tool-select", { selected: this.currentTool, tools: this.availableTools }), h("div", { class: { tools: true, transition: this.transitioning }, onAnimationEnd: () => this.removeOldTool() }, OldTool && h(OldTool, { class: "tool hidden" }), h(SelectedTool, { class: "tool visible" }))));
+    }
+    removeOldTool() {
+        this.oldTool = null;
+        this.transitioning = false;
+    }
+};
+PosTypeRouter.style = posTypeRouterCss();
+
+// src/components/avatar/avatar.styles.ts
+var avatar_styles_default = i$1`
+  :host {
+    display: inline-block;
+
+    --size: 3rem;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--sl-color-neutral-400);
+    font-family: var(--sl-font-sans);
+    font-size: calc(var(--size) * 0.5);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-0);
+    user-select: none;
+    -webkit-user-select: none;
+    vertical-align: middle;
+  }
+
+  .avatar--circle,
+  .avatar--circle .avatar__image {
+    border-radius: var(--sl-border-radius-circle);
+  }
+
+  .avatar--rounded,
+  .avatar--rounded .avatar__image {
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .avatar--square {
+    border-radius: 0;
+  }
+
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar__initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .avatar__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+  }
+`;
+
+var SlAvatar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasError = false;
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.loading = "eager";
+    this.shape = "circle";
+  }
+  handleImageChange() {
+    this.hasError = false;
+  }
+  handleImageLoadError() {
+    this.hasError = true;
+    this.emit("sl-error");
+  }
+  render() {
+    const avatarWithImage = x`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${this.handleImageLoadError}"
+      />
+    `;
+    let avatarWithoutImage = x``;
+    if (this.initials) {
+      avatarWithoutImage = x`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+    } else {
+      avatarWithoutImage = x`
+        <div part="icon" class="avatar__icon" aria-hidden="true">
+          <slot name="icon">
+            <sl-icon name="person-fill" library="system"></sl-icon>
+          </slot>
+        </div>
+      `;
+    }
+    return x`
+      <div
+        part="base"
+        class=${e$1({
+      avatar: true,
+      "avatar--circle": this.shape === "circle",
+      "avatar--rounded": this.shape === "rounded",
+      "avatar--square": this.shape === "square"
+    })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
+      </div>
+    `;
+  }
+};
+SlAvatar.styles = [component_styles_default, avatar_styles_default];
+SlAvatar.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  r()
+], SlAvatar.prototype, "hasError", 2);
+__decorateClass([
+  n$1()
+], SlAvatar.prototype, "image", 2);
+__decorateClass([
+  n$1()
+], SlAvatar.prototype, "label", 2);
+__decorateClass([
+  n$1()
+], SlAvatar.prototype, "initials", 2);
+__decorateClass([
+  n$1()
+], SlAvatar.prototype, "loading", 2);
+__decorateClass([
+  n$1({ reflect: true })
+], SlAvatar.prototype, "shape", 2);
+__decorateClass([
+  watch("image")
+], SlAvatar.prototype, "handleImageChange", 1);
+
+SlAvatar.define("sl-avatar");
+
+// src/components/divider/divider.styles.ts
+var divider_styles_default = i$1`
+  :host {
+    --color: var(--sl-panel-border-color);
+    --width: var(--sl-panel-border-width);
+    --spacing: var(--sl-spacing-medium);
+  }
+
+  :host(:not([vertical])) {
+    display: block;
+    border-top: solid var(--width) var(--color);
+    margin: var(--spacing) 0;
+  }
+
+  :host([vertical]) {
+    display: inline-block;
+    height: 100%;
+    border-left: solid var(--width) var(--color);
+    margin: 0 var(--spacing);
+  }
+`;
+
+var SlDivider = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+SlDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  n$1({ type: Boolean, reflect: true })
+], SlDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], SlDivider.prototype, "handleVerticalChange", 1);
+
+SlDivider.define("sl-divider");
+
+const posUserMenuCss = () => `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}`;
+
+const PosUserMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.logout = createEvent(this, "pod-os:logout", 7);
+        this.link = createEvent(this, "pod-os:link", 7);
+    }
+    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", "aria-label": "User menu" }, h("pos-picture", { "no-upload": true }, 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")))));
+    }
+};
+PosUserMenu.style = posUserMenuCss();
+
+export { PosAddNewThing as pos_add_new_thing, PosErrorToast as pos_error_toast, PosInternalRouter as pos_internal_router, PosNavigation as pos_navigation, PosRouter as pos_router, PosTypeRouter as pos_type_router, PosUserMenu as pos_user_menu };