kireji 0.14.0 → 0.17.0

package/README.md

@@ -27,10 +27,10 @@ npx kireji example
 
 # The following commands require at least one git commit to work:
 
-# Build a local development server.
-npx kireji dev
+# Build a local testing server (enables debug tools and appends `.localhost:<port>` suffix to all origins).
+npx kireji debug
 
-# Build a production server.
+# Build a production server (no debug tools or locahost origin suffix).
 npx kireji build
 
 # Get the project and package version info:
@@ -42,24 +42,24 @@ npx kireji
 npx kireji help
 ```
 
-More documentation is coming soon about how to define components, work with the framework's premade components, and make use of the framework's premade applications (which intimately integrate with your own app and allow you to inspect it in real-time) in development builds.
+More documentation is coming soon about how to define parts and components, work with the framework's premade parts and components, and make use of the framework's premade apps (which intimately integrate with your own app and allow you to inspect it in real-time) in development builds.
 
 ## Implementation
 
-This framework uses the **MPHF Coordinate System** to assign a unique, gap-free coordinate to every valid point in a space constrained by its component definitions. It uses the **MVC paradigm** to efficiently update the DOM. It uses a **packing mechanism** to create single-artifact builds. It provides a library of **premade components** including a **web server** and **service worker** to bootstrap the development process.
+This framework uses the **MPHF Coordinate System** to assign a unique, gap-free coordinate to every valid point in a space constrained by its part definitions. It uses the **MVC paradigm** to efficiently update the DOM. It uses a **packing mechanism** to create single-artifact builds. It provides a library of **premade parts and components** including a **web server** and **service worker** to bootstrap the development process.
 
-### Components
-Components act to refine the "Total Software Space" into a manageable set of **algebraically constrained, functional applications.**
+### Parts
+Parts act to refine the "Total Software Space" into a manageable set of **algebraically constrained, functional apps.**
 
 This refinement is designed to provide:
-- **Guaranteed Functionality:** Ensuring every coordinate represents a stable, working application (no "one sandal, one stiletto" combinations).
+- **Guaranteed Functionality:** Ensuring every coordinate represents a stable, working app.
 - **Comprehensive Deep Linking:** Allowing every coordinate to be bookmarked and shared, retaining a full, multi-origin session state in the most compressed URL possible without reliance on cookies, servers, or user tracking.
-- **Component Encapsulation:** Defining all applications as assemblies of stateful components (called **parts**) built on the MPHF-MVC backbone. Parts then assemble like LEGO® bricks, each assembly representing its own configuration space.
+- **Part Encapsulation:** Defining apps as assemblies of stateful parts built on the MPHF-MVC backbone. Parts then assemble like LEGO® bricks, each assembly representing its own configuration space.
 - **Reactive Navigation:** Ensuring navigation from one coordinate to another changes only the page elements that need to change to reflect the new position.
 
 ### Namespacing
 
-Parts are assigned a unique namespace that relates them to a web application's origin, for example:
+Parts are assigned a unique namespace that relates them to a web app's origin, for example:
 
 ```js
 _.com.example
@@ -70,9 +70,9 @@ _.com.example.www.blog
 
 ### Built-in Parts
 
-The framework's main part is the root part, a global object identified by `_`. This part is the root of the application component hierarchy, hosting both built-in and user-defined components.
+The framework's main part is the root part, a global object identified by `_`. This part is the root of the ecosystem part hierarchy, hosting both built-in and user-defined parts and components.
 
-#### Core Components
+#### Core Parts
 These parts are provided by the framework to act as MVC abstracts that handle MPHF arithmetic under the hood:
 
 ```js
@@ -82,13 +82,13 @@ _.parts.core.clip
 ...
 ```
 
-#### Desktop Components
+#### Desktop Parts
 These parts are a collection of parts for bootstrapping, a Node.js server, server- and client-side rendering, a service worker and other functionality:
 ```js
 _
 _.parts.desktop.server
 _.parts.desktop.client
-_.parts.desktop.worker
+_.parts.desktop.offlineServer
 _.parts.desktop.addressBar
 ...
 ```

package/package.json

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

package/src/app/kireji/HTML-render-component.js

