diff --git a/README.md b/README.md
index 099295ee..2cf31ac1 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
Diffuse provides a range of custom elements: audio input, data output, metadata & artwork processing, audio playback, a queue system, and much more.
-It is also aimed at consumers, providing themes and constituents, preconfigured component compositions; while simultaneously trying to be [malleable software](https://www.inkandswitch.com/essay/malleable-software/).
+It is also aimed at consumers, providing themes and facets, preconfigured component compositions; while simultaneously trying to be [malleable software](https://www.inkandswitch.com/essay/malleable-software/).
More information on the [website](https://elements.diffuse.sh/latest/).
@@ -25,7 +25,7 @@ From there you can use the custom elements as with any other custom DOM element,
import QueueEngine from "@toko/diffuse/components/engine/queue/element.js"
const queue = new QueueEngine()
-queue.setAttribute("group", "constituents")
+queue.setAttribute("group", "facets")
document.body.append(queue)
````
diff --git a/deno.jsonc b/deno.jsonc
index 302fffd8..8e8b681a 100644
--- a/deno.jsonc
+++ b/deno.jsonc
@@ -68,7 +68,7 @@
},
"exports": {
// .js
- "./common/constituents/foundation.js": "./src/common/constituents/foundation.js",
+ "./common/facets/foundation.js": "./src/common/facets/foundation.js",
"./common/element.js": "./src/common/element.js",
"./common/signal.js": "./src/common/signal.js",
"./common/worker.js": "./src/common/worker.js",
@@ -137,7 +137,7 @@
"./definitions/types.d.ts": "./src/definitions/types.d.ts",
// .ts
- "./definitions/types/sh/diffuse/output/constituent.ts": "./src/definitions/types/sh/diffuse/output/constituent.ts",
+ "./definitions/types/sh/diffuse/output/facet.ts": "./src/definitions/types/sh/diffuse/output/facet.ts",
"./definitions/types/sh/diffuse/output/playlist.ts": "./src/definitions/types/sh/diffuse/output/playlist.ts",
"./definitions/types/sh/diffuse/output/theme.ts": "./src/definitions/types/sh/diffuse/output/theme.ts",
"./definitions/types/sh/diffuse/output/track.ts": "./src/definitions/types/sh/diffuse/output/track.ts",
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 6fb56aa0..6f9ff650 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -33,6 +33,6 @@ Like orchestrator components, these are compositions of elements. Unlike orchest
## Other directories
- `src/common`: Common Javascript code shared by various components and/or themes.
-- `src/styles`: Common CSS shared by themes, the index page or constituents (part of themes).
+- `src/styles`: Common CSS shared by themes, the index page or facets.
- `src/favicons`, `src/fonts`, `src/images` are binary assets for themes and the index page (`src/index.vto`)
- `src/_components` and `src/_includes` are templates used in `.vto` templates, again themes and index page.
diff --git a/src/_components/constituents.vto b/src/_components/facets.vto
similarity index 82%
rename from src/_components/constituents.vto
rename to src/_components/facets.vto
index 341a2714..b9ceadd7 100644
--- a/src/_components/constituents.vto
+++ b/src/_components/facets.vto
@@ -4,7 +4,7 @@
{{item.title}}
diff --git a/src/_includes/layouts/constituent.vto b/src/_includes/layouts/facet.vto
similarity index 100%
rename from src/_includes/layouts/constituent.vto
rename to src/_includes/layouts/facet.vto
diff --git a/src/common/constituents/foundation.js b/src/common/facets/foundation.js
similarity index 98%
rename from src/common/constituents/foundation.js
rename to src/common/facets/foundation.js
index c0f127f4..b0415d20 100644
--- a/src/common/constituents/foundation.js
+++ b/src/common/facets/foundation.js
@@ -18,10 +18,10 @@ import SourcesOrchestrator from "@components/orchestrator/sources/element.js";
*/
const url = new URL(document.location.href);
-export const GROUP = url.searchParams.get("group") ?? "constituents";
+export const GROUP = url.searchParams.get("group") ?? "facets";
/**
- * Default config for constituents.
+ * Default config for facets.
*/
export const config = {
GROUP,
diff --git a/src/components/configurator/output/element.js b/src/components/configurator/output/element.js
index 2340841f..337e5b28 100644
--- a/src/components/configurator/output/element.js
+++ b/src/components/configurator/output/element.js
@@ -2,7 +2,7 @@ import { DiffuseElement } from "@common/element.js";
import { batch, computed, signal } from "@common/signal.js";
/**
- * @import {Constituent, Track} from "@definitions/types.d.ts"
+ * @import {Facet, Track} from "@definitions/types.d.ts"
* @import {OutputManagerDeputy, OutputElement} from "@components/output/types.d.ts"
*/
@@ -27,40 +27,40 @@ class OutputConfigurator extends DiffuseElement {
/** @type {OutputManagerDeputy} */
const manager = {
- constituents: {
+ facets: {
collection: computed(() => {
const out = this.#selectedOutput.value;
- if (out) return out.constituents.collection();
+ if (out) return out.facets.collection();
const def = this.#defaultOutput.value;
- if (def) return def.constituents.collection();
+ if (def) return def.facets.collection();
- return this.#memory.constituents.value;
+ return this.#memory.facets.value;
}),
reload: () => {
const def = this.#defaultOutput.value;
- if (def) def.constituents.reload();
+ if (def) def.facets.reload();
const out = this.#selectedOutput.value;
- if (out) return out.constituents.reload();
+ if (out) return out.facets.reload();
return Promise.resolve();
},
- save: async (newConstituents) => {
+ save: async (newFacets) => {
const def = this.#defaultOutput.value;
- if (def) await def.constituents.save(newConstituents);
+ if (def) await def.facets.save(newFacets);
const out = this.#selectedOutput.value;
- if (out) return await out.constituents.save(newConstituents);
+ if (out) return await out.facets.save(newFacets);
- this.#memory.constituents.value = newConstituents;
+ this.#memory.facets.value = newFacets;
},
state: computed(() => {
const out = this.#selectedOutput.value;
- if (out) return out.constituents.state();
+ if (out) return out.facets.state();
const def = this.#defaultOutput.value;
- if (def) return def.constituents.state();
+ if (def) return def.facets.state();
return this.#setupFinished.value ? "loaded" : "sleeping";
}),
@@ -106,7 +106,7 @@ class OutputConfigurator extends DiffuseElement {
};
// Assign manager properties to class
- this.constituents = manager.constituents;
+ this.facets = manager.facets;
this.tracks = manager.tracks;
}
@@ -117,7 +117,7 @@ class OutputConfigurator extends DiffuseElement {
);
#memory = {
- constituents: signal(/** @type {Constituent[]} */ ([])),
+ facets: signal(/** @type {Facet[]} */ ([])),
tracks: signal(/** @type {Track[]} */ ([])),
};
diff --git a/src/components/orchestrator/output/element.js b/src/components/orchestrator/output/element.js
index 0cd364db..40c0ee2b 100644
--- a/src/components/orchestrator/output/element.js
+++ b/src/components/orchestrator/output/element.js
@@ -35,8 +35,8 @@ class OutputOrchestrator extends DiffuseElement {
// PROXY OUTPUT ACTIONS
- get constituents() {
- return this.output.constituents;
+ get facets() {
+ return this.output.facets;
}
get tracks() {
diff --git a/src/components/output/common.js b/src/components/output/common.js
index 5763b5ef..83b27335 100644
--- a/src/components/output/common.js
+++ b/src/components/output/common.js
@@ -1,7 +1,7 @@
import { computed, signal, untracked } from "@common/signal.js";
/**
- * @import {Constituent, Track} from "@definitions/types.d.ts"
+ * @import {Facet, Track} from "@definitions/types.d.ts"
* @import {OutputManager, OutputManagerProperties} from "./types.d.ts"
*/
@@ -10,9 +10,9 @@ import { computed, signal, untracked } from "@common/signal.js";
* @param {OutputManagerProperties
} _
* @returns {OutputManager}
*/
-export function outputManager({ init, constituents, tracks }) {
+export function outputManager({ init, facets, tracks }) {
const c = signal(
- /** @type {Encoding extends null ? Constituent[] : Encoding} */ (constituents
+ /** @type {Encoding extends null ? Facet[] : Encoding} */ (facets
.empty()),
);
const cs = signal(
@@ -26,10 +26,10 @@ export function outputManager({ init, constituents, tracks }) {
/** @type {"loading" | "loaded" | "sleeping"} */ ("sleeping"),
);
- async function loadConstituents() {
+ async function loadFacets() {
if (init && (await init()) === false) return;
cs.value = "loading";
- c.value = await constituents.get();
+ c.value = await facets.get();
cs.value = "loaded";
}
@@ -41,16 +41,16 @@ export function outputManager({ init, constituents, tracks }) {
}
return {
- constituents: {
+ facets: {
collection: computed(() => {
- if (untracked(() => cs.value === "sleeping")) loadConstituents();
+ if (untracked(() => cs.value === "sleeping")) loadFacets();
return c.value;
}),
- reload: loadConstituents,
- save: async (newConstituents) => {
- if (untracked(() => cs.value === "sleeping")) loadConstituents();
- c.value = newConstituents;
- await constituents.put(newConstituents);
+ reload: loadFacets,
+ save: async (newFacets) => {
+ if (untracked(() => cs.value === "sleeping")) loadFacets();
+ c.value = newFacets;
+ await facets.put(newFacets);
},
state: cs.get,
},
@@ -68,7 +68,7 @@ export function outputManager({ init, constituents, tracks }) {
state: ts.get,
},
signals: {
- constituents: c,
+ facets: c,
tracks: t,
},
};
diff --git a/src/components/output/polymorphic/indexed-db/element.js b/src/components/output/polymorphic/indexed-db/element.js
index f8f1bb8f..ba5ba982 100644
--- a/src/components/output/polymorphic/indexed-db/element.js
+++ b/src/components/output/polymorphic/indexed-db/element.js
@@ -28,10 +28,10 @@ class IndexedDBOutput extends BroadcastableDiffuseElement {
/** @type {OutputManager} */
this.#manager = outputManager({
- constituents: {
+ facets: {
empty: () => undefined,
- get: () => this.#get("constituents"),
- put: (data) => this.#put("constituents", data),
+ get: () => this.#get("facets"),
+ put: (data) => this.#put("facets", data),
},
init: () => this.whenConnected(),
tracks: {
@@ -41,7 +41,7 @@ class IndexedDBOutput extends BroadcastableDiffuseElement {
},
});
- this.constituents = this.#manager.constituents;
+ this.facets = this.#manager.facets;
this.tracks = this.#manager.tracks;
}
diff --git a/src/components/output/types.d.ts b/src/components/output/types.d.ts
index ab25cbd0..e79841b8 100644
--- a/src/components/output/types.d.ts
+++ b/src/components/output/types.d.ts
@@ -1,6 +1,6 @@
import type { Signal, SignalReader } from "@common/signal.d.ts";
import type { DiffuseElement } from "@common/element.js";
-import type { Constituent, Track } from "@definitions/types.d.ts";
+import type { Facet, Track } from "@definitions/types.d.ts";
export type OutputElement =
& DiffuseElement
@@ -12,16 +12,16 @@ export type OutputManagerDeputy = Omit<
>;
export type OutputManager = {
- constituents: {
- collection: SignalReader;
+ facets: {
+ collection: SignalReader;
reload: () => Promise;
save: (
- constituents: Encoding extends null ? Constituent[] : Encoding,
+ facets: Encoding extends null ? Facet[] : Encoding,
) => Promise;
state: SignalReader<"loading" | "loaded" | "sleeping">;
};
signals: {
- constituents: Signal;
+ facets: Signal;
tracks: Signal;
};
tracks: {
@@ -33,11 +33,11 @@ export type OutputManager = {
};
export type OutputManagerProperties = {
- constituents: {
- empty(): Encoding extends null ? Constituent[] : Encoding;
- get(): Promise;
+ facets: {
+ empty(): Encoding extends null ? Facet[] : Encoding;
+ get(): Promise;
put(
- constituents: Encoding extends null ? Constituent[] : Encoding,
+ facets: Encoding extends null ? Facet[] : Encoding,
): Promise;
};
init?: () => Promise;
diff --git a/src/components/transformer/output/base.js b/src/components/transformer/output/base.js
index ab2ecc84..ba07b2e0 100644
--- a/src/components/transformer/output/base.js
+++ b/src/components/transformer/output/base.js
@@ -42,21 +42,21 @@ export class OutputTransformer extends DiffuseElement {
base() {
/** @type {OutputManagerDeputy} */
const m = {
- constituents: {
+ facets: {
collection: computed(() => {
- return this.output.signal()?.constituents?.collection();
+ return this.output.signal()?.facets?.collection();
}),
reload: () => {
- return this.output.signal()?.constituents?.reload() ??
+ return this.output.signal()?.facets?.reload() ??
Promise.resolve();
},
- save: async (newConstituents) => {
- if (newConstituents === undefined) return;
+ save: async (newFacets) => {
+ if (newFacets === undefined) return;
await this.output.whenDefined;
- await this.output.signal()?.constituents.save(newConstituents);
+ await this.output.signal()?.facets.save(newFacets);
},
state: computed(() => {
- return this.output.signal()?.constituents.state() ?? "sleeping";
+ return this.output.signal()?.facets.state() ?? "sleeping";
}),
},
tracks: {
diff --git a/src/components/transformer/output/bytes/automerge/constants.js b/src/components/transformer/output/bytes/automerge/constants.js
index 71fe1125..b44bd271 100644
--- a/src/components/transformer/output/bytes/automerge/constants.js
+++ b/src/components/transformer/output/bytes/automerge/constants.js
@@ -2,11 +2,11 @@ import * as Automerge from "@automerge/automerge";
import { base64 } from "iso-base/rfc4648";
/**
- * @import { ConstituentsDocument, PlaylistsDocument, ThemesDocument, TracksDocument } from "./types.d.ts";
+ * @import { FacetsDocument, PlaylistsDocument, ThemesDocument, TracksDocument } from "./types.d.ts";
*/
-/** @type {Automerge.Doc} */
-export const INITIAL_CONSTITUENTS_DOCUMENT = Automerge.load(
+/** @type {Automerge.Doc} */
+export const INITIAL_FACETS_DOCUMENT = Automerge.load(
base64.decode(
"hW9Kg1fmLLcAeAEQZ2dnbV0O8AUftAeEXT1QVQHsmc9lhGh1ysz4ECa3pEUgzSZG2aF8hob78u7FqeybBQYBAgMCEwIjBkACVgIHFQwhAiMCNAFCAlYCgAECfwB/AX8Bf8KTqcwGfwB/B38KY29sbGVjdGlvbn8AfwEBfwJ/AH8AAA",
),
diff --git a/src/components/transformer/output/bytes/automerge/element.js b/src/components/transformer/output/bytes/automerge/element.js
index 9def536c..dc6a99c0 100644
--- a/src/components/transformer/output/bytes/automerge/element.js
+++ b/src/components/transformer/output/bytes/automerge/element.js
@@ -5,14 +5,14 @@ import { computed } from "@common/signal.js";
import { recursivelyCloneRecords } from "@common/utils.js";
import { OutputTransformer } from "../../base.js";
import {
- INITIAL_CONSTITUENTS_DOCUMENT,
+ INITIAL_FACETS_DOCUMENT,
INITIAL_TRACKS_DOCUMENT,
} from "./constants.js";
/**
* @import { SignalReader } from "@common/signal.d.ts";
* @import { OutputManagerDeputy } from "@components/output/types.d.ts"
- * @import { ConstituentsDocument, PlaylistsDocument, ThemesDocument, TracksDocument } from "./types.d.ts"
+ * @import { FacetsDocument, PlaylistsDocument, ThemesDocument, TracksDocument } from "./types.d.ts"
*/
/**
@@ -24,14 +24,14 @@ class AutomergeBytesOutputTransformer extends OutputTransformer {
const base = this.base();
- /** @type {SignalReader>} */
- const constituentsDocument = computed(() => {
- const value = base.constituents.collection();
+ /** @type {SignalReader>} */
+ const facetsDocument = computed(() => {
+ const value = base.facets.collection();
if (isUint8Array(value)) {
return Automerge.load(value);
} else if (value == undefined) {
- return INITIAL_CONSTITUENTS_DOCUMENT;
+ return INITIAL_FACETS_DOCUMENT;
} else {
// TODO: Better error
throw new Error("Invalid data type");
@@ -54,20 +54,20 @@ class AutomergeBytesOutputTransformer extends OutputTransformer {
/** @type {OutputManagerDeputy} */
const manager = {
- constituents: {
- ...base.constituents,
- collection: computed(() => constituentsDocument().collection),
- save: async (newConstituents) => {
- const doc = Automerge.change(constituentsDocument(), (d) => {
- const clonedCollection = newConstituents.map((constituent) => {
- return recursivelyCloneRecords(constituent);
+ facets: {
+ ...base.facets,
+ collection: computed(() => facetsDocument().collection),
+ save: async (newFacets) => {
+ const doc = Automerge.change(facetsDocument(), (d) => {
+ const clonedCollection = newFacets.map((facet) => {
+ return recursivelyCloneRecords(facet);
});
d.collection = clonedCollection;
});
const bytes = Automerge.save(doc);
- await base.constituents.save(bytes);
+ await base.facets.save(bytes);
},
},
tracks: {
diff --git a/src/components/transformer/output/bytes/automerge/types.d.ts b/src/components/transformer/output/bytes/automerge/types.d.ts
index 50a65046..4b666637 100644
--- a/src/components/transformer/output/bytes/automerge/types.d.ts
+++ b/src/components/transformer/output/bytes/automerge/types.d.ts
@@ -1,11 +1,6 @@
-import type {
- Constituent,
- Playlist,
- Theme,
- Track,
-} from "@definitions/types.d.ts";
+import type { Facet, Playlist, Theme, Track } from "@definitions/types.d.ts";
-export type ConstituentsDocument = { collection: Constituent[] };
+export type FacetsDocument = { collection: Facet[] };
export type PlaylistsDocument = { collection: Playlist[] };
export type ThemesDocument = { collection: Theme[] };
export type TracksDocument = { collection: Track[] };
diff --git a/src/components/transformer/output/bytes/json/element.js b/src/components/transformer/output/bytes/json/element.js
index b0ac1cbe..3a0cc9a6 100644
--- a/src/components/transformer/output/bytes/json/element.js
+++ b/src/components/transformer/output/bytes/json/element.js
@@ -3,7 +3,7 @@ import { OutputTransformer } from "../../base.js";
/**
* @import { OutputManagerDeputy } from "@components/output/types.d.ts"
- * @import { Constituent, Track } from "@definitions/types.d.ts"
+ * @import { Facet, Track } from "@definitions/types.d.ts"
*/
/**
@@ -17,19 +17,19 @@ class JsonStringOutputTransformer extends OutputTransformer {
/** @type {OutputManagerDeputy} */
const manager = {
- constituents: {
- ...base.constituents,
+ facets: {
+ ...base.facets,
collection: computed(() => {
- const data = base.constituents.collection();
- /** @type {Constituent[]} */
+ const data = base.facets.collection();
+ /** @type {Facet[]} */
const c = parseArray(data);
return c;
}),
- save: async (newConstituents) => {
- const json = JSON.stringify(newConstituents);
+ save: async (newFacets) => {
+ const json = JSON.stringify(newFacets);
const encoder = new TextEncoder();
const bytes = encoder.encode(json);
- await base.constituents.save(bytes);
+ await base.facets.save(bytes);
},
},
tracks: {
diff --git a/src/components/transformer/output/refiner/default/element.js b/src/components/transformer/output/refiner/default/element.js
index 87532cd3..eb3a990b 100644
--- a/src/components/transformer/output/refiner/default/element.js
+++ b/src/components/transformer/output/refiner/default/element.js
@@ -16,10 +16,10 @@ class DefaultOutputRefinerTransformer extends OutputTransformer {
/** @type {OutputManagerDeputy} */
const manager = {
- constituents: {
- ...base.constituents,
+ facets: {
+ ...base.facets,
collection: computed(() => {
- return base.constituents.collection() ?? [];
+ return base.facets.collection() ?? [];
}),
},
tracks: {
@@ -35,7 +35,7 @@ class DefaultOutputRefinerTransformer extends OutputTransformer {
};
// Assign manager properties to class
- this.constituents = manager.constituents;
+ this.facets = manager.facets;
this.tracks = manager.tracks;
}
}
diff --git a/src/components/transformer/output/string/json/element.js b/src/components/transformer/output/string/json/element.js
index 35629194..703dc191 100644
--- a/src/components/transformer/output/string/json/element.js
+++ b/src/components/transformer/output/string/json/element.js
@@ -3,7 +3,6 @@ import { OutputTransformer } from "../../base.js";
/**
* @import { OutputManagerDeputy } from "@components/output/types.d.ts"
- * @import { Track } from "@definitions/types.d.ts"
*/
/**
@@ -17,15 +16,15 @@ class JsonStringOutputTransformer extends OutputTransformer {
/** @type {OutputManagerDeputy} */
const manager = {
- constituents: {
- ...base.constituents,
+ facets: {
+ ...base.facets,
collection: computed(() => {
- const json = base.constituents.collection();
+ const json = base.facets.collection();
return typeof json === "string" ? parseArray(json) : [];
}),
- save: async (newConstituents) => {
- const json = JSON.stringify(newConstituents);
- await base.constituents.save(json);
+ save: async (newFacets) => {
+ const json = JSON.stringify(newFacets);
+ await base.facets.save(json);
},
},
tracks: {
@@ -42,7 +41,7 @@ class JsonStringOutputTransformer extends OutputTransformer {
};
// Assign manager properties to class
- this.constituents = manager.constituents;
+ this.facets = manager.facets;
this.tracks = manager.tracks;
}
}
diff --git a/src/constituents/l/index.vto b/src/constituents/l/index.vto
deleted file mode 100644
index c8f9cf46..00000000
--- a/src/constituents/l/index.vto
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: layouts/constituent.vto
-base: ../../
-
-scripts:
- - constituents/l/index.js
----
-
-
diff --git a/src/definitions/index.ts b/src/definitions/index.ts
index d9cc8c0e..f9fa3ac6 100644
--- a/src/definitions/index.ts
+++ b/src/definitions/index.ts
@@ -1,4 +1,4 @@
-export * as ShDiffuseOutputConstituent from "./types/sh/diffuse/output/constituent.ts";
+export * as ShDiffuseOutputFacet from "./types/sh/diffuse/output/facet.ts";
export * as ShDiffuseOutputPlaylist from "./types/sh/diffuse/output/playlist.ts";
export * as ShDiffuseOutputTheme from "./types/sh/diffuse/output/theme.ts";
export * as ShDiffuseOutputTrack from "./types/sh/diffuse/output/track.ts";
diff --git a/src/definitions/output/constituent.json b/src/definitions/output/facet.json
similarity index 79%
rename from src/definitions/output/constituent.json
rename to src/definitions/output/facet.json
index 13446b01..39d2e422 100644
--- a/src/definitions/output/constituent.json
+++ b/src/definitions/output/facet.json
@@ -1,6 +1,6 @@
{
"lexicon": 1,
- "id": "sh.diffuse.output.constituent",
+ "id": "sh.diffuse.output.facet",
"defs": {
"main": {
"type": "record",
@@ -15,12 +15,12 @@
"description": { "type": "string" },
"html": {
"type": "string",
- "description": "The UTF8 HTML string that makes up the constituent"
+ "description": "The UTF8 HTML string that makes up the facet"
},
"name": { "type": "string" },
"url": {
"type": "string",
- "description": "An optional URL that points at the constituent; can be used to update this artifact"
+ "description": "An optional URL that points at the facet; can be used to update this artifact"
}
}
}
diff --git a/src/definitions/types.d.ts b/src/definitions/types.d.ts
index bbced8d1..2fbf9916 100644
--- a/src/definitions/types.d.ts
+++ b/src/definitions/types.d.ts
@@ -1,6 +1,4 @@
-export type {
- Main as Constituent,
-} from "./types/sh/diffuse/output/constituent.ts";
+export type { Main as Facet } from "./types/sh/diffuse/output/facet.ts";
export type {
AutoGenerate as PlaylistAutoGeneration,
diff --git a/src/constituents/examples/generate-playlist.html.txt b/src/facets/examples/generate-playlist.html.txt
similarity index 92%
rename from src/constituents/examples/generate-playlist.html.txt
rename to src/facets/examples/generate-playlist.html.txt
index ccbb7b48..db83c264 100644
--- a/src/constituents/examples/generate-playlist.html.txt
+++ b/src/facets/examples/generate-playlist.html.txt
@@ -10,7 +10,7 @@
+
diff --git a/src/themes/blur/artwork-controller/constituent.js b/src/themes/blur/artwork-controller/facet.js
similarity index 93%
rename from src/themes/blur/artwork-controller/constituent.js
rename to src/themes/blur/artwork-controller/facet.js
index 30bd84d6..03a29957 100644
--- a/src/themes/blur/artwork-controller/constituent.js
+++ b/src/themes/blur/artwork-controller/facet.js
@@ -1,4 +1,4 @@
-import foundation from "@common/constituents/foundation.js";
+import foundation from "@common/facets/foundation.js";
import ArtworkController from "@themes/blur/artwork-controller/element.js";
// Setup the prerequisite elements
diff --git a/src/themes/index.vto b/src/themes/index.vto
index 25132695..176a3d58 100644
--- a/src/themes/index.vto
+++ b/src/themes/index.vto
@@ -1,5 +1,5 @@
---
-layout: layouts/constituent.vto
+layout: layouts/facet.vto
base: ../
styles:
diff --git a/src/themes/webamp/browser/constituent.html.txt b/src/themes/webamp/browser/facet.html.txt
similarity index 82%
rename from src/themes/webamp/browser/constituent.html.txt
rename to src/themes/webamp/browser/facet.html.txt
index 0d5fcc7a..d151512d 100644
--- a/src/themes/webamp/browser/constituent.html.txt
+++ b/src/themes/webamp/browser/facet.html.txt
@@ -20,7 +20,7 @@
-
+
diff --git a/src/themes/webamp/browser/constituent.js b/src/themes/webamp/browser/facet.js
similarity index 91%
rename from src/themes/webamp/browser/constituent.js
rename to src/themes/webamp/browser/facet.js
index 0a04d601..6db28030 100644
--- a/src/themes/webamp/browser/constituent.js
+++ b/src/themes/webamp/browser/facet.js
@@ -1,4 +1,4 @@
-import foundation from "@common/constituents/foundation.js";
+import foundation from "@common/facets/foundation.js";
import BrowserElement from "@themes/webamp/browser/element.js";
foundation.features.fillQueueAutomatically();
diff --git a/src/themes/webamp/configurators/input/constituent.html.txt b/src/themes/webamp/configurators/input/facet.html.txt
similarity index 81%
rename from src/themes/webamp/configurators/input/constituent.html.txt
rename to src/themes/webamp/configurators/input/facet.html.txt
index 0629f310..8b726293 100644
--- a/src/themes/webamp/configurators/input/constituent.html.txt
+++ b/src/themes/webamp/configurators/input/facet.html.txt
@@ -20,7 +20,7 @@
-
+
diff --git a/src/themes/webamp/configurators/input/constituent.js b/src/themes/webamp/configurators/input/facet.js
similarity index 92%
rename from src/themes/webamp/configurators/input/constituent.js
rename to src/themes/webamp/configurators/input/facet.js
index fb7c4ded..c707b733 100644
--- a/src/themes/webamp/configurators/input/constituent.js
+++ b/src/themes/webamp/configurators/input/facet.js
@@ -1,4 +1,4 @@
-import foundation from "@common/constituents/foundation.js";
+import foundation from "@common/facets/foundation.js";
import InputConfigElement from "@themes/webamp/configurators/input/element.js";
import { effect } from "@common/signal.js";
diff --git a/src/themes/webamp/constituent.css b/src/themes/webamp/facet.css
similarity index 100%
rename from src/themes/webamp/constituent.css
rename to src/themes/webamp/facet.css