kireji 0.5.0 → 0.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.5.0",
+ "version": "0.6.6",
  "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/attributes_.js

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

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

@@ -1,14 +1,16 @@
 {
  "extends": "mix",
- "point": [
-  "POINTER_EVENT",
-  "TARGET_ELEMENT",
-  "PART_INDEX",
-  "FILE_INDEX",
-  "TAB_PAYLOAD = 0n"
- ],
- "point-close": [
-  "POINTER_EVENT",
-  "TARGET_ELEMENT"
- ]
+ "methods": {
+  "point": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT",
+   "PART_INDEX",
+   "FILE_INDEX",
+   "TAB_PAYLOAD = 0n"
+  ],
+  "point-close": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT"
+  ]
+ }
 }

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

@@ -94,7 +94,7 @@ const pointerConfig = {
      return
     }
 
-    if (tabGroup.previewTabIndex === null && BigInt(tabGroup.openTabs.length) === tabGroup.maxTabCount) {
+    if ((tabGroup.previewTabIndex === null || droppedOntoEditor) && BigInt(tabGroup.openTabs.length) === tabGroup.maxTabCount) {
      alert("You have too many tabs open!")
      return
     }
@@ -163,6 +163,7 @@ 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/properties/part.html_.js

@@ -7,7 +7,7 @@ const
   const filename = isProperty ? subjectProperty.filename : data
   const modifiers = isProperty ? subjectProperty.modifiers : ""
   const niceName = isProperty ? subjectProperty.niceName : `"${filename}"`
-  const args = isProperty ? subject.manifest[subjectProperty.id] ?? null : null
+  const args = isProperty ? subject.manifest.methods[subjectProperty.id] ?? null : null
   const isAlias = isProperty && subjectProperty.isAlias
   const isView = isProperty && subjectProperty.isView
   const isGenerated = isProperty && subjectProperty.isGenerated
@@ -67,10 +67,10 @@ const
  },
  recordHTML = [createRecordsHTML(activePart)]
 
-let prototype = activePart.prototype
-while (prototype !== Object.prototype) {
- recordHTML.push(createRecordsHTML(prototype))
- prototype = prototype.prototype
+let recordsSubject = activePart.prototype
+while (recordsSubject) {
+ recordHTML.push(createRecordsHTML(recordsSubject))
+ recordsSubject = recordsSubject.prototype
 }
 
 return recordHTML.join("")

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

@@ -1,8 +1,10 @@
 {
  "abstract": true,
  "extends": "boolean",
- "point": [
-  "POINTER_EVENT",
-  "TARGET_ELEMENT"
- ]
+ "methods": {
+  "point": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT"
+  ]
+ }
 }

package/src/app/kireji/editor/sections/section/view-update.js

@@ -0,0 +1,8 @@
+const detailsElement = Q(`#info-${part.key}`)
+
+if (detailsElement) {
+ if (part.model)
+  detailsElement.setAttribute("open", "")
+ else
+  detailsElement.removeAttribute("open")
+}

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

