kireji 0.8.0 → 0.8.2

package/README.md

@@ -1,7 +1,7 @@
 # Kireji - *Web Framework*
 > **<sub>Part of the Kireji Project</sub>**<br><sup><i>omnia ex una linea</i></sup>
 
-The **Kireji Web Framework** is a reactive full-stack web framework that uses the MPHF Coordinate System and the MVC paradigm to build multi-origin web app ecosystems. It offers a routing system that achieves the information-theoretic lower bound of data compression, enabling comprehensive deep linking, session bookmarking without user accounts or local storage, peer-to-peer data sharing without uploads or accounts, and cross-origin communication without cookies or CORS.
+The **Kireji Web Framework** is a reactive full-stack web framework that can build and serve web apps and multi-origin web app ecosystems. It stores its runtime state in its routing system, achieving the information-theoretic lower bound of data compression. This enables comprehensive deep linking, session bookmarking without user accounts or local storage, peer-to-peer data sharing without uploads or accounts, and cross-origin communication without cookies or CORS.
 ## The Kireji Project
 The Kireji Project poses a question: **What if we could treat every web page as a point in a unified, mathematically mapped space?**
 
@@ -13,7 +13,7 @@ The Kireji Project poses a question: **What if we could treat every web page as
 
 ## Usage
 
