kireji 0.8.2 → 0.10.0

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 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 Web Framework** is a reactive full-stack web framework that can build and serve web apps and multi-origin web 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?**
 
@@ -9,11 +9,11 @@ The Kireji Project poses a question: **What if we could treat every web page as
 | ---- | -------
 | [MPHF](https://github.com/kireji-app/mphf#readme) | [Coordinate System<br><sup>A bijective coordinate system for hashing structured data</sup>](https://github.com/kireji-app/mphf#readme)
 | **Kireji** | **Web Framework - ★ You are here<br><sup>A reactive web framework with MPHF routing</sup>**
-| [Demo](https://github.com/kireji-app/demo#readme) | [App Ecosystem<br><sup>An example app ecosystem demonstrating the project](https://github.com/kireji-app/demo#readme)</sup>
+| [Demo](https://github.com/kireji-app/demo#readme) | [Ecosystem<br><sup>An example ecosystem demonstrating the project](https://github.com/kireji-app/demo#readme)</sup>
 
 ## Usage
 
-> <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>
+> <sub>Note: This framework is currently in alpha. Expect breaking changes with each version. Check out the [Demo 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.

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.8.2",
+ "version": "0.10.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

@@ -1,4 +1,4 @@
-This application allows you to view all of the parts that define the Kireji Web Framework and the Demo App Ecosystem. It includes a sidebar pane and a property viewer pane.
+This application allows you to view all of the parts that define the Kireji Web Framework and the Demo Ecosystem. It includes a sidebar pane and a property viewer pane.
 
 By clicking on a part in the sidebar, you can view the properties of that part and its contribution - if any - to the minimal perfect hash function that provides the ecosystem's optimal state compression.
 

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

@@ -61,7 +61,6 @@ const pointerConfig = {
   this.dragPreviewElement.style = `left:${pointerEvent.clientX}px;top:${pointerEvent.clientY - this.dragPreviewElement.clientHeight}px`
  },
  drop(pointerEvent) {
-  // TODO: break into separate "click" and "drop" handlers.
   const
    draggedItemWasDroppedOntoItself = inRect(pointerEvent, TARGET_ELEMENT.getBoundingClientRect()),
    draggedItemWasDroppedOntoTabGroup = inRect(pointerEvent, tabGroup.container.getBoundingClientRect()),

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

@@ -0,0 +1,5 @@
+return (
+ "<div id=part-issues>" + (
+  "A list of my known issues goes here."
+ ) + "</div>"
+)

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

@@ -0,0 +1,3 @@
+{
+ "extends": "section.."
+}

package/src/app/kireji/editor/sections/issues/title

@@ -0,0 +1 @@
+Issues

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

@@ -2,23 +2,23 @@ return (
  instances.includes(activePart) ? (
   activePart.disabled ? (
    "<p class=disabled-message>This part is currently disabled.</p>" +
-   "<h3>Integer</h3>" +
-   `<pre id=live-route-id>-1</pre>` +
-   "<hr>" +
    "<h3>Hash</h3>" +
    `<pre id=live-route-hash></pre>` +
    "<hr>" +
-   "<h3>Model</h3>" +
+   "<h3>Integer</h3>" +
+   `<pre id=live-route-id>-1</pre>` +
+   "<hr>" +
+   "<h3>JSON</h3>" +
    `<pre id=live-model></pre>`
   ) : (
    "<p class=disabled-message></p>" +
-   "<h3>Integer</h3>" +
-   `<pre id=live-route-id>${activePart.routeID}</pre>` +
-   "<hr>" +
    "<h3>Hash</h3>" +
    `<pre id=live-route-hash>${encodeSegment(activePart.routeID) || "&nbsp;"}</pre>` +
    "<hr>" +
-   "<h3>Model</h3>" +
+   "<h3>Integer</h3>" +
+   `<pre id=live-route-id>${activePart.routeID}</pre>` +
+   "<hr>" +
+   "<h3>JSON</h3>" +
    `<pre id=live-model>${serialize(activePart.model)}</pre>`
   )
  ) : (

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

@@ -13,7 +13,6 @@ let cardinality = 1n
 
 for (let tabCount = 1n, permutationSize = 1n, payloadSize = 1n; tabCount <= subjectCount; tabCount++) {
 
- // TODO: Replace implementation.
  LSB[tabCount - 1n] = tabCount & -tabCount
 
  if (tabCount > maxTabCount)

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

@@ -2,10 +2,7 @@ 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

package/src/app/kireji/issue-tracker/constants.js

@@ -0,0 +1,3 @@
+const kirejiIssueTracker = this
+const kirejiIssueSections = kirejiIssueTracker.sections
+const kirejiIssueFilters = kirejiIssueTracker.filters

package/src/app/kireji/issue-tracker/filters/apply.js

@@ -0,0 +1,29 @@
+const {
+ order: { by, descending },
+ priority,
+ status
+} = kirejiIssueFilters.model
+
+const key = by === "date" ? "key" : by
+
+return ISSUES
+ .filter(issue => status[issue.status] && priority[issue.priority.toLowerCase()])
+ .sort(({ [key]: a }, { [key]: b }) => {
+
+  // Logic: Handle the 'key' (timestamp) as a number
+  if (by === 'date') {
+   a = parseInt(a, 10)
+   b = parseInt(b, 10)
+  } else if (by === "title") {
+   a = a.toLowerCase()
+   b = b.toLowerCase()
+  }
+
+  if (a < b)
+   return descending ? 1 : -1
+
+  if (a > b)
+   return descending ? -1 : 1
+
+  return 0
+ })

package/src/app/kireji/issue-tracker/filters/boolean/part.json

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

package/src/app/kireji/issue-tracker/filters/boolean/point.js

@@ -0,0 +1,7 @@
+pointer.handle({
+ click() {
+  boolean.toggle()
+ },
+ POINTER_EVENT,
+ TARGET_ELEMENT
+})

package/src/app/kireji/issue-tracker/filters/boolean/view-update.js

@@ -0,0 +1 @@
+Q(`#issue-tracker_kireji_app .toggle-control.${boolean.key}`).setAttribute("data-state", boolean.model ? "enabled" : "disabled")

package/src/app/kireji/issue-tracker/filters/constants.js

@@ -0,0 +1,2 @@
+const kirejiIssueFilters = this
+const kirejiIssueTracker = kirejiIssueFilters[".."]

package/src/app/kireji/issue-tracker/filters/dropdown/constants.js

@@ -0,0 +1,2 @@
+const kirejiIssueFiltersDropdown = this
+const kirejiIssueFilters = kirejiIssueFiltersDropdown[".."]

package/src/app/kireji/issue-tracker/filters/dropdown/none/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/dropdown/part.html_.js

@@ -0,0 +1,15 @@
+const key = kirejiIssueFiltersDropdown.model
+
+switch (key) {
+ case "none":
+  return ""
+
+ case "priority":
+ case "status":
+  return `<div id=issue-filter-dropdown class="issue-filter-dropdown-${key}">` + kirejiIssueFilters[key].map(boolean => (
+   `<span ${boolean.pointAttr()} id="color-control" tabIndex=0 data-state="${boolean.model ? "enabled" : "disabled"}" class="toggle-control ${boolean.key}">` + (
+    `<span class="label">${key === "status" ? boolean.key : boolean.key.toUpperCase()}:</span><flex-spacer></flex-spacer>` +
+    `<span class="base"><span class="handle"></span></span>`
+   ) + "</span>"
+  )).join("") + "</div>"
+}

package/src/app/kireji/issue-tracker/filters/dropdown/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "match"
+}

package/src/app/kireji/issue-tracker/filters/dropdown/priority/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/dropdown/status/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/dropdown/type.d.ts

@@ -0,0 +1,12 @@
+declare interface IKirejiIssueFiltersDropdown
+ extends IMatch<IKirejiIssueFilters, IPartAny>,
+ IWebComponent {
+
+ // Subparts
+ readonly none: IPart<IKirejiIssueFiltersDropdown, null>
+ readonly order: IPart<IKirejiIssueFiltersDropdown, null>
+ readonly priority: IPart<IKirejiIssueFiltersDropdown, null>
+ readonly status: IPart<IKirejiIssueFiltersDropdown, null>
+}
+
+declare const kirejiIssueFiltersDropdown: IKirejiIssueFiltersDropdown

package/src/app/kireji/issue-tracker/filters/dropdown/view-update.js

@@ -0,0 +1,10 @@
+Q("#issue-filter-dropdown")?.remove()
+
+if (kirejiIssueFiltersDropdown.model === "none")
+ return
+
+Q(".issue-row.header").appendChild((() => {
+ const offscreen = document.createElement("div")
+ offscreen.innerHTML = kirejiIssueFiltersDropdown["part.html"]
+ return offscreen.querySelector("#issue-filter-dropdown")
+})())

package/src/app/kireji/issue-tracker/filters/order/by/date/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/order/by/part.json

@@ -0,0 +1,9 @@
+{
+ "extends": "match",
+ "order": [
+  "title",
+  "priority",
+  "status",
+  "date"
+ ]
+}

package/src/app/kireji/issue-tracker/filters/order/by/priority/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/order/by/status/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/order/by/title/part.json

@@ -0,0 +1 @@
+{}

package/src/app/kireji/issue-tracker/filters/order/by/type.d.ts

@@ -0,0 +1,11 @@
+declare interface IKirejiIssueFiltersOrderBy
+ extends IMatch<IKirejiIssueFilters, IPartAny> {
+
+ // Subparts
+ readonly date: IPart<IKirejiIssueFiltersOrderBy, null>
+ readonly priority: IPart<IKirejiIssueFiltersOrderBy, null>
+ readonly status: IPart<IKirejiIssueFiltersOrderBy, null>
+ readonly title: IPart<IKirejiIssueFiltersOrderBy, null>
+}
+
+declare const kirejiIssueFiltersOrderBy: IKirejiIssueFiltersOrderBy

package/src/app/kireji/issue-tracker/filters/order/by/view-update.js

@@ -0,0 +1,2 @@
+Q(".issue-row.header>[data-order]").removeAttribute("data-order")
+Q(`.issue-row.header>.issue-${match.arm.key}`).setAttribute("data-order", "")

package/src/app/kireji/issue-tracker/filters/order/descending/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean"
+}

package/src/app/kireji/issue-tracker/filters/order/descending/view-update.js

@@ -0,0 +1,6 @@
+const orders = ["descending", "ascending"]
+
+if (boolean.model)
+ orders.reverse()
+
+Q(".issue-row.header").classList.replace(...orders)

package/src/app/kireji/issue-tracker/filters/order/part.json

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

package/src/app/kireji/issue-tracker/filters/order/type.d.ts

@@ -0,0 +1,10 @@
+declare interface IKirejiIssueFiltersOrder
+ extends IMix<IKirejiIssueFilters, IPartAny>,
+ IWebComponent {
+
+ // Subparts
+ readonly by: IKirejiIssueFiltersOrderBy
+ readonly descending: IBoolean<IKirejiIssueFiltersOrder>
+}
+
+declare const kirejiIssueFiltersOrder: IKirejiIssueFiltersOrder

package/src/app/kireji/issue-tracker/filters/part.css

@@ -0,0 +1,149 @@
+#issue-tracker_kireji_app .header svg {
+ display: block;
+ fill: none;
+ stroke: var(--fg);
+ stroke-width: 2;
+ height: var(--spacing);
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ padding: 0 calc(var(--spacing) / 4);
+}
+
+body.modern #issue-tracker_kireji_app .header>span {
+ padding-left: calc(var(--spacing) * 1.5);
+}
+
+body.vintage #issue-tracker_kireji_app .header svg {
+ padding: 4px;
+ box-shadow: var(--deep-outset);
+ height: calc(8px + var(--spacing));
+ /* Modified version of `--deep-inset`. */
+ box-shadow:
+  inset -1px -1px black,
+  inset 0 1px var(--bg-light-er),
+  inset -2px -2px var(--bg-dark),
+  inset 1px 2px var(--bg-light-est);
+}
+
+body.vintage #issue-tracker_kireji_app .header>:is(.issue-status, .issue-priority) {
+ box-shadow:
+  inset 0 -1px black,
+  inset 1px 1px var(--bg-light-er),
+  inset -1px -2px var(--bg-dark),
+  inset 2px 2px var(--bg-light-est);
+}
+
+body.modern #issue-tracker_kireji_app .header {
+ --border-color: var(--bg);
+ border-bottom: 1px solid var(--border-color);
+}
+
+body.modern.dark #issue-tracker_kireji_app .header {
+ --border-color: var(--bg-un-mode);
+}
+
+body.vintage #issue-tracker_kireji_app .header {
+ margin-right: var(--scrollbar-width);
+}
+
+body.vintage #issue-tracker_kireji_app .header>* {
+ box-shadow: var(--deep-outset);
+}
+
+body.vintage #issue-tracker_kireji_app .header>[data-order]::before {
+ margin-right: 2px;
+}
+
+#issue-tracker_kireji_app .header>[data-order]::before {
+ content: "▼";
+}
+
+#issue-tracker_kireji_app .header.ascending>[data-order]::before {
+ content: "▲";
+}
+
+body.modern #issue-tracker_kireji_app .header>span:not([data-order]) {
+ content: "";
+}
+
+body.modern #issue-tracker_kireji_app .header>span::before {
+ position: absolute;
+ left: 0;
+ width: calc(1.5 * var(--spacing));
+ text-align: center;
+}
+
+body.vintage #issue-tracker_kireji_app .header:has(.issue-filter-dropdown-status)>.issue-filter-status,
+body.vintage #issue-tracker_kireji_app .header:has(.issue-filter-dropdown-priority)>.issue-filter-priority,
+body.vintage #issue-tracker_kireji_app .header>.down {
+ box-shadow: inset 0 0 0 1px var(--bg-dark-er);
+ background: var(--bg-checker), white;
+ padding: 5px 3px 3px 5px;
+}
+
+body.vintage #issue-tracker_kireji_app .header>.down {
+ background: transparent;
+}
+
+#issue-tracker_kireji_app #issue-filter-dropdown {
+ position: absolute;
+ top: 100%;
+}
+
+body.vintage #issue-tracker_kireji_app .issue-filter-dropdown-status {
+ right: calc(7 * var(--spacing));
+}
+
+body.vintage #issue-tracker_kireji_app .issue-filter-dropdown-priority {
+ right: 160px;
+}
+
+body.modern #issue-tracker_kireji_app .issue-filter-dropdown-status {
+ right: calc(7 * var(--spacing));
+}
+
+body.modern #issue-tracker_kireji_app .issue-filter-dropdown-priority {
+ right: calc(13 * var(--spacing));
+}
+
+#issue-tracker_kireji_app #issue-filter-dropdown {
+ background-color: var(--bg);
+ z-index: 1000;
+}
+
+body.vintage.dark #issue-tracker_kireji_app #issue-filter-dropdown {
+ background-color: var(--bg-dark);
+}
+
+body.modern #issue-tracker_kireji_app #issue-filter-dropdown {
+ padding: var(--spacing);
+ border-radius: calc(var(--spacing) / 2)
+}
+
+#issue-tracker_kireji_app:has(#issue-filter-dropdown) .issue-table {
+ pointer-events: none;
+}
+
+body.vintage #issue-tracker_kireji_app .header:after {
+ position: absolute;
+ right: calc(var(--scrollbar-width) * -1);
+ top: 0;
+ bottom: 0;
+ width: var(--scrollbar-width);
+ box-shadow: var(--deep-outset);
+ pointer-events: none;
+ content: "";
+}
+
+body.vintage #issue-tracker_kireji_app .header>:is(.issue-priority, .issue-status) {
+ width: calc(var(--column-width) - var(--spacing) - 8px);
+}
+
+body.modern #issue-tracker_kireji_app .header>:is(.issue-priority, .issue-status) {
+ width: calc(var(--column-width) - calc(1.5 * var(--spacing)));
+ text-align: center;
+}
+
+body.modern #issue-tracker_kireji_app .header>span:not(.issue-title) {
+ box-shadow: inset 0.5px 0 0 var(--border-color), -0.5px 0 0 var(--border-color);
+}

package/src/app/kireji/issue-tracker/filters/part.html_.js

@@ -0,0 +1,13 @@
+const filterIcon = key => `<svg ${kirejiIssueFilters.pointAttr()} viewBox="0 0 24 24" class="issue-filter-${key}"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>`
+const { by, descending } = kirejiIssueFilters.order.model
+const dropdown = kirejiIssueFilters.dropdown.model
+
+return (
+ `<section class="issue-row header ${descending ? "descending" : "ascending"}">` + (
+  `<span ${kirejiIssueFilters.pointAttr()} class="issue-title"${by === "title" ? " data-order" : ""}>Issue</span>` +
+  `<span ${kirejiIssueFilters.pointAttr()} class="issue-priority"${by === "priority" ? " data-order" : ""} title="Priority">!</span>${filterIcon("priority")}` +
+  `<span ${kirejiIssueFilters.pointAttr()} class="issue-status"${by === "status" ? " data-order" : ""}>Status</span>${filterIcon("status")}` +
+  `<span ${kirejiIssueFilters.pointAttr()} class="issue-date"${by === "date" ? " data-order" : ""}>Created</span>` +
+  kirejiIssueFilters.dropdown["part.html"]
+ ) + "</section>"
+)

package/src/app/kireji/issue-tracker/filters/part.json

@@ -0,0 +1,12 @@
+{
+ "extends": "mix",
+ "methods": {
+  "apply": [
+   "ISSUES"
+  ],
+  "point": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT"
+  ]
+ }
+}

package/src/app/kireji/issue-tracker/filters/point.js

@@ -0,0 +1,27 @@
+pointer.handle({
+ click() {
+  if (TARGET_ELEMENT.hasAttribute("data-order")) {
+   kirejiIssueFilters.order.descending.toggle()
+   return
+  }
+
+  const className = TARGET_ELEMENT.classList.values().find(className => className.startsWith("issue-"))
+
+  if (!className)
+   throw "Unexpected item passed to issue filter's pointer handler."
+
+  const key = className.split("-").pop()
+
+  if (className.includes("filter")) {
+   if (kirejiIssueFilters.dropdown.model === key)
+    kirejiIssueFilters.dropdown.setModel("none")
+   else
+    kirejiIssueFilters.dropdown.setModel(key)
+  } else {
+   kirejiIssueFilters.order.descending.clear()
+   kirejiIssueFilters.order.by.setModel(key)
+  }
+ },
+ TARGET_ELEMENT,
+ POINTER_EVENT
+})

package/src/app/kireji/issue-tracker/filters/priority/a/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean..."
+}