@@ -1,13 +1,13 @@
-const cardinality = activePart.cardinality
-const cardinalityAsString = instances.includes(activePart) ? cardinality.toLocaleString() : null
+const activePartCardinality = activePart.cardinality
+const cardinalityAsString = instances.includes(activePart) ? activePartCardinality.toLocaleString() : null
 
 return (
  instances.includes(activePart) ? (
   "<h3>Cardinality</h3>" +
-  `<p>${cardinalityAsString.length < 16 ? cardinalityAsString : scientific(cardinality, true)}</p>` +
+  `<p>${cardinalityAsString.length < 16 ? cardinalityAsString : scientific(activePartCardinality, true)}</p>` +
   `<hr>` +
   "<h3>Hartley Entropy</h3>" +
-  `<p>${toCharms(activePart.cardinality)} (${toBits(activePart.cardinality)})</p>` +
+  `<p>${toCharms(activePartCardinality)} (${toBits(activePartCardinality)})</p>` +
   `<hr>` +
   `<h3>Equation</h3>` +
   "<math>" + activePart["equation-variable.html"] + "<mo>=</mo>" + activePart["equation.html"] + "</math>"

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

@@ -13,7 +13,7 @@ let cardinality = 1n
 
 for (let tabCount = 1n, permutationSize = 1n, payloadSize = 1n; tabCount <= subjectCount; tabCount++) {
 
- // Memoize a prototype LSB array to simplify initialization of Fenwick tree instances.
+ // TODO: Replace implementation.
  LSB[tabCount - 1n] = tabCount & -tabCount
 
  if (tabCount > maxTabCount)
@@ -62,33 +62,5 @@ tabGroup.define({
  payloadSizes: { value: payloadSizes },
  maxTabCount: { value: maxTabCount },
  tree: { value: null, writable: true },
- container: { value: null, writable: true },
- FenwickTree: {
-  value: class FenwickTree {
-   constructor() {
-    this.tree = [...LSB]
-   }
-   update(i, val) {
-    for (; i < subjectCount; 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 <= subjectCount && this.tree[i - 1n] <= n) {
-      n -= this.tree[i - 1n]
-      nthAvailable = i
-     }
-    }
-    return nthAvailable
-   }
-  }
- }
+ container: { value: null, writable: true }
 })

package/src/app/kireji/editor/tab-group/listeners-attach.js

@@ -1,4 +1,5 @@
 if (tabGroup.activeTab && !tabGroup.activeTab.filename && !tabGroup.activeTab.part.isAbstract) {
- tabGroup.activeTab.part.attach("populate", tabGroup, "listener")
+ tabGroup.activeTab.part.attach("add", tabGroup, "listener")
+ tabGroup.activeTab.part.attach("update", tabGroup, "listener")
  tabGroup.activeTab.part.attach("remove", tabGroup, "listener")
 }

package/src/app/kireji/editor/tab-group/listeners-detach.js

@@ -1,4 +1,5 @@
 if (tabGroup.viewedActiveTab && !tabGroup.viewedActiveTab.filename && !tabGroup.viewedActiveTab.part.isAbstract) {
- tabGroup.viewedActiveTab.part.detach("populate", tabGroup, "listener")
+ tabGroup.viewedActiveTab.part.detach("add", tabGroup, "listener")
+ tabGroup.viewedActiveTab.part.detach("update", tabGroup, "listener")
  tabGroup.viewedActiveTab.part.detach("remove", tabGroup, "listener")
 }

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

@@ -208,7 +208,7 @@ body.vintage #kireji_app tab- .close-tab:hover {
  box-shadow: var(--outset);
 }
 
-body.vintage #kireji_app tab- .close-tab:active {
+body.vintage #kireji_app tab- .close-tab.down {
  box-shadow: var(--deep-inset);
 }
 

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

@@ -1,26 +1,28 @@
 {
- "HTML-render-tab": [
-  "TAB_PART",
-  "TAB_FILENAME",
-  "TAB_PAYLOAD",
-  "TAB_INDEX"
- ],
- "listener": [
-  "SENDER"
- ],
- "routeID-get-permutation": [
-  "TABS"
- ],
- "routeID-get-payload": [
-  "TABS"
- ],
- "routeID-recompute": [
-  "RECOMPUTE_OPEN_TABS"
- ],
- "factor-get-permutation": [
-  "NUMBER_OF_TABS_OPEN",
-  "CURRENT_TAB_INDEX"
- ],
- "listeners-attach": [],
- "listeners-detach": []
+ "methods": {
+  "HTML-render-tab": [
+   "TAB_PART",
+   "TAB_FILENAME",
+   "TAB_PAYLOAD",
+   "TAB_INDEX"
+  ],
+  "listener": [
+   "SENDER"
+  ],
+  "routeID-get-permutation": [
+   "TABS"
+  ],
+  "routeID-get-payload": [
+   "TABS"
+  ],
+  "routeID-recompute": [
+   "RECOMPUTE_OPEN_TABS"
+  ],
+  "factor-get-permutation": [
+   "NUMBER_OF_TABS_OPEN",
+   "CURRENT_TAB_INDEX"
+  ],
+  "listeners-attach": [],
+  "listeners-detach": []
+ }
 }

package/src/app/kireji/editor/tab-group/routeID-distribute.js

@@ -34,7 +34,7 @@ if (numberOfTabsOpen !== tabGroup.openTabs.length || tabGroup.permutationRouteID
  tabGroup.payloadRouteID = payloadRouteID
 
  // Prepare an empty Fenwick tree for converting availability-based indices to absolute indices.
- tabGroup.tree = new tabGroup.FenwickTree()
+ tabGroup.tree = new FenwickTree(BigInt(allSubjects.length))
 
  const indexOfLastOpenTab = numberOfTabsOpen - 1n
  const indexOfLastPossibleTabSubject = BigInt(allSubjects.length) - 1n

package/src/app/kireji/editor/tab-group/routeID-get-permutation.js

@@ -1,7 +1,7 @@
 const numberOfTabsOpen = BigInt(TABS.length)
 
 // Prepare an empty Fenwick tree for converting absolute indices to availability-based indices.
-tabGroup.tree = new tabGroup.FenwickTree()
+tabGroup.tree = new FenwickTree(BigInt(allSubjects.length))
 
 // Compile the array of unranked indices into a single permutation identifier.
 let permutationRouteID = 0n

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

@@ -59,19 +59,10 @@ declare interface IKirejiAppTabGroup
  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
 }
 
 declare type IKirejiAppTabGroupTabArray = IKirejiAppTabGroupTab[]
 