@@ -0,0 +1,11 @@
+const component = COMPONENT_OWNER.components[COMPONENT_KEY]
+const { kind, name, size, filename } = component
+const subjectIndex = kind === "file" ? component.subjectIndex : COMPONENT_OWNER.components[filename].subjectIndex
+
+return /* html */`
+<button ${KirejiEditor.pointAttr("point", subjectIndex)}>
+ <span class=icon>${kind === "getter" ? "✧" : (kind === "action" ? (filename.startsWith("async-") ? "⟳" : "ƒ") : "≡")}</span>
+ <span class="${kind}${filename in (COMPONENT_OWNER.prototype ?? {}) ? " override" : "own"}">${name}</span>
+ ${filename.startsWith("async-") ? /* html */`<span class=async-icon>&nbsp;Async</span>` : ""}
+ ${size ? /* html */`<span class=size>${size.toLocaleString()} B</span>` : ""}
+</button>`

package/src/app/kireji/attributes_.js

@@ -1,3 +1,3 @@
 return [
- `style="${sidebar.width.style}"`
+ `style="${KirejiSidebarWidth.style}"`
 ]

package/src/app/kireji/description_.js

@@ -0,0 +1,5 @@
+return `This app allows you to view all of the parts that define the ${_.key} ecosystem. It includes a sidebar pane, a part inspector and a file viewer.
+
+The part inspector lets you see all of the components which are attached to a part, the current state of the part (if any) and its corresponding base 64 hash, and the part's contribution (if any) to the minimal perfect hash function that provides the ecosystem's optimal state compression. These values update in real-time as you interact with the ecosystem.
+
+You can travel away from this app, make changes in other apps, and then return here to see how those cross-origin interactions have impacted each part of the ecosystem.`

package/src/app/kireji/editor/crumbs.html_.js

