@pod-os/elements 0.30.2-rc.0b72955.0 → 0.30.2-rc.1b2b855.0

package/dist/cjs/pos-predicate.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-45dd971c.js');
+
+const posPredicateCss = ":host{--text-color:var(--pos-primary-color);font-family:var(--font-sans)}button{line-height:var(--scale-0);font-family:inherit;margin:0;padding:0;display:flex;background:none;border:none;cursor:pointer}button,a{color:var(--text-color);font-weight:var(--weight-light);line-height:var(--scale-0);font-size:var(--scale-0);font-family:inherit}.container{display:flex;gap:var(--size-1);flex-direction:row;align-items:center;line-height:var(--scale-0)}";
+const PosPredicateStyle0 = posPredicateCss;
+
+const PosPredicate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expanded = false;
+    }
+    render() {
+        if (this.expanded) {
+            return (index.h("div", { class: "container" }, index.h("a", { href: this.uri }, this.uri), index.h("button", { "aria-label": `collapse URI to ${this.label}`, onClick: () => (this.expanded = false) }, index.h("ion-icon", { name: "chevron-back-circle-outline" }))));
+        }
+        else {
+            return (index.h("button", { onClick: () => (this.expanded = true), title: this.uri }, this.label));
+        }
+    }
+};
+PosPredicate.style = PosPredicateStyle0;
+
+exports.pos_predicate = PosPredicate;
+
+//# sourceMappingURL=pos-predicate.cjs.entry.js.map