-declare class FenwickTree {
- constructor(): FenwickTree
- update(i: bigint, val: bigint): void
- query(i: bigint): bigint
- findNthAvailable(n: bigint): bigint
-}
-
 declare interface IKirejiAppTabGroupTab {
  readonly part: IPartAny
  readonly filename?: string

package/src/app/kireji/editor/tab-group/{view-add.js → view-hydrate.js}

@@ -4,10 +4,8 @@ tabGroup.viewedPermutationRouteID = tabGroup.permutationRouteID
 tabGroup.viewedPayloadRouteID = tabGroup.payloadRouteID
 tabGroup.viewedOpenTabs = [...tabGroup.openTabs]
 tabGroup.container = Q("#tab-group")
-
-_.parts.core.client.promise.then(() => {
- Q(`tab-[data-active]`)?.scrollIntoView({
-  behavior: 'smooth',
-  inline: 'nearest',
- })
-})
+tabGroup.attachListeners()
+Q(`tab-[data-active]`)?.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'nearest',
+})

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

@@ -0,0 +1,115 @@
+const hasNoTabs = !tabGroup.openTabs.length
+const activeTab = tabGroup.activeTab
+const previewTab = tabGroup.previewTab
+
+// 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.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
+ const targetTabCount = tabGroup.openTabs.length
+ const maxLength = Math.max(existingTabCount, targetTabCount)
+
+ for (let i = 0; i < maxLength; i++) {
+  if (targetTabCount <= i) {
+   tabContainer.children[i].remove()
+   continue
+  }
+
+  const newOpenTab = tabGroup.openTabs[i]
+  const existingOpenTab = tabGroup.viewedOpenTabs[i]
+
+  if (existingOpenTab === newOpenTab)
+   continue
+
+  const newTabElement = (() => {
+   const offscreen = document.createElement("div")
+   offscreen.innerHTML = tabGroup.renderTabHTML(newOpenTab.part, newOpenTab.filename, newOpenTab.payload, i)
+   return offscreen.querySelector("tab-")
+  })()
+
+  if (existingOpenTab) {
+   tabContainer.children[i].replaceWith(newTabElement)
+   continue
+  }
+
+  tabContainer.appendChild(newTabElement)
+ }
+ tabGroup.viewedPermutationRouteID = tabGroup.permutationRouteID
+ tabGroup.viewedPayloadRouteID = tabGroup.payloadRouteID
+ tabGroup.viewedOpenTabs = [...tabGroup.openTabs]
+}
+
+if (tabGroup.viewedActiveTab && tabGroup.viewedActiveTab !== activeTab)
+ Q(`tab-[data-active]`)?.removeAttribute("data-active")
+
+if (tabGroup.viewedPreviewTab && tabGroup.viewedPreviewTab !== previewTab)
+ Q(`tab-[data-preview]`)?.removeAttribute("data-preview")
+
+const currentTabLayout = tabGroup.viewedActiveTab ? (tabGroup.viewedActiveTab.filename ? "file" : "summary") : "empty"
+
+tabGroup.viewedActiveTab = activeTab
+tabGroup.viewedPreviewTab = previewTab
+
+if (!hasNoTabs) {
+ const activeTabElement = Q(`tab-:nth-child(${tabGroup.activeTabIndex + 1})`)
+
+ if (!activeTabElement.hasAttribute("data-active")) {
+  activeTabElement.setAttribute("data-active", "")
+  activeTabElement.scrollIntoView({
+   behavior: "smooth",
+   inline: 'nearest',
+  })
+ }
+
+ tabGroup.attachListeners()
+
+ const previewTabElement = tabGroup.previewTabIndex === null ? null : Q(`tab-:nth-child(${tabGroup.previewTabIndex + 1})`)
+
+ if (previewTabElement && !previewTabElement.hasAttribute("data-preview"))
+  previewTabElement.setAttribute("data-preview", "")
+}
+
+if (currentTabLayout === "summary") {
+ if (hasNoTabs) {
+  Q(`editor-view scroll-content`).innerHTML = editor["empty-view.html"]
+ } else if (!tabGroup.viewedActiveTab.filename) {
+  for (const section of sections) {
+   const element = Q(`#info-${section.key}>section`)
+   element.innerHTML = section["part.html"]
+   if (section.key.startsWith("state")) {
+    if (activePart.isAbstract || section.key === "state" && activePart.disabled)
+     element.setAttribute("disabled", "")
+    else
+     element.removeAttribute("disabled")
+   }
+  }
+ } else {
+  Q(`editor-view scroll-content`).innerHTML = editor["file-view.html"]
+ }
+ Q(`crumbs-`).innerHTML = editor["crumbs.html"]
+} else if (currentTabLayout === "file") {
+ if (hasNoTabs) {
+  Q(`editor-view scroll-content`).innerHTML = editor["empty-view.html"]
+ } else if (tabGroup.viewedActiveTab.filename) {
+  Q('editor-view scroll-content').innerHTML = editor["file-view.html"]
+ } else {
+  Q(`editor-view scroll-content`).innerHTML = editor["summary-view.html"]
+ }
+ Q(`crumbs-`).innerHTML = editor["crumbs.html"]
+} else {
+ if (hasNoTabs)
+  throw `Unexpected update to empty tab group without adding any new tabs.`
+ if (tabGroup.viewedActiveTab.filename) {
+  Q(`editor-view scroll-content`).innerHTML = editor["file-view.html"]
+ } else {
+  Q(`editor-view scroll-content`).innerHTML = editor["summary-view.html"]
+ }
+ Q(`crumbs-`).innerHTML = editor["crumbs.html"]
+}
+
+Q("#sidebar-view summary[data-active]")?.removeAttribute("data-active")
+
+if (!hasNoTabs)
+ Q(`#sidebar-view summary[data-index="${allParts.indexOf(tabGroup.viewedActiveTab.part)}"]`)?.setAttribute("data-active", "")