package/src/app/kireji/issue-tracker/filters/priority/b/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean..."
+}

package/src/app/kireji/issue-tracker/filters/priority/c/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean..."
+}

package/src/app/kireji/issue-tracker/filters/priority/part.json

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

package/src/app/kireji/issue-tracker/filters/priority/type.d.ts

@@ -0,0 +1,11 @@
+declare interface IKirejiIssueFiltersPriority
+ extends IMix<IKirejiIssueFilters, IBoolean<IKirejiIssueFiltersPriority>>,
+ IWebComponent {
+
+ // Subparts
+ readonly a: IBoolean<IKirejiIssueFiltersPriority>
+ readonly b: IBoolean<IKirejiIssueFiltersPriority>
+ readonly c: IBoolean<IKirejiIssueFiltersPriority>
+}
+
+declare const kirejiIssueFiltersPriority: IKirejiIssueFiltersPriority

package/src/app/kireji/issue-tracker/filters/status/doing/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean..."
+}

package/src/app/kireji/issue-tracker/filters/status/done/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean..."
+}

package/src/app/kireji/issue-tracker/filters/status/part.json

@@ -0,0 +1,8 @@
+{
+ "extends": "mix",
+ "order": [
+  "to-do",
+  "doing",
+  "done"
+ ]
+}