package/dist/cjs/pos-predicate.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pos-predicate.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gcAAgc,CAAC;AACzd,2BAAe,eAAe;;MCYjB,YAAY;IALzB;;QAmBE,aAAQ,GAAY,KAAK,CAAC;KAoB3B;IAlBC,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,eAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,EACjCA,kCAAoB,mBAAmB,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IACzFA,sBAAU,IAAI,EAAC,6BAA6B,GAAY,CACjD,CACL,EACN;SACH;aAAM;YACL,QACEA,oBAAQ,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,IAC3D,IAAI,CAAC,KAAK,CACJ,EACT;SACH;KACF;;;;;;","names":["h"],"sources":["src/components/pos-predicate/pos-predicate.css?tag=pos-predicate&encapsulation=shadow","src/components/pos-predicate/pos-predicate.tsx"],"sourcesContent":[":host {\n  --text-color: var(--pos-primary-color);\n  font-family: var(--font-sans);\n}\n\nbutton {\n  line-height: var(--scale-0);\n  font-family: inherit;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\nbutton,\na {\n  color: var(--text-color);\n  font-weight: var(--weight-light);\n  line-height: var(--scale-0);\n  font-size: var(--scale-0);\n  font-family: inherit;\n}\n\n.container {\n  display: flex;\n  gap: var(--size-1);\n  flex-direction: row;\n  align-items: center;\n  line-height: var(--scale-0);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\n\n/**\n * Displays an RDF term (predicate) in a human-friendly way, using a provided label. The user can still expand the label\n * to the full URI to see the actual predicate.\n *\n * This will only show the predicate itself, not any value. If you want to display a value, use [pos-value](../pos-value) instead.\n */\n@Component({\n  tag: 'pos-predicate',\n  shadow: true,\n  styleUrl: './pos-predicate.css',\n})\nexport class PosPredicate {\n  /**\n   * The full URI of the predicate\n   */\n  @Prop()\n  uri: string;\n\n  /**\n   * The human-readable label to show for this predicate\n   */\n  @Prop()\n  label: string;\n\n  @State()\n  expanded: boolean = false;\n\n  render() {\n    if (this.expanded) {\n      return (\n        <div class=\"container\">\n          <a href={this.uri}>{this.uri}</a>\n          <button aria-label={`collapse URI to ${this.label}`} onClick={() => (this.expanded = false)}>\n            <ion-icon name=\"chevron-back-circle-outline\"></ion-icon>\n          </button>\n        </div>\n      );\n    } else {\n      return (\n        <button onClick={() => (this.expanded = true)} title={this.uri}>\n          {this.label}\n        </button>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/collection/apps/pos-app-document-viewer/pos-app-document-viewer.js

@@ -13,7 +13,7 @@ export class PosAppDocumentViewer {
         if (!this.resource) {
             return null;
         }
-        return (h(Host, null, h("section", null, h("pos-document", { src: this.resource.uri })), h("section", null, h("article", null, h("header", null, h("h1", null, h("pos-label", null)), h("pos-type-badges", null)), h("pos-literals", null)))));
+        return (h(Host, null, h("section", null, h("pos-document", { src: this.resource.uri }))));
     }
     static get is() { return "pos-app-document-viewer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/apps/pos-app-document-viewer/pos-app-document-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-document-viewer.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAOzF,MAAM,OAAO,oBAAoB;IALjC;QAcE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KA0BH;IAhCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH;gBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC;YACV;gBACE;oBACE;wBACE;4BACE,oBAAa,CACV;wBACL,0BAAmB,CACZ;oBACT,uBAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\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    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-app-document-viewer.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAOzF,MAAM,OAAO,oBAAoB;IALjC;QAcE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KAeH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH;gBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\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    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/collection-manifest.json

@@ -28,6 +28,7 @@
     "components/pos-login/pos-login.js",
     "components/pos-login-form/pos-login-form.js",
     "components/pos-make-findable/pos-make-findable.js",
+    "components/pos-markdown-document/pos-markdown-document.js",
     "components/pos-navigation/pos-navigation.js",
     "components/pos-navigation/bar/pos-navigation-bar.js",
     "components/pos-new-thing-form/pos-new-thing-form.js",

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

@@ -18,7 +18,7 @@ export class PosDocument {
             const file = await this.os.fetchFile(this.src);
             this.resourceLoadedEmitter.emit(this.src);
             if (file.blob()) {
-                this.dataUri = URL.createObjectURL(file.blob());
+                this.file = file;
                 this.error = null;
             }
             else {
@@ -42,7 +42,12 @@ export class PosDocument {
         if (this.brokenFile) {
             return h(BrokenFile, { file: this.brokenFile });
         }
-        return h("iframe", { src: this.dataUri });
+        if (this.file.blob().type === 'text/markdown') {
+            return h("pos-markdown-document", { file: this.file });
+        }
+        else {
+            return h("iframe", { src: URL.createObjectURL(this.file.blob()) });
+        }
     }
     static get is() { return "pos-document"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +106,7 @@ export class PosDocument {
     static get states() {
         return {
             "os": {},
-            "dataUri": {},
+            "file": {},
             "brokenFile": {},
             "error": {},
             "loading": {}

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

@@ -1 +1 @@
-{"version":3,"file":"pos-document.js","sourceRoot":"","sources":["../../../../src/components/pos-document/pos-document.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAOvD,MAAM,OAAO,WAAW;IALxB;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAkCH;IAzCC,iBAAiB;QACf,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAQD,KAAK,CAAC,SAAS;QACb,IAAI,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;YAC3C,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QACnB,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;QACvD,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;QAC/C,CAAC;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;IAC9C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"]}
+{"version":3,"file":"pos-document.js","sourceRoot":"","sources":["../../../../src/components/pos-document/pos-document.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAOvD,MAAM,OAAO,WAAW;IALxB;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAsCH;IA7CC,iBAAiB;QACf,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAQD,KAAK,CAAC,SAAS;QACb,IAAI,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;YAC3C,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QACnB,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;QACvD,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;YAC9C,OAAO,6BAAuB,IAAI,EAAE,IAAI,CAAC,IAAI,GAA0B,CAAC;QAC1E,CAAC;aAAM,CAAC;YACN,OAAO,cAAQ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAW,CAAC;QACvE,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS, BrokenFile as BrokenFileData, SolidFile } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private file: SolidFile;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.file = file;\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    if (this.file.blob().type === 'text/markdown') {\n      return <pos-markdown-document file={this.file}></pos-markdown-document>;\n    } else {\n      return <iframe src={URL.createObjectURL(this.file.blob())}></iframe>;\n    }\n  }\n}\n"]}

package/dist/collection/components/pos-markdown-document/pos-markdown-document.css

@@ -0,0 +1,3 @@
+article {
+  line-height: 1.5;
+}

package/dist/collection/components/pos-markdown-document/pos-markdown-document.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+import { marked, Renderer } from "marked";
+import { sanitize } from "./sanitize";
+export class PosMarkdownDocument {
+    async componentWillLoad() {
+        const markdown = await this.file.blob().text();
+        const renderer = new Renderer();
+        renderer.link = ({ href, text }) => {
+            const url = new URL(href, this.file.url);
+            return `<pos-rich-link uri="${url}">${text}</pos-rich-link>`;
+        };
+        renderer.image = ({ href, title, text }) => {
+            const titleAttr = title ? ` title="${title}"` : '';
+            const url = new URL(href, this.file.url);
+            return `<pos-image src="${url}" alt="${text}" ${titleAttr}>`;
+        };
+        marked.setOptions({ renderer });
+        const parsed = await marked(markdown);
+        this.sanitizedHtml = sanitize(parsed);
+    }
+    render() {
+        return h("article", { key: 'c02b19957db7f953916103f8a92a1c7c82f28014', innerHTML: this.sanitizedHtml.value });
+    }
+    static get is() { return "pos-markdown-document"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-markdown-document.css", "../../apps/styles/article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-markdown-document.css", "../../apps/styles/article-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "file": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SolidFile",
+                    "resolved": "SolidFile",
+                    "references": {
+                        "SolidFile": {
+                            "location": "import",
+                            "path": "@pod-os/core",
+                            "id": "../core/types/index.d.ts::SolidFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sanitizedHtml": {}
+        };
+    }
+}
+//# sourceMappingURL=pos-markdown-document.js.map

package/dist/collection/components/pos-markdown-document/pos-markdown-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pos-markdown-document.js","sourceRoot":"","sources":["../../../../src/components/pos-markdown-document/pos-markdown-document.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAOrD,MAAM,OAAO,mBAAmB;IAO9B,KAAK,CAAC,iBAAiB;QACrB,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;QAE/C,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAEhC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;YACjC,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,uBAAuB,GAAG,KAAK,IAAI,kBAAkB,CAAC;QAC/D,CAAC,CAAC;QAEF,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;YACzC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACnD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,mBAAmB,GAAG,UAAU,IAAI,KAAK,SAAS,GAAG,CAAC;QAC/D,CAAC,CAAC;QAEF,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,gEAAS,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAY,CAAC;IAClE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { SolidFile } from '@pod-os/core';\nimport { Component, h, Prop, State } from '@stencil/core';\n\nimport { marked, Renderer } from 'marked';\nimport { sanitize, SanitizedHtml } from './sanitize';\n\n@Component({\n  tag: 'pos-markdown-document',\n  styleUrls: ['pos-markdown-document.css', '../../apps/styles/article-card.css'],\n  shadow: true,\n})\nexport class PosMarkdownDocument {\n  @Prop()\n  file: SolidFile;\n\n  @State()\n  private sanitizedHtml: SanitizedHtml;\n\n  async componentWillLoad() {\n    const markdown = await this.file.blob().text();\n\n    const renderer = new Renderer();\n\n    renderer.link = ({ href, text }) => {\n      const url = new URL(href, this.file.url);\n      return `<pos-rich-link uri=\"${url}\">${text}</pos-rich-link>`;\n    };\n\n    renderer.image = ({ href, title, text }) => {\n      const titleAttr = title ? ` title=\"${title}\"` : '';\n      const url = new URL(href, this.file.url);\n      return `<pos-image src=\"${url}\" alt=\"${text}\" ${titleAttr}>`;\n    };\n\n    marked.setOptions({ renderer });\n    const parsed = await marked(markdown);\n    this.sanitizedHtml = sanitize(parsed);\n  }\n\n  render() {\n    return <article innerHTML={this.sanitizedHtml.value}></article>;\n  }\n}\n"]}

package/dist/collection/components/pos-markdown-document/sanitize.js

@@ -0,0 +1,10 @@
+import DomPurify from "dompurify";
+export function sanitize(html) {
+    return {
+        value: DomPurify.sanitize(html, {
+            ADD_TAGS: ['pos-rich-link', 'pos-image'],
+            ADD_ATTR: ['uri'],
+        }),
+    };
+}
+//# sourceMappingURL=sanitize.js.map

package/dist/collection/components/pos-markdown-document/sanitize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.js","sourceRoot":"","sources":["../../../../src/components/pos-markdown-document/sanitize.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAMlC,MAAM,UAAU,QAAQ,CAAC,IAAY;IACnC,OAAO;QACL,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE;YAC9B,QAAQ,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC;YACxC,QAAQ,EAAE,CAAC,KAAK,CAAC;SAClB,CAAC;KACH,CAAC;AACJ,CAAC","sourcesContent":["import DomPurify from 'dompurify';\n\nexport interface SanitizedHtml {\n  value: string;\n}\n\nexport function sanitize(html: string): SanitizedHtml {\n  return {\n    value: DomPurify.sanitize(html, {\n      ADD_TAGS: ['pos-rich-link', 'pos-image'],\n      ADD_ATTR: ['uri'],\n    }),\n  };\n}\n"]}

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: 'd8b48cc6908244bb35139ead157687f1a6f05bd7', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '215e525705b27a7a30de2f32a1bc57aba72652c2', uri: this.current.uri }), h("button", { key: '55b79e62adac3f10e8b9f5a514c5d4191af251d9', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '7b1a9ebe7fb3c90ac3694826f3202ba4617925cb' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h("section", { key: '9f6287fbf17dcfb8afce157379e798b67ac23e10', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '08a1e2bb449513ed6565437b701d6f63fe0ef923', uri: this.current.uri }), h("button", { key: 'd4f55f3ad06100545279da8336f78099dcb9bedc', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: 'bdc0906378e431e6ef0fde16da45e190f5511d14' }, 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: '75fef6f1c6fd945150ebb4123a2cce80537c46e1' }, h("search", { key: 'eb81710c97b1edcc9295050585e14b505cc4e9ca' }, h("pos-navigation-bar", { key: '5566254cee17f0ebc923b61f08d0765f2e51db08', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'bed472296c931b2409094b9d3d5ca875b262b4b2', ref: el => (this.dialogRef = el) }, h("form", { key: '1bfbb8191a04fc215da7250ef533f8c7cb65fca9', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '532bdbabb64164b879d60e5f7f944dc79eebeb2b', 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: 'cf1cd48ea2bf1658531ca2f5823f4324566cb310' }, h("search", { key: 'dccc4d03cb8cd754980b98a926bea8e86b269818' }, h("pos-navigation-bar", { key: '64e26ace1b35beb51be4c4ef5c09621a7975ef6f', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '56a68557d4d208f32ae04b0f8bee7c8409c4ac40', ref: el => (this.dialogRef = el) }, h("form", { key: '6eea4d79afd30134cba1a4710cd751f10c1ca753', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '292139ce8abcc567e1c467bc938c5f25aab894a0', 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: '0d52a6b85338d0353876f0fde0a7ef45e5ebe104', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6765ada99850150a6a1dc9135a6ec0c575e3066d', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '375ca79b6ffa3d363954578cf83d2eab10b0e486', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9da148cb532d236a5dc9ad73fc75e1bd2d277d17', htmlFor: "name" }, "Name"), h("input", { key: '81b5a4bf51eb403bfebfa0c9e023935ddde48194', 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: '5f4ff09818262ad875f80bce3a0f942b0428335f', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: 'd231729bb8d01ffa9e1f88d9488fa92041f33460', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '739f893b508ffe8baa0b575594af48f6f690425c', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '9973af04355cf8dec838a4217f711e4c8669dab4', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '4fac8ecca95c2e16c98c35ae92ea9b7f6bd6a94a', htmlFor: "name" }, "Name"), h("input", { key: 'c922c03e656d194c3235fb374ef90fce205f7ee7', 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: 'fb39eb6c09e67315326f13e184aab93a4ed786c6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

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: '5d39b495d0835298a50ff39ec55d83481764c376' });
+        return h("slot", { key: '21f84b363ae9820f290475d61af8e32b76aeedfb' });
     }
     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: '19fcf00d5d0b45657e304307b52249d0d387a44a' }, h("input", { key: '0ed3ff623d93a3b940a7615683aa4428e69da56f', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'cc518b371003586cf9a4df1423bf3588666b3ebd', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'b8d13c8bbbce1b43aa979d1554300ee07691ce7c' }, h("input", { key: '48ce96862c6f5ae744874681f5c8e3966cf7747a', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '2e717df5aa51a375b8cf23b97084f4788877960f', 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-type-router/availableTools.js

@@ -0,0 +1,55 @@
+export 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
+    },
+    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';
+}
+//# sourceMappingURL=availableTools.js.map

package/dist/collection/components/pos-type-router/availableTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"availableTools.js","sourceRoot":"","sources":["../../../../src/components/pos-type-router/availableTools.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAkC;IAC3D,OAAO,EAAE;QACP,OAAO,EAAE,iBAAiB;QAC1B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,EAAE,EAAE,uEAAuE;KACnF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,6CAA6C;gBAClD,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,cAAc,EAAE;QACd,OAAO,EAAE,yBAAyB;QAClC,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,QAAQ,CAAC,iBAAiB,CAAC;gBAChC,QAAQ,EAAE,EAAE;aACb;YACD;gBACE,GAAG,EAAE,0CAA0C;gBAC/C,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,gCAAgC;gBACrC,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,uBAAuB;QAChC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,oCAAoC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;KACrE;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,QAAgB;IAChC,OAAO,wCAAwC,GAAG,QAAQ,GAAG,WAAW,CAAC;AAC3E,CAAC","sourcesContent":["import { ToolConfig } from './selectToolsForTypes';\n\nexport const AvailableTools: { [key: string]: ToolConfig } = {\n  Generic: {\n    element: 'pos-app-generic',\n    label: 'Data',\n    icon: 'list-ul',\n    types: [], // since this is included everywhere, it does not need to specify types\n  },\n  RdfDocument: {\n    element: 'pos-app-rdf-document',\n    label: 'Things',\n    icon: 'diagram-2',\n    types: [\n      {\n        uri: 'http://www.w3.org/2007/ont/link#RDFDocument',\n        priority: 20,\n      },\n    ],\n  },\n  DocumentViewer: {\n    element: 'pos-app-document-viewer',\n    label: 'Doc',\n    icon: 'file-text',\n    types: [\n      {\n        uri: mimeType('application/pdf'),\n        priority: 30,\n      },\n      {\n        uri: 'http://www.w3.org/2007/ont/link#Document',\n        priority: 10,\n      },\n    ],\n  },\n  ImageViewer: {\n    element: 'pos-app-image-viewer',\n    label: 'Pic',\n    icon: 'file-image',\n    types: [\n      {\n        uri: 'http://purl.org/dc/terms/Image',\n        priority: 20,\n      },\n    ],\n  },\n  LdpContainer: {\n    element: 'pos-app-ldp-container',\n    label: 'Content',\n    icon: 'folder',\n    types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],\n  },\n};\n\nfunction mimeType(mimeType: string) {\n  return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';\n}\n"]}

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

@@ -1,57 +1,4 @@
-export 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
-    },
-    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';
-}
+import { AvailableTools } from "./availableTools";
 export function selectToolsForTypes(types) {
     const typeUris = new Set(types.map(type => type.uri));
     return Object.values(AvailableTools)

package/dist/collection/components/pos-type-router/selectToolsForTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectToolsForTypes.js","sourceRoot":"","sources":["../../../../src/components/pos-type-router/selectToolsForTypes.ts"],"names":[],"mappings":"AAqDA,MAAM,CAAC,MAAM,cAAc,GAAkC;IAC3D,OAAO,EAAE;QACP,OAAO,EAAE,iBAAiB;QAC1B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,EAAE,EAAE,uEAAuE;KACnF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,6CAA6C;gBAClD,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,cAAc,EAAE;QACd,OAAO,EAAE,yBAAyB;QAClC,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,QAAQ,CAAC,iBAAiB,CAAC;gBAChC,QAAQ,EAAE,EAAE;aACb;YACD;gBACE,GAAG,EAAE,0CAA0C;gBAC/C,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,gCAAgC;gBACrC,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,uBAAuB;QAChC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,oCAAoC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;KACrE;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,QAAgB;IAChC,OAAO,wCAAwC,GAAG,QAAQ,GAAG,WAAW,CAAC;AAC3E,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAgB;IAClD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAEtD,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACjC,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAC7B,MAAM,CAAC,YAAY,CAAC;SACpB,QAAQ,CAAC,UAAU,CAAC;SACpB,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;SAClB,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CACvD,CAAC;IACC,IAAI;IACJ,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC;CAC5C,CAAiB,CAAC;AAErB,SAAS,WAAW,CAAC,KAAqB,EAAE,QAAqB;IAC/D,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7G,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC;AAE3D,MAAM,UAAU,GAAG,CAAC,CAAe,EAAE,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC","sourcesContent":["import { RdfType } from '@pod-os/core';\n\n/**\n * Describes a tool that can be used\n */\nexport interface ToolConfig {\n  /**\n   * The HTML custom element that renders the tool\n   */\n  element: string;\n  /**\n   * A human-readable short label to identify the tool\n   */\n  label: string;\n  /**\n   * An icon to identify the tool\n   * Available values see https://shoelace.style/components/icon/#default-icons\n   */\n  icon: string;\n  /**\n   * The types that can be handled by that tool\n   */\n  types: TypePriority[];\n}\n\n/**\n * Describes how well a given RDF type can be handled\n */\ninterface TypePriority {\n  /**\n   * URI identifying the RDF type\n   */\n  uri: string;\n  /**\n   * how well that type can be handled (higher values === better fit)\n   */\n  priority: number;\n}\n\n/**\n * Describes the priority (order) that applies to a tool\n */\ninterface ToolPriority {\n  /**\n   * The tool in question\n   */\n  tool: ToolConfig;\n  /**\n   * The priority given to the tool (higher values === better fit)\n   */\n  priority: number;\n}\n\nexport const AvailableTools: { [key: string]: ToolConfig } = {\n  Generic: {\n    element: 'pos-app-generic',\n    label: 'Data',\n    icon: 'list-ul',\n    types: [], // since this is included everywhere, it does not need to specify types\n  },\n  RdfDocument: {\n    element: 'pos-app-rdf-document',\n    label: 'Things',\n    icon: 'diagram-2',\n    types: [\n      {\n        uri: 'http://www.w3.org/2007/ont/link#RDFDocument',\n        priority: 20,\n      },\n    ],\n  },\n  DocumentViewer: {\n    element: 'pos-app-document-viewer',\n    label: 'Doc',\n    icon: 'file-text',\n    types: [\n      {\n        uri: mimeType('application/pdf'),\n        priority: 30,\n      },\n      {\n        uri: 'http://www.w3.org/2007/ont/link#Document',\n        priority: 10,\n      },\n    ],\n  },\n  ImageViewer: {\n    element: 'pos-app-image-viewer',\n    label: 'Pic',\n    icon: 'file-image',\n    types: [\n      {\n        uri: 'http://purl.org/dc/terms/Image',\n        priority: 20,\n      },\n    ],\n  },\n  LdpContainer: {\n    element: 'pos-app-ldp-container',\n    label: 'Content',\n    icon: 'folder',\n    types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],\n  },\n};\n\nfunction mimeType(mimeType: string) {\n  return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';\n}\n\nexport function selectToolsForTypes(types: RdfType[]) {\n  const typeUris = new Set(types.map(type => type.uri));\n\n  return Object.values(AvailableTools)\n    .map(maxPriorityFor(typeUris))\n    .filter(onlyRelevant)\n    .toSorted(byPriority)\n    .map(it => it.tool)\n    .concat(AvailableTools.Generic);\n}\n\nconst maxPriorityFor = (typeUris: Set<string>) => tool =>\n  ({\n    tool,\n    priority: maxPriority(tool.types, typeUris),\n  }) as ToolPriority;\n\nfunction maxPriority(types: TypePriority[], typeUris: Set<string>): number {\n  return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);\n}\n\nconst onlyRelevant = (it: ToolPriority) => it.priority > 0;\n\nconst byPriority = (a: ToolPriority, b: ToolPriority) => b.priority - a.priority;\n"]}
+{"version":3,"file":"selectToolsForTypes.js","sourceRoot":"","sources":["../../../../src/components/pos-type-router/selectToolsForTypes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAqDlD,MAAM,UAAU,mBAAmB,CAAC,KAAgB;IAClD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAEtD,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACjC,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAC7B,MAAM,CAAC,YAAY,CAAC;SACpB,QAAQ,CAAC,UAAU,CAAC;SACpB,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;SAClB,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CACvD,CAAC;IACC,IAAI;IACJ,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC;CAC5C,CAAiB,CAAC;AAErB,SAAS,WAAW,CAAC,KAAqB,EAAE,QAAqB;IAC/D,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7G,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC;AAE3D,MAAM,UAAU,GAAG,CAAC,CAAe,EAAE,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC","sourcesContent":["import { RdfType } from '@pod-os/core';\nimport { AvailableTools } from './availableTools';\n\n/**\n * Describes a tool that can be used\n */\nexport interface ToolConfig {\n  /**\n   * The HTML custom element that renders the tool\n   */\n  element: string;\n  /**\n   * A human-readable short label to identify the tool\n   */\n  label: string;\n  /**\n   * An icon to identify the tool\n   * Available values see https://shoelace.style/components/icon/#default-icons\n   */\n  icon: string;\n  /**\n   * The types that can be handled by that tool\n   */\n  types: TypePriority[];\n}\n\n/**\n * Describes how well a given RDF type can be handled\n */\ninterface TypePriority {\n  /**\n   * URI identifying the RDF type\n   */\n  uri: string;\n  /**\n   * how well that type can be handled (higher values === better fit)\n   */\n  priority: number;\n}\n\n/**\n * Describes the priority (order) that applies to a tool\n */\ninterface ToolPriority {\n  /**\n   * The tool in question\n   */\n  tool: ToolConfig;\n  /**\n   * The priority given to the tool (higher values === better fit)\n   */\n  priority: number;\n}\n\nexport function selectToolsForTypes(types: RdfType[]) {\n  const typeUris = new Set(types.map(type => type.uri));\n\n  return Object.values(AvailableTools)\n    .map(maxPriorityFor(typeUris))\n    .filter(onlyRelevant)\n    .toSorted(byPriority)\n    .map(it => it.tool)\n    .concat(AvailableTools.Generic);\n}\n\nconst maxPriorityFor = (typeUris: Set<string>) => tool =>\n  ({\n    tool,\n    priority: maxPriority(tool.types, typeUris),\n  }) as ToolPriority;\n\nfunction maxPriority(types: TypePriority[], typeUris: Set<string>): number {\n  return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);\n}\n\nconst onlyRelevant = (it: ToolPriority) => it.priority > 0;\n\nconst byPriority = (a: ToolPriority, b: ToolPriority) => b.priority - a.priority;\n"]}

package/dist/components/pos-app-document-viewer.js

@@ -1,15 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$b } from './badge.js';
-import { d as defineCustomElement$a } from './icon.js';
-import { d as defineCustomElement$9 } from './skeleton-text.js';
-import { d as defineCustomElement$8 } from './pos-add-literal-value2.js';
-import { d as defineCustomElement$7 } from './pos-document2.js';
-import { d as defineCustomElement$6 } from './pos-label2.js';
-import { d as defineCustomElement$5 } from './pos-literals2.js';
-import { d as defineCustomElement$4 } from './pos-predicate2.js';
-import { d as defineCustomElement$3 } from './pos-select-term2.js';
-import { d as defineCustomElement$2 } from './pos-type-badges2.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './skeleton-text.js';
+import { d as defineCustomElement$3 } from './pos-document2.js';
+import { d as defineCustomElement$2 } from './pos-markdown-document2.js';
 
 const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
 const PosAppDocumentViewerStyle0 = defaultAppLayoutCss;
@@ -34,7 +28,7 @@ const PosAppDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class PosAppDocu
         if (!this.resource) {
             return null;
         }
-        return (h(Host, null, h("section", null, h("pos-document", { src: this.resource.uri })), h("section", null, h("article", null, h("header", null, h("h1", null, h("pos-label", null)), h("pos-type-badges", null)), h("pos-literals", null)))));
+        return (h(Host, null, h("section", null, h("pos-document", { src: this.resource.uri }))));
     }
     static get style() { return PosAppDocumentViewerStyle0 + PosAppDocumentViewerStyle1; }
 }, [1, "pos-app-document-viewer", {
@@ -44,59 +38,29 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-document-viewer", "ion-badge", "ion-icon", "ion-skeleton-text", "pos-add-literal-value", "pos-document", "pos-label", "pos-literals", "pos-predicate", "pos-select-term", "pos-type-badges"];
+    const components = ["pos-app-document-viewer", "ion-icon", "ion-skeleton-text", "pos-document", "pos-markdown-document"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-document-viewer":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PosAppDocumentViewer$1);
             }
             break;
-        case "ion-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
         case "ion-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-skeleton-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "pos-add-literal-value":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "pos-document":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "pos-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "pos-literals":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "pos-predicate":
+        case "ion-skeleton-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "pos-select-term":
+        case "pos-document":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "pos-type-badges":
+        case "pos-markdown-document":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/pos-app-document-viewer.js.map

@@ -1 +1 @@
-{"file":"pos-app-document-viewer.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,mCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,mCAAe,cAAc;;MCQhBA,sBAAoB;IALjC;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KA0BH;IAhCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,EAAC,IAAI,QACH,mBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,EACV,mBACE,mBACE,kBACE,cACE,oBAAa,CACV,EACL,0BAAmB,CACZ,EACT,uBAAgB,CACR,CACF,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppDocumentViewer"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\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    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-document-viewer.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,mCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,mCAAe,cAAc;;MCQhBA,sBAAoB;IALjC;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KAeH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,EAAC,IAAI,QACH,mBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppDocumentViewer"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\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    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-document2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { B as BrokenFile } from './BrokenFile.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './skeleton-text.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './skeleton-text.js';
+import { d as defineCustomElement$1 } from './pos-markdown-document2.js';
 
 const posDocumentCss = "iframe{background-color:var(--pos-background-color);width:100%;height:100vh}.error{display:flex;opacity:0.8;background:repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
 const PosDocumentStyle0 = posDocumentCss;
@@ -29,7 +30,7 @@ const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends H
             const file = await this.os.fetchFile(this.src);
             this.resourceLoadedEmitter.emit(this.src);
             if (file.blob()) {
-                this.dataUri = URL.createObjectURL(file.blob());
+                this.file = file;
                 this.error = null;
             }
             else {
@@ -53,7 +54,12 @@ const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends H
         if (this.brokenFile) {
             return h(BrokenFile, { file: this.brokenFile });
         }
-        return h("iframe", { src: this.dataUri });
+        if (this.file.blob().type === 'text/markdown') {
+            return h("pos-markdown-document", { file: this.file });
+        }
+        else {
+            return h("iframe", { src: URL.createObjectURL(this.file.blob()) });
+        }
     }
     static get watchers() { return {
         "os": ["fetchBlob"],
@@ -64,7 +70,7 @@ const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends H
         "src": [1],
         "alt": [1],
         "os": [32],
-        "dataUri": [32],
+        "file": [32],
         "brokenFile": [32],
         "error": [32],
         "loading": [32]
@@ -76,7 +82,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-document", "ion-icon", "ion-skeleton-text"];
+    const components = ["pos-document", "ion-icon", "ion-skeleton-text", "pos-markdown-document"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-document":
             if (!customElements.get(tagName)) {
@@ -85,10 +91,15 @@ function defineCustomElement() {
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "ion-skeleton-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "pos-markdown-document":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }