From 7bc7f11d8e22f358491ade9d66e2190618a4822a Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 13:12:52 -0600
Subject: [PATCH 1/7] move demo files to a `shared` folder

---
 demo/VerifiableCredential/index.html        | 6 +++---
 demo/{ => shared}/CredentialManifest.json   | 0
 demo/{ => shared}/VerifiableCredential.json | 0
 demo/{ => shared}/jsoneditor.min.js         | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename demo/{ => shared}/CredentialManifest.json (100%)
 rename demo/{ => shared}/VerifiableCredential.json (100%)
 rename demo/{ => shared}/jsoneditor.min.js (100%)

diff --git a/demo/VerifiableCredential/index.html b/demo/VerifiableCredential/index.html
index af065d7..96e67f9 100644
--- a/demo/VerifiableCredential/index.html
+++ b/demo/VerifiableCredential/index.html
@@ -134,7 +134,7 @@ <h3>Preview</h3>
 }
 </style>
 <script type="module">
-import "../jsoneditor.min.js";
+import "../shared/jsoneditor.min.js";
 import { VerifiableCredential } from "../../dist/VerifiableCredential.mjs";
 
 let dataRawEditor = document.querySelector("#data > textarea");
@@ -292,8 +292,8 @@ <h3>Preview</h3>
 });
 manifestFormEditor.on("ready", async () => {
 	let [ VERIFIABLE_CREDENTIAL, CREDENTIAL_MANIFEST ] = await Promise.all([
-		fetch("../VerifiableCredential.json").then((response) => response.json()),
-		fetch("../CredentialManifest.json").then((response) => response.json()),
+		fetch("../shared/VerifiableCredential.json").then((response) => response.json()),
+		fetch("../shared/CredentialManifest.json").then((response) => response.json()),
 	]);
 	dataRawEditor.value = JSON.stringify(VERIFIABLE_CREDENTIAL, null, "\t");
 	manifestFormEditor.setValue(CREDENTIAL_MANIFEST);
diff --git a/demo/CredentialManifest.json b/demo/shared/CredentialManifest.json
similarity index 100%
rename from demo/CredentialManifest.json
rename to demo/shared/CredentialManifest.json
diff --git a/demo/VerifiableCredential.json b/demo/shared/VerifiableCredential.json
similarity index 100%
rename from demo/VerifiableCredential.json
rename to demo/shared/VerifiableCredential.json
diff --git a/demo/jsoneditor.min.js b/demo/shared/jsoneditor.min.js
similarity index 100%
rename from demo/jsoneditor.min.js
rename to demo/shared/jsoneditor.min.js

From 8969d50a405f636004e52d5d249937e49176d99a Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 13:50:34 -0600
Subject: [PATCH 2/7] the logic to apply entity styles can be reused

---
 VerifiableCredential/index.mjs | 50 ++--------------------------------
 shared/WalletRendering.mjs     | 45 ++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/VerifiableCredential/index.mjs b/VerifiableCredential/index.mjs
index 7e49fd3..eec3935 100644
--- a/VerifiableCredential/index.mjs
+++ b/VerifiableCredential/index.mjs
@@ -1,9 +1,7 @@
 import QRCode from "qrcode";
-import { isHexColor } from "../shared/Color.mjs";
 import { convertBooleanAttribute, hideUntilLoad } from "../shared/DOM.mjs";
 import { verifyType } from "../shared/Type.mjs";
-import { isURL } from "../shared/URL.mjs";
-import { resolveDisplayMappingObject } from "../shared/WalletRendering.mjs";
+import { applyEntityStyles, resolveDisplayMappingObject } from "../shared/WalletRendering.mjs";
 
 const VERSION = "https://identity.foundation/credential-manifest/spec/v1.0.0/";
 
@@ -302,7 +300,7 @@ export class VerifiableCredential extends HTMLElement {
 			let issuerElement = this.#root.appendChild(document.createElement("section"));
 			issuerElement.classList.add("issuer");
 
-			this.#applyEntityStyles(issuer["styles"], issuerElement);
+			applyEntityStyles(issuer["styles"], issuerElement);
 
 			let name = verifyType(issuer["name"], "string");
 			if (name) {
@@ -321,7 +319,7 @@ export class VerifiableCredential extends HTMLElement {
 			let descriptorElement = this.#root.appendChild(document.createElement("section"));
 			descriptorElement.classList.add("descriptor");
 
-			this.#applyEntityStyles(descriptor["styles"], descriptorElement);
+			applyEntityStyles(descriptor["styles"], descriptorElement);
 
 			// <https://identity.foundation/wallet-rendering/#data-display>
 
@@ -399,47 +397,5 @@ export class VerifiableCredential extends HTMLElement {
 
 		updateDescriptionLabels();
 	}
-
-	// <https://identity.foundation/wallet-rendering/#entity-styles>
-	#applyEntityStyles(data, containerElement) {
-		if (!data)
-			return;
-
-		let textColor = verifyType(data["text"]?.["color"], isHexColor);
-		if (textColor)
-			containerElement.style.setProperty("color", textColor);
-
-		let backgroundColor = verifyType(data["background"]?.["color"], isHexColor);
-		if (backgroundColor)
-			containerElement.style.setProperty("background-color", backgroundColor);
-
-		let thumbnailURI = verifyType(data["thumbnail"]?.["uri"], "string");
-		if (isURL(thumbnailURI)) {
-			let thumbnailElement = containerElement.appendChild(document.createElement("img"));
-			thumbnailElement.classList.add("thumbnail");
-			thumbnailElement.src = thumbnailURI;
-			hideUntilLoad(thumbnailElement);
-
-			let thumbnailAlt = verifyType(data["thumbnail"]?.["alt"], "string");
-			if (thumbnailAlt)
-				thumbnailElement.alt = thumbnailAlt;
-		}
-
-		let heroURI = verifyType(data["hero"]?.["uri"], "string");
-		if (isURL(heroURI)) {
-			let heroElement = containerElement.appendChild(document.createElement("img"));
-			heroElement.classList.add("hero");
-			heroElement.src = heroURI;
-			hideUntilLoad(heroElement, () => {
-				containerElement.style.setProperty("max-width", `min(100%, ${heroElement.naturalWidth}px)`);
-				containerElement.style.setProperty("max-height", `min(100%, ${heroElement.naturalHeight}px)`);
-				containerElement.style.setProperty("aspect-ratio", `${heroElement.naturalWidth} / ${heroElement.naturalHeight}`);
-			});
-
-			let heroAlt = verifyType(data["hero"]?.["alt"], "string");
-			if (heroAlt)
-				heroElement.alt = heroAlt;
-		}
-	}
 }
 customElements.define("verifiable-credential", VerifiableCredential);
diff --git a/shared/WalletRendering.mjs b/shared/WalletRendering.mjs
index a7566dd..22e57b6 100644
--- a/shared/WalletRendering.mjs
+++ b/shared/WalletRendering.mjs
@@ -1,6 +1,51 @@
 import AJV from "ajv";
 import { getFirstValueMatchingPaths } from "./JSON.mjs";
+import { isHexColor } from "../shared/Color.mjs";
+import { hideUntilLoad } from "../shared/DOM.mjs";
 import { verifyType } from "../shared/Type.mjs";
+import { isURL } from "../shared/URL.mjs";
+
+// <https://identity.foundation/wallet-rendering/#entity-styles>
+export function applyEntityStyles(entityStyles, containerElement) {
+	if (!entityStyles)
+		return;
+
+	let textColor = verifyType(entityStyles["text"]?.["color"], isHexColor);
+	if (textColor)
+		containerElement.style.setProperty("color", textColor);
+
+	let backgroundColor = verifyType(entityStyles["background"]?.["color"], isHexColor);
+	if (backgroundColor)
+		containerElement.style.setProperty("background-color", backgroundColor);
+
+	let thumbnailURI = verifyType(entityStyles["thumbnail"]?.["uri"], "string");
+	if (isURL(thumbnailURI)) {
+		let thumbnailElement = containerElement.appendChild(document.createElement("img"));
+		thumbnailElement.classList.add("thumbnail");
+		thumbnailElement.src = thumbnailURI;
+		hideUntilLoad(thumbnailElement);
+
+		let thumbnailAlt = verifyType(entityStyles["thumbnail"]?.["alt"], "string");
+		if (thumbnailAlt)
+			thumbnailElement.alt = thumbnailAlt;
+	}
+
+	let heroURI = verifyType(entityStyles["hero"]?.["uri"], "string");
+	if (isURL(heroURI)) {
+		let heroElement = containerElement.appendChild(document.createElement("img"));
+		heroElement.classList.add("hero");
+		heroElement.src = heroURI;
+		hideUntilLoad(heroElement, () => {
+			containerElement.style.setProperty("max-width", `min(100%, ${heroElement.naturalWidth}px)`);
+			containerElement.style.setProperty("max-height", `min(100%, ${heroElement.naturalHeight}px)`);
+			containerElement.style.setProperty("aspect-ratio", `${heroElement.naturalWidth} / ${heroElement.naturalHeight}`);
+		});
+
+		let heroAlt = verifyType(entityStyles["hero"]?.["alt"], "string");
+		if (heroAlt)
+			heroElement.alt = heroAlt;
+	}
+}
 
 export function prettifyValue(value) {
 	if (value === true)

From d82a8eaaf431548ea4dc98498842d7243e889519 Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 13:51:15 -0600
Subject: [PATCH 3/7] add a check when resolving the display mapping object

---
 shared/WalletRendering.mjs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/shared/WalletRendering.mjs b/shared/WalletRendering.mjs
index 22e57b6..5714bd7 100644
--- a/shared/WalletRendering.mjs
+++ b/shared/WalletRendering.mjs
@@ -59,6 +59,9 @@ export function prettifyValue(value) {
 
 // <https://identity.foundation/wallet-rendering/#display-mapping-object>
 export function resolveDisplayMappingObject(displayMappingObject, data) {
+	if (!displayMappingObject)
+		return undefined;
+
 	// <https://identity.foundation/wallet-rendering/#using-path>
 	if ("path" in displayMappingObject) {
 		let fallback = verifyType(displayMappingObject["fallback"], "string");

From c58df42034f85b82e2f5d981405787c66d5ad1af Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 14:24:54 -0600
Subject: [PATCH 4/7] split `shared/WalletRendering.mjs` into separate files

this will allow `<credential-manifest>` to avoid the cost of importing `ajv`, `jsonpath`, etc.
---
 VerifiableCredential/index.mjs                |  3 +-
 shared/{JSON.mjs => JSONPath.mjs}             |  0
 shared/String.mjs                             |  9 +++
 .../WalletRendering/DisplayMappingObject.mjs  | 39 +++++++++++++
 .../EntityStyles.mjs}                         | 55 ++-----------------
 5 files changed, 54 insertions(+), 52 deletions(-)
 rename shared/{JSON.mjs => JSONPath.mjs} (100%)
 create mode 100644 shared/String.mjs
 create mode 100644 shared/WalletRendering/DisplayMappingObject.mjs
 rename shared/{WalletRendering.mjs => WalletRendering/EntityStyles.mjs} (54%)

diff --git a/VerifiableCredential/index.mjs b/VerifiableCredential/index.mjs
index eec3935..7a4d552 100644
--- a/VerifiableCredential/index.mjs
+++ b/VerifiableCredential/index.mjs
@@ -1,7 +1,8 @@
 import QRCode from "qrcode";
 import { convertBooleanAttribute, hideUntilLoad } from "../shared/DOM.mjs";
 import { verifyType } from "../shared/Type.mjs";
-import { applyEntityStyles, resolveDisplayMappingObject } from "../shared/WalletRendering.mjs";
+import { resolveDisplayMappingObject } from "../shared/WalletRendering/DisplayMappingObject.mjs";
+import { applyEntityStyles } from "../shared/WalletRendering/EntityStyles.mjs";
 
 const VERSION = "https://identity.foundation/credential-manifest/spec/v1.0.0/";
 
diff --git a/shared/JSON.mjs b/shared/JSONPath.mjs
similarity index 100%
rename from shared/JSON.mjs
rename to shared/JSONPath.mjs
diff --git a/shared/String.mjs b/shared/String.mjs
new file mode 100644
index 0000000..7b556ae
--- /dev/null
+++ b/shared/String.mjs
@@ -0,0 +1,9 @@
+export function prettifyValue(value) {
+	if (value === true)
+		return "Yes";
+
+	if (value === false)
+		return "No";
+
+	return value;
+}
\ No newline at end of file
diff --git a/shared/WalletRendering/DisplayMappingObject.mjs b/shared/WalletRendering/DisplayMappingObject.mjs
new file mode 100644
index 0000000..b57c91f
--- /dev/null
+++ b/shared/WalletRendering/DisplayMappingObject.mjs
@@ -0,0 +1,39 @@
+import AJV from "ajv";
+import { getFirstValueMatchingPaths } from "../../shared/JSONPath.mjs";
+import { prettifyValue } from "../../shared/String.mjs";
+import { verifyType } from "../../shared/Type.mjs";
+
+// <https://identity.foundation/wallet-rendering/#display-mapping-object>
+export function resolveDisplayMappingObject(displayMappingObject, data) {
+	if (!displayMappingObject)
+		return undefined;
+
+	// <https://identity.foundation/wallet-rendering/#using-path>
+	if ("path" in displayMappingObject) {
+		let fallback = verifyType(displayMappingObject["fallback"], "string");
+
+		let path = verifyType(displayMappingObject["path"], Array.isArray);
+		if (path === undefined)
+			return fallback;
+
+		let value = getFirstValueMatchingPaths(data, path);
+		if (value === undefined)
+			return fallback;
+
+		let schema = displayMappingObject["schema"];
+		try {
+			if (!(new AJV).validate(schema, value))
+				return fallback;
+		} catch {
+			return fallback;
+		}
+
+		return prettifyValue(value);
+	}
+
+	// <https://identity.foundation/wallet-rendering/#using-text>
+	if ("text" in displayMappingObject)
+		return verifyType(displayMappingObject["text"], "string");
+
+	return undefined;
+}
diff --git a/shared/WalletRendering.mjs b/shared/WalletRendering/EntityStyles.mjs
similarity index 54%
rename from shared/WalletRendering.mjs
rename to shared/WalletRendering/EntityStyles.mjs
index 5714bd7..46c98c3 100644
--- a/shared/WalletRendering.mjs
+++ b/shared/WalletRendering/EntityStyles.mjs
@@ -1,9 +1,7 @@
-import AJV from "ajv";
-import { getFirstValueMatchingPaths } from "./JSON.mjs";
-import { isHexColor } from "../shared/Color.mjs";
-import { hideUntilLoad } from "../shared/DOM.mjs";
-import { verifyType } from "../shared/Type.mjs";
-import { isURL } from "../shared/URL.mjs";
+import { isHexColor } from "../../shared/Color.mjs";
+import { hideUntilLoad } from "../../shared/DOM.mjs";
+import { verifyType } from "../../shared/Type.mjs";
+import { isURL } from "../../shared/URL.mjs";
 
 // <https://identity.foundation/wallet-rendering/#entity-styles>
 export function applyEntityStyles(entityStyles, containerElement) {
@@ -46,48 +44,3 @@ export function applyEntityStyles(entityStyles, containerElement) {
 			heroElement.alt = heroAlt;
 	}
 }
-
-export function prettifyValue(value) {
-	if (value === true)
-		return "Yes";
-
-	if (value === false)
-		return "No";
-
-	return value;
-}
-
-// <https://identity.foundation/wallet-rendering/#display-mapping-object>
-export function resolveDisplayMappingObject(displayMappingObject, data) {
-	if (!displayMappingObject)
-		return undefined;
-
-	// <https://identity.foundation/wallet-rendering/#using-path>
-	if ("path" in displayMappingObject) {
-		let fallback = verifyType(displayMappingObject["fallback"], "string");
-
-		let path = verifyType(displayMappingObject["path"], Array.isArray);
-		if (path === undefined)
-			return fallback;
-
-		let value = getFirstValueMatchingPaths(data, path);
-		if (value === undefined)
-			return fallback;
-
-		let schema = displayMappingObject["schema"];
-		try {
-			if (!(new AJV).validate(schema, value))
-				return fallback;
-		} catch {
-			return fallback;
-		}
-
-		return prettifyValue(value);
-	}
-
-	// <https://identity.foundation/wallet-rendering/#using-text>
-	if ("text" in displayMappingObject)
-		return verifyType(displayMappingObject["text"], "string");
-
-	return undefined;
-}

From 9250ac8a1e71eddba73bf011051ef90c0371497c Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 14:26:12 -0600
Subject: [PATCH 5/7] prepare `esbuild` to build more than one thing

---
 esbuild.mjs | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/esbuild.mjs b/esbuild.mjs
index 4be2fd7..2a5aca0 100644
--- a/esbuild.mjs
+++ b/esbuild.mjs
@@ -2,15 +2,17 @@ import esbuild from "esbuild";
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
 import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 
-esbuild.build({
-	entryPoints: [ "./VerifiableCredential/index.mjs" ],
-	outfile: "./dist/VerifiableCredential.mjs",
-	platform: "browser",
-	format: "esm",
-	bundle: true,
-	minify: true,
-	plugins: [
-		NodeGlobalsPolyfillPlugin(),
-		NodeModulesPolyfillPlugin(),
-	],
-});
+for (let name of [ "VerifiableCredential" ]) {
+	esbuild.build({
+		entryPoints: [ `./${name}/index.mjs` ],
+		outfile: `./dist/${name}.mjs`,
+		platform: "browser",
+		format: "esm",
+		bundle: true,
+		minify: true,
+		plugins: [
+			NodeGlobalsPolyfillPlugin(),
+			NodeModulesPolyfillPlugin(),
+		],
+	});
+}

From 88ebf37c48167510fc67abc60aa5e4a66bf6095f Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 15:29:49 -0600
Subject: [PATCH 6/7] create a basic `<credential-manifest>`

---
 CredentialManifest/README.md |  29 +++
 CredentialManifest/index.mjs | 359 +++++++++++++++++++++++++++++++++++
 esbuild.mjs                  |   2 +-
 3 files changed, 389 insertions(+), 1 deletion(-)
 create mode 100644 CredentialManifest/README.md
 create mode 100644 CredentialManifest/index.mjs

diff --git a/CredentialManifest/README.md b/CredentialManifest/README.md
new file mode 100644
index 0000000..c18931f
--- /dev/null
+++ b/CredentialManifest/README.md
@@ -0,0 +1,29 @@
+# Credential Manifest
+
+A basic `<credential-manifest>` custom element that renders a [credential manifest](https://identity.foundation/credential-manifest/).
+
+Playground: <[https://tbd54566975.github.io/web5-components/demo/CredentialManifest/](https://tbd54566975.github.io/web5-components/demo/CredentialManifest/)>
+
+## HTML Attributes
+
+- `src` is a URL to the [credential manifest](https://identity.foundation/credential-manifest/)
+
+## JS Properties
+
+- `data` is the JSON payload of the [credential manifest](https://identity.foundation/credential-manifest/)
+
+## Layout
+
+The `<credential-manifest>` will contain a section for the `"issuer"` and each item in `"output_descriptors"`.
+
+The size of each section will be the minimum of the space made available for it by the parent and the size of the `"hero"` (if provided).  Each section will also match the aspect ratio of the `"hero"` (if provided).
+
+The `"thumbnail"` of the [credential manifest](https://identity.foundation/credential-manifest/) is rendered in the top left corner of the section (if provided).
+
+The `"title"`, `"subtitle"`, `"description"`, and `"properties"` are rendered in the bottom left corner of the section (if provided).
+
+The "Description" label can be customized using a `<* slot="description-label">text goes here</*>` inside the `<credential-manifest>`.  Note that only the `textContent` will be used, not any matching/applied styles.
+
+## Style
+
+Any default inheritable properties (e.g. `font`, `border-radius`, etc.) will be inherited from the parent of the `<credential-manifest>` (though sequential sections will not have `border-radius` applied in between) unless overridden by a value in the [credential manifest](https://identity.foundation/credential-manifest/) (e.g. `"text"`, `"background",` etc.).
diff --git a/CredentialManifest/index.mjs b/CredentialManifest/index.mjs
new file mode 100644
index 0000000..abaa666
--- /dev/null
+++ b/CredentialManifest/index.mjs
@@ -0,0 +1,359 @@
+import { hideUntilLoad } from "../shared/DOM.mjs";
+import { verifyType } from "../shared/Type.mjs";
+import { applyEntityStyles } from "../shared/WalletRendering/EntityStyles.mjs";
+
+const VERSION = "https://identity.foundation/credential-manifest/spec/v1.0.0/";
+
+const STYLE_SPACING = "1.5em";
+const STYLE = `
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+:host > :not(:first-of-type) {
+	padding-top: calc(${STYLE_SPACING} / 2);
+	border-top-right-radius: 0;
+	border-top-left-radius: 0;
+}
+
+:host > :not(:last-of-type) {
+	padding-bottom: calc(${STYLE_SPACING} / 2);
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.issuer {
+	box-sizing: border-box;
+	position: relative;
+	padding: ${STYLE_SPACING};
+	border-radius: inherit;
+}
+
+.descriptor {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	position: relative;
+	padding: ${STYLE_SPACING};
+	border-radius: inherit;
+}
+
+:is(.issuer, .descriptor) .thumbnail {
+	z-index: 2;
+	max-width: 32px;
+	max-height: 32px;
+}
+
+:is(.issuer, .descriptor) .hero {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.issuer .name {
+	position: relative;
+	z-index: 3;
+	margin: 0;
+	padding: 0;
+	font-size: 0.8em;
+}
+
+.descriptor .title {
+	position: relative;
+	z-index: 3;
+	margin: 0;
+	padding: 0;
+	font-size: 1.5em;
+}
+
+.descriptor .subtitle {
+	position: relative;
+	z-index: 3;
+	margin: 0;
+	padding: 0;
+	font-size: 1em;
+	font-weight: normal;
+}
+
+.descriptor .description {
+	position: relative;
+	z-index: 3;
+	margin: 0;
+	padding: 0;
+}
+
+.descriptor .description:not(:first-child) {
+	padding-top: ${STYLE_SPACING};
+}
+
+.descriptor .properties {
+	display: flex;
+	flex-wrap: wrap;
+	gap: ${STYLE_SPACING};
+	z-index: 3;
+	margin: 0;
+	padding: 0;
+}
+
+.descriptor .properties:not(:first-child) {
+	padding-top: ${STYLE_SPACING};
+}
+
+.descriptor .properties .property {
+	width: calc(50% - (${STYLE_SPACING} / 2));
+	list-style-type: none;
+}
+
+.descriptor .description .label,
+.descriptor .properties .property .label {
+	display: block;
+	margin-bottom: 0.25em;
+	font-size: 0.5em;
+	text-transform: uppercase;
+	opacity: 0.5;
+}
+
+.placeholder {
+	font-style: italic;
+	opacity: 0.5;
+}
+
+slot {
+	display: none;
+}
+`;
+
+export class CredentialManifest extends HTMLElement {
+	static #style = null;
+
+	#data = null;
+	#srcFetchAbortController = null;
+
+	#root;
+
+	constructor() {
+		super();
+
+		this.#root = this.attachShadow({ mode: "closed" });
+
+		if (this.#root.adoptedStyleSheets) {
+			if (!CredentialManifest.#style) {
+				CredentialManifest.#style = new CSSStyleSheet;
+				CredentialManifest.#style.replaceSync(STYLE);
+			}
+			this.#root.adoptedStyleSheets = [ CredentialManifest.#style ];
+		} else {
+			if (!CredentialManifest.#style) {
+				CredentialManifest.#style = document.createElement("style");
+				CredentialManifest.#style.textContent = STYLE;
+			}
+		}
+	}
+
+	get src() {
+		return this.getAttribute("src");
+	}
+	set src(src) {
+		if (typeof src === "string")
+			this.setAttribute("src", src);
+	}
+
+	get data() { return this.#data; }
+	set data(data) {
+		if (!data || typeof data !== "object")
+			return;
+
+		if (this.#srcFetchAbortController) {
+			this.#srcFetchAbortController.abort();
+			this.#srcFetchAbortController = null;
+		}
+
+		this.#data = data;
+		this.#update();
+	}
+
+	static observedAttributes = [
+		"src",
+	];
+	attributeChangedCallback(name, oldValue, newValue) {
+		switch (name) {
+		case "src":
+			this.#srcFetchAbortController?.abort();
+			this.#srcFetchAbortController = new AbortController;
+
+			fetch(newValue, { signal: this.#srcFetchAbortController.signal })
+				.then((response) => response.json())
+				.then((json) => {
+					this.data = json;
+				})
+				.catch((error) => {
+					if (error.name !== "AbortError")
+						throw error; // surface `fetch` errors for developers
+				});
+			return;
+		}
+	}
+
+	#update() {
+		this.#root.textContent = ""; // remove all children
+
+		if (!this.#root.adoptedStyleSheets)
+			this.#root.appendChild(CredentialManifest.#style.cloneNode(true));
+
+		if (!this.#data || typeof this.#data !== "object")
+			return;
+
+		// <https://identity.foundation/credential-manifest/#versioning>
+		if (this.#data["spec_version"] !== VERSION)
+			return;
+
+		// Copy only the raw text of the `<* slot="description-label">` to ensure that no outside CSS leaks in.
+		let descriptionLabelElements = [ ];
+		function updateDescriptionLabels() {
+			let descriptionLabel = descriptionLabelSlotElement.assignedNodes().map((slottedNode) => slottedNode.textContent).join("") || "Description";
+			for (let descriptionLabelElement of descriptionLabelElements)
+				descriptionLabelElement.textContent = descriptionLabel;
+		}
+		let descriptionLabelSlotMutationObserver = new MutationObserver((records) => {
+			updateDescriptionLabels();
+		});
+		let descriptionLabelSlotElement = this.#root.appendChild(document.createElement("slot"));
+		descriptionLabelSlotElement.name = "description-label";
+		descriptionLabelSlotElement.addEventListener("slotchange", (event) => {
+			updateDescriptionLabels();
+
+			descriptionLabelSlotMutationObserver.disconnect();
+			for (let slottedNode of descriptionLabelSlotElement.assignedNodes()) {
+				descriptionLabelSlotMutationObserver.observe(slottedNode, {
+					subtree: true,
+					childList: true,
+					characterData: true,
+				});
+			}
+		});
+
+		// <https://identity.foundation/credential-manifest/#general-composition>
+
+		let issuer = verifyType(this.#data["issuer"], "object");
+		if (issuer) {
+			let issuerElement = this.#root.appendChild(document.createElement("section"));
+			issuerElement.classList.add("issuer");
+
+			applyEntityStyles(issuer["styles"], issuerElement);
+
+			let name = verifyType(issuer["name"], "string");
+			if (name) {
+				let nameElement = issuerElement.appendChild(document.createElement("h1"));
+				nameElement.classList.add("name");
+				nameElement.textContent = name;
+			}
+		}
+
+		// <https://identity.foundation/credential-manifest/#output-descriptor>
+		let descriptors = verifyType(this.#data["output_descriptors"], Array.isArray) ?? [ ];
+		for (let descriptor of descriptors) {
+			if (!descriptor)
+				continue;
+
+			let descriptorElement = this.#root.appendChild(document.createElement("section"));
+			descriptorElement.classList.add("descriptor");
+
+			applyEntityStyles(descriptor["styles"], descriptorElement);
+
+			// <https://identity.foundation/wallet-rendering/#data-display>
+
+			let title = this.#placeholderForDisplayMappingObject(descriptor["display"]?.["title"], "title");
+			if (title) {
+				let titleElement = descriptorElement.appendChild(document.createElement("h1"));
+				titleElement.classList.add("title");
+				titleElement.textContent = title.text;
+				titleElement.classList.add(...title.classes);
+			}
+
+			let subtitle = this.#placeholderForDisplayMappingObject(descriptor["display"]?.["subtitle"], "subtitle");
+			if (subtitle) {
+				let subtitleElement = descriptorElement.appendChild(document.createElement("h2"));
+				subtitleElement.classList.add("subtitle");
+				subtitleElement.textContent = subtitle.text;
+				subtitleElement.classList.add(...subtitle.classes);
+			}
+
+			let description = this.#placeholderForDisplayMappingObject(descriptor["display"]?.["description"], "description");
+			if (description) {
+				let descriptionElement = descriptorElement.appendChild(document.createElement("p"));
+				descriptionElement.classList.add("description");
+
+				let labelElement = descriptionElement.appendChild(document.createElement("span"));
+				labelElement.classList.add("label");
+				descriptionLabelElements.push(labelElement);
+
+				descriptionElement.append(" ");
+
+				let textElement = descriptionElement.appendChild(document.createElement("span"));
+				textElement.textContent = description.text;
+				textElement.classList.add(...description.classes);
+			}
+
+			let propertiesElement = descriptorElement.appendChild(document.createElement("ul"));
+			propertiesElement.classList.add("properties");
+
+			let properties = verifyType(descriptor["display"]?.["properties"], Array.isArray) ?? [ ];
+			for (let property of properties) {
+				if (!property)
+					continue;
+
+				let value = this.#placeholderForDisplayMappingObject(property, "property");
+				if (!value)
+					continue;
+
+				let propertyElement = propertiesElement.appendChild(document.createElement("li"));
+				propertyElement.classList.add("property");
+
+				// <https://identity.foundation/wallet-rendering/#labeled-display-mapping-object>
+				let label = verifyType(property["label"], "string");
+				if (label) {
+					let labelElement = propertyElement.appendChild(document.createElement("span"));
+					labelElement.classList.add("label");
+					labelElement.textContent = label;
+
+					propertyElement.append(" ");
+				}
+
+				let valueElement = propertyElement.appendChild(document.createElement("span"));
+				valueElement.classList.add("value");
+				valueElement.textContent = value.text;
+				valueElement.classList.add(...value.classes);
+			}
+		}
+
+		updateDescriptionLabels();
+	}
+
+	// <https://identity.foundation/wallet-rendering/#display-mapping-object>
+	#placeholderForDisplayMappingObject(displayMappingObject, name) {
+		if (!displayMappingObject)
+			return undefined;
+
+		// <https://identity.foundation/wallet-rendering/#using-path>
+		if ("path" in displayMappingObject) {
+			let fallback = verifyType(displayMappingObject["fallback"], "string");
+			if (fallback)
+				return { text: fallback, classes: [ ] };
+			return { text: name, classes: [ "placeholder" ] };
+		}
+
+		// <https://identity.foundation/wallet-rendering/#using-text>
+		if ("text" in displayMappingObject)
+			return { text: verifyType(displayMappingObject["text"], "string"), classes: [ ] };
+
+		return undefined;
+	}
+}
+customElements.define("credential-manifest", CredentialManifest);
diff --git a/esbuild.mjs b/esbuild.mjs
index 2a5aca0..a267c98 100644
--- a/esbuild.mjs
+++ b/esbuild.mjs
@@ -2,7 +2,7 @@ import esbuild from "esbuild";
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
 import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 
-for (let name of [ "VerifiableCredential" ]) {
+for (let name of [ "CredentialManifest", "VerifiableCredential" ]) {
 	esbuild.build({
 		entryPoints: [ `./${name}/index.mjs` ],
 		outfile: `./dist/${name}.mjs`,

From 09ba97678ff426be4dfc4c02c11bf67bdf7b4710 Mon Sep 17 00:00:00 2001
From: Devin Rousso <drousso@tbd.email>
Date: Tue, 11 Apr 2023 15:30:25 -0600
Subject: [PATCH 7/7] create a basic demo/editor page for
 `<credential-manifest>`

currently it contains
- a `JSONEditor` to visually create/edit the Credential Manifest
- a `<textarea>` to allow modifying the raw JSON `data` of the Credential Manifest
---
 demo/CredentialManifest/index.html | 324 +++++++++++++++++++++++++++++
 1 file changed, 324 insertions(+)
 create mode 100644 demo/CredentialManifest/index.html

diff --git a/demo/CredentialManifest/index.html b/demo/CredentialManifest/index.html
new file mode 100644
index 0000000..4c5c5fa
--- /dev/null
+++ b/demo/CredentialManifest/index.html
@@ -0,0 +1,324 @@
+<body>
+<main>
+	<section id="data">
+		<form></form>
+		<textarea></textarea>
+	</section>
+	<section id="preview">
+		<h3>Preview</h3>
+	</section>
+</main>
+<style>
+body {
+	margin: 0;
+	font-family: sans-serif;
+}
+
+main {
+	box-sizing: border-box;
+	display: flex;
+	gap: 1em;
+	min-height: 100%;
+	padding: 1em;
+}
+
+main > section {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+main > section > h3 {
+	margin: 0;
+}
+
+input[type="text"] {
+	min-width: 20em;
+	font-family: monospace;
+	color: hsl(0, 0%, 90%);
+	background-color: hsl(0, 0%, 10%);
+}
+
+textarea {
+	flex-grow: 1;
+	width: 100%;
+	min-height: 10em;
+	padding: 0.25em;
+	line-height: 1.5;
+	color: #f8f8f2;
+	background-color: #272822;
+	tab-size: 2;
+	resize: vertical;
+}
+
+/* remove unnecessary spacing */
+.je-header {
+	margin: 0;
+}
+
+/* remove redundant labels */
+.je-tabholder--clear > .je-object__container:not([data-schemapath="root"]) > .je-object__title,
+.je-tabholder--clear > .je-indented-panel > .row > .je-object__container:not([data-schemapath="root"]) > .je-object__title,
+[data-schemapath$=".properties"] > .je-header > label,
+[data-schemapath$=".path"] .je-form-input-label {
+	display: none;
+}
+
+/* remove unnecessary editors */
+.je-switcher {
+	display: none;
+}
+
+/* remove redundant borders */
+.je-tabholder--clear > .je-object__container > .je-indented-panel,
+.je-tabholder--clear > .je-indented-panel > .row > .je-object__container > .je-indented-panel {
+	margin: 0 !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+/* add spacing between inputs */
+[data-schematype] + [data-schematype],
+.row + .row {
+	margin-top: 0.25em;
+}
+
+/* render string inputs on the same line as the label */
+[data-schematype="string"] > .form-control {
+	display: flex;
+	gap: 0.25em;
+}
+
+/* render the delete button on the same line as the string input */
+[data-schematype="array"] [data-schematype="string"] {
+	display: flex;
+	gap: 0.1em;
+}
+
+/* remove redundant borders and spacing for path array */
+[data-schemapath$=".path"] [data-schematype="string"] {
+	margin: 0.25em 0;
+	padding: 0;
+	border: none;
+}
+
+/* move the add button to the end of the properties tab */
+[data-schemapath$=".properties"] {
+	display: flex;
+	flex-direction: column;
+}
+[data-schemapath$=".properties"] > .je-header {
+	order: 1;
+}
+
+/* remove unnecessary spacing before the add button in the properties tab */
+[data-schemapath$=".properties"] > .je-header > .je-header-button-holder {
+	margin-left: 0;
+}
+
+/* add spacing above delete button in properties tab */
+[data-schemapath$=".properties"] [data-schematype="object"] > .je-indented-panel {
+	margin-bottom: 0.25em;
+}
+
+credential-manifest {
+	display: block;
+	max-width: 300px;
+	margin: 1em auto;
+	border-radius: 1em;
+	box-shadow: 0 1px 5px hsl(0, 0%, 10%);
+}
+</style>
+<script type="module">
+import "../shared/jsoneditor.min.js";
+import { CredentialManifest } from "../../dist/CredentialManifest.mjs";
+
+const EntityStylesObjectProperties = {
+	"thumbnail": {
+		required: false,
+		type: "object",
+		format: "grid",
+		properties: {
+			"uri": { required: true, type: "string" },
+			"alt": { required: false, type: "string" },
+		},
+	},
+	"hero": {
+		required: false,
+		type: "object",
+		format: "grid",
+		properties: {
+			"uri": { required: true, type: "string" },
+			"alt": { required: false, type: "string" },
+		},
+	},
+	"background": {
+		required: false,
+		type: "object",
+		format: "grid",
+		properties: {
+			"color": { required: false, type: "string" },
+		},
+	},
+	"text": {
+		required: false,
+		type: "object",
+		format: "grid",
+		properties: {
+			"color": { required: false, type: "string" },
+		},
+	},
+};
+
+const DisplayMappingObjectProperties = {
+	"path": {
+		required: false,
+		type: "array",
+		items: { type: "string" },
+	},
+	"schema": {
+		required: false,
+		type: "object",
+		properties: {
+			"type": { required: true, type: "string" },
+			"format": { required: false, type: "string" },
+		},
+	},
+	"fallback": { required: false, type: "string" },
+	"text": { required: false, type: "string" },
+};
+
+let dataFormEditor = new JSONEditor(document.querySelector("#data > form"), {
+	disable_array_delete_all_rows: true,
+	disable_array_delete_last_row: true,
+	disable_array_reorder: true,
+	disable_collapse: true,
+	disable_edit_json: true,
+	disable_properties: true,
+	no_additional_properties: true,
+	prompt_before_delete: false,
+	show_opt_in: true,
+	schema: {
+		title: "Credential Manifest",
+		type: "object",
+		format: "categories",
+		basicCategoryTitle: "Misc",
+		properties: {
+			"id": { required: true, type: "string" },
+			"name": { required: false, type: "string" },
+			"description": { required: false, type: "string" },
+			"spec_version": { required: true, type: "string" },
+			"issuer": {
+				required: true,
+				type: "object",
+				format: "categories",
+				basicCategoryTitle: "Misc",
+				properties: {
+					"id": { required: true, type: "string" },
+					"name": { required: false, type: "string" },
+					"styles": {
+						required: false,
+						type: "object",
+						properties: EntityStylesObjectProperties,
+					},
+				},
+			},
+			"output_descriptors": {
+				required: true,
+				type: "array",
+				format: "tabs-top",
+				items: {
+					type: "object",
+					format: "categories",
+					basicCategoryTitle: "Misc",
+					properties: {
+						"id": { required: true, type: "string" },
+						"schema": { required: true, type: "string" },
+						"name": { required: false, type: "string" },
+						"description": { required: false, type: "string" },
+						"styles": {
+							required: false,
+							type: "object",
+							properties: EntityStylesObjectProperties,
+						},
+						"display": {
+							required: false,
+							type: "object",
+							format: "categories",
+							properties: {
+								"title": {
+									required: false,
+									type: "object",
+									properties: DisplayMappingObjectProperties,
+								},
+								"subtitle": {
+									required: false,
+									type: "object",
+									properties: DisplayMappingObjectProperties,
+								},
+								"description": {
+									required: false,
+									type: "object",
+									properties: DisplayMappingObjectProperties,
+								},
+								"properties": {
+									required: false,
+									type: "array",
+									format: "tabs-top",
+									items: {
+										type: "object",
+										properties: {
+											...DisplayMappingObjectProperties,
+											"label": { required: true, type: "string" },
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		},
+	},
+});
+dataFormEditor.on("ready", async () => {
+	let CREDENTIAL_MANIFEST = await fetch("../shared/CredentialManifest.json").then((response) => response.json());
+	dataFormEditor.setValue(CREDENTIAL_MANIFEST);
+	update();
+});
+dataFormEditor.on("change", () => {
+	update();
+});
+
+let dataRawEditor = document.querySelector("#data > textarea");
+dataRawEditor.addEventListener("input", () => {
+	try {
+		dataFormEditor.setValue(JSON.parse(dataRawEditor.value));
+	} catch { }
+});
+
+let previewElement = null;
+function update() {
+	previewElement?.remove();
+	previewElement = new CredentialManifest;
+	try {
+		previewElement.data = dataFormEditor.getValue();
+	} catch { }
+	document.getElementById("preview").appendChild(previewElement);
+
+	if (document.activeElement !== dataRawEditor)
+		dataRawEditor.value = JSON.stringify(dataFormEditor.getValue(), null, "\t");
+}
+
+for (let textarea of document.getElementsByTagName("textarea")) {
+	textarea.addEventListener("keydown", function(event) {
+		if (event.keyCode === 9 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+			event.preventDefault();
+			let oldSelectionStart = textarea.selectionStart;
+			textarea.value = textarea.value.substring(0, textarea.selectionStart) + "\t" + textarea.value.substring(textarea.selectionEnd);
+			textarea.selectionEnd = oldSelectionStart + 1;
+		}
+	});
+}
+
+</script>