package/src/app/kireji/issue-tracker/filters/status/to-do/part.json

@@ -0,0 +1,3 @@
+{
+ "extends": "boolean..."
+}

package/src/app/kireji/issue-tracker/filters/status/type.d.ts

@@ -0,0 +1,11 @@
+declare interface IKirejiIssueFiltersStatus
+ extends IMix<IKirejiIssueFilters, IPartAny>,
+ IWebComponent {
+
+ // Subparts
+ readonly a: IBoolean<IKirejiIssueFiltersPriority>
+ readonly b: IBoolean<IKirejiIssueFiltersPriority>
+ readonly c: IBoolean<IKirejiIssueFiltersPriority>
+}
+
+declare const kirejiIssueFiltersStatus: IKirejiIssueFiltersStatus

package/src/app/kireji/issue-tracker/filters/type.d.ts

@@ -0,0 +1,17 @@
+declare interface IKirejiIssueFilters
+ extends IMix<IKirejiIssueTrackerApp, IPartAny>,
+ IWebComponent {
+
+ // Subparts
+ readonly dropdown: IKirejiIssueFiltersDropdown
+ readonly order: IKirejiIssueFiltersOrder
+ readonly priority: IKirejiIssueFiltersPriority
+ readonly status: IKirejiIssueFiltersStatus
+
+ // Serialized Properties.
+ readonly apply(ISSUES: IKirejiIssues): IKirejiIssue[]
+}
+
+declare const kirejiIssueFilters: IKirejiIssueFilters
+/** The incoming argument for the kireji issue filter `apply()` method. */
+declare const ISSUES: IKirejiIssues

