kireji 0.3.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.3.1",
+ "version": "0.5.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!",
  "files": [
   "src/",

package/src/app/kireji/editor/point-close.js

@@ -1,7 +1,7 @@
 pointer.handle({
  click() {
   const tabIndex = Array.prototype.indexOf.call(Q("#tab-group").children, TARGET_ELEMENT.parentElement)
-  tabGroup.openTabs.splice(tabIndex, 1)[0]
+  tabGroup.openTabs.splice(tabIndex, 1)
   tabGroup.activeTabIndex = tabGroup.openTabs.length === 0 ? null : (tabGroup.activeTabIndex === tabIndex ? (tabGroup.activeTabIndex < 1 ? 0 : tabGroup.activeTabIndex - 1) : (tabGroup.activeTabIndex > tabIndex ? tabGroup.activeTabIndex - 1 : tabGroup.activeTabIndex))
   tabGroup.previewTabIndex = tabGroup.openTabs.length === 0 || tabGroup.previewTabIndex === tabIndex ? null : (tabGroup.previewTabIndex > tabIndex ? tabGroup.previewTabIndex - 1 : tabGroup.previewTabIndex)
   tabGroup.recomputeRouteID(true)

package/src/app/kireji/editor/point.js

@@ -10,9 +10,7 @@ const pointerConfig = {
   }
  },
  drag(pointerEvent) {
-  const
-   { left: tabsLeft, right: tabsRight, top: tabsTop, bottom: tabsBottom } = tabGroup.container.getBoundingClientRect(),
-   isOverTabGroup = pointerEvent.clientX >= tabsLeft && pointerEvent.clientX <= tabsRight && pointerEvent.clientY >= tabsTop && pointerEvent.clientY <= tabsBottom
+  const isOverTabGroup = inRect(pointerEvent, tabGroup.container.getBoundingClientRect())
   if (isOverTabGroup) {
    if (tabGroup.container.parentElement.hasAttribute("data-drop-target"))
     tabGroup.container.parentElement.removeAttribute("data-drop-target")
@@ -39,9 +37,7 @@ const pointerConfig = {
     }
    }
   } else {
-   const
-    editorRect = tabGroup.container.parentElement.getBoundingClientRect(),
-    draggedItemIsOverEditor = pointerEvent.clientX >= editorRect.left && pointerEvent.clientX <= editorRect.right && pointerEvent.clientY >= editorRect.top && pointerEvent.clientY <= editorRect.bottom
+   const draggedItemIsOverEditor = inRect(pointerEvent, tabGroup.container.parentElement.getBoundingClientRect())
    if (draggedItemIsOverEditor && !tabGroup.container.parentElement.hasAttribute("data-drop-target"))
     tabGroup.container.parentElement.setAttribute("data-drop-target", "")
    else if (!draggedItemIsOverEditor && tabGroup.container.parentElement.hasAttribute("data-drop-target"))
@@ -67,12 +63,9 @@ const pointerConfig = {
  drop(pointerEvent) {
   // TODO: break into separate "click" and "drop" handlers.
   const
-   draggedItemRect = TARGET_ELEMENT.getBoundingClientRect(),
-   draggedItemWasDroppedOntoItself = pointerEvent.clientX >= draggedItemRect.left && pointerEvent.clientX <= draggedItemRect.right && pointerEvent.clientY >= draggedItemRect.top && pointerEvent.clientY <= draggedItemRect.bottom,
-   tabGroupRect = tabGroup.container.getBoundingClientRect(),
-   draggedItemWasDroppedOntoTabGroup = pointerEvent.clientX >= tabGroupRect.left && pointerEvent.clientX <= tabGroupRect.right && pointerEvent.clientY >= tabGroupRect.top && pointerEvent.clientY <= tabGroupRect.bottom,
-   editorRect = tabGroup.container.parentElement.getBoundingClientRect(),
-   draggedItemWasDroppedOntoEditor = pointerEvent.clientX >= editorRect.left && pointerEvent.clientX <= editorRect.right && pointerEvent.clientY >= editorRect.top && pointerEvent.clientY <= editorRect.bottom,
+   draggedItemWasDroppedOntoItself = inRect(pointerEvent, TARGET_ELEMENT.getBoundingClientRect()),
+   draggedItemWasDroppedOntoTabGroup = inRect(pointerEvent, tabGroup.container.getBoundingClientRect()),
+   draggedItemWasDroppedOntoEditor = inRect(pointerEvent, tabGroup.container.parentElement.getBoundingClientRect()),
    draggedItemIsAlreadyTheActiveTab = this.activeTabIndexOfDraggedItem !== -1,
    draggedItemFileData = draggedItemIsAlreadyTheActiveTab ? tabGroup.openTabs[this.activeTabIndexOfDraggedItem] : { part: allParts[PART_INDEX], filename: isNaN(FILE_INDEX) ? undefined : allParts[PART_INDEX].filenames[FILE_INDEX], payload: TAB_PAYLOAD },
    existingTabIndexOfFileData = draggedItemIsAlreadyTheActiveTab ? this.activeTabIndexOfDraggedItem : tabGroup.openTabs.findIndex(tab => tab.part === draggedItemFileData.part && tab.filename === draggedItemFileData.filename),
@@ -101,6 +94,11 @@ const pointerConfig = {
      return
     }
 
+    if (tabGroup.previewTabIndex === null && BigInt(tabGroup.openTabs.length) === tabGroup.maxTabCount) {
+     alert("You have too many tabs open!")
+     return
+    }
+
     let indexOfNewlyCreatedTab = numberOfTabsOpen === 0 ? 0 : tabGroup.activeTabIndex + 1
     let newPreviewTabIndex = null
 
@@ -165,6 +163,11 @@ const pointerConfig = {
      tabGroup.recomputeRouteID(true)
     } else {
 
+     if (BigInt(tabGroup.openTabs.length) === tabGroup.maxTabCount) {
+      alert("You have too many tabs open!")
+      return
+     }
+
      const previewTab = tabGroup.previewTab
 
      // Add the new tab.

package/src/app/kireji/editor/sections/state-space/part.html_.js

@@ -1,12 +1,16 @@
 const cardinality = activePart.cardinality
 const cardinalityAsString = instances.includes(activePart) ? cardinality.toLocaleString() : null
+
 return (
  instances.includes(activePart) ? (
   "<h3>Cardinality</h3>" +
   `<p>${cardinalityAsString.length < 16 ? cardinalityAsString : scientific(cardinality, true)}</p>` +
   `<hr>` +
   "<h3>Hartley Entropy</h3>" +
-  `<p>${toCharms(activePart.cardinality)} (${toBits(activePart.cardinality)})</p>`
+  `<p>${toCharms(activePart.cardinality)} (${toBits(activePart.cardinality)})</p>` +
+  `<hr>` +
+  `<h3>Equation</h3>` +
+  "<math>" + activePart["equation-variable.html"] + "<mo>=</mo>" + activePart["equation.html"] + "</math>"
  ) : (
   "<p class=disabled-message>Abstract parts do not have a concrete state space.</p>"
  )

package/src/app/kireji/editor/static.css

@@ -131,7 +131,7 @@ body.light #kireji_app editor-[data-drop-target] :is(editor-view, crumbs-)::afte
  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));
+ 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));
 }
 
 #kireji_app editor-view>scroller-:has(#file-viewer) {
@@ -274,7 +274,7 @@ body.modern #kireji_app editor-view>scroller->scroll-content {
   display: inline-block;
  }
 
- body.modern #kireji_app #info-state-space>section:not([disabled])>p {
+ body.modern #kireji_app #info-state-space>section:not([disabled])>:is(p, math) {
   float: right;
   margin: 0;
  }
@@ -393,7 +393,7 @@ body.vintage #kireji_app crumbs- {
 }
 
 body.vintage #kireji_app #file-viewer {
