kireji 0.6.8 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.6.8",
+ "version": "0.8.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/description

@@ -4,4 +4,4 @@ By clicking on a part in the sidebar, you can view the properties of that part a
 
 The properties also allow you to view the list of the files which are associated with each part and to see the current state of each part and its corresponding base 64 hash. These values update in real-time as you interact with any of the apps.
 
-You can travel away from this application, make changes in other applications, and then return here to see how those cross-origin interactions have impacted each part in the ecosystem.
+You can travel away from this application, make changes in other applications, and then return here to see how those cross-origin interactions have impacted each part of the ecosystem.

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

@@ -163,7 +163,6 @@ const pointerConfig = {
      tabGroup.recomputeRouteID(true)
     } else {
 
-     debug("B", tabGroup.previewTabIndex === null, BigInt(tabGroup.openTabs.length), tabGroup.maxTabCount)
      if (BigInt(tabGroup.openTabs.length) === tabGroup.maxTabCount) {
       alert("You have too many tabs open!")
       return

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

@@ -3,14 +3,14 @@ const cardinalityAsString = instances.includes(activePart) ? activePartCardinali
 
 return (
  instances.includes(activePart) ? (
+  `<h3>Equation</h3>` +
+  activePart.mathML(1 + (activePart.length <= 4), "variable") +
+  `<hr>` +
   "<h3>Cardinality</h3>" +
-  `<p>${cardinalityAsString.length < 16 ? cardinalityAsString : scientific(activePartCardinality, true)}</p>` +
+  activePart.mathML(0, "value") +
   `<hr>` +
   "<h3>Hartley Entropy</h3>" +
-  `<p>${toCharms(activePartCardinality)} (${toBits(activePartCardinality)})</p>` +
-  `<hr>` +
-  `<h3>Equation</h3>` +
-  "<math>" + activePart["equation-variable.html"] + "<mo>=</mo>" + activePart["equation.html"] + "</math>"
+  `<math><mn>${toCharms(activePartCardinality, false)}</mn><mspace width=".5ch"/><mtext>charms</mtext><mspace width=".5ch"/><mo>(</mo><mn>${toBits(activePartCardinality, false)}</mn><mspace width=".5ch"/><mtext>bits</mtext><mo>)</mo></math>`
  ) : (
   "<p class=disabled-message>Abstract parts do not have a concrete state space.</p>"
  )

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

@@ -354,6 +354,13 @@ body.vintage #kireji_app editor-::after {
  pointer-events: none;
 }
 
+body.vintage #kireji_app #info-state-space>section>math {
+ text-align: right;
+ margin: calc(.5 * var(--spacing));
+ width: min-content;
+ justify-self: end;
+}
+
 @container editor-view (width > 350px) {
  body.vintage #kireji_app #info-state-space>section {
   display: grid;

package/src/app/kireji/editor/tab-group/mathML-subpart.js

@@ -0,0 +1,8 @@
+const n_tabs = allSubjects.length
+
+return [
+ "<mn>1</mn>",
+ "<mo>+</mo>",
+ `<munderover><mo>∑</mo><mrow><msub><mi>𝑛</mi><mi>tabs</mi></msub><mo>=</mo><mn>1</mn></mrow><mi>${n_tabs}</mi></munderover><mrow><msub><mi>𝑛</mi><mi>tabs</mi></msub><mo>(</mo><msub><mi>𝑛</mi><mi>tabs</mi></msub><mo>+</mo><mn>1</mn><mo>)</mo></mrow>`,
+ `<munderover><mo>∏</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>${n_tabs}</mi><mo>-</mo><mi>i</mi><mo>+</mo><mn>1</mn><mo>)</mo></mrow>`
+]

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

@@ -1,4 +1,4 @@
-#kireji_app side-bar {
+#kireji_app>side-bar {
  position: absolute;
  top: 0;
  left: var(--tool-bar-width);
@@ -6,6 +6,29 @@
  bottom: 0;
 }
 
+@media (width > 424px) {
+
+ #kireji_app:has(side-bar) {
+  --sidebar-width: calc(var(--tool-bar-width) + var(--sidebar-view-width));
+ }
+}
+
+@media (width < 425px) {
+
+ #kireji_app:has(side-bar)>editor- {
+  pointer-events: none;
+ }
+
+ #kireji_app>width-handle {
+  display: none;
+ }
+
+ #kireji_app>side-bar {
+  z-index: 10000;
+  width: calc(var(--app-width) - var(--tool-bar-width));
+ }
+}
+
 #kireji_app #sidebar-view-header {
  position: absolute;
  z-index: 10;