package/src/app/kireji/sidebar/open/view-update.js

@@ -0,0 +1,10 @@
+/** @type {IScroller<IPartOutliner<IKirejiAppSidebar>>} */
+const scroller = sidebar.view.scroller
+
+if (part.routeID === 0n) {
+ scroller.removeView()
+ sidebar.element.remove()
+} else {
+ Q("tool-bar").after(sidebar.element)
+ scroller.addView()
+}

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

@@ -1,4 +1,6 @@
 {
  "extends": "mix",
- "activeTab-frame": []
+ "methods": {
+  "activeTab-frame": []
+ }
 }

package/src/app/kireji/sidebar/width/part.json

@@ -1,6 +1,8 @@
 {
- "point": [
-  "POINTER_EVENT",
-  "TARGET_ELEMENT"
- ]
+ "methods": {
+  "point": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT"
+  ]
+ }
 }

package/src/app/kireji/tool-bar/button/view-add.js

@@ -1,7 +1,5 @@
-if (hydrated) {
- Q(`tool-bar>button:nth-child(${part.index + 1})`).setAttribute("data-active", "")
- /** @type {IPartOutliner<IKirejiAppSidebar>} */
- const newView = sidebar[part.key]
- sidebar.element.innerHTML = sidebar["view.html"]
- newView.scroller.addView()
-}
+Q(`tool-bar>button:nth-child(${part.index + 1})`).setAttribute("data-active", "")
+/** @type {IPartOutliner<IKirejiAppSidebar>} */
+const newView = sidebar[part.key]
+sidebar.element.innerHTML = sidebar["view.html"]
+newView.scroller.addView()

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

@@ -39,7 +39,7 @@ body.vintage #kireji_app tool-bar>button {
  box-shadow: var(--deep-outset);
 }
 
-body.vintage #kireji_app tool-bar>button:active,
+body.vintage #kireji_app tool-bar>button.down,
 body.vintage #kireji_app:has(side-bar) tool-bar>button[data-active] {
  box-shadow: var(--deep-inset);
  background: var(--bg-checker), var(--bg-un-mode);

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

@@ -1,8 +1,10 @@
 {
  "extends": "match",
- "point": [
-  "POINTER_EVENT",
-  "TARGET_ELEMENT",
-  "VIEW_INDEX"
- ]
+ "methods": {
+  "point": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT",
+   "VIEW_INDEX"
+  ]
+ }
 }

package/src/application-goto.js

@@ -5,7 +5,7 @@ document.body.classList.add("unhydrated")
 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")
+ task.classList.add("preview-pressed", "pressed")
 }
 
 location = targetLocation