- padding-bottom: calc(100vh - var(--tab-group-height) - var(--crumbs-height) - var(--task-bar-height) - var(--warning-height) - var(--code-line-height) - 24px);
+ 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.light #kireji_app editor-view {

package/src/app/kireji/editor/tab-group/build.js

@@ -4,7 +4,7 @@ const tabOffsets = [0n]
 const permutationSizes = [1n]
 const payloadSizes = [1n]
 const subjectCount = BigInt(allSubjects.length)
-const maxTabCount = subjectCount
+const maxTabCount = 12n
 const LSB = []
 const powerFloor = 2n ** BigInt(subjectCount.toString(2).length - 1)
 const payloadCardinality = 1n
@@ -52,8 +52,8 @@ tabGroup.define({
  previewTabIndex: { value: null, writable: true },
  viewedActiveTab: { value: null, writable: true },
  viewedPreviewTab: { value: null, writable: true },
- viewedPermutation: { value: null, writable: true },
- viewedPayload: { value: null, writable: true },
+ viewedPermutationRouteID: { value: null, writable: true },
+ viewedPayloadRouteID: { value: null, writable: true },
  viewedOpenTabs: { value: null, writable: true },
  openTabs: { value: [] },
  tabOffsets: { value: tabOffsets },
@@ -61,7 +61,6 @@ tabGroup.define({
  permutationSizes: { value: permutationSizes },
  payloadSizes: { value: payloadSizes },
  maxTabCount: { value: maxTabCount },
- previousPart: { value: null, writable: true },
  tree: { value: null, writable: true },
  container: { value: null, writable: true },
  FenwickTree: {

package/src/app/kireji/editor/tab-group/equation.html_.js

@@ -0,0 +1,42 @@
+return `<math>
+ <mn>1</mn>
+ <mo>+</mo>
+ <munderover>
+  <mo>&#x2211;</mo>
+  <mrow>
+   <msub><mi>𝑛</mi><mi>tabs</mi></msub>
+   <mo>=</mo>
+   <mn>1</mn>
+  </mrow>
+  <mi>${allSubjects.length}</mi>
+ </munderover>
+ <mrow>
+  <mo>(</mo>
+  <msub><mi>𝑛</mi><mi>tabs</mi></msub>
+  <mo>+</mo>
+  <mn>1</mn>
+  <mo>)</mo>
+  <msub><mi>𝑛</mi><mi>tabs</mi></msub>
+  <mo>&#x00D7;</mo>
+  <munderover>
+   <mo>&#x220F;</mo>
+   <mrow>
+    <mi>i</mi>
+    <mo>=</mo>
+    <mn>1</mn>
+   </mrow>
+   <mrow>
+    <msub><mi>𝑛</mi><mi>tabs</mi></msub>
+   </mrow>
+  </munderover>
+  <mrow>
+   <mo>(</mo>
+   <mi>${allSubjects.length}</mi>
+   <mo>-</mo>
+   <mi>i</mi>
+   <mo>-</mo>
+   <mn>1</mn>
+   <mo>)</mo>
+  </mrow>
+ </mrow>
+</math>`

package/src/app/kireji/editor/tab-group/part.css

@@ -145,8 +145,7 @@ body.modern #kireji_app tab-[data-active] .close-tab:hover {
 body.modern #kireji_app #tab-group {
  box-shadow:
   inset 0 -2px 0 -1px var(--bg-un-mode),
-  inset -2px 0 0 -1px var(--bg-un-mode),
-  inset 0 2px 0 -1px var(--bg-un-mode);
+  inset -2px 0 0 -1px var(--bg-un-mode);
 }
 
 body.modern.dark #kireji_app tab-:not([data-active]):hover {
@@ -164,7 +163,6 @@ body.modern.light #kireji_app tab-:is([data-active], :not([data-active]):hover)
 body.modern tab- {
  box-shadow:
   inset 0 -2px 0 -1px var(--bg-un-mode),
-  inset 0 2px 0 -1px var(--bg-un-mode),
   inset -2px 0 0 -1px var(--bg-un-mode);
 }
 
@@ -290,7 +288,7 @@ body.vintage>tab-[data-drag-preview] .tab-button {
 }
 
 body.vintage #kireji_app tab-[data-drop-target]::before {
- background: var(--pressed-checker), var(--bg-dark-est);
+ background: var(--bg-checker), var(--bg-dark-est);
  width: 4px;
 }
 

package/src/app/kireji/editor/tab-group/type.d.ts

@@ -41,10 +41,10 @@ declare interface IKirejiAppTabGroup
   * The most recent preview tab model, as determined while populating the view (not when propagating the route ID). */
  readonly viewedPreviewTab?: IKirejiAppTabGroupTab
  /** The most recent permutation route ID, used to quickly determine if the tab arrangement has changed since the last view population. */
- readonly viewedPermutation?: bigint
+ readonly viewedPermutationRouteID?: bigint
  /** The most recent payload route ID, used to quickly determine if any payload data has changed since the last view population. */
- readonly viewedPayload?: bigint
- /** The set of viewed tab objects corresponding to the current `tabGroup.viewedPermutation`. */
+ readonly viewedPayloadRouteID?: bigint
+ /** The set of viewed tab objects corresponding to the current `tabGroup.viewedPermutationRouteID`. */
  readonly viewedOpenTabs: IKirejiAppTabGroupTabArray
  /** A subindex representing which permutation of k open tabs is assigned. */
  readonly permutationRouteID: bigint
@@ -57,6 +57,8 @@ declare interface IKirejiAppTabGroup
  readonly activeTabIndex: number
  /** The index of the preview tab, if one exists. The preview tab is the tab which can be replaced when opening a new tab. */
  readonly previewTabIndex?: number
+ /** The maximum number of tabs that the user can have open, used to mitigate the potentially massive state space of this component. */
+ readonly maxTabCount: bigint
  /** A data type which can be used to performantly rank and unrank permutation indices. */
  readonly FenwickTree: typeof FenwickTree
 }

package/src/app/kireji/editor/tab-group/view-add.js

@@ -1,7 +1,7 @@
 tabGroup.viewedActiveTab = tabGroup.activeTab
 tabGroup.viewedPreviewTab = tabGroup.previewTab
-tabGroup.viewedPermutation = tabGroup.permutationRouteID
-tabGroup.viewedPayload = tabGroup.payloadRouteID
+tabGroup.viewedPermutationRouteID = tabGroup.permutationRouteID
+tabGroup.viewedPayloadRouteID = tabGroup.payloadRouteID
 tabGroup.viewedOpenTabs = [...tabGroup.openTabs]
 tabGroup.container = Q("#tab-group")
 

package/src/app/kireji/editor/tab-group/view-populate.js

@@ -6,7 +6,7 @@ if (hydrated) {
 
  // TODO: Create a "pseudo-part" that has all the same view methods, etc. of a normal part but is dynamically instantiated for dynamic typing.
 
- if (tabGroup.openTabs.length !== tabGroup.viewedOpenTabs.length || tabGroup.viewedPermutation !== tabGroup.permutationRouteID || tabGroup.viewedPayload !== tabGroup.payloadRouteID) {
+ if (tabGroup.openTabs.length !== tabGroup.viewedOpenTabs.length || tabGroup.viewedPermutationRouteID !== tabGroup.permutationRouteID || tabGroup.viewedPayloadRouteID !== tabGroup.payloadRouteID) {
   // TODO: This is a dead-simple approach ... more performant approaches exist.
   const tabContainer = Q("#tab-group")
   const existingTabCount = tabGroup.viewedOpenTabs.length
@@ -38,8 +38,8 @@ if (hydrated) {
 
    tabContainer.appendChild(newTabElement)
   }
-  tabGroup.viewedPermutation = tabGroup.permutationRouteID
-  tabGroup.viewedPayload = tabGroup.payloadRouteID
+  tabGroup.viewedPermutationRouteID = tabGroup.permutationRouteID
+  tabGroup.viewedPayloadRouteID = tabGroup.payloadRouteID
   tabGroup.viewedOpenTabs = [...tabGroup.openTabs]
  }
 

package/src/app/kireji/sidebar/static.css

@@ -129,8 +129,7 @@
 
 body.modern #kireji_app #sidebar-view-header {
  box-shadow:
-  inset -2px 0 0 -1px var(--bg-un-mode),
-  inset 0 2px 0 -1px var(--bg-un-mode);
+  inset -2px 0 0 -1px var(--bg-un-mode);
 }
 
 body.modern #kireji_app #sidebar-view {

package/src/app/kireji/tool-bar/part.css

@@ -22,8 +22,7 @@
 body.modern #kireji_app tool-bar {
  box-shadow:
   inset -2px 0 0 -1px var(--bg-un-mode),
-  inset 2px 0 0 -1px var(--bg-un-mode),
-  inset 0 2px 0 -1px var(--bg-un-mode);
+  inset 2px 0 0 -1px var(--bg-un-mode);
  background-color: var(--bg-mode-er);
 }
 
@@ -43,7 +42,7 @@ body.vintage #kireji_app tool-bar>button {
 body.vintage #kireji_app tool-bar>button:active,
 body.vintage #kireji_app:has(side-bar) tool-bar>button[data-active] {
  box-shadow: var(--deep-inset);
- background: var(--pressed-checker), var(--bg-un-mode);
+ background: var(--bg-checker), var(--bg-un-mode);
 }
 
 body.vintage #kireji_app tool-bar>button {

package/src/application-goto.js

@@ -0,0 +1,11 @@
+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("pressed")
+}
+
+location = targetLocation