@@ -92,26 +115,31 @@
  position: relative;
 }
 
-#kireji_app #sidebar-view summary>.explore-toggle,
-#kireji_app #sidebar-view summary>img,
-#kireji_app #sidebar-view svg {
- height: var(--tab-icon-size);
- width: var(--tab-icon-size);
- margin: calc((var(--tab-line-height) - var(--tab-icon-size)) / 2);
-}
-
 #kireji_app outliner-spacer {
- width: calc(var(--tab-line-height) / 2);
+ width: calc(var(--depth) * var(--tab-line-height) / 2);
  border-radius: 0;
- border-right: 1px solid var(--bg-un-mode);
+ background:
+  linear-gradient(to right, transparent 0%, transparent calc(100% - 1px), var(--bg-un-mode) calc(100% - 1px), var(--bg-un-mode) 100%) 0 0 / calc(var(--tab-line-height) / 2) var(--tab-line-height);
+ /* border-right: 1px solid var(--bg-un-mode); */
 }
 
 #kireji_app outliner-spacer:has(+ img) {
- margin-right: calc(var(--tab-line-height) / 2);
+ width: calc((var(--depth) - 1) * var(--tab-line-height) / 2);
+ margin-right: var(--tab-line-height);
 }
 
-#kireji_app details.empty>summary>outliner-spacer:last-of-type {
- border: none;
+/*
+ #kireji_app details.empty>summary>outliner-spacer:last-of-type {
+  border: none;
+ }
+*/
+
+#kireji_app #sidebar-view summary>.explore-toggle,
+#kireji_app #sidebar-view summary>img,
+#kireji_app #sidebar-view svg {
+ height: var(--tab-icon-size);
+ width: var(--tab-icon-size);
+ margin: calc((var(--tab-line-height) - var(--tab-icon-size)) / 2);
 }
 
 #kireji_app #sidebar-view summary .label {
@@ -152,13 +180,21 @@ body.modern #kireji_app #sidebar-view summary {
 
 /* Vintage */
 
-body.vintage #kireji_app side-bar {
+body.vintage #kireji_app>side-bar {
  top: 6px;
  width: calc(var(--sidebar-view-width) - (var(--handle-thickness) / 2) - 2px);
  left: calc(6px + var(--tool-bar-width));
  bottom: 6px;
 }
 
+
+@media (width < 425px) {
+
+ body.vintage #kireji_app>side-bar {
+  width: calc(var(--app-width) - var(--tool-bar-width) - 12px);
+ }
+}
+
 body.vintage #kireji_app side-bar::after {
  content: "";
  position: absolute;

package/src/app/kireji/static.css

@@ -5,10 +5,6 @@
  overscroll-behavior: none;
 }
 
-#kireji_app:has(side-bar) {
- --sidebar-width: calc(var(--tool-bar-width) + var(--sidebar-view-width));
-}
-
 body.modern {
  --tab-group-height: calc(var(--tab-line-height) + var(--spacing) / 1.5);
  --tab-line-height: 26px;

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

@@ -27,7 +27,7 @@ body.modern #kireji_app tool-bar {
 }
 
 body.modern #kireji_app:has(side-bar) tool-bar>button[data-active] {
- box-shadow: inset 3px 0 0 -1px var(--accent);
+ box-shadow: inset -5px 0 0 -1px var(--accent);
 }
 
 body.vintage #kireji_app tool-bar {

package/src/build.js

@@ -90,6 +90,62 @@ function ƒ(_, compressedSubjectOrigins) {
      result[dimension] = vector[dimension] / magnitude
    return result
   }
+  static sign(vector) {
+   const result = {}
+   for (const dimension in vector)
+    result[dimension] = Math.sign(vector[dimension])
+   return result
+  }
+  static floor(vector) {
+   const result = {}
+   for (const dimension in vector)
+    result[dimension] = Math.floor(vector[dimension])
+   return result
+  }
+  static round(vector) {
+   const result = {}
+   for (const dimension in vector)
+    result[dimension] = Math.round(vector[dimension])
+   return result
+  }
+  static operate(value1, value2, operation) {
+   if (typeof value1 === "number" || typeof value2 === "number") {
+    if (typeof value1 === "number" && typeof value2 === "number")
+     return operation(value1, value2)
+
+    const result = {}
+    const number = typeof value1 === "number" ? value1 : value2
+    const vector = typeof value1 === "object" ? value1 : value2
+
+    for (const dimension in vector)
+     result[dimension] = operation(vector[dimension], number)
+
+    return result
+   }
+
+   const result = {}
+   const dimensions = Object.keys(value1)
+
+   if (dimensions.some(key => !(key in value2)) || Object.keys(value2).some(key => !(key in value1)))
+    throw new Error(`Vector Operation Error: the two vectors do not have the same keys.`)
+
+   for (const dimension of dimensions)
+    result[dimension] = operation(value1[dimension], value2[dimension])
+
+   return result
+  }
+  static add(value1, value2) {
+   return this.operate(value1, value2, (a, b) => a + b)
+  }
+  static subtract(value1, value2) {
+   return this.operate(value1, value2, (a, b) => a - b)
+  }
+  static multiply(value1, value2) {
+   return this.operate(value1, value2, (a, b) => a * b)
+  }
+  static dot(vector1, vector2) {
+   return vector1.x * vector2.x + vector1.y * vector2.y
+  }
  }
  class FenwickTree {
   static LSB = []
@@ -933,5 +989,6 @@ function ƒ(_, compressedSubjectOrigins) {
  hangHydration: "0",
  haltHydration: "0",
  defaultApplicationHost: "kireji.app",
- port: "3000"
+ port: "3000",
+ showWarning: "1"
 })