package/src/app/kireji/issue-tracker/filters/view-hydrate.js

@@ -0,0 +1,15 @@
+client.promise.then(() => {
+
+ document.addEventListener('pointerdown', pointerEvent => {
+  const key = kirejiIssueFilters.dropdown.model
+  if (key !== "none" && !inRect(pointerEvent, Q("#issue-filter-dropdown").getBoundingClientRect())) {
+
+   if (inRect(pointerEvent, Q("#issue-tracker_kireji_app .issue-table").getBoundingClientRect()) || inRect(pointerEvent, Q(`#issue-tracker_kireji_app .header>.issue-filter-${key}`).getBoundingClientRect())) {
+    pointerEvent.stopPropagation()
+    pointerEvent.preventDefault()
+   }
+
+   kirejiIssueFilters.dropdown.setModel("none")
+  }
+ }, { capture: true })
+})

package/src/app/kireji/issue-tracker/filters/view-update.js

@@ -0,0 +1 @@
+Q(".issue-table>scroller->scroll-content").innerHTML = kirejiIssueTracker["issues.html"]

package/src/app/kireji/issue-tracker/issues.html_.js

@@ -0,0 +1 @@
+return kirejiIssueFilters.apply(kirejiIssueSections.issues).map(issue => issue["card.html"]).join("\n  ")

package/src/app/kireji/issue-tracker/menu-appear-on

@@ -0,0 +1 @@
+1

package/src/app/kireji/issue-tracker/part.css_.js

@@ -0,0 +1 @@
+return kirejiIssueTracker.scroller["part.css"] + kirejiIssueFilters["part.css"] + kirejiIssueTracker["static.css"]