-> <sub>Note: This framework is currently under heavy development in early alpha. Expect large, breaking changes with each version and some awkward features. Check out the [Demo App Ecosystem](https://github.com/kireji-app/demo#readme) to see the framework in action. Check back later to see if the package has been updated.</sub>
+> <sub>Note: This framework is currently in alpha. Expect breaking changes with each version. Check out the [Demo App Ecosystem](https://github.com/kireji-app/demo#readme) to see a live project that uses this framework. Check back later to see if the framework has advanced into beta.</sub>
 
 ```bash
 # In an empty git repo.
@@ -104,8 +104,8 @@ The Kireji Project is in **early research and development**.
 
 [![kireji on npm](https://img.shields.io/npm/v/kireji?style=for-the-badge&labelColor=CB3837&logo=npm&logoColor=white&label=NPM+package&color=212121)](https://www.npmjs.com/kireji)
 <br>[![Project Status: Alpha](https://img.shields.io/badge/status-alpha-212121?style=for-the-badge&labelColor=181717&logo=github&logoColor=white)](https://www.repostatus.org/#alpha)
-<br>[![Commits](https://img.shields.io/github/commit-activity/t/kireji-app/kireji?style=for-the-badge&labelColor=181717&color=212121&logo=github&logoColor=white)](https://github.com/kireji-app/demo/commits/)
-<br>[![Last Commit](https://img.shields.io/github/last-commit/kireji-app/kireji?style=for-the-badge&labelColor=181717&color=212121&logo=github&logoColor=white)](https://github.com/kireji-app/demo)
+<br>[![Commits](https://img.shields.io/github/commit-activity/t/kireji-app/kireji?style=for-the-badge&labelColor=181717&color=212121&logo=github&logoColor=white)](https://github.com/kireji-app/kireji/commits/)
+<br>[![Last Commit](https://img.shields.io/github/last-commit/kireji-app/kireji?style=for-the-badge&labelColor=181717&color=212121&logo=github&logoColor=white)](https://github.com/kireji-app/kireji)
 <br>[![Copyright © 2023-2025 <a href="https://www.ejaugust.com">Eric Augustinowicz</a>](https://img.shields.io/badge/2023%20--%202025-Eric_Augustinowicz-212121?labelColor=007ec6&style=for-the-badge&logoColor=white&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTk3cHgiIGhlaWdodD0iMTk3cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIj4KIDxkZWZzPgogIDxtYXNrIGlkPSJtYXNrIj4KICAgPGNpcmNsZSBjeD0iOTgiIGN5PSI5OCIgcj0iOTgiIGZpbGw9IndoaXRlIiAvPgogICA8Y2lyY2xlIGN4PSI5OCIgY3k9Ijk4IiByPSI3OCIgZmlsbD0iYmxhY2siIC8+CiAgIDxjaXJjbGUgY3g9Ijk4IiBjeT0iOTgiIHI9IjU1IiBmaWxsPSJ3aGl0ZSIgLz4KICAgPGNpcmNsZSBjeD0iOTgiIGN5PSI5OCIgcj0iMzAiIGZpbGw9ImJsYWNrIiAvPgogICA8cmVjdCB4PSIxMTUiIHk9Ijg1IiB3aWR0aD0iNDUiIGhlaWdodD0iMjUiIGZpbGw9ImJsYWNrIiAvPgogIDwvbWFzaz4KIDwvZGVmcz4KIDxwYXRoIGQ9Ik0gOTgsMCBBIDk4LDk4IDAgMSAxIDk4LDE5NiBBIDk4LDk4IDAgMSAxIDk4LDAgWiIgZmlsbD0id2hpdGUiIG1hc2s9InVybCgjbWFzaykiIC8+Cjwvc3ZnPg==)](http://www.ejaugust.com/)
 <br>[![Released under MIT License](https://img.shields.io/badge/License-MIT-212121?labelColor=007ec6&style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTp3aGl0ZTtzdHJva2Utd2lkdGg6Ljk5OTc1MDAyO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjYuNDAwMDAwMTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0iTTQuMjUgOS41SDZNNC4yNSA3Ljc1SDZtMi4wMjMtNS41YzAgLjY5LS45MDQgMS4yNS0yLjAyMyAxLjI1LTEuMTE5IDAtMi4wMjItLjU1OS0yLjAyMi0xLjI1QzMuOTc4IDEuNTU4IDQuODggMSA2IDFjMS4xMTkgMCAyLjAyMy41NTggMi4wMjMgMS4yNXpNNiAxMVYzLjUiLz48L3N2Zz4=&logoColor=white)](https://github.com/kireji-app/kireji/LICENSE.md)
 <br>[![Sponsor this Project](https://img.shields.io/badge/Sponsor-212121?labelColor=red&style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTciIGhlaWdodD0iNDcwIj48cGF0aCBkPSJNMTQwIDIwQzczIDIwIDIwIDc0IDIwIDE0MGMwIDEzNSAxMzYgMTcwIDIyOCAzMDMgODgtMTMyIDIyOS0xNzMgMjI5LTMwMyAwLTY2LTU0LTEyMC0xMjAtMTIwLTQ4IDAtOTAgMjgtMTA5IDY5LTE5LTQxLTYwLTY5LTEwOC02OXoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNDAiIGZpbGw9Im5vbmUiLz48L3N2Zz4=&logoColor=white)](https://github.com/sponsors/EJAugust)

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.8.0",
+ "version": "0.8.2",
  "description": "A web framework for stateful, entropy-perfect, multi-origin web applications. Currently in alpha. Expect breaking changes for version 0. Use with caution!",
  "files": [
   "src/",

package/src/application-goto.js

@@ -1,11 +1,14 @@
 const targetLocation = (+_.local ? `http://${HOST}.localhost:${_.port}` : `https://${HOST}`) + encodePathname(_.routeID)
 document.body.classList.add("unhydrated")
 
-// Press the button before navigation starts.
-const instanceIndex = desktop.windows.instances.findIndex(window => window.application.host === HOST)
-if (instanceIndex !== -1) {
- const task = document.querySelectorAll(`task-bar>button.task`)[instanceIndex]
- task.classList.add("preview-pressed", "pressed")
+if (_.includeDesktop === "demo" || (!production && (_.includeDesktop === "full" || _.includeDesktop === 'local-only'))) {
+
+ // Press the task-bar button before navigation starts.
+ const instanceIndex = desktop.windows.instances.findIndex(window => window.application.host === HOST)
+ if (instanceIndex !== -1) {
+  const task = document.querySelectorAll(`task-bar>button.task`)[instanceIndex]
+  task.classList.add("preview-pressed", "pressed")
+ }
 }
 
 location = targetLocation

package/src/build.js

@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+
+/** @type {(_: IEcosystem, compressedSubjectOrigins: string) => void} */
 function ƒ(_, compressedSubjectOrigins) {
 
  // Initialization
@@ -520,7 +522,7 @@ function ƒ(_, compressedSubjectOrigins) {
     packAndMap(url) {
      const sourceFile = this
      const script = sourceFile.lines.join("\n")
-     return +_.mapping
+     return _.mapping === "enabled"
       ? script +
       `
 //${"#"} sourceMappingURL=data:application/json;charset=utf-8;base64,${btoaUnicode(sourceFile.getMap())}${url
@@ -591,7 +593,6 @@ function ƒ(_, compressedSubjectOrigins) {
     imageSources = [],
     earlyImageSources = [],
     partsByHost = {},
-    preHydrationArchive = serialize(_),
     resolveRelativeHost = (relativeHost, base) => {
 
      if (typeof relativeHost !== "string")
@@ -891,8 +892,74 @@ function ƒ(_, compressedSubjectOrigins) {
       part.inheritors.sort((a, b) => (b.totalInheritors - a.totalInheritors) || (a.host > b.host ? 1 : -1))
 
      return totalInheritors
+    },
+    configureArchiveContent = () => {
+     // TODO: Consider merging user landing model with stock landing model instead of replacing it.
+     const landingModel = JSON.parse(_["landing-model.json"])
+
+     let desktopFeatures = 3
+
+     if (_.includeColor === "none") {
+      delete _.parts.desktop.color
+      delete landingModel.parts.desktop.color
+      desktopFeatures--
+     } else if (_.includeColor === "dark" || (_.includeColor === "debug-light" && production)) {
+      delete _.parts.desktop.color.light
+      landingModel.parts.desktop.color = "light"
+     } else if (_.includeColor === "light" || (_.includeColor === "debug-dark" && production)) {
+      delete _.parts.desktop.color.dark
+      landingModel.parts.desktop.color = "dark"
+     }
+
+     if (_.includeEra === "none") {
+      delete _.parts.desktop.era
+      delete landingModel.parts.desktop.era
+      desktopFeatures--
+     } else if (_.includeEra === "vintage" || (_.includeEra === "debug-modern" && production)) {
+      delete _.parts.desktop.era.modern
+      landingModel.parts.desktop.era = "vintage"
+     } else if (_.includeEra === "modern" || (_.includeEra === "debug-vintage" && production)) {
+      delete _.parts.desktop.era.vintage
+      landingModel.parts.desktop.era = "modern"
+     }
+
+     if (_.includeKirejiApp === "none" || (_.includeKirejiApp === "full" && production)) {
+      delete _.app
+      delete landingModel.app
+     }
+
+     const removeDesktopFeatures = () => {
+      delete _.parts.desktop.icons
+      delete landingModel.parts.desktop.icons
+      delete _.parts.desktop.windows
+      delete landingModel.parts.desktop.windows
+      delete _.parts.desktop["task-bar"].tray
+     }
+
+     if (_.includeDesktop === "none" || (production && _.includeDesktop === "local-only")) {
+      removeDesktopFeatures()
+      delete _.parts.desktop["task-bar"]
+      delete landingModel.parts.desktop.taskBar
+      desktopFeatures--
+     } else if (_.includeDesktop === "menu-only" || (production && _.includeDesktop === "full")) {
+      removeDesktopFeatures()
+      delete _.parts.desktop["task-bar"].tray
+     }
+
+     if (!desktopFeatures) {
+      delete _.parts.desktop
+      delete landingModel.parts.desktop
+     }
+
+     _["landing-model.json"] = JSON.stringify(landingModel)
+
+     Object.defineProperties(_, {
+      landingModel: { value: landingModel },
+      preHydrationArchive: { value: serialize(_) }
+     })
     }
 
+   configureArchiveContent()
    hydratePartsRecursive(_)
    hydrateSubjectOrigins()
    countAndSortInheritorsRecursive(_.parts.abstract.part)
@@ -954,14 +1021,15 @@ function ƒ(_, compressedSubjectOrigins) {
 
   logScope(1, "\nComputing Landing Hash & Route ID", hashLog => {
 
-   const landingModel = JSON.parse(_["landing-model.json"])
-   const landingRouteID = _.modelToRouteID(landingModel)
-   const landingHash = encodeSegment(landingRouteID)
-
    _.define({
-    landingHash: { value: landingHash },
-    landingModel: { value: landingModel },
-    landingRouteID: { value: landingRouteID },
+    landingRouteID: {
+     value: _.modelToRouteID(_.landingModel)
+    },
+    landingHash: {
+     resolve() {
+      return encodeSegment(this.landingRouteID)
+     }
+    }
    })
 
    hashLog("Landing hash: " + _.landingHash)
@@ -982,13 +1050,20 @@ function ƒ(_, compressedSubjectOrigins) {
 }
 
 ƒ({
+ // TODO: fix source mapping bugs.
  verbosity: "1",
- // TODO: Fix source mapping bugs.
- mapping: "0",
  change: "major",
  hangHydration: "0",
- haltHydration: "0",
  defaultApplicationHost: "kireji.app",
  port: "3000",
- showWarning: "1"
+ mapping: "disabled",
+ resetLocalState: "enabled",
+ haltHydration: "disabled",
+ includeWarning: "enabled",
+ includeColor: "full",
+ includeEra: "full",
+ includeMenuApps: "full",
+ includeUpdates: "full",
+ includeKirejiApp: "full",
+ includeDesktop: "full"
 })

package/src/kireji.schema.json

@@ -0,0 +1,205 @@
+{
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "KirejiConfig",
+ "description": "Schema for the kireji.json configuration file.",
+ "type": "object",
+ "properties": {
+  "includeColor": {
+   "description": "Determines which color mode features will be included in the ecosystem.",
+   "oneOf": [
+    {
+     "const": "none",
+     "description": "The color component will never be included."
+    },
+    {
+     "const": "light",
+     "description": "Dark mode will never be included."
+    },
+    {
+     "const": "dark",
+     "description": "Light mode will never be included."
+    },
+    {
+     "const": "debug-dark",
+     "description": "Dark mode will only be included in local builds."
+    },
+    {
+     "const": "debug-light",
+     "description": "Light mode will only be included in local builds."
+    },
+    {
+     "const": "full",
+     "description": "The full color component will always be included."
+    }
+   ]
+  },
+  "includeEra": {
+   "description": "Determines which era mode features will be included in the ecosystem.",
+   "oneOf": [
+    {
+     "const": "none",
+     "description": "The era component will never be included."
+    },
+    {
+     "const": "vintage",
+     "description": "Modern mode will never be included."
+    },
+    {
+     "const": "modern",
+     "description": "Vintage mode will never be included."
+    },
+    {
+     "const": "debug-modern",
+     "description": "Modern mode will only be included in local builds."
+    },
+    {
+     "const": "debug-vintage",
+     "description": "Vintage mode will only be included in local builds."
+    },
+    {
+     "const": "full",
+     "description": "The full era component will always be included."
+    }
+   ]
+  },
+  "includeMenuApps": {
+   "description": "Determines whether a list of apps should be included in the menu.",
+   "oneOf": [
+    {
+     "const": "none",
+     "description": "Apps will never appear in the menu."
+    },
+    {
+     "const": "local-only",
+     "description": "Apps will only appear in the menu in local builds."
+    },
+    {
+     "const": "full",
+     "description": "Apps will always appear in the menu."
+    }
+   ]
+  },
+  "includeUpdates": {
+   "description": "Determines whether or not the version updating features should be included in the menu.",
+   "oneOf": [
+    {
+     "const": "none",
+     "description": "Update features will never appear in the menu."
+    },
+    {
+     "const": "local-only",
+     "description": "Update features will only appear in the menu in local builds."
+    },
+    {
+     "const": "full",
+     "description": "Update features will always appear in the menu."
+    }
+   ]
+  },
+  "includeKirejiApp": {
+   "description": "Determines whether or not the Kireji IDE should be included in the ecosystem.",
+   "oneOf": [
+    {
+     "const": "none",
+     "description": "kireji.app will never be included."
+    },
+    {
+     "const": "full",
+     "description": "kireji.app will only be included in local builds."
+    },
+    {
+     "const": "demo",
+     "description": "kireji.app will always be included (used only for Demo App Ecosystem)."
+    }
+   ]
+  },
+  "includeDesktop": {
+   "description": "Determines whether or not the ecosystem should include desktop-like features.",
+   "oneOf": [
+    {
+     "const": "none",
+     "description": "The desktop experience will never be included."
+    },
+    {
+     "const": "menu-only",
+     "description": "Only the menu will be included, and it will always be included."
+    },
+    {
+     "const": "local-only",
+     "description": "The full desktop experience will only be included in local builds."
+    },
+    {
+     "const": "full",
+     "description": "The menu will always be included. The desktop experience will only be included in local builds."
+    },
+    {
+     "const": "demo",
+     "description": "The full desktop experience will always be included (used only for Demo App Ecosystem)."
+    }
+   ]
+  },
+  "change": {
+   "description": "Represents the severity of the API change for semantic versioning.",
+   "oneOf": [
+    {
+     "const": "major",
+     "description": "A breaking change which breaks existing hash assignments."
+    },
+    {
+     "const": "minor",
+     "description": "A non-breaking change which adds new hash assignments."
+    },
+    {
+     "const": "patch",
+     "description": "A non-breaking change which does not impact hash assignments at all."
+    }
+   ]
+  },
+  "verbosity": {
+   "description": "A number used to control the detail in logs. Only messages with a priority <= this number will be logged.",
+   "type": "string"
+  },
+  "defaultApplicationHost": {
+   "description": "The host of the desired default app. The server will redirect to this when testing locally.",
+   "type": "string"
+  },
+  "port": {
+   "description": "The internal port (typically 3000-4000) where the server will be hosted.",
+   "type": "string"
+  },
+  "mapping": {
+   "description": "Determines whether or not the artifact should be output with embedded source map data.",
+   "enum": [
+    "disabled",
+    "enabled"
+   ]
+  },
+  "haltHydration": {
+   "description": "If enabled, halts the hydration of the application completely. Useful for debugging FOUC.",
+   "enum": [
+    "disabled",
+    "enabled"
+   ]
+  },
+  "includeWarning": {
+   "description": "If enabled, a warning line appears at the top of all applications regarding alpha status.",
+   "enum": [
+    "disabled",
+    "enabled"
+   ]
+  },
+  "resetLocalState": {
+   "description": "If enabled, applications running locally will reset to their landing hash when the service worker is replaced.",
+   "enum": [
+    "disabled",
+    "enabled"
+   ]
+  },
+  "hangHydration": {
+   "description": "A string representing how long the main thread should hang to simulate loading. Useful for debugging FOUC.",
+   "type": "string"
+  }
+ },
+ "required": [],
+ "additionalProperties": false
+}

package/src/part.css_.js

@@ -1,8 +1,14 @@
+const
+ includeWarning = _.includeWarning === "enabled",
+ includeDesktop = _.includeDesktop === "demo" || (!production && (_.includeDesktop === "full" || _.includeDesktop === "local-only"))
+
 return /* css */`
 
 html, body {
- --warning-height: ${+_.showWarning ? "26px" : "0px"};
-}${+_.showWarning ? `
+ --warning-height: ${includeWarning ? "26px" : "0px"};
+ ${includeDesktop ? "" : `--title-bar-height: 0px !important;
+ --task-bar-height: 0px !important;`}
+}${includeWarning ? `
 
 @media (width < 390px) {
 

package/src/part.html_.js

@@ -1,6 +1,18 @@
 const
  title = sanitizeAttr(application.title ?? "Untitled App"),
- icon = application.placeholderImage("part.png")
+ icon = application.placeholderImage("part.png"),
+ classes = [...application.classes],
+ includeDesktop = _.includeDesktop === "demo" || (!production && (_.includeDesktop === "full" || _.includeDesktop === "local-only")),
+ includeMenu = includeDesktop || _.includeDesktop === "menu-only" || _.includeDesktop === "full"
+
+if (_.includeEra !== "none")
+ classes.push(era.arm.key)
+
+if (_.includeColor !== 'none')
+ classes.push(color.arm.key)
+
+if (includeMenu)
+ classes.push(taskBar.menu.classes)
 
 return _.injectImages(/* html */`<!DOCTYPE html>
 <html lang=en>
@@ -15,25 +27,25 @@ return _.injectImages(/* html */`<!DOCTYPE html>
   <link rel="canonical" href="https://${application.host}${application.canonicalPathname ?? "/"}" />
   <!-- <link rel="manifest"${worker.manifestLink}/> -->
   <style id="user-css">${_["part.css"]}</style>
-  <style id="era-css">${era["part.css"]}</style>
-  <style id="color-css">${color["part.css"]}</style>
+  ${_.includeEra === "none" ? "" : /*html*/`<style id="era-css">${era["part.css"]}</style>`}
+  ${_.includeColor === "none" ? "" : /*html*/`<style id="color-css">${color["part.css"]}</style>`}
   <style id="application-css">${application["part.css"]}</style>
  </head>
- <body class="unhydrated ${[era.arm.key, color.arm.key, ...taskBar.menu.classes, ...application.classes].join(" ")}">
-  ${+_.showWarning ? `<warning->🚧 App in Alpha. Features subject to change/break without notice.</warning->` : ""}
-  <title-bar autofocus tabIndex=0>
+ <body class="unhydrated ${classes.join(" ")}">
+  ${_.includeWarning === "enabled" ? /*html*/`<warning->🚧 App in Alpha. Features subject to change/break without notice.</warning->` : ""}
+  ${includeDesktop ? `<title-bar autofocus tabIndex=0>
    <img class="part-icon" src="${icon}"/>
    <span id=application-title>${title}</span>
    <flex-spacer></flex-spacer>
    <button class=hide ${windows.pointAttr("hidePoint")}></button>
    <button class=restore ${windows.pointAttr("restorePoint")} disabled></button>
    <button class=close ${windows.pointAttr("closePoint")}></button>
-  </title-bar>
+  </title-bar>` : ""}
   <wallpaper- class=app-container id=${application.host.replaceAll(".", "_")} tabIndex=0 ${application.attributes.join(" ")}>
   ${application["part.html"]}
   </wallpaper->
   <!-- windows -->
-  ${taskBar["part.html"]}
+  ${includeMenu ? taskBar["part.html"] : ""}
   ${worker["part.html"]}
  </body>
 </html>`)

package/src/parts/abstract/part.json

@@ -1,3 +1,3 @@
 {
- "extends": "coming-soon"
+ "extends": "mix"
 }

package/src/parts/abstract/scroller/point-thumb.js

@@ -4,7 +4,7 @@ const rangeLimit = BigInt(Math.trunc(Number(scrollerLimit) * (1 - scroller.conta
 
 pointer.handle({
  drag(pointerEvent) {
-  const positionalRouteID = markedRouteID + BigInt(Math.trunc((pointerEvent.clientY - POINTER_EVENT.clientY) / (scroller.scrollBar.clientHeight - (era.arm === era.vintage ? 2 * scroller.scrollBar.clientWidth : 0)) * Number(scrollerLimit)))
+  const positionalRouteID = markedRouteID + BigInt(Math.trunc((pointerEvent.clientY - POINTER_EVENT.clientY) / (scroller.scrollBar.clientHeight - (era && era.arm === era.vintage ? 2 * scroller.scrollBar.clientWidth : 0)) * Number(scrollerLimit)))
   const newRouteID = positionalRouteID < 0n ? 0n : (positionalRouteID > rangeLimit) ? rangeLimit : positionalRouteID
   if (newRouteID !== scroller.routeID) scroller.setRouteID(newRouteID)
  },

package/src/parts/core/client/async-install.js

@@ -6,7 +6,7 @@ await Promise.all([
 if (!production) {
 
  // To debug FOUC.
- if (+_.haltHydration) {
+ if (_.haltHydration === "enabled") {
   warn('Intentionally blocked hydration.')
   return
  }

package/src/parts/core/part.json

@@ -1,3 +1,3 @@
 {
- "extends": "coming-soon"
+ "extends": "mix"
 }

package/src/parts/core/server/sync-install.js

@@ -107,7 +107,7 @@ logScope(1, `\nCreating Deployment Artifact`, log => {
 })
 
 logScope(1, `\nDeployment Artifact Stats`, () => {
- logStringSize(1, preHydrationArchive)
+ logStringSize(1, _.preHydrationArchive)
 })
 
 const httpServer = require('http').createServer((request, response) => logServerScope(

package/src/parts/core/worker/async-take-control.js

@@ -19,7 +19,7 @@ await logScope(1, 'Ensuring ServiceWorker Controller', async log => {
 
   if (!production) {
    nav.serviceWorker.oncontrollerchange = () => {
-    if (+_.resetLocalState) {
+    if (_.resetLocalState === "enabled") {
      /* Reset to the landing hash on service worker update (useful during
         development that changes the part arrangement frequently. */
      location.assign(location.origin + `/${_.version}/`)

package/src/parts/desktop/era/modern/part.css

@@ -3,13 +3,17 @@ body {
  --bottom-shadow: 0 2px 7px #0002;
  --icon-size: 29px;
  --spacing: 14px;
- --task-bar-height: calc(var(--icon-size) + 2 * var(--spacing));
  --title-bar-icon-size: 22px;
  --title-bar-height: calc(var(--title-bar-icon-size) + var(--spacing));
  --default-font-size: 13px;
  font: var(--default-font-size) var(--system-ui);
 }
 
+body,
+task-bar {
+ --task-bar-height: calc(var(--icon-size) + 2 * var(--spacing));
+}
+
 title-bar {
  --icon-size: var(--title-bar-icon-size);
  box-shadow: inset 0 0 0 1px var(--bg-un-mode);

package/src/parts/desktop/era/vintage/static.css

@@ -172,7 +172,6 @@ scroll-bar>thumb- {
 body {
  --bottom: calc(var(--task-bar-height) - 4px);
  --spacing: 12px;
- --task-bar-height: 28px;
  --title-bar-height: 18px;
  --icon-size: var(--task-bar-height);
  --deep-inset:
@@ -194,6 +193,11 @@ body {
  image-rendering: pixelated;
 }
 
+body,
+task-bar {
+ --task-bar-height: 28px;
+}
+
 body.dark {
  --deep-inset:
   inset -1px -1px var(--bg-light-est),

package/src/parts/desktop/task-bar/menu/menu.html_.js

@@ -1,18 +1,29 @@
-return `<task-menu style="${menu.arm.style}">
- <ul id=application-control>${Object.entries(_.menuApplications).map(([host, application]) => {
- const isCurrentApplication = application === _.application
- return `
+const
+ controls = [],
+ sections = []
+
+if (_.includeUpdates === "full" || (!production && _.includeUpdates === "local-only"))
+ controls.push(update["part.html"])
+
+if (_.includeColor === "full" || (!production && _.includeColor.startsWith("debug-")))
+ controls.push(color["part.html"])
+
+if (_.includeEra === "full" || (!production && _.includeEra.startsWith("debug-")))
+ controls.push(era["part.html"])
+
+if (_.includeMenuApps === "full" || (!production && _.includeMenuApps === "local-only"))
+ sections.push(`<ul id=application-control>${Object.entries(_.menuApplications).map(([host, application]) => {
+  const isCurrentApplication = application === _.application
+  return `
  <li class=task-link${isCurrentApplication ? ` data-here` : ""}>
   <a ${isCurrentApplication ? "" : _.pointAttr()} href=https://${host}>
    <img src="${application.placeholderImage("part.png")}" class=part-icon />
    <span class=label>${application.titleMenu ?? application.title}</span>
   </a>
  </li>`
-}).join("")}</ul>
- <hr>
- <section id="settings">
-  ${update["part.html"]}
-  ${color["part.html"]}
-  ${era["part.html"]}
- </section>
-</task-menu>`
+ }).join("")}</ul>`)
+
+if (controls.length)
+ sections.push(`\n <hr>\n <section id="settings">${controls.join(`\n  `)}</section>`)
+
+return `<task-menu style="${menu.arm.style}">${sections.join(`\n `)}</task-menu>`

package/src/parts/desktop/task-bar/part.html_.js

@@ -1 +1,3 @@
-return `<task-bar tabIndex=0>${taskBar.menu["part.html"]}${windows.instances.map((window, index) => windows.renderTaskHTML(window, index)).join("")}<flex-spacer></flex-spacer>${taskBar.tray["part.html"]}</task-bar>`
+const includeDesktop = _.includeDesktop === "demo" || (!production && (_.includeDesktop === "full" || _.includeDesktop === "local-only"))
+
+return `<task-bar tabIndex=0>${taskBar.menu["part.html"]}${includeDesktop ? windows.instances.map((window, index) => windows.renderTaskHTML(window, index)).join("") : ""}<flex-spacer></flex-spacer>${includeDesktop ? taskBar.tray["part.html"] : ""}</task-bar>`

package/src/parts/desktop/task-bar/view-hydrate.js

@@ -5,7 +5,7 @@ client.promise.then(() => {
  if (taskBar.menu.arm !== taskBar.menu.closed)
   Q("task-bar>button.menu").focus()
  else
-  Q("title-bar").focus()
+  Q("title-bar")?.focus()
 
  document.addEventListener('pointerdown', pointerEvent => {
   if (taskBar.menu.arm !== taskBar.menu.closed && !inRect(pointerEvent, taskBar.menu.element.getBoundingClientRect())) {

package/src/parts/desktop/type.d.ts

@@ -2,11 +2,11 @@ declare interface IDesktop
  extends IPartsApplication {
 
  // Subparts.
- readonly color: IColor
- readonly era: IEra
- readonly taskBar: ITaskBar
- readonly icons: IDesktopIcons
- readonly windows: IDesktopWindows
+ readonly color?: IColor
+ readonly era?: IEra
+ readonly taskBar?: ITaskBar
+ readonly icons?: IDesktopIcons
+ readonly windows?: IDesktopWindows
 }
 
 declare const desktop: IDesktop

package/src/parts/desktop/windows/point.js

@@ -3,7 +3,7 @@ pointer.handle({
   const window = windows.instances[INSTANCE_INDEX]
   if (_.application === window.application) {
    const focusElement = Q(`body>:not(task-bar):focus-within, body>task-bar>button.task.pressed:focus`)
-   if (focusElement && desktop.era.arm === desktop.era.vintage)
+   if (focusElement && desktop.era && desktop.era.arm === desktop.era.vintage)
     _.gotoApplication("desktop.parts")
    else TARGET_ELEMENT.focus()
   } else _.gotoApplication(window.application.host)

package/src/static.css

@@ -301,6 +301,7 @@ body.dark warning- {
  font-size: revert;
 }
 
+/* TODO: Make title-bar and other desktop experience css dynamic (because it can be disabled in the config). */
 title-bar {
  display: flex;
  flex-flow: row nowrap;

package/src/type.d.ts

@@ -1,5 +1,6 @@
 declare interface IEcosystem
  extends IMix<null, ITopLevelDomainAny>,
+ IKirejiConfig,
  IWebComponent {
 
  // Subparts.
@@ -10,10 +11,6 @@ declare interface IEcosystem
  readonly parts: IParts
 
  // Serialized Properties.
- /** One of three strings representing the severity of the API change. Used to automatically compute the correct semantic version at build time. */
- readonly "change": "major" | "minor" | "patch"
- /** A number used to control the detail in logs. Only messages with a priority less than or equal to this number will be logged. */
- readonly "verbosity": number
  /** The git branch for the current build version. */
  readonly "branch": string
  /** Returns a packed version of the entire repo as a stand-alone script that boots the ecosystem. */
@@ -26,16 +23,12 @@ declare interface IEcosystem
  readonly "ETag": string
  /** The current unix timestamp, acquired using the high-precision performance.now() + performance.timeOrigin. */
  readonly "now": DOMHighResTimeStamp
- /** The host of the desired default app. The server will redirect to this when the user visits localhost at the designated port to test locally. */
- readonly "defaultApplicationHost": string
  /** A stylesheet containing CSS variables with `url()` values that correspond to images. Used to seamlessly hand-off image rendering from the server-rendered page to the client-rendered page without modifying the DOM. */
  readonly "images.css": string
  /** The current application's PWA manifest. */
  readonly "manifest.json": string
  /** A JSON object serializing the desired landing model of the ecosystem. */
  readonly "landing-model.json": string
- /** The internal port (typically between 3000 and 4000) where the server will be hosted for both the reverse proxy in production and when testing locally via `localhost`. */
- readonly "port": number
  /** Returns the given HTML document with images (using `early-*` compressed images for server- or worker-rendered snapshots) into the head as style tag(s). This is used for enhancing the first page appearance when using server-side rendering. When injecting early images, it scans the given document for image usages to determine which early images the snapshot requires. */
  readonly injectImages(HTML_DOCUMENT: string): string
  /** Handles standard anchor link clicks in one of four ways:
@@ -69,7 +62,104 @@ declare interface IEcosystem
  /** A boolean that is set to `true` as soon as the route ID is set for the first time. */
  readonly initialized: undefined | true
 }
+declare interface IKirejiConfig {
+ /** * Determines which color mode features will be included in the ecosystem. 
+  * - `none`: The color component will never be included.
+  * - `light`: Dark mode will never be included.
+  * - `dark`: Light mode will never be included.
+  * - `debug-dark`: Dark mode will only be included in local builds.
+  * - `debug-light`: Light mode will only be included in local builds.
+  * - `full`: The full color component will always be included.
+  * * @remarks When the menu and both colors are included, the color control will appear in the menu.
+  */
+ readonly "includeColor": "none" | "light" | "dark" | "debug-dark" | "debug-light" | "full";
 
+ /** * Determines which era mode features will be included in the ecosystem.
+  * - `none`: The era component will never be included.
+  * - `vintage`: Modern mode will never be included.
+  * - `modern`: Vintage mode will never be included.
+  * - `debug-modern`: Modern mode will only be included in local builds.
+  * - `debug-vintage`: Vintage mode will only be included in local builds.
+  * - `full`: The full era component will always be included.
+  * * @remarks When the menu and both eras are included, the era control will appear in the menu.
+  */
+ readonly "includeEra": "none" | "vintage" | "modern" | "debug-modern" | "debug-vintage" | "full";
+
+ /** * Determines whether a list of apps should be included in the menu.
+  * - `none`: Apps will never appear in the menu.
+  * - `local-only`: Apps will only appear in the menu in local builds.
+  * - `full`: Apps will always appear in the menu.
+  * * @remarks Has no effect on builds where the menu is not included or when there are no defined menu apps.
+  */
+ readonly "includeMenuApps": "none" | "local-only" | "full";
+
+ /** * Determines whether or not the version updating features should be included in the menu.
+  * - `none`: Update features will never appear in the menu.
+  * - `local-only`: Update features will only appear in the menu in local builds.
+  * - `full`: Update features will always appear in the menu.
+  * * @remarks Has no effect on builds where the menu is not included.
+  */
+ readonly "includeUpdates": "none" | "local-only" | "full";
+
+ /** * Determines whether or not the Kireji IDE should be included in the ecosystem.
+  * - `none`: kireji.app will never be included.
+  * - `full`: kireji.app will only be included in local builds.
+  * - `demo`: kireji.app will always be included (used only for Demo App Ecosystem).
+  */
+ readonly "includeKirejiApp": "none" | "full" | "demo";
+
+ /** * Determines whether or not the ecosystem should include desktop-like features.
+  * - `none`: The desktop experience will never be included.
+  * - `menu-only`: Only the menu will be included, and it will always be included.
+  * - `local-only`: The full desktop experience will only be included in local builds.
+  * - `full`: The menu will always be included. The desktop experience will only be included in local builds.
+  * - `demo`: The full desktop experience will always be included (used only for Demo App Ecosystem).
+  */
+ readonly "includeDesktop": "none" | "menu-only" | "local-only" | "full" | "demo";
+
+ /** * One of three strings representing the severity of the API change. 
+  * - `major`: A breaking change which breaks existing hash assignments.
+  * - `minor`: A non-breaking change which adds new hash assignments.
+  * - `patch`: A non-breaking change which does not impact hash assignments.
+  */
+ readonly "change": "major" | "minor" | "patch";
+
+ /** A number used to control the detail in logs. Only messages with a priority <= this number will be logged. */
+ readonly "verbosity": string;
+
+ /** The host of the desired default app. The server will redirect to this when testing locally. */
+ readonly "defaultApplicationHost": string;
+
+ /** The internal port (typically 3000-4000) where the server will be hosted. */
+ readonly "port": string;
+
+ /** * Determines whether or not the artifact should be output with embedded source map data. 
+  * - `0`: Disabled
+  * - `1`: Enabled
+  */
+ readonly "mapping": "disabled" | "enabled";
+
+ /** * If enabled, halts the hydration of the application completely. Useful for debugging FOUC. 
+  * - `0`: Disabled
+  * - `1`: Enabled
+  */
+ readonly "haltHydration": "disabled" | "enabled";
+
+ /** * If enabled, a warning line appears at the top of all applications regarding alpha status. 
+  * - `0`: Disabled
+  * - `1`: Enabled
+  */
+ readonly "includeWarning": "disabled" | "enabled";
+
+ /** * If enabled, applications running locally will reset to their landing hash when the service worker is replaced. 
+  * - `0`: Disabled
+  * - `1`: Enabled
+  */
+ readonly "resetLocalState": "disabled" | "enabled";
+
+ /** A string representing how long the main thread should hang to simulate loading. Useful for debugging FOUC. */
+ readonly "hangHydration": string;
+}
 /** This is the root part of the ecosystem, considered the ecosystem itself. @remarks When JSON stringified, it should inline all information compiled from the git repo in node by the build process. The serialized version should not include any values that are added during or after recursively hydrating the part tree. This means that all runtime values should be non-enumerable and defined using the `define()` method. */
 declare const _: IEcosystem
 /** A shorthand for document.querySelector */
@@ -322,4 +412,76 @@ declare class Vector {
 }
 
 declare type IVector = Record<string, number>
-declare type IVector2 = { x: number, y: number }
+declare type IVector2 = { x: number, y: number }
+
+declare type KirejiConfigColor =
+ /** The color component will never be included. */
+ | "none"
+ /** Dark mode will never be included. */
+ | "light"
+ /** Light mode will never be included. */
+ | "dark"
+ /** Dark mode will only be included in local builds. */
+ | "debug-dark"
+ /** Light mode will only be included in local builds. */
+ | "debug-light"
+ /** The full color component will always be included. */
+ | "full"
+
+declare type KirejiConfigEra =
+ /** The era component will never be included. */
+ | "none"
+ /** Modern mode will never be included. */
+ | "vintage"
+ /** Vintage mode will never be included. */
+ | "modern"
+ /**  Modern mode will only be included in local builds. */
+ | "debug-modern"
+ /** Vintage mode will only be included in local builds. */
+ | "debug-vintage"
+ /** The full era component will always be included. */
+ | "full"
+
+declare type KirejiConfigMenuApps =
+ /** Apps will never appear in the menu. */
+ | "none"
+ /** Apps will only appear in the menu in local builds. */
+ | "local-only"
+ /** Apps will always appear in the menu. */
+ | "full"
+
+declare type KirejiConfigUpdates =
+ /** Update features will never appear in the menu. */
+ | "none"
+ /** Update features will only appear in the menu in local builds. */
+ | "local-only"
+ /** Update features will always appear in the menu. */
+ | "full"
+
+declare type KirejiConfigKirejiApp =
+ /** kireji.app will never be included. */
+ | "none"
+ /** kireji.app will only be included in local builds. */
+ | "full"
+ /** kireji.app will always be included (used only for Demo App Ecosystem). */
+ | "demo"
+
+declare type KirejiConfigDesktop =
+ /** The desktop experience will never be included. */
+ | "none"
+ /** Only the menu will be included, and it will always be included. */
+ | "menu-only"
+ /** The full desktop experience will only be included in local builds. */
+ | "local-only"
+ /** The menu will always be included. The desktop experience will only be included in local builds. */
+ | "full"
+ /** The full desktop experience will always be included (used only for Demo App Ecosystem). */
+ | "demo"
+
+declare type KirejiConfigChange =
+ /** A breaking change which breaks existing hash assignments. */
+ | "major"
+ /** A non-breaking change which adds new hash assignments but doesn't break existing ones. */
+ | "minor"
+ /** A non-breaking change which does not impact hash assignments at all. */
+ | "patch"

package/src/validate.js

@@ -25,9 +25,9 @@ if (environment === "node-main") {
  })
  logScope(1, "\nSerialization Test", log => {
   const postHydrationArchive = serialize(_)
-  if (postHydrationArchive !== preHydrationArchive) {
-   warn(`The post-hydration archive was ${postHydrationArchive.length - preHydrationArchive.length} bytes longer than the pre-hydration archive.`)
-   const lines1 = preHydrationArchive.split('\n')
+  if (postHydrationArchive !== _.preHydrationArchive) {
+   warn(`The post-hydration archive was ${postHydrationArchive.length - _.preHydrationArchive.length} bytes longer than the pre-hydration archive.`)
+   const lines1 = _.preHydrationArchive.split('\n')
    const lines2 = postHydrationArchive.split('\n')
    const maxLength = Math.max(lines1.length, lines2.length)
    for (let i = 0; i < maxLength; i++) {