@@ -1,18 +1,20 @@
-function generateCrumb(part, filename) {
- return `<a ${editor.pointAttr("point", allParts.indexOf(part), ...(filename ? [part.filenames.indexOf(filename)] : []))} href="/">${filename ?? (part === _ ? "ecosystem" : part.key)}</a>`
+/** @type {(subject: Subject) => string} */
+function generateCrumb(subject) {
+ const file = subject.kind === "part" ? null : subject
+ const part = subject.kind === "part" ? subject : subject.owner
+ return `<button ${KirejiEditor.pointAttr("point", subject.subjectIndex)}>${subject.key}</button>`
 }
 
-if (activePart) {
- const crumbs = []
+if (KirejiTabGroup.activeTab) {
+ const { subject } = KirejiTabGroup.activeTab
 
- let part = activePart
+ const crumbs = [generateCrumb(subject)]
 
- if (activeTab.filename)
-  crumbs.push(generateCrumb(activePart, activeTab.filename))
+ let parentPart = subject.kind === "file" ? subject.owner : subject[".."]
 
- while (part) {
-  crumbs.push(generateCrumb(part))
-  part = part[".."]
+ while (parentPart) {
+  crumbs.push(generateCrumb(parentPart))
+  parentPart = parentPart[".."]
  }
 
  return crumbs.reverse().join(`<span></span>`)

package/src/app/kireji/editor/file-view.html_.js

@@ -1 +1,4 @@
-return `<section id=file-viewer>${sanitizeAttr(activePart[activeTab.filename]).split("\n").reduce((html, text, ln) => html + `<span class=code-line><span class=line-number>${ln}</span><code>${text || "\n"}</code></span>`, "")}</section>`
+/** @type {IFileDefinition} */
+const subjectFile = KirejiTabGroup.activeTab.subject
+
+return `<section id=file-viewer>${HTML.sanitizeAttr(subjectFile.value).split("\n").reduce((html, text, ln) => html + `<span class=code-line><span class=line-number>${ln}</span><code>${text || "\n"}</code></span>`, "")}</section>`

package/src/app/kireji/editor/part-view.html_.js

@@ -0,0 +1,13 @@
+/** @type {IPartAny} */
+const activePart = KirejiTabGroup.activeTab.subject
+
+return KirejiEditorSections.map(section =>
+ `<details class=info-section id=info-${section.key}${section.model ? " open" : ""}>` + (
+  `<summary ${section.pointAttr()}>` + (
+   section.title
+  ) + `</summary>` +
+  `<section class=info-body ${section.key.startsWith("state") && (!activePart.isInstance || section.key === "state" && activePart.disabled) ? " disabled" : ""}>` + (
+   section["part.html"]
+  ) + `</section>`
+ ) + `</details>`
+).join("")

package/src/app/kireji/editor/part.css_.js

@@ -1 +1,510 @@
-return scroller["part.css"] + editor["static.css"] + tabGroup["part.css"]
+return /* css */`
+
+#kireji_app {
+ button {
+  font-size: var(--default-font-size);
+ }
+
+ editor- {
+  position: absolute;
+  top: 0;
+  left: var(--sidebar-width);
+  right: 0;
+  bottom: 0;
+ }
+
+ editor-view {
+  container-type: inline-size;
+  container-name: editor-view;
+  position: absolute;
+  top: calc(var(--tab-group-height) + var(--crumbs-height));
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: clip;
+
+  >scroller- {
+   &:has(#file-viewer) {
+    --code-line-height: calc(var(--default-font-size) + 4px);
+    line-height: var(--code-line-height);
+    >scroll-content {
+     padding: 0;
+    }
+   }
+   >scroll-content {
+    padding: 0;
+    gap: 0;
+    display: flex;
+    flex-flow: column;
+    >section>h1 {
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     overflow: hidden;
+    }
+   }
+  }
+
+  body.vintage & {
+   body.light & {
+    background-color: white;
+   }
+
+   body.dark & {
+    background-color: var(--bg);
+   }
+  }
+ }
+
+ editor-[data-drop-target] :is(editor-view, crumbs-)::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-light-er);
+  opacity: 0.35;
+ }
+
+ crumbs- {
+  position: absolute;
+  top: var(--tab-group-height);
+  left: 0;
+  right: 0;
+  height: var(--crumbs-height);
+  line-height: var(--crumbs-height);
+  display: flex;
+  padding: 0 calc(var(--spacing) / 2);
+ }
+
+ crumbs->span {
+  display: block;
+  transform: translateX(calc(100% / -6)) rotateZ(-45deg) scale(calc(1 / 3));
+  box-shadow: 3px 3px 0 0 var(--fg);
+  width: var(--crumbs-height);
+ }
+
+ crumbs->a:last-of-type {
+  pointer-events: none;
+  text-decoration: none;
+  color: inherit;
+ }
+
+ crumbs->a:not(:hover) {
+  text-decoration: none;
+ }
+
+ button .modifier {
+  color: var(--accent-mode);
+ }
+
+ button .readonly {
+  color: var(--accent-un-mode-er);
+ }
+
+ button .function {
+  color: darkkhaki;
+ }
+
+ button .string {
+  color: darksalmon;
+ }
+
+ body.light & button .modifier {
+  color: var(--accent-mode);
+ }
+
+ body.light & button .readonly {
+  color: var(--accent-un-mode-er);
+ }
+
+ body.light & button .function {
+  color: darkgoldenrod;
+ }
+
+ body.light & button .string {
+  color: sienna;
+ }
+
+ body.light & editor-[data-drop-target] :is(editor-view, crumbs-)::after {
+  background: var(--accent-light-er);
+ }
+
+ &:has(#tab-group:empty) editor-view>scroller->scroll-content {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--bg-un-mode);
+ }
+
+ &:has(#tab-group:empty) editor-view>scroller->scroll-content>svg {
+  opacity: 50%;
+ }
+
+ &:has(#tab-group:empty) :is(editor-view>scroll-bar, crumbs-) {
+  display: none;
+ }
+
+ &:has(#tab-group:empty) editor-view>scroller- {
+  margin-right: 0;
+  width: 100%;
+  transform: unset !important;
+  height: 100%;
+ }
+
+ #file-viewer {
+  margin: 0;
+  padding: 0;
+  counter-reset: ln;
+  padding-bottom: calc(100vh - var(--tab-group-height) - var(--crumbs-height) - var(--task-bar-height) - var(--warning-height) - var(--code-line-height) - var(--title-bar-height));
+ }
+
+ #file-viewer {
+  font-family: var(--system-ui-mono);
+  display: flex;
+  flex-direction: column;
+  user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  cursor: text;
+ }
+
+ #file-viewer .code-line {
+  display: block;
+  position: relative;
+  padding-left: 5em;
+  margin: 0;
+ }
+
+ #file-viewer code {
+  white-space: pre-wrap;
+  hyphens: none;
+  overflow-wrap: anywhere;
+ }
+
+ #file-viewer .line-number {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 5em;
+  padding: 0 1em;
+  text-align: right;
+  color: var(--bg-un-mode);
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+ }
+
+ #description {
+  white-space: pre-wrap;
+  margin: 0;
+ }
+
+ /* #description[disabled] {
+  display: none;
+ } */
+
+ #part-intro>* {
+  vertical-align: middle;
+ }
+
+ #part-intro>div {
+  display: inline-block;
+ }
+
+ #part-intro>img {
+  width: 64px;
+  margin-right: var(--spacing);
+ }
+
+ part-rows {
+  width: 100%;
+  padding: 0px 1px;
+  display: flex;
+  flex-flow: column;
+ }
+
+ part-rows>button {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-columns: 1fr auto;
+  line-height: var(--tab-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  width: 100%;
+ }
+
+ part-rows>button>img {
+  position: absolute;
+  width: var(--tab-icon-size);
+  height: var(--tab-icon-size);
+  left: calc(var(--spacing) / 2.5 + 2px);
+  top: calc((100% - var(--tab-icon-size)) / 2);
+ }
+
+ part-rows>button>.icon {
+  position: absolute;
+  left: 0;
+  width: calc(1.5 * var(--spacing));
+  text-align: center;
+ }
+
+ body.modern & part-rows>button {
+  padding-left: calc(2.25 * var(--spacing));
+  padding-right: calc(0.5 * var(--spacing));
+ }
+
+ body.vintage & part-rows>button {
+  padding: calc(0.5 * var(--spacing));
+  padding-top: 1px;
+  padding-left: calc(2.25 * var(--spacing));
+  box-shadow:
+   inset 0 1px 0 0 var(--bg-light-er),
+   inset 0 -1px 0 0 var(--bg-dark);
+ }
+
+ body.vintage & part-rows>button[data-drop-target] {
+  padding-left: calc(2.5 * var(--spacing) + 1px);
+  padding-right: calc(0.5 * var(--spacing) + 1px);
+  padding-top: 2px;
+  padding-bottom: calc(0.5 * var(--spacing) - 1px);
+  box-shadow:
+   inset 0 1px 0 0 var(--bg-dark-est),
+   inset 0 -1px 0 0 var(--bg-light-est),
+   inset 0 2px 0 0 var(--bg-dark),
+   inset 0 -2px 0 0 var(--bg-dark),
+   inset -1px 0 0 0 var(--bg-dark),
+   inset 1px 0 0 0 var(--bg-dark),
+   inset -2px 0 0 0 var(--bg),
+   inset 2px 0 0 0 var(--bg);
+  width: calc(100% + 2px);
+  left: -1px;
+ }
+
+
+ editor-view>scroller->scroll-content :is(h1, h2, h3, summary) {
+  margin: 0;
+ }
+
+ #info-components a:not(:hover) {
+  text-decoration: none;
+ }
+
+ .info-section:not(#info-about)>section:not([disabled])> :is(pre, p) {
+  overflow: hidden;
+ }
+
+ :is(#info-state, #info-state-space)>section[disabled]>:not(.disabled-message),
+ :is(#info-state, #info-state-space)>section:not([disabled])>.disabled-message {
+  display: none;
+ }
+
+ /* Hide issues for now. */
+ #info-issues {
+  display: none;
+ }
+
+ body.modern & editor-view {
+  box-shadow:
+   inset -2px 0 0 -1px var(--bg-un-mode);
+ }
+
+ body.modern.light & :is(editor-view, crumbs-) {
+  background-color: var(--bg-light-est);
+ }
+
+ body.modern.dark & :is(editor-view, crumbs-) {
+  background-color: var(--bg-mode);
+ }
+
+ @container editor-view (width > 350px) {
+  body.modern & #info-state-space>section:not([disabled])>:is(p, h3) {
+   display: inline-block;
+  }
+
+  body.modern & #info-state-space>section:not([disabled])>:is(p, math) {
+   float: right;
+   margin: 0;
+  }
+ }
+
+ body.modern &:has(#tab-group:empty) editor-view {
+  top: 0;
+ }
+
+ body.modern & .info-section {
+  padding: 0;
+  border-radius: 3px;
+ }
+
+ body.modern & .info-section>summary {
+  padding: calc(var(--spacing) / 2);
+  margin: 0;
+  box-shadow:
+   inset 0 -1px 0 0 var(--bg-dark);
+ }
+
+ body.modern & .info-section>.info-body {
+  margin: 0;
+  padding: 0;
+ }
+
+ #info-about>.info-body {
+  display: flex;
+ }
+
+ :is(#info-about, #info-state-space, #info-state)>.info-body {
+  padding: var(--spacing);
+  flex-flow: column;
+  gap: var(--spacing);
+ }
+
+ body.modern & .info-section>summary {
+  cursor: pointer;
+  font-weight: bold;
+ }
+
+ body.modern & [disabled] {
+  color: var(--fg-mode-er);
+ }
+
+ /*.info-section:has(>section[disabled]),
+ .info-section:has(>section:empty) {
+  display: none;
+ }*/
+
+ body.modern & .info-section:has(>section[disabled])>summary {
+  background-color: var(--bg-light);
+ }
+
+ body.vintage & editor- {
+  left: calc(6px + var(--sidebar-width));
+  top: 12px;
+  right: 6px;
+  bottom: 6px;
+ }
+
+ body.vintage & editor-::before {
+  box-shadow: var(--deep-inset);
+  position: absolute;
+  top: calc(var(--tab-group-height) - 2px + var(--crumbs-height) + 2px);
+  right: -2px;
+  left: -2px;
+  bottom: -2px;
+ }
+
+ body.vintage & editor-::after {
+  content: "";
+  position: absolute;
+  box-shadow: var(--outset);
+  top: calc(var(--tab-group-height) - 6px);
+  height: calc(var(--crumbs-height) + var(--spacing) / 2 + 2px);
+  left: 0;
+  right: 0;
+  pointer-events: none;
+ }
+
+ body.vintage & #info-state-space>section>math {
+  text-align: right;
+  margin: calc(.5 * var(--spacing));
+  width: min-content;
+  justify-self: end;
+ }
+
+ @container editor-view (width > 350px) {
+  #info-state-space>section {
+   display: grid;
+   grid-template-columns: max-content 1fr;
+  }
+
+  body.vintage & #info-state-space>section>h3 {
+   align-self: center;
+   margin-right: 1ch;
+  }
+ }
+
+ body.vintage & editor-view {
+  top: calc(var(--tab-group-height) + var(--crumbs-height) + 2px);
+ }
+
+ body.vintage & editor-view:not(:has(#file-viewer)) {
+  background-color: var(--bg);
+ }
+
+ body.vintage & editor-:has(#tab-group:empty) editor-view {
+  top: 0;
+ }
+
+ body.vintage & editor-:has(#tab-group:empty)::before {
+  content: unset;
+ }
+
+ body.vintage & editor-:has(#tab-group:empty)::after {
+  top: -8px;
+ }
+
+ body.vintage & crumbs- {
+  top: calc(var(--tab-group-height) - 2px);
+  left: -2px;
+  right: -2px;
+ }
+
+ body.vintage & #file-viewer {
+  padding-bottom: calc(100vh - var(--tab-group-height) - var(--crumbs-height) - var(--task-bar-height) - var(--warning-height) - var(--title-bar-height) - var(--code-line-height) - 24px);
+ }
+
+ body.vintage & #description {
+  margin: 0;
+ }
+
+ body.vintage & .info-section {
+  position: relative;
+  box-shadow: var(--deep-outset);
+ }
+
+ body.vintage & .info-section>summary {
+  font-weight: 400;
+  line-height: var(--tab-line-height);
+  margin: 0;
+  padding: calc(var(--spacing) / 3);
+  font-size: var(--default-font-size);
+  pointer-events: all;
+ }
+
+ body.vintage & h3 {
+  font-size: inherit;
+  font-weight: inherit;
+ }
+
+ body.vintage & :not(#part-intro>div)>h3::after {
+  content: ":";
+ }
+
+ body.vintage & .info-section:not(#info-about)>section:not([disabled])> :is(pre, p) {
+  box-shadow: var(--deep-inset);
+  padding: 5px 4px 9px 4px;
+  background: white;
+  margin: 4px 0;
+  white-space: pre;
+  word-wrap: none;
+ }
+
+ body.vintage & .info-section:not(#info-about)>section:not([disabled])> :is(pre, p):focus {
+  user-select: text;
+ }
+
+ body.dark.vintage & .info-section:not(#info-about)>section:not([disabled])> :is(pre, p) {
+  background: transparent;
+ }
+}
+
+` +
+ KirejiTabGroup["part.css"]

package/src/app/kireji/editor/part.html_.js

@@ -1,6 +1,6 @@
 return "<editor->" + (
- `<crumbs->${editor["crumbs.html"]}</crumbs-><editor-view>` + editor.scroller.wrap(
-  editor[`${tabGroup.openTabs.length ? (tabGroup.activeTab.filename ? "file" : "summary") : "empty"}-view.html`]
+ `<crumbs->${KirejiEditor["crumbs.html"]}</crumbs-><editor-view>` + KirejiEditor.scroller.wrap(
+  KirejiEditor[`${KirejiTabGroup.openTabs.length ? KirejiTabGroup.activeTab.subject.kind : "empty"}-view.html`]
  ) + "</editor-view>" +
- tabGroup["part.html"]
+ KirejiTabGroup["part.html"]
 ) + "</editor->"

package/src/app/kireji/editor/part.json

@@ -1,11 +1,11 @@
 {
+ "name": "KirejiEditor",
  "extends": "mix",
- "methods": {
+ "actions": {
   "point": [
    "POINTER_EVENT",
    "TARGET_ELEMENT",
-   "PART_INDEX",
-   "FILE_INDEX",
+   "SUBJECT_INDEX",
    "TAB_PAYLOAD = 0n"
   ],
   "point-close": [