package/src/build.js

@@ -73,7 +73,7 @@ function ƒ(_, compressedSubjectOrigins) {
   toCharms = (x, unit = true) => encodeSegment(BigInt(x) - 1n).length + (unit ? " charm" + (x !== 1 ? "s" : "") : 0),
   camelCase = (words, delimiter = "-") => (typeof words === "string" ? words.split(delimiter) : words).map((word, i) => (i ? word[0].toUpperCase() + word.slice(1) : word)).join(""),
   serialize = value => JSON.stringify(value, (k, v) => (typeof v === "bigint" ? v.toString() + "n" : v), 1),
-  scientific = (x, html = false) => { x = x.toString(10); const log10 = x.length - 1; x = Math.round((x[0] ?? 0) + (x[1] ?? 0) + (x[2] ?? 0) + (x[3] ?? "0") + "." + (x[4] ?? "0")).toString(); const factor = `${x.slice(0, 1)}.${x.slice(1)}`; return html ? `<math><mn>${factor}</mn><mo>&times;</mo><msup><mn>10</mn><mn>${log10}</mn></msup></math>` : `${factor} × 10` + [...log10.toString()].map(n => '⁰¹²³⁴⁵⁶⁷⁸⁹'[n]).join("") },
+  scientific = (x, html = false) => { x = x.toString(10); const log10 = x.length - 1; x = Math.round((x[0] ?? 0) + (x[1] ?? 0) + (x[2] ?? 0) + (x[3] ?? "0") + "." + (x[4] ?? "0")).toString(); const factor = `${x.slice(0, 1)}.${x.slice(1)}`; return html ? `<math><mn>${factor}</mn><mo>&sdot;</mo><msup><mn>10</mn><mn>${log10}</mn></msup></math>` : `${factor} × 10` + [...log10.toString()].map(n => '⁰¹²³⁴⁵⁶⁷⁸⁹'[n]).join("") },
   btoaUnicode = string => btoa(new TextEncoder("utf-8").encode(string).reduce((data, byte) => data + String.fromCharCode(byte), "")),
   sanitizeAttr = string => string.replaceAll(/&/g, '&amp;').replaceAll(/"/g, '&quot;').replaceAll(/'/g, '&#39;').replaceAll(/</g, '&lt;').replaceAll(/>/g, '&gt;')
 

package/src/constants.js

@@ -2,6 +2,7 @@ const desktop = _.parts.desktop
 const taskBar = desktop.taskBar
 const era = desktop.era
 const color = desktop.color
+const windows = desktop.windows
 const core = _.parts.core
 const worker = core.worker
 const addressBar = core.addressBar

package/src/part.css

@@ -31,7 +31,7 @@ body {
  --menu-tween: 0;
  --h: 100vh;
  --warning-height: 28px;
- --wallpaper-height: calc(var(--h) - var(--task-bar-height) - var(--warning-height));
+ --wallpaper-height: calc(var(--h) - var(--task-bar-height) - var(--warning-height) - var(--title-bar-height));
  --wallpaper-width: 100vw;
  --padding: calc(3.5 * var(--spacing));
  --gap: calc(2.5 * var(--spacing));
@@ -52,7 +52,7 @@ wallpaper- {
  --app-height: var(--wallpaper-height);
  --app-width: var(--wallpaper-width);
  position: fixed;
- top: var(--warning-height);
+ top: calc(var(--warning-height) + var(--title-bar-height));
  height: var(--wallpaper-height);
  left: 0;
  right: 0;
@@ -158,19 +158,7 @@ scroll-bar[disabled]>thumb- {
  display: none;
 }
 
-task-menu {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: 0;
- padding: 0;
- outline: none;
-}
-
-button,
-menu-button {
+button {
  background: transparent;
  padding: 0;
  margin: 0;
@@ -184,13 +172,13 @@ button:focus {
  outline: none;
 }
 
-task-bar>menu-button {
- position: absolute;
- left: var(--spacing);
- bottom: var(--spacing);
+task-bar>button {
+ position: relative;
+ margin-left: var(--spacing);
+ margin-bottom: var(--spacing);
 }
 
-task-sidebar {
+task-menu {
  margin: 0;
  position: fixed;
  overflow: hidden;
@@ -321,4 +309,42 @@ body.dark warning- {
 #stats-tray-item,
 #clock-tray-item {
  font-size: revert;
+}
+
+title-bar {
+ display: flex;
+ flex-flow: row nowrap;
+ margin: 0;
+ padding: 0;
+ height: var(--title-bar-height);
+ line-height: var(--title-bar-height);
+ position: fixed;
+ top: var(--warning-height);
+ left: 0;
+ right: 0;
+}
+
+title-bar>button {
+ width: var(--icon-size);
+}
+
+title-bar>.hide:before {
+ content: "_"
+}
+
+title-bar>.restore:before {
+ content: "☐"
+}
+
+/* Temp */
+title-bar>.restore {
+ display: none;
+}
+
+title-bar>.maximize:before {
+ content: "⛶"
+}
+
+title-bar>.close:before {
+ content: "✕"
 }

package/src/part.html_.js

@@ -34,6 +34,7 @@ const bodyHTML =
    `🚧 App in Alpha. Features subject to change/break without notice.`
   ) +
   `</warning->` +
+  `<title-bar><img class="part-icon" src="${_.application.placeholderImage("part.png")}"/>${application.title}<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>` +
   `<wallpaper- class=app-container id=${application.host.replaceAll(".", "_")} tabIndex=0${application.attributes ? ` ${application.attributes}` : ""}${application.style ? ` style="${application.style}"` : ""}>` + (
    application["part.html"]
   ) +

package/src/part.json

@@ -16,5 +16,8 @@
  "early-get-images": [
   "BODY_HTML",
   "HEAD_HTML"
+ ],
+ "application-goto": [
+  "HOST"
  ]
 }

package/src/parts/abstract/boolean/equation-variable.html

@@ -0,0 +1 @@
+<math><mi>𝑏</mi></math>

package/src/parts/abstract/box/equation.html_.js

@@ -0,0 +1 @@
+return `<math>${box.dimensions.map(dimension => `<mn>${dimension}</mn>`).join("<mo>&sdot;</mo>")}</math>`

package/src/parts/abstract/match/equation.html_.js

@@ -0,0 +1,11 @@
+return "<math>" + (
+ match.length ? (
+  match.length > 4 ? (
+   `<mo>∑</mo><msub><mi>𝑘</mi><mi>𝑝</mi></msub><mtext>,</mtext><mspace width="0.5em"/><mi>𝑝</mi><mo>∈</mo><mi>subparts</mi><mo>(</mo><msub><mi>P</mi><mi>${part.key ?? "ecosystem"}</mi></msub><mo>)</mo>`
+  ) : (
+   match.map(factor => factor["equation-variable.html"]).join("<mo>+</mo>")
+  )
+ ) : (
+  "<mn>1</mn>"
+ )
+) + "</math>"

package/src/parts/abstract/mix/equation.html_.js

@@ -0,0 +1,11 @@
+return "<math>" + (
+ mix.length ? (
+  mix.length > 4 ? (
+   `<mo>∏</mo><msub><mi>𝑘</mi><mi>𝑝</mi></msub><mtext>,</mtext><mspace width="0.5em"/><mi>𝑝</mi><mo>∈</mo><mi>subparts</mi><mo>(</mo><msub><mi>P</mi><mi>${part.key ?? "ecosystem"}</mi></msub><mo>)</mo>`
+  ) : (
+   mix.map(factor => factor["equation-variable.html"]).join("<mo>&sdot;</mo>")
+  )
+ ) : (
+  "<mn>1</mn>"
+ )
+) + "</math>"

package/src/parts/abstract/part/equation-variable.html_.js

@@ -0,0 +1 @@
+return `<math><msub><mi>𝑘</mi><mi>${part.key ?? "ecosystem"}</mi></msub></math>`

package/src/parts/abstract/part/equation.html_.js

@@ -0,0 +1,3 @@
+const cardinality = part.cardinality
+const cardinalityAsString = instances.includes(part) ? cardinality.toString() : null
+return cardinalityAsString.length < 16 ? `<math><mn>${cardinalityAsString}</mn></math>` : scientific(cardinality, true)

package/src/parts/abstract/part-mask/equation-variable.html_.js

@@ -0,0 +1 @@
+return `<math><msup><mn>2</mn><mn>${partMask.superset.length}</mn></msup></math>`

package/src/parts/abstract/part-mask/equation.html_.js

@@ -0,0 +1 @@
+return `<math>${partMask["equation-variable.html"]}</math>`

package/src/parts/abstract/part.json

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

package/src/parts/abstract/permutation/build.js

@@ -0,0 +1,111 @@
+
+/* TODO:
+ * 1. Instantiate a concrete innstance of an abstract part per-instance. Offload all per-instance logic there.
+ *    - Such a part will have optional subparts 'instance' and 'meta'
+ *    - "instance" corresponds to each instance part's statically-sized data model
+ *      - which also receives its specific subject assigment from the outside (not part of it's route ID)
+ *    - "meta" (name pending) corresponds to a non-instance-specific part whose cardinality is dependant upon the number of instances.
+ *      - get its implementation details by generalizing the active and preview tab data in the tab group. 
+ *      - At build time, the parent permutation will need to be able to query this part to get its cardinality once for every instance up to the max count.
+ *      - This part can support mixes, matches, etc. and might even be the ideal place to place a sub-permutation.
+ * 2. Convert the tab group to use this abstract type.
+ * Considerations;
+ * - How do we inspect the states of existing tab instances in `kireji.app`?
+ *   - Files will be easy: they are part of the abstract.
+ *   - Perhaps the state space box depicts an array of instance space states instead of the single state? Perhaps that is all that is needed?
+ *   - Then, how do we depict the states of subparts of the parent part? Do we simply have an array for the entire instance part's tree?
+ *   - We might need "push", "pop", "insert", "splice" and/or similar array methods to make it easier to modify the instance set on the fly. */
+
+// Memoize the permutation data.
+const instanceOffsets = [0n]
+const instanceBitDepths = [0n, 0n]
+const permutationSizes = [1n]
+const payloadCardinality = 2000n ** 4n
+const payloadSizes = [1n]
+const superset = permutation.getSuperset()
+const supersetSize = BigInt(superset.length)
+const maxInstanceCount = supersetSize
+const LSB = []
+const powerFloor = 2n ** BigInt(supersetSize.toString(2).length - 1)
+
+let cardinality = 1n
+
+for (let subsetSize = 1n, permutationSize = 1n, payloadSize = 1n; subsetSize <= supersetSize; subsetSize++) {
+
+ // Memoize a prototype LSB array to simplify initialization of Fenwick tree instances.
+ LSB[subsetSize - 1n] = subsetSize & -subsetSize
+
+ if (subsetSize > maxInstanceCount)
+  continue
+
+ // Increase the permutation size based on subset size.
+ permutationSize *= supersetSize - subsetSize + 1n
+
+ // Increase the payload size.
+ payloadSize *= payloadCardinality
+ permutationSizes[subsetSize] = permutationSize
+ payloadSizes[subsetSize] = payloadSize
+ instanceOffsets[subsetSize] = cardinality
+
+ cardinality +=
+  permutationSize
+  * payloadSize
+
+ // Enable O(1) recovery of subsetSize later.
+ const bitDepth = cardinality.toString(2).length
+ while (bitDepth > instanceBitDepths.length)
+  instanceBitDepths.push(subsetSize - 1n)
+ instanceBitDepths[bitDepth] = subsetSize
+}
+
+permutation.define({
+ instanceOffsets: { value: instanceOffsets },
+ instanceBitDepths: { value: instanceBitDepths },
+ permutationSizes: { value: permutationSizes },
+ payloadCardinality: { value: payloadCardinality },
+ payloadSizes: { value: payloadSizes },
+ superset: { value: superset },
+ supersetSize: { value: supersetSize },
+ maxInstanceCount: { value: maxInstanceCount },
+
+ cardinality: { value: cardinality },
+
+ permutationRouteID: { value: null, writable: true },
+ viewedPermutationRouteID: { value: null, writable: true },
+
+ payloadRouteID: { value: null, writable: true },
+ viewedPayloadRouteID: { value: null, writable: true },
+
+ instances: { value: [] },
+ viewedInstances: { value: null, writable: true },
+
+ tree: { value: null, writable: true },
+ FenwickTree: {
+  value: class FenwickTree {
+   constructor() {
+    this.tree = [...LSB]
+   }
+   update(i, val) {
+    for (; i < supersetSize; i += LSB[i])
+     this.tree[i] += val
+   }
+   query(i) {
+    let sum = 0n
+    for (; i >= 0n; i -= LSB[i])
+     sum += this.tree[i]
+    return sum
+   }
+   findNthAvailable(n) {
+    let nthAvailable = 0n
+    for (let p = powerFloor; p > 0n; p /= 2n) {
+     const i = nthAvailable + p
+     if (i <= supersetSize && this.tree[i - 1n] <= n) {
+      n -= this.tree[i - 1n]
+      nthAvailable = i
+     }
+    }
+    return nthAvailable
+   }
+  }
+ }
+})

package/src/parts/abstract/permutation/constants.js

@@ -0,0 +1 @@
+const permutation = this

package/src/parts/abstract/permutation/equation.html_.js

@@ -0,0 +1 @@
+return `<math><mtext>TBD for ${permutation.maxInstanceCount} max instances.</mtext></math>`

package/src/parts/abstract/permutation/factor-get-permutation.js

@@ -0,0 +1,9 @@
+const indexOfLastPossibleInstanceSubject = permutation.supersetSize - 1n
+const indexOfLastInstance = INSTANCE_COUNT - 1n
+
+let permutationFactorOfCurrentInstanceIndex = 1n
+
+for (let consumedInstanceIndices = 0n; consumedInstanceIndices < indexOfLastInstance - CURRENT_INSTANCE_INDEX; consumedInstanceIndices++)
+ permutationFactorOfCurrentInstanceIndex *= indexOfLastPossibleInstanceSubject - CURRENT_INSTANCE_INDEX - consumedInstanceIndices
+
+return permutationFactorOfCurrentInstanceIndex