package/src/part.css_.js

@@ -0,0 +1,14 @@
+return /* css */`
+
+html, body {
+ --warning-height: ${+_.showWarning ? "26px" : "0px"};
+}${+_.showWarning ? `
+
+@media (width < 390px) {
+
+ html,
+ body {
+  --warning-height: 49px;
+ }
+}` : ""}
+` + _["static.css"]

package/src/part.html_.js

@@ -20,7 +20,7 @@ return _.injectImages(/* html */`<!DOCTYPE html>
   <style id="application-css">${application["part.css"]}</style>
  </head>
  <body class="unhydrated ${[era.arm.key, color.arm.key, ...taskBar.menu.classes, ...application.classes].join(" ")}">
-  <warning->🚧 App in Alpha. Features subject to change/break without notice.</warning->
+  ${+_.showWarning ? `<warning->🚧 App in Alpha. Features subject to change/break without notice.</warning->` : ""}
   <title-bar autofocus tabIndex=0>
    <img class="part-icon" src="${icon}"/>
    <span id=application-title>${title}</span>

package/src/parts/abstract/clip/mathML-subpart.js

@@ -0,0 +1,4 @@
+if (DEPTH <= 0)
+ return [/* xml */`<mi>frames</mi><mo>(</mo><msub><mi>𝑝</mi><mi>${clip.key}</mi></msub><mo>)</mo>`]
+
+return [`<mn>${clip.cardinality}</mn>`]

package/src/parts/abstract/match/mathML-subpart.js

@@ -0,0 +1,9 @@
+const defaultTerm = /* xml */`<mn>1</mn>`
+
+if (DEPTH <= 0 || part.length === 0)
+ // Strip the "<math>" tags off.
+ return [match.length ? /* xml */`<mo largeop="true">∑</mo><msub><mi>𝑘</mi><msub><mi>𝑝</mi><mi>${part.key ?? "ecosystem"}</mi></msub></msub>` : defaultTerm]
+
+const operator = "<mo>+</mo>"
+const addends = part.map(addend => addend.mathML(DEPTH - 1, "none", LABELS, true, false))
+return addends.length ? addends.flatMap(addend => [addend, operator]).slice(0, -1) : [defaultTerm]

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

@@ -0,0 +1,84 @@
+mesh.define({
+ triTable: { value: [] },
+ triIndex: { value: -1, writable: true },
+ position: { value: { x: null, y: null } },
+ cardinality: {
+  resolve() {
+   let meshCardinality = 0n
+
+   // Obtain the raw data for this mesh.
+   const [pointList, tris] = mesh.getData()
+
+   // Iterate over each tri (array of three point indices) in the data.
+   for (const tri of tris) {
+
+    // Prepare the per-tri cardinality sum.
+    let triCardinality = 0n
+
+    // Recover the true points of the tri.
+    const points = tri.map(pointID => pointList[pointID])
+
+    // Get just the y-coordinate of all the points.
+    const yPoints = points.map(point => point[1])
+
+    // Estimate the y-range of this tri.
+    const range = {
+     min: Math.min(...yPoints),
+     max: Math.max(...yPoints)
+    }
+
+    // Iterate over the range inclusively to populate each row subspace.
+    const rows = []
+    for (let rowID = range.min; rowID <= range.max; rowID++) {
+
+     // This irrational offset ensures that all grid points lie vertically in at most one triangular region.
+     const offsetRowID = rowID + (Math.PI / 3.141 - 0.5)
+
+     // Iterate over the 3 lines in order to determine where the edges intersect the given row.
+     const intersections = []
+     for (let edgeID = 0; edgeID < 3; edgeID++) {
+
+      const pointA = points[edgeID]
+      const pointB = points[(edgeID + 1) % 3]
+
+      if ((pointA[1] <= offsetRowID && pointB[1] > offsetRowID) || (pointB[1] <= offsetRowID && pointA[1] > offsetRowID))
+       intersections.push(pointA[0] + ((offsetRowID - pointA[1]) / (pointB[1] - pointA[1])) * (pointB[0] - pointA[0]))
+     }
+
+     if (intersections.length < 2) {
+      // This row doesn't have a full pixel. Adjust the range.
+      if (rowID <= range.min + 1) range.min = rowID + 1
+      else if (rowID >= range.max - 1) range.max = rowID - 1
+      else throw new Error("Unexpected tri geometry found in mesh.")
+      continue
+     }
+
+     /** @type {IMeshTriDataRow} */
+     const row = {
+      y: rowID,
+      range: {
+       min: Math.ceil(Math.min(...intersections)),
+       max: Math.ceil(Math.max(...intersections)) - 1,
+      },
+      offset: triCardinality
+     }
+     rows.push(row)
+     triCardinality += BigInt(row.range.max - row.range.min + 1)
+    }
+
+    // Store the tri.
+    mesh.triTable.push({
+     points,
+     range,
+     rows,
+     offset: meshCardinality,
+     cardinality: triCardinality
+    })
+
+    meshCardinality += triCardinality
+   }
+
+   return meshCardinality
+  }
+ }
+})

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

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

package/src/parts/abstract/mesh/data-get.js

@@ -0,0 +1,11 @@
+const { points, tris } = mesh.manifest
+
+const data = [[], []]
+
+for (let index = 0; index < points.length; index += 2)
+ data[0].push([points[index], points[index + 1]])
+
+for (let index = 0; index < tris.length; index += 3)
+ data[1].push([tris[index], tris[index + 1], tris[index + 2]])
+
+return data

package/src/parts/abstract/mesh/mathML-subpart.js

@@ -0,0 +1,10 @@
+if (DEPTH <= 0)
+ return [
+  `<munder><mo>∑</mo><mrow><mi>t</mi><mo>∈</mo><mi>tris</mi><mo>(</mo><msub><mi>𝑝</mi><mi>${mesh.key}</mi></msub><mo>)</mo></mrow></munder>`,
+  `<munder><mo>∑</mo><mrow><mi>r</mi><mo>∈</mo><mi>rows</mi><mo>(</mo><mi>t</mi><mo>)</mo></mrow></munder>`,
+  `<msub><mi>𝑘</mi><mi>r</mi></msub>`
+ ]
+
+return /*mesh.triTable.length > 20 ? base(DEPTH) :*/ mesh.triTable.flatMap(triData => {
+ return [`<mn>${triData.cardinality}</mn>`, "<mo>+</mo>"]
+}).slice(0, -1)

package/src/parts/abstract/mesh/model_.js

@@ -0,0 +1 @@
+return { ...mesh.position }

package/src/parts/abstract/mesh/part.json

@@ -0,0 +1,18 @@
+{
+ "abstract": true,
+ "methods": {
+  "data-get": [],
+  "point-tri-contains": [
+   "TRI_INDEX",
+   "POINT"
+  ],
+  "point-tri-that-contains": [
+   "POINT"
+  ],
+  "ray-cast": [
+   "FORCE_VECTOR",
+   "DELTA_TIME",
+   "ENABLE_SLIDING"
+  ]
+ }
+}

package/src/parts/abstract/mesh/point-tri-contains.js

@@ -0,0 +1,14 @@
+const roundedY = Math.floor(POINT.y)
+const triData = mesh.triTable[TRI_INDEX]
+
+if (roundedY < triData.range.min || roundedY > triData.range.max)
+ return false
+
+const row = triData.rows[roundedY - triData.range.min]
+
+if (!row)
+ return false
+
+const roundedX = Math.floor(POINT.x)
+
+return roundedX >= row.range.min && roundedX <= row.range.max

package/src/parts/abstract/mesh/point-tri-that-contains.js

@@ -0,0 +1,10 @@
+// Check current tri first.
+if (mesh.triIndex !== -1 && mesh.triContainsPoint(mesh.triIndex, POINT))
+ return mesh.triIndex
+
+// Check all tris. TODO: Memoize neighbors.
+for (let triIndex = 0; triIndex < mesh.triTable.length; triIndex++)
+ if (triIndex !== mesh.triIndex && mesh.triContainsPoint(triIndex, POINT))
+  return triIndex
